/*******************************************************************************
 * Copyright (c)2015-2016 Kobein d.o.o.. Spletna aplikacija - davčna blagajna.
 *
 * Vse informacije, teksti, izvorna koda, podatki in podobe na spletnem mestu
 * so predmet avtorske zaščite ter drugih oblik zaščite intelektualne lastnine.
 *
 * Prepovedano je kakršno koli reproduciranje..
 ******************************************************************************/

/*noinspection ALL*/
.login {
    /*background-color: #364150 !important;*/
    background: #fff url("/images/backgrounds/Service-Music-Business.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

#login.top-bar{
    background: rgb(65, 65, 146);
    height:     40px;
    width:      100%;
}

#login.top-bar span.fa {
    color:       rgb(255, 255, 255);
    margin-left: 20px;
    margin-top:  5px;
}

#login.top-bar h3 {
    font-size: 1.2em;
    margin:    0;
    padding:   10px 0;
}

.login .logo {
    margin: 10px;
    width: 15%;
}

.login .content {
    background-color:      rgb(236, 238, 241);
    border-radius:         7px;
    -moz-border-radius:    7px;
    -webkit-border-radius: 7px;
    box-shadow:            0 0 3px 1px rgb(183, 183, 183);
    margin:                150px auto 10px auto;
    overflow:              hidden;
    padding:               0 30px 30px;
    position:              relative;
    width:                 400px;
    -ms-border-radius:     7px;
    -o-border-radius:      7px;
}

.login .content h3 {
    color:       rgb(77, 179, 165);
    font-size:   28px;
    font-weight: 400 !important;
    padding:     10px 0 20px;
    text-align:  center;
}

.login .content h4 {
    color: rgb(85, 85, 85);
}

.login .content .hint {
    color:   rgb(153, 153, 153);
    margin:  15px 0 7px 0;
    padding: 0;
}
.login .content .login-form .form-group.has-error input {
    border: 1px solid rgb(169, 68, 66);
}

.login .content .login-form,
.login .content .forgot {
    margin: 0;
    padding: 0;
}

.login .content .form-control {
    border: 1px solid rgb(221, 227, 236);
    color: rgb(130, 144, 163);
    /*background-color: rgb(221, 227, 236);*/
    height: 43px;
}

.login .content .form-control:focus, .login .content .form-control:active {
    border: 1px solid rgb(195, 204, 218);
}

.login .content .form-control::-moz-placeholder {
    color: rgb(130, 144, 163);
    opacity: 1;
}

.login .content .form-control:-ms-input-placeholder {
    color: rgb(130, 144, 163);
}

.login .content .form-control::-webkit-input-placeholder {
    color: rgb(130, 144, 163);
}

.login .content select.form-control {
    padding-left:  9px;
    padding-right: 9px;
}

.login .content .forgot-form {
    display: none;
}

.login .content .register-form {
    display: none;
}

.login .content .form-title {
    font-weight:   300;
    margin-bottom: 25px;
}

.login .content .form-actions {
    border:        0;
    border-bottom: 1px solid rgb(238, 238, 238);
    clear:         both;
    margin-left:   -30px;
    margin-right:  -30px;
    padding:       0 30px 25px 30px;
}

.login-options {
    margin-bottom: 30px;
    overflow:      hidden;
}

.login-options h4 {
    color:       rgb(125, 145, 170) !important;
    float:       left;
    font-size:   15px;
    font-weight: 600;
}

.login-options .social-icons {
    float: right;
    padding-top: 3px;
}

.login-options .social-icons li a {
    border-radius:         15px 15px 15px 15px !important;
    -moz-border-radius:    15px 15px 15px 15px !important;
    -webkit-border-radius: 15px 15px 15px 15px !important;
}

.login .content .form-actions .checkbox {
    margin-left: 0;
    padding-left: 0;
}

.login .content .forgot-form .form-actions {
    border:         0;
    margin-bottom:  0;
    padding-bottom: 20px;
}

