/* Base animation settings */
.fade-up,
.fade-down,
.fade-left,
.fade-right {
    opacity: 0;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* Fade Up */
.fade-up {
    transform: translateY(20px);
    animation-name: fadeUp;
}

/* Fade Down */
.fade-down {
    transform: translateY(-20px);
    animation-name: fadeDown;
}

/* Fade Left */
.fade-left {
    transform: translateX(20px);
    animation-name: fadeLeft;
}

/* Fade Right */
.fade-right {
    transform: translateX(-20px);
    animation-name: fadeRight;
}

/* Fade In */
.fade-in{
    opacity:0;
    animation:fadeIn 0.5s ease forwards;
}

/* Fade Out */
.fade-out{
    opacity:1;
    animation:fadeOut 0.5s ease forwards;
}

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

@keyframes fadeOut{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

/* Keyframes */

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.delay-1 {
    animation-delay: 0.02s;
}

.delay-2 {
    animation-delay: 0.1s;
}

.delay-3 {
    animation-delay: 0.15s;
}

.delay-4 {
    animation-delay: 0.2s;
}

.delay-5 {
    animation-delay: 0.25s;
}

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