body{
	font-family: 'Julius Sans One', sans-serif;
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
	color: #141D26;
	overflow-x: hidden;
}

#preload{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: #9EAEBC;
		z-index: 1021;
}
	
#preloader{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
}
	
		
#acqua{
		display: flex;
		overflow: hidden;
		width: 160px;
		
		
		
}
	
#preload #acqua>i{
		animation: flow 1.5s linear infinite;
		animation-direction: alternate;
}
	
#preloader i{
		color: #FCDEBE;
		font-size: 60px;
		text-align: center;
		
}
	
	
#preloader #acqua i#uno{
		left: 2%;
}
	
#preloader #acqua i#tre{
		right: 2%;
}
	
#preloader #acqua i#quattro{
		right: 4%;
}
	
#acqua i{
		font-size: 80px;
		position: relative;
		
}
	
	@keyframes flow{
		from {
         transform: translateX(0%);
    }
     	to {
         transform: translateX(-100%);
    }
}

header{
	padding-top: 44px;
	z-index: 2;
}

header nav ul li{
	margin-left: 20px;
	font-size: 14px;
	font-weight: 500;
}

header nav ul li a, .logo{
	text-decoration: none;
	color: #FFFFFF;
}

.logo{
	font-family: 'Julius Sans One';
    font-size: 25px;
}

header nav ul li a{
	position: relative;
}

header nav ul li a::after{
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: -5px;
	background-color: #FFFFFF;
	transform: scale(0);
	transition:  all .2s linear;
}

header nav ul li:hover a::after{     
	transform: scale(1);

}


#menu i{
	font-size: 40px;
}


#intro{
	background-image:url("../img/sfondo-intro.webp");
	background-size: cover;
	background-position: center;
	height: 100vh;
	width: 100vw;
}

#intro::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(0deg, #122D47, transparent);
		/*z-index: 1;*/
		pointer-events: none;
}

#titolo{
	margin-bottom: 40px;
}

#titolo, #intro-form{
	z-index: 1;
}

#intro-form p{
	cursor: pointer;
}

#intro-form .btn{
	color: #ffffff;
	border: solid 1px rgba(255,255,255,1.00);
	margin-top: 30px;
}

#box-intro{
	z-index: 3;
}



.form-element{
	border: none;
	background: none;
	color: #FFFFFF;
}

.form-element:focus{
	outline: none;
}


h1, h2, h3, h4{
	font-family: 'Julius Sans One', sans-serif;
}

h1{
	font-size: 60px;
}

h2{
	font-size: 50px;
}

h3{
	font-size: 35px;
}



#mouse{
		position: absolute;
		z-index: 1;
		bottom: 20px;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 20px;
		height: 32px;
		border: 2px solid #FFFFFF;
		border-radius: 16px;
}
	
#mouse span{
		display: block;
		width: 2px;
		height: 10px;
		background-color: #FFFFFF;
		position: absolute;
		top: 5px;
		left: 50%;
		transform: translateX(-50%);
		animation: goDown 1s linear infinite;
}

@keyframes goDown{
		0%, 100%{
			top: 5px;
			opacity: 1;
		}
		
		50%{
			top: 25px;
			opacity: 0;
		}
		
	}

.citazione{
	margin-top: 150px;
	padding: 0 20px 20px 20px;
}

.citazione span.quote{
	font-family: 'Open Sans', sans-serif;
	font-size: 100px;
}

#enter h2{
	font-size: 40px;
}

.icone-citazione>img{
	width: 80px;
	height: 80px;
	
}

/*section#info-hotel{
	margin-top: 100px;
}*/

.box-info-hotel{
	margin-top: 100px;
}

#info-hotel .row{
	background-color: #122D47;
}

#hotel{
	overflow-x: hidden;
}

#info-hotel .wrapper-testo .testo, #enter-about-hotel .testo{
	padding: 90px 90px 90px 90px;
}

#info-hotel h3{
	margin-bottom: 40px;
}

#info-hotel .btn{
	/*width: 132px;
	height: 27px;*/
	position: relative;
}

#info-hotel .btn::after{
	content: '';
	width: 112px;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: -5px;
	background-color: #B78959;
	transition:  all .2s linear;
}

#info-hotel .btn:hover::after{
	width: 142px;
}

#dove-siamo .btn::after{
	content: '';
	width: 220px;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: -5px;
	background-color: #B78959;
	transition: all .2s linear;
}

#dove-siamo .btn:hover::after{
	width: 250px;
}

.wrapper-immagine img{
	height: 542px;
}



.swiper{
	margin: 100px 0 150px;
}

.swiper .swiper-slide{
	height: auto;
}

.swiper .swiper-slide img{
	height: auto;
	object-fit: cover;
}

.swiper-pagination-bullet{
	width: 15px;
	height: 5px;
	border-radius: 0;
	opacity: 0.8;
	background-color: #FFFFFF;
	
}

.swiper-pagination-bullet-active{
	opacity: 1;
	background-color: #B78959;
}

.testi-slide{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	background: linear-gradient(0deg, #122D47, transparent);
	display: flex;
	align-items: flex-end;
	padding: 0 0 40px 40px;
}

.box-slide h4{
	font-size: 20px;
}

#camere{
	margin-top: 100px;
}

