/* ===================================
   KEYFRAMES
=================================== */

@keyframes fadeUp {

    from {

        opacity: 0;
        transform: translateY(40px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

@keyframes fadeDown {

    from {

        opacity: 0;
        transform: translateY(-40px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes scaleIn {

    from {

        opacity: 0;
        transform: scale(.9);

    }

    to {

        opacity: 1;
        transform: scale(1);

    }

}

/* ===================================
   CLASSES
=================================== */

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.scale-in{

    animation:scaleIn .8s ease forwards;

}

/* Delays */

.delay-1{

    animation-delay:.15s;

}

.delay-2{

    animation-delay:.30s;

}

.delay-3{

    animation-delay:.45s;

}

.delay-4{

    animation-delay:.60s;

}

.delay-5{

    animation-delay:.75s;

}