html, body{width:100%;height:100%;margin: 0; padding: 0; font-family:'Montserrat', san serif; font-weight: 300; background-color: #efebe5; color: #594a42;-webkit-text-size-adjust:100%;backface-visibility: hidden; will-change: all; }
html { overflow:overlay;   height: 100%;  -webkit-text-size-adjust: 100%;}
body {opacity: 0; transition: .3s}
a,a:hover {text-decoration: none;transition: .4s all;}

/* custom fomt, colors*/

.font-MontSerrat {font-family: 'Montserrat';}

.font-thin {font-weight: 100!important;}
.font-xlight {font-weight: 200!important;}
.font-light {font-weight: 300!important;}
.font-regular {font-weight: 400!important;}
.font-medium {font-weight: 500!important;}
.font-sbold {font-weight: 600!important;}
.font-bold {font-weight: 700;!important}

.font-size-xsmall {font-size: 12px;!important}
.font-size-small {font-size: 16px!important;}
.font-size-normal {font-size: 20px!important;}
.font-size-medium {font-size: 24px!important;}
.font-size-large {font-size: 34px!important;}
.font-size-xlarge {font-size: 46px!important;}

.lh-n {line-height: normal!important}
.lh-120 {line-height: 120%!important}
.lh-150 {line-height: 150%!important}
.lh-200 {line-height: 200%!important}

@media all and (max-width: 480px) {	
	.font-size-xsmall {font-size: 10px!important;}
	.font-size-small {font-size: 14px!important;}
	.font-size-normal {font-size: 16px!important;}
	.font-size-medium {font-size: 22px!important;}
	.font-size-large {font-size: 28px!important;}
	.font-size-xlarge {font-size: 38px!important;}
}


.colore-primario { color: #222222;}
.colore-primario-light { color: #7a7a7a;}

.colore-secondario { color: #222d3f}
.colore-secondario-light { color: #7a818c;}

.colore-fondo-primario { background-color: rgba(34,34,34,1);}
.colore-fondo-primario-light {  background-color: rgba(122,122,122,1);}

.colore-fondo-secondario { background-color: rgba(100,81,70,1);}
.colore-fondo-secondario-light {  background-color:  rgba(122,129,140,1);}
  
/*SIDE NAV HELP*/
#mySidenav{position:fixed;top:20%; left: -200px; width: 200px; height: auto; background-color: #fff; padding: 10px 20px; transition:.3s; z-index:999;box-shadow: -6px 0px 20px rgba(0,0,0,0.2);}
#mySidenav:hover{left:0}
#mySidenav .btnOpen{ position: absolute; top: 0px; right: -40px; height: 40px; width: 40px; line-height: 40px; text-align: center; background-color: #fff;color: #333;box-shadow: 6px 2px 8px rgba(0,0,0,0.2); }
#mySidenav a{ display: block; transition:.3s;padding:5px 0; width: 100%;text-decoration:none;font-size:12px;color:#333 ;white-space: nowrap; }
#mySidenav a:hover { opacity: .6}
#mySidenav a.divider { height: 0; margin: .5rem 0 0 0; overflow: hidden; border-top: 1px solid #e9ecef;} 
 
/*HEADER*/
.header { position: fixed; top: 0; left: 0; width: 100%; border: 0px solid #ccc;transition: .2s all; z-index: 10;  }


.header-logo {position: fixed;  top: 15px; left: 15px; width: 120px; height: 135px; padding: 15px; opacity: 0; transform: translateY(-200%);  display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; transition: all .5s ease;}
.header-logo .hl-img-wrapper {  }
.header-logo .hl-img-wrapper img {width: 100%; transition: filter .3s} 

.header-logo.hl-show {opacity: 1; transform: translateY(0);  transform-origin: left bottom;  }
.header-logo img {  } 
.header-logo.inverse { background-color:  rgba(100,81,70,1);}
.header-logo.inverse .hl-img-wrapper img{ filter: brightness(0) invert(1); } 

body.scroll-page .header-logo { width: 60px; height: 60px; background-color:  rgba(100,81,70,1); transition: width .5s ease 0s, background-color .5s ease .3s, opacity .4s linear, height .5s ease;}
body.scroll-page .header-logo .hl-img-wrapper img { filter: brightness(0) invert(1); transition: filter .3s }
 


/* Tablet in modalità orizzontale */
@media only screen and (width: 820px) and (height: 1106px)  { 		
	.header-logo {width: 55px!important; height: 55px!important; transition: width .5s ease 0s, background-color .5s ease .3s;}
	.header-logo .hl-img-wrapper img{filter: brightness(0) invert(1);} 
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.header-logo {width: 55px!important; height: 55px!important; transition: width .5s ease 0s, background-color .5s ease .3s;}
	.header-logo .hl-img-wrapper img{filter: brightness(0) invert(1);} 
}


/* Tablet in modalità verticale */
@media all and (min-width: 481px) and (max-width: 768px) { 		
	.header .header-logo { width: 55px!important; height: 55px!important;  transition: .2s all}
}

@media all and (max-width: 667px) { 		
	.header-logo { width: 55px!important; height: 55px!important; background-color:  rgba(100,81,70,1); transition: width .5s ease 0s, background-color .5s ease .3s;}
	.header-logo .hl-img-wrapper img{filter: brightness(0) invert(1);  } 
 }
 



/*body.scroll-page .main-btn-prenota { padding: 5px 20px;}*/

@media (max-width:736px){	 	 
} 	
 
/*MAIN*/
.main { position: relative; display: inline-block; width: 100%; min-height: 100vH; margin-bottom: -10px; background-color: #efebe5; z-index: 2; overflow: hidden; box-shadow: 0px -9px 20px 11px rgb(0 0 0 / 11%);}
.main > .container { min-height: 80vh;}

.separatore {  text-align: center; padding: 150px 0;}
.separatore.inverse img {filter: brightness(0) invert(1);}

@media all and (max-width: 480px) { 
.separatore { padding: 80px 0;}
}

/*HEADINGS*/
 
.pagina-titolo {position: relative; margin-top: 130px; text-align: center;}
.pagina-titolo h1{position: relative; display: inline-block; font-size: 36px; font-weight: 300; -webkit-font-smoothing: antialiased; text-transform: uppercase; letter-spacing: 4px; text-align: center; }
/*.pagina-titolo h1:before,.pagina-titolo h1:after {content: ''; position: absolute; top: 50%;  width: 50px; height: 2px; background-color: #475458;}*/
.pagina-titolo h1:before {left: -80px;}
.pagina-titolo h1:after { right: -80px;}
.pagina-sottotitolo { margin: 5px 5% 5px 5%; text-align: center;}
.pagina-sottotitolo h2 {  font-size: 20px; font-weight: 400; line-height:160%; color: rgba(122,122,122,.6);  text-transform: uppercase; }
.pagina-testo { margin-top: 40px; margin-bottom: 40px; font-size: 16px; font-weight: 300;   }

@media all and (max-width: 480px) { 
	.pagina-titolo { margin:100px 0 40px 0;}
	.pagina-titolo h1 { font-size: 26px;}
	.pagina-titolo h1:before { left: 50%; transform: translateX(-50%); top: -20px;}
	.pagina-titolo h1:after { right: inherit; left: 50%; transform: translateX(-50%); top: inherit; bottom: -20px;}	
	.pagina-sottotitolo h2 { font-size: 18px;}	
	.pagina-testo { padding: 0 15px;}
}

/*sezioni*/

.sezione {position: relative; display: block; margin-top: 150px;}
 
/* Smartphone o piccoli Tablet */
@media all and (max-width: 480px) { 
 
}


.bg-turchese {background-color: #aad1d8!important;}
.bg-marrone {background-color: #998578!important;}
.bg-marrone-chiaro {background-color:#D3CAC4!important;}
.bg-marrone-scuro {background-color:#64554B!important;}
.bg-bianco {background-color: #ffffff!important;}
.bg-gray {background-color: #999!important;}
.bg-lightgray {background-color: #ccc!important;}

.box-titolo {position: relative; width: 100%; aspect-ratio:1/1; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 0 65px rgb(0 0 0 / 11%);}		 


.box-titolo .b-bordo { position: absolute; top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em; border: 1px solid #fff; z-index: 2; transition: all .3s;}
.box-titolo .b-bordo-testo { position: absolute; top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em; border-top: 2px solid #998578; border-bottom: 2px solid #998578; z-index: 0;}

.box-titolo .b-titolo { padding: 0 20%; font-size: 24px; font-weight: 400; color: #fff;text-transform: uppercase; z-index: 1;/*word-break: break-all;*/}
.box-titolo .b-testo { position: relative;font-size: 15px; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 160%;  text-align: justify; padding: 3.875em 2.875em}
.box-titolo .b-image {position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;}
.box-titolo .b-image.fg:before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color:rgba(56,49,44,.7);z-index: 1;}
.box-titolo .b-image img{object-fit: cover; object-position:center; width: 100%; height: 100%; transform: scale(1); transition: transform .5s }
.fresco:hover .b-image img {transform: scale(1.2);}

.box-titolo.inverse  .b-bordo {border: 1px solid #998578;}
.box-titolo.inverse  .b-bordo.testo {border: 1px solid #998578;}
.box-titolo.inverse  .b-titolo {color: #998578;}

@media (min-width: 1400px) and (max-width: 3800px){
	.box-titolo .b-bordo {top: 2.875em; bottom: 2.875em; left: 2.875em; right: 2.875em;}
	.box-titolo .b-bordo-testo  {top: 2.875em; bottom: 2.875em; left: 2.875em; right: 2.875em;}
	.box-titolo .b-titolo { padding: 0 20%;}
	.box-titolo .b-testo { padding: 4.875em 3.875em;}
}

@media (min-width: 1000px) and (max-width: 1399px){
	.box-titolo .b-bordo {top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em;}
	.box-titolo .b-bordo-testo  {top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em;}
	.box-titolo .b-titolo { padding: 0 20%;}
	.box-titolo .b-testo { padding: 3.875em 2.875em;}
}

@media (min-width: 800px) and (max-width: 999px){
	.box-titolo .b-bordo {top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em;}
	.box-titolo .b-bordo-testo  {top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em;}
	.box-titolo .b-titolo { padding: 0 20%;}
	.box-titolo .b-testo { padding: 4.875em 3.875em;}
}

@media (max-width: 1000px){
	.box-titolo .b-bordo {top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em;}
	.box-titolo .b-bordo-testo  {top: 1.875em; bottom: 1.875em; left: 1.875em; right: 1.875em;}
	.box-titolo .b-titolo { padding: 0 20%; font-size:calc(1.0vw + 0.5vh);}
	.box-titolo .b-testo { padding: 4.875em 3.875em;}
}

@media all and (max-width: 480px) {
	.box-titolo .b-titolo { padding: 0 5%; font-size:20px;}
}

.camera [class^="col-md-5"] { -ms-flex: 0 0 37.5%; flex: 0 0 37.5%; max-width: 37.5%;}		
.camera [class^="col-md-2"] { -ms-flex: 0 0 25%;	flex: 0 0 25%;max-width: 25%; }
.servizi [class^="col-md-5"] { -ms-flex: 0 0 37.5%; flex: 0 0 37.5%; max-width: 37.5%;}		
.servizi [class^="col-md-2"] { -ms-flex: 0 0 25%; flex: 0 0 25%;max-width: 25%; }
.prenotazioni [class^="col-md-5"] { -ms-flex: 0 0 37.5%; flex: 0 0 37.5%; max-width: 37.5%;}		
.prenotazioni [class^="col-md-2"] { -ms-flex: 0 0 25%; flex: 0 0 25%;max-width: 25%; }


@media all and (max-width: 480px) {
	.camera [class^="col-md-5"] { -ms-flex:100%; flex: 0 0 100%; max-width: 100%;}		
	.camera [class^="col-md-2"] {  -ms-flex:100%; flex: 0 0 100%; max-width: 100%; }
	.servizi [class^="col-md-5"] {  -ms-flex:100%; flex: 0 0 100%; max-width: 100%;}		
	.servizi [class^="col-md-2"] {  -ms-flex:100%; flex: 0 0 100%; max-width: 100%; }
	.prenotazioni [class^="col-md-5"] {  -ms-flex:100%; flex: 0 0 100%; max-width: 100%;}		
	.prenotazioni [class^="col-md-2"] {  -ms-flex:100%; flex: 0 0 100%; max-width: 100%; }
}


/* FOOTER */  

.footer { position: relative; display: inline-block; width: 100%; padding: 30px 0px 0px 0; background-color: #998578; color: #fff; font-weight: 300; -webkit-font-smoothing: antialiased;}
.footer a { color: rgba(255 255 255 / 100%);}
.footer a:hover { color: rgba(255 255 255 / 50%);}
.footer strong { font-weight: 700;}
.footer .f-logo { max-width: 130px;}

.footer .f-bottom {position: relative; margin-top: 20px; padding: 20px 0px 20px 0px; background-color: #594a42; font-size: 12px;}


@media all and (min-height: 1100px) { 
	 
}

/* Smartphone o piccoli Tablet */
@media all and (max-width: 480px) { 
	.footer { text-align: center;}	 
	.footer .d-inline { display: block!important;}
	.footer .f-bottom { font-size: 16px; text-align: center; padding-bottom: 50px;}	
	.footer .f-bottom a { width: 100%; display: block!important; padding: 10px;}
} 	


@media all and (min-width: 1280px) {
 
}