/*
Theme Name: Nextframe
Theme URI: https://dominio
Author: Mario Rossi
Author URI: https://dominio
Description: Stile base del tema
Requires PHP: 7.0
*/

/* ! Reset */
/*------------------------------------------------------------------*/
:root{
  --header-bg: #ececec;
  --header-color:#be5ed1;
  --button-bg: white;
  --button-bg-hover:#fcb900;
  --button-color: #be5ed1;
  --link: rgb(0, 64, 255);
}

html {
	scroll-behavior: smooth;
}
body, html{ background-color: #690b23; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #ddd}

/*Colore dei link*/
a{text-decoration:none; color: var(--link);}
p{line-height: 1.3;}

/* Utilizzato per spaziare le cose */
.spacer{height: 70px;}


/* ! Title System */
/*------------------------------------------------------------------*/
.text-0{font-size: 5rem !important; line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
  h1, .text-1{font-size: 2.8rem;}
  h2, .text-2{font-size: 2rem;}
  h3, .text-3{font-size: 1.3rem;}
  h4, p, .text-4{font-size: 1rem;}
}

/* ! Button system con wp-block... andiamo ad impostare lo stile di default dei bottoni in wordpress */
/*------------------------------------------------------------------*/

/* ! Single */
/*------------------------------------------------------------------*/


/* ! Header*/
/*------------------------------------------------------------------*/

.header-container{ z-index: 9999; width: 100%; max-width: 1450px; margin: 10px auto; }
.logged-in .header-container{top:30px;} 
/*.header-content{width: 100%; margin: 0 auto; display: flex; justify-content: space-between; padding: 10px 0; position: relative;}*/
.header{ display: flex; justify-content: space-between;width: 100%;max-width: 1450px;margin: 0 auto; height: 100px;}
.header li a{font-weight: bold; display: block; font-size: 14px; color: var(--button-color); padding: 10px 20px; text-transform: uppercase;}
.header li a:hover{
  color: var(--button-bg); background-color: var(--button-color); 
  border-radius: 5px !important; transition: 0.3s;
}

.header__menu{margin-bottom: 0;}
.header__menu li{display: inline-block; padding: 0 4rem 0 0px;}
.header a.header__logo { font-weight: bold; padding: 0; }
.header .header__logo img{height: 200px; z-index: 9999; position: relative;}
.header__hamburger{display: none;}


@media (max-width: 768px) {
  .header__hamburger{
    width: 50px; height: 27px; display: block; position: relative; z-index: 100; background: transparent; border: none;
    margin-right: 20px; box-sizing: content-box; text-indent: 100%; color: transparent; white-space: nowrap; 
    cursor: pointer; overflow: hidden; outline: 0;
  }
    .hamburger-menu-button-open {
      top: 50%;
      margin-top: -1px;
      left: 50%;
      margin-left: -12px;
    }
    .hamburger-menu-button-open, 
    .hamburger-menu-button-open::before, 
    .hamburger-menu-button-open::after {
      position: absolute;
      width: 24px;
      height: 2px;
      background: #fff;
      border-radius: 4px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .hamburger-menu-button-open::before, 
    .hamburger-menu-button-open::after {
      left: 0;
      content: "";
    }
    .hamburger-menu-button-open::before {
      top: 6px;
    }
    .hamburger-menu-button-open::after {
      bottom: 6px;
    }

    .menu-open .hamburger-menu-button-close {
      background: transparent;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .menu-open .hamburger-menu-button-close::before {
      -webkit-transform: translateY(-6px) rotate(45deg);
              transform: translateY(-6px) rotate(45deg);
    }
    .menu-open .hamburger-menu-button-close::after {
      -webkit-transform: translateY(6px) rotate(-45deg);
              transform: translateY(6px) rotate(-45deg);
    }

  .header__logo img{padding: 10px;}
  /*.header__hamburger span{width: 33px;height: 2px;background: #C4A9EF;margin-top: 8px;display: block;transition: all 0.15s cubic-bezier(.215, .61, .355, 1);}*/
  .header{align-items: center !important;}
  .header li a{width: 50%;}
  .header li a:hover{border-radius: 0px; }
  .header__menu{position:absolute;top:46px; left:0; width: 100%;background: #fff;height: 0;overflow: hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1); margin-top: 54px;}
  .header__menu li{display: block; border-bottom: 1px solid var(--button-color); padding: 20px;}
  .prenota-button a{text-align: center;}

  .menu-open .header__menu{height: 100vh; background-color: var(--header-color);}
  .menu-open{overflow:hidden; }

  /* ! In caso di doppio menu 
  .second_menu{
    z-index: 1;
    margin-top: 165px;
  }
*/
  }


/* ! Footer */
/*------------------------------------------------------------------*/
.footer{max-width: 100%; width: 100%; background-color: var(--header-color); color: var(--button-color); }
.footer p{text-align: center; margin-top: 20px;}


.grid--footer{max-width: 1450px; margin: 0 auto;}
.footer_cookie{text-align: end; margin: 25px 50px;}


/* ! Grid System */
/*------------------------------------------------------------------*/
.grid{display: flex; flex-wrap: wrap; max-width: 1450px; margin: 0 auto;}
.grid--small{max-width: 900px}
.grid--medium{max-width: 1200px;}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%}
.grid--footer{display: flex; justify-content: center; flex-wrap: wrap; max-width: 1450px; width: 100%; margin: 0 auto;}

.col-10{width: 10%;}
.col-15{width: 15%;}
.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-35 {width:35%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}

[class*='col-']{padding: 10px;}

.grid--full [class*='col-'],
.grid .grid [class*='col-'] {padding: 0;}


@media (max-width: 768px) {
  [class*='col-']{width: 100%}
  .sma-33{width: 33.33%}
  .sma-50{width: 50%}
  .sma-25{width: 25%}
}

/* ! ------------------------------------------------------------------- */
/* ! Blocks */
/* ----------------------------------------------------------------------------------- */

.cover{
  background: #000;padding: 20px;min-height: 100vh;
  display: flex; flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
}
.cover__bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(bridge.jpg) center center;background-size:cover;z-index:0;border: 1px solid #000}
.cover__bg:after{ content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7) 100%);;background-size:cover;}

.cover__content{max-width: 1200px; margin: 0 auto; position:relative; z-index: 1;width: 100%;}

.cover__content h1{max-width: 1000px}

.available{width: 300px; height: 300px; position:absolute; top:25%; right:10%;}

@media (max-width: 768px) {
  .available{width: 200px; height: 200px;  top:8%; right:2%;}
}

/* ! Animation */
/* --------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(5rem);}


/* ! Helpers */
/*------------------------------------------------------------------*/
.br{border: 1px solid red;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}

.relative{position: relative;}
.absolute{position: absolute;}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem !important;}
.mt-2{margin-top: 2rem !important;}
.mt-3{margin-top: 3rem !important;}
.mt-4{margin-top: 4rem !important;}
.mt-5{margin-top: 5rem !important;}
.mt-6{margin-top: 6rem !important;}

