:root {
    --primary: #7d7270;
    --secondary: #f5ca17;
    --white: #ffffff;
    --black: #000000;
    --gray: #696767;
    --black-trasparent: #00000044;
    --navbar: var(--secondary);
    --white-opacity: #ffffffb5;
    --white-opacity-2:#3f477d3b;
    --border-color: #344647;
    --btn-back: #da9d1a;
    --btn-nav-back: #da9d1a;
    --btn-hover: #b29b81;
    --blue: #2b435e;
    --light-blue:#3f477d;
}
.back-blue-trasparent{
    background-color: var(--white-opacity-2);
}
.logo-chiave{ 
    width: 50%;
    top:80%;
    position: relative;
}
.img-hover-zoom {
    /* [1.1] Set it as per your need */
   overflow: hidden; /* [1.2] Hide the overflowing of child elements */
 }
 
 /* [2] Transition property for smooth transformation of images */
 .img-hover-zoom img {
   transition: transform .5s ease;
 }
 
 /* [3] Finally, transforming the image when container gets hovered */
 .img-hover-zoom:hover img {
   transform: scale(1.1);
 }
 .animated{
    animation-duration: 1s;
 }
 .light-blue{
    color: var(--light-blue);
 }
 .border-logo{
    background-color: var(--white-opacity);
    border:2px solid var(--light-blue);
    border-radius:70%;
    width:40%;
 }
 .home{
    text-shadow: 2px 0 #3f477d, -2px 0 #3f477d, 0 2px #3f477d, 0 -2px #3f477d,
               1px 1px #3f477d, -1px -1px #3f477d, 1px -1px #3f477d, -1px 1px #3f477d;
 }
 .home-mini{
    text-shadow: 2px 0 #f5ca17, -2px 0 #f5ca17, 0 2px #f5ca17, 0 -2px #f5ca17,
               1px 1px #f5ca17, -1px -1px #f5ca17, 1px -1px #f5ca17, -1px 1px #f5ca17;
 }
 .chiave{
    width:22%;
 }
.blue{
    color:var(--blue);
}
.aposto{
    padding:1em;
    padding-left:2em;
}
.hover-video{
    position: absolute;
    left:0;
    bottom:0px;
    width:34%;
}
.icon-side{
    font-size:5rem;
    padding-left:0.2em;
}
#firstPopup {
    top: 30%;
    border-radius: 23% 25% 25% 27% / 50% 25% 25% 50%;
}
.link-icon{
    color: #000000;
}
.sidePopup p {
    padding: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    line-height: 20px;
}
.sidePopup {
    height: 100px;
    width: 150px;
    position: fixed;
    right: -45px;
    top: 50%;
    margin-top: -2.5em;
    background-color: var(--secondary);
    z-index: 999; 
    display: flex;
}
.visiblePopupPart,
.hiddenPopupPart {
    display: inline-flex;
}
.content {
    min-height:99vh;
}
.content-cambio{
    min-height:99vh;
}
.content-servizi {
    min-height:99vh;
}
.content-chi-siamo {
    min-height:99vh;
}

