/* CSS Document */

:root {
	--light: #E4E0D4;
	--middle: #A6A998;
	--dark: #929B88;
	--darker: #0A0D0A;
	--main_gap: 10px;
	--br_images: 0px;
	--content_bg: #111;
}

* {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;

	font-family: "objektiv-variable", sans-serif;
	font-variation-settings: "wght" 400;
	font-style: normal;
	font-size: 14px;
	line-height: 24px;

	color: var(--light);
	background-color: var(--darker);
}

body.locked {
	overflow-y: hidden;
}

div {
	display: block;
	margin: 0;
	padding: 0;
}


@media screen and (max-height: 760px) {}


.vfx {
	opacity: 0.0;
	-webkit-transition: opacity 1000ms ease-in-out 0ms;
	transition: opacity 1000ms ease-in-out 0ms;
}

.vin {
	opacity: 1.0;
}



.mobile .hide_mobile {
	display: none;
}

.standard .hide_desktop {
	display: none;
}



section {
	width: 100vw;
}

.standard section .inner {
	margin: 0 auto;
	padding: 0 10vw;
}

.seperator_30vh {
	background-color: var(--darker);
	height: 30vh;
}




.w20vw {
	width: 20vw;
}

.w50vw {
	width: 50vw;
}

.w100vw {
	width: 100vw;
}

.h20vh {
	height: 20vw;
}

.h50vh {
	height: 50vw;
}

.h100vh {
	height: 100vh;
}



a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	cursor: pointer;
}

small {
	font-size: 11px;
	text-transform: uppercase;
}

b {
	font-variation-settings: "wght" 600;
}



h1,
h2 {
	font-weight: 400;
	color: var(--green);
	font-family: "eb-garamond", serif;
}

h2 {
	font-size: 40px;
	line-height: 45px;
}

.mobile h2 {
	font-size: 32px;
	line-height: 38px;
}

/* WordPress override guard:
   The site-wide Customizer CSS (<style id="wp-custom-css">) declares
   `h2 { font-size: 60px !important }` at (max-width:1024px) and 50px at
   (max-width:480px). Those leak into this microsite and clobber the heading
   sizes on tablet/mobile (desktop is unaffected because no !important global
   rule applies there). Re-assert the design sizes scoped to the page body
   (#b1) so specificity + !important beats the global `h2` rule. */
#b1 h2 {
	font-size: 40px !important;
}
#b1.mobile h2 {
	font-size: 32px !important;
}




.seperator {
	margin: 20px 0;
}





.header {
	display: flex;
	padding: 0 0 0 10px;
	position: fixed;
	border-radius: 25px;
	z-index: 1050;
	backdrop-filter: blur(10px) brightness(0.6);
}

.standard .header {
	width: 120px;
	top: 45px;
	right: 35px;

}

.mobile .header {
	width: 60px;
	height: 60px;
	top: 10vh;
	right: 0px;
	border-radius: 25px 0 0 25px;
	background-color: transparent;
	align-items: center;
}

.standard .header .close {
	display: none;
}

.mobile .header .close {
	display: none;
}


.standard .header .menu,
.standard .header .close,
.standard .header .language {
	width: 50px;
	height: 50px;
}

.mobile .header .menu,
.mobile .header .close,
.mobile .header .language {
	width: 40px;
	height: 40px;
}


