@charset "UTF-8";

[data-ani] {
    animation-duration: .7s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-fill-mode: both;
}
[data-ani].infinite {
    animation-iteration-count: infinite;
}
[data-delay='.2s'] {
    animation-delay: .2s;
}
[data-delay='.8s'] {
    animation-delay: .8s;
}
@keyframes tada {
    from {
        transform: scale(1, 1)
    }
    10%, 20% {
        transform: scale(.9, .9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1, 1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        transform: scale(1.1, 1.1) rotate(-3deg)
    }
    to {
        transform: scale(1, 1)
    }
}
@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
.swiper-slide-active [data-ani='icon'] {
    animation-name: fadeIn, tada;
    animation-iteration-count: 1, infinite;
    animation-duration: .6s, 1.1s;
    animation-delay: .8s;
}
.swiper-slide-active [data-ani='fadeIn'] {
    animation-name: fadeIn;
}
@keyframes zoomInfinite {
    from {
        transform: scale(.9, .9);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}
.swiper-slide-active [data-ani='icon2'] {
    animation-name: fadeIn, zoomInfinite;
    animation-timing-function: ease-out;
    animation-iteration-count: 1, infinite;
    animation-direction: alternate;
    animation-duration: .6s, .9s;
    animation-delay: .8s
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(0, -130%);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInDown'] {
    animation-name: fadeInDown
}
@keyframes fadeInDownBig {
    from {
        opacity: 0;
        transform: translate(0, -1500px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInDownBig'] {
    animation-name: fadeInDownBig;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-130%, 0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInLeft'] {
    animation-name: fadeInLeft
}
@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate(-1500px, 0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInLeftBig'] {
    animation-name: fadeInLeftBig
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate(130%, 0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInRight'] {
    animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
    from {
        opacity: 0;
        transform: translate(1500px, 0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInRightBig'] {
    animation-name: fadeInRightBig;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(0, 130%);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInUp'] {
    animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
    from {
        opacity: 0;
        transform: translate(0, 1500px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInUpBig'] {
    animation-name: fadeInUpBig;
}
@keyframes fadeInTopLeft {
    from {
        opacity: 0;
        transform: translate(-100%, -100%);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInTopLeft'] {
    animation-name: fadeInTopLeft;
}
@keyframes fadeInTopRight {
    from {
        opacity: 0;
        transform: translate(100%, -100%);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInTopRight'] {
    animation-name: fadeInTopRight;
}
@keyframes fadeInBottomLeft {
    from {
        opacity: 0;
        transform: translate(-100%, 100%);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInBottomLeft'] {
    animation-name: fadeInBottomLeft;
}
@keyframes fadeInBottomRight {
    from {
        opacity: 0;
        transform: translate(100%, 100%);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='fadeInBottomRight'] {
    animation-name: fadeInBottomRight;
}
@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);
    }
}
.swiper-slide-active [data-ani='flipInX'] {
    backface-visibility: visible !important;
    animation-name: flipInX
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.3, .3);
    }
    50% {
        opacity: 1;
    }
}
.swiper-slide-active [data-ani='zoomIn'] {
    animation-name: zoomIn
}
@keyframes slideInDown {
    from {
        transform: translate(0, -100%);
        visibility: visible;
    }
    to {
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='slideInDown'] {
    animation-name: slideInDown;
}
@keyframes slideInLeft {
    from {
        transform: translate(-100%, 0);
        visibility: visible;
    }
    to {
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='slideInLeft'] {
    animation-name: slideInLeft;
}
@keyframes slideInRight {
    from {
        transform: translate(100%, 0);
        visibility: visible;
    }
    to {
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='slideInRight'] {
    animation-name: slideInRight;
}
@keyframes slideInUp {
    from {
        transform: translate(0, 100%);
        visibility: visible;
    }
    to {
        transform: translate(0, 0);
    }
}
.swiper-slide-active [data-ani='slideInUp'] {
    animation-name: slideInUp;
}
@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate(0, 100%);
    }
}
.fadeOutDown {
    animation-name: fadeOutDown;
}
@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate(-100%, 0);
    }
}
.fadeOutLeft {
    animation-name: fadeOutLeft;
}
@keyframes fadeOutRight {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate(100%, 0);
    }
}
.fadeOutRight {
    animation-name: fadeOutRight;
}
.ani {
    animation-duration: .85s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}
.ani.infinite {
    animation-iteration-count: infinite;
}