html {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

    body {
      margin: 0;
      font-family: "Gotham", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
  color: #18233E;
  padding-top: 0px;
    }
    
    
    
   .website {font-size: 1px;
 width: 100%;
  color: #18233E;
  
  position: fixed;
  bottom:0px;
  padding-bottom: 75px;
      font-weight: 800;
      text-align: center;
      margin: 0px !important;
  opacity: 0;
}  
  
  
  .card{
      width: 100vw;
    }
  
 .bordino {
 border-left: 1px solid #eee;
 background: #fff;}   
 
    .card-body {
    margin-bottom: 0px;
    margin-top: 0px;}

    /* Overlay video fullscreen */
    #videoOverlay {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      background: #000;
      z-index: 9999;

      /* Stato iniziale */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      /* Fade IN e OUT */
      transition:
        opacity 1.5s ease,
        visibility 0s linear 1.5s;
    }

    /* Stato visibile */
    #videoOverlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;

      /* La visibility diventa subito visible */
      transition:
        opacity 1.5s ease,
        visibility 0s linear 0s;
    }

    /* Video fullscreen */
    #idleVideo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .btn {
    background: #FFFFFF;
    border: 0px;
    font-family: "Gotham", Arial, sans-serif;
      
      font-size: 14px;
      font-weight: 800;
  color: #18233E;
    }
    
    
    
    
    .btn:hover {
    background: #FFFFFF;
    border: 0px;
    color: #AC7F67;
  text-decoration: none;
      font-size: 14px;
      font-weight: 800;
    }
    
    .btn-primary {
    background: #FFFFFF;
    border: 0px;
    font-family: "Gotham", Arial, sans-serif;
      
      font-size: 14px;
      font-weight: 800;
  color: #18233E;
    }
    
    
    
    
    
    .centro{text-align: center;}
    
.btn-circle.btn-md {
    width: 90px;
    height: 90px;
    padding: 7px 10px;
    border-radius: 25px;
    border: 0px;
    font-size: 10px;
    text-align: center;
    overflow: hidden;
    margin: 10px;
}





.tit {
      margin: 0;
      font-family: "Gotham", Arial, sans-serif;
      font-size: 12px;
      font-weight: 800;
      text-align: left;
  color: #18233E;
    }
    
 .s_tit {
      margin: 0;
      font-family: "Gotham", Arial, sans-serif;
      font-size: 10px;
      font-weight: 400;
      text-align: left;
  color: #18233E;
    }   
    
    
    
    .tit30p {
      margin: 0;
      font-family: "Gotham", Arial, sans-serif;
      font-size: 12px;
      font-weight: 800;
      text-align: left;
  color: #18233E;
  opacity: 0.3;
    }
    
 .s_tit30p {
      margin: 0;
      font-family: "Gotham", Arial, sans-serif;
      font-size: 10px;
      font-weight: 400;
      text-align: left;
  color: #18233E;
  opacity: 0.3;
    }  
    
    
    .p_30 {
  
  opacity: 0.6 !important;
    }  
    
    h5 {
      font-family: "Gotham", Arial, sans-serif;
      font-size: 22px;
      font-weight: 800;
      text-align: center;
  color: #18233E;
  margin-bottom: 5px !important;
  margin-top: 15px  !important;
    }
    
.bottoni_s {
margin-top: 0px;
width: 100%;
  border: 0px !important;
padding: 1px;
border-radius: 20px;}









    
  .foo {font-size: 14px;
  color: #fff;
  border: 0px !important;
border-radius: 10px;
background: #18233E;
padding: 5px 30px;
}  
  .foo:hover {font-size: 14px;
  border: 0px !important;
background: #18233E;
padding: 5px 30px;}  
  
   .foo2 {font-size: 14px;
  color: #fff;
  border: 0px !important;
border-radius: 10px;
margin-right: 0px;
padding: 5px 20px;
background: #18233E;
margin-right: 20px;
}  
  .foo2:hover {font-size: 14px;
  border: 0px !important;
margin-right: 20px;
padding: 5px 20px;
background: #18233E;}  


.btn-icon {
margin-top: 20px;

width: 150px;
height: 150px;
max-width: 150px;
max-height: 150px;
clear:both;
}


.form-control {
padding: 5px;
width: 40%;
margin-left: 30%;
font-size: 20px;
text-align: center;
}




#ColoreLogo {
    width: 100px;
    height: 100px;
    padding: 0;
    border: 2px solid #000;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer !important;
    background: transparent;
    margin-left: 0px;
}

/* Chrome, Edge, Safari */
#ColoreLogo::-webkit-color-swatch-wrapper {
    padding: 0;
}

#ColoreLogo::-webkit-color-swatch {
    border: 2px solid #18233E;
    border-radius: 50%;
}

/* Firefox */
#ColoreLogo::-moz-color-swatch {
    border: 2px solid #18233E;
    border-radius: 50%;
}


.contenitore2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 30px !important;
    height: 30px !important;
    margin-top: -12.5px !important;

    background: #18233E !important;
    border: 0 !important;
    border-radius: 50% !important;
    cursor: pointer;
}

.custom-range::-moz-range-thumb {
    width: 30px !important;
    height: 30px !important;

    background: #18233E !important;
    border: 0 !important;
    border-radius: 50% !important;
    cursor: pointer;
}

.modulo-c {
padding: 10px 10px;
width: 95%;
font-size: 15px;
text-align: left;
font-family: "Gotham", Arial, sans-serif;
      font-weight: 400;
  color: #18233E;
  border: 1px solid #18233E;
  background: #FFFFFF;
    border-radius: 10px;
}

