/*!
 * App style
 */

 @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 /*Stile di root*/
 :root {
  --swiper-pagination-bullet-size: 13px;
    --swiper-navigation-color: var(--primary) !important;
    --swiper-theme-color: var(--primary) !important;
    --swiper-pagination-bullet-horizontal-gap: 8px;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-inactive-color: #D9D9D9; 
    --swiper-navigation-size: 30px !important;
    --h_full_banner: 100vw;
    --height-banner: max(300px, min(52vw, 700px)); 
    --height-logo: max(115px, min(12vw, 140px)) !important;
    --size-font: 16px;
    /* --altezzaHeader: 60px !important; */
    /* --distanzaHeaderTop: 0px !important; */
    /* --altezzaPreHeader: 60px; */
    /* --lh: 17px; */

    --columns-1: 1;
    --columns-2: 2;
    --columns-3: 3;
    --columns-4: 4;
    --columns-5: 5;
    --columns-6: 6;
    /* Numero di colonne, puoi cambiare questo valore da 1 a 6 */
    --gap: 36px;
    --gapmobile: 26px;
  }

  .grid-container {
    display: grid;
    /*  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); */
    grid-row-gap: 25px;
    /* Elementi con larghezza minima di 200px */
    grid-column-gap: var(--gap);
    width: 100%;
    /* Adatta alla larghezza del contenitore padre */
    max-width: 1110px;
    /* Massima larghezza impostata */
    margin: 0 auto;
    /* Centra il contenitore se la larghezza è inferiore a 1110px */
  }

  .grid-container.x-2 {
    grid-template-columns: repeat(auto-fill, minmax(calc(1100px / var(--columns-2) - var(--gap)), 1fr));
  }

  .grid-container.x-3 {
    grid-template-columns: repeat(auto-fill, minmax(calc(1100px / var(--columns-3) - var(--gap)), 1fr));
  }

  .grid-container.x-4 {
    grid-template-columns: repeat(auto-fill, minmax(calc(1100px / var(--columns-4) - var(--gap)), 1fr));
  }

  .grid-container.x-5 {
    grid-template-columns: repeat(auto-fill, minmax(calc(1100px / var(--columns-5) - var(--gap)), 1fr));
  }


  pre{
  color: white !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    width: 100%;
    overflow: auto;
  }
  footer a{
      color: white;
      text-decoration: none;
  }

  footer a:hover {
    text-decoration: none;
  }

  .small-txt {
    font-size: .825rem!important;
  }
  .small-txt a {
    text-decoration: none;
  }

  html.no-overflow {
    overflow: hidden;
  }
 
  html,
  body {
    height: 100%;
    overflow-x: clip;
  }

  .img-cover {width: 100%; height: 100%; object-fit: cover;}
  .img-contain {width: 100%; height: 100%; object-fit: contain;}
  
  body{
  /* background-color: black; */
    background-color: white;
    width: 100%;
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    top: initial !important;
    position: initial !important;
    padding:0 !important;
  }
  .dropdown-menu{
    min-width: initial !important;
  }
  .page-content{
    transform: translateX(0);
    transition: all .3s ease-in-out;
  }
  body.menu-mobile-opened .page-content {
    /* transform: translateX(85%); */
    transform: translateX(calc(max(200px, min(85%, 300px)) * -1));
    transition: all .6s ease-in-out 0.1s;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Raleway";
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    font-weight: 700;
    color: var(--primary);
  }

  a:hover{
    text-decoration: underline;
    color: var(--primary) !important;
  }
  p{
    margin: 0;
  }

  .gap-row{
    row-gap: 5px;
  }
  .gap-column{
    column-gap: 5px;
  }
  .gap-row-1{
    row-gap: 10px;
  }
  .gap-column-1{
    column-gap: 10px;
  }
  .gap-row-2{
    row-gap: 20px;
  }
  .gap-column-2{
    column-gap: 20px;
  }
  .gap-row-3{
    row-gap: 30px;
  }
  .gap-column-3{
    column-gap: 30px;
  }
  .img-zoomed{
    overflow: hidden;
  }
  .img-zoomed img {
      transform: scale(1);
      transition: all 500ms ease-in-out;
  }
  .img-clip{
    clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);
  }

  .pulsante{
    --colore-sfondo-pulsante: var(--primary);
    display: block;
    position: relative;
    width: max-content;
    text-transform: uppercase;
    padding: 9px 10px !important;
    padding-inline: max(20px, min(3.47vw, 40px));
    font-family: "Raleway";
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    text-decoration: none;
    background-color: transparent;
    border: 0;    
    border: 3px solid var(--colore-sfondo-pulsante);
    background-color: var(--colore-sfondo-pulsante);
    color: white !important;
    border-radius: 34px;
  }
  .pulsante:is(:hover, .active){
    text-decoration: none;
    background-color: white;
    color: var(--colore-sfondo-pulsante) !important;
  }
  .pulsante.other{
    z-index: 1;
    padding: 10px 20px;
    font-size: 16px;
  }
  .pulsante:hover::before{
    /* width: 0; */
    transition: width 0.5s ease-in-out;
  }

  .pulsante.inverted{
    --colore-sfondo-pulsante: var(--white);
    color: var(--primary) !important;
    min-width: 160px;
    text-align: center;
  }
  
  .pulsante.inverted:is(:hover, .active){
    background-color: transparent;
    color: white !important;
  }
  

  .card:hover .img-zoomed img, .img-zoomed:hover img{
    transform: scale(1.1);
  }

  .scroll-custom::-webkit-scrollbar{
    width: 5px;
    height: 10px;
  }

  .scroll-custom::-webkit-scrollbar-thumb{
    background: rgba(90, 90, 90, 0.374);
  }

  .scroll-custom::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0);
  }


  #backdrop-menu{
    display: none;
    background-color: hwb(0deg 0% 100% / 40%);
    width: 100vw;
    height: 100vh;
    /* position: absolute; */
    position: fixed;
    z-index: 100;
    top: 0;
  }
  #backdrop {
    display: none;
    background-color: rgb(0 0 0 / 40%);
    width: 100vw;
    /* height: 100vh; */
    height: 100%;
    position: fixed;
    z-index: 100;
    top: initial;
  }

  /*****************************************
  ************       MENU       ************
  *****************************************/

  header#header-desktop{
    position: relative;
    z-index: 1000;
    top: 0;
    background-color: white;
  }
  header#header-desktop.sticky{
    position: sticky;
    box-shadow: 0px 3px 6px #00000029;
    --height-logo: 60px;
  }
  .sticky .super-header{
    display: none !important;
  }
  .super-header{
    background-color: black;
    color: white !important;
    font-family: "Raleway" !important;
    font-weight: bold;
    position: sticky;
  }
  .super-header ul{
    list-style-type: none;
    padding: 0;
    display: inline-flex;
    margin: 0;
    padding-block: 16px !important;
  }
  .super-header a{
    display: flex;
    align-items: center;
    color: white !important;    
  }
  .super-header a:hover{
    text-decoration: underline;
    color: white !important;
    font-weight: bold;
  }
  .super-header a img{
    padding-right: 5px;
  }

  #logo img{
    display: block;
    margin: auto;
    max-height: var(--height-logo);
    margin-left: 20px;
  }

  header#header-desktop nav .navbar-nav{
    flex-direction: row;
    gap: 20px;
    justify-self: center;
  }
  #menu{
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
  }
  #menu .nav-item .nav-link{
    text-transform: uppercase;
    font-family: "Raleway";
    font-weight: bold;
    color: black;
    font-size: var(--size-font);
  }
  #menu .navbar-nav .dropdown-menu{
    position: absolute !important;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 20px;
    opacity: 1;
    overflow: hidden;
    left: -10px;
    border: none !important;
  }
  #menu-mobile .navbar-nav .dropdown-menu{
    position: relative !important;
    width: 100%;
    transform: none !important;
    box-shadow: none;
    border: none;
  }

  #menu .nav-item:is(.active, :hover) .nav-link,
  #menu-mobile .content-box .nav-item:is(.active, :hover) .nav-link,
  body.search-opened .searchbar .nav-link,
  .searchbar .nav-link:hover{
    color: var(--primary) !important;
  }

  body.search-opened #header-desktop .navbar > div{
    padding:0 !important;
  }

  .searchbar-container{
    display: none;
    transition: all 0.6s ease-in-out;
  }
  body.search-opened .searchbar-container{
    display: flex;
    padding-top: 10px !important; 
  }
  
  .searchbar{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 10;
    background-color: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .searchbar.mobile-searchbar{
    width: 30px;
    height: 30px;
  }    

  .searchbar .nav-link{
    color: white !important;
  }
  body.search-opened .searchbar .nav-link{
    color: var(--primary);
  }


  body.search-opened #backdrop{
    display: block;
  }
  header #searchInput {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--secondary);
    color: black;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    cursor: text !important;
  }
  header#header-desktop #searchInput::placeholder, header #searchInput {
    color: black;
  }
  header#header-desktop #searchInput:focus {
    outline: none;
  }
  header#header-desktop .searchbar-container .chiudi {
    color: var(--secondary);
    cursor: pointer;
    font-size: max(18px, min(3.13vw, 25px));
    height: max(18px, min(3.13vw, 25px));
  }


  #hamburger{
    cursor: pointer;
  }
  #hamburger>span {
    display: block;
    width: 37px;
    height: 3px;
    background-color: black;
    transition: all .4s ease-in-out;
  }
  #hamburger>span:not(:last-child) {
    margin-bottom: 9px;
  }
  #hamburger> :is(span:nth-child(1), span:nth-child(3)) {
    transition-delay: 0.4s;
  }
  body.menu-mobile-opened #hamburger>span:nth-child(1) {
    transform: translateY(7px) rotate(-45deg);
  }
  body.menu-mobile-opened #hamburger>span:nth-child(2) {
    width: 0;
  }
  body.menu-mobile-opened #hamburger>span:nth-child(3) {
    transform: translateY(-16px) rotate(45deg);
  }
  body.menu-mobile-opened #backdrop-menu{
    display: block;
  }


  #menu-mobile{
    opacity: 0;
    width: 0;
    height: 100vh;
    position: fixed;
    right: 0;
    z-index: 110;
    background-color: #F4F4F4;
    top: 0;
    transition: transform .5s ease-in-out, width .5s ease-in-out, max-height .5s ease-in-out, opacity .5s ease-in-out;
    /* transition: all .5s ease-in-out;  */
    display: flex;
    flex-direction: column;
  }
  #menu-mobile {
    transform: translateX(100vw);
  }

  body.menu-mobile-opened #menu-mobile{
    width: max(200px, min(85%, 300px));
    opacity: 1;
    transform: translateX(0);
    display: block;
  }

  #menu-mobile .container-menu{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #menu-mobile .block-menu {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
  }

  #menu-mobile .secondary-panel {
    transform: translate3d(100%, 0, 0);
    transition: all 0.2s ease-in-out;
  }

  #menu-mobile .secondary-panel.transition {
    transform: translate3d(0, 0, 0);
  }

  #menu-mobile .title-box{
    width: 100%;
    background-color: white;
    /* padding: 12px 19px 13px 42px; */
    padding: 20px 20px 10px 25px;
    color: var(--primary);
    font-family: "Raleway";
    font-weight: bold;
    font-size: max(18px, min(3.125vw, 22px));
    line-height: 20px;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #menu-mobile .title-box span,
  #menu-mobile .close-menu{
    cursor: pointer;
  }

  #menu-mobile .title-box .close-menu i {
    font-size: 32px;
  }

  #menu-mobile .content-box{
    /* margin: 4px 0 0 42px; */
    margin: 4px 0 0 0px;
    padding-left: 25px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(100% - 64px);
  }
  #menu-mobile .content-box :is(a, .social i):not(.pulsante){
    color: black !important;
    font-weight: bold;
    font-size: 16px;
  }
  #menu-mobile .content-box .nav-link{
    width: max-content;
    text-transform: uppercase;
    padding-block: 5px;
  }

  #menu-mobile .content-box .nav-link.pulsante{
    font-size: 13px;
    padding: 9px 5px !important;
  }

  #menu-mobile .content-box .social{
    padding-top: 20px;
  }

  #menu-mobile .navbar-nav .dropdown-menu .dropdown-item{
    padding:0 !important;
    word-break: break-word;
    white-space: normal;
  }
  #menu .navbar-nav .dropdown-menu .dropdown-item:not(:last-child){
    border-bottom: 1px solid rgba(112, 112, 112, 34%);
  }
  :is(#menu, #menu-mobile) .navbar-nav .dropdown-menu :is(.dropdown-item.active, .dropdown-item:active){
    background: white linear-gradient(180deg, white, white) repeat-x !important;
    color: var(--primary) !important;
  }


  #live-search-list{
    display: none;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-color: white;

    position: absolute;
    width: 100%;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    color: black;
    width: 100%;
    max-height: 475px;
    overflow-y: scroll;
  }

  /*scrollbar barra di ricerca*/
  .live-search-list::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }

  .live-search-list::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 90, 0.374);
  }

  .live-search-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
  }

  .live-search-list>:is(div,a) {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid rgb(208 208 208 / 25%)
  }

  .live-search-list>a.art {
    width: 100%;
    text-align: left;
    padding: 10px 10px;
    font-size: 18px;
  }
  .live-search-list>a.art .paragrafo{
    font-size: 12px;
    --l: 12px;
    line-height: var(--l);
    max-height: calc(4 * var(--l)); 
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-sizing: content-box;
  }

  .live-search-list>a.art h3{
    font-size: 20px;
    padding-bottom: 5px;
  }
  .live-search-list>a.art img{
    height: 100px;
    object-fit: cover;
  }

  .live-search-list>div.prod {
    flex: 0 0 100%;
    max-width: 100%;
    max-height: 140px;
    padding: 15px 10px;
  }

  .live-search-list>div.prod a {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
  }

  .live-search-list>div.prod a:hover {
    text-decoration: none;
  }

  .live-search-list>div.prod img {
    flex: 0 0 50%;
    max-width: 50%;
    object-fit: contain;
    height: 100%;
    max-height: 100px;
  }

  .live-search-list>div.prod a>span {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: left;
    padding-left: 10px;
  }

  .live-search-list>div.prod a>span .value {
    font-weight: bold;
    font-size: 150%;
  }

  .live-search-list>div.prod a>span .prezzo {
    font-size: 120%;
  }

  .live-search-list>div.prod a>span p {
    text-overflow: ellipsis;
    color: black;
  }

  .live-search-list>div.void {
    padding: 10px;
    margin: auto;
    width: 100%;
  }

  .live-search-list>div.all {
    flex: 0 0 100%;
    padding: 15px;
    background-color: var(--primary);
    color: white !important;
  }

  .live-search-list>div.all a {
    color: white !important;
  }

  .live-search-list-header-row {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    color: white;
    text-transform: uppercase;
    flex: 0 0 100%;
    font-size: 16px;
    position: sticky;
    top: 0;
  }

  .live-search-list-header-row a {
    color: white;
  }

  .live-search-list div a {
    width: 100%;
    overflow-wrap: break-word;
  }
  /*****************************************
  ************       MENU       ************
  *****************************************/



  .swiper.swiper-single{
    border-radius: max(40px, min(7vw, 100px));
  }
  .swiper .swiper-slide{
    position: relative;
  }
  .swiper .img-slider{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  .swiper .layout-banner{
    font-size: max(24px, min(4.1vw, 40px));
    line-height: max(26px, min(4.5vw, 44px));
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.30);
    overflow: hidden;
  }
  body.home .swiper .layout-banner{
    height: max(780px, min(78vw, 810px));
    padding-top: max(400px, min(40vw, 495px));
  }
  body:not(.home) .swiper .layout-banner{
    height: 500px;
    padding-top: 290px;
  }
  .swiper .layout-banner :is(h1,h2,h3,h4,h5,h6){
    color: var(--secondary);
    font-size: max(34px, min(5.9vw, 50px));
    line-height: max(40px, min(6.2vw, 55px));
    padding-top: 10px;
    font-weight: 900;
  }
  .swiper .layout-banner .pulsante{
    --colore-sfondo-pulsante: var(--secondary);
    padding: max(16px, min(2.7vw, 22px)) !important;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: max(14px, min(2.43vw, 20px));
    margin-bottom: 10px;
  }
  .swiper .layout-banner .pulsante:hover{
    background-color: transparent;
  }
  .swiper .layout-banner .pulsante:nth-of-type(2){
    --colore-sfondo-pulsante: white;
    background-color: transparent !important;
  }
  .swiper .layout-banner .pulsante:nth-of-type(2):hover{
    --colore-sfondo-pulsante: var(--secondary);
  }

  .blocco-abstract{
    padding-top: max(60px, min(10vw, 110px));
    padding-bottom: max(48px, min(8vw, 93px));
  }
  .blocco-abstract .titolo{
    color: var(--secondary);
    font-size: max(29px, min(5vw, 50px));
    line-height: max(34px, min(5.9vw, 55px));
    text-align: center;
    font-weight: 900;
  }

  .blocco-prenota{
    min-height: 413px;
    color: white;
    border-radius: 50px;
    padding-top: max(70px, min(12vw, 100px)) !important;
    padding-bottom: max(55px, min(9.5vw, 80px)) !important;
    box-shadow: 0px 3px 6px #00000029;
  }
  .blocco-prenota .titolo{
    color: white !important;
    text-align: center;
    font-size: max(29px, min(5vw, 50px));
    line-height: max(34px, min(5.9vw, 59px));
    font-weight: 900;
  }

  .blocco-prenota .paragrafo{
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 100;
    text-align: center;
  }

