.anim, .top-menu, .img-hover img {
    transition: all 0.3s ease-in-out;
}

.non-anim, .btn-disabled {
    transition: none !important;
}

.img-hover img {transform: translateZ(0);}
a.img-hover:hover img,
a:hover .img-hover img,
a:focus .img-hover img,
a.img-hover:focus img {
    opacity: 0.85;
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animated.infinite {
    animation-iteration-count: infinite;
}

.animated.hinge {
    animation-duration: 2s;
}

.animated.fast {
    animation-duration: 0.5s;
}

/* #### pulse #### */
@keyframes pulse {
    0% {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

/* #### slide #### */
@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    animation-name: slideInRight;
}

/* #### bounce #### */
@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0) scaleX(0.9);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0) scaleX(2);
    }
}

.bounceOutRight {
    animation-name: bounceOutRight;
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation-duration: 0.75s;
    animation-name: bounceIn;
}

@keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: none;
    }
}

.bounceInDown {
    animation-name: bounceInDown;
}

@keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    100% {
        transform: none;
    }
}

.bounceInLeft {
    animation-name: bounceInLeft;
}

@keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        transform: none;
    }
}

.bounceInRight {
    animation-name: bounceInRight;
}

/* #### fade #### */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    animation-name: fadeOutRight;
}

/* #### zoom #### */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInDown {
    animation-name: zoomInDown;
}

/* #### back_entrances #### */
@keyframes backInDown {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.backInDown {
    animation-name: backInDown;
}

@keyframes backInLeft {
    0% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.backInLeft {
    animation-name: backInLeft;
}

@keyframes backInRight {
    0% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.backInRight {
    animation-name: backInRight;
}

@keyframes backInUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.backInUp {
    animation-name: backInUp;
}

/* #### flip #### */
@keyframes flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    backface-visibility: visible;
    animation-name: flip;
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.flipInX {
    backface-visibility: visible !important;
    animation-name: flipInX;
}

/* #### other #### */
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation-name: tada;
}

@keyframes shake {
    from, to {
        transform: translate3d(0, 0, 0);
    }

    25%, 75% {
        transform: translate3d(-5px, 0, 0);
    }

    50% {
        transform: translate3d(5px, 0, 0);
    }
}

.shake {
    animation-name: shake;
}

/* .loading-logo */
@keyframes loading-logo-bg {
    0% {
        transform: perspective(250px) rotateX(0deg) rotateY(0deg);
    }
    15% {
        background-color: var(--color-default);
    }
    16% {
        background-color: var(--color-primary);
    }
    50% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
        background-color: var(--color-primary);
    }
    65% {
        background-color: var(--color-primary);
    }
    66% {
        background-color: var(--color-default);
    }
    100% {
        transform: perspective(250px) rotateX(180deg) rotateY(-180deg);
    }
}
@keyframes loading-logo-icon {
    0% {
        transform: perspective(250px) rotateX(0deg) rotateY(0deg);
    }
    15% {
        transform: perspective(250px) rotateX(0deg) rotateY(0deg);
    }
    16% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
    }
    50% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
    }
    65% {
        transform: perspective(250px) rotateX(180deg) rotateY(0deg);
    }
    66% {
        transform: perspective(250px) rotateX(180deg) rotateY(180deg);
    }
    100% {
        transform: perspective(250px) rotateX(180deg) rotateY(180deg);
    }
}

.loading-logo {
    width: 120px;
    display: block;
    margin: 10px;
}
.loading-logo .loading-logo-in {
    background-color: var(--color-white);
    padding: 8px;
    animation: loading-logo-bg 1.1s infinite;
    border-radius: 5px;
}
.loading-logo .loading-logo-in img {
    display: block;
    max-width: 100%;
    animation: loading-logo-icon 1.1s infinite;
}

body.is-mobile .loading-logo .loading-logo-in {animation: flipInX 1s; background-color: var(--color-primary);}
body.is-mobile .loading-logo .loading-logo-in img {animation: none;}

/* .spinner */
.spinner {
    margin: 0 auto;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 16px;
    height: 16px;
    background: var(--color-primary);

    border-radius: 100%;
    display: inline-block;
    margin: 0 2px;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.white > div {background: var(--color-white);}

.spinner .bounce1 {
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

/* .ripple */
.click-effect, .click-effect2, .click-effect3 {position: relative; display: block; overflow: hidden;}
.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0);
    position: absolute;
    z-index: 9;
    opacity: 1;
}
.click-effect2 .ripple {
    background: rgba(0, 0, 0, 0.1);
}

.click-effect3 .ripple, .btn-link .ripple, .btn-default .ripple {
    background: rgba(185, 210, 223, 0.5);
}

.rippleEffect {
    animation: rippleDrop .4s linear;
}

@keyframes rippleDrop {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}