/* !@group variables */

:root {

	--white: 		#ffffff;
	--teal: 		#b3bec0;
	--teal-lt: 		#ddf1f4;
	--teal-dk: 		#7e9194;
	--blue-grey: 	#b0c7cd;
	--tan: 			#e8c5a0;
	--green: 		#003540;
	--dk-green: 	#0e262c;

	--font-base: 	10px;
	--font1: 		'Poppins', sans-serif;
	--font2: 		'mostra-nuova', sans-serif;

	--header: 		10.2rem;
	--cta-height: 	clamp( 4.8rem, 3vw, 6rem );
	--gutter: 		max( 5rem, 5vw );

	--selection: 	rgba(0,53,64,.5);
	--selection2: 	rgba(232,197,160,.7);
	--menu-back: 	rgba(0,53,64,.8);
	--gallery-back: rgba(176,199,205,.85);
}


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

	:root {

		--cta-height: 	6rem;
		--gutter: 		3rem;
	}
}


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

	:root {

		--header: 		8rem;
		--cta-height: 	5.5rem;
		--gutter: 		2rem;
	}
}

/* @end */


/* !@group global */

[data-aos] { visibility: hidden; }
[data-aos='imgzoom'],
[data-aos].animate__animated { visibility: visible; }
*,
*::before,
*::after { box-sizing: border-box; }

::-moz-selection {

	color: var(--white);
	background: var(--selection);
}

::selection {

	color: var(--white);
	background: var(--selection);
}

.section-dk ::-moz-selection {

	color: var(--dk-green);
	background: var(--selection2);
}

.section-dk ::selection {

	color: var(--dk-green);
	background: var(--selection2);
}

html {

	-webkit-tap-highlight-color: transparent;
	font-size: var(--font-base);
	scroll-behavior: smooth;
}

body {

	-webkit-font-smoothing: antialiased;
	background: var(--white);
	color: var(--green);
	font-family: var(--font1);
	font-size: 1.8rem;
	line-height: 1.9;
	padding-top: var(--header);
}

img {

	display: block;
	max-width: 100%;
	height: auto;
}

img.static {

	min-width: auto;
	max-width: none;
	display: inline-block;
}

a:hover,
a:active {

	text-decoration: none;
	outline: none;
}

button {

	-webkit-appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	outline: none;
	font-family: var(--font1);
}

#modal {

	display: none;
	opacity: 0;
	pointer-events: none;
}

.section-lt {

	color: var(--green);
	background-color: var(--white);
}

.section-dk {

	color: var(--white);
	background-color: var(--green);
}

/* @end */


/* !@group site header */

#site-header {

	background-color: var(--white);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 5;
	padding-inline: clamp( 2.5rem, 2.5vw, 5rem );
	box-shadow: 0 0 0 transparent;
	transition: box-shadow .35s ease;
}

.scroll #site-header { box-shadow: 0 0 1rem rgba(0,0,0,.1); }

#site-header > .inner {

	display: flex;
	flex-direction: row;
	align-items: center;
	height: var(--header);
}

#site-header .mobile-left,
#site-header .mobile-right { display: contents; }


#site-header .left,
#site-header .right {

	flex: 0 0 calc( 50% - 6rem );
	display: flex;
	flex-direction: row;
	align-items: center;
}

#site-header .center {

	flex: 0 0 12rem;
	display: flex;
	padding-inline: 2rem;
	position: relative;
	top: calc( var(--header) * -1 );
	transition: top .35s .35s ease;
}

.scroll #site-header .center { top: 0; }

#site-header .right {

	justify-content: flex-end;
	column-gap: .4rem;
}

.header-contacts {

	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: clamp( 3.25rem, 3.25vw, 6.5rem );
	margin-left: clamp( 4.25rem, 4.25vw, 8.5rem );
}

.header-contacts a {

	color: var(--green);
	column-gap: clamp( 0.8rem, 0.8vw, 1.6rem );
	line-height: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
	position: relative;
}

.header-contacts a > .label {

	font-family: var(--font2);
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025ch;
}

.header-contacts svg { fill: var(--green); }

.header-contacts a > .popover {

	color: var(--white);
	background-color: var(--green);
	white-space: nowrap;
	padding: .5rem 2rem;
	border-radius: 1.4rem;
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity .35s ease,
		top .35s ease;
}