.login .content .register-form .form-actions {
    border:         0;
    margin-bottom:  0;
    padding-bottom: 0;
}

.login .content .form-actions .btn {
    margin-top: 1px;
}

.login .content .form-actions .btn-success {
    font-weight: 600;
    padding:     10px 20px !important;
}

.login .content .form-actions .btn-default {
    background-color: rgb(255, 255, 255);
    border:           none;
    color:            rgb(108, 122, 141);
    font-weight:      600;
    padding:          10px 25px !important;
}

.login .content .form-actions .btn-default:hover {
    background-color: rgb(250, 250, 255);
    color: rgb(69, 182, 175);
}

.login .content #forgot-password {
    cursor: pointer;
}

.login .content .forgot-password {
    display:    inline-block;
    float:      right;
    font-size:  14px;
    margin-top: 10px;
}

.login .content .check {
    color: rgb(130, 144, 163);
}

.login .content .rememberme {
    margin-left: 8px;
    margin-top:  10px;
}

.login .content .create-account {
    background-color:      rgb(108, 122, 141);
    border-radius:         0 0 7px 7px;
    -moz-border-radius:    0 0 7px 7px;
    -webkit-border-radius: 0 0 7px 7px;
    margin:                0 -40px -30px -40px;
    padding:               15px 0 17px 0;
    text-align:            center;
    -ms-border-radius:     0 0 7px 7px;
    -o-border-radius:      0 0 7px 7px;
}

.login .content .create-account p span {
    color: rgb(195, 206, 221) !important;
}

.login .content .create-account p a {
    color:       rgb(195, 206, 221);
    font-size:   14px;
    font-weight: 600;
}

.login .content .create-account a {
    display: inline-block;
    margin-top: 5px;
}

.login .content #register-accountant-btn {
    border-radius:         0 0 7px 7px;
    -moz-border-radius:    0 0 7px 7px;
    -webkit-border-radius: 0 0 7px 7px;
    margin:                0 -40px -30px -40px;
    text-align:            center;
    -ms-border-radius:     0 0 7px 7px;
    -o-border-radius:      0 0 7px 7px;
}
.login .copyright {
    color:      rgb(122, 140, 165);
    font-size:  13px;
    margin:     0 auto 30px 0;
    padding:    10px;
    text-align: center;
}

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display:            inline-block;
    opacity:            0;
    transition:         transform 0.3s, opacity 0.2s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.2s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
    content:           '[';
    margin-right:      10px;
    transform:         translateX(20px);
    -moz-transform:    translateX(20px);
    -webkit-transform: translateX(20px);
}

.cl-effect-1 a::after {
    content:           ']';
    margin-left:       10px;
    transform:         translateX(-20px);
    -moz-transform:    translateX(-20px);
    -webkit-transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    opacity:           1;
    transform:         translateX(0px);
    -moz-transform:    translateX(0px);
    -webkit-transform: translateX(0px);
}

/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

.cl-effect-2 a span {
    background:               #2195de;
    display:                  inline-block;
    padding:                  0 14px;
    position:                 relative;
    transform-origin:         50% 0;
    -moz-transform-origin:    50% 0;
    -webkit-transform-origin: 50% 0;
    transition:               transform 0.3s;
    -moz-transition:          -moz-transform 0.3s;
    -webkit-transition:       -webkit-transform 0.3s;
    -webkit-transform-style:  preserve-3d;
    -moz-transform-style:     preserve-3d;
    transform-style:          preserve-3d;
}

.csstransforms3d .cl-effect-2 a span::before {
    background:               #0965a0;
    content:                  attr(data-hover);
    height:                   100%;
    left:                     0;
    position:                 absolute;
    top:                      100%;
    transform:                rotateX(-90deg);
    -moz-transform:           rotateX(-90deg);
    -webkit-transform:        rotateX(-90deg);
    transform-origin:         50% 0;
    -moz-transform-origin:    50% 0;
    -webkit-transform-origin: 50% 0;
    transition:               background 0.3s;
    -moz-transition:          background 0.3s;
    -webkit-transition:       background 0.3s;
    width:                    100%;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    transform:         rotateX(90deg) translateY(-22px);
    -moz-transform:    rotateX(90deg) translateY(-22px);
    -webkit-transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
    background: #28a2ee;
    color: #fff;
}

