/* ANIMATION1 
*  apply ANIMATION-HIDE-fade-translateY on element
*  IntersectionObserver adds ANIMATION-SHOW... class and removes
*/
.ANIMATION-HIDE-fade-translateY {
    opacity: 50%;
    transform: translateY(30%);
    transition: all 1.5s;
}

.ANIMATION-SHOW-fade-translateY {
    opacity: 1;
    transform: translateY(0%);
    transition: all 1.5s;
}

/* ANIMATION1.1
*  apply ANIMATION-HIDE-fade-translateY slow on element
*  IntersectionObserver adds ANIMATION-SHOW... class and removes
*/
.ANIMATION-HIDE-fade-translateY-light {
    opacity: 1%;
    transform: translateY(10%);
    transition: all .5s;
}

.ANIMATION-SHOW-fade-translateY-light {
    opacity: 1;
    transform: translateY(0%);
    transition: all .5s;
}

/* ANIMATION1.2 
*  apply ANIMATION-HIDE-fade-translateY on element
*  IntersectionObserver adds ANIMATION-SHOW... class and removes
*/
.ANIMATION-HIDE-fade-translateY-single {
    opacity: 50%;
    transform: translateY(30%);
    transition: all 1.5s;
}

.ANIMATION-SHOW-fade-translateY-single {
    opacity: 1;
    transform: translateY(0%);
    transition: all 1.5s;
}

/* ANIMATION2 
*  apply ANIMATION-HIDE-fade-translateX (to left) on element
*  IntersectionObserver adds ANIMATION-SHOW... class and removes
*/
.ANIMATION-HIDE-fade-translateLeft {
    opacity: 50%;
    transform: translateX(30%);
    transition: all 1.5s;
}

.ANIMATION-SHOW-fade-translateLeft {
    opacity: 1;
    transform: translateX(0);
    transition: all 1.5s;
}

/* ANIMATION3
*  apply ANIMATION-HIDE-fade-translateX (to right) on element
*  IntersectionObserver adds ANIMATION-SHOW... class and removes
*/
.ANIMATION-HIDE-fade-translateRight {
    opacity: 50%;
    transform: translateX(-30%);
    transition: all 1.5s;
}

.ANIMATION-SHOW-fade-translateRight {
    opacity: 1;
    transform: translateX(0);
    transition: all 1.5s;
}

/* ANIMATION4
*  apply ANIMATION-HIDE-fade-scale on element
*  IntersectionObserver adds ANIMATION-SHOW... class and removes
*/
.ANIMATION-HIDE-fade-scale {
    opacity: 0%;
    transition: ease-in-out;
    transition-duration: 2000ms;
}

.ANIMATION-SHOW-fade-scale {
    opacity: 100%;
    transition: ease-in-out;
    transition-duration: 2000ms;
}

/* ANIMATION5
*  apply ANIMATION-HIDE-scaleY on element
*  IntersectionObserver adds ANIMATION-SHOW... class and removes
*/
.ANIMATION-HIDE-scaleY {
    height: 30px;
    transition: ease-in-out 2s;
}

.ANIMATION-SHOW-scaleY {
    height: 0px;
    transition: ease-in-out 2s;
}


/**
* Staggered Animation
*/
.ANIMATION-staggered:nth-child(2) {
    transition-delay: 200ms;
}

.ANIMATION-staggered:nth-child(3) {
    transition-delay: 400ms;
}

.ANIMATION-staggered:nth-child(4) {
    transition-delay: 600ms;
}