.mtneg10{margin-top: -10px;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem !important;}
.mb-2{margin-bottom: 2rem !important;}
.mb-3{margin-bottom: 3rem !important;}
.mb-4{margin-bottom: 4rem !important;}

.mbneg15{margin-bottom: -15px;}

.ml-0{margin-left: 0;}
.ml-1{margin-left: 1rem !important;}
.ml-2{margin-left: 2rem !important;}
.ml-3{margin-left: 3rem !important;}
.ml-4{margin-left: 4rem !important;}
.ml-5{margin-left: 5rem !important;}
.ml-6{margin-left: 6rem !important;}

.mr-0{margin-right: 0;}
.mr-1{margin-right: 1rem !important;}
.mr-2{margin-right: 2rem !important;}
.mr-3{margin-right: 3rem !important;}
.mr-4{margin-right: 4rem !important;}
.mr-5{margin-right: 5rem !important;}
.mr-6{margin-right: 6rem !important;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.p-0{padding: 0 !important;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}

.pr-0{padding-right: 0;}
.pr-1{padding-right: 1rem;}
.pr-2{padding-right: 2rem;}
.pr-3{padding-right: 3rem;}
.pr-4{padding-right: 4rem;}

.pl-0{padding-left: 0;}
.pl-1{padding-left: 1rem;}
.pl-2{padding-left: 2rem;}
.pl-3{padding-left: 3rem;}
.pl-4{padding-left: 4rem;}

.gap-0{gap: 0 !important;}

.mlr-10{margin-left: -10px; margin-right: -10px;}

.w-10{width: 10%;}
.w-20{width: 20%;}
.w-30{width: 30%;}
.w-40{width: 40%;}
.w-50{width: 50%;}
.w-60{width: 60%;}
.w-70{width: 70%;}

.fw-100{font-weight: 100;}
.fw-200{font-weight: 200;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}
.fw-900{font-weight: 900;}
.fw-bold{font-weight: bold;}

.rotate-20{transform: rotate(20deg);}

.icon-small{width: 40px;padding: 8px;}
.icon-white{filter: invert(1);}

.bg-dark{background: #000;}
.text-white{color:#fff !important;}
.text-dark{color:#000}

.v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;}
 
.alg-center{align-items: center !important;}
.alg-start{align-items: start;}
.alg-end{align-items: end;}

.just-center{justify-content: center !important;}
.just-start{justify-content: start !important;}
.just-end{justify-content: end !important;}

.flex{display: flex;} 

.margin-auto{margin: 0 auto;}

.font-normal{font-weight: 400;}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
}

@media (min-width: 768px) {
  .desk-none{display: none;}
/* -------------------------------------------------------------------------------- */
/* ! Smartphone Helpers */
/* -------------------------------------------------------------------------------- */}
@media (max-width: 768px) {

  .s-m0{margin: 0 !important;}

  .s-mt-0{margin-top: 0 !important;}
  .s-mt-1{margin-top: 1rem !important;}
  .s-mt-2{margin-top: 2rem !important;}
  .s-mt-3{margin-top: 3rem !important;}
  .s-mt-4{margin-top: 4rem !important;}
  .s-mt-5{margin-top: 5rem !important;}
  .s-mt-6{margin-top: 6rem !important;}

  .s-mb-0{margin-bottom: 0 !important;}
  .s-mb-1{margin-bottom: 1rem !important;}
  .s-mb-2{margin-bottom: 2rem !important;}
  .s-mb-3{margin-bottom: 3rem !important;}
  .s-mb-4{margin-bottom: 4rem !important;}

  .s-ml-0{margin-left: 0 !important;}
  .s-ml-1{margin-left: 1rem !important;}
  .s-ml-2{margin-left: 2rem !important;}
  .s-ml-3{margin-left: 3rem !important;}
  .s-ml-4{margin-left: 4rem !important;}
  .s-ml-5{margin-left: 5rem !important;}
  .s-ml-6{margin-left: 6rem !important;}

  .s-mr-0{margin-right: 0 !important;}
  .s-mr-1{margin-right: 1rem !important;}
  .s-mr-2{margin-right: 2rem !important;}
  .s-mr-3{margin-right: 3rem !important;}
  .s-mr-4{margin-right: 4rem !important;}
  .s-mr-5{margin-right: 5rem !important;}
  .s-mr-6{margin-right: 6rem !important;}

  .s-p-0{padding: 0;}
  .s-p-1{padding: 1rem;}
  .s-p-2{padding: 2rem;}
  .s-p-3{padding: 3rem;}
  .s-p-4{padding: 4rem;}

  .s-pt-0{padding-top: 0;}
  .s-pt-1{padding-top: 1rem;}
  .s-pt-2{padding-top: 2rem;}
  .s-pt-3{padding-top: 3rem;}
  .s-pt-4{padding-top: 4rem;}

  .s-pb-0{padding-bottom: 0;}
  .s-pb-1{padding-bottom: 1rem;}
  .s-pb-2{padding-bottom: 2rem;}
  .s-pb-3{padding-bottom: 3rem;}
  .s-pb-4{padding-bottom: 4rem;}

  .s-text-center{text-align: center;}
  
  .s-justend{justify-content: end;}
}


/* ! Wordpress Styles */
/*------------------------------------------------------------------*/

input, textarea{border: 3px solid #ddd; border-radius: 3px;padding: 10px;}
input[type=submit], button{border: 3px solid #ddd; background: #ddd; border-radius: 3px;padding: 10px;}

.form-search{width: 100%;border: 3px solid #ddd;border-radius: 100px;padding-left: 15px;}
.form-search input{width: calc(100% - 40px); border: none;}
.form-search button{padding: 0; background: transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}

/* il calc viene utilizzato per spostare l'immagine, in .alignfull: Prima viene centrata con 50% e poi 
viene allineata a sinistra con il - 50vw di modo cosi che sia a tutto schermo e risulti responsive. 
Stesso discorso per .alignwide solo che viene spostate di -45vw di modo da dargli del margine ai lati.*/
.alignfull{width: 100vw;margin-left: calc(50% - 50vw);}
.alignwide{width: 90vw;margin-left: calc(50% - 45vw);}