/* ANIMATION ELEMENT */


/* FADE RIGHT */
@keyframes fadeBottom{
    0% {
        transform: translateY(100%);
        opacity: 0;
        
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
        
        
    }
}

.fadeBottom{
    animation: fadeBottom 350ms both ease-in-out 200ms;
}

.fadeBottom-d-500{
    animation: fadeBottom 350ms both ease-in-out 500ms ;
}

.fadeBottom-d-700{
    animation: fadeBottom 350ms both ease-in-out 700ms;
}
/* *******FADE BOTTMOM*********** */



/* FADE TOP */
@keyframes fadeTop{
    0% {
        transform: translateY(-300%);
        opacity: 0;        
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeTop{
    animation: fadeTop 350ms both ease-in-out;
}
/* *******FADE TOP*********** */



/* FADE TOP */
@keyframes fadeTop-Y-100{
    0% {
        transform: translateY(-100%);
        opacity: 0;        
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeTop-Y-100{
    animation: fadeTop-Y-100 250ms both ease-in-out;
}

.fadeTop-Y-100-reverse{
    animation: fadeTop-Y-100 250ms both ease-in-out reverse;
}
/* *******FADE TOP*********** */




/* FADE RIGHT */
@keyframes fadeRight{
    0% {
        transform: translateX(-100%);
        opacity: 0;        
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.fadeRight{
    animation: fadeRight 350ms both ease-in-out;
}

.fadeRight-d-600{
    animation: fadeRight 150ms ease-in 600ms both;
}

.fadeRight-d-800{
    animation: fadeRight 150ms ease-in 800ms both;
}

.fadeRight-d-1000{
    animation: fadeRight 150ms ease-in 1000ms both;
}

.fadeRight-d-1200{
    animation: fadeRight 150ms ease-in 1200ms both;
}

.fadeRight-d-1400{
    animation: fadeRight 150ms ease-in 1400ms both;
}

.fadeRight-d-1600{
    animation: fadeRight 150ms ease-in 1600ms both;
}

/* *******FADE RIGHT*********** */



/* FADE SHOW */
@keyframes fadeShow{
    0% {
       
        opacity: 0;        
    }

    100% {
       
        opacity: 1;
    }
}

.fadeShow{
    animation: fadeShow 250ms ease-in 400ms both;
}

.fadeShow-d-600{
    animation: fadeShow 150ms ease-in 600ms both;
}

.fadeShow-d-800{
    animation: fadeShow 150ms ease-in 800ms both;
}

.fadeShow-d-1000{
    animation: fadeShow 150ms ease-in 1000ms both;
}

.fadeShow-d-1200{
    animation: fadeShow 150ms ease-in 1200ms both;
}

.fadeShow-d-1400{
    animation: fadeShow 150ms ease-in 1400ms both;
}

.fadeShow-d-1600{
    animation: fadeShow 150ms ease-in 1600ms both;
}

/* *******FADE SHOW*********** */



/* SHOW FROM TOP  */
@keyframes showFromTop{
    0%{
        transform-origin: center top;
        transform: scaleY(0);
        height: 0%;   
    }
    100%{
        
        transform: scaleY(1);
        height: auto;   
        display: block;
    }
}


.showFromTop{
    animation: showFromTop 200ms ease-in-out both ;
}

/* *******SHOW FROM TOP*********** */




/* SCALE FROM CENTER  */
@keyframes scale-ct{
    0%{
       
        transform: scale(0);
    }
    100%{        
        transform: scale(1);
       
    }
}


.scale-ct{
    animation: scale-ct 200ms ease-in-out forwards ;
}

.scale-ct-d-100{
    animation: scale-ct 100ms 200ms ease-in-out forwards ;
}

.scale-ct-d-300{
    animation: scale-ct 300ms 200ms ease-in-out forwards ;
}

.scale-ct-d-350{
    animation: scale-ct 350ms 200ms ease-in-out forwards ;
}

/* *******SHOW FROM TOP*********** */