/* ---Maps --------------- */
#MS_popupOverlayCont {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;

	pointer-events: none;
}
.MS_popupOverlay {
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.3s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;

	pointer-events: visible;
}
.MS_popupDiv {
	font-size: 3vh;
	font-weight: bold;
	color: rgb(255,217,102);
	text-align: center;
	position: relative;

	background-image: linear-gradient(to right, rgb(136, 100, 0), rgb(79, 56, 0));
	border: solid 0.3em rgb(191, 144, 0);
	border-radius: 2em;
	width: 50vh;
	max-width: 90%;
	padding: 1em 1.5em;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.MS_popupDiv > name {
	font-size: 1.5em;
	line-height: 1.2em;
	width: 90%;
}
.MS_popupDiv > hr {
	width: 100%;
	border-width: 0 0 0.2em 0;
	margin: 0.3em 0 0.5em 0;
	border-style: solid;
	border-color: rgb(255,230,153);
}

.MS_popupDiv_requirements {
	display: flex;
	justify-content: space-evenly;
}
.MS_popupDiv_requirements > div {
	max-width: 20%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.MS_popupDiv_requirements > div > img {
	width: 100%;
	object-fit: fill;
	filter: drop-shadow(0 0 1vh rgb(0, 0, 0));
}
.MS_popupDiv_requirements > div > qty {
	padding-top: 0.2em;
}

.MS_popupDiv_buyDiv {
	padding-top: 0.2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.MS_popupDiv_buyDiv > div {
	border: solid 0.2em rgb(191,144,0);
	background-color: rgb(255,230,153);
	border-radius: 20%;
	width: 4em;
	padding: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;

	cursor: pointer;
	transition: all 0.1s ease-in-out;
}
.MS_popupDiv_buyDiv > div > img {
	width: 100%;
	object-fit: fill;
	filter: drop-shadow(0 200vh 0 rgb(191,144,0));
	transform: translateY(-200vh);
}
.MS_popupDiv_buyDiv > div:hover {
	transform: translate(0.25vh, -0.25vh) rotate(2deg);
	box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5);
}
.MS_popupDiv_buyDiv > desc {
	padding-top: 0.2em;
	padding-top: 0.3em;
}

.MS_popupDiv_buyDiv.locked > div {
	cursor: default;
	background-color: rgb(224, 224, 224);
	border-color: rgb(95, 95, 94);
}
.MS_popupDiv_buyDiv.locked > div > img {
	filter: drop-shadow(0 200vh 0 rgb(95, 95, 94));
}
.MS_popupDiv_buyDiv.locked > div:hover {
	transform: unset;
	box-shadow: unset;
}

.MS_popupDiv > exit {
	position: absolute;
	background-image: linear-gradient(to right, rgb(113, 81, 0), rgb(67, 48, 0));
	border: solid 0.3em rgb(191, 144, 0);
	top: -1.5em;
	right: -1.5em;
	width: 3.2em;
	aspect-ratio: 1/1;
	border-radius: 50%;
	transition: all 0.1s ease-in-out;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
}
.MS_popupDiv > exit > img {
	width: 70%;
	object-fit: fill;
	filter: brightness(0) saturate(100%) invert(47%) sepia(36%) saturate(2032%) hue-rotate(23deg) brightness(103%) contrast(101%);
	transform: rotate(45deg);
}
.MS_popupDiv > exit:hover {
	transform: translate(0.25vh, -0.25vh) rotate(6deg);
	box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5);
}

.MS_mainContainer {
	position: relative;
	width: 100%;
	max-width: 180vh;
	max-height: 100%;
}
.MS_mainContainer > .MS_mainImage {
	width: 100%;
}
.MS_mainContainer > .MS_hoverImage,
.MS_mainContainer > .MS_triggerImage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.MS_mainContainer > .MS_triggerImage {
	cursor: pointer;
}
.MS_mainContainer > .MS_hoverImage {
	pointer-events: none;
	z-index: 2;
}

#MS_mapContainer {
	position: relative;
	width: 100%;
	max-width: 180vh;
	max-height: 100%;
	display: table; /* center */
}
#MS_mapContainer > .MS_mainImage {
	width: 100%;
}
#MS_mapContainer > .IMGa {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
#MS_mapContainer > .IMGa.hoverTrigger {
	cursor: pointer;
}
#MS_mapContainer > .IMGa.hoverInfo {
	pointer-events: none;
	z-index: 2;
}

