@charset "UTF-8";
/* COLOR VARIABLES
============================================= */
/* BASE */
/* GREY */
/* BLUE */
/* AZURE */
/* ORANGE */
/* YELLOW */
/* ============================================= */
/*$marginMenu: 150px;*/
/* COLORS
============================================= */
/* BG IMAGES
============================================= */
/* FLEXBOX
============================================= */
/* GRID
============================================= */
/* BOX SHADOW
============================================= */
/* OPACITY
============================================= */
/* TRANSITION
============================================= */
/* TRANSFORM
============================================= */
/* BORDER RADIUS
============================================= */
/* TEXT TRANSFORM
============================================= */
/* FONT
============================================= */
/* MANROPE
   =============================================
   font-display: optional e NON swap.

   Con "swap" il browser disegna subito col font di sistema e poi sostituisce
   Manrope quando arriva: la sostituzione e' per definizione un ricalcolo delle
   larghezze. Sul menu si vedeva come un guizzo — la riga di voci e' larga 18px
   in piu' col font vero, e avendo justify-content:center ogni voce si spostava
   di ~9px.

   Con "optional" il browser da al font ~100ms: se e' pronto lo usa da subito,
   se non lo e' tiene il fallback per QUESTA visita e non sostituisce piu'.
   In nessuno dei due casi il layout si muove.

   Perche' funziona bene qui: i woff2 sono self-hosted e pesano 14KB l'uno, e
   sono precaricati in _css.php (400, 500, 700), quindi la finestra dei 100ms
   la rispettano praticamente sempre.

   Il compromesso, da sapere: alla primissima visita con cache vuota e rete
   lenta la pagina puo' restare col font di sistema fino alla navigazione
   successiva. E' il prezzo di non avere spostamenti.
   ============================================= */
/* manrope-regular - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url("/library/fonts/manrope-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  src: url("/library/fonts/manrope-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  src: url("/library/fonts/manrope-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  src: url("/library/fonts/manrope-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-800 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  src: url("/library/fonts/manrope-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* SCROLLBAR
============================================= */
/* Barra di scroll sottile, aspetto simile a quella di macOS.
   Va dichiarata due volte: `scrollbar-width`/`scrollbar-color` e' lo standard
   (Firefox e Chromium 121+), i pseudo-elementi ::-webkit-scrollbar coprono
   Safari e i Chromium precedenti. Dove valgono entrambi vincono i pseudo.

   NON usarlo con un selettore universale: i ::-webkit-scrollbar hanno la
   precedenza su `scrollbar-width: none`, quindi farebbero ricomparire le barre
   nascoste di proposito (.filtri-shop, .menu-container, ecc.). */
/* ---------------------------------------------------------------------------------------------------- */
/* SLIDER HOMEPAGE ------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------- */
#main-slider {
  margin-top: calc(clamp(70px, 6vw, 100px) + 50px);
  position: relative;
}
#main-slider ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#main-slider ul li {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  align-items: start;
  grid-template-areas: "title imgbanner" "description imgbanner" "cta imgbanner" ". imgbanner";
}
#main-slider ul li.mappa {
  grid-template-areas: "title imgbanner" "description imgbanner" "cta imgbanner" "mappa imgbanner";
}
#main-slider ul li h1 {
  grid-area: title;
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 600;
  color: #262626;
  font-size: clamp(38px, 3vw, 130px);
  line-height: calc(clamp(52px, 7vw, 80px) * 0.95);
}
#main-slider ul li p {
  grid-area: description;
  color: #636B73;
}
#main-slider ul li picture {
  aspect-ratio: 3/2;
  grid-area: imgbanner;
  align-self: stretch;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
}
#main-slider ul li picture img {
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
}
#main-slider ul li div {
  margin-top: 24px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  grid-area: cta;
}
#main-slider ul li div .btn {
  margin: 0 24px 0 0;
}
#main-slider ul li .map {
  grid-area: mappa;
  align-self: end;
}
#main-slider ul li .map a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
}
#main-slider ul li .map a img {
  max-width: 240px;
}
#main-slider ul li .map a hgroup {
  align-items: flex-start;
}
#main-slider ul li .map a hgroup h2 {
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 120%;
  margin-bottom: 10px;
  text-align: left;
}
#main-slider .slide-x-nav {
  z-index: 10;
  position: absolute;
  right: 20px;
  bottom: calc(clamp(70px, 8vw, 130px) + 20px);
}

/* ---------------------------------------------------------------------------------------------------- */
/* MEDIA QUERY ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
@media all and (max-width: 1200px) {
  #main-slider ul li {
    grid-template-areas: "title imgbanner" "description imgbanner" "cta imgbanner";
  }
  #main-slider ul li.mappa {
    grid-template-areas: "title imgbanner" "description imgbanner" "cta imgbanner" "mappa mappa";
  }
  #main-slider ul li .map {
    justify-self: center;
  }
  #main-slider .slide-x-nav {
    z-index: 10;
    position: absolute;
    right: 20px;
    bottom: 130px;
  }
}
@media all and (max-width: 1023px) {
  #main-slider ul li {
    grid-template-areas: "title title" "imgbanner imgbanner" "description cta";
  }
  #main-slider ul li.mappa {
    grid-template-areas: "title title" "imgbanner imgbanner" "description cta" "mappa mappa";
  }
  #main-slider ul li div {
    margin-top: 0;
  }
  #main-slider ul li div .btn {
    white-space: nowrap;
  }
}
@media all and (max-width: 880px) {
  .slide-x-nav {
    display: none;
  }
  .visible-arrows .slide-x-nav {
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
  }
  #main-slider ul li {
    grid-template-areas: "title " "imgbanner" "description" "cta";
    grid-template-columns: 1fr;
  }
  #main-slider ul li.mappa {
    grid-template-areas: "title " "imgbanner" "description" "cta" "mappa";
  }
  #main-slider ul li div {
    margin-top: 0;
    justify-content: center;
  }
  #main-slider ul li p {
    text-align: center;
  }
  #main-slider ul li .map a {
    flex-direction: column;
    width: 100%;
  }
}
@media all and (max-width: 720px) {
  #main-slider ul li .map a img {
    max-width: 100%;
  }
}
@media all and (max-width: 568px) {
  #main-slider ul li div {
    flex-direction: column;
    gap: 16px;
  }
  #main-slider ul li div .btn {
    width: 100%;
  }
}

/*# sourceMappingURL=slider.css.map */