.sectionHolder,
.animation-element{   
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
}
.greenBoxes .greenBox.animation-element,
.imageTitle.animation-element,
.secondSvgLocal.animation-element,
.svgLocal.animation-element,
h4.animation-element,
p.animation-element,
strong.animation-element,
.twoImgHolder .img-left.animation-element,
.twoImgHolder .img-right.animation-element,
.middleFigureElement.animation-element,
.sectionHolder .footer-right.animation-element,
.reachBoxContainer.animation-element,
.progressBoxHolder.animation-element{
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px) */
    /* animation: fadeInUp .4s linear; */
}

.quoteMultichannel .left-wrapper svg.animation-element,
.petcoLoveSector .video-wrapper video.animation-element,
.petcoLoveSector .video-wrapper .blueTitleHolder.animation-element {
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateX(-25px);
    -ms-transform: translateX(-25px);
    transform: translateX(-25px) */
}

.quoteMultichannel .right-wrapper .rightPositionHolder quote.animation-element {
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateX(25px);
    -ms-transform: translateX(25px);
    transform: translateX(25px) */
}

.inisdeQoute .right-wrapper.animation-element {
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateX(25px);
    -ms-transform: translateX(25px);
    transform: translateX(25px) */
}

.inisdeQoute .left-wrapper .insideQoutePosition quote.animation-element,
.brandsSliderSection .brand-title.animation-element, .careCenterSection .care-title.animation-element, .cardsSlider .card-title.animation-element{
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateY(25px);
    -ms-transform: translateY(25px);
    transform: translateY(25px) */
}

.cardsSlider.animation-element.in-view,
.greenBoxes .greenBox.animation-element.in-view,
.imageTitle.animation-element.in-view,
.inisdeQoute .left-wrapper .insideQoutePosition quote.animation-element.in-view,
.inisdeQoute .right-wrapper.animation-element.in-view,
.quoteMultichannel .left-wrapper svg.animation-element.in-view,
.quoteMultichannel .right-wrapper .rightPositionHolder quote.animation-element.in-view,
.secondSvgLocal.animation-element.in-view,
.svgLocal.animation-element.in-view,
h4.animation-element.in-view,
p.animation-element.in-view,
strong.animation-element.in-view,
.twoImgHolder .img-left.animation-element.in-view,
.twoImgHolder .img-right.animation-element.in-view ,
.middleFigureElement.animation-element.in-view,
.sectionHolder .footer-right.animation-element.in-view,
.reachBoxContainer.animation-element.in-view,
.progressBoxHolder.animation-element.in-view,
.brandsSliderSection .brand-title.animation-element.in-view, .careCenterSection .care-title.animation-element.in-view, .cardsSlider .card-title.animation-element.in-view,
.leadership-summit-2022-img,
.animation-element.in-view{
    /* opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0) */
    animation: fadeInUp .4s linear;
}

h3.animation-element {
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px) */
}

h3.animation-element.in-view,
h4.section-title.animation-element.in-view{
    /* opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0) */
}

.bannerSection .bannerTitle .bannerTitlePosition h2.animation-element {
    /* -webkit-transform: translateX(25px);
    -ms-transform: translateX(25px);
    transform: translateX(25px);
    opacity: 0;
    -webkit-transition: .6s linear opacity .3s, 1.2s linear transform .3s;
    -o-transition: .6s linear opacity .3s, 1.2s linear transform .3s;
    transition: .6s linear opacity .3s, 1.2s linear transform .3s */
}

.bannerSection .bannerTitle .bannerTitlePosition h2.animation-element.in-view {
    /* opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none */
    animation: fadeInRightToLeftXs .4s linear;
}

.quoteImageHolder .left-wrapper quote.animation-element {
    /* -webkit-transform: translateX(-45px);
    -ms-transform: translateX(-45px);
    transform: translateX(-45px);
    opacity: 0;
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s */
}

