/*background: rgb(88,141,212);
background: linear-gradient(90deg, rgba(88,141,212,1) 1%, rgba(130,163,208,1) 15%, rgba(143,31,139,1) 29%, rgba(211,64,168,1) 36%, rgba(228,65,85,1) 45%, rgba(229,68,84,1) 56%, rgba(255,142,58,1) 75%, rgba(255,145,60,1) 77%, rgba(255,227,115,1) 97%);*/
:root {
    --arancio: #fcb402;
    --orange-darker: #ed8427;
    --blue: #7da4c6;
    --light-blue:#7bc7ee;
    --dark-blue: #34347f;
    --purple:#947fc9;
    --white: #ffffff;
    --white-trasparent: #ffffff79;
    --white-trasparent-light: #ffffff36;
    --black: #000000;
    --gray: #696767;
    --black-trasparent: #00000069;
    --verde: #01aba1;
}
nav{
    border-bottom:4px solid var(--blue);
}
.bordo{
    border-bottom:4px solid var(--blue);
}
.card-title{
    font-size: calc(22px + (24 - 22) * ((100vw - 300px) / (1920 - 300))); 
    color: var(--blue);
}
.back-light-blue{
    background-color: var(--light-blue);
}
.card{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin-bottom: 2rem;
}
.card img{
    position: relative;
    overflow: hidden;
    
    margin-right: 15px;
    margin-top: -30px;
    border-radius: 6px;
    box-shadow: 0 16px 38px -12px rgba(223, 223, 223, 0.56);
}
.link-nav-2{
    padding:0.3em;
    text-decoration: none;
    color:var(--blue);
    white-space: nowrap;
}
.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);
}
body {
    font-family: "Urbanist", sans-serif;
}

