html {
  scroll-behavior: smooth;
}

body {
  font-family: "Sansation", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #333;
  margin: 0; /* spesso utile */
  padding: 0;
}

/* FONTS */

/* Anybody - Variable Font */
@font-face {
    font-family: 'Sansation';
    src: url('../fonts/Sansation/Sansation-Light.ttf') format('truetype');
    font-weight: 300;
    font-stretch: 50% 150%; /* Anybody supporta anche larghezza variabile */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/Sansation/Sansation-Regular.ttf') format('truetype');
    font-weight: 400;
    font-stretch: 50% 150%; /* Anybody supporta anche larghezza variabile */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/Sansation/Sansation-Bold.ttf') format('truetype');
    font-weight: 700;
    font-stretch: 50% 150%; /* Anybody supporta anche larghezza variabile */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('../fonts/MaterialSymbolsOutlined.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: 100;
    font-style: normal;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.grecaptcha-badge { 
visibility: hidden; 
}

hr {
margin-top:2rem;
padding-top:2rem;
border-top:1px solid #1D7D83;
}

hr.bianco {
margin-top:2rem;
padding-top:2rem;
border-top:1px solid #fff;
}

a, a:hover {
color:inherit;
text-decoration:none;
}

.contenuto a {
color:#1D7D83;
text-decoration:none;
}

img {
width:100%;
height:auto;
}

b, strong {
font-weight:700;
}

/* TIPOGRAFIA */

h1,h2,h3,h4,h5,h6 {
font-family: "Sansation", sans-serif;
line-height:.9;
}

h1 {
font-size:5rem;
}
h2 {
font-size:3.5rem;
}
h3 {
font-size:2rem;
}

.contenuto h2 {
font-size:2rem;
line-height:1.1;
}
h4 {
font-size:1.15rem
}

.grande {
font-size:1.5rem;
line-height:1.2;
}

.medio {
font-size:1.25rem;
}

/* Effetto linea sopra titoli */

.linea {
  position: relative;
  padding-top: 3rem;
}

.linea::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: .75rem;
  background-color: #1D7D83;
}

.lineabianca {
  position: relative;
  padding-top: 3rem;
}

.lineabianca::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: .75rem;
  background-color: #fff;
}

.lineacx {
  position: relative;
  padding-top: 3rem;
}

.lineacx::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;                    /* sposto il bordo sinistro al centro */
  transform: translateX(-50%);  /* riporto indietro della metà della sua larghezza */
  width: 15%;                   /* oppure la larghezza che vuoi, es. 200px */
  height: .75rem;
  background-color: #1D7D83;
}

/* PESI */

.lite {
font-weight:300;
}

.regular {
font-weight:400;
}

.heavy {
font-weight:700;
}

.indice {
font-size:5rem;
font-weight:800;
line-height:.8;
}

.claimhome {
font-size:2.5rem;
line-height:1;
}

.legenda {
font-size:.8rem;
font-weight:600;
}

@media only screen and (max-width: 768px) {
h1 {font-size:3rem}
h2 {font-size:2.5rem}
h3 {font-size:2rem}
.imgback {height:50vh;padding:20vh 0}
}

/* COLORI */

.faga {
color:#1D7D83;
}
.green {
color:teal;
}

.bianco {
color:#fff;
}
.biancobg {
background-color:#fff;
}

.chiaro {
color:#eee;
}
.chiarobg {
background-color:#fafafa;
}

.scuro {
color:#333;
}
.scurobg {
background-color:#333;
}

/* Navigation */

.navbar-collapse {
    display: block !important;
}
.navbar-header {
    display: none !important;
}

nav {
height:15vh;
z-index:9999;
}

.mega-sub-menu {
padding-top:5rem;
background: #1D7D83!important;
}

.mega-sub-menu img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border:1px solid #fff;
padding:1rem;
}

.logo img {
height:4rem;
}

.name {
font-weight:400;
font-size:2rem;
line-height:1;
letter-spacing:-.1rem;
text-transform: uppercase;
border-left:1px solid #333;
padding:2rem 0 2rem 2rem;
}

/* Header */

header {
height:85vh;
position: relative;
width:100%;
}

.interna {
height:85vh;
}

header .container {
position: relative;
z-index: 2;
}

.bread {
font-size:.9rem;
border-bottom:1px solid #fff;
margin-bottom:2rem;
padding-bottom:1rem;
}

