/* ANIMATE ANY TEXT  */


/* -------------------------------------------------------------------------------
---------------------------- SLIDE IN LEFT ---------------------------------------
------------------------------------------------------------------------------- */
@keyframes slideInLeft{
    from{
        transform: translateX(-300px);
    }

    to{
        transform: translateX(0);
    }
}


/* -------------------------------------------------------------------------------
---------------------------- SLIDE IN RIGHT ---------------------------------------
------------------------------------------------------------------------------- */

@keyframes slideInRight{
    from{
        transform: translateX(300px);
    }

    to{
        transform: translateX(0);
    }
}

/* -------------------------------------------------------------------------------
---------------------------- ROTATE  ---------------------------------------------
------------------------------------------------------------------------------- */

@keyframes rotate{
    from{
        transform: rotate(0);
    }

    to{
        transform: rotate(360deg);
    }
}

/* -------------------------------------------------------------------------------
---------------------------- ROTATE  ---------------------------------------------
------------------------------------------------------------------------------- */

@keyframes bounce {
    0%,20%,50%,80%,100%{
        transform: translateY(0);
    }

    40%{
        transform: translateY(-30px);
    }

    60%{
        transform: translateY(-15px);
    }
    
}
/* -------------------------------------------------------------------------------
---------------------------- UTILITY CLASSES--------------------------------------
------------------------------------------------------------------------------- */

.animate{
    animation-duration: 1s;
    animation-fill-mode: both;
}
.animate--linear{
    animation-timing-function: linear;
}

.animate--infinite{
    animation-iteration-count: infinite;
}

/* ----------------- ANIMATION DELAYs ------------------------ */
.animate--delay-1s{
    animation-delay: 1s;
}

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

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

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

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

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

.animate--delay-7s{
    animation-delay: 7s;
}

/* ------------------ ANIMATION SPEED ------------------------ */
.animate--fast{
    animation-duration: 0.6s;
}

.animate--slow{
    animation-duration: 3s;
}


/* --------------------------------------------------------------------------------
-------------------------- ANIMATION ----------------------------------------------
-------------------------------------------------------------------------------- */

/* -------------- SLIDE IN LEFT --------------- */
.slideInLeft{
    animation: slideInLeft 1s ease-in;
}

/* -------------- SLIDE IN RIGHT --------------- */
.slideInRight{
    animation: slideInRight 1s ease-in;
}

/* -------------- ROTATE --------------- */

.rotate{
    animation-name: rotate;
    animation-duration: 1s;
    animation-timing-function: linear;
    transform-origin: center;    
}

/* ----------------- BOUNCE ----------------------- */

.bounce{
    animation-name: bounce;
}