/* Effect 3: bottom line slides/fades in */
.cl-effect-3 a {
    padding: 8px 0;
}

.cl-effect-3 a::after {
    background:         rgba(0, 0, 0, 0.1);
    content:            '';
    height:             4px;
    left:               0;
    opacity:            0;
    position:           absolute;
    top:                100%;
    transform:          translateY(10px);
    -moz-transform:     translateY(10px);
    -webkit-transform:  translateY(10px);
    transition:         opacity 0.3s, transform 0.3s;
    -moz-transition:    opacity 0.3s, -moz-transform 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    width:              100%;
}

.cl-effect-3 a:hover::after,
.cl-effect-3 a:focus::after {
    opacity:           1;
    transform:         translateY(0px);
    -moz-transform:    translateY(0px);
    -webkit-transform: translateY(0px);
}

/* Effect 4: bottom border enlarge */
.cl-effect-4 a {
    padding: 0 0 10px;
}

.cl-effect-4 a::after {
    background:         #fff;
    content:            '';
    height:             1px;
    left:               0;
    opacity:            0;
    position:           absolute;
    top:                100%;
    transform:          translateY(-10px);
    -moz-transform:     translateY(-10px);
    -webkit-transform:  translateY(-10px);
    transition:         height 0.3s, opacity 0.3s, transform 0.3s;
    -moz-transition:    height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    width:              100%;
}

.cl-effect-4 a:hover::after,
.cl-effect-4 a:focus::after {
    height:            5px;
    opacity:           1;
    transform:         translateY(0px);
    -moz-transform:    translateY(0px);
    -webkit-transform: translateY(0px);
}

/* Effect 5: same word slide in */
.cl-effect-5 a {
    height:   1em;
    overflow: hidden;
    padding:  0 4px;
}

.cl-effect-5 a span {
    display:            inline-block;
    position:           relative;
    transition:         transform 0.3s;
    -moz-transition:    -moz-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
}

.cl-effect-5 a span::before {
    content:           attr(data-hover);
    font-weight:       700;
    position:          absolute;
    top:               100%;
    transform:         translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
    transform:         translateY(-100%);
    -moz-transform:    translateY(-100%);
    -webkit-transform: translateY(-100%);
}

/* Effect 5: same word slide in and border bottom */
.cl-effect-6 a {
    margin: 0 10px;
    padding: 10px 20px;
}

.cl-effect-6 a::before {
    background:         #fff;
    content:            '';
    height:             2px;
    left:               0;
    position:           absolute;
    top:                0;
    transition:         top 0.3s;
    -moz-transition:    top 0.3s;
    -webkit-transition: top 0.3s;
    width:              100%;
}

.cl-effect-6 a::after {
    background:         #fff;
    content:            '';
    height:             2px;
    left:               0;
    position:           absolute;
    top:                0;
    transition:         height 0.3s;
    -moz-transition:    height 0.3s;
    -webkit-transition: height 0.3s;
    width:              2px;
}

.cl-effect-6 a:hover::before {
    opacity: 1;
    top:     100%;
}

.cl-effect-6 a:hover::after {
    height: 100%;
}

/* Effect 7: second border slides up */
.cl-effect-7 a {
    color:       #566473;
    font-weight: 700;
    padding:     12px 10px 10px;
    text-shadow: none;
}

.cl-effect-7 a::before,
.cl-effect-7 a::after {
    background:         #566473;
    content:            '';
    height:             3px;
    left:               0;
    position:           absolute;
    top:                100%;
    transform:          scale(0.85);
    -moz-transform:     scale(0.85);
    -webkit-transform:  scale(0.85);
    transition:         transform 0.3s;
    -moz-transition:    -moz-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    width:              100%;
}

