:root {
    --grigio-chiaro: #4b4d59;
    --grigio:#2b2c33;
    --rosso-scuro:#b22222;
    --azzurro:#AEDDFF;
    --white: #ffffff;
    --white-trasparent: #ffffffb3;
    --black: #000000;
    --grigio-trasparent:#2b2c33e6;
}
body {
    background-color: var(--grigio);
    font-family: "Urbanist", sans-serif;
}
.video-gomme{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-text{
    position: absolute;
}
.image-container{
    overflow: hidden;
    position: relative;
}
.back-grigio-trasparent{
    background-color: var(--grigio-trasparent);
}
.back-white{
    background-color: var(--white);
}
.back-white-trasparent{
    background-color: var(--white-trasparent);
}
.back-sfondo-sede{
    position: relative;
    z-index: -1;
    background-image: url("../img/sfondo-sede.jpg");
    background-size: cover;
    background-attachment: fixed;
}
.payof{
    font-style: italic;
    font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1920 - 300)));
}
#map{
    height:27.5vw;
}
.blu-scuro{
    color:var(--blu-scuro);
}
.back-montaggio{
    background-image: url("../img/montaggio.jpg");
    background-size: cover;
    background-position: center;

}
.back-esposizione{
    background-image: url("../img/gomme.jpg");
    background-size: cover;
    background-attachment: fixed;
}
.back-red{
    background-color: var(--rosso-scuro);
}
.white{
    color: var(--white);
}
.back-gomma{
    background-attachment: fixed;
    background-image: url("../img/sfondo-pneumatico.png");
    background-position: center;   
}
.box-floated{
    position: absolute;
    margin:auto;
    top:3rem;
    bottom:0;
    right:0
 }
.red{
    color: var(--rosso-scuro);
}
.bordered-start{
    border-left:2px solid var(--blu)
}
.bordered-start-white{
    border-left:2px solid var(--white)
}
.flex-start{
    display: flex;
    justify-content: start;
}
/*animation*/
 .animated{
    animation-duration: 2s;
 }
 #video-back{
    width: 100%;
    height: 100%;
    max-height: 85vh;
    object-fit: cover;
 }
 #gomme{
    height: 88vh;
    width: 100%;
    object-fit: cover; 
 }
 .back-strisciata{
    background-image: url("../img/strisciata.svg");
    background-size: cover;
    background-position: 80% 61%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
 }
 .box{
    position: relative;
 }
 
 .back-cerchioni{
    background-image: url("../img/gomme.png");
    background-size: 60vh;
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: no-repeat;
 }
 .box-right{
    text-align: right;
 }
 .list{
    list-style: none;
 }
 .list li{
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
 }
 .back-grigio{
    background-color: var(--grigio);
 }
 
 .back-white{
    background-color: var(--white);
 }
/* -------------- CLASSI ULILITY ------------------*/
/*flex-control*/

