/* !@group variables */

:root {

	--text:				#201500;
	--text-lt:			#999999;
	--page:				#ffffff;
	--title:			#f13493;
	--subtitle:			#33bee1;
	--cta:				#fbb305;
	--cta-hover:		#ff9600;
	--attention:		#eb0040;

	--magenta:			#f13493;
	--magenta-lt:		#f5bad3;
	--magenta-dk:		#d50a70;
	--purple: 			#9d00f9;
	--cyan:				#33d3e1;
	--cyan-dk:			#00bfcf;
	--yellow:			#fab40d;
	--yellow-lt: 		#ffe578;
	--maroon:			#3c2b40;
	--maroon-mid:		#46324b;
	--maroon-lt:		#4e3953;
	--black: 			#000000;
	--beige:			#f7efe9;

	--font1:		'Epilogue', sans-serif;
	--font2:		'Yeseva One', serif;
	--font-base:	10px;

	--header:		min( 7.5vw, 15rem );
	--cta-height:	min( 4.8vw, 9.6rem );
	--attention:	#eb0040;
	--selection:	rgba(241, 52, 147, .75);
	--selection-dk: rgba(60, 43, 64, .75);
	--overlay:	rgba(241, 52, 147, .60);

	/* hotels */

	.milano-marittima-village 	{ color: #2479b0; }
	.milano-marittima 			{ color: #b545f7; }
	.michelangelo 				{ color: #b545f7; }
	.tintoretto 				{ color: #429dc8; }
	.costa-dei-pini 			{ color: #15b5fe; }
	.cervia-village 			{ color: #10e1ad; }
	.serenissima 				{ color: #a0d512; }
	.tosi-beach 				{ color: #ff5480; }
	.rimini 					{ color: #dc037d; }
	.riccione-village 			{ color: #f18555; }
	.riccione 					{ color: #ff7027; }
	.best-family 				{ color: #f75c26; }
}

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

	:root {

		--header:		14.35rem;
		--cta-height:	7.35rem;
	}
}

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

	:root {

		--header:		8rem;
		--cta-height:	6rem;
	}
}

/* @end */

/* !@group global */

*,
*::before,
*::after { box-sizing: border-box; }

::-moz-selection {

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

::selection {

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

html {

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

body {

	-webkit-font-smoothing: antialiased;
	background: var(--body);
	color: var(--text);
	font-family: var(--font1);
	font-size: 2rem;
	line-height: 1.6;
}

img {

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

img.static {

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

a:hover,
a:active,
a:focus {

	text-decoration: none;
	outline: none;
}

button {

	-webkit-appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	outline: none;
}

#site {

	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

#page { padding-top: var(--header); }

#modal {

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

/* @end */


/* !@group header */

#site-header {

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 3rem;
	background: var(--page);
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
	z-index: 5;
	transition: filter .25s ease;
}

#site-header > .inner {

	height: var(--header);
	width: 100%;
	max-width: 182.4rem;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	transition: height .25s ease;
}

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

	display: flex;
	flex-direction: row;
	align-items: center;
}

.header-logo {

	width: 39.8rem;
	height: 9rem;
}

.header-logo svg {

	width: 39.8rem;
	height: 9rem;
}

.header-tel {

	color: var(--page);
	background-color: var(--maroon);
	display: flex;
	font-size: 2.8rem;
	line-height: 1;
	text-decoration: none;
	width: var(--cta-height);
	height: var(--cta-height);
	border-radius: 50%;
	transition: background-color .25s ease;
	margin-right: clamp( 1rem, 1vw, 2rem );
}

.header-tel > span { margin: auto; }

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

	.header-logo,
	.header-logo svg {

		width: 27.85rem;
		height: 6.3rem;
	}
}

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

	#site-header > .inner > .left {

		flex-grow: 1;
		flex-direction: row;
		justify-content: space-between;
		padding-right: 1.5rem;
	}

	#site-header > .inner > .right { flex-grow: -1; }

	.header-logo,
	.header-logo svg {

		width: 25.34rem;
		height: 5.8rem;
	}

	.header-tel {

		margin-right: 0;
		width: 6rem;
		height: 6rem;
		font-size: 2.2rem;
	}
}

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

	#site-header { padding: 0 2rem; }

	.header-logo,
	.header-logo svg {

		width: 18.35rem;
		height: 4.75rem;
	}

	#site-header > .inner > .left { padding-right: 1rem; }
	.header-tel > span { font-size: 2rem; }
}

/* @end */


/* !@group main cta */

#main-cta {

	color: var(--page);
	background-color: var(--cta);
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: var(--cta-height);
	border-radius: calc( var(--cta-height) / 2 );
	padding: 0 calc( var(--cta-height) * 1.25 ) 0 calc( var(--cta-height) / 2 );
	transition: background-color .25s ease, top .35s ease, opacity .25s ease;
	position: relative;
}

#main-cta.selected { background-color: var(--magenta); }

#main-cta.hide {

	pointer-events: none;
	opacity: 0;
}

#main-cta .line-1 {

	font-family: var(--font2);
	font-size: min( 1.2vw, 2.4rem );
	margin-right: min( 1vw, 2rem );
	line-height: 1;
}

body:not(.touch) #main-cta:hover { background-color: var(--cta-hover); }
body:not(.touch) #main-cta.selected:hover { background-color: var(--magenta-dk); }

.miglior-tariffa {

	color: var(--page);
	background-color: var(--cyan);
	display: flex;
	width: min( 7.05vw, 14.1rem );
	height: min( 7.05vw, 14.1rem );
	border-radius: 50%;
	position: absolute;
	top: min( 1.7vw, 3.4rem );
	right: max( -1vw, -2rem );
	font-size: min( 0.85vw, 1.7rem );
	line-height: 1.17;
	text-transform: uppercase;
	font-style: italic;
	text-align: center;
	transition: background-color .25s ease;
}

.miglior-tariffa b { font-weight: 700; }
.miglior-tariffa > span { margin: auto; }

body:not(.touch) #main-cta.selected .miglior-tariffa,
#mobile-cta.selected .miglior-tariffa { background-color: var(--purple); }

#mobile-cta { display: none; }

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

	#main-cta .line-1 { font-size: 1.89rem; }

	.miglior-tariffa {

		width: 9.86rem;
		height: 9.86rem;
		top: 2.38rem;
		right: -1.4rem;
		font-size: 1.19rem;
	}
}

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

	#main-cta { display: none; }
}

/* @end */


/* !@group header slider */

#slider-section {

	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 0 3rem;
}

#slider-section > .inner {

	width: 100%;
	max-width: 182.4rem;
	margin: 0 auto;
}

.header-slideshow {

	position: relative;
	cursor: grab;
	background: var(--magenta);
}

.header-slideshow .glide__slides {

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

.header-slideshow .slide {

	opacity: 0;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 1.5s ease;
	height: calc( 100vh - var(--header) );
	max-height: 83.5rem;
}

.header-slideshow .slide.is-active {

	opacity: 1;
	z-index: 1;
}

.header-slideshow .slide img {

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

.header-slideshow .slider-controls {

	position: absolute;
	left: 50%;
	bottom: clamp( 2rem, 1.5vw, 3rem );
	transform: translateX(-50%);
}

.header-banner {

	position: absolute;
	bottom: max( -3vw, -6rem );
	pointer-events: none;
}

.header-banner.left { left: min( 5vw, 10rem ); }
.header-banner.right { right: min( 5vw, 10rem ); }

.header-banner.left img {

	width: min( 19.9vw, 39.8rem );
	height: min( 15.1vw, 30.2rem );
}

.header-banner.right img {

	width: min( 13.2vw, 26.4rem );
	height: min( 13.9vw, 27.8rem );
}

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

	.header-banner.left img {

		width: 27.8rem;
		height: 21.1rem;
	}

	.header-banner.right img {

		width: 18.4rem;
		height: 19.4rem;
	}
}

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

	.header-slideshow .glide__slides,
	.header-slideshow .slide,
	.header-slideshow .slide img { height: calc( 100vh - var(--header) - var(--cta-height) ); }
	.header-slideshow .slider-controls .bullets { display: none; }
	.header-banner { bottom: 2rem; }
	.header-banner.left { left: 1rem; }
	.header-banner.right { right: 1rem; }
}

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

	#slider-section { padding: 0; }
	.header-banner { display: none; }
	.header-slideshow .slider-controls { bottom: 0; }

	.header-slideshow .slider-nav svg {

		display: block;
		width: 5.1rem;
		height: 3.2rem;
	}
}

/* @end */