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

:root {
--margine: 8vh;
--margine-mobile: 20px;
--margine-mezzo: 20px;
--margine-alto: 10vh;
--colore-principale: #2f5b6b;
--colore-secondario: #dc6944;
--colore-testi: #666;
--font-principale: "avenir-next-lt-pro", 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-weight: 500;
font-style: normal;
font-size:1em; 
color: var(--colore-testi);
background: #e6e4e2;
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-secondario);   position: fixed;   border-radius: 12px;   z-index: 99999; pointer-events: none;}

h3,  h4, h5{font-family: "p22-mackinac-pro", serif;
font-weight: 700;
font-style: normal;}


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

a{color:var(--colore-testi); text-decoration:none }
a:hover{color:var(--colore-testi); text-decoration:none}
.pulsante{display:inline-block;  line-height:30px; background:var(--colore-principale); padding:10px 3vw;  margin:20px 0px; color:#fff; text-transform: uppercase}
.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);}
.margini{padding:var(--margine-alto) 0px;}
.riga{display:block; width:100%; }
.iniziale{padding:200px 0px var(--margine) 0px;}
.paddington{padding:2vw; box-sizing: border-box}

.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 { width: 100%; z-index: 222; position: fixed;  padding:0px; height:90px; line-height:90px; transition: transform 0.6s ease-in; background:var(--colore-principale);}
.header.colorata{background:var(--colore-principale); }
.header.fissa{background:var(--colore-principale)!important }
.header a{ color:#fff; font-weight:500}
#logo{float:left; height:30px;}
#logo svg{display:inline-block;height:30px; fill:#fff}
nav{float:left; padding-left:4vw;font-size: 1.3em}
nav ul{display:inline-block; list-style: none; margin:0; padding:0; }
nav ul li{display:inline-block; margin:0px; padding:0px 20px}
nav ul li a{font-family: var(--font-principale); }

#link{position: absolute; right:20px;top:0px; height:90px; line-height:90px;}
#link a{color:#fff}
#link .lang{display:inline-block; color:#fff}
#link .lang{display:inline-block; color:#fff}
.book{display:inline-block; margin-left:20px }
.book span{display:block;color:#fff; width:50px; line-height:50px; background:var(--colore-secondario); text-align:center; }
.book span img{width:30px }

.menu {position:absolute; top:-5px; right:5px; visibility: hidden; height: 40px; width: 40px; z-index:999}
.menu-link { width: 90%; height: 90%; position: absolute; z-index: 1002;	top:5%;	left:5%;}
.menu-circle {width: 100%;height: 100%; position: absolute;  border-radius: 0px; transform: scale(1);  z-index: 1000; transition: transform 0.3s ease-in-out;}
.menu:hover .menu-circle {  transform: scale(1.8);}

@keyframes backgroundColorPalette {
  0% {
    background: #fff;
  }
  25% {
    background: #fefefe;
  }
  50% {
    background: #ccc;
  }
  75% {
    background: #ddd;
  }
  100% {
    background: #eee;
  }
}




.menu-overlay {background:var(--colore-principale); height: 100%;width: 100%; position: fixed; transition: opacity 0.2s ease-in-out; z-index: 3; opacity: 0;top:0; left:0;overflow-y:hidden;	 transform: translateY(-100%);}
.menu-overlay.open {opacity: 1; display:block; transform: translateY(0%)}
.menu-overlay .content{width:100%;  position:relative; float:left; padding:0px; box-sizing: border-box; display:table; height:100vh; }
.menu-overlay nav {float:none;display:table-cell;padding: 0;margin: 0;vertical-align:middle; text-align:center; }
.menu-overlay nav ul {padding:0px; box-sizing:border-box;margin: 0;list-style: none;display:block;; width:100%;}
.menu-overlay nav ul li a {	display: block;	color: #fff; font-weight: 900; font-style: normal; font-size:1.4em;	line-height:1.4em; padding:0px;	text-transform: uppercase;	text-decoration: none;		margin:5px 0px}
.menu-overlay nav ul li a:hover {	}
.menu-overlay nav ul li {
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0;
	-webkit-transform: translateX(-5%);
	-moz-transform: translateX(-5%);
	-ms-transform: translateX(-5%);
	-o-transform: translateX(-5%);
	transform: translateX(-5%);
	cursor: pointer;
	opacity: 0
}
.menu-overlay.open nav ul li {
	-moz-transform: translateX(0%);
	-ms-transform: translateX(0%);
	-o-transform: translateX(0%);
	transform: translateX(0%);
	opacity: 1
}
.menu-overlay nav ul li:nth-child(0) {
	-webkit-transition: opacity 0.4s 0.6s, -webkit-transform 0.4s 0.6s;
	transition: opacity 0.4s 0.6s, transform 0.4s 0.6s;
}
.menu-overlay nav ul li:nth-child(1) {
	-webkit-transition: opacity 0.4s 0.7s, -webkit-transform 0.4s 0.7s;
	transition: opacity 0.4s 0.7s, transform 0.4s 0.7s;
}
.menu-overlay nav ul li:nth-child(2) {
	-webkit-transition: opacity 0.4s 0.8s, -webkit-transform 0.4s 0.8s;
	transition: opacity 0.4s 0.8s, transform 0.4s 0.8s;
}
.menu-overlay nav ul li:nth-child(3) {
	-webkit-transition: opacity 0.4s 0.9s, -webkit-transform 0.4s 0.9s;
	transition: opacity 0.4s 0.9s, transform 0.4s 0.9s;
}
.menu-overlay nav ul li:nth-child(4) {
	-webkit-transition: opacity 0.4s 1.0s, -webkit-transform 0.4s 1.0s;
	transition: opacity 0.4s 1.0s, transform 0.4s 1.0s;
}
.menu-overlay nav ul li:nth-child(5) {
	-webkit-transition: opacity 0.4s 1.1s, -webkit-transform 0.4s 1.1s;
	transition: opacity 0.4s 1.1s, transform 0.4s 1.1s;
}
.menu-overlay nav ul li:nth-child(6) {
	-webkit-transition: opacity 0.4s 1.2s, -webkit-transform 0.4s 1.2s;
	transition: opacity 0.4s 1.2s, transform 0.4s 1.2s;
}
.menu-overlay nav ul li:nth-child(7) {
	-webkit-transition: opacity 0.4s 1.3s, -webkit-transform 0.4s 1.3s;
	transition: opacity 0.4s 1.3s, transform 0.4s 1.3s;
}
.menu-overlay nav ul li:nth-child(8) {
	-webkit-transition: opacity 0.4s 1.4s, -webkit-transform 0.4s 1.4s;
	transition: opacity 0.4s 1.4s, transform 0.4s 1.4s;
}
.menu-overlay nav ul li:nth-child(9) {
	-webkit-transition: opacity 0.4s 1.5s, -webkit-transform 0.4s 1.5s;
	transition: opacity 0.4s 1.5s, transform 0.4s 1.5s;
}
.menu-overlay nav ul li:nth-child(10) {
	-webkit-transition: opacity 0.4s 1.6s, -webkit-transform 0.4s 1.6s;
	transition: opacity 0.4s 1.6s, transform 0.4s 1.6s;
}
.menu-overlay nav ul li:nth-child(11) {
	-webkit-transition: opacity 0.4s 1.7s, -webkit-transform 0.4s 1.7s;
	transition: opacity 0.4s 1.7s, transform 0.4s 1.7s;
}
.menu-overlay nav ul li:nth-child(12) {
	-webkit-transition: opacity 0.4s 1.8s, -webkit-transform 0.4s 1.8s;
	transition: opacity 0.4s 1.8s, transform 0.4s 1.8s;
}
.menu-overlay nav ul li:nth-child(13) {
	-webkit-transition: opacity 0.4s 1.9s, -webkit-transform 0.4s 1.9s;
	transition: opacity 0.4s 1.9s, transform 0.4s 1.9s;
}
.menu-overlay nav ul li:nth-child(14) {
	-webkit-transition: opacity 0.4s 2.0s, -webkit-transform 0.4s 2.0s;
	transition: opacity 0.4s 2.0s, transform 0.4s 2.0s;
}
.menu-overlay nav ul li:nth-child(15) {
	-webkit-transition: opacity 0.4s 2.1s, -webkit-transform 0.4s 2.1s;
	transition: opacity 0.4s 2.1s, transform 0.4s 2.1
}

.active span:nth-child(1) {
	animation: ease .7s top forwards;
}
.not-active span:nth-child(1) {
	animation: ease .7s top-2 forwards;
}
.active span:nth-child(2) {
	animation: ease .7s scaled forwards;
}
.not-active span:nth-child(2) {
	animation: ease .7s scaled-2 forwards;
}
.active span:nth-child(3) {
	animation: ease .7s bottom forwards;
}
.not-active span:nth-child(3) {
	animation: ease .7s bottom-2 forwards;
}
 @keyframes top {
 0% {
 top: 0;
 transform: rotate(0);
}
 50% {
 top: 8px;
 transform: rotate(0);
}
 100% {
 top: 8px;
 transform: rotate(45deg);
}
}
 @keyframes top-2 {
 0% {
 top: 8px;
 transform: rotate(45deg);
}
 50% {
 top: 8px;
 transform: rotate(0deg);
}
 100% {
 top: 0;
 transform: rotate(0deg);
}
}
 @keyframes bottom {
 0% {
 bottom: 0;
 transform: rotate(0);
}
 50% {
 bottom: 8px;
 transform: rotate(0);
}
 100% {
 bottom: 8px;
 transform: rotate(135deg);
}
}
 @keyframes bottom-2 {
 0% {
 bottom: 8px;
 transform: rotate(135deg);
}
 50% {
 bottom: 8px;
 transform: rotate(0);
}
 100% {
 bottom: 0;
 transform: rotate(0);
}
}
 @keyframes scaled {
 50% {
 transform: scale(0);
}
 100% {
 transform: scale(0);
}
}
 @keyframes scaled-2 {
 0% {
 transform: scale(0);
}
 50% {
 transform: scale(0);
}
 100% {
 transform: scale(1);
}
}
@keyframes sposta {
 0% {
 transform: translateX(0px);
}
 100% {
 transform: translateX(10px);
}
}




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

#banner{position:relative; display:table; width:100%; height:100vh; padding:0vw; box-sizing: border-box; background-position: center}
#banner_basso{display:table; width:100%; height:85vh; padding:3vw; box-sizing: border-box; background-position: center}
#payoff{position:absolute; bottom:2vh; text-align:center; color:#fff; z-index:2; width:100%;}
#scroll{display:block; width:100%; text-align:center; margin:20px 0px 0px 0px;}
#scroll img{width:70px}
#titolo{display:table; width:100%; height:30vh; padding:3vw; box-sizing: border-box}
#titolo .titolo_pagina{display:table-cell; vertical-align: bottom; color:#fff}

.caratteristiche{background:var(--colore-principale); color:#fff; text-align:center}

.lista_rooms{display: flex;
  flex-wrap: wrap; padding: 0;
  margin: 0;
  list-style: none;
  gap: 16px; margin:20px 0px 0px 0px}
.lista_rooms li{ flex: 0 0 calc(50% - 8px); /* due colonne */
  box-sizing: border-box;}
.lista_rooms li .room{display:block; width:100%; background:#fff; padding:3%; box-sizing: border-box  }
.lista_rooms li .room img	{display:block; width:100%;}	
.lista_rooms li .room h3	{display:block; width:100%; margin-top:20px}	
.lista_rooms li .room p	{display:block; width:100%;}		

.dettaglio{background:var(--colore-secondario);}
.dettaglio .view{display: flex; background:#fff; padding:3%; box-sizing: border-box; list-style: none }
.dettaglio .view .meta{ margin:0; padding:0; display: flex;   align-items: center;     /* allineamento verticale */  justify-content: center; /* allineamento orizzontale */    padding: 20px;    box-sizing: border-box; }
.dettaglio .view .meta h2{display:block; width:100%;}
.dettaglio .view .meta p{display:block; width:100%;}

footer{display:block; background:var(--colore-principale); color:#fff; padding-top:var(--margine); font-size:0.8em; }

footer a{color:#fff; }
footer .container_logo{display:block; width:100%; margin:0px; padding:40px 40px 0px 40px; overflow:hidden; height:auto}
footer .logo{display:block; box-sizing: border-box; }
footer .logo svg{fill:#1b3f49 }

footer .menu_footer{list-style: none; width:100%; margin: 0; padding:0; }
footer .menu_footer li{display:block; width:100%; margin:0; padding:0; }
footer .powered{display:block; width:100%; padding:20px 0px}
footer .powered img{display:inline-block;max-width:150px}

.ico{display:block; padding:20px 0px;}
.ico img{width:100%; max-width:60px}

#map{display:block; width:100%; height:60vh; background:#000; margin-bottom:40px}

#reviews{display:block; padding:20px 0px}
#reviews .singola{display:inline-block;}
#reviews .singola span{font-size:2em; line-height:1.3em}

.design, .design a{color:#999; font-size:0.8em}

.accordion{display:block; margin-bottom:5vh}

  .accordion-item {
    border-bottom: 1px solid #fff;
    button[aria-expanded='true'] {
      border-bottom: 1px solid var(--colore-principale);
    }
  }
  button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: $text;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
    &:hover, &:focus {
      cursor: pointer;
      color: $blue;
      &::after {
        cursor: pointer;
        color: $blue;
        border: 1px solid $blue;
      }
    }
    .accordion-title {
      padding: 1em 1.5em 1em 0;
    }
    .icon {
      display: inline-block;
      position: absolute;
      top: 18px;
      right: 0;
      width: 22px;
      height: 22px;
      border: 1px solid;
      border-radius: 22px;
      &::before {
        display: block;
        position: absolute;
        content: '';
        top: 9px;
        left: 5px;
        width: 10px;
        height: 2px;
        background: currentColor;
      }
      &::after {
        display: block;
        position: absolute;
        content: '';
        top: 5px;
        left: 9px;
        width: 2px;
        height: 10px;
        background: currentColor;
      }
    }
  }
  button[aria-expanded='true'] {
    color: $blue;
    .icon {
      &::after {
        width: 0;
      }
    }
    + .accordion-content {
      opacity: 1;
      max-height: 9em;
      transition: all 200ms linear;
      will-change: opacity, max-height;
    }
  }
  .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
    p {
      font-size: 1rem;
      font-weight: 300;
      margin: 2em 0;
    }
  }

.fullscreen-video-container {
  position: absolute;
  height: 100vh;
  width: 100vw;
  overflow: hidden; z-index: 0;
 }

.fullscreen-video-container video {
 position:absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

.containera {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* allineamento verticale */
  gap: 3vw;
		background:#fff; padding:3vw; box-sizing: border-box
}

.back{font-size:0.8em;}
.back a{color: var(--colore-secondario); }	

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


@media screen and (max-width: 1200px) {
/*BASE*/	
body, html{font-size:1em; letter-spacing:0em;}	
h1{font-size:36px; line-height:36px;   font-style: normal;}
h2{font-size:36px; line-height:36px;   font-style: normal;}
h3{font-size:24px; line-height:24px;   font-style: normal;}
h4{font-size:20px; line-height:1em;  font-style: normal;}
h5{font-size:20px; display:block; width:100%; text-align:left; line-height:1em;   padding:0; font-style: normal;  text-transform:uppercase}
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; }
	
/*MENU*/
	
.header { width: 100%; z-index: 222; position: fixed;  padding:0px; height:60px; line-height:60px; transition: transform 0.6s ease-in; }
.header.colorata{background:var(--colore-principale); }
.header a{ color:#fff; font-weight:500}
#logo{float:left; height:30px; width:auto; padding-left:0px }
#logo svg{display:inline-block;height:30px; fill:#fff}	
#link{position: absolute; right:20px;top:60px; height:90px; line-height:90px;}


footer{text-align:center!important; padding-top:20px; }
footer h5{text-align:center; margin-top:10px}
footer .container_logo{ padding:30px 20px 30px 20px; }
footer .powered{padding:0px 0px}
footer .powered img{max-width:90px}	
	
	
	.lista_rooms{padding:0px 0px 20px 0px}	
.lista_rooms li{ flex: 0 0 100%; /* due colonne */box-sizing: border-box;}
.lista_rooms li .room{display:block; width:100%; background:#fff; padding:20px; box-sizing: border-box  }
.lista_rooms li .room img	{display:block; width:100%;}	
.lista_rooms li .room h3	{display:block; width:100%; margin-top:20px}	
.lista_rooms li .room p	{display:block; width:100%;}			
	
.dettaglio .view{display:block; background:#eee; padding:20px; box-sizing: border-box;width:100%;  }
.dettaglio .view .meta{ flex:none; display: block; width:100%;   align-items: center;     /* allineamento verticale */  justify-content: center; /* allineamento orizzontale */    padding: 0px;    box-sizing: border-box; }
	
	
.fullscreen-video-container {
  position: absolute;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: block;
  justify-content: center;
  align-items: center;
	background:#333}

.fullscreen-video-container video {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; }

.back{font-size:0.8em; }
.back a{color: var(--colore-secondario); }	

#reviews .singola span{font-size:1.5em; line-height:1.2em}	
.containera {grid-template-columns: 1fr;}
.cola-1 { order: 2; }
.cola-2 {order: 1;}

.design{display:block; margin-top:10px}	
	
}