#mappa{
	margin-bottom: 100px;
}

.icona-pin img{
	width: 80px;
	height: 80px;
}

.testi-mappa{
	margin-bottom: 80px;
}

.testi-mappa p {
    padding: 0 60px;
    margin-bottom: 30px;
}

.testi-mappa .btn{
	color: #122D47;
}

.testi-mappa .btn::after{
	content: '';
	width: 181px;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: -5px;
	background-color: #B78959;
	transition:  all .2s linear;
}



.immagine-mappa img{
	height: 542px;
	object-fit: cover;
	object-position: center center;
}

footer{
	color: #122D47;
	font-size: 16px;
}

.upper-footer{
	background:#9EAEBC;
	height: 250px;
	padding-top: 80px;
}

.upper-footer ul li{
	margin-bottom: 10px;
	font-weight: 600;
}

.upper-footer a{
	text-decoration: none;
	color: #122D47;
}

.upper-footer .icone-social{
	margin-top: 10px;
}

.upper-footer .icone-social a i{
	margin-right: 20px;
}

.upper-footer form a i{
	font-size: 30px;
}


.logo-footer{
	width: 100px;
	height: 100px;
}

input[type="submit"]{
		background: none;
		background-color: #122d46;
		border: solid 1px #122d46;
		border-left: none;
		border-bottom-right-radius: 6px;
		border-top-right-radius: 6px;
		color: #FFFFFF;
		height: 37.6px;

	}

input[type="email"]{
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
}

.lower-footer{
	height: 370px;
	background:#122D47;
		color: #FFFFFF;
}

.lower-footer a{
	text-decoration: none;
	color: #FFFFFF;
}

.lower-footer .row{
	padding-top: 50px;
}

.lower-footer h5{
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 20px;
}

.lower-footer ul{
	list-style: none;
	padding: 0px;
	
}

.lower-footer ul li{
	margin-bottom: 10px;
}

.lower-footer ul li a{
	text-decoration: none;
	color: #FFFFFF;

}

.lower-footer .footer-details{
	margin-top: 70px;
	font-size: 10px;
}

.lower-footer .footer-details p a{
	color: #FFFFFF;
}

#contatti{
	position: fixed;
	bottom: 50px;
	right: 50px;
	z-index: 6;
}

.contact{
	position: absolute;
	height: 50px;
	width: 50px;
	font-size: 25px;
	background-color: #9EAEBC;
	right: 0px;
	bottom: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	border-radius: 5px;
	transition: all 0.8s ease-in-out;
}

.contact.chat{
	z-index: 10;
	
}

.contact.email.up{
	bottom: 60px;
}

.contact.telephone.up{
	bottom: 120px;
}

.contact.facebook.up{
	bottom: 180px;
}

.contact.instagram.up{
	bottom: 240px;
}

/*INZIIO PAGINA ABOUT HOTEL*/
#intro-hotel{
	background-image:url("../img/sfondo-about-hotel.webp");
	background-size: cover;
	background-position: center;
	height: 600px;
	width: 100vw;
	margin-bottom: 100px;
}

#intro-hotel::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 600px;
		background: linear-gradient(0deg, #122D47, transparent);
		/*z-index: 1;*/
		pointer-events: none;
}

#enter-about-hotel .row{
	margin-bottom: 50px;
}

#enter-about-hotel .testo h3{
	margin-top: 40px;
	margin-bottom: 40px;
}

#enter-about-hotel .testo p{
	margin-bottom: 20px;
}

.titolo-mid{
	margin-bottom: 100px;
}

#verifica-disp{
	margin-bottom: 100px;
}

#verifica-disp h3{
	margin-bottom: 40px;
}

#verifica-disp .btn{
	width: 225px;
	height: 45px;
	background-color:#122D47;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 32px;
}

div#bookingModal{
	background-color:rgba(158,174,188,0.68); 
}

.testi-booking .btn{
	background-color:#122D47;
	color: #FFFFFF;
}

.testi-booking h6{
	color: #B78959;
}

.testi-booking p{
	margin-bottom: 20px;
}


/*FINE PAGINA ABOUT HOTEL*/

/*INIZIO PAGINA SPA*/


#intro-spa{
	height: 600px;
	width: 100vw;
	margin-bottom: 100px;
}

#intro-spa::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 600px;
	background-color: rgba(18,45,71,0.50);
}

video{
	width: 100vw;
	height: 600px;
	object-fit: cover;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.info-spa{
	margin: 100px 0px;
}

.info-spa .btn{
	border: solid 1px #122D47;
	margin-left: 20px;
}

div#etiquetteModal{
	background-color: rgba(158,174,188,0.68);
}

.modal-header .spa-icon img{
	width: 50px;
	color: blueviolet;
}

/*FINE PAGINA SPA*/
/*INZIO PAGINA CAMERE*/

#intro-camere{
	background-image:url("../img/sfondo-camere.webp");
	background-size: cover;
	background-position: center;
	height: 600px;
	width: 100vw;
	margin-bottom: 100px;
}