body {
    font-family: 'Urbanist', sans-serif;
}
h1{
    
    font-family: 'Oswald', sans-serif;
}
.icon{
    padding-bottom:1em;
}
.container-icon{
    padding:1em;
}
.header-chi-siamo{
    position: relative;
    z-index: -1;
    background-image: url("../img/chi-siamo.jpg");
    background-size: cover;
    min-height: 85vh;
    background-position: 20% 20%;
    background-attachment: fixed;
}
.header-servizi{
    position: relative;
    z-index: -1;
    background-image: url("../img/servizi.jpg");
    background-size: cover;
    min-height: 85vh;
    background-position: 20% 20%;
    background-attachment: fixed;
}
.text-servizi{
    padding-top:0.8em;
    font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
}
.overlay-header{
    min-height:85vh;
    background-color: var(--black-trasparent);
}
.title-index {
    margin-bottom:0;
    padding-top:1em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--secondary);
    font-size: calc(40px + (80 - 33) * ((100vw - 300px) / (1920 - 300))); 
}
.title-page {
    background-color: var(--white-opacity-2);
    margin-bottom:0;
    text-transform: uppercase;
    position: absolute;
    font-weight: 400;
    color: var(--secondary);
    font-size: calc(90px + (110 - 90) * ((100vw - 300px) / (1920 - 300))); 
}
.provincia {
    color:var(--gray);
    font-family: 'Mulish', sans-serif;
    font-size: calc(62px + (32 - 16) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
}
.subtitle {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    padding-top:1em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--secondary);
}
.button-container{
    padding-left: 2.5em;
}
.subtitle-start {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    padding-top:3em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--secondary);
}
.subtitle-icon {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    padding-top:1em;
    padding-left: 1em;
    padding-bottom: 1em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--secondary);
}
.subtitle-inverted {
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    padding-top: 0em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--blue);
}
.subtitle-footer{
    font-family: 'Oswald', sans-serif;
    color: var(--blue);
    font-weight: 200;
    font-size: calc(45px + (35 - 22) * ((100vw - 300px) / (1920 - 300))); 
}
/*Navbar*/
.navbar {   
    background-color: var(--white);
}
.navbar-collapse{
    padding:0.5em;
    background-color: var(--secondary);
}
.navbar-expand-lg{
    flex-wrap: wrap;
    padding-bottom: 0;
}
.logo-nav{
    padding:1em;
    width:20%;   
}
.logo{
    position: absolute;
    left:0;
}
.link-footer {
    font-family: 'Mulish', sans-serif;
    text-decoration: none;
    color: var(--blue);
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}
/*-------------------- Navbar ----------------------- */
.text-hover-card{
    background-color: var(--black-trasparent);
    position: relative;
}
.bordered-top{
    border-top:5px solid var(--secondary);
}
.bordered{
    border:2px solid var(--white);
}
.label{
    font-size: calc(16px + (16 - 12) * ((100vw - 300px) / (1920 - 300)));
    color:var(--white);
    background-color: var(--btn-back);
    margin-bottom:0;
    padding:0.5em;  
}
.col-footer{
    padding:2em;
}
.title-hover-image{
    position: absolute;
    bottom:50px;
}
.back-consumi{
    background-image: url("../img/officina.jpg");
    background-size: cover;
    min-height:65vh;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.back-staff{
    background-image: url("../img/back-staff.jpg");
    background-size: cover;
    min-height: 85vh;
    background-position: 50% 50%;
    background-repeat: no-repeat;   
}
.back-certificazione{
    background-image: url("../img/cerificazione.jpg");
    background-size: cover;
    min-height:65vh;
    background-position: 10% 50%;
    background-repeat: no-repeat;
    
}
.back-servizi{
    background-image: url("../img/servizi-1.jpg");
    background-size: cover;
    min-height: 85vh;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.img-index{
    border:6px solid var(--btn-hover);   
}
.img-hover-zoom {
    cursor:pointer;
    overflow: hidden;
}
.img-hover-zoom img {
    transition: transform .5s ease;
}
.img-hover-zoom:hover img {
    transform: scale(1.1);
}
.back-black-trasparent{
    background-color: var(--black-trasparent);
}
.white{
    color:var(--white);
}
/* Background */
.back-header{
    background-image: url("../img/laboratorio.jpg");
    background-size: cover;
    min-height: 99vh;
}
#back-video{
    z-index:-1;
    position: fixed;
    width:100vw;
    object-fit: cover;
    height: 100%;    
}
#back-video-servizi{
    z-index:-1;
    position: fixed;
    width:100vw;
    object-fit: cover;
    height: 100%;    
}
#back-video-chi-siamo{
    z-index:-1;
    position: fixed;
    width:100vw;
    object-fit: cover;
    height: 100%;    
}
#back-video-cambio{
    z-index:-1;
    position: fixed;
    width:100vw;
    object-fit: cover;
    height: 100%;    
}
#back-cambio-1{
    padding:0;
    object-fit: cover;
    position: relative;
    height:60vh;
    width:110%;
}
.back-lapide{
    background-image: url("../img/lapide.jpg");
    background-size: cover;
    min-height: 45vh;
    width:33vw;
}
.back-tomba{
    background-image: url("../img/tomba.jpg");
    background-size: cover;
    min-height: 45vh;
    width:33vw;
}
.back-targa{
    background-image: url("../img/targa.jpg");
    background-size: cover;
    min-height: 45vh;
    width:33vw;
}
.back-marmo{
    clip-path: polygon(48.6% 13.8%, 100% 2.5%, 100% 79.3%, 49.7% 99.3%, 0% 82.3%, 0.3% 3.8%);
    background-image: url("../img/marmo.jpg");
    background-size: cover;
    background-attachment: fixed;
    min-height: 75vh;
}
.back-opere{
    background-image: url("../img/targa.jpg");
    background-size: cover;
    min-height:65vh;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.back-informazioni{
    background-image: url("../img/sfondo-form.jpg");
    background-size: cover;
    min-height:55vh;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-repeat: no-repeat;  
}
.back-brown {
    color: var(--white);
    background-color: var(--secondary);
}
.back-black {
    background-color: var(--black);
}
.back-storia{
    background-image: url("../img/storia.jpg");
    background-size: cover;
    background-position: 30% 40%;
    min-height:45vh;
    width:30vw;
    border-radius: 25% 43% 38% 25% / 0% 45% 51% 0%;
}
.back-secondary{
    background-color: var(--secondary);
}
.back-lightblue {
    color: var(--white);
    background-color: var(--seconday-light);
}
.back-white{
    background-color: var(--white);
}
.back-white-trasparent {
    background-color: var(--white-opacity);
}
.img-hover{
    border-radius: 0% 26% 23% 0% / 25% 50% 50% 25%;
    position: absolute;
    bottom:0px;
    left:0;
    padding:1em;
}
.container-wa{
    display:none;
    background-color: var(--white);
    padding:0.9em;
    border-radius:10%;
    color: #5e2b20;
    z-index:999999999;
    position: fixed;
    bottom: 25px;
    right: 25px;
}
.icon-wa{
    font-size:3rem;
}
.container-buttom {
    padding: 1em;
    padding-bottom: 2em;
}
.logo-footer{
    width:25%;  
}
.back-officina{
    min-height:75vh;
    background-image: url("../img/head.jpg");
    background-size: cover;
    background-position: 100% 50%;
}
.back-chi-siamo-2{
    min-height:35vh;
    background-image: url("../img/chi-siamo-2.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.back-cosa-facciamo{
    min-height:75vh;
    background-image: url("../img/head-cosa-facciamo.jpg");
    background-size: cover;
    background-position: 50% 12%;
}
.section-contatti {
    padding-top: 2em;
}
.container-subtitle{
    position: relative;
    z-index:-1;
    padding:3em;
    padding-left:0;
}
#map {
    height: 360px;
}
.title-icon{
    font-size: calc(18px + (18 - 12) * ((100vw - 300px) / (1920 - 300)));
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Mulish', sans-serif;
}
.list{
    padding:1em;
}
.list li{
    font-size: calc(16px + (16 - 12) * ((100vw - 300px) / (1920 - 300)));
    color:var(--blue);
    list-style: none;
    padding-left: 2em;
    padding-top:0.5em;
    padding-bottom:0.5em;
}
.img-hover-video{
    width:60%;
}
.hover-video{
    position: absolute;
    min-height: 20vh;
    left:0;
    bottom:-70px;
    width:34%;
}
.link-contatti {
    text-decoration: none;
    color: var(--white);
    font-size: calc(16px + (16 - 12) * ((100vw - 300px) / (1920 - 300)));
}
.button {
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    background-color: var(--blue);
    border: 1px solid var(--blue);
    color: var(--white);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.button-inverted {
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid var(--btn-back);
    color: var(--btn-back);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.button-inverted:hover {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    background-color: var(--btn-back);
    border: 1px solid var(--btn-back);
    color: var(--white);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.button:hover {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid var(--btn-back);
    color: var(--btn-back);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.btn-nav {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    background-color: var(--btn-nav-back);
    border: 1px solid var(--btn-back);
    color: var(--white);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.btn-nav:hover {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    background-color: var(--secondary);
    border: 1px solid var(--btn-back);
    color: var(--black);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.text-hover{
    position:relative;
    z-index:2;
}
/*flex-control*/
.flex-end {
    justify-content: end;
}
.flex-centered {
    display: flex;
    justify-content: center;
}
.vertical-center {
    align-items: center;
}
.sub-h1{
    font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300))); 
}
.title-header-index{
    padding:0.8em;
    line-height: 2.4rem;
    margin-bottom:0;
    text-transform: uppercase;
    color: var(--secondary);
    font-size: 9rem;
    font-weight: 700;
}
.subtitle-header-index{   
    margin-bottom:0;
    line-height: 0.3rem;
    text-transform: uppercase;
    color: var(--secondary);
    font-size: 2rem;
    font-weight: 700;
}
.subtitle-page {
    padding-top: 1em;
}
.sottotitolo {
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
}
.subtitle-h1 {
    padding: 5em;
    padding-bottom: 10em;
    font-size: calc(16px + (16 - 12) * ((100vw - 300px) / (1920 - 300)));
}
/*text*/
.text {
    color:var(--black);
    font-weight: 400;
    padding: 1em;
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.text-inverted {
    color:var(--blue);
    font-weight: 400;
    padding: 2em;
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.spacing-bottom{
    padding-bottom:2em;
}

.link-privacy {
    text-decoration: none;
    color: var(--white);
}
.subtitle-servizi-h2 {
    padding: 0.5em;
    padding-top: 4em;
    padding-bottom: 2em;
    font-size: calc(24px + (24 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.subtitle-servizi {
    padding: 0.5em;
    font-size: calc(24px + (24 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.section.contatti {
    padding: 2em;
}
.subtitle-contatti {
    
    font-weight: 400;
    padding-top:0.8em;
    padding-bottom:0.8em;
    color:var(--white);
}
.text-contatti {
    padding: 1em;
    padding-bottom:1em;
}
/*Color*/
.white {
    color: var(--white);
}
.servizi {
    margin: 1rem;
    border: 2px solid var(--border-color);
}
.container-servizi {
    background-color: var(--black);
    position: relative;
    z-index: -1;
    height: 25%;
    width: 33vw;
}
.sfumato {
    background: #ffffff;
    background: -webkit-linear-gradient(107deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(107deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.back-black {
    background-color: var(--black);
}
.icon-contatti{
    width:100px;
    position: absolute;
    top:-20px;
}
.line{
    background-color: var(--secondary);
    min-height: 5px;
    width:10%;
    margin-left:3rem;
}
.line-white{
    background-color: var(--blue);
    min-height: 5px;
    width:10%;
    margin-left:3rem;
}
.overlay {
    padding:3em;
    position: relative;
}
.img-servizi {
    position: relative;
    z-index: -1;
}
.nav-item {
    padding-right: 2em;
}
.nav-link {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: 0.1rem;
}
.nav-link:hover{
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--btn-back);
    background-color: var(--white);
    letter-spacing: 0.1rem; 
}
.back-tomba-cosa-facciamo{
    background-size: cover;
    background-image: url("../img/tomba-cosa-facciamo.jpg");
    min-height: 54vh;
}
.back-materiali{
    background-size: cover;
    background-image: url("../img/materiali.jpg");
    min-height: 60vh;
}
.nopadding {
    padding: 0px;
}
#videohead {
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
.text-start {
    padding-bottom: 2em;
}
.text-intro {
    padding-left: 1em;
    box-shadow: -1.5px -4.5px 12px -3.5px #4d4d4d;
}
.text {
    padding-left: 2em;
}
.title-text {
    padding-bottom: 0.5em;
    padding-left: 0.5em;
}
.footer {
    background-color: var(--white);
    padding-bottom: 0em;
    color: var(--black)
}
.dati-aziendali {
    font-family: 'Roboto', sans-serif;
    background-color: #262626;
    color: var(--white);
    padding: 0.5em;
    margin-bottom: 0px;
}
.container-wa{
    border:2px solid var(--secondary);   
}
.cambio-mini{
    font-size: calc(85px + (100 - 82) * ((100vw - 300px) / (1920 - 300)));
}
.cambio{
    font-size: calc(85px + (100 - 82) * ((100vw - 300px) / (1920 - 300)));
}

strong {
    font-weight: 900;
}

@media only screen and (max-width:1920px) {
    #back-cambio-1{
        height:84vh;
    }
}
@media only screen and (max-width:1440px) {
    .border-logo{
        position: absolute;
        width: 40%; 
    }
    .title-index { 
        margin-bottom:0;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--secondary);
        font-size: calc(42px + (63 - 42) * ((100vw - 300px) / (1920 - 300))); 
    }
}
@media only screen and (max-width:1333px) {
    #back-cambio-1{
        padding:0;
        object-fit: cover;
        position: relative;
        height:70vh;
        width:100%;
    }
    .logo-nav{
        width:60%;
    }
    .logo-footer{
        width:40%;
    }
    .back-decorazioni{
        min-height: 70vh;
        background-size: 35vw;
    }
    .back-opere{
        min-height: 70vh;
    }
    .subtitle-inverted{
        padding-top:0.5em;
    }
    .hover-video{
        position: absolute;
        min-height: 20vh;
        left:0;
        bottom:-70px;
        width:34%;
    }
    .text-chi-sono {
        font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    }
    #video-home {
        bottom: 35vh;
    }
    .subtitle-h1 {
        padding-bottom: 8em;
    }
    .spacing-bottom{
        padding-bottom:1em;
    }
}
@media only screen and (max-width:1024px) {
    .border-logo{
        position: absolute;
        width: 35%;
    }
    .title-index { 
        margin-bottom:0;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--secondary);
        font-size: calc(32px + (43 - 32) * ((100vw - 300px) / (1920 - 300))); 
    }
    .logo-nav{
        width:60%;
    }
    .content-chi-siamo{
        min-height: unset;
    }
    .content-servizi{
        min-height: unset;
    }
    .content-cambio{
        min-height: unset;
    }
    .content{
        min-height: unset;
    }
    #back-cambio-1{
        padding:0;
        object-fit: cover;
        position: relative;
        height:80vh;
        width:100%;
    }
    #back-video{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;      
    }
    #back-video-servizi{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;   
    }
    #back-video-chi-siamo{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;   
    }
    #back-video-cambio{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;    
    }
    .content-cambio{
        min-height:unset;
    }
    .content{
        min-height:unset;
    }
}
@media only screen and (max-width:768px) {
    .border-logo{
        position: absolute;
        width: 50%;
        height:unset;
       
    }
    .title-index {
        line-height:unset;
        font-weight: 800;
        padding-top:1em;
        text-transform: uppercase;
        color: var(--secondary);
        font-size: calc(34px + (48 - 34) * ((100vw - 300px) / (1920 - 300))); 
    }
    #back-video-cambio{
        padding-top:10.5em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;    
    }
    #back-cambio-1{
        padding:0;
        object-fit: cover;
        position: relative;
        height:45vh;
        width:100%;
    }
    #back-video-servizi{
        padding-top:7.5em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;   
    }
    .logo{
        left:-20px;
    }
    #map{
        height:200px;
    }
    .navbar-collapse{
        padding-top:1em;
    }
    .back-officina{
        min-height: 45vh;
    }
    .back-consumi{
        min-height:45vh;
    }
    .back-informazioni{
        min-height:45vh ;
    }
    .back-certificazione{
        min-height:45vh ;
    }
    .back-staff{
        min-height:45vh;
    }
    .header-chi-siamo{ 
        background-attachment: unset;
        background-position: center;
        min-height:65vh;
    }
    .back-servizi{
        min-height:45vh ;
    }
    .header-servizi{
        background-attachment: unset;
        background-position: center;
        min-height:65vh;
    }
    .title-page{
        bottom:0;
    }
    .logo-nav{
        width:60%;
    }
    .navbar-2{
        background-color: var(--secondary);
        padding:0.3em;
    }
    .text-icon{
        font-size: calc(23px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
    }
    .text{
        font-size: calc(22px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
    }
    .list li{
        font-size: calc(22px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
    }
    .logo-footer{
        width:60%;
    }
    .col-footer{
        padding:0.5em;
    }
    .back-decorazioni{
        background-size: cover;
        min-height: 35vh;
    }
    .back-opere{
        min-height: 35vh;
    }
    .back-marmo{
        clip-path: unset;
    }
    .title {
        padding: 0;
    }
    .subtitle-h1 {
        padding: 0;
    }
    .text-chi-sono {
        padding-left: 1em;
    }
    .section-contatti {
        padding: 1em;
    }
    #video-home {
        bottom: 15vh;
    }
    
    .provincia {
        color:var(--gray);
        font-family: 'Mulish', sans-serif;
        font-size: calc(42px + (32 - 16) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 700;
    }
    #back-video{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;      
    }
    #back-video-servizi{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;   
    }
    #back-video-chi-siamo{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;   
    }
    #back-video-cambio{
        padding-top:10.8em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;    
    }
    .content-cambio{
        min-height:unset;
    }
    .content{
        min-height:unset;
    }
}
@media only screen and (max-width:630px) {
    .border-logo{
        position: absolute;
        width: 60%;
        height:unset;
       
    }
    .title-index {
        line-height:unset;
        font-weight: 800;
        padding-top:1em;
        text-transform: uppercase;
        color: var(--secondary);
        font-size: calc(22px + (38 - 22) * ((100vw - 300px) / (1920 - 300))); 
    }
    .content-cambio{
        min-height:unset;
    }
    #firstPopup{
        top:80%;
    }
    .navbar-2{
        background-color: var(--white);
    }
    .content{
        min-height:unset;
    }
    #back-video{
        padding-top:2.5em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;      
    }
    #back-video-servizi{
        padding-top:2.5em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;   
    }
    #back-video-chi-siamo{
        padding-top:2.5em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;   
    }
    #back-video-cambio{
        padding-top:2.5em;
        z-index:-1;
        position: relative;
        width:100vw;
        object-fit: cover;
        height: 100%;    
    }
    .content-servizi{
        height:unset;
    }
    .content-chi-siamo{
        height:unset;
    }
    .content-cambio{
        height:unset;
    }
    .spacing{
        padding:0;
    }
    .overlay{
        padding:3em;
    }
    .icon-contatti{
        width: 80px;
        position: absolute;
        top: -10px;
    }
    
    .back-decorazioni{
        min-height: 45vh;
        width:100vw;
        background-position: 50% 10%;
    }
    .back-officina{
        min-height:35vh; 
    }
    .back-marmo{
        background-attachment: unset;
    }
    .back-decorazioni{
        background-size: cover;
    }
    .back-marmo{
        clip-path: unset;
    }
    .back-cosa-facciamo{
        background-position: 50% 10%;
        min-height: 45vh;  
    }
    .back-materiali{
        min-height: 45vh; 
    }
    .header-vision{
        min-height: 45vh;
    }
    
    
    .footer{
        padding:0em;
    }
    .subtitle-footer{
        padding-top:1em;
    }
    .container-logo-footer{
        text-align:center;
    }
    .dati-aziendali{
        padding:1em;
        font-size: calc(11px + (11 - 9) * ((100vw - 300px) / (1920 - 300)));
    }
    .subtitle-section-inverted{
        padding:1;
        padding-top:2em;
        font-size: calc(28px + (28 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
    .subtitle-section{
        padding-top:1em;
    }
    
    .container-subtitle{
        padding:0em;
    }
    .col-footer{
        padding:0;
    }
    .text-pages{
        padding:1em;
        padding-left:2em;
    }
    .container-wa{
        border:2px solid var(--secondary);
        bottom:10px;
        right:10px;
    }
    .icon-wa{
        font-size:3rem;
    }
    .logo-nav{
        width:40%;
    }
    #map {
        height: 250px;
    }
    .logo-footer{
        padding:1em;
        width:80%;
    }
    .title {
        padding: 0;
    }
    .title-icon{
        font-size: calc(32px + (32 - 19) * ((100vw - 300px) / (1920 - 300)));
    }
    .subtitle-h1 {
        padding: 0;
    }
    .container-chi-siamo {
        padding: 1em;
    }
    .text-chi-sono {
        padding-left: 1em;
    }
    .section-contatti {
        padding: 0px;
    }
    .line{
        width: 40%;
        margin-left:1.5rem;
    }
    .spacing-bottom{
        padding-bottom:2em;
    }
    .button{
        font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));  
    }
    .button-inverted{
        font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));  
    }
    .subtitle{
        padding:0;
        padding-top:1em;
        padding-left:0.3em;
        font-size: calc(38px + (42 - 38) * ((100vw - 300px) / (1920 - 300)));
    }
    .line-white{
        width: 40%;
        margin-left:1.5rem;
    }
    .icon-contatti{
        margin-left: auto;
        margin-right: auto;
        top:-7px;
        left: 0;
        right: 0;
    }
    .subtitle-contatti{
        text-align: center;
    }
    .text {
        padding:1em;
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
    .list li{
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-inverted {
        padding:1em;
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
    .dati-aziendali {
        font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1920 - 300)));
    }
    .back-decorazioni{
        min-height:35vh;  
    }
    .back-opere{
        min-height:35vh;
    }
    
    .provincia {
        color:var(--gray);
        font-family: 'Mulish', sans-serif;
        font-size: calc(42px + (32 - 16) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 700;
    }
    .logo-nav-mobile{
        width:70%;
        padding-right: 2em;
    }
    .nomargin{
        margin:0;
    }
    
    .provincia {
        color:var(--gray);
        font-family: 'Mulish', sans-serif;
        font-size: calc(42px + (32 - 16) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 700;
    }
    .hover-video{
        display: flex;
        align-items: end;
        height: 99%;
        left:0;
        bottom:0px;
        width:34%;
        min-height:80vh;
    }
    
    .subtitle-icon{
        padding-left:0;
    }
    .back-consumi{
        min-height:35vh;
    }
    .back-certificazione{
        min-height:35vh;
    }
    .back-informazioni{
        min-height:45vh;
    }
    .button-container{
        text-align: center;
        padding-left:0;
    }
    .line-white{
        margin-left:1rem;
    }
    .line{
        margin-left:1rem;
    }
    .subtitle-inverted{
        padding-left:0.3em;
        font-size: calc(38px + (42 - 38) * ((100vw - 300px) / (1920 - 300)));
    }
    
    .header-chi-siamo{
        min-height:55vh;
        background-attachment:unset;
        background-position: 30% 80%;
    }
    .header-servizi{
        min-height:55vh;
        background-attachment:unset;
        background-position: center;
    }
    
    .title-page{
        
        position: unset ;
        background-color: unset;
        z-index: 1;
        bottom:35px;
        left:0;
        text-transform: uppercase;
        color: var(--secondary);
        font-size: calc(55px + (55 - 22) * ((100vw - 300px) / (1920 - 300))); 
    }
    .back-staff{
        min-height: 35vh;
    }
    .list li{
        padding-left:0.5em;
    }
    .overlay-header{
        background-color: var(--black-trasparent);
    }
    .subtitle-cambio{
        padding-left:0.5em;
    }
    .title-mini{
        font-size: calc(75px + (75 - 22) * ((100vw - 300px) / (1920 - 300))); 
    }
    .cambio{
        
        font-size: calc(35px + (35 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
    .cambio-mini{
        font-size: calc(35px + (35 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-servizi-1{
        padding:2em;
    }
    
}
@media only screen and (max-width:430px) {
    .logo-chiave{
        width: 100%;
        
        position: relative;
    }
    .row-logo{
        background-color: var(--white);
    }
    .sidePopup{
        height: 70px;
        right:-102px;
    }
    .icon-side{
        font-size:2rem;
        padding-left:0.2em;
        right: -92px;
        padding:0.4em;
    }
    .subtitle-start{
        padding-top:1em;
        padding-left:0.5em;
        font-size: calc(32px + (34 - 32) * ((100vw - 300px) / (1920 - 300)));
    }
    .line{
        margin-left:1.4rem;
    }
    #back-cambio-1{
        padding:0;
        object-fit: cover;
        position: relative;
        height:45vh;
        width:100%;
    }
    .subtitle-cambio{
        font-size: calc(35px + (35 - 22) * ((100vw - 300px) / (1920 - 300)));
    }
  
    
}