html, body {
  margin: 0;
  padding: 0;
  height: auto;
  scroll-behavior: smooth;
  overflow-x: hidden; 
}
h1{text-transform: uppercase; font-size: 2.6em}
.container-flex {
  width: 100%;
  display: flex;
  height: auto;   /* opzionale: per farli alti come la viewport */
}

.item50 {
  width: 50vw;
  min-height: 100vh;  
}

.bgdark{background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center}
.bglight{background-color: #fff; color: #000; display: flex; align-items: center; justify-content: center;}
.pagecontent{max-width: 70%; text-align: left;}
h1{font-size: 2em; margin-bottom: 24px}
.descrizione{font-size: 1.1em;}
.pagecontent hr {background-color: #333; opacity: 1; max-width: 70%; margin: 20px auto 30px auto}
.contattaci-title{font-size: 1.5em; text-transform: uppercase; padding-top: 4px; padding-bottom: 4px; padding-right: 20px}
.contattaci span {font-size:1em; font-weight: 600; padding-bottom: 20px}

.contact-now{border: #333 2px solid; background-color: #333; color: #fff; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 28px; font-size: 1.4em;
-webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
.contact-now:hover {border: #333 2px solid; background-color: #fafafa; color: #333;
-webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
.contact-now svg{width: 26px; height: 26px; fill: #fff}
.contact-now:hover svg{fill: #333}

input[type="text"], input[type="email"], textarea {border: #d5d5d5 1px solid; border-radius: 0 !important}
 input[type="text"]:focus, input[type="email"]:focus, textarea:focus {border: #707070 1px solid; border-radius: 0}
label {color: #707070; font-size: 0.9em}
.form-check a{color:#616161 !important; text-decoration: underline !important;} 

.btn-sp{border-radius:0; border:#707070 1px solid; text-transform: uppercase; background-color: #efefefe; font-size: 1em;
 -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
.btn-sp:hover{border-radius:0; border:#707070 1px solid;  background-color: #707070; color: #fff;
 -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
.fielderror{border:#ff0000 1px solid !important}
.texterror{color: #ff0000}
.form-err{color: #ff0000; font-size: 0.8em}
.form-control:focus, textarea.form-control:focus {
 border-color: #666;    
box-shadow: 0 0 0 0.25rem rgba(102, 102, 102, 0.3); 
}

#esito{min-height: 30px}
#privacy-error{color:#ff0000}
#esito{min-height: 30px}

.btn-share{margin-left: 12px; border: #333 2px solid; background-color: #fff; color: #333; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 16px; font-size: 1em; padding:0; 
-webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
.btn-share:hover{ background-color:#333 ; color:#fff;
-webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
.btn-share svg{width: 16px; height: 16px; fill: #333}
.btn-share:hover svg{fill: #fff}

.dir-xs{display: none}
.prev, .next, .back{color: #333; text-decoration: none; font-weight: 600}
.back{padding-left: 1rem; padding-right: 1rem}
.prev svg {width: 10px; height: 16px; rotate:90deg} 
.next svg {width: 10px; height: 16px; rotate:270deg} 

.btn-back{text-align: left}

@media (max-width: 991px) {
  .container-flex { flex-direction: column; height: auto; }
  .item50 { flex: 0 0 auto; width: 100%; min-height: auto; }
  .item50.bglight{ min-height: auto; height:auto; margin-top:40px; margin-bottom:40px }
}

@media (max-width: 556px) {
.pagecontent{max-width: 100%; padding-left: 12px; padding-right: 12px}
h1{font-size: 1.6em;}
.shareTitle{display: block; margin-bottom: 16px}
.contattaci-title {width:100% !important; margin-bottom: 16px}
.dir-lg{display: none}
.dir-xs{display: inline}
}