/* --- ≥ 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.4rem;
  }
  h2 {
    font-size: 2.1rem;
  }
  h3 {
    font-size: 1.7rem;
  }
  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: 2rem;
  }
  .header .logo svg{
    width: 210px;
  }

  .box-menu ul li a{
    font-size: 2.8em;
    line-height: 1.1;
  }
  .footer-bar{
    padding: 0.4rem 4rem;
  }
  .align-right {
    text-align: right;
  }
  footer .pure-g{
    padding: 2rem;
  }
  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-title h1{
    font-size: 4.2rem;
  }
  .section-title h1 span{
    font-size: 3.2rem;
    letter-spacing: 0.8rem;
  }

   
}



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

  .swiper {
    height: 80vh;
  }
  .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;
  }
  .box-l{
    padding: 2rem 5rem 2rem 0;
  }
  .box-r{
    padding: 2rem 0 2rem 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;
  }

  #prenota-button {
    margin: 32vh 0 0 0;
    right: 44px;
    transform: rotate(-90deg);
  }
  #prenota-button a{
    background-color: transparent;
    font-size: 1rem;
    width: 150px;
    padding: 22px 20px 22px 28px;
    margin-top: 0;
  }
  #prenota-button a:hover{
    border: 1.5px solid var(--color-creme);
  }
  .chiaro #prenota-button a{
    border: 1.5px solid var(--color-creme);
    color: var(--color-creme);
  }

  .scuro #prenota-button a{
    border: 1.5px solid var(--color-brown);
    color: var(--color-brown);
  }
  .chiaro #prenota-button a:hover {
    color: var(--color-brown);
  }
  .scuro #prenota-button a:hover {
    border: 1.5px solid var(--color-creme);
  }
  .closed #prenota-button a:after{
    content: "prenota";
    font-family: inherit;
    font-weight: 500;
  }
  .opened #prenota-button {
    right: 44px;
  }
  .opened #prenota-button a{
    color: var(--color-brown);
  }
  .opened #prenota-button a:after{
    content: "chiudi";
    font-family: inherit;
    font-weight: 500;
  }
  #hamburger-button {
    margin: 45px 45px 0 0;
  }
  #hamburger-button span{
    width: 72px;
    margin-bottom: 25px;
  }
  .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: auto;
  }
  a.button-brown{
    padding: 22px 40px 22px 48px;
    width: auto;
  }
  a.button-oil{
    padding: 22px 40px 22px 48px;
    width: auto;
  }
  a.button-grey{
    padding: 22px 40px 22px 48px;
    width: auto;
  }
  a.button-gold{
    padding: 22px 40px 22px 48px;
    width: auto;
  }
  .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;
  }
  .header .logo svg{
    width: 180px;
  }
  .scrolling .header .logo svg{
    width: 150px;
  }
  .executive{
    margin-top: 4rem;
  }


  .box1{
    padding: 1rem;
  }
  .box2{
    padding: 2rem;
  }
  .box3{
    padding: 3rem;
  }
  .box4{
    padding: 4rem;
  }
  .box-l{
    padding: 0 2rem;
  }
  .box-r{
    padding: 0 2rem;
  }
  .mb-1{
    margin-bottom: 1rem;
  }
  .mb-2{
    margin-bottom: 2rem;
  }
  .mb-3{
    margin-bottom: 3rem;
  }
  .mb-4{
    margin-bottom: 4rem;
  }
  .mb-5{
    margin-bottom: 5rem;
  }
  .mb-6{
    margin-bottom: 6rem;
  }
  .mb-7{
    margin-bottom: 7rem;
  }
  .mb-8{
    margin-bottom: 8rem;
  }
  .mt-1{
    margin-top: 1rem;
  }
  .mt-2{
    margin-top: 2rem;
  }
  .mt-3{
    margin-top: 3rem;
  }
  .mt-4{
    margin-top: 4rem;
  }
  .mt-5{
    margin-top: 5rem;
  }
  .mt-6{
    margin-top: 6rem;
  }
  .mt-7{
    margin-top: 7rem;
  }
  .mt-8{
    margin-top: 8rem;
  }
  .mt-8-od{
    margin-top: 8rem;
  }
  .mt-9{
    margin-top: 9rem;
  }
  .mt-10{
    margin-top: 10rem;
  }
  .mt-10-od{
    margin-top: 10rem;
  }
  .pb-1{
    padding-bottom: 1rem;
  }
  .pb-2{
    padding-bottom: 2rem;
  }
  .pb-3{
    padding-bottom: 3rem;
  }
  .pb-4{
    padding-bottom: 4rem;
  }
  .pb-5{
    padding-bottom: 5rem;
  }
  .pb-6{
    padding-bottom: 6rem;
  }
  .pb-7{
    padding-bottom: 7rem;
  }
  .pb-8{
    padding-bottom: 8rem;
  }
  .pt-1{
    padding-top: 1rem;
  }
  .pt-2{
    padding-top: 2rem;
  }
  .pt-3{
    padding-top: 3rem;
  }
  .pt-4{
    padding-top: 4rem;
  }
  .pt-5{
    padding-top: 5rem;
  }
  .pt-6{
    padding-top: 6rem;
  }
  .pt-7{
    padding-top: 7rem;
  }
  .pt-8{
    padding-top: 8rem;
  }
  .pt-8-od{
    padding-top: 8rem;
  }
  .pt-9{
    padding-top: 9rem;
  }
  .pt-10{
    padding-top: 10rem;
  }
  .pt-10-od{
    padding-top: 10rem;
  }
  .display-mobile{
    display: none;
  }
  .display-desktop{
    display: block;
  }

  .tabella div{
    border-top: 1.5px solid var(--color-brown);
    border-right: 0 solid var(--color-brown);
    border-bottom: 1.5px solid var(--color-brown);
    border-left: 1.5px solid var(--color-brown);
  }
  .tabella div:last-child{
    border-right: 1.5px  solid var(--color-brown);
  }
}



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


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


}