.header .menu {
	background-size: 30px;
	background-image: url(../sources/menu_light.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.header .close {
	background-size: 26px;
	background-image: url(../sources/closed_light.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.header .menu:hover,
.header .close:hover {
	cursor: pointer;
}

.header .language {
	text-align: center;
	text-transform: uppercase;
}

.mobile .header .language {
	display: none;
	padding: 10px 0 0 0;
}






.language .active_lang {
	display: inline-block;
	width: 50px;
	padding: 13px 0;
}

.language .active_lang:hover {
	cursor: pointer;
}

.lang_dd_menu {
	position: absolute;
	top: 40px;
	height: 70px;
	width: 50px;
	padding: 11px 0;
	background-color: var(--darker);
	border-radius: 25px;
}

a.dd_lang {
	display: block;
}

a.dd_lang:hover {
	opacity: 1;
}


a.dd_lang.active {
	display: none;
}




.menu_wrapper {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vw;
	top: 0%;
	left: 0%;
	z-index: 1000;

	text-align: center;
}

.menu_wrapper .background {
	position: fixed;
	top: 0%;
	bottom: 0%;
	left: 100%;
	right: 0%;

	-webkit-transition: all 500ms cubic-bezier(0.75, 0, 0.25, 1) 0ms;
	-moz-transition: all 500ms cubic-bezier(0.75, 0, 0.25, 1) 0ms;
	transition: all 500ms cubic-bezier(0.75, 0, 0.25, 1) 0ms;

	background-color: var(--darker);

	overflow: hidden;
}

.menu_wrapper.in .background {
	left: 0%;
}

.menu_wrapper.out .background {
	right: 100%;
}

.menu_wrapper .close {
	display: none;
}

.menu_wrapper .list {
	display: none;
	position: relative;
	margin: 15vh 0 0 0;

}

.menu_wrapper .list a {
	display: block;
	padding: 1.6vh 0;
	font-size: 18px;
	color: var(--light);
}

.standard .menu_wrapper .list a {
	font-size: 28px;
	line-height: 32px;
}


.menu_footer {
	display: none;
	position: relative;
	margin: 40px 0;
}

.language_menu:hover {
	cursor: pointer;
}

.menu_lang,
.menu_footer .seperator {
	opacity: 0.5;
}

.menu_lang.active {
	opacity: 1;
}


.watermark {
	display: none;
	position: fixed;
	bottom: 10vh;
	left: calc(50vw - 50px);

	height: 80px;
	width: 100px;

	background-position: center;
	background-size: contain;
	background-image: url(../sources/logo_dark.svg);
	background-repeat: no-repeat;

}







.cta_wrapper {
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: 5vh;
	width: 100%;
	padding: 0 20px;
}



a.cta {
	display: inline-block;
	padding: 12px 20px;
	border: 2px solid;
	border-radius: 30px;
	font-variation-settings: "wght" 600;
}

a.cta.light {
	border-color: var(--light);
	color: var(--light);
}

a.cta.dark {
	border-color: var(--dark);
	color: var(--dark);
}

a.cta.dark.full {
	background-color: var(--dark);
	color: #FFF;
}

a.cta.white {
	border-color: #FFF;
	color: var(--darker);
}

a.cta.white.full {
	background-color: #FFF;
}



/*	##########################			Intro				########################## */

#intro {
	position: relative;
	height: 100vh;
	background-image: url(../sources/images/intro_front.jpg);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.mobile #intro {
	background-position: 48% 0;
}

#intro .logo {
	position: absolute;
	top: 50px;
	left: calc(50% - 40px);
	height: 110px;
	width: 80px;
	background-image: url(../sources/logo.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#intro .letters {
	position: absolute;
	width: 80vw;
	left: 10vw;
	top: 0vh;
	height: 80vh;
	background-image: url(../sources/logos/la_hermitage_3.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.9;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

#intro .background {
	/* Hidden: the new header (intro_front.jpg) is a full, opaque villa scene.
	   The old parallax overlay was a transparent-sky villa layer meant to sit on
	   top of start_background.jpg; layering it over the new image would double up.
	   The logo lettering (.letters) keeps its parallax. */
	display: none;
	position: absolute;
	width: 100vw;
	left: 0vw;
	top: 0vh;
	height: 100vh;
	background-image: url(../sources/images/foreground_2.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
    pointer-events: none;
}


.mobile #intro .background {
	background-position: 66% center;
}









/*	##########################			URBAN				########################## */

#urban {
	position: relative;
	height: 100vh;
	background-color: var(--darker);
	background-size: cover;
}

#urban .subtitle {
	position: absolute;
	top: 150px;
	left: calc(50% - 100px);
	width: 200px;
	height: 25px;
	text-align: center;
	color: var(--light);
	font-variation-settings: "wght" 600;
	z-index: 14;

	border-radius: 20px;

	backdrop-filter: blur(5px) brightness(0.6);

	-webkit-transition: opacity 2s cubic-bezier(.6, 0, .4, 1) 0s;
	transition: opacity 2s cubic-bezier(.6, 0, .4, 1) 0s;

}

#urban.zoomed .subtitle {
	opacity: 0;
}

#urban .letters {
	position: absolute;
	width: 80vw;
	left: 10vw;
	top: 20vh;
	height: 55vh;
	background-image: url(../sources/logos/la_hermitage_2.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.9;

	-webkit-transition: opacity 2s cubic-bezier(.6, 0, .4, 1) 1s;
	transition: opacity 2s cubic-bezier(.6, 0, .4, 1) 1s;

	z-index: 15;
}

#urban.zoomed .letters {
	opacity: 0.0;
}