.cl-effect-7 a::after {
    opacity:            0;
    transition:         top 0.3s, opacity 0.3s, transform 0.3s;
    -moz-transition:    top 0.3s, opacity 0.3s, -moz-transform 0.3s;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
}

.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
    transform:         scale(1);
    -moz-transform:    scale(1);
    -webkit-transform: scale(1);
}

.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
    opacity: 1;
    top:     0%;
}

/* Effect 8: border slight translate */
.cl-effect-8 a {
    padding: 10px 20px;
}

.cl-effect-8 a::before,
.cl-effect-8 a::after {
    border:             3px solid #354856;
    content:            '';
    height:             100%;
    left:               0;
    position:           absolute;
    top:                0;
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    width:              100%;
}

.cl-effect-8 a::after {
    border-color:      #fff;
    opacity:           0;
    transform:         translateY(-7px) translateX(6px);
    -moz-transform:    translateY(-7px) translateX(6px);
    -webkit-transform: translateY(-7px) translateX(6px);
}

.cl-effect-8 a:hover::before,
.cl-effect-8 a:focus::before {
    opacity:           0;
    transform:         translateY(5px) translateX(-5px);
    -moz-transform:    translateY(5px) translateX(-5px);
    -webkit-transform: translateY(5px) translateX(-5px);
}

.cl-effect-8 a:hover::after,
.cl-effect-8 a:focus::after {
    opacity:           1;
    transform:         translateY(0px) translateX(0px);
    -moz-transform:    translateY(0px) translateX(0px);
    -webkit-transform: translateY(0px) translateX(0px);
}

/* Effect 9: second text and borders */
.cl-effect-9 a {
    margin: 0 20px;
    padding: 18px 20px;
}

.cl-effect-9 a::before,
.cl-effect-9 a::after {
    background:         #fff;
    content:            '';
    height:             1px;
    left:               0;
    opacity:            0.2;
    position:           absolute;
    top:                0;
    transition:         opacity 0.3s, height 0.3s;
    -moz-transition:    opacity 0.3s, height 0.3s;
    -webkit-transition: opacity 0.3s, height 0.3s;
    width:              100%;
}

.cl-effect-9 a::after {
    opacity:            0;
    top:                100%;
    transform:          translateY(-10px);
    -moz-transform:     translateY(-10px);
    -webkit-transform:  translateY(-10px);
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}

.cl-effect-9 a span:first-child {
    display:     block;
    font-weight: 300;
    z-index:     2;
}