.quoteImageHolder .left-wrapper quote.animation-element.in-view,
.quoteMultichannel .right-wrapper .rightPositionHolder quote.animation-element.in-view,
.petcoLoveSector .video-wrapper video.animation-element.in-view,
.petcoLoveSector .video-wrapper .blueTitleHolder.in-view{
    /* opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0) */
    animation: fadeInLeftToRight .4s linear;
}

.quoteVideoHolder .right-wrapper.animation-element,
.ecoSystemInfo .imgHolder.animation-element,
.insideTextImage.animation-element,
.blueBoxInsideText.animation-element{
    /* -webkit-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
    opacity: 0;
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s */
}

.quoteVideoHolder .right-wrapper.animation-element.in-view,
.ecoSystemInfo .imgHolder.animation-element.in-view,
.insideTextImage.animation-element.in-view,
.blueBoxInsideText.animation-element.in-view{
    /* opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
    animation: fadeInRightToLeft .4s linear;
}

.quoteVideoHolder .left-wrapper video.animation-element ,
.quoteVideoHolder .left-wrapper .blueTitleHolder,
.insideTextImageHolder .infoContainer{
    /* -webkit-transform: translateX(-45px);
    -ms-transform: translateX(-45px);
    transform: translateX(-45px);
    opacity: 0;
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s */
}

.quoteImageHolder .right-wrapper svg.animation-element {
    -webkit-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
    opacity: 0;
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s
}

.quoteVideoHolder .left-wrapper video.animation-element.in-view ,
.quoteVideoHolder .left-wrapper .blueTitleHolder.animation-element.in-view,
.insideTextImageHolder.in-view .infoContainer{
    /* opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0) */
    animation: fadeInLeftToRight .4s linear;
}

