/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        transform: perspective(400px);
        opacity: 1;
    }
}

/* Animation Classes */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.wow {
    visibility: hidden;
}

.fadeIn {
    animation-name: fadeIn;
}

.fadeInUp {
    animation-name: fadeInUp;
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

.zoomIn {
    animation-name: zoomIn;
}

.rollIn {
    animation-name: rollIn;
}

.flipInY {
    animation-name: flipInY;
    backface-visibility: visible !important;
}

/* Animation Delays */
.delay-02s {
    animation-delay: 0.2s;
}

.delay-03s {
    animation-delay: 0.3s;
}

.delay-04s {
    animation-delay: 0.4s;
}

.delay-05s {
    animation-delay: 0.5s;
}

.delay-06s {
    animation-delay: 0.6s;
}

/* Animation Durations */
.animated.fast {
    animation-duration: 800ms;
}

.animated.faster {
    animation-duration: 500ms;
}

.animated.slow {
    animation-duration: 2s;
}

.animated.slower {
    animation-duration: 3s;
}