/* --- ≥ 568px .pure-u-sm-* --- */

@media screen and (min-width: 35.5em) {

  .link-cart .text{
    display: inline-block;
  }

  .link-cart svg{
    display: none;
  }

  .details-cart .text{
    display: inline-block;
  }

  .details-cart svg{
    display: none;
  }

  .cart tbody th{
    display: flex;
    gap: 1rem;
    align-items: center;
    white-space: nowrap;
    overflow: visible;
    max-width: inherit;
  }

  .checkout-cart td {
    padding: 0.2rem;
  }

}



/* --- ≥ 768px  .pure-u-md-* --- */
@media screen and (min-width: 48em){

  /*.pure-g {
    padding: 2rem;
  }*/
  .box-prenota {
/*    padding: 0rem 5rem 1rem 0rem;*/
  }
  .box-menu h5{
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  .menu .menu-button a{
    margin-top: 0;
  }
  
  
  .box-menu ul.right-menu {
    margin-bottom: 3rem;
  }

  .box-menu ul.right-menu li a{
    font-size: 2.8rem;
    margin-bottom: 2.4rem;
    padding: 0.8rem 1.6rem;
  }
  .footer-bar{
    padding: 0.4rem 4rem;
  }
  .align-right {
    text-align: right;
  }
  footer .pure-g{
    padding: 0;
  }
  footer .fifty{
    width: 50%;
    margin-bottom: 0;
  }
  .footer-bar p{
    font-size: 0.9rem;
  }


  
  .swiper-button-prev,
  .swiper-button-next {
    display: flex;
  }



  .accordion-row {
    display: flex;
    align-items: flex-start;
    margin: 2rem 0;
    float: none;
  }
  .accordion-content .accordion-image {
    flex: 1 1 60%; 
    max-width: 50%;
    margin-left: 4rem; /* Spazio tra l'immagine e il testo */
    mix-blend-mode: multiply;
  }

  .accordion-content .accordion-text {
    flex: 1 1 67%; /* Occupare i restanti 2/3 */
  }




  #prenota-button {
    margin-top: 59px;
  }


  .box-prenota h1{
    font-size: 3.2rem;
  }
  .box-prenota h1 span{
    font-size: 2.3rem;
  }

  .start .mini-video{
    display: block;
    width: 20%;
    position: absolute;
    right: 2.5rem;
    bottom: 2.5rem;
    z-index: 91;
  }

  .link-cart {
    right: 3.75rem;
    top: 1rem;
  }
  .checkout-cart {
    padding: 2rem;
    border-radius: 2.2rem;
  }
  .checkout-cart tbody th {
    gap: 1rem;
    min-width: auto;
  }
  .checkout-cart tbody th img {
    display: block;
  }


  .checkout-cart th {
    padding: 0.5rem 1rem;
  }
  .checkout-cart td {
    padding: 0.5rem 1rem;
    text-align: right;
  }

  .checkout-form .field[data-width="1/2"] {
    flex: 0 0 calc(50% - 0.5rem); /* Togliamo mezzo gap */
  }

  .checkout .field label {
    font-size: 1rem;
  }
  .checkout-cart th:not(:first-child),
  .checkout-cart td:not(:first-child) {
    width: 80px;
  }
  .checkout .warning{
    padding: 2rem;
    border-radius: 2.2rem;
  }
  .configurator button{
    letter-spacing: 0rem;
    padding: 0.3rem 1.2rem;
  }

  .configurator .button-back{
    letter-spacing: 0;
  }
  .configurator .button-back svg{
    top: 1px;
  }


  .configurator .button-configurator svg{
    top: 1px;
  }
  .cart{
   
    border-radius: 2.2rem;
    padding: 2rem;
    top: 3.5rem;
    max-width: auto;
  }
  .cart img{
    display: block;
  }

  .cart th{
    padding: 0.5rem 1rem;
  }
  .cart td{
    padding: 0.5rem 1rem;
  }

  .subpages {
    aspect-ratio: 1 / 1;
  }

   
}