/*------------- TITLE E TESTI-----------------*/
.title{
    font-family: "ADLaM Display", system-ui;
    text-transform: uppercase;
    line-height: 6rem;
    padding:0.2em;
    font-size: calc(63px + (100 - 63) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    
}
.title-page{
    font-family: "ADLaM Display", system-ui;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-size: calc(38px + (43 - 38) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 800;
    color:var(--white);
}
.title-2{
    text-transform: uppercase;
    line-height: 2rem;
    letter-spacing: 0rem;
    font-size: calc(63px + (100 - 63) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 800;
    color:var(--secondary);  
}
.overlay{
    padding:1em;
}
.icon-contatti{
    width:100px;
    position: absolute;
    top:-50px;
}
.subtitle-box{
    font-family: "Kode Mono", monospace;
    font-size: calc(30px + (40 - 30) * ((100vw - 300px) / (1920 - 300)));
    color: var(--white);
}
.subtitle {
    font-family: "ADLaM Display", system-ui;
    font-weight: 700;
    font-size: calc(35px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));  
}
.nav-link{
    color:var(--white);
    font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1920 - 300)));
}
.logo-nav{
    max-width: 150px;
}
.domanda{
    font-family: "Kode Mono", monospace;
    background-color: var(--white);
    color:var(--rosso-scuro);
    font-weight: 600;
}
.button, .button-inverted{
    white-space: nowrap;
    background-color: var(--rosso-scuro);
    color: var(--white);
    padding:0.5em;
    border-radius: 20px;
    text-decoration: none;
}
.button-inverted{
    color:var(--rosso-scuro);
    background-color: var(--white);
}
.button-inverted:hover{
    color:var(--white);
    background-color: transparent;
    border: 2px solid var(--white);
}
.button:hover{
    background-color: var(--white);
    border: 2px solid var(--rosso-scuro);
    color:var(--rosso-scuro)
}
.text, .text-icon, .text-box{
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.link-footer, .text-footer{
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.link-footer{
    color: var(--black);
    text-decoration: none;
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.link-footer:hover{
    color: var(--blu-scuro);
    
}
.dati-aziendali {
    color: var(--white);
}
.dati-aziendali a {
    color: var(--white);
    text-decoration: none;
}
.dati-aziendali a:hover {
    color: var(--blu-scuro);
}
.sotto{
    position: relative;
    z-index: -1;
}
@media only screen and (max-width:1920px){
    .box-right {
        top: -22vh;
    }
    #map{
        height:65vh;
    }
    #gomme{
        height:80vh;
    }
    .box-floated{
        top:0%;
    }
    .back-cerchioni{
        top:1vh;
    }
    .subtitle {
        font-size: calc(22px + (24 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-box, .text{
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
}
@media only screen and (max-width:1830px){
    .carousel-item{
       height: 100%;
       object-fit: cover;

    }
    .subtitle {
        font-size: calc(29px + (32 - 29) * ((100vw - 300px) / (1920 - 300)));
    }
    #gomme{
        height: 98vh;
       
     }
}
@media only screen and (max-width:1465px) and (max-height:700px){
     .section-height{
        height:100vh;
     }
    #map{
        height:94vh;
    }
    .box-floated{
        top:0%;
    }
    .box-right {
        top: -41vh;
    }
    #gomme{
        height:120vh;
    }
    .title-page{
        font-size: calc(33px + (35 - 33) * ((100vw - 300px) / (1920 - 300))); 
    }
    .subtitle {
        font-size: calc(29px + (32 - 29) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-box, .text{
        font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
}
@media only screen and (max-width:1442px){
    #map{
        height:69vh;
    }
    .subtitle {
        font-size: calc(22px + (24 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-box, .text{
        font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
    #gomme{
        height:90vh;
    }
}
@media only screen and (max-width:800px){
    .box-text{
        padding-top:2vh;
        padding-bottom:2vh;
        position: unset
    }
    .leggi{
        color: var(--white);
        font-style: italic;
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .back-strisciata{
        background-position: 78% 69%;
     }
    .navbar-nav{
        text-align: left!important;
    } 
    .back-cerchioni{
        position: relative;
        background-size: 30vh;
        top:7vh;
    }
    .box-right {
        top: -22vh;
    }
    #map{
        height:35vh;
    }
    #gomme{
        height: 90vh;
        position: relative;
        left: -28%;
        width: 128%;
    }
    .subtitle {
        font-size: calc(22px + (24 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-box, .text, .text-icon, .list li{
        font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
}
@media only screen and (max-width:580px){
    .back-strisciata{
        background-position: 0% 61%;
     }
    .card{
        text-align: left;
    }
    
    .navbar-nav{
        text-align:left!important;
    }
    
    #gomme{
        left:unset;
        object-fit: contain;
        height:unset;
        position: unset;
        width:100%;
    }
    #map{
        z-index: 2;
        height:30vh;
    }
    .box-floated{
        position:unset;
    }
    .title-page{
        line-height: unset;
        
        font-size: calc(25px + (35 - 25) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 800;
        color:var(--white);
    }
    .title {
        line-height: 3.6rem;
        padding:0.2em;
        font-size: calc(43px + (43 - 25) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 800;
        color:var(--white);
    }
    .payof{
        margin-bottom:2rem;
        font-style: italic;
        font-size: calc(22px + (23 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-box, .text, .text-icon{
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
}
@media only screen and (max-width:390px){

}