.MS_divAreasCont {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.eventButton { /* right-bottom corner */
	position: absolute;
	bottom: -4vh;
	right: 15vh;
	height: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
}

.eventButton > img {
	height: 100%;
	filter: drop-shadow(0 0 2vh rgb(0, 0, 0));
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
}

.eventButton > img:hover {
	transform: translateX(-0.5vh) translateY(-0.5vh);
	filter: drop-shadow(0 0 2vh rgb(255, 255, 255));
}

.eventDeco { /* left-bottom corner */
	position: absolute;
	bottom: -5vh;
	right: 15vh;
	height: 50%;
	justify-content: center;
	align-items: center;
	z-index: 5;
	cursor: pointer;
}

.eventDeco > img {
	height: 100%;
	transition: transform 0.3s ease-in-out;
}

.eventDeco > img:hover {
	transform: translateX(0.5vh) translateY(-0.5vh);
	filter: drop-shadow(0 0 2vh rgb(255, 255, 255));
}

.pancarte {
	position: absolute;
	height: 15vh;
	overflow: hidden;
	bottom: -4vh;
	right: 0;
	z-index: 5;
}

.pancarte img {
	height: 15vh;
	object-fit: contain;
}

.pancarte p {
	position: absolute;
	top: -4vh;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.9vh;
	font-weight: bold;
	color: white;
	text-shadow: 0 0 0.2em black;
	text-align: center;
	line-height: 1.2em;
}


/* ---------------------------------- DISCOVERIES --------------------------------------- */

.DPS_discoveryPortalCont {
	--DPS_width: 23vh;
	--DPS_height: calc(var(--DPS_width) / calc(562/960)); /* image resolution. hack :D */

	--DPS_sideColor: #343e26;

	position: relative;
	width: var(--DPS_width);
	height: var(--DPS_height);
	/* overflow: hidden; */

	display: flex;
	justify-content: center;
	align-items: center;

	cursor: pointer;

	transform-style: preserve-3d;

	transition: box-shadow 0.5s ease-in-out;
}
.DPS_discoveryPortalCont:hover {
	box-shadow: 0 0 5vh 2vh rgb(255, 255, 255);
}

.DPS_front {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform: translateZ(1vh);

	display: flex;
	justify-content: center;
}

.DPS_title {
	position: absolute;
	bottom: 6%;
	font-size: 1.6vh;
	line-height: 1;
	font-weight: bold;
	color: black;
	text-shadow: 0 0 0.2em white;
}

.DPS_left, .DPS_right, .DPS_top, .DPS_bottom {
	position: absolute;
	background-color: var(--DPS_sideColor);

}
.DPS_left, .DPS_right {
	width: 2vh;
	height: 100%;
}
.DPS_left {
	transform:  rotateY(-90deg) translateZ(calc(var(--DPS_width) / 2));
}
.DPS_right {
	transform:  rotateY(90deg) translateZ(calc(var(--DPS_width) / 2));
}
.DPS_top,
.DPS_bottom {
	width: 100%;
	height: 2vh;
}
.DPS_top {
	transform:  rotateX(90deg) translateZ(calc(var(--DPS_height) / 2));
}
.DPS_bottom {
	transform:  rotateX(-90deg) translateZ(calc(var(--DPS_height) / 2));
}

.DPS_discoveryPortalCont > .DPS_front > img.DPS_paralax_ref {
	width: 100%;
	opacity: 1;
}
.DPS_discoveryPortalCont > .DPS_front > img.DPS_paralax {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* object-fit: cover; */
}

.DPS_discoveryPortalCont > .DPS_front > img.DPS_background {
	height: 100%;
	/* object-fit: cover; */
	position: absolute;
	top: 0;
	left: 0;
}

.DPS_beam {
	/* --DPS_beam_size: 1vh; */ /* set in JS */
	position: absolute;
	width: var(--DPS_beam_size);
	/* height: calc(var(--DPS_beam_size) * 30); */
	background-color: white;
	border-radius: 1vh;
	/* transform */ /* set in JS */

	filter: blur(var(--DPS_beam_size));

	bottom: 0;

	opacity: 0;

	animation: DPS_beam 3s ease-in-out;

	pointer-events: none;
}
@keyframes DPS_beam {
	0% {
		height: var(--DPS_beam_size);
		opacity: 0;
		bottom: 0;
	}
	20% {
		height: calc(var(--DPS_beam_size) * 30);
		opacity: 1;
	}
	80% {
		height: calc(var(--DPS_beam_size) * 30);
	}
	100% {
		opacity: 0;
		bottom: 5vh;
	}
}


.MS_mapOverlay {
	position: absolute;
	filter: brightness(3);
	pointer-events: none;
	z-index: 100000;
	width: 100%;
}