@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        opacity: 0;
    }

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

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        opacity: 0;
    }

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

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

@-webkit-keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        opacity: 0;
    }
}

.slide-out-bottom {
    -webkit-animation: slide-out-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-out-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top-small {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }

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

@keyframes slide-in-top-small {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }

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

.slide-in-top-small {
    -webkit-animation: slide-in-top-small 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top-small 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.5s;
}

@-webkit-keyframes slide-out-top-small {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }
}

@keyframes slide-out-top-small {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }
}

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

@-webkit-keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }

    100% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
        /* opacity: 0; */
    }
}

@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }

    100% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
        /* opacity: 0; */
    }
}

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

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
        /* opacity: 0; */
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
        /* opacity: 0; */
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1; */
    }
}

.slide-in-top {
    -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0s;
}

@-webkit-keyframes shake-horizontal {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    25%,
    75% {
        -webkit-transform: translateX(-10px); /* Same intensity, fewer shakes */
        transform: translateX(-10px);
    }

    50% {
        -webkit-transform: translateX(10px); /* Same intensity, fewer shakes */
        transform: translateX(10px);
    }
}

@keyframes shake-horizontal {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    25%,
    75% {
        -webkit-transform: translateX(-10px); /* Same intensity, fewer shakes */
        transform: translateX(-10px);
    }

    50% {
        -webkit-transform: translateX(10px); /* Same intensity, fewer shakes */
        transform: translateX(10px);
    }
}

.shake-horizontal {
    -webkit-animation: shake-horizontal 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-horizontal 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}