.backgroundAnimation {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.backgroundAnimation .banner {
    position: relative;
    width: 100%;
    height: 100vh;
}

.backgroundAnimation .banner img {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.40);
    will-change: transform;
}

.transition .backgroundAnimation .banner img {
    transition: bottom 0.8s ease;
}

.banner video {
    height: 100%;
    width: 100%;
}

.backgroundAnimation .banner img.sky {
    width: 100%;
    top: 80px;
    z-index: 0;
}

.backgroundAnimation .banner img.valley {
    width: 100%;
    top: unset;
    bottom: -15%;
    z-index: 3;
}

.backgroundAnimation .banner img.img1 {
    z-index: 3;
    top: unset;
    bottom: -55%;
    width: 100%;
}

.backgroundAnimation .banner img.img2 {
    z-index: 2;
    left: unset;
    right: 0;
    top: unset;
    bottom: -35%;
}

.backgroundAnimation .banner img.img3 {
    z-index: 1;
    bottom: -61%;
    top: unset;
    width: 100%;
    transform: scale(1.40);
}

.backgroundAnimation .banner img.img4 {
    z-index: 1;
    left: unset;
    right: 0;
    bottom: -42%;
    top: unset;
    transform: scale(1.40);
}

.backgroundAnimation .banner img.clouds {
    z-index: 1;
    width: 100%;
    top: 80px;
}

/*.backgroundAnimation .banner img.sky {
    width: 100%;
    top: 80px;
    z-index: 0;
}

.backgroundAnimation .banner img.valley {
    width: 100%;
    top: unset;
    bottom: 0;
    z-index: 3;
}

.backgroundAnimation .banner img.img1 {
    z-index: 3;
    top: unset;
    bottom: 4%;
    width: 100%;
}

.backgroundAnimation .banner img.img2 {
    z-index: 2;
    left: unset;
    right: 0;
    top: unset;
    bottom: 15%;
}

.backgroundAnimation .banner img.img3 {
    z-index: 1;
    bottom: 8%;
    top: unset;
    width: 100%;
}

.backgroundAnimation .banner img.img4 {
    z-index: 1;
    left: unset;
    right: 0;
    bottom: 16%;
    top: unset;
}*/


.contentBg {
    position: relative;
    /*min-width: 1600px*/
    width: 1600px;
    top: unset;
    left: 50%;
    transform: translate(-50%, 0);
    /*position: relative;*/
    z-index: 10;
}

.contentBg img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    /*transition: transform 0.5s ease;*/
}

.contentBg img.tabBg {
    display: none;
}

.contentBg .img6 {
    position: relative;
    top: -57px;
    /*transform: translateY(0 );*/
}

.contentBg .img6 img {
    position: relative;
    float: left;
}
.contentBg .img7 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.contentBg .img7 img {
    position: relative;
    float: left;
}

.contentBg img.img8 {
    width: 30%;
    top: 000px;
    /*transform: translateY(900px);*/
}

@media only screen and (max-width: 1366px) {
    .contentBg {
        width: 100%;
    }
}

@media only screen and (max-width: 1344px) {
    .contentBg {
        width: 105%;
    }
}

@media only screen and (max-width: 1152px) {
    .contentBg {
        width: 120%;
    }
}

@media only screen and (max-width: 801px) and (orientation: portrait) {
    .init .backgroundAnimation .banner {
        overflow: hidden;
        position: relative;
    }

    .init .backgroundAnimation .banner img {
        width: 300%;
    }

    .contentBg img.tabBg {
        display: block;
    }
}

@media only screen and (max-width: 768px) and (max-height: 1024px) and (orientation: portrait) {
    .contentBg img.tabBg {
        display: block;
    }
}

@media only screen and (max-width: 1280px) and (max-height: 800px) {
    /* .contentBg img.bg-trees {
        display: none;
    }*/

    .contentBg img.tabBg {
        display: block;
    }

    .init .backgroundAnimation .banner img.img2 {
        bottom: -24%;
    }
}

@media only screen and (max-width: 1024px) and (max-height: 1366px) {
    .init .backgroundAnimation .banner img.img2 {
        bottom: -20%;
    }

    .init .backgroundAnimation .banner img.valley {
        bottom: 10px !important;
    }
}

@media only screen and (max-width: 834px) and (max-height: 1194px) {
    .init .backgroundAnimation .banner img.valley {
        bottom: 0 !important;
    }
    .init .backgroundAnimation .banner img {
        width: 140%;
    }
}

@media only screen and (max-width: 800px) {
    .sustainability .backgroundAnimation {
        overflow: hidden;
    }
}
@media only screen and (max-width: 767px) {

    .init .backgroundAnimation .banner img.valley {
        bottom: 0 !important;
    }

    /*.contentBg {
        overflow: hidden;
    }*/

    .backgroundAnimation {
        position: absolute;
    }

    .contentBg img.bg-trees {
        display: block;
    }

    .contentBg img.tabBg {
        display: block;
    }

    .init .backgroundAnimation .banner img.img2 {
        width: 100%;
        bottom: 0;
    }

    .init .backgroundAnimation .banner img.valley {
        bottom: 2%;
    }

    .backgroundAnimation .banner img.sky,
    .backgroundAnimation .banner img.clouds {
        width: 170%;
        left: -20%;
        transform: translate(-50%, 0);
    }

}

@media only screen and (max-width: 414px) {
    .backgroundAnimation .banner img {
        width: 350% !important;
    }
}