#intro-camere::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 600px;
		background: linear-gradient(0deg, #122D47, transparent);
		/*z-index: 1;*/
		pointer-events: none;
}

.titolo-sezione p{
	font-size: 25px;
}



/*FINE PAGINA CAMERE*/


/*INIZIO PAGINA RISTORAZIONE*/

#intro-ristorazione{
	background-image:url("../img/sfondo-ristorazione.webp");
	background-size: cover;
	background-position: center;
	height: 600px;
	width: 100vw;
	margin-bottom: 100px;
}

#intro-ristorazione::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 600px;
		background: linear-gradient(0deg, #122D47, transparent);
		/*z-index: 1;*/
		pointer-events: none;
}

.info-ristorante{
	margin: 100px 0px;
}

.info-ristorante .btn{
	border: solid 1px #122D47;
	margin-left: 20px;
}


/*FINE PAGINA RISTORAZIONE*/
/*INIZIO PAGINA LISTINO PREZZI SPA*/

#intro-listino-prezzo-spa{
	margin: 50px 0px 100px;
}

#enter-listino-prezzi-spa{
	margin-bottom: 100px;
	position: relative;
	

}

#enter-listino-prezzi-spa::before{
	content: '';
	background: url("../img/icona-spa.svg") no-repeat center;
	width: 100%;
	height:100%;
	opacity: 0.1;
	position: absolute;
		
}

/*FINE PAGINA LISTINO PREZZI SPA*/

/*INIZIO MENUOFFCANVAS MOBILE*/
.offcanvas.offcanvas-start{
  width: 100%;
}

div#menuOffcanvas {
    background-color: #9EAEBC;
}

.offcanvas-header{
	padding-top: 44px;
}

.offcanvas-title{
	font-family: 'Julius Sans One', sans-serif;
}

button.btn-close{
    font-size: 30px;
    font-weight: 500;
}

.offcanvas li{
	opacity: 0;
	transform: translateY(10px);
	transition: all .2s ease-in;
}

.offcanvas li:nth-of-type(2){
	transition-delay: .2s;
}

.offcanvas li:nth-of-type(3){
	transition-delay: .5s;
}

.offcanvas li:nth-of-type(4){
	transition-delay: .7s;
}

.offcanvas li:nth-of-type(5){
	transition-delay: 1s;
}

.offcanvas.show li{
	opacity: 1;
	transform: translateY(0);
}

.offcanvas-body ul li{
	margin-bottom: 30px;
}

.offcanvas-body ul li a{
	text-decoration: none;
	color: #122D47;
	font-size: 40px;
	font-family: 'Julius Sans One', sans-serif;
}

.offcanvas-body a{
	color: #122D47;
}

.offcanvas-body a i{
	font-size: 26px;
	margin-right: 20px;
	
}
/*FINE MENUOFFCANVAS MOBILE*/

/*media query smart*/
@media (max-width:767px){
	h1{
		font-size: 30px;
	}
	
	.mouse-scroll{
		display: none;
	}
	
	#enter h2{
		font-size: 25px;
	}
	
	.quote{
		display: none;
	}
	
	.citazione{
		margin-top: 100px;
	}
	
	.icone-citazione>img{
    width: 60px;
    height: 60px;
}
	
	#intro-hotel{
		margin-bottom: 50px;
	}
	
	
	#info-hotel .wrapper-testo .testo, #enter-about-hotel .testo {
    padding: 45px;
}
	
	
	.swiper{
		height: 250px;
		margin-bottom: 100px;
	}
	
	
	.swiper .swiper-slide img{
		height: 250px;
	}
	
	
	.swiper-slide-active{
		width: 300px!important;
	}
	
	.swiperRistorante .swiper-slide-active{
		width: auto!important;
	}
	
	.testi-slide{
		padding: 0px 0px 10px 10px;
	}
	
	#hotel .swiper{
		margin-bottom: 0px;
	}
	
	#camere{
		margin-top: 0px;
	}
	
	
	#verifica-disp{
		margin-top: 100px;
	}
	
	#verifica-disp h3{
		font-size: 30px;
	}
	
	
	footer{
		height: 850px;
	}
	
	.upper-footer{
		height: auto;
	}
	
	.lower-footer{
		height: auto;
	}
	
	.upper-footer .col-sm-6{
		width: auto;
	}
	
	.upper-footer .row{
		justify-content: space-between;
	}
	
	.colonna-newsletter{
		margin: 50px 0px;
	}
	
	
	
	.lower-footer .col-sm-6{
		width: auto;
	}
	
	.lower-footer .row>div{
		width: 50%;
	}
	
	html{
		overflow-x: hidden;
	}
}
/*fine media query smart*/

/*MEDIA QUERY TABLET VERTICALE*/

@media (min-width:768px) and (max-width:991px){
	
	.upper-footer{
		height: auto;
	}
	
	.lower-footer{
		height: auto;
	}
	
	.colonna-newsletter{
		margin: 50px 0px;
	}
	
	.lower-footer .row>div{
		width: 50%;
	}
	
}

/*FINE MEDIA QUERY TABLET VERTICALE*/