/***********************************************************/
/** Banner                                                **/
/***********************************************************/

#header {
	height: 100vh;
	height: 100dvh;
   position: relative;
}

#header .splide.is-focus-in .splide__arrow:focus {outline: 3px solid var(--primary);}

#header .splide__arrow {
	opacity: .5;
	width: auto;
	height: auto;
}

#header .splide__arrow:hover:not(:disabled) {opacity: 1;}

#header .splide__arrow svg {
	width: auto;
	height: 6rem;
	fill: var(--white);
}

#header .banner-gradient {
	background: rgba(0,0,0,0.5);
	background: linear-gradient(0deg, rgba(0,0,0,0.4) 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
}

@media (max-width: 575px) {
	#header .splide__arrow {top: 92%;}
	#header .splide__arrow svg {height: 3rem;}
}


.splide__pagination {
   bottom: 5em !important;
}


.splide__pagination__page {
   background: var(--primary) !important;
   height: 14px !important;
   margin: 7px !important;
   width: 14px !important;
   opacity: .9;
}


/***********************************************************/
/** About                                                 **/
/***********************************************************/

#about img.object-fit-cover {
	height: 40rem;
	min-height: 100%;
	max-height: 100%;
}

@media (max-width: 1400px) {
	#about img.object-fit-cover {height: 35rem;}
}

@media (max-width: 1200px) {
	#about img.object-fit-cover {height: 30rem;}
}

@media (max-width: 991px) {
	#about img.object-fit-cover {height: 25rem;}
}



/***********************************************************/
/** Quartos e Suites                                      **/
/***********************************************************/

#rooms .sticky-top {top: 10rem;}

#rooms .right {padding-top: 16rem;}

#rooms .right img {height: 40rem;}

@media (max-width: 1400px) {
	#rooms .right {padding-top: 13.5rem;}
}

@media (max-width: 991px) {
	#rooms .sticky-top {padding-top: 3rem;}
	#rooms .right {padding-top: 3rem;}
	#rooms .right img {
		width: 48%;
		height: 15rem;
		margin: 0 !important;
	}
}



/***********************************************************/
/** Wellness e Spa                                        **/
/***********************************************************/

#spa .container {z-index: 6;}

#spa .container .row > div {
	min-height: 50rem;
	padding: 5rem 10rem;
}

#spa .overlay, .overlay {
	z-index: 5;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
}

@media (max-width: 1400px) {
	#spa .container .row > div {min-height: 40rem;}
}

@media (max-width: 1200px) {
	#spa .container .row > div {
		min-height: 35rem;
		padding: 2.5rem 5rem;
	}
}

@media (max-width: 768px) {
	#spa .container .row > div {padding: 1.75rem 2.5rem;}
}



/***********************************************************/
/** Special Offers                                        **/
/***********************************************************/

#offers .offer > div {z-index: 10;}

#offers .offer img {
	height: 40rem;
	transition: all linear .3s;
}

#offers .offer:hover div.button {background-color: var(--white) !important;}
#offers .offer:hover div.button svg path {stroke: var(--dark);}
#offers .offer:hover img {transform: scale(1.05);}

@media (max-width: 1400px) {
	#offers .offer img {height: 35rem;}
}

@media (max-width: 1200px) {
	#offers .offer img {height: 30rem;}
	#offers .offer.alt img {height: 100% !important;}
}

@media (max-width: 991px) {
	#offers .offer img {height: 17.5rem;}
}