#urban .letters_2 {
	position: absolute;
	width: 280px;
	height: 30px;
	right: 60px;
	bottom: 60px;
	background-image: url(../sources/logos/la_hermitage_2.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.0;

	-webkit-transition: opacity 2s cubic-bezier(.6, 0, .4, 1) 5s;
	transition: opacity 2s cubic-bezier(.6, 0, .4, 1) 5s;

	z-index: 15;
}

#urban.zoomed .letters_2 {
	opacity: 1.0;
}







#urban .background {
	position: absolute;

	height: 100vh;
	width: 100vw;

	left: 0vw;
	top: 0vh;

	background-image: url(../sources/images/port_nous.jpg);
	background-position: bottom center;


	-webkit-transition: background-position 4s cubic-bezier(.6, 0, .4, 1) 1s,
		background-size 4s cubic-bezier(.6, 0, .4, 1) 1s,
		filter 4s cubic-bezier(.6, 0, .4, 1) 1s;
	transition: background-position 4s cubic-bezier(.6, 0, .4, 1) 1s,
		background-size 4s cubic-bezier(.6, 0, .4, 1) 1s,
		filter 4s cubic-bezier(.6, 0, .4, 1) 1s;

	filter: brightness(0.3) grayscale(1);

	z-index: 10;
}

#urban.zoomed .background {
	background-position: top center;
	background-size: 150%;
	filter: brightness(1) grayscale(0);
}


@media (orientation: landscape) {
	#urban .background {
		background-size: auto 100%;
	}

	#urban.zoomed .background {
		background-size: auto 200%;
	}
}

@media (orientation: portrait) {
	#urban .background {
		background-size: 100% auto;
	}

	#urban.zoomed .background {
		background-size: auto 200%;
	}
}





#urban .vignette {
	position: absolute;

	height: 100vh;
	width: 100vw;

	left: 0vw;
	top: 0vh;

	background-image: url(../sources/images/port_n_vignette.png);
	background-position: bottom center;
	background-size: 100%;
	opacity: 0;

	-webkit-transition: background-position 4s cubic-bezier(.6, 0, .4, 1) 1s,
		background-size 4s cubic-bezier(.6, 0, .4, 1) 1s,
		opacity 4s cubic-bezier(.6, 0, .4, 1) 4s;
	transition: background-position 4s cubic-bezier(.6, 0, .4, 1) 1s,
		background-size 4s cubic-bezier(.6, 0, .4, 1) 1s,
		opacity 4s cubic-bezier(.6, 0, .4, 1) 4s;

	z-index: 11;


}

#urban.zoomed .vignette {
	background-position: top center;
	background-size: 150%;
	opacity: 1;
}



#urban .cta_container {
	position: absolute;
	bottom: 100px;
	left: calc(50vw - 100px);
	width: 200px;
	z-index: 18;
	opacity: 1;
}

#urban .cta {
	width: 200px;
	text-align: center;
}





/*	##########################			COMMUNITY			########################## */

.standard #topic {
	display: flex;
	height: 100vh;
	overflow: hidden;
	align-items: center;
}

#topic {
	background-color: var(--darker);
}


#topic .grid {
	display: grid;
}

.mobile #topic .grid {
	display: block;
}

#topic .grid {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 5vw;
	grid-row-gap: 5vw;
}

#topic .image_wrapper,
#topic .right {
	position: relative;
}

#topic .image_wrapper {
	grid-area: 1 / 1 / 2 / 2;
}

#topic .text_wrapper {
	grid-area: 1 / 2 / 2 / 3;
}

.mobile #topic .text_wrapper {
	padding: 10vw;
}




#topic .image {
	width: 100%;
	height: 100%;
}

#topic .image,
#topic .inline_iamge {
	background-position: center;
	background-size: cover;
}

#topic .inline_iamge {
	width: 100%;
	height: 300px;
	margin: 30px 0;
}


.diashow_wrapper {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--content_bg);
}

.topic_video_wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--content_bg);
}

.topic_video_wrapper video,
.topic_video_wrapper img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.diashow_wrapper .diashow_image {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;

}

.diashow_wrapper .diashow_image.image_1 {
	background-image: url(../sources/images/aboutus/001.jpg);
}

.diashow_wrapper .diashow_image.image_2 {
	background-image: url(../sources/images/aboutus/002.jpg);
}

.diashow_wrapper .diashow_image.image_3 {
	background-image: url(../sources/images/aboutus/003.jpg);
}

/*	##########################			ABOUT US			########################## */

.standard #aboutus {
	display: flex;
	height: 100vh;
	overflow: hidden;
	align-items: center;
}

.mobile #aboutus {
	display: flex;
	overflow: hidden;
	align-items: center;
}

