/*
* --------------------------------------------------------------------------------------------------------
* FORESTA
* --------------------------------------------------------------------------------------------------------
*/
/*=== BANNER ===*/
#chisiamo-banner-foresta {background: #CAE5F5 url(../../img/content/special/treedom/foresta.svg) center top / 140vw auto no-repeat;}

#chisiamo-banner-foresta {text-align: center;}

    #chisiamo-banner-foresta .title {
        font-size: 53px;
        font-weight: 400;
        font-family: 'ShintiaScript', script;
        margin: 80vw 0 0;
        color: #695852;
        letter-spacing: -0.02em;
        line-height: 1;
    }
        #chisiamo-banner-foresta .title img {width: auto; max-width: 100%;}

    #chisiamo-banner-foresta .text {margin: 30px auto; font-size: 16px; max-width: 510px;}

    #chisiamo-banner-foresta .link { display: inline-block; font-size: 13px;}
    #chisiamo-banner-foresta .link:not(:hover) { background: #DD816B;}

/*=== // BANNER ===*/


#landing-treedom-treedom {
    max-width: 1390px;
    margin: 0 auto;
}

#landing-treedom-albero {
    text-align: center;
}
    
    #landing-treedom-albero .upper{padding: 120px 0; color: #FFF;}
    #landing-treedom-albero .upper::before {background: url(../../img/content/special/treedom/bg-perche-un-albero-mobile.jpg) center top / cover no-repeat;}

        #landing-treedom-albero .title {font-family: 'ShintiaScript', script; font-size: 53px; color: #FFF; font-weight: 400; margin: 0; letter-spacing: -0.014em;}

        #landing-treedom-albero .intro {color: #FFF; max-width: 515px; margin: 1rem auto 0; font-size: 18px;}

    #landing-treedom-albero .text::before{background: #E4DDC3;}

    #landing-treedom-albero .text {padding: 30px 0; color: #532919; font-size: 18px;}
        #landing-treedom-albero .text .value_1 {display: block; font-size: 1.722em; font-weight: 400; margin-bottom: 0.25em;}
        #landing-treedom-albero .text .value_2::after {content: url(../../img/content/special/treedom/camion.svg); margin-left: 0.5em;}

        #landing-treedom-albero .text .link {margin-top: 2em; display: inline-block;}
        #landing-treedom-albero .text .link:not(:hover) {background: #E35B41;}

@media only screen and (max-width: 500px) {
    #landing-treedom-albero .title {margin-left: -30px; margin-right: -30px;}
    #landing-treedom-treedom .title {margin-left: -30px; margin-right: -30px;}
}

@media only screen and (max-width: 1023px) {
    #landing-treedom-treedom {display: none;}
}

@media only screen and (min-width: 1024px) {
    
    /*=== BANNER ===*/
    #chisiamo-banner-foresta {background: #CAE5F5;}
    
    #chisiamo-banner-foresta::before {
        background:  url(../../img/content/special/treedom/foresta-large.svg) center bottom / 2500px auto no-repeat;
        bottom: -160px;
        padding-bottom: 160px;
        top: unset;
        z-index: 1;
    }
    #chisiamo-banner-foresta .title {margin-top: 0;}
    /*=== // BANNER ===*/

        #landing-treedom-content #chisiamo-banner-foresta::before {background: url(../../img/content/special/treedom/foresta-large-2.svg) center bottom / 100% auto no-repeat;}
      
        #landing-treedom-content #chisiamo-banner-foresta{padding-bottom: 0;}
    
    #landing-treedom-treedom {margin-top: 170px;}
    
    #landing-treedom-albero{padding-bottom: 110px;}
        
        #landing-treedom-albero .title img {width: auto; max-width: 100%;}

        #landing-treedom-albero::before{background: url(../../img/content/special/treedom/bg-perche-un-albero.jpg) center top / cover no-repeat;}
        #landing-treedom-albero .upper {padding: 150px 0 0;}
            #landing-treedom-albero .upper::before{background-image: none;}

        #landing-treedom-albero .text {
            display: inline-block;
            margin-top: 30px;
            background-color: rgba(228,221,195, 0.85);
            font-size: 20px;
            padding: 0;
            margin: 20px;
        }

            #landing-treedom-albero .text p {
                background-image: url(../../img/content/special/treedom/albero1.svg), url(../../img/content/special/treedom/albero2.svg), url(../../img/content/special/treedom/albero1.svg);
                background-repeat: no-repeat;
                background-position: -30px bottom, 50px bottom, right -10px bottom;
                background-size: 112px, 97px, 104px;
                padding: 20px 180px 0 200px;
                position: relative;
                left: -20px;
                border-left: 20px solid transparent;
            }
            
            #landing-treedom-albero .text::before {background: none;}

            #landing-treedom-albero .text .value_1 {font-size: 48px;}
            #landing-treedom-albero .text .value_2 {font-size: 18px;}

            #landing-treedom-albero .text .link {transform: translateY(50%); margin-top: 0;}
    
}