.animate {
    opacity: 0;
    transition: all 0.6s ease-out;
}

.animate.show {
    opacity: 1;
    transform: none;
}

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

.slide-up {
    transform: translateY(40px);
}

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

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

.zoom-in {
    transform: scale(0.8);
}

.rotate-in {
    transform: rotate(-15deg);
}

@media (min-width: 768px) {
    .animate-md {
        opacity: 0;
        transition: all 0.6s ease-out;
    }

    .animate-md.show {
        opacity: 1;
        transform: none;
    }
}