/*****************************************
************     FOOTER       ************
*****************************************/
      footer{
        padding-top: max(40px, min(6.9vw, 90px));
      }
      footer *{
        color: white;
      }
      footer :is(h1,
      h2,
      h3,
      h4,
      h5,
      h6){
        font-size: max(30px, min(5.2vw, 40px)) !important;
        font-weight: 400; 
        margin-bottom: 5px;
        margin-top: auto;
      }
      footer p{
        font-size: max(18px, min(3.125vw, 20px)) !important
      }
      footer a:hover{
        color: white !important;
        text-decoration: underline;
      }
      footer .social i{
        color: var(--primary) !important;
        background-color: white;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      footer .social a:hover i{
        background-color: var(--primary) !important;
        color: white !important;
      }
      #logo-footer{
        display: block;
      }
      #logo-footer img{
        display: block;
        margin: auto;
      }
      .blocco-footer{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      footer svg#svg-powered{
        height: 20px;
      }
      footer :is(#mtn-heart, #mtn-line){
        fill: white !important;
      }
      footer hr{
        border-color:white; 
        height: 2px;
        margin-top: max(20px, min(3.47vw, 64px));
      }
      .blocco-footer ul{
        padding: 0 !important; 
        margin: 0;
      }
      .blocco-footer ul li{
        padding-bottom: 18px;
      }
      .blocco-footer ul li::marker{
        content: "";
      }
      .blocco-footer > div:not(:first-child){
        margin-top: 20px;
      }


      /** */

      .testata-custom {
          background-image: url('<?php echo $banner['nomefile']; ?>');
          background-position: center;
          background-size: cover;
          height: <?php echo $banner['cath'] . 'px;' ?>;
          border-radius: 100px;
          margin-bottom: 105px;
      }

      .testata-custom {
          height: 100%;
          display: flex;
          align-items: flex-end;
      }

      .testata-custom .container .titolo {
          font-size: 50px;
          color: #F59C2D;
          text-transform: uppercase;
          font-weight: 800;
          margin-bottom: 165px;
      }

      @media (min-width: 576px) {
        #privacy .modal-dialog {
            max-width: 930px;
            margin: 1.75rem auto;
        }
      }
      #privacy .modal-content {
        border-radius: 50px;
        background-color: var(--primary)!important;
      }
      #privacy .modal-header {
        border: none!important;
      }
      #privacy .modal-title {
        margin: 0 auto;
        font-weight: 700;
        font-size: 1.45rem;
        color: #fff;
        text-transform: uppercase;
      }
      #privacy .modal-body {
        color: #fff; 
        font-weight: 200;
      }
      #privacy .modal-body a {
        color: #fff; 
        font-weight: 600;
      }
      #privacy .modal-footer  {
        border: 0;
      }

      #privacy .btn {
        display: flex;
        height: 43px;
        border-radius: 22px;
        width: 255px;
        justify-content: center;
        align-items: center;
      }

      #privacy #prv-bcage {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 22px;
      }

      #privacy #odv-opt {
        border: 2px solid #fff;
        background: transparent;
        box-shadow: none;
        color: #fff;
        text-transform: uppercase;
        font-size: .925rem;

      }
      #privacy #odv-opt:hover {
        background: #fff;
        color: var(--primary);
      }

      #privacy #accetta-tutti,
      #privacy #accetta-selezionati {
        border: 2px solid #fff;
        background: #fff;
        color: var(--primary);
        box-shadow: none;
        text-transform: uppercase;
        font-size: .925rem;
      }

      #privacy #accetta-tutti:hover,
      #privac #accetta-selezionati:hover {
        background: transparent;
        color: #fff;
      }

      #privacy .dis-check-container {
        display: flex;
        justify-content: center;
      }

      #privacy .lower-privacy {
        justify-content: center;
        display: flex; 
      }