.quoteImageHolder .right-wrapper svg.animation-element.in-view {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.cardsSlider.animation-element,
.videoSlider.animation-element,
.brandsSliderSection.animation-element {
    /* -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
    opacity: 0;
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s */
}

.videoSlider.animation-element.in-view ,
.brandsSliderSection.animation-element.in-view{
    /* -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; */
    animation: fadeInUp .4s linear;
}

/* .boxesHolder.animation-element .firstBox {
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
    opacity: 0;
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s
}

.boxesHolder.animation-element .secondBox {
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
    opacity: 0;
    -webkit-transition: .3s linear opacity .45s, .6s linear transform .45s;
    -o-transition: .3s linear opacity .45s, .6s linear transform .45s;
    transition: .3s linear opacity .45s, .6s linear transform .45s
}

.boxesHolder.animation-element .thirdBox {
    -webkit-transform: translateY(75px);
    -ms-transform: translateY(75px);
    transform: translateY(75px);
    opacity: 0;
    -webkit-transition: .3s linear opacity .6s, .6s linear transform .6s;
    -o-transition: .3s linear opacity .6s, .6s linear transform .6s;
    transition: .3s linear opacity .6s, .6s linear transform .6s
} */

.boxesHolder.animation-element.in-view .firstBox,
.boxesHolder.animation-element.in-view .secondBox,
.boxesHolder.animation-element.in-view .thirdBox {
    /* opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); */
    animation: fadeInUp .4s linear;
}

/* .blueBoxes.animation-element .blueBox {
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
    opacity: 0;
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s
}

.blueBoxes.animation-element .blueBox:nth-child(2) {
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
    opacity: 0;
    -webkit-transition: .3s linear opacity .45s, .6s linear transform .45s;
    -o-transition: .3s linear opacity .45s, .6s linear transform .45s;
    transition: .3s linear opacity .45s, .6s linear transform .45s
}

.mainBannerSection svg.animation-element {
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateY(75px);
    -ms-transform: translateY(75px);
    transform: translateY(75px)
} */

.blueBoxes.animation-element .blueBox:last-child {
    /* -webkit-transform: translateY(75px);
    -ms-transform: translateY(75px);
    transform: translateY(75px);
    opacity: 0;
    -webkit-transition: .3s linear opacity .6s, .6s linear transform .6s;
    -o-transition: .3s linear opacity .6s, .6s linear transform .6s;
    transition: .3s linear opacity .6s, .6s linear transform .6s */
}

.blueBoxes.animation-element.in-view .blueBox,
.gsBoxes .left-wrapper.animation-element.in-view,
.gsBoxes .right-wrapper.animation-element.in-view,
/* .mainBannerSection h1.animation-element.in-view, */
.mainBannerSection svg.animation-element.in-view,
.petcoLoveSector .left-wrapper .box.animation-element.in-view,
.petcoLoveSector .right-wrapper .box.animation-element.in-view,
.pieWrapper .leftPieWrapper .left-wrapper.animation-element.in-view,
.pieWrapper .leftPieWrapper .right-wrapper.animation-element.in-view,
.pieWrapper .rightPieWrapper .left-wrapper.animation-element.in-view,
.pieWrapper .rightPieWrapper .right-wrapper.animation-element.in-view,
.quoteVideoHolder .right-wrapper.smallText.animation-element.in-view,
.whWrapper .left-wrapper.animation-element.in-view,
.whWrapper .right-wrapper .wholeWealthDOM.animation-element.in-view {
    /* opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); */
    animation: fadeInLeftToRight .4s linear;
}
.mainBannerSection.in-view h1{
    opacity: 1;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.mainBannerSection.in-view img{
    opacity: 1;
}
.pieWrapper .leftPieWrapper .left-wrapper.animation-element {
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateX(-45px);
    -ms-transform: translateX(-45px);
    transform: translateX(-45px)
}

.gsBoxes .left-wrapper.animation-element,
.petcoLoveSector .left-wrapper .box.animation-element,
.pieWrapper .leftPieWrapper .right-wrapper.animation-element,
.whWrapper .left-wrapper.animation-element {
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateX(-45px);
    -ms-transform: translateX(-45px);
    transform: translateX(-45px) */
}
.mainBannerSection h1,
.mainBannerSection img{
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0; 
}
.gsBoxes .right-wrapper.animation-element,
.petcoLoveSector .right-wrapper .box.animation-element,
.pieWrapper .rightPieWrapper .left-wrapper.animation-element,
.quoteVideoHolder .right-wrapper.smallText.animation-element,
.whWrapper .right-wrapper .wholeWealthDOM.animation-element {
    /* -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px) */
}

.pieWrapper .rightPieWrapper .right-wrapper.animation-element {
    -webkit-transition: .4s linear opacity .3s, .4s linear transform .4s;
    -o-transition: .4s linear opacity .3s, .4s linear transform .4s;
    transition: .4s linear opacity .3s, .4s linear transform .4s;
    opacity: 0;
    -webkit-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px)
}



@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(45px);
        -ms-transform: translateY(45px);
        transform: translateY(45px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
  }
@keyframes fadeInUpXs {
    from {
        opacity: 0;
        -webkit-transform: translateY(25px);
        -ms-transform: translateY(25px);
        transform: translateY(25px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
  }
@keyframes fadeInLeftToRight {
    from {
        -webkit-transform: translateX(-45px);
        -ms-transform: translateX(-45px);
        transform: translateX(-45px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
  }
@keyframes fadeInRightToLeftXs {
    from {
        -webkit-transform: translateX(-25px);
        -ms-transform: translateX(-25px);
        transform: translateX(-25px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
  }
@keyframes fadeInLeftToRightXs {
    from {
        -webkit-transform: translateX(-25px);
        -ms-transform: translateX(-25px);
        transform: translateX(-25px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
  }
@keyframes fadeInRightToLeft {
    from {
        -webkit-transform: translateX(45px);
        -ms-transform: translateX(45px);
        transform: translateX(45px);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
  }
@keyframes animToRight {
    from {
        /* -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0); */
    }
    to {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }
  }