/* Heroes */

.herohome {
position:relative;
height:70vh;
border-radius:1rem;
width:100%;
}

/* CONTENT */

.prodotti .material-symbols-outlined {
font-size:3rem;
font-weight: 500;
color:#1D7D83;
}

.prodotti {
cursor: pointer;
color: inherit;
}

.prodotti:hover {
color: inherit;
}

.prodotti .icona-container {
position: relative;
}

.prodotti .icona-prodotto,
.prodotti .icona-freccia {
transition: opacity 0.3s ease, transform 0.3s ease;
}

.prodotti .icona-freccia {
position: absolute;
top: 0;
right: 0;
opacity: 0;
transform: translateX(5px);
}

.prodotti:hover .icona-prodotto {
opacity: 0;
}

.prodotti:hover .icona-freccia {
opacity: 1;
}

/* SEZIONE */

.sezione {
position:relative;
padding: 15vh 0;
}

.centrale img {
margin:2rem 0;
}

.centrale h2, .laterale h2 {
font-size:2.5rem;
}

.contenuto h1,h2,h3 {
margin-bottom:2rem;
}

.immagine {
height:20vh;
margin:1rem 0;
}

.stretto {
padding-right:10rem;
}

/* MORE BIANCO */

.morebianco, .morebianco:hover {
padding:.5rem 1rem;
transition: 0.25s;
color:#555;
font-weight:400;
font-size:1rem;
border:1px solid #555;
border-radius:0;
}

.morebianco span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.25s;
}

.morebianco span:after {
font-family: 'Material Symbols Outlined';
content: '\e5c8';
position: absolute;
opacity: 0;
top: 0;
right: 0;
transition: 0.25s;
}

.morebianco:hover span {
left:0;
padding-right: 2rem;
color:#555;
}

.morebianco:hover span:after {
opacity: 1;
right: 0;
color:#555;
}

.morebianco:hover span:before {
opacity: 0;
right: 0;
color:#555;
}

/* MORE NEGATIVO */

.moreneg, .moreneg:hover {
padding:.5rem 1rem;
transition: 0.25s;
color:#fff;
font-weight:400;
font-size:1rem;
border:1px solid #fff;
border-radius:0;
}

.moreneg span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.25s;
}

.moreneg span:after {
font-family: 'Material Symbols Outlined';
content: '\e5c8';
position: absolute;
opacity: 0;
top: 0;
right: 0;
transition: 0.25s;
}

.moreneg:hover span {
left:0;
padding-right: 2rem;
color:#fff;
}

.moreneg:hover span:after {
opacity: 1;
right: 0;
color:#fff;
}

.moreneg:hover span:before {
opacity: 0;
right: 0;
color:#fff;
}

/* MORE PRODOTTI */

.moreprodotti, .moreprodotti:hover {
padding:.5rem 1rem;
transition: 0.25s;
color:#555;
font-weight:400;
font-size:1rem;
border:1px solid #555;
border-radius:0;
}

.moreprodotti span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.25s;
}

.moreprodotti span:after {
font-family: 'Material Symbols Outlined';
content: '\f1e4';
position: absolute;
opacity: 0;
top: 0;
right: 0;
transition: 0.25s;
}

.moreprodotti:hover span {
left:0;
padding-right: 2rem;
color:#555;
}

.moreprodotti:hover span:after {
opacity: 1;
right: 0;
color:#555;
}

.moreprodotti:hover span:before {
opacity: 0;
right: 0;
color:#555;
}

/* wpcf7 */

/* Form container */
.wpcf7 {
    width: 100% !important;
}

.wpcf7 form {
    width: 100%;
}

/* Wrapper spans */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
padding:.5rem 1rem;
}

/* Paragrafi del form */
.wpcf7 p {
width: 100%;
margin-bottom: 1rem;
}

/* Labels */
.wpcf7 label {
font-size:.9rem;
display: block;
width: 100%;
color:white;
}

.wpcf7 input[type="submit"] {
padding: .5rem 2rem;
border:1px solid #fff;
color:#fff;
background-color:#1D7D83;
border-radius: 0;
cursor: pointer;
font-size: 1rem;
}

/* FOOT */

footer {
background-color:#333;
padding:10vh 0;
position:relative;
color:#fff;
line-height:1.2;
}