.sub-section-3 .cssanimation.fadeIn2 {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}

.sub-section-3 .cssanimation.text {
    opacity: 0;
}

.fadeIn2 {
    animation-name: fadeIn2
}

@keyframes fadeIn2 {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeOut2 {
    animation-name: fadeOut2
}

@keyframes fadeOut2 {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeInLeft2 {
    animation-name: fadeInLeft2;
}

@keyframes fadeInLeft2 {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    50% {
        opacity: 1;
        transform: translateX(5%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.sub-section-4 .fadeInRight2b.cssanimation {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}

.fadeInRight2b {
    animation-name: fadeInRight2b;
}

@keyframes fadeInRight2b {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    50% {
        opacity: 1;
        transform: translateX(-8%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.sub-section-4 .fadeInLeft2b.cssanimation {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

.fadeInLeft2b {
    animation-name: fadeInLeft2b;
}

@keyframes fadeInLeft2b {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    50% {
        opacity: 1;
        transform: translateX(30%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.section-2 .fadeInRight_sec2.cssanimation {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
}

.fadeInRight_sec2 {
    animation-name: fadeInRight_sec2;
}

@keyframes fadeInRight_sec2 {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    50% {
        opacity: 1;
        transform: translateX(-30%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.section-2 .cosa-amerai-cont .fadeInRight_sec2.cssanimation {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
}

@keyframes fadeInRight_sec2 {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    50% {
        opacity: 1;
        transform: translateX(-5%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.sub-section-4 .fadeInRight2.cssanimation,
.sub-section-4 .fadeInLeft2.cssanimation {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
}

.fadeInRight2 {
    animation-name: fadeInRight2;
}

@keyframes fadeInRight2 {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    50% {
        opacity: 1;
        transform: translateX(-5%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.sub-section-4 .text-greta.cssanimation {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

.blurIn2 {
    animation-name: blurIn2
}

@keyframes blurIn2 {
    from {
        filter: blur(20px);
        opacity: 0;
    }
    to {
        filter: blur(0px);
        opacity: 1;
    }
}

.sostenibile-cont .s-box {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.fadeIn3 {
    animation-name: fadeIn3
}


/*
@keyframes fadeIn3 {
    from {
        transform: scale(0.5);
        /-* opacity: 0; *-/


}
to {
    transform: scale(1);
    opacity: 1;
}

}
*/

@keyframes fadeIn3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.contatti-section .c-box.cssanimation {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}

.c-box {
    opacity: 0;
}

.bounceZoomIn2 {
    animation-name: bounceZoomIn2;
}

@keyframes bounceZoomIn2 {
    0%,
    25%,
    55%,
    85%,
    100% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
    41%,
    44% {
        animation-timing-function: ease-in;
        transform: scale(1.05);
        opacity: 1;
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale(0.9);
        opacity: 1;
    }
    90% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
    /* 0%,
    25%,
    55%,
    85%,
    100% {
        animation-timing-function: ease-out;
        transform: scale(1);
        opacity: 1;
    }
    41%,
    44% {
        animation-timing-function: ease-in;
        transform: scale(1.5);
        opacity: 1;
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale(1.3);
        opacity: 1;
    }
    90% {
        transform: scale(1.1);
        opacity: 1;
    }*/
}


/* rendering animation */


/* layer-02 */

.render2 {
    animation-name: render2;
}

@keyframes render2 {
    0% {
        transform: translateY(-1rem);
    }
    100% {
        transform: translateY(6rem);
    }
}


/* layer-03 */

.render3 {
    animation-name: render3;
}

@keyframes render3 {
    0% {
        transform: translateY(-1rem);
    }
    100% {
        transform: translateY(10rem);
    }
}


/* layer-04 */

.render4 {
    animation-name: render4;
}

@keyframes render4 {
    0% {
        transform: translateY(0rem);
        z-index: 1;
    }
    100% {
        transform: translateY(18rem);
        z-index: 1;
    }
}


/* render num */


/* renderNum1 */

.renderNum1 {
    animation-name: renderNum1;
}

@keyframes renderNum1 {
    0% {
        transform: translateY(0rem);
        z-index: 10;
    }
    100% {
        transform: translateY(3rem);
        z-index: 10;
    }
}


/* renderNum2 */

.renderNum2 {
    animation-name: renderNum2;
}

@keyframes renderNum2 {
    0% {
        transform: translateY(0rem);
    }
    100% {
        transform: translateY(10rem);
    }
}


/* renderNum3 */

.renderNum3 {
    animation-name: renderNum3;
}

@keyframes renderNum3 {
    0% {
        transform: translateY(0rem);
    }
    100% {
        transform: translateY(16rem);
    }
}


/* renderNum4 */

.renderNum4 {
    animation-name: renderNum4;
}

@keyframes renderNum4 {
    0% {
        transform: translateY(0rem);
    }
    100% {
        transform: translateY(26rem);
    }
}


/*
.render4Rev {
    animation-name: render4Rev;
}

@keyframes render4Rev {
    0% {
        transform: translateY(16rem);
    }
    100% {
        transform: translateY(0rem);
    }
}*/

@media (max-width: 767px) {
    /* 767 responsive rendering animation */
    /* layer-02 */
    .render2 {
        animation-name: render2;
    }
    @keyframes render2 {
        0% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(-1rem);
        }
    }
    /* layer-03 */
    .render3 {
        animation-name: render3;
    }
    @keyframes render3 {
        0% {
            transform: translateY(-5rem);
        }
        100% {
            transform: translateY(-2rem);
        }
    }
    /* layer-04 */
    .render4 {
        animation-name: render4;
    }
    @keyframes render4 {
        0% {
            transform: translateY(-8.6rem);
            z-index: 1;
        }
        100% {
            transform: translateY(-3rem);
            z-index: 1;
        }
    }
    /* 767 responsive render num */
    /* renderNum1 */
    .renderNum1 {
        animation-name: renderNum1;
    }
    @keyframes renderNum1 {
        0% {
            transform: translateY(-5rem);
            z-index: 10;
        }
        100% {
            transform: translateY(-2rem);
            z-index: 10;
        }
    }
    /* renderNum2 */
    .renderNum2 {
        animation-name: renderNum2;
    }
    @keyframes renderNum2 {
        0% {
            transform: translateY(-5rem);
        }
        100% {
            transform: translateY(-1.9rem);
        }
    }
    /* renderNum3 */
    .renderNum3 {
        animation-name: renderNum3;
    }
    @keyframes renderNum3 {
        0% {
            transform: translateY(-5rem);
        }
        100% {
            transform: translateY(-3rem);
        }
    }
    /* renderNum4 */
    .renderNum4 {
        animation-name: renderNum4;
    }
    @keyframes renderNum4 {
        0% {
            transform: translateY(-5rem);
        }
        100% {
            transform: translateY(-4rem);
        }
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* 768 - 992 responsive rendering animation */
    /* layer-02 */
    .render2 {
        animation-name: render2;
    }
    @keyframes render2 {
        0% {
            transform: translateY(-5rem);
        }
        100% {
            transform: translateY(-1.6rem);
        }
    }
    /* layer-03 */
    .render3 {
        animation-name: render3;
    }
    @keyframes render3 {
        0% {
            transform: translateY(-9rem);
        }
        100% {
            transform: translateY(-3.2rem);
        }
    }
    /* layer-04 */
    .render4 {
        animation-name: render4;
    }
    @keyframes render4 {
        0% {
            transform: translateY(-15rem);
            z-index: 1;
        }
        100% {
            transform: translateY(-6rem);
            z-index: 1;
        }
    }
    /* 768 - 992 responsive render num */
    /* renderNum1 */
    .renderNum1 {
        animation-name: renderNum1;
    }
    @keyframes renderNum1 {
        0% {
            transform: translateY(-5rem);
            z-index: 10;
        }
        100% {
            transform: translateY(-4rem);
            z-index: 10;
        }
    }
    /* renderNum2 */
    .renderNum2 {
        animation-name: renderNum2;
    }
    @keyframes renderNum2 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(-4rem);
        }
    }
    /* renderNum3 */
    .renderNum3 {
        animation-name: renderNum3;
    }
    @keyframes renderNum3 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(-5.5rem);
        }
    }
    /* renderNum4 */
    .renderNum4 {
        animation-name: renderNum4;
    }
    @keyframes renderNum4 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(-7.8rem);
        }
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* 992 - 1199 responsive rendering animation */
    /* layer-02 */
    .render2 {
        animation-name: render2;
    }
    @keyframes render2 {
        0% {
            transform: translateY(-1rem);
        }
        100% {
            transform: translateY(3rem);
        }
    }
    /* layer-03 */
    .render3 {
        animation-name: render3;
    }
    @keyframes render3 {
        0% {
            transform: translateY(-1rem);
        }
        100% {
            transform: translateY(5rem);
        }
    }
    /* layer-04 */
    .render4 {
        animation-name: render4;
    }
    @keyframes render4 {
        0% {
            transform: translateY(0rem);
            z-index: 1;
        }
        100% {
            transform: translateY(10rem);
            z-index: 1;
        }
    }
    /* 992 - 1199 responsive render num */
    /* renderNum1 */
    .renderNum1 {
        animation-name: renderNum1;
    }
    @keyframes renderNum1 {
        0% {
            transform: translateY(0rem);
            z-index: 10;
        }
        100% {
            transform: translateY(0.3rem);
            z-index: 10;
        }
    }
    /* renderNum2 */
    .renderNum2 {
        animation-name: renderNum2;
    }
    @keyframes renderNum2 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(4.5rem);
        }
    }
    /* renderNum3 */
    .renderNum3 {
        animation-name: renderNum3;
    }
    @keyframes renderNum3 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(9.2rem);
        }
    }
    /* renderNum4 */
    .renderNum4 {
        animation-name: renderNum4;
    }
    @keyframes renderNum4 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(14rem);
        }
    }
}

@media (min-width: 1200px) and (max-width: 1699px) {
    /* 1200 - 1699 responsive rendering animation */
    /* layer-02 */
    .render2 {
        animation-name: render2;
    }
    @keyframes render2 {
        0% {
            transform: translateY(-1rem);
        }
        100% {
            transform: translateY(3rem);
        }
    }
    /* layer-03 */
    .render3 {
        animation-name: render3;
    }
    @keyframes render3 {
        0% {
            transform: translateY(-1rem);
        }
        100% {
            transform: translateY(5rem);
        }
    }
    /* layer-04 */
    .render4 {
        animation-name: render4;
    }
    @keyframes render4 {
        0% {
            transform: translateY(0rem);
            z-index: 1;
        }
        100% {
            transform: translateY(10rem);
            z-index: 1;
        }
    }
    /* 1200 - 1699 responsive render num */
    /* renderNum1 */
    .renderNum1 {
        animation-name: renderNum1;
    }
    @keyframes renderNum1 {
        0% {
            transform: translateY(0rem);
            z-index: 10;
        }
        100% {
            transform: translateY(0.5rem);
            z-index: 10;
        }
    }
    /* renderNum2 */
    .renderNum2 {
        animation-name: renderNum2;
    }
    @keyframes renderNum2 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(5.5rem);
        }
    }
    /* renderNum3 */
    .renderNum3 {
        animation-name: renderNum3;
    }
    @keyframes renderNum3 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(10.5rem);
        }
    }
    /* renderNum4 */
    .renderNum4 {
        animation-name: renderNum4;
    }
    @keyframes renderNum4 {
        0% {
            transform: translateY(0rem);
        }
        100% {
            transform: translateY(15.5rem);
        }
    }
}


/* renderBtnAnm1 + renderBtnAnm2 */

@-webkit-keyframes renderBtnAnm1 {
    0% {
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }
    6% {
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0.6;
    }
    100% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes renderBtnAnm1 {
    0% {
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }
    6% {
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0.6;
    }
    100% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
}

@-webkit-keyframes renderBtnAnm2 {
    0% {
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }
    2.5% {
        opacity: 0.6;
    }
    50% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes renderBtnAnm2 {
    0% {
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }
    2.5% {
        opacity: 0.6;
    }
    50% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
}