/* HOW TO USE THESE 
-------------------------
<div class="lazy-fade fade-left">Fade from left</div>

<div class="lazy-fade fade-right">Fade from right</div>

<div class="lazy-fade fade-top">Fade from top</div>

<div class="lazy-fade fade-bottom">Fade from bottom</div>

<div class="lazy-fade zoom-in">Zoom In Effect</div>

<div class="lazy-fade rotate-in">Rotated Entry</div>

<div class="lazy-fade scale-up">Scaled and Lifted</div>

*/

/* Common base */


/* CDE = 30 -> 130 */

.lazy-fade {
    opacity: 0;
    transform: translateY(-130px);
}

/* Fade-in from bottom (default) */
.fade-bottom {
    transform: translateY(130px);
}

/* Fade-in from left */
.fade-left {
    transform: translateX(-130px);
}

/* Fade-in from right */
.fade-right {
    transform: translateX(130px);
}

/* Fade-in from top */
.fade-top {
    transform: translateY(-130px);
}


/* Zoom in */
.zoom-in {
    transform: scale(0.8);
}

/* Rotate in (slight) */
.rotate-in {
    transform: rotate(-10deg);
}

/* Scale and move slightly up */
.scale-up {
    transform: scale(0.9) translateY(20px);
}

/* General final state (shared) */
.fade-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}