:root {
	--negative-transition:  all 0.9s ease-in-out;
}

/* Main Variables */

.main-section p:first-child {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.main-section h1 {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.main-section h2 {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.main-section p {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.main-section a {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
#carouselExampleIndicators {
    position: relative;
    opacity: 0;
    transition: var(--negative-transition);
}
.inner-section h3 {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.inner-section h4 {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.inner-section p {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.inner-section a {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.img-back-static {
    position: relative;
    opacity: 0;
    transform: translateX(100%);
    transition: var(--negative-transition);
}
.inner-white-section h3 {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.inner-white-section h4 {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition);
}
.inner-white-section a {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    transition: var(--negative-transition); 
}

/* First Section */

.on-0 .main-section p:first-child {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
}
.on-0 .main-section h1 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 0.5s;
}
.on-0 .main-section h2 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 1s;
}
.on-0 .main-section p {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 1.5s;
}
.on-0 .main-section a {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 2s;
}
.on-0 #carouselExampleIndicators {
    position: relative;
    opacity: 1;
    transition: var(--negative-transition);
}

/* Second Section */

.on-1 .inner-section h3 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
}
.on-1 .inner-section h4 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 0.5s;
}
.on-1 .inner-section p {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 1s;
}
.on-1 .inner-section a {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 1.5s;
}

/* Third Section */

.on-2 .inner-white-section h3 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
}
.on-2 .inner-white-section h4 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 0.5s;
}
.on-2 .inner-white-section a {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 1s;
}

/* Fourth Section */

.on-3 .inner-section h3 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
}
.on-3 .inner-section h4 {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 0.5s;
}
.on-3 .inner-section p {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 1s;
}
.on-3 .inner-section a {
    position: relative;
    opacity: 1;
    transform: translateY(0%);
    transition: var(--negative-transition);
    transition-delay: 1.5s;
}
.on-3 .img-back-static {
    position: relative;
    opacity: 1;
    transform: translateX(0%);
    transition: var(--negative-transition);
    transition-delay: 0.5s;
}

@media only screen and (max-width: 992px) {

    .main-section p:first-child {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .main-section h1 {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .main-section h2 {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .main-section p {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .main-section a {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    #carouselExampleIndicators {
        position: relative;
        opacity: 1;
        transition: var(--negative-transition);
    }

    /* Section 2 */

    .inner-section h3 {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .inner-section h4 {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .inner-section p {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .inner-section a {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .img-back-static {
        position: relative;
        opacity: 1;
        transform: translateX(0);
        transition: var(--negative-transition);
    }

    .inner-white-section h3 {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .inner-white-section h4 {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition);
    }

    .inner-white-section a {
        position: relative;
        opacity: 1;
        transform: translateY(0);
        transition: var(--negative-transition); 
    }


}