#aboutus {
	background-color: var(--darker);
}

#aboutus .grid {
	display: grid;
	align-items: center;
}

.mobile #aboutus .grid {
	display: block;
}

#aboutus .grid {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 5vw;
	grid-row-gap: 5vw;

}

#aboutus .image_wrapper,
#aboutus .right {
	position: relative;
}

#aboutus .image_wrapper {
	min-height: 50vh;
}

#aboutus .text_wrapper {
	grid-area: 1 / 2 / 2 / 3;
}

.mobile #aboutus .text_wrapper {
	padding: 10vw;
}

#aboutus .image {
	width: 100%;
	height: 50vh;
}

#aboutus .image,
#aboutus .inline_iamge {
	background-position: center;
	background-size: cover;
}

#aboutus .inline_iamge {
	width: 100%;
	height: 300px;
	margin: 30px 0;
}










/*	##########################			LOCATION			########################## */

#location {
	position: relative;
}

.fifty_fifty {
	width: 100vw;
	height: 100vh;
}

.mobile .fifty_fifty {
	height: 200vh;
}

.fifty_fifty .left,
.fifty_fifty .right {
	height: 100vh;

	-webkit-transition: all 1000ms cubic-bezier(0.75, 0, 0.25, 1) 0ms;
	-moz-transition: all 1000ms cubic-bezier(0.75, 0, 0.25, 1) 0ms;
	transition: all 1000ms cubic-bezier(0.75, 0, 0.25, 1) 0ms;
}

.mobile .fifty_fifty .left,
.mobile .fifty_fifty .right {
	width: 100vw;
}

.fifty_fifty .left {
	background-color: var(--middle);
	left: 0%;
	right: 50%;
}

.fifty_fifty .left.expand {
	left: 0%;
	right: 0%;
	z-index: 10;
}

.fifty_fifty .right {
	background-color: var(--dark);
	left: 50%;
	right: 0%;
}

.fifty_fifty .right.expand {
	left: 0%;
	right: 0%;
	z-index: 10;
}

.fifty_fifty .foreground_animation {
	z-index: 11;
}

.standard .fifty_fifty .left,
.standard .fifty_fifty .right {
	position: absolute;
}

.fifty_fifty .left,
.fifty_fifty .right {
	padding: 10vw;
}




.preview_1 {
	color: var(--light);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.preview_1 .head {
	grid-area: 1 / 1 / 2 / 3;
}

.preview_1 .img_1 {
	grid-area: 2 / 1 / 5 / 2;
}

.preview_1 .img_2 {
	grid-area: 2 / 2 / 4 / 3;
}

.preview_1 .img_3 {
	grid-area: 4 / 2 / 5 / 3;
}

.preview_1 div.cta {
	grid-area: 5 / 1 / 6 / 3;
}


.preview_2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.preview_2 .head {
	grid-area: 1 / 1 / 2 / 3;
}

.preview_2 .img_1 {
	grid-area: 2 / 1 / 4 / 2;
}

.preview_2 .img_2 {
	grid-area: 4 / 1 / 5 / 2;
}

.preview_2 .img_3 {
	grid-area: 2 / 2 / 5 / 3;
}

.preview_2 div.cta {
	grid-area: 5 / 1 / 6 / 3;
}


.preview_1 .head,
.preview_2 .head {
	height: 30px;
	text-transform: uppercase;
	font-size: 10px;
	text-align: center;
}

.preview_1 div.cta,
.preview_2 div.cta {
	text-align: center;
}



#location a.cta {
	margin: 30px 0 0 0;
}


.preview_1 .img_1,
.preview_2 .img_3 {
	height: 50vh;
}

#location .img_1,
#location .img_2,
#location .img_3 {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.preview_1 .img_1 {
	background-image: url(../sources/images/placeholder.jpg);
}

.preview_1 .img_2 {
	background-image: url(../sources/images/placeholder.jpg);
}

.preview_1 .img_3 {
	background-image: url(../sources/images/placeholder.jpg);
}

.preview_2 .img_1 {
	background-image: url(../sources/images/placeholder.jpg);
}

.preview_2 .img_2 {
	background-image: url(../sources/images/placeholder.jpg);
}

.preview_2 .img_3 {
	background-image: url(../sources/images/placeholder.jpg);
}








.overlays {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
}

.overlays.top {
	z-index: 50;
}

.overlay_1,
.overlay_2 {
	position: absolute;
	width: 100vw;
	height: 100vh;
}

.overlay_1 {
	background-color: var(--dark);
}

.overlay_2 {
	background-color: var(--light);
}


