@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');


/* global box-sizing */
*, *:after, *:before { -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}


/* clear */
.clear:before, .clear:after {content:' '; display:table;}
.clear:after {clear:both;}
.clear {*zoom:1;}
img {max-width:100%; vertical-align: middle; object-fit: cover;}


html, body {width:100%; margin:0; padding:0;}
html {scroll-behavior: smooth; overflow-x: hidden;}
body { 
	overflow-x:hidden;
	background:var(--background);  
	color:var(--text-color);
	font-size:15px;
	line-height:23px;
	font-family: "DM Sans", sans-serif;

}

a {color:var(--main-color); text-decoration:none; transition: 0.3s ease;}
a:hover {color:white; opacity:0.5; transition: 0.3s ease;}
a:focus {outline:0;}
a:hover, a:active {outline:0;}
input:focus {outline:0; border:1px solid #04A4CC;}

ul {margin:0; padding:0;}
ul li::marker {color:var(--main-color);}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

main {width:100%; margin:0 0 120px 0; padding:0;} 
section {padding-inline:18px;}

/* wrapper */
.wrapper {max-width:1280px; width:100%; margin:0 auto; position:relative;}
.wrapper-big {max-width:1480px; width:100%; margin:0 auto; position:relative;}
.wrapper-small {max-width:1024px; width:100%; margin:0 auto; position:relative;}
.wrapper-xsmall {max-width:960px; width:100%; margin:0 auto; position:relative;}


.header {display:flex; align-items: center; justify-content: space-between; position:fixed; top:0; left:0; width:100%; height:100px; margin:0; padding:0 24px; z-index:9; background:var(--background);}
.header .logo {display:flex; align-items: center; column-gap:14px; padding-right:5%;}
.header .logo h1 {font-size:22px; line-height:24px; margin:0; color:white;}
.nav {flex:1; max-width:68%;}
.nav ul {display:flex; column-gap: 2vw; list-style: none; margin:0; padding:0; text-transform: uppercase;}
.nav a {color:white;}

.footer {width:100vw; text-align:center; background:black;}
.inner-footer {padding:60px 0 48px 0; border-bottom:1px solid rgba(255,255,255,0.3);}
.colophon {padding:18px; font-size:13px; line-height:normal;}

.fesr {width:100vw; background:white; padding:32px 18px; text-align:center;}
.fesr p {font-size:12px; line-height:normal; color:black; margin:18px 0 0 0;}

/* Hamburgher Menù */
*{-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */}

.mobilenav-hidden {overflow:hidden;}

.top-animate {top: 13px !important; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.mid-animate {opacity: 0;}
.bottom-animate {top: 13px !important; -webkit-transform: rotate(-225deg); transform: rotate(-225deg);}

.top-menu {top: 5px; width: 30px; height: 2px;}
.mid-menu {top: 13px; width: 20px; height: 2px;}
.bottom-menu {top: 21px; width: 30px; height: 2px;}


.menui {background: var(--main-color); position: absolute; z-index: 99999; transition: 0.6s ease; transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);}
.icon {display:flex; align-items: center; justify-content: center; width:110px; height:90px; padding:0; margin:0 0 0 2.4vw; z-index:9; background:white;}
.hamburger {position:relative; display:block; left:-14px; top:-14px;}

.mobilenav {display:none; position:fixed; top: 0; left:0; z-index: -1; width:100%; height:auto; padding:140px 4vw 4vw 4vw; overflow-x: hidden; overflow-y: auto; background:rgba(255,255,255,0.94);}
.mobilenav .mobilenav-inner {display:flex; flex-direction: row-reverse; align-items: flex-end; position:relative; width:100%; height:100%; padding: 4vw 0 2vw 0; margin:0; border-top:1px solid var(--main-color); border-bottom:1px solid var(--main-color);}
.mobilenav ul {margin:0; padding:0; list-style:none; font-family: "Cardo", serif; font-size:28px; line-height:30px;}
.mobilenav li {opacity:0; padding:0 0 6px 0; margin:0 0 6px 0;}
.mobilenav li a {color:var(--main-color);}
.mobilenav li a:hover {opacity: 0.4;}
.mobilenav li a.selected {color:#ed253c;}
.mobilenav .current_page_item a {color:#87764D;}






/*------------------------------------*\
    PAGE
\*------------------------------------*/

.hero-image {position:relative; display:flex; align-items: center; justify-content: center; flex-direction: column; background:url(../wip/img/hero.jpg) center center no-repeat; background-attachment: fixed; width:100vw; height:100vh; margin:0; padding:0;}
.hero-image:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:0;}
.hero-image h1 {color:white; font-size:62px; line-height:normal; margin:0; padding:0;}
.hero-image p {text-transform: uppercase; font-weight:bold; line-height:normal; letter-spacing:2px; margin:0; padding:0;}
.hero-image h1, .hero-image p, .hero-image img {position:relative; z-index:1;}
.hero-image .view-more {display:block; position:absolute; left:calc(50% - 16px); bottom:24px; z-index:1; animation: blink 1.6s infinite;}
@keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

.video {aspect-ratio: 16 / 9; width: 100%; max-width: 960px; margin: auto;}
.video iframe {width: 100%; height: 100%; border: 0;}


/*------------------------------------*\
    LIBRARY
\*------------------------------------*/

:root {

	/* Colors Palette */
	--background: #1A1A1A;
	--text-color: #ffffff;
	--title-color: #ffffff;

	--main-color: #c0a685;
	--second-color: #6B635A;

	--alt-color:#73998b;
	--alt-color-dark:#111111;

}

.hidden {display:none !important;}
.flex {display:flex;}
.grid {display:grid;}

.book-now {display:block; background:var(--main-color); color:var(--text-color); text-transform: uppercase; border-radius:3px; padding:8px 32px;}


.col-33 {flex: 0 0 33.33%;}
.col-40 {flex: 0 0 40%;}
.col-60 {flex: 0 0 60%;}
.col-66 {flex: 0 0 66.66%;}
.col-50 {flex:1;}

.h-align {text-align:center;}
.v-align {align-items: center}

.col-gap {column-gap: 60px;}

.bot-gap {margin-bottom:80px !important;}
.separator {margin-bottom:32px !important;}
.col-list {columns: 3; -webkit-columns: 3; -moz-columns: 3; column-gap: 8px; list-style-position: inside;}
.huge-pad {padding:80px;}
.reverse {flex-direction: row-reverse;}
.alt-bg {position:relative; padding-block:80px;}
.alt-bg:before {content:''; position:absolute; top:0; left:-50%; width:200%; height:100%; background:var(--alt-color-dark); overflow-y: hidden; z-index:-1;}

.masonry {column-count: 3; column-gap: 24px;}
.masonry-item {break-inside: avoid; margin-bottom: 24px;}
.masonry-item img {width: 100%; height: auto; display: block; border-radius: 4px;}

.deco {position:relative;}
.deco:before {content:''; position:absolute; top:16px; left:16px; width:100%; height:100%; border:1px solid var(--main-color); z-index:-1;}








/* Typography
--------------------------------------------- */
/*
@font-face {
	font-family: 'Medino Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Medino Regular'), url('fonts/Medino-Regular.woff2') format('woff');
}
*/

p {margin:0 0 18px 0;}

p b, p strong {font-weight:700;}

h1, h2, h3, h4, h5 {font-family: "Noto Serif Display", serif; color:var(--main-color); font-weight:400; margin:0 0 32px 0; padding:0; clear:both;}

h1 {font-size:48px; line-height:normal;}
h2 {font-size:42px; line-height:normal;}
h3 {font-size:28px; line-height:normal;}
h4 {font-size:24px; line-height:normal;}
h5 {font-size:20px; line-height:normal;}

small, .text-small {font-size: 12px; line-height:14px;}



/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen
    and (max-width: 767.98px)
    and (orientation: portrait) {

		body {overflow-x:hidden;}

		.header {justify-content: flex-start; padding-inline:12px;}
		.header .logo h1 {font-size: 18px; line-height: 22px;}
		.nav {display:none;}
		.hero-image h1 {font-size: 36px;}

		.flex {flex-direction: column;}
		.masonry {column-count: 1;}
		.huge-pad {padding-inline:24px;}
		.bot-gap {margin-bottom: 38px !important;}
		.col-list {columns: 1; -webkit-columns: 1; -moz-columns: 1;}

}


@media only screen
    and (min-width: 768px)
	and (max-width: 1023.98px)
    and (orientation: portrait) {

		body {overflow-x:hidden;}
		.flex {flex-direction: column;}
		.header {padding:0;}
		.header .logo {padding-right: 0px;}
		.header .logo h1 {display:none;}
		.nav ul {column-gap: 8px;}
		.book-now {padding-inline:18px;}
		.huge-pad {padding-inline:48px;}

	}