/* ==========================================================
   ANIMATIONS
   File: css/components/animations.css
========================================================== */

/* Fade In Animation */

.fade-up{
    opacity:0;
    transform:translateY(24px);
    transition:
        opacity .85s ease,
        transform .85s ease;
}

.fade-up.visible{
    opacity:1;
    transform:translateY(0);
}

.fade-up.delay-1{
    transition-delay:.15s;
}

.fade-up.delay-2{
    transition-delay:.30s;
}

.fade-up.delay-3{
    transition-delay:.45s;
}


/* ==========================================================
   MARQUEE ANIMATION
========================================================== */

@keyframes marquee{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}


/* ==========================================================
   LOADING SPINNER
========================================================== */

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}