/* --- ≥ 1024px .pure-u-lg-* --- */
@media screen and (min-width: 64em){

  #hamburger-button {
    margin: 3.75rem 0 0 6rem;
   
  }
  .header {
    width: calc(100% - 7rem);
    padding: 1.2rem 1rem;
    margin: 2.5rem;
  }

  .header .logo svg{
    width: 270px;
  }
  .full-h .pure-g div{
    margin-top: 50vh;
  }
  .footer-bar{
    padding: 0.4rem 9rem;
  }
  .footer-bar p{
    font-size: 1rem;
  }
  .map-home {
    height: 360px;
  }

  .box-menu {
    margin-top: 0;
    margin-bottom: 4rem !important;
    height: calc(100% - 8rem);
  }

  .box-menu ul.languages{
    margin-left: 1.5rem;
  }

  a.b-standard{
    position: relative;
    top: -8rem;
    left: -3rem;
  }
  a.b-executive{
    position: relative;
    top: 2rem;
    right: -9rem;
  }
  a.b-suite{
    position: relative;
    top: -3.5rem;
/*    right: -8rem;*/
  }
  a.b-center{
    position: relative;
    top: -14rem;
    right: -10rem;
    float: right;
  }
  #main-menu .serif p{
    padding-right: 35px;
  }
  /*  .opened #hamburger-button  span {
    transform: rotate(45deg) translate(-27px, -40px);
  }
  .opened #hamburger-button  span:nth-last-child(2) {
    transform: rotate(-45deg) translate(-10px, 25px);
  }*/
  .form-contatto form input[type=submit]{
    margin: 0 8rem 6rem 0;
    position: absolute;
  }
  .shift1{
    position: relative;
    left: -5rem;
    top: 3rem;
  }
  .shift2{
    position: relative;
    top: -2rem;
  }
  .shift3{
    top: -8rem;
    position: relative;
  }
  .shift3 figure{
    top: 10rem;
    position: relative;
  }
  .shift4{
    top: -14rem;
    position: relative;
  }
  .shift4 figure{
    top: 10rem;
    position: relative;
  }

  .scrolling .header .logo svg{
    width: 270px;
  }
  .header .logo svg .payoff{
    opacity: 1;
    transition: 0.5s cubic-bezier(.86,0,.07,1);
  }
  .scrolling .header .logo svg .payoff{
    opacity: 0;
    transition: 0.5s cubic-bezier(.86,0,.07,1);
  }
  .executive{
    margin-top: 4rem;
  }

  .display-mobile{
    display: none;
  }
  .display-desktop{
    display: block;
  }

  .tabella div{
    border-top: 2px solid var(--color-text);
    border-right: 0 solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    border-left: 2px solid var(--color-text);
  }
  .tabella div:last-child{
    border-right: 1.5px  solid var(--color-text);
  }
  .reverse{
    flex-flow: inherit;
  }

  .panel-accordion {
    height: 70vh;
  }
  .panel-accordion.active {
    flex: 6;
  }
  .accordion-box{
    height: 70vh;
  }
  .container-accordion h3 {
    height: 70vh;
    width: 70vh;
    padding: 1rem 1rem 0rem 1rem;
    font-size: 1.5rem;
  }
  .container-accordion h2 {
    font-size: 3rem;
  }
  button.accordion {
    font-size: 2.6rem;
  }

  .accordion-content .accordion-image img{
    max-width: 650px;
    border-radius: 0.8rem;

  }
  .accordion-content.only-text {
/*    padding: 0 20%;*/
  }

  .start h1{
    font-size: 3.6rem;
  }
  .start  h1 span{
    font-size: 3.3rem;
    letter-spacing: 0.8rem;
  }

  a.button-md{
    padding: 1.2rem 2.5rem;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
  }
  .product-box {
    margin: 2rem;
  }

  .box-menu .center-vertical{
    flex-direction: row;
    flex-flow: nowrap;
  }

  .box-menu .left-menu ul{
    padding-right: 2rem;
    margin-bottom: 4rem;
  }

  .footer .full{
    width: calc(100% - 5rem);
    margin: 2.5rem;
  }

  .footer .pure-g{
    min-height: 320px;
  }

  .opened .menu-logo{
    width: 270px;
    margin: 3.7rem 0 0 0;
  }
  .swiper2{
    height: 55vh;
  }
  .swiper3{
    height: 55vh;
  }
  .intro-small2-text{
    padding: 2rem;
  }
  .section-element ul li{
    font-size: 1.6rem;
    width: fit-content;
  }
  .intro-full-text{
    top: 7.3rem;
  }

  .intro-full-text h1{
    font-size: 10rem;
  }

  .single-video{
    margin-top: 18rem;
    height: calc(100vh - 18rem);
  }

  .section-element .sidebar{
    display: block;
  }

  .section-element .main-content{
    width: 75%;
  }

  button.accordion {
    font-size: 1.6rem;
  }

  .accordion-content .accordion-text p{
    font-size: 1.4rem;
  }
  .square-box{
    padding: 4rem;
    min-height: 360px;
  }
  .intro-over-text{
    margin: 2.5rem;
  }
  .intro-over-text-configurator{
    margin: 12rem 2.5rem 2.5rem 2.5rem;
  }
  .swiper3-nav {
    display: flex;
  }

  .button2{
    margin: 0.8rem 0 0.8rem 3rem;
  }

  .newsletter{
    bottom: 0;
    left: 0;
    width: auto;
    background-color: transparent;
  }



  .newsletter-submit{
    font-family: var(--font-family-sans);
    letter-spacing: 0.01rem;
    font-weight: 700;
    font-size: 1.4rem;
    padding: 0.6rem 1.1rem;
    border: 0;
    color: var(--color-white);
    background-color: var(--color-black);
    cursor: pointer;
    transition: 0.35s;
    box-sizing: border-box;
    border-radius: 0.5rem;
    position: absolute;
    right: 0.45rem;
    bottom: 0.37rem;

  }
  #newsletter_email{
    font-family: var(--font-family-sans);
    letter-spacing: 0.01rem;
    font-weight: 700;
    font-size: 1.4rem;
    padding: 1rem 9rem 1rem 1.5rem;
    border: 0;
    color: var(--color-black);
    background-color: var(--color-white);
    cursor: pointer;
    transition: 0.35s;
    box-sizing: border-box;
    border-radius: 0.8rem;
    width: 420px;
    background-color: var(--color-white);
  }
  .box-lang{
    left: 450px;
  }

  .box-lang .languages{
    margin-left: 1.5rem;
  }


  .cart{
    top: 5rem;
    right: -3.75rem;
  }
  .details-cart {
    right: 3.75rem;
    top: 2.5rem;
  }

  .link-cart {
    top: 2rem;
  }
    
}