.overlay_1.out {
	left: 50%;
	width: 0vw;
}

.overlay_1.in {
	left: 0%;
	width: 100vw;
}

.overlay_2.out {
	left: 50%;
	width: 0vw;
}

.overlay_2.in {
	left: 0%;
	width: 100vw;
}








.overlay_1 .images_wrapper,
.overlay_2 .images_wrapper {
	height: 100vh;
	overflow-y: scroll;
}

.overlay_1 .images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(8, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;

	padding: 10vw;
	width: 100vw;
}

.standard .overlay_1 .images {
	height: 280vh;
}



.standard .overlay_1 .images .img_1 {
	grid-area: 1 / 1 / 2 / 2;
}

/* Q */
.standard .overlay_1 .images .img_2 {
	grid-area: 2 / 1 / 4 / 2;
}

/* H */
.standard .overlay_1 .images .img_3 {
	grid-area: 4 / 1 / 5 / 2;
}

/* Q */
.standard .overlay_1 .images .img_4 {
	grid-area: 5 / 1 / 7 / 2;
}

/* H */
.standard .overlay_1 .images .img_5 {
	grid-area: 7 / 1 / 8 / 2;
}

/* Q */
.standard .overlay_1 .images .img_6 {
	grid-area: 8 / 1 / 9 / 2;
}

/* Q */
.standard .overlay_1 .images .img_7 {
	grid-area: 1 / 2 / 4 / 3;
}

/* S+*/
.standard .overlay_1 .images .img_8 {
	grid-area: 4 / 2 / 6 / 3;
}

/* H */
.standard .overlay_1 .images .img_9 {
	grid-area: 6 / 2 / 7 / 3;
}

/* Q */
.standard .overlay_1 .images .img_10 {
	grid-area: 7 / 2 / 9 / 3;
}

/* H */

#location .images .img_1,
#location .images .img_2,
#location .images .img_3,
#location .images .img_4,
#location .images .img_5,
#location .images .img_6,
#location .images .img_7,
#location .images .img_8,
#location .images .img_9,
#location .images .img_10 {
	background-color: black;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.overlay_1 .images .img_1 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_2 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_3 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_4 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_5 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_6 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_7 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_8 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_9 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_1 .images .img_10 {
	background-image: url(../sources/images/placeholder.jpg);
}


.overlay_1 .images .img_6 {
	background-position: center 69%;
}


.mobile .overlay_1 .images {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 25vh 50vh 25vh 50vh 25vh 25vh 50vh 50vh 50vh 50vh;
	/* 400 */
	grid-column-gap: 0px;
	grid-row-gap: 10px;
}









.mobile .overlay_2 {
	transform: translate(0px, 100vh);
}

.overlay_2 .images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(8, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	padding: 10vw;
}

.standard .overlay_2 .images {
	height: 280vh;
}

.standard .overlay_2 .images .img_1 {
	grid-area: 1 / 1 / 3 / 2;
}

.standard .overlay_2 .images .img_2 {
	grid-area: 3 / 1 / 4 / 2;
}

.standard .overlay_2 .images .img_3 {
	grid-area: 4 / 1 / 7 / 2;
}

.standard .overlay_2 .images .img_4 {
	grid-area: 7 / 1 / 9 / 2;
}

.standard .overlay_2 .images .img_5 {
	grid-area: 1 / 2 / 4 / 3;
}

.standard .overlay_2 .images .img_6 {
	grid-area: 4 / 2 / 6 / 3;
}

.standard .overlay_2 .images .img_7 {
	grid-area: 6 / 2 / 9 / 3;
}

.overlay_2 .images .img_1 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_2 .images .img_2 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_2 .images .img_3 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_2 .images .img_4 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_2 .images .img_5 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_2 .images .img_6 {
	background-image: url(../sources/images/placeholder.jpg);
}

.overlay_2 .images .img_7 {
	background-image: url(../sources/images/placeholder.jpg);
}






















a.close {
	position: absolute;
	top: 50px;
	right: 50px;
	height: 40px;
	width: 40px;
	background-size: contain;
	background-repeat: no-repeat;
}

.mobile a.close {
	top: 35px;
	right: 25px;
	height: 30px;
	width: 30px;
}

a.close.light {
	background-image: url(../sources/closed_light.svg);
}

a.close.dark {
	background-image: url(../sources/closed_dark.svg);
}






/*	##########################			LA GEODA			########################## */

#slideshow {
	height: 1600vh;
	background-color: var(--darker);
}

.mobile #slideshow {
	height: 1400vh;
}

