.jello-horizontal {
    -webkit-animation: jello-horizontal 1.2s both;
    animation: jello-horizontal 1.2s both;
}

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

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

@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

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


.tracking-in-expand-fwd {
    -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

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

@keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

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


.fade-slide-in {
    animation: fade-slide-in 0.9s ease-in-out both;
}

@keyframes fade-slide-in {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.8);
    }

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

.scaleup {
    animation: scaleup 1.2s ease-in-out both;
}


.slide-right {
    animation: slide-right 0.9s ease-in-out both;
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

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


.fadeIn {
    animation: fadeIn 2s ease-in-out both;
}

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

    100% {
        opacity: 1;
    }
}


.rotatecls {
    animation-name: rotate;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

@keyframes rotate {
    0% {
        transform: translateY(-200%) scale(0.7) rotate(180deg);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0%) scale(1) rotate(0deg);
    }
}

.animated {
    animation-duration: 2s !important;
}

.rotatefrom-left {
    animation-name: rotatefromLeft;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

@keyframes rotatefromLeft {
    0% {
        transform: translateX(-200%) scale(0.7) rotate(180deg);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateX(0%) scale(1) rotate(0deg);
    }
}


/* .listpage .bottom-img circle {
    animation-name: zoomScaleAnim;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
} */

@keyframes zoomScaleAnim {
    0% {
        transform: translatex(-10px) scale(0.9);
        opacity: 0;
    }

    10% {
        transform: translatex(10px) scale(1.1);
    }

    20% {
        transform: translatex(-10px) scale(1.2);
    }

    30% {
        transform: scale(1.3);
    }

    40% {
        transform: scale(1.2);
    }

    50% {
        transform: translatex(10px) scale(1.1);
    }

    60% {
        transform: scale(1.05);
    }

    75% {
        transform: translatex(10px) scale(1.0.2);
    }

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

.magictime {
    animation-duration: 2s !important;
}


@keyframes slide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -400px 0;
    }
}

.slide-in-elliptic-top-fwd {
    -webkit-animation: slide-in-elliptic-top-fwd 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-elliptic-top-fwd 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

@keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

.fadeUp {
    animation-name: fadeUp;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}

@keyframes fadeUp {
    0% {
        transform: translateY(100%);
        opacity: 0.5;
    }

    60% {
        transform: translateY(-10%);
        opacity: 1;
    }

    90% {
        transform: translateY(10%);
        opacity: 1;
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes scaleup {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    90% {
        transform: translateY(10%);
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        transform: translateY(0%);
    }
}

.scale-in-ver-bottom {
    -webkit-animation: scale-in-ver-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-ver-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scale-out-ver-top {
    -webkit-animation: scale-out-ver-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-ver-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/**
 * ----------------------------------------
 * animation scale-in-ver-bottom
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-ver-bottom {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;
    }
}

@keyframes scale-in-ver-bottom {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation scale-out-ver-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-ver-top {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

@keyframes scale-out-ver-top {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}


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

    60% {
        opacity: 1;
    }


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

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

    60% {
        opacity: 1;
    }

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

.lightSpeedUp {
    -webkit-animation-name: lightSpeedUp;
    animation-name: lightSpeedUp;
    animation-delay: 0.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.scale-in-hor-left {
    -webkit-animation: scale-in-hor-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-hor-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation scale-in-hor-left
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-hor-left {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-hor-left {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }
}

.fade-slide-left {
    animation: fade-slide-left 0.2s ease-in-out both;
}

@keyframes fade-slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%) scale(1);
    }

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

.fade-slide-right {
    animation: fade-slide-right 0.2s ease-out both;
}

@keyframes fade-slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%) scale(1);
    }

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