.back-rullo{
    background-image: url("../img/rullo.jpg");
    background-size: cover;
    background-position:66%;
    background-repeat: no-repeat;
    aspect-ratio: 4/3;
}
.back-gocce{  
    background-image: url("../img/2.svg?v=0.1");
    background-size: cover;
}
#map{
    height:600px;
}
#video-back{
    margin-top:2rem;
    width:100%;
    max-height:84vh;
    
    position: relative;
    object-fit: cover;
    padding:0;
}
.back-arancione{
    background-color: var(--arancio);
}
.back-verde{
    background-color: var(--verde);
}
.back-blu{
    background-color: var(--light-blue);
}
.back-arancio-sfumato{  
    background: rgb(254,181,3);
    background: linear-gradient(5deg, rgba(254,181,3,1) 6%, rgba(251,202,3,1) 47%, rgba(255,222,3,1) 100%);
}
.title{
    position: relative;
    font-size: calc(55px + (65 - 55) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    color: var(--blue);
    padding-left:1em;
}
.title-mini{
    text-transform: uppercase;
    font-weight: 200;
    font-size: calc(25px + (35 - 25) * ((100vw - 300px) / (1920 - 300)));
}
/* -------------- CLASSI ULILITY ------------------*/
/*flex-control*/
.flex-end {
    display: flex;
    justify-content: end;
}
.vertical-bottom{
    display: flex;
    align-items: end;
}
.flex-centered {
    display: flex;
    justify-content: center;
}
.vertical-center {
    display: flex;
    align-items: center;
}
.nopadding{
    padding:0;
}
.nomargin{
    margin:0;
}
.list li {
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300))); 
    color:var(--dark-blue);
}
.list{
    padding-left:4em;
}
.back-white-trasparent{
    background-color: var(--white-trasparent);
}
/*------------- TITLE E TESTI-----------------*/
.subtitle-contatti{
    padding-left:0.5em;
    font-weight: 700;
    padding-bottom: 0.5em;
    font-size: calc(45px + (45 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--blue);
}
.subtitle {
    font-weight: 700;
    padding-left: 1em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--blue);
}
.subtitle-inverted {
    font-weight: 700;
    padding-left: 1em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--white);
}
.subtitle-footer{
    color: var(--blue);
    font-weight: 700;
    font-size: calc(45px + (35 - 22) * ((100vw - 300px) / (1920 - 300))); 
}
.text{
    padding:2em;
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300))); 
}
.text-dark-blue{
    color:var(--dark-blue);
    padding:2em;
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300))); 
}
.text-inverted{
    color:var(--white);
    padding:2em;
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300))); 
}
.spacing-bottom{
    padding-bottom:1em;
}
/*------------------ VIDEO ------------------*/
.logo-footer{
    width:40%;
}
.content{
    min-height: 40vh;
}
/*------------------ NAVBAR ------------------*/
.navbar {
    background-color: var(--white);  
}
.logo{
    position: absolute;
    left:0;
}
.nav-item {
    padding-right: 6em;
}
.nav-link {
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 600;
    color:var(--blue); 
}
.nav-link:hover{
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 600;
    color: var(--yellow);
    background-color: var(--white); 
}
/*-------------- FOOTER ---------------*/
.link-footer { 
    text-decoration: none;
    color: var(--black);
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.dati-aziendali {
    font-family: 'Roboto', sans-serif;
    background-color: #262626;
    color: var(--white);
    padding: 0.5em;
    margin-bottom: 0px;
}
.dati-aziendali  a{
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: var(--white);
    padding: 0.5em;
    margin-bottom: 0px;
}
.logo-footer{
    width:40%;
    padding:1em;
}
.col-footer{
    padding-bottom:1.5em;
}
/*------------------- BORDI --------------------*/
.bordered-top{
    border-top: 3px solid;
    border-image: linear-gradient(90deg, rgba(88,141,212,1) 1%, rgba(130,163,208,1) 10%, rgba(143,31,139,1) 20%, rgba(211,64,168,1) 29%, rgba(228,65,85,1) 35%, rgba(229,68,84,1) 41%, rgba(255,142,58,1) 50%, rgba(255,142,58,1) 55%, rgba(229,68,84,1) 61%, rgba(211,64,168,1) 73%, rgba(143,31,139,1) 81%, rgba(130,163,208,1) 92%, rgba(88,141,212,1) 100%) 1 0 0 0;
}

.collapse-button{
    padding:1em;
}

/*------------------- BACKGROUND IMAGE ---------------------*/
.text-inverted{
    color:var(--white);
}
.back-gradient{
    background: #b193c2;
}

.row-button{
    padding-left:2.5em;
    padding-bottom:1.5em;
}
.back-barattolo{
    min-height: 55vh;
    background-image: url("../img/barattolo.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90%;
   
}
/*-------------- LINK ---------------------*/
.button, .button-blu, .button-orange, .button-purple{
    white-space: nowrap;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.button-blu {  
    background-color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    color: var(--white);
}
.button-blu:hover {   
    background-color: var(--white);
    border: 1px solid var(--dark-blue);
    color: var(--black);
}
.button-orange {
    background-color: var(--orange-darker);
    border: 1px solid var(--orange-darker);
    color: var(--white);
}
.button-orange:hover {
    background-color: var(--white);
    border: 1px solid var(--orange-darker);
    color: var(--black);
}
.button-purple {
    background-color: #947fc9;
    border: 1px solid #947fc9;
    color: var(--white);
}
.button{
    background-color: var(--blue);
    color: var(--white);
    border: 1px solid var(--blue);
}
.button-purple:hover {
    background-color: var(--white);
    border: 1px solid #947fc9;
    color: var(--black);
}
.back-pennello{
    background-image: url("../img/pennello.png");
    background-size: cover;
    background-position: 80% 40%;
    margin-bottom: -3rem;
}
.back-idrocolor{
    background-image: url("../img/idrocolor.png");
    background-size: cover;
    background-position: 80% 40%;
  /*  margin-bottom: -3rem; */
}
.back-cin{
    background-image: url("../img/cin_pavimenti2.png");
    background-size: cover;
    background-position: 80% 40%;
    /*margin-bottom: -3rem; */
}
.back-aquastop{
    background-image: url("../img/aquastop2.png");
    background-size: cover;
    background-position: 80% 40%;
  /*  margin-bottom: -3rem;*/
}
.back-micaceo{
    background-image: url("../img/ferro_micaceo2.png");
    background-size: cover;
    background-position: 80% 40%;
/*     margin-bottom: -3rem; */
}


.container-button{
    padding-top:1em;
    padding-bottom:2em;
}
.container-button-pdf{
    padding-top:0.3em;
    padding-bottom:1em;
}

.button:hover {
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.box-form{
    padding:2em;
}
/*--------------------------- CLASSI COLORI TESTO ----------------------------------*/
.white {
    color: var(--white);
}
.black{
    color: var(--black);
}
.back-white{
    background-color: var(--white);
}
.back-white-trasparent{
    background-color: var(--white-trasparent);
}
.back-white-trasparent-page{
    background-color: var(--white-trasparent-light);
}
.back-black-trasparent{
    background-color: var(--black-trasparent);
}
.back-icon{
    background-color: var(--secondary);
    border-radius: 50%;  
}
.back-blue{
    background-color: var(--secondary);
}
.bordered{
    border:3px solid var(--light-blue);
}
/*-------------------------------------*/
@media only screen and (max-width:1798px) {
    .nav-item{
        padding-right:2.5em;
    }
}

@media only screen and (max-width:1465px) {
    .nav-link {
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
        
    }
    .text{
        padding:2em;
    }
    .back-barattolo{
        min-height:83vh;
    }
    .content{
        min-height:45vh;
    }
    .back-rullo{
        background-size: 83vw;
        background-position: 63% 100%
    }
    .nav-item{
        padding-right:2em;
    }
    
    #map{
        height:100vh;
    }
    .logo-nav{
        max-width:150px;
    }
    .subtitle-inverted{
        font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-inverted{
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .subtitle{
        font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300))); 
    }
    .text{
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    }

    
}
@media only screen and (max-width:1438px) {
   
    #map{
        height:300px;
    }
    .back-arancio-sfumato{  
        background: rgb(252,129,0);
        background: linear-gradient(77deg, rgba(252,129,0,1) 12%, rgba(249,160,0,1) 47%, rgba(251,167,7,1) 92%);
    }

    .back-rullo{
        background-size: 45vw;
    }
    .visible-laptop{
        display:block!important;
    }
    .hidden-laptop{
        display:none!important;
    }
    .nav-link{
        font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1920 - 300))); 
    }
    .content{
        min-height: 35vh;
    }
    .back-barattolo{
        min-height:51vh;
    }
}
@media only screen and (max-width:1070px){
    .nav-item{
        padding-right:0.5em;
    }
}
@media only screen and (max-width:991px) {
    .back-pennello{
        min-height:35vh;
    }
    @media only screen and (max-width:991px) {
    .back-cin{
        min-height:35vh;
    }
    .back-aquastop{
        min-height:35vh;
    }
    .back-idrocolor{
        min-height:35vh;
    }
    .back-micaceo{
        min-height:35vh;
    }
    .subtitle{
        padding-left:0.5em;
    }
    .subtitle-inverted{
        padding-left:0.5em;
    }
    .text{
        padding-left:1em;
    }
    .text-inverted{
        padding-left:1em;
    }
    #map{
        height:400px
    }
    .logo-footer{
        max-width:30vw;
    }
    .back-arancio-sfumato{  
        background: rgb(252,129,0);
        background: linear-gradient(77deg, rgba(252,129,0,1) 12%, rgba(249,160,0,1) 47%, rgba(251,167,7,1) 92%);
    }
    .back-rullo{
        background-size: cover;
    }
    .visible-tablet{
        display:block!important;
    }
    .content{
        min-height: 23vh;
    }
    .back-barattolo{
        min-height:51vh;
    }
    .hidden-tablet{
        display:none!important;
    }
    .nav-link {
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
        color:var(--blue);
        
    }
    .nav-link:hover {
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
        color:var(--blue);
        
    }
    .dropdown-menu li a{
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    
    .title-2{
        text-transform: uppercase;
        line-height: 1.5rem;
        letter-spacing: 0rem;
        font-size: calc(40px + (40 - 22) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 800;
        color:var(--secondary);
        
    }
    /*------------------- BACKGROUND IMAGE ---------------------*/
    .nav-item{
        padding-right:0;
    }
   

    .nav-link{
        padding-left:1em;
        padding-top:0.7em;
        padding-bottom:0.7em;
    }
    .text{
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300))); 
    }
    .text-inverted{
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300))); 
    }
    .link-footer{
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .col-footer{
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
}
@media only screen and (max-width:600px) {
   
    .row-button{
        text-align: center;
    }
    #map{
        height:300px;

    }
    .back-pennello{
        min-height: 35vh
    }
    .back-cin{
        min-height: 50vh
    }
     .back-aquastop{
        min-height: 50vh
    }
     .back-idrocolor{
        min-height: 50vh
    }
     .back-micaceo{
        min-height: 50vh
    }
    .title{     
        padding-left:0.5em;
        font-size: calc(35px + (45 - 35) * ((100vw - 300px) / (1920 - 300)));
    }
    .link-nav-2{
        padding:0.3em;
        text-decoration: none;
        color:var(--blue);
        white-space: nowrap;
    }
    .back-rullo{
        background-size: cover;
    }
    .box-form{
        padding:1em;
    }
    
    .button-space{
        padding-top:2em;
    }
    .back-arancio-sfumato{  
        background: rgb(252,129,0);
        background: linear-gradient(83deg, rgba(252,129,0,1) 12%, rgba(249,160,0,1) 39%, rgba(251,167,7,1) 66%, rgba(250,203,4,1) 100%);
    }
    .row-button{
        text-align: center;
        padding-left:0;
    }
    .back-barattolo{
        min-height:32vh;
    }
    #video-back{
        width: 110%;
        position: relative;
        object-fit: cover;
        padding:0;
        margin:0;
        padding-top:5em;
        top:0.5rem;
    }
    .content{
        min-height:18vh;
    }
    .subtitle-contatti{
        font-weight: 700;
        padding-top:0em;
        padding-bottom: 0.5em;
        font-size: calc(35px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    }
    
    
    .nav-link {
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
        text-transform: unset;
        color:var(--blue);  
    }
    .nav-link:hover {
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 600;
        text-transform: unset;
        color:var(--blue);    
    }
    .link-footer{
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
    .col-footer{
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }
    .nav-link{
        padding-left:1em;
        padding-top:0.3em; 
    }
    .subtitle-inverted{
        padding:0.5em;
        font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300)));
    }
    .subtitle{
        padding:0.5em;
        font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-inverted{
        padding:1em;
        font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .text{
        padding:1em;
        font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .dati-aziendali{
        padding:1em;
        font-size: calc(14px + (14 - 11) * ((100vw - 300px) / (1920 - 300)));
    }
    .text-dark-blue{
        padding:1em;
        font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .list{
        padding-left:2.4em;
    }

    /*------------------- BACKGROUND IMAGE ---------------------*/
    
}
@media only screen and (max-width:406px) {
    .link-nav-2{
        font-size: calc(13px + (17 - 13) * ((100vw - 300px) / (1920 - 300))); 
    }
}