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

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



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

  h1 {
    font-size: 2.3rem;
  }
  h2 {
    font-size: 1.9rem;
  }
  h3 {
    font-size: 1.6rem;
  }
  h4 {
    font-size: 1.4rem;
  }
  .pure-g {
    padding: 2rem;
  }
  .box-prenota {
/*    padding: 0rem 5rem 1rem 0rem;*/
  }
  .box-menu h5{
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
  .header {
    /* background-color: rgba(255,255,255, 0); */
  }
  .menu .menu-button a{
    margin-top: 0;
  }
  .header .logo {
    padding: 0 2rem;
  }
  .header .logo svg{
    width: 120px;
  }

  .box-menu ul li a{
    font-size: 2.2em;
    line-height: 1.1;
  }
  .footer-bar{
    padding: 0.4rem 4rem;
  }
  .align-right {
    text-align: right;
  }
  
  footer .fifty{
    width: 50%;
    margin-bottom: 0;
  }
  .footer-bar p{
    line-height: 2.2rem;
    font-size: 0.9rem;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: flex;
  }
  .section-element h1{
    font-size: 4.2rem;
  }
  .section-element h1 span{
    font-size: 3rem;
    letter-spacing: 0.05rem;
  }
  .section-element h2{
    font-size: 3.2rem;
  }
  .section-element h2 span{
    font-size: 2.2rem;
    letter-spacing: 0.05rem;
  }

  .accordion-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.2rem;
    float: none;
  }
  .accordion-content .accordion-image {
    flex: 1 1 33%; /* Occupare 1/3 dello spazio */
    max-width: 33%;
    margin-right: 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 */
  }


  #hamburger-button {
    margin: 60px 45px 0 0;
  }

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


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


  .box-menu .mobile-languages li:after{
    padding: 0.4rem 1rem;
  }


   
}



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

  .swiper {
    height: 100vh;
  }
  .swiper-gallery{
    height: auto;
  }
  .swiper-home{
    margin-top: 120px;
    height: calc(100vh - 120px);
  }
  .full-h .pure-g div{
    margin-top: 50vh;
  }
  .footer-bar{
    padding: 0.4rem 9rem;
  }
  .footer-bar p{
    line-height: 3rem;
    font-size: 1rem;
  }
  .map-home {
    height: 360px;
  }
  .box-menu .lang{
    top: 35px;
    left: 40px;
  }
  .box-menu .lang ul li{
    float: none;
  }
  .box-menu .lang a{
    padding: 0;
  }

  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;
  }
  a.button-md{
    padding: 22px 40px 22px 48px;
    width: fit-content;
    
  }
  a.button-brown{
    padding: 22px 40px 22px 48px;
    width: fit-content;
   
  }
  a.button-1{
    padding: 22px 40px 22px 48px;
    width: fit-content;
  }
  a.button-grey{
    padding: 22px 40px 22px 48px;
    width: fit-content;
  }
  a.button-gold{
    padding: 22px 40px 22px 48px;
    width: fit-content;
  }
  .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: 120px;
  }
  .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 {
    padding: 2.2rem;
    font-size: 2rem;
  }
  .accordion-content {
    padding: 0 2.2rem;
  }
  .accordion-content .accordion-image img{
    max-width: 350px;
  }
  .accordion-content.only-text {
/*    padding: 0 20%;*/
  }

  .start h1{
    font-size: 3.8rem;
  }
  .start  h1 span{
    font-size: 2.4rem;
  }

  .footer .logo{
    opacity: 1;
    top: 18rem;
  }

  .start .hero2{
    margin-top: 70vh;
  }
  .start .hero2 div{
    background-color: transparent !important;
  }


}



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



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

  .container-hamburger {
    display: none;
  }


  .header nav .languages{
    display: inline;
    text-transform: uppercase;
    margin-right: 0.8rem;
    min-width: 80px;
  }

  .header nav .languages li{
    padding: 1rem 0;
    margin-left: 0.4rem;

  }
  .header nav .languages li:after{
    padding: 0.55rem;
    content: "|";
    /*color: var(--color-white);*/
  }

  .dark .header nav .languages li:after{
   
    color: var(--color-text);
  }

  .header nav .languages li:last-child::after {
    display: none;
  }

  .header nav .languages .active a{
    font-weight: 600;
  }


  .boxed-2 {
    margin: 0 8rem;
  }

  #prenota-button {
    margin: 30vh 0 0 0;
    right: 44px;
    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-soft-peach);
  }
  .chiaro #prenota-button a{
    border: 2px solid var(--color-white);
    color: var(--color-white);
    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{
    /*    border: 2px solid var(--color-text);*/
    color: var(--color-text);
    border-radius: 4px;
  }


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

  .scrolling .home.chiaro.opened #prenota-button a{
    border: 2px solid var(--color-soft-peach);
  }
  .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-soft-peach);
  }
  .closed #prenota-button a::after {
    content: attr(data-text-closed);
    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: attr(data-text-opened);
    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);
  }

}



/* --- ≥ 1300px for Old Desktop --- */
@media screen and (min-width: 81em){



  .header ul li{
    float: left;
    padding: 0rem 1rem;
    text-align: left;
  }
  .header ul li a{
    font-size: 1.2rem;
  }
  .start h1{
    font-size: 5rem;
  }
  .start  h1 span{
    font-size: 3rem;
  }

  .box-menu ul li a{
    font-size: 2.8em;
    line-height: 1.1;
  }
  h1 {
    font-size: 2.6rem;
  }
  h2 {
    font-size: 2.2rem;
  }
  h3 {
    font-size: 1.7rem;
  }
}


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

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

}