body:not( .touch ) .header-contacts a:hover > .popover {

	opacity: 1;
	top: calc( 100% + .25rem );
}


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

	#site-header .left { display: contents; }

	#site-header .mobile-left,
	#site-header .mobile-right {

		flex: 0 0 calc( 50% - 6rem );
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#site-header .mobile-left { order: 1; }
	#site-header .center { order: 2; }

	#site-header .mobile-right {

		order: 3;
		justify-content: flex-end;
	}

	#site-header .right { display: none; }
}


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

	#site-header { padding-inline: 1.5rem; }
	#site-header .mobile-left,
	#site-header .mobile-right { flex: 0 0 calc( 50% - 5rem ); }
	#site-header .center { flex: 0 0 10rem; }

	.header-contacts {

		margin-left: 0;
		column-gap: 2rem;
	}

	.header-contacts a > .label { display: none; }
}

/* @end */


/* !@group main menu */

#open-menu {

	color: var(--green);
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: clamp( 1.2rem, 1.2vw, 2.4rem );
}

#open-menu > .label {

	font-family: var(--font2);
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025ch;
}

.bar {

	transition:
		opacity .35s ease,
		transform .35s ease;
}

.close-1 { transform-origin: center center; }
.close-2 { transform-origin: center center; }
.open .openbar { opacity: 0; }
.open .close-1 { transform: rotate( 45deg ); }
.open .close-2 { transform: rotate( -45deg ); }


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

	#open-menu > .label { display: none; }
}

/* @end */


/* !@group main cta */

.main-cta {

	--color: var(--green);
	--background: var(--white);

	font-family: var(--font2);
	font-size: clamp( 1.6rem, 1vw, 2rem );
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color);
	background-color: var(--background);
	border: .15rem solid var(--green);
	height: var(--cta-height);
	border-radius: calc( var(--cta-height) / 2 );
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-inline: calc( var(--cta-height) * .8 );
	transition:
		color .35s ease,
		background-color .35s ease;
}

#prenota.main-cta {

	--color: var(--white);
	--background: var(--green);
}

body:not( .touch ) .main-cta:hover {

	--color: var(--white);
	--background: var(--green);
}

body:not( .touch ) #prenota.main-cta:hover {

	--color: var(--white);
	--background: var(--dk-green);
}

/* @end */


/* !@group mobile cta */

#mobile-ctas { display: none; }


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

	#mobile-ctas {

		display: flex;
		flex-direction: row;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 5;
	}

	.mobile-cta {

		display: flex;
		justify-content: center;
		align-items: center;
		padding-inline: 2rem;
		min-width: 20rem;
		height: var(--cta-height);
		font-family: var(--font2);
		font-size: 2rem;
		line-height: 1;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--green);
		background-color: var(--white);
		border-top: .2rem solid var(--green);
	}

	#mobile-prenota.mobile-cta {

		color: var(--white);
		background-color: var(--dk-green);
		border-top-right-radius: 3rem;
	}
}


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

	.mobile-cta {

		min-width: initial;
		padding-inline: 3rem;
		font-size: 1.8rem;
	}
}

/* @end */


/* !@group header slider */

#slider-section {

	background-color: var(--dk-green);
	position: relative;
}

.header-slideshow { position: relative; }

.header-slideshow .glide__slides {

	transform: translate3d(0,0,0) !important;
	width: 100vw !important;
	height: calc( 100vh - var(--header) );
	height: calc( 100dvh - var(--header) );
	max-height: 123.8rem;
}

.header-slideshow .slide {

	opacity: 0;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity .75s ease;
	height: calc( 100vh - var(--header) );
	height: calc( 100dvh - var(--header) );
	max-height: 123.8rem;
	cursor: grab;
}

.header-slideshow .slide.is-active {

	opacity: 1;
	z-index: 1;
}

#slider-section .slide img {

	width: 100%;
	height: calc( 100vh - var(--header) );
	height: calc( 100dvh - var(--header) );
	max-height: 123.8rem;
	object-fit: cover;
}

#slider-logo {

	display: block;
	width: clamp( 17rem, 17vw, 34rem );
	height: clamp( 18.5rem, 18.5vw, 37rem );
	position: absolute;
	left: 50%;
	top: 9.69%;
	transform: translateX(-50%);
	transition: top .35s ease;
}

.scroll #slider-logo { top: clamp( -34rem, -17vw, -17rem ); }


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

	#slider-logo {

		width: 25.5rem;
		height: 27.75rem;
		top: 8%;
	}

	.scroll #slider-logo { top: -25.5rem; }
}


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

	#slider-logo {

		width: 17rem;
		height: 18.5rem;
		top: 8%;
	}
}

/* @end */