/* --- ≥ 1280px .pure-u-xl-* --- */
@media screen and (min-width: 80em){


  .xl4{
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
  .xl3{
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.3;
    margin-bottom: 0.8rem;
  }
  .xxl{
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.3;
    margin-bottom: 0.8rem;
  }
  .xl{
    font-weight: 400;
    font-size: 2.2rem;
    margin-bottom: 0.6rem;
  }
  .lg{
    font-weight: 400;
    font-size: 1.9rem;
    margin-bottom: 0.6rem;
  }
  .md{
    font-weight: 400;
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
  }
  .sm{
    font-weight: 400;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }


  .header ul.extended-menu{
    display: block;
  }



  #prenota-button {
    margin: 30vh 0 0 0;
    /* right: 44px; */
    right: 8px;
    width: 280px;
    transform: rotate(-90deg);
  }
  .scrolling #prenota-button {
    margin-top: 30vh;
  }
  #prenota-button a{
    background-color: transparent;
    font-size: 1rem;
    padding: 22px 20px 22px 28px;
    margin-top: 0;
  }
  #prenota-button a:hover{
    border: 2px solid var(--color-orange);
  }
  .chiaro #prenota-button a{
    border: 2px solid var(--color-white);
    color: var(--color-black);
    border-radius: 4px;
  }
  .scrolling .home.chiaro #prenota-button a{
      border: 2px solid var(--color-text);
      border-radius: 4px;
   } 

  .dark .chiaro #prenota-button a{
    border: 2px solid var(--color-text);
    color: var(--color-text);
    border-radius: 4px;
  }


  .scrolling .chiaro #prenota-button a{
    color: var(--color-text);
    border-radius: 4px;
  }


  .chiaro.opened #prenota-button a{
    border: 2px solid var(--color-orange);
  }

  .scrolling .home.chiaro.opened #prenota-button a{
    border: 2px solid var(--color-orange);
  }
  .scuro #prenota-button a{
    border: 2px solid var(--color-text);
    color: var(--color-text);
  }
  .chiaro #prenota-button a:hover {
    color: var(--color-text);
  }
  .scuro #prenota-button a:hover {
    border: 2px solid var(--color-green);
  }
  .closed #prenota-button a:after{
    content: "contattami";
    font-family: inherit;
    font-weight: 500;
  }
  .opened #prenota-button {
    right: 44px;
  }
  .opened #prenota-button a{
    color: var(--color-text);
  }
  .opened #prenota-button a:after{
    content: "chiudi";
    font-family: inherit;
    font-weight: 500;
  }

  .chiaro #prenota-button{
    opacity: 1;
    transition: 0.6s cubic-bezier(.86,0,.07,1);
  }
  .end .chiaro #prenota-button{
    opacity: 0;
    pointer-events: none;
    transition: 0.6s cubic-bezier(.86,0,.07,1);
  }
  #prenota-button a{
    text-transform: uppercase;
    letter-spacing: 0.5rem;
  }

  .opened #prenota-button a:before{
    display: none;
  }


  .closed #prenota-button a:after{
    color: var(--color-white);
  }

  .scrolling .closed.home #prenota-button a:after{
    color: var(--color-text);
  }

  .intro-small-text{
    padding: 4rem 2rem;
  }

 .random-img{
    display: block;
  }
  .details-cart {
    right: 3.75rem;
    top: 2.1rem;
  }

  .link-cart a{
    margin-top: 0;
  }


}


/* --- ≤ 1280px .pure-u-xl-* --- */
@media screen and (max-width: 80em){

  
  .opened #prenota-button {
    right: calc(50% - 106px);
    width: 212px;
  }

}


/* --- ≥ 1600px --- */
@media screen and (min-width: 100em){

  .single-image-footer{
    height: 50vh;
  }

}