.cl-effect-9 a span:last-child {
    color:              rgba(0, 0, 0, 0.4);
    display:            block;
    font-family:        Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    font-size:          0.75em;
    font-style:         italic;
    opacity:            0;
    padding:            8px 0 0 0;
    text-shadow:        none;
    text-transform:     none;
    transform:          translateY(-100%);
    -moz-transform:     translateY(-100%);
    -webkit-transform:  translateY(-100%);
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    z-index:            1;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:focus::before {
    height: 6px;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:hover::after,
.cl-effect-9 a:focus::before,
.cl-effect-9 a:focus::after {
    opacity:           1;
    transform:         translateY(0px);
    -moz-transform:    translateY(0px);
    -webkit-transform: translateY(0px);
}

.cl-effect-9 a:hover span:last-child,
.cl-effect-9 a:focus span:last-child {
    opacity:           1;
    transform:         translateY(0%);
    -moz-transform:    translateY(0%);
    -webkit-transform: translateY(0%);
}

/* Effect 10: reveal, push out */
.cl-effect-10 {
    position: relative;
    z-index: 1;
}

.cl-effect-10 a {
    margin:   0 0;
    overflow: hidden;
}

.cl-effect-10 a:hover {
    color: #1CAF9A;
    text-decoration: none;
}

.cl-effect-10 a span {
    background:         #1caf9a;
    display:            block;
    padding:            10px 20px;
    transition:         transform 0.3s;
    -moz-transition:    -moz-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
}

.cl-effect-10 a::before {
    background:         #fff;
    border-bottom:      3px solid #1caf9a;
    color:              #1CAF9A;
    content:            attr(data-hover);
    font-size:          .9em;
    height:             100%;
    left:               0;
    padding:            12px 20px;
    position:           absolute;
    top:                0;
    -webkit-transform:  translateX(-25%);
    transition:         transform 0.3s;
    -moz-transition:    -moz-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    width:              100%;
    z-index:            -1;
}

.cl-effect-10 a:hover span,
.cl-effect-10 a:focus span {
    transform:         translateX(100%);
    -moz-transform:    translateX(100%);
    -webkit-transform: translateX(100%);
}

.cl-effect-10 a:hover::before,
.cl-effect-10 a:focus::before {
    transform:         translateX(0%);
    -moz-transform:    translateX(0%);
    -webkit-transform: translateX(0%);
}

/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
.cl-effect-11 a {
    border-top:  2px solid #0972b4;
    color:       #0972b4;
    padding:     10px 0;
    text-shadow: none;
}

.cl-effect-11 a::before {
    border-bottom:      2px solid #fff;
    color:              #fff;
    content:            attr(data-hover);
    left:               0;
    max-width:          0;
    overflow:           hidden;
    padding:            10px 0;
    position:           absolute;
    top:                0;
    transition:         max-width 0.5s;
    -moz-transition:    max-width 0.5s;
    -webkit-transition: max-width 0.5s;
}

.cl-effect-11 a:hover::before,
.cl-effect-11 a:focus::before {
    max-width: 100%;
}

/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
    border:             2px solid rgba(0, 0, 0, 0.1);
    border-radius:      50%;
    content:            '';
    height:             100px;
    left:               50%;
    opacity:            0;
    position:           absolute;
    top:                50%;
    transform:          translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform:     translateX(-50%) translateY(-50%) scale(0.2);
    -webkit-transform:  translateX(-50%) translateY(-50%) scale(0.2);
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    width:              100px;
}

.cl-effect-12 a::after {
    border-width:      6px;
    height:            90px;
    transform:         translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform:    translateX(-50%) translateY(-50%) scale(0.8);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    width:             90px;
}

.cl-effect-12 a:hover::before,
.cl-effect-12 a:hover::after,
.cl-effect-12 a:focus::before,
.cl-effect-12 a:focus::after {
    opacity:           1;
    transform:         translateX(-50%) translateY(-50%) scale(1);
    -moz-transform:    translateX(-50%) translateY(-50%) scale(1);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Effect 13: three circles */
.cl-effect-13 a {
    transition:         color 0.3s;
    -moz-transition:    color 0.3s;
    -webkit-transition: color 0.3s;
}

.cl-effect-13 a::before {
    color:              transparent;
    content:            '•';
    font-size:          1.2em;
    left:               50%;
    pointer-events:     none;
    position:           absolute;
    text-shadow:        0 0 transparent;
    top:                100%;
    transform:          translateX(-50%);
    -moz-transform:     translateX(-50%);
    -webkit-transform:  translateX(-50%);
    transition:         text-shadow 0.3s, color 0.3s;
    -moz-transition:    text-shadow 0.3s, color 0.3s;
    -webkit-transition: text-shadow 0.3s, color 0.3s;
}

.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {
    color: #fff;
    text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.cl-effect-13 a:hover,
.cl-effect-13 a:focus {
    color: #ba7700;
}

/* Effect 14: border switch */
.cl-effect-14 a {
    height:      45px;
    line-height: 45px;
    padding:     0 20px;
}

.cl-effect-14 a::before,
.cl-effect-14 a::after {
    background:         #fff;
    content:            '';
    height:             2px;
    opacity:            0.2;
    pointer-events:     none;
    position:           absolute;
    transition:         all 0.3s;
    -moz-transition:    all 0.3s;
    -webkit-transition: all 0.3s;
    width:              45px;
}

.cl-effect-14 a::before {
    left:                     0;
    top:                      0;
    transform:                rotate(90deg);
    -moz-transform:           rotate(90deg);
    -webkit-transform:        rotate(90deg);
    transform-origin:         0 0;
    -moz-transform-origin:    0 0;
    -webkit-transform-origin: 0 0;
}

.cl-effect-14 a::after {
    bottom:                   0;
    right:                    0;
    transform:                rotate(90deg);
    -moz-transform:           rotate(90deg);
    -webkit-transform:        rotate(90deg);
    transform-origin:         100% 0;
    -moz-transform-origin:    100% 0;
    -webkit-transform-origin: 100% 0;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::before,
.cl-effect-14 a:focus::after {
    opacity: 1;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:focus::before {
    left:              50%;
    transform:         rotate(0deg) translateX(-50%);
    -moz-transform:    rotate(0deg) translateX(-50%);
    -webkit-transform: rotate(0deg) translateX(-50%);
}

.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::after {
    right:             50%;
    transform:         rotate(0deg) translateX(50%);
    -moz-transform:    rotate(0deg) translateX(50%);
    -webkit-transform: rotate(0deg) translateX(50%);
}

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
    color:       rgba(0, 0, 0, 0.2);
    font-weight: 700;
    text-shadow: none;
}

.cl-effect-15 a::before {
    color:              #fff;
    content:            attr(data-hover);
    position:           absolute;
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
    opacity:           0;
    transform:         scale(0.9);
    -moz-transform:    scale(0.9);
    -webkit-transform: scale(0.9);
}

/* Effect 16: fall down */
.cl-effect-16 a {
    color: #6f8686;
    text-shadow: 0 0 1px rgba(111, 134, 134, 0.3);
}

.cl-effect-16 a::before {
    color:              #fff;
    content:            attr(data-hover);
    opacity:            0;
    pointer-events:     none;
    position:           absolute;
    text-shadow:        0 0 1px rgba(255, 255, 255, 0.3);
    transform:          scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    -moz-transform:     scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    -webkit-transform:  scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}

.cl-effect-16 a:hover::before,
.cl-effect-16 a:focus::before {
    opacity:           1;
    transform:         scale(1) translateX(0px) translateY(0px) rotate(0deg);
    -moz-transform:    scale(1) translateX(0px) translateY(0px) rotate(0deg);
    -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
}

/* Effect 17: move up fade out, push border */
.cl-effect-17 a {
    color:       #10649b;
    padding:     10px 0;
    text-shadow: none;
}

.cl-effect-17 a::before {
    color:              #fff;
    content:            attr(data-hover);
    pointer-events:     none;
    position:           absolute;
    text-shadow:        0 0 1px rgba(255, 255, 255, 0.3);
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}

.cl-effect-17 a::after {
    background:         #fff;
    bottom:             0;
    content:            '';
    height:             2px;
    left:               0;
    opacity:            0;
    pointer-events:     none;
    position:           absolute;
    transform:          translateY(5px);
    -moz-transform:     translateY(5px);
    -webkit-transform:  translateY(5px);
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    width:              100%;
}

.cl-effect-17 a:hover::before,
.cl-effect-17 a:focus::before {
    opacity:           0;
    transform:         translateY(-2px);
    -moz-transform:    translateY(-2px);
    -webkit-transform: translateY(-2px);
}

.cl-effect-17 a:hover::after,
.cl-effect-17 a:focus::after {
    opacity:           1;
    transform:         translateY(0px);
    -moz-transform:    translateY(0px);
    -webkit-transform: translateY(0px);
}

/* Effect 18: cross */
.cl-effect-18 {
    position: relative;
    z-index: 1;
}

.cl-effect-18 a {
    color:              #b4770d;
    font-weight:        700;
    padding:            0 5px;
    transition:         color 0.3s;
    -moz-transition:    color 0.3s;
    -webkit-transition: color 0.3s;
}

.cl-effect-18 a::before,
.cl-effect-18 a::after {
    background:         #b4770d;
    content:            '';
    height:             2px;
    left:               0;
    margin-top:         -1px;
    pointer-events:     none;
    position:           absolute;
    top:                50%;
    transition:         transform 0.3s, opacity 0.3s;
    -moz-transition:    -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    width:              100%;
    z-index:            -1;
}

.cl-effect-18 a::before {
    transform:         translateY(-20px);
    -moz-transform:    translateY(-20px);
    -webkit-transform: translateY(-20px);
}

.cl-effect-18 a::after {
    transform:         translateY(20px);
    -moz-transform:    translateY(20px);
    -webkit-transform: translateY(20px);
}

.cl-effect-18 a:hover,
.cl-effect-18 a:focus {
    color: #fff;
}

.cl-effect-18 a:hover::before,
.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::before,
.cl-effect-18 a:focus::after {
    opacity: 0.7;
}

.cl-effect-18 a:hover::before,
.cl-effect-18 a:focus::before {
    transform:         rotate(45deg);
    -moz-transform:    rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.cl-effect-18 a:hover::after,
.cl-effect-18 a:focus::after {
    transform:         rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* Effect 19: 3D side */
.cl-effect-19 a {
    line-height:         2em;
    margin:              15px;
    width:               200px;
    -webkit-perspective: 800px;
    -moz-perspective:    800px;
    perspective:         800px;
}

.cl-effect-19 a span {
    background:               #e35041;
    display:                  inline-block;
    padding:                  0 14px;
    position:                 relative;
    transform-origin:         50% 50% -100px;
    -moz-transform-origin:    50% 50% -100px;
    -webkit-transform-origin: 50% 50% -100px;
    transition:               transform 0.4s, background 0.4s;
    -moz-transition:          -moz-transform 0.4s, background 0.4s;
    -webkit-transition:       -webkit-transform 0.4s, background 0.4s;
    width:                    100%;
    -webkit-transform-style:  preserve-3d;
    -moz-transform-style:     preserve-3d;
    transform-style:          preserve-3d;
}

.csstransforms3d .cl-effect-19 a span::before {
    background:               #b53a2d;
    content:                  attr(data-hover);
    height:                   100%;
    left:                     100%;
    pointer-events:           none;
    position:                 absolute;
    top:                      0;
    transform:                rotateY(90deg);
    -moz-transform:           rotateY(90deg);
    -webkit-transform:        rotateY(90deg);
    transform-origin:         0 50%;
    -moz-transform-origin:    0 50%;
    -webkit-transform-origin: 0 50%;
    transition:               background 0.4s;
    -moz-transition:          background 0.4s;
    -webkit-transition:       background 0.4s;
    width:                    100%;
}

.cl-effect-19 a:hover span,
.cl-effect-19 a:focus span {
    background:        #b53a2d;
    transform:         rotateY(-90deg);
    -moz-transform:    rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
}

.csstransforms3d .cl-effect-19 a:hover span::before,
.csstransforms3d .cl-effect-19 a:focus span::before {
    background: #ef5e50;
}

/* Effect 20: 3D side */
.cl-effect-20 a {
    line-height: 2em;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}

.cl-effect-20 a span {
    background:               #587285;
    box-shadow:               inset 0 3px #2f4351;
    display:                  inline-block;
    font-size:                .9em;
    padding:                  3px 15px 5px;
    position:                 relative;
    transform-origin:         50% 0;
    transform-origin:         0% 50%;
    -moz-transform-origin:    50% 0;
    -moz-transform-origin:    0% 50%;
    -webkit-transform-origin: 50% 0;
    -webkit-transform-origin: 0% 50%;
    transition:               background 0.6s;
    -moz-transition:          background 0.6s;
    -webkit-transition:       background 0.6s;
    -webkit-transform-style:  preserve-3d;
    -moz-transform-style:     preserve-3d;
    transform-style:          preserve-3d;
}

.cl-effect-20 a span::before {
    background:               #fff;
    color:                    #2f4351;
    content:                  attr(data-hover);
    font-size:                .8em;
    height:                   100%;
    left:                     0;
    padding:                  5px 0 0 20px;
    pointer-events:           none;
    position:                 absolute;
    top:                      0;
    transform:                rotateX(270deg);
    -moz-transform:           rotateX(270deg);
    -webkit-transform:        rotateX(270deg);
    transform-origin:         0 0;
    -moz-transform-origin:    0 0;
    -webkit-transform-origin: 0 0;
    transition:               transform 0.6s;
    -moz-transition:          -moz-transform 0.6s;
    -webkit-transition:       -webkit-transform 0.6s;
    width:                    100%;
}

.cl-effect-20 a:hover span,
.cl-effect-20 a:focus span {
    background: #2f4351;
}

.cl-effect-20 a:hover span::before,
.cl-effect-20 a:focus span::before {
    transform:         rotateX(10deg);
    -moz-transform:    rotateX(10deg);
    -webkit-transform: rotateX(10deg);
}

/* Effect 21: borders slight translate */
.cl-effect-21 a {
    color:              #237546;
    font-weight:        700;
    padding:            10px;
    text-shadow:        none;
    transition:         color 0.3s;
    -moz-transition:    color 0.3s;
    -webkit-transition: color 0.3s;
}

.cl-effect-21 a::before,
.cl-effect-21 a::after {
    background:         #fff;
    content:            '';
    height:             2px;
    left:               0;
    opacity:            0;
    position:           absolute;
    transform:          translateY(-10px);
    -moz-transform:     translateY(-10px);
    -webkit-transform:  translateY(-10px);
    transition:         opacity 0.3s, transform 0.3s;
    -moz-transition:    opacity 0.3s, -moz-transform 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    width:              100%;
}

.cl-effect-21 a::before {
    top:               0;
    transform:         translateY(-10px);
    -moz-transform:    translateY(-10px);
    -webkit-transform: translateY(-10px);
}

.cl-effect-21 a::after {
    bottom:            0;
    transform:         translateY(10px);
    -moz-transform:    translateY(10px);
    -webkit-transform: translateY(10px);
}

.cl-effect-21 a:hover,
.cl-effect-21 a:focus {
    color: #fff;
}

.cl-effect-21 a:hover::before,
.cl-effect-21 a:focus::before,
.cl-effect-21 a:hover::after,
.cl-effect-21 a:focus::after {
    opacity:           1;
    transform:         translateY(0px);
    -moz-transform:    translateY(0px);
    -webkit-transform: translateY(0px);
}

.color-1 {
    background: #435a6b;
}

.color-2 {
    background: #f39c12;
}

.color-3 {
    background: #2ac56c;
}

.color-4 {
    background: #0e83cd;
}

.color-5 {
    background: #cd4436;
}

.color-6 {
    background: #f19f0f;
}

.color-7 {
    background: #3fa46a;
}

.color-8 {
    background: #ecf0f1;
}

.color-9 {
    background: #9e487f;
}

.color-10 {
    background: #16a085;
}

.color-11 {
    background: #aab7b7;
}

@media (max-width: 440px) {
    /***
    Login page
    ***/
    .login .logo {
        margin-top: 10px;
        width: 100%;
    }

    .login .content {
        margin-top: 10px;
        width: 280px;
    }

    .login .content h3 {
        font-size: 22px;
    }

    .forgot-password {
        display: inline-block;
        margin-top: 20px;
    }

    .login-options .social-icons {
        float: left;
        padding-top: 3px;
    }

    .login .checkbox {
        font-size: 13px;
    }
}