/*****************************************
************     FOOTER       ************
*****************************************/

  @media screen and (max-width: 768px){
    #logo-footer img{
      max-width: 300px;
    }
    .blocco-footer{
      align-items: center;
      text-align: center;
    }
  }

  @media screen and (max-width: 991px){
    #menu .searchbar .nav-link{
      font-size: 16px;
      padding: 0;
    }
    header#header-desktop nav .navbar-nav{
      display: none;
    }
    body.search-opened .searchbar-container{
      padding-inline: 20px !important;
    }
  }
  @media screen and (min-width: 992px){
    #logo img{
      margin-left:0;
    }
    #menu-mobile{
      display: none;
    }
    header#header-desktop .navbar-nav:is(.left, .right){
      display: flex;
    }
    #menu .nav-item .nav-link{
      --size-font: max(14px, min(1.41vw, 16px));

    }
  }


  /* SPECIALE */
  .boxed-form {
    padding: 30px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


 .checkbox-wrapper-sp {margin-right: 8px; } 
 .checkbox-wrapper-sp .tgl {
   display: none;
 }
 .checkbox-wrapper-sp .tgl,
 .checkbox-wrapper-sp .tgl:after,
 .checkbox-wrapper-sp .tgl:before,
 .checkbox-wrapper-sp .tgl *,
 .checkbox-wrapper-sp .tgl *:after,
 .checkbox-wrapper-sp .tgl *:before,
 .checkbox-wrapper-sp .tgl + .tgl-btn {
   box-sizing: border-box;
 }
 .checkbox-wrapper-sp .tgl::-moz-selection,
 .checkbox-wrapper-sp .tgl:after::-moz-selection,
 .checkbox-wrapper-sp .tgl:before::-moz-selection,
 .checkbox-wrapper-sp .tgl *::-moz-selection,
 .checkbox-wrapper-sp .tgl *:after::-moz-selection,
 .checkbox-wrapper-sp .tgl *:before::-moz-selection,
 .checkbox-wrapper-sp .tgl + .tgl-btn::-moz-selection,
 .checkbox-wrapper-sp .tgl::selection,
 .checkbox-wrapper-sp .tgl:after::selection,
 .checkbox-wrapper-sp .tgl:before::selection,
 .checkbox-wrapper-sp .tgl *::selection,
 .checkbox-wrapper-sp .tgl *:after::selection,
 .checkbox-wrapper-sp .tgl *:before::selection,
 .checkbox-wrapper-sp .tgl + .tgl-btn::selection {
   background: none;
 }
 .checkbox-wrapper-sp .tgl + .tgl-btn {
   margin-bottom:0;
   outline: 0;
   display: block;
   width: 4em;
   height: 1.8em;
   position: relative;
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .checkbox-wrapper-sp .tgl + .tgl-btn:after,
 .checkbox-wrapper-sp .tgl + .tgl-btn:before {
   position: relative;
   display: block;
   content: "";
   width: 40%;
   height: 100%;
 }
 .checkbox-wrapper-sp .tgl + .tgl-btn:after {
   left: 0;
 }
 .checkbox-wrapper-sp .tgl + .tgl-btn:before {
   display: none;
 }
 .checkbox-wrapper-sp .tgl:checked + .tgl-btn:after {
   left: 60%;
 }

 .checkbox-wrapper-sp .tgl-ios + .tgl-btn {
   background: #fbfbfb;
   border-radius: 1.8em;
   padding: 2px;
   transition: all 0.4s ease;
   border: 1px solid #e8eae9;
 }
 .checkbox-wrapper-sp .tgl-ios + .tgl-btn:after {
   border-radius: 2em;
   background: #fbfbfb;
   transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
 }
 .checkbox-wrapper-sp .tgl-ios + .tgl-btn:hover:after {
   will-change: padding;
 }
 .checkbox-wrapper-sp .tgl-ios + .tgl-btn:active {
   box-shadow: inset 0 0 0 2em #e8eae9;
 }
 .checkbox-wrapper-sp .tgl-ios + .tgl-btn:active:after {
   padding-right: 0.8em;
 }
 .checkbox-wrapper-sp .tgl-ios:checked + .tgl-btn {
   background: var(--main-color);
 }
 .checkbox-wrapper-sp .tgl-ios:checked + .tgl-btn:active {
   box-shadow: none;
 }
 .checkbox-wrapper-sp .tgl-ios:checked + .tgl-btn:active:after {
   margin-left: -0.8em;
 }

 /** PRIVACY **/