#slideshow .slideshow_wrapper {
	position: sticky;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.slides_wrapper {
	display: grid;

	width: 770vw;
	height: 100vh;

	padding: 0 15vw 0 15vw;

	grid-template-columns: 30vw 70vw 90vw 30vw 80vw 90vw 30vw 80vw 60vw repeat(2, 90vw);
	/* 740vw exkl. padding */
	grid-template-rows: repeat(2, 35vh);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	align-items: center;
	align-content: center;

	transform: translateX(calc(100vw - 0%));
}

.mobile .slides_wrapper {
	width: 1950vw;
	height: 85vh;

	padding: 30px 5vw 0 25vw;
	grid-template-columns: 85vw 190vw 190vw 90vw 190vw 190vw 90vw 190vw 190vw repeat(2, 190vw);
	/* 1700vw exkl. padding */
	grid-template-rows: repeat(2, 30vh);
}


.div_1 {
	grid-area: 1 / 1 / 3 / 2;
}

.div_2 {
	grid-area: 1 / 2 / 3 / 3;
}

.div_3 {
	grid-area: 1 / 3 / 3 / 4;
}

.div_4 {
	grid-area: 1 / 4 / 2 / 5;
}

.div_5 {
	grid-area: 2 / 4 / 3 / 5;
}

.div_6 {
	grid-area: 1 / 5 / 3 / 6;
}

.div_7 {
	grid-area: 1 / 6 / 3 / 7;
}

.div_8 {
	grid-area: 1 / 7 / 2 / 8;
}

.div_9 {
	grid-area: 2 / 7 / 3 / 8;
}

.div_10 {
	grid-area: 1 / 8 / 3 / 9;
}

.div_11 {
	grid-area: 1 / 9 / 3 / 10;
}

.div_12 {
	grid-area: 1 / 10 / 3 / 11;
}

.div_13 {
	grid-area: 1 / 11 / 3 / 12;
}


.div_1,
.div_2,
.div_3,
.div_4,
.div_5,
.div_6,
.div_7,
.div_8,
.div_9,
.div_10,
.div_11,
.div_12,
.div_13 {
	position: relative;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.div_1 {
	padding: 4vw;
}

.div_2 {
	background-image: url(../sources/images/slideshow/001.jpeg);
}

.div_3 {
	background-image: url(../sources/images/slideshow/lodge2_kitchen_marble.jpg);
}

.div_4 {}

.div_5 {
	background-image: url(../sources/images/slideshow/003.jpeg);
}

.div_6 {
	background-image: url(../sources/images/slideshow/lodge2_architecture.jpg);
}

.div_7 {
	background-image: url(../sources/images/slideshow/lodge2_dining.jpg);
}

.div_8 {
	background-image: url(../sources/images/slideshow/006.jpeg);
}

.div_9 {
	background-color: var(--darker);
}

.div_10 {
	background-image: url(../sources/images/slideshow/lodge2_terrace_pool.jpg);
}

.div_11 {}

.div_12 {
	background-image: url(../sources/images/slideshow/008.jpeg);
}

.div_13 {
	background-image: url(../sources/images/slideshow/009.jpeg);
}

.slides_wrapper small.title {
	position: absolute;
	left: 0;
	bottom: -30px;
	text-transform: none;
}

.centered_text_content {
	display: flex;
	align-items: center;
	text-align: center;
	padding: 40px;
	justify-content: center;
}

.div_1 h2 {
	margin-top: 0;
}

.div_11 {
	display: flex;
	padding: 10vh 6vw;
	align-items: center;
}

.mobile .div_11 {
	padding: 3vh 10vw;
	font-size: 80%;
	line-height: 19px;
}

.mobile .div_11 h2 {
	margin: 0;
}


.extras {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-column-gap: 50px;
	grid-row-gap: 0px;
}

.mobile .extras {
	grid-column-gap: 20px;
}

.extras_div_1 {
	grid-area: 1 / 1 / 2 / 3;
}

.extras_div_2 {
	grid-area: 2 / 1 / 3 / 2;
}




.extras_div_3 {
	grid-area: 2 / 2 / 3 / 3;
}

.extras_div_2 li,
.extras_div_3 li {
	margin: 0 0 25px 0;
}


.slides_wrapper h2,
.slides_wrapper p {
	display: inline-block;
	color: var(--middle);
}

.slides_wrapper p a {
	display: inline-block;
	color: inherit;
}


.more_docs {
	position: sticky;
	top: 75%;
	left: 0;
	text-align: center;
	z-index: 10;
	opacity: 0;

	-webkit-transition: opacity 500ms ease-in-out 0ms;
	-moz-transition: opacity 500ms ease-in-out 0ms;
	transition: opacity 500ms ease-in-out 0ms;
}

.mobile .more_docs {
	top: 85%;
}

.more_docs.in {
	opacity: 1;
}





/*	##########################			NEARBY		########################## */

#nearby {
	position: relative;
}