.modulo-t {
font-size: 15px;
text-align: left;
font-family: "Gotham", Arial, sans-serif;
  font-weight: 400;
  color: #18233E;
}

.form-row{
margin: 10px;}

.form-check{
margin: 22px;
text-align: left;}


.tito_m {
      font-family: "Gotham", Arial, sans-serif;
      font-size: 22px;
      font-weight: 800;
      text-align: left;
  color: #18233E;
  padding: 2px 20px;
    }
.tito_sm {
      font-family: "Gotham", Arial, sans-serif;
      font-size: 17px;
      font-weight: 400;
      text-align: left;
  color: #18233E;
  padding: 2px 20px;
  margin-bottom: 5px;
    }

.tito_sm2 {
      font-family: "Gotham", Arial, sans-serif;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
  color: #18233E;
  padding: 2px 20px;
  margin-bottom: 20px;
    }

.sottotitolo {
 font-family: "Gotham", Arial, sans-serif;
      font-size: 15px;
      font-style: italic;
      font-weight: 400;
      text-align: center;
  color: #18233E;
  padding-bottom: 35px !important;
  }
  
  
  
.box1 {position: absolute; top:0px; left:0%;  height:1000px; min-height: 1000px; max-height: 1000px; width: 600px; margin-top: -230px; margin-left: -80px; z-index: 4;}
.box2 {position: absolute; width: 700px;  top:80px; left:0%;  margin-left: 530px; background: #fff; z-index: 5; zoom: 0.85; }
  

  
  
  
  
   .tasti_i {
    height: 160px !important;
    width: auto;
  
  }
  
.box3 {zoom: 1.0;
        width: 100%;

        padding-left: 50px;}  
 .box4 {zoom: 1.0;
 margin-bottom:0px;
 
margin-top: 0px;
}  
 /* =========================
   TABLET
   768px - 1199px
   ========================= */

@media (min-width: 768px) and (max-width: 1199px) {

}


/* =========================
   MOBILE
   fino a 767px
   ========================= */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }
.box1 {position: relative; top:0px; left:0%;  height:550px; min-height: 550px; max-height:550px; width: 100%; margin-top: -40%; margin-left: 0%; z-index: 4;}
    

    .box2 {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        margin-top: 74%;
        background: #fff;
        z-index: 5;
        overflow-x: hidden;
    }

    .box3 {
        zoom: 0.5;
                width: 100%;
        border-left:0px solid #eee; background: #fff;
        
        padding-left: 0px;
    }


.box4 {
        zoom: 0.6;
margin-left: 0px;
margin-right: 0px;
    }
    
    
    .foo {font-size: 9px;
  color: #fff;
  border: 0px !important;
border-radius: 10px;
background: #18233E;
padding: 7px 10px;
        
}  
  .foo:hover {font-size: 9px;
  border: 0px !important;
background: #18233E;
padding: 7px 10px;
        }  

.bottoni_s {}


.foo2 {font-size: 18px;
  color: #fff;
  border: 0px !important;
border-radius: 10px;
margin-right: 0px;
padding: 7px 10px;
background: #18233E;
margin-right: 20px;
}  
  .foo2:hover {font-size: 18px;
  border: 0px !important;
margin-right: 20px;
padding: 7px 10px;
background: #18233E;}  


.custom-range{
margin-top: 30px;
margin-bottom: 30px;}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 40px !important;
    height: 40px !important;
    margin-top: -16px !important;
    height: 40px;

    background: #18233E !important;
    border: 0 !important;
    border-radius: 50% !important;
    cursor: pointer;
    padding-top: 30px;
}

.custom-range::-moz-range-thumb {
    width: 40px !important;
    height: 40px !important;

    background: #18233E !important;
    border: 0 !important;
    border-radius: 50% !important;
    height: 40px;
    cursor: pointer;
    padding-top: 30px;
}




.modal-content {
        zoom: 0.6;
    }




}



.titolo {
      
  font-family: "Tangerine", cursive;
  text-transform: uppercase;
      font-size: 50px;
      font-weight: 700;
  color: #18233E;
    }

 .modal-backdrop {
    background-color: #fff !important;
    
    opacity: 0.80 !important;
} 


#TestaBase_desc,
#TestaLegno_desc,
#TestaPlastica_desc,
#TestaAlluminio_desc {
margin-top: 20px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 10px;
    background: #18233E;
    color: #fff;
    font-size: 14px;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease;
}

#TestaBase:hover #TestaBase_desc,
#TestaLegno:hover #TestaLegno_desc,
#TestaPlastica:hover #TestaPlastica_desc,
#TestaAlluminio:hover #TestaAlluminio_desc {
    opacity: 1;
    visibility: visible;
}
  
  
.bottone_immagini {
    position: relative !important;
    overflow: visible !important;
}

.bottone_immagini[alt]::after {
    content: attr(alt);

    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);

    
    padding: 8px 14px;
    border-radius: 10px;
    white-space: nowrap;

    background: #18233E;
    color: #fff;
    font-size: 12px;

    font-weight: 400;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.6s ease;
    z-index: 9999;
}

.bottone_immagini[alt]:hover::after {
    opacity: 1;
    visibility: visible;
}


.btn-group-sm td {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.btn-group td {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}
.logoup {
font-size: 13px;
    padding: 10px;
    margin: 20px 8% 50px 55%;
    border-radius: 20px;
    background: #666;
    color: #fff; }