/* 
    Animations
*/

/* Fade-In */

.fade-in {
    animation: fadeIn var(--animationDuration, 350ms) ease var(--animationDelay, 100ms) both;
}

.fade-in-translate {
    animation: fadeInTranslateX var(--animationDuration, 500ms) ease var(--animationDelay, 0s) both;

}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInTranslateX {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}