.standard #nearby {
	height: 70vh;
    background-color: var(--darker);
}

.standard .legend {
	position: absolute;
	padding: 40px;
	width: 300px;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: var(--darker);
	z-index: 10;
}

.mobile .legend {
	color: var(--light);
	padding: 10vw;
}

.legend ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.legend ul li {
	margin: 0;
	padding: 0 0 13px;
}

.legend ul li div:nth-child(2) {
	padding: 0 0 0 32px;
	line-height: 17px;
}


.legend .polygon_circle {
	display: inline-block;
	width: 16px;
	height: 10px;
	border: 2px solid var(--light);
	background-color: rgb(228 224 212 / 20%);
	transform: rotate(-16deg);
}

.legend .number {
	display: inline-block;
	padding: 0;
	width: 20px;
	border-radius: 50%;
	text-align: center;
	font-size: 10px;
	line-height: 22px;
	opacity: 0.75;
}

.mobile .legend .number {
	color: var(--light);
}

.legend .name {
	margin: 0 0 0 12px;
	vertical-align: -2px;
}

.legend .specs {
	font-size: 80%;
}

.legend .icon {
	display: inline-block;
	width: 11px;
	height: 11px;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: -1px;
}

.legend .icon.walk {
	background-image: url(../sources/icons/icons_walk_2.svg);
}

.legend .icon.drive {
	background-image: url(../sources/icons/icons_car.svg);
}


.legend .seperator {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}





/* GOOGLE MAPS API */
#map {
	height: 70vh;
}

.standard #map {
	margin-left: 300px;
}

.mobile #map {
	height: 50vh;
}

.infowindow-content {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #333;
}

.custom-marker-label {
	display: block;
	width: 31px;
	height: 31px;
	padding: 9px 0 0 0;
	text-align: center;
	border-radius: 50%;
}

.lodge-label {
	color: #f4e7b2 !important;
	white-space: nowrap;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7);
}

.typ_MAIN {
	background-color: var(--light);
	color: var(--dark);
}

.typ_RES {
	color: #e85f5f !important;
}

.typ_MAR {
	color: #fffa6c !important;
}

.typ_ATM {
	color: #90e97a !important;
}

.red {
	color: #e85f5f !important;
}

.green {
	color: #90e97a !important;
}

.yellow {
	color: #fffa6c !important;
}



/*	##########################		FLY BY		########################## */


#flyby {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: var(--darker);
	overflow: hidden;
}

.mobile #flyby {
	height: 100vh;
	min-height: 420px;
}

#flyby .parallax-container {
	position: relative;
	height: 100%;
	overflow: hidden;
}

#flyby .block_1,
#flyby .block_2 {
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	will-change: transform;
}

#flyby .block_1 {
	top: 0px;
	width: 100vw;
	height: 400px;
	background-image: url(../sources/logos/pj_portals.svg);
}

#flyby .block_2 {
	top: 188px;
	width: 100vw;
	height: 400px;
	background-image: url(../sources/logos/pj_jungle.svg);
	filter: drop-shadow(39px 13px 24px rgb(0 0 0 / 0.7));
}

.mobile #flyby .block_1,
.mobile #flyby .block_2 {
	width: 150vw;
}

.mobile #flyby .block_1 {
	top: 80px;
}

/*	##########################		APARTMENTS		########################## */

#apartments {
	background-color: var(--darker);
	padding: clamp(60px, 8vw, 140px) clamp(24px, 4vw, 60px);
}

.standard #options {
	height: 100vh;
}



/*

.parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 30px repeat(3, auto);
	grid-column-gap: 10px;
	grid-row-gap: 0px;
}




*/

.standard .examples {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto repeat(3, auto);
	grid-column-gap: var(--main_gap);
	grid-row-gap: 0px;
}

/* Horizontal padding lives on #apartments, not here: a max-width box with its
   own vw padding shrinks as the viewport grows. */
.examples {
	max-width: 1500px;
	margin: 0 auto;
}

.examples .head {
	grid-area: 1 / 1 / 2 / 4;
}

.examples .example_1 {
	grid-area: 2 / 1 / 3 / 2;
}

.examples .example_2 {
	grid-area: 2 / 2 / 3 / 3;
}

