.fade-slide-in,
.fade-slide-right,
.fade-slide-left {
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s ease-out;
}

.fade-slide-in {
    transform: translateY(20px);
}

.fade-slide-right {
    transform: translateX(40px);
}

.fade-slide-left {
    transform: translateX(-40px);
}

.animate.fade-slide-in,
.animate.fade-slide-right,
.animate.fade-slide-left {
    opacity: 1;
    transform: translate(0);
    pointer-events: auto;
}

.bounce-in {
    opacity: 0;
    pointer-events: none;
}

.animate.bounce-in {
    opacity: 1;
    animation: bounceIn 0.6s ease-out;
    pointer-events: auto;
}

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

    60% {
        opacity: 1;
        transform: scale(1.1);
    }

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

.jack-in-the-box {
    transform-origin: center bottom;
    opacity: 0;
}

.animate.jack-in-the-box {
    animation: jackInTheBox 1s ease both;
    opacity: 1;
}

@keyframes jackInTheBox {
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(30deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    70% {
        transform: rotate(3deg);
    }

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