/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
VARIABILI
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

:root {
--margine: 4vh;
--margine-mobile: 10px;
--margine-mezzo: 20px;
--margine-alto: 80px;
--colore-principale: #462e0a;
--colore-secondario: #f9f1e4;
--colore-testi: #111;
--font-principale: "Plus Jakarta Sans", sans-serif;
--lungo:100px;
--medio:40px;
--piccolo:20px;
--c-primary: #dde1d2;
--c-secondary: #b2c73a;
--font-size: 6rem;
--animation-time: 25ms;
}



/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
BASE
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

body, html{
margin:0; 
padding:0; 
width:100%;
font-family: var(--font-principale);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size:0.9em; 
color: var(--colore-testi);
background: #faf9f6;
line-height: 1.6em;
}

.se-pre-con { position: fixed;left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999;display:none}
.se-pre-con img { position: relative; top: 50%; left: 50%; height:80px;transform: translate(-50%, -50%); }

#pointer-dot {  left: -10px;  top: -10px;   width: 20px;  height: 20px;  border: 1px solid #edf202;  position: fixed;  border-radius: 20px; z-index: 99999;pointer-events: none;display:none}
#pointer-ring {   left: 0;    top: 0;   width: 6px;   height: 6px;   padding: 0px;  background:var(--colore-principale);   position: fixed;   border-radius: 12px;   z-index: 99999; pointer-events: none;}

h1, h2, h3, h4, h5{font-family: "Old Standard TT", serif;
 
  font-style: normal; }

h1{font-size: 3.5rem; /* 72px */line-height: 1;  color:var(--colore-principale);font-weight: 300;}
h2{font-size: 2.5rem; /* 48px */font-weight: 300;
line-height: 1.1; font-style: normal; color:var(--colore-principale)}
h3{font-size: 1.6rem; /* 36px */
line-height: 2rem; /* 40px */  font-weight: 300; font-style: normal; }
h4{font-size: 1.5rem; /* 30px */
line-height: 2.25rem; /* 36px */  font-weight: 300; font-style: normal;}
h4 a{color:var(--colore-principale)}
h5{font-size: 1.3rem; /* 30px */
line-height: 1.3rem; /* 36px */  font-weight: 300; font-style: normal; }

