/* Fade in from ground */
.fadeUp {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: transform 2s ease,
        opacity 1.5s ease-in-out;
}

.fadeUp.fadeUpOnScroll {
    transform: translateY(0px);
    opacity: 1;
}

/* Fade in from left */
.fadeLeft {
    position: relative;
    transform: translateX(150px);
    opacity: 0;
    transition: transform 2s ease,
        opacity 2s ease;
}

.fadeLeft.fadeLeftOnScroll {
    transform: translateX(0px);
    opacity: 1;
}

/* Fade in from right */
.fadeRight {
    position: relative;
    transform: translateX(-150px);
    opacity: 0;
    transition: transform 2s ease,
        opacity 2s ease;
}

.fadeRight.fadeRightOnScroll {
    transform: translateX(0px);
    opacity: 1;
}

/* zoom Out */
.zoomOut {
    position: relative;
    transform: scale(0);
    opacity: 0;
    transition: transform 2s ease,
        opacity 1s ease;
}

.zoomOut.zoomOutOnScroll {
    transform: scale(1);
    opacity: 1;
}


/* Rotate anticlockwise */
.rotateA {
    position: relative;
    transform: rotate(360deg);
    opacity: 0;
    transition: transform 2s ease,
        opacity 1s ease;
}

.rotateA.rotateAOnScroll {
    transform: rotate(0);
    opacity: 1;
}


@media screen and (max-width: 900px){
    /* Fade in from ground */
.fadeUp {
    position: relative;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 2s ease,
        opacity 1.5s ease-in-out;
}

.fadeUp.fadeUpOnScroll {
    transform: translateY(0px);
    opacity: 1;
}

/* Fade in from left */
.fadeLeft {
    position: relative;
    transform: translateX(10px);
    opacity: 0;
    transition: transform 2s ease,
        opacity 2s ease;
}

.fadeLeft.fadeLeftOnScroll {
    transform: translateX(0px);
    opacity: 1;
}

/* Fade in from right */
.fadeRight {
    position: relative;
    transform: translateX(-10px);
    opacity: 0;
    transition: transform 2s ease,
        opacity 2s ease;
}

.fadeRight.fadeRightOnScroll {
    transform: translateX(0px);
    opacity: 1;
}

/* zoom Out */
.zoomOut {
    position: relative;
    transform: scale(0);
    opacity: 0;
    transition: transform 2s ease,
        opacity 1s ease;
}

.zoomOut.zoomOutOnScroll {
    transform: scale(1);
    opacity: 1;
}




}