:root {
    --delay-increment: 1s;
}

@media screen and (min-width: 1024px) {
    .bounce-in-top.show {
        -webkit-animation: bounce-in-top 1.1s both;
        animation: bounce-in-top 1.1s both;
    }

    @-webkit-keyframes bounce-in-top {
        0% {
            -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 0;
        }

        38% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
        }

        55% {
            -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        72% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        81% {
            -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        90% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        95% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }

    @keyframes bounce-in-top {
        0% {
            -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 0;
        }

        38% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
        }

        55% {
            -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        72% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        81% {
            -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        90% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        95% {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }

    .slide-in-left {
        opacity: 0;
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .slide-in-left.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .slide-in-right {
        opacity: 0;
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .slide-in-right.show {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .scale-up-center.show {
        -webkit-animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
        animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
    }

    @-webkit-keyframes scale-up-center {
        0% {
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }

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

    @keyframes scale-up-center {
        0% {
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }

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

    .scale-in-center {
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }

    .scale-in-center.show {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    .slide-top {
        opacity: 0;
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .slide-top.show {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }


    .rotate-90-cw {
        opacity: 0;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .rotate-90-cw.show {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }



    /* Transitions Time */
    .delay-2ms {
        --transition-delay: calc(0s + var(--delay-increment) * 0.2);
        transition-delay: var(--transition-delay);
    }

    .delay-4ms {
        --transition-delay: calc(0s + var(--delay-increment) * 0.4);
        transition-delay: var(--transition-delay);
    }

    .delay-6ms {
        --transition-delay: calc(0s + var(--delay-increment) * 0.6);
        transition-delay: var(--transition-delay);
    }

    .delay-8ms {
        --transition-delay: calc(0s + var(--delay-increment) * 0.8);
        transition-delay: var(--transition-delay);
    }

    .delay-1 {
        transition-delay: var(--delay-increment);
    }

    .delay-2 {
        --transition-delay: calc(0s + var(--delay-increment) * 2);
        transition-delay: var(--transition-delay);
    }

    .delay-3 {
        --transition-delay: calc(0s + var(--delay-increment) * 3);
        transition-delay: var(--transition-delay);
    }

    .delay-4 {
        --transition-delay: calc(0s + var(--delay-increment) * 4);
        transition-delay: var(--transition-delay);
    }

    .delay-5 {
        --transition-delay: calc(0s + var(--delay-increment) * 5);
        transition-delay: var(--transition-delay);
    }
}