a{color:var(--colore-testi); text-decoration:none }
a:hover{color:var(--colore-testi); text-decoration:none}
.pulsante{display:inline-block; padding:5px 3vw; border:1px solid var(--colore-principale); margin:0 10px}
.pulsante:hover, .pulsante.sel{background:var(--colore-secondario); color:#fff }

hr{ width: 100%; border: none; margin: 10px 0 20px 0; height:1px; background:var(--colore-testi);}

.sottolineato{text-decoration:underline}
.t-center{text-align:center}
.t-right{text-align: right}
.testo_destra{text-align: right}
.t-left{text-align:left;}
.fit{display:block;width:100%;}
.add-top{margin-top:var(--margine);}
.mtop{padding-top:var(--margine);}
.ptop{padding-top:var(--margine-mezzo);}
.mbottom{padding-bottom:var(--margine);}
.sezione{display:inline-block; width:100%; padding:var(--margine);}
.sezione.colorata{background-color:var(--colore-secondario)}
.margini{padding:var(--margine-alto) 0px;}
.riga{display:block; width:100%; }
.iniziale{padding:200px 0px var(--margine) 0px;}
.paddington{padding:0px 2vw; box-sizing: border-box; text-align: center}
.foto_griglia{float:left; width:100%; margin-bottom:30px;}
.border-top{border-top:1px solid #000}
.border-bottom{border-bottom:1px solid #000}

label{float:left; width:100%; text-align:left; line-height:40px; font-size:0.8em}
input[type=email], input[type=text], .campo_form{float:left;background:#fff; width:100%; line-height:30px; padding:5px; box-sizing: border-box; font-size:0.8em}
input[type=checkbox]{ display:inline-block;  line-height:30px; box-sizing: border-box; font-size:0.8em}


/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MENU
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.header {display:block;width:100%; top:0px; left:0px; z-index: 100; position: fixed; transition: transform 0.6s ease-in; transform: translate3d(0, 0, 0);  padding:0px; box-sizing: border-box;  height:140px; line-height:140px; background: #faf9f6;}
.header a{font-weight: 400; text-transform: uppercase; }
.header.bloccata { transform: translate3d(0, 0, 0)!important; }

#logo{display:inline-block; float:left; height:80px}
#logo img{height:80px;}

#menu{float:right;}
#menu ul{float:left; list-style: none;}
#menu ul li{display:inline-block; margin-right:20px; height:30px; line-height:30px; margin:55px 10px}
#menu ul li a{display:block; }
#menu ul li a.book{font-weight: 600;  }

#lang{float:left;margin-left:20px}

.menu-mobile {display: none;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-overlay {
  background: #fff;
  width: 100vw;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  transform: translate(0, -100%);
  transition: transform .5s ease;
  padding: 0px;
  box-sizing: border-box;
  overflow-y: scroll;
  z-index: 99; }

.menu-overlay.open {
  transform: translate(0, 0); }

.menu-overlay .content {
  display: block;
  width: 100%;
  position: relative;
  padding: 0px;
  box-sizing: border-box;
  height: 100%; }

.menu-overlay .tabellona {
  display: table;
  width: 100%;
  position: relative;
  padding: 0px;
  box-sizing: border-box;
  height: 100%; }


.menu-overlay .tabellona .cellona {
  display: table-cell; vertical-align: middle; padding:120px 0px; box-sizing: border-box}


@media only screen and (max-width: 1200px) {

.header {  width:100%; padding:0px; height:90px; line-height:90px}	


#logo{position:absolute; top:0px; left:20px; z-index:101}
#logo img {height:70px}

	
.menu-mobile {position:fixed; display: block;top:20px;right:10px;z-index:3;width:50px; height:50px; background:var(--colore-secondario);padding: 0px; border-radius:10px; z-index:101}
	
.menu-icon {position: relative; width: 50px;height: 50px;cursor: pointer; }
.menu-icon .menu-icon__cheeckbox {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    z-index: 2;
    -webkit-touch-callout: none;
    position: absolute;
    opacity: 0; }
.menu-icon div {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 12px; }
.menu-icon span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--bar-bg, #111);
    border-radius: 1px;
    transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965); }
.menu-icon span:first-of-type {top: 0; }
.menu-icon span:last-of-type {bottom: 0; }
.menu-icon.active span:first-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:first-of-type {transform: rotate(45deg); top: 5px; }
.menu-icon.active span:last-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:last-of-type { transform: rotate(-45deg);bottom: 5px; }
.menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {width: 22px; }
	

.menu-overlay{font-size:2em; line-height:1em;}
#menu{float:left; width:100%; text-align:center; }
#menu ul{float:left; width:100%;; list-style: none;margin:0; padding:0}
#menu ul li{display:block; width:100%;float:left; margin:0; padding:0}
#menu ul li a{display:block;  text-transform:uppercase;  margin:1em 0px}
#menu ul li a.book{font-weight: 600;  }
	
#lang{display:none }
#lang_mobile{float:left; width:100%; text-align:center; margin-top:1em}
}







/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CUSTOM
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

#centro{padding-top:140px}
#bannerone{height:80vh; width:100%; display:block;}
.blocco_hp{display:block; width:100%; text-align: center; }
.blocco_hp .immagine-hp{display:block; margin-bottom: var(--margine-mezzo)} 
.booknow{display:inline-block; padding:5px 2vw; border:1px solid var(--colore-principale)}
#footer{background-image:url('../img/pattern_big.png'); color:#fff; padding:var(--margine); }
#footer a{color:#fff; text-transform:uppercase; }
#footer ul{margin:0; padding:0; list-style: none}
#footer ul li{margin:0; padding:0;display:block;}
#footer img{max-width:200px}

.icona{display:inline-block; width:40px;}

.accessori{display:block;}
.accessori a{display:inline-block; margin:0 15px; line-height:30px }
.accessori .iconcina{display:inline-block;  height:30px; }
.accessori .iconcina img{display:inline-block;height:30px; width:auto;}
.accessori .desc{display:inline-block; margin-left:10px; font-size:0.8em}

.cool-link { display: inline-block; color: #000;text-decoration: none;}
.cool-link::after {  content: ''; display: block; width: 0; height: 2px; background: #000;transition: width .3s;}
.cool-link:hover::after { width: 100%;transition: width .3s;}
.cool-link.bloccato::after {width: 100%;}

.slider {width: 100%; margin: 0px auto;}
.slick-slide {margin: 0px;}
.slick-slide img {width: 100%; height:auto;}

#slider_hp{display:block; width: 100%; position:relative; height:auto}
.slides_hp{display:inline-block;width: 100%; height:80vh}
#payoff{position:absolute; bottom:100px; left:0px; width:100%; z-index:3; color:#fff}
#payoff a{font-size:1.5em; border:1px solid #fff; padding:5px 2vw; color:#fff;}

.selezione{display:block; width:100%; margin-top:var(--margine-mezzo);}


#slider_room{display:block; width: 100%; position:relative; height:auto; }


/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MEDIA QUERY
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/


@media screen and (max-width: 1200px) {
/*BASE*/	
#centro{padding-top:90px}	
h1{font-size:36px; line-height:1.6em;    font-style: normal;}
h2{font-size:36px; line-height:1.2em;    font-style: normal;}
h3{font-size:24px; line-height:1.4em;    font-style: normal;}
h4{font-size:20px; line-height:1.6em;  font-style: normal;}
h5{font-size:20px; }
h5.border{border-top:1px solid #000; }
p{ font-size:1em; line-height:1.6em}	
#pointer-dot {display:none}
#pointer-ring {display:none}


.testo_destra{text-align:center!important}
.t-right{text-align:center!important}
.fix-top-mobile{margin-top:20px}
.add-top{margin-top:20px}
.ptop{padding-top:var(--margine-mobile)}
.margini{padding:var(--margine-mobile) 0px}
.mtop{padding-top:20px}
.mbottom{padding-bottom:var(--margine-mobile)}
.iniziale{padding:130px 0px 0px 0px!important;}	
.paddington{padding:0px 20px; box-sizing: border-box}
.sezione{ padding:20px 0px;}
	
.pulsante{ margin:10px 0px; }
.menu{visibility: visible}

#banner{height:80vh; }	
#banner_basso{height:50vh; }
	

#footer{background-image:url('../img/pattern_big.png'); color:#fff; padding:var(--margine); }
#footer a{color:#fff; text-transform:uppercase; }
#footer ul{margin:10px 0px; padding:0; list-style: none; display:block; width:100%; text-align:center}
#footer ul li{margin:0; padding:0;display:block;}	
.logo_footer{display:block;width:100%; text-align:center}
.logo_footer img{display:inline-block;max-width:200px; }	
	
	
#menu{float:left; width:100%;}
#menu ul{float:left; list-style: none; width:100%;}
#menu ul li{display:inline-block;  height:30px; line-height:30px; margin:20px 0px}
#menu ul li a{display:block; }
#menu ul li a.book{font-weight: 600;  }

#lang{float:left;margin-left:20px}
#lang_mobile{float:left; width:100%; text-align:center; margin-top:60px; font-size:0.8em}
.cool-link.bloccato::after {width:0%;}
.cool-link:hover::after {width:0%;}
#payoff{bottom:60px; }
#payoff a{font-size:1.2em;  padding:5px 10px; color:#fff;}	
}