.examples .example_3 {
	grid-area: 2 / 3 / 3 / 4;
}

.examples .poolarea {
	grid-area: 3 / 1 / 4 / 4;
}

.examples .foot {
	grid-area: 4 / 1 / 5 / 4;
}

.examples .head {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-align: center;
	padding: 0 0 30px;
}


.examples .example_1,
.examples .example_2,
.examples .example_3 {
	position: relative;
}


.mobile .examples .example_1,
.mobile .examples .example_2,
.mobile .examples .example_3 {
	margin: 0 0 10px;
}




.example_1 .image,
.example_2 .image,
.example_3 .image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.example_1 .image {
	background-image: url(../sources/images/object/locations_lodge_1.jpeg);
}

.example_2 .image {
	background-image: url(../sources/images/object/locations_lodge_2.jpeg);
}

.example_3 .image {
	background-image: url(../sources/images/object/locations_lodge_3.jpeg);
}

.mobile .examples .text {
	padding: 20px 0px 50px 0px;
	background-color: transparent;
}

.poolarea {
	display: none;
	/* display: flex; */
	margin: 50px 0 0 0;
}

.mobile .poolarea {
	margin: 10px 0 0 0;
}

.poolarea .image {
	height: 300px;
	background-image: url(../sources/images/object/02-PATIO.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}


.poolarea .image {
	height: 100%;
}

.poolarea .image,
.poolarea .text {
	width: 50%;
}

.mobile .poolarea {
	flex-direction: column;
}

.mobile .poolarea .image,
.mobile .poolarea .text {
	width: 100%;
}

.mobile .poolarea .image {
	height: 220px;
}

.examples .text {
	padding: 30px 35px 40px;
	background-color: var(--content_bg);
	font-size: 15px;
	line-height: 26px;
}

.examples .text .title {
	font-size: 24px;
	line-height: 32px;
	padding: 0 0 15px;
}

/* 170px clears the longest label in all three languages
   (ES "Plazas de aparcamiento:" needs 161px); narrower and it wraps. */
.examples span.prop {
	width: 170px;
	display: inline-block;
	font-size: 88%;
}

.examples span.prop_2 {
	font-size: 88%;
}

/* `.standard` is assigned by user-agent, not viewport width (global.js →
   initiate_operator), so iPad portrait and narrow desktop windows also get the
   3-column grid. Below ~1150px the columns are too narrow for a 170px label
   plus its value, so stack them instead. */
@media (max-width: 1150px) {
	.standard .examples {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.standard .examples .head,
	.standard .examples .example_1,
	.standard .examples .example_2,
	.standard .examples .example_3,
	.standard .examples .poolarea,
	.standard .examples .foot {
		grid-area: auto;
	}

	.standard .examples .example_1,
	.standard .examples .example_2,
	.standard .examples .example_3 {
		margin: 0 0 var(--main_gap);
	}

	.standard .example_1 .image,
	.standard .example_2 .image,
	.standard .example_3 .image {
		aspect-ratio: 16 / 9;
		max-height: 420px;
	}
}

.examples .foot {
	text-align: center;
}

.examples .foot .cta {
	margin: 100px 0 100px 0;
}


.examples .icon_pdf {
	display: inline-block;
	margin: 0 10px 0 0;
	width: 25px;
	height: 25px;
	background-image: url(../sources/icons/icons_pdf.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transform: translate(0px, 6px);
}







.render_disclaimer {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 10vw 60px;
	color: var(--middle);
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}


/*	##########################			FOOTER		########################## */

#footer {
	display: flex;
	padding: 10vh 10vw;
	background-color: var(--darker);
	align-items: center;
	justify-content: center;
	color: var(--light);
	text-align: center;
	font-size: 11px;
	min-height: 100vh;
}

#footer .footer_logo {
	display: inline-block;
	height: 82px;
	width: 60px;
	background-image: url(../sources/logo_light.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#footer h4 {
	font-size: 13px;
}

#footer a.social {
	display: inline-block;
	margin: 0 10px;

	width: 18px;
	height: 18px;

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#footer a.social.facebook {
	background-image: url(../sources/icons/icons_facebook.svg);
}

#footer a.social.instagram {
	background-image: url(../sources/icons/icons_instagram.svg);
}

#footer a.social.youtube {
	background-image: url(../sources/icons/icons_youtube.svg);
}

#footer a.social.linkedin {
	background-image: url(../sources/icons/icons_linkedin.svg);
}







#video {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #000;
}

#video .video_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	#video video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		transform: translate(-50%, -50%);
		object-fit: cover;
	}