:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

.animated {
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
}

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

.animated.repeat-1 {
    animation-iteration-count: var(--animate-repeat);
}

.animated.repeat-2 {
    animation-iteration-count: calc(var(--animate-repeat)*2);
}

.animated.repeat-3 {
    animation-iteration-count: calc(var(--animate-repeat)*3);
}

.animated.delay-1s {
    animation-delay: var(--animate-delay);
}

.animated.delay-2s {
    animation-delay: calc(var(--animate-delay)*2);
}

.animated.delay-3s {
    animation-delay: calc(var(--animate-delay)*3);
}

.animated.delay-4s {
    animation-delay: calc(var(--animate-delay)*4);
}

.animated.delay-5s {
    animation-delay: calc(var(--animate-delay)*5);
}

.animated.faster {
    animation-duration: calc(var(--animate-duration)/2);
}

.animated.fast {
    animation-duration: calc(var(--animate-duration)*.8);
}

.animated.slow {
    animation-duration: calc(var(--animate-duration)*2);
}

.animated.slower {
    animation-duration: calc(var(--animate-duration)*3);
}

@media (prefers-reduced-motion: reduce),
print {
    .animated {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .animated[class*="Out"] {
        opacity: 0;
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

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

    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1;
    }

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

    100% {
        opacity: 0;
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
    }

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

    100% {
        opacity: 0;
    }
}

.zoomOut {
    animation-name: zoomOut;
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
    }

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

@keyframes fadeOutUp {
    0% {
        opacity: 1;
    }

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

.fadeOutUp {
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }

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

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }

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

.fadeOutLeft {
    animation-name: fadeOutLeft;
}

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

    100% {
        opacity: 1;
        transform: translateZ(0px);
    }
}

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

    100% {
        opacity: 1;
        transform: translateZ(0px);
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

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

@keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

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

.fadeOutDown {
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translate3d(0px, 2000px, 0px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0px);
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translate3d(0px, 2000px, 0px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0px);
    }
}

.fadeInUpBig {
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }

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

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
    }

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

.fadeOutUpBig {
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translate3d(0px, -2000px, 0px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0px);
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translate3d(0px, -2000px, 0px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0px);
    }
}

.fadeInDownBig {
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
    }

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

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
    }

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

.fadeOutDownBig {
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
}

@-webkit-keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        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);
    }

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

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        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);
    }

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

.bounceIn {
    animation-duration: calc(var(--animate-duration)*.75);
    animation-name: bounceIn;
}

@-webkit-keyframes bounceOut {
    20% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }

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

@keyframes bounceOut {
    20% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }

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

.bounceOut {
    animation-duration: calc(var(--animate-duration)*.75);
    animation-name: bounceOut;
}

@-webkit-keyframes tada {
    0% {
        transform: scaleX(1);
    }

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

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

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

    100% {
        transform: scaleX(1);
    }
}

@keyframes tada {
    0% {
        transform: scaleX(1);
    }

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

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

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

    100% {
        transform: scaleX(1);
    }
}

.tada {
    animation-name: tada;
}

@-webkit-keyframes flipInX {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

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

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

    80% {
        transform: perspective(400px) rotateX(-5deg);
    }

    100% {
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

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

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

    80% {
        transform: perspective(400px) rotateX(-5deg);
    }

    100% {
        transform: perspective(400px);
    }
}

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

@-webkit-keyframes fade-in-up-for-deal-notify {
    0% {
        transform: translate3d(0px, 30px, 0px);
    }

    100% {
        transform: translateZ(0px);
    }
}

@keyframes fade-in-up-for-deal-notify {
    0% {
        transform: translate3d(0px, 30px, 0px);
    }

    100% {
        transform: translateZ(0px);
    }
}

.fadeInUp {
    animation-name: fade-in-up-for-deal-notify;
}