/* reset styles */
html{line-height:1.5;-webkit-text-size-adjust:100%;width:100%;height:100%;padding:0}body{margin:0;width:100%;height:100%;padding:0}main{display:block}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.5;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}
/* reset styles */

/* Scrollbars */
::-webkit-scrollbar {
	background-color: rgba(255,255,255,0.3);
	width: 5px;
	height: 5px;
}
::-webkit-scrollbar-thumb {
	background-color:  rgba(255,255,255,0.5);
}
/* Scrollbars */
.ggskin,
.tippy-content {
	font-family: var(--fontNormal);
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 1rem;
}

.ggskin_text>div {
	white-space: normal !important;
	font-size: var(--fontSize) !important;
}
.ggskin_text.guideText>div{
	white-space: pre-line !important;
}


.blur {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.hide, .hidden {
	display: none !important;
}


/* Buttons */
.buttonPrimary {
	background-color: var(--colorBlue) !important;
	transition: var(--buttonTransition) !important;
	cursor: pointer !important;
	border: solid 1px var(--colorWhite) !important;
	color: white !important;
	padding: 0.7rem 1rem !important;
}

.buttonPrimary>div {
	pointer-events: none !important;
	user-select: none !important;
}

body:not(.mobile) .buttonPrimary:hover, body:not(.mobile) .buttonPrimary:focus {
	background-color: var(--colorBlueLight) !important;
}

.buttonSecondary {
	background-color: var(--colorBlueDark) !important;
	color: white !important;
	border: none !important;
	padding: 5px 15px !important;
	cursor: pointer !important;
	transition: var(--buttonTransition) !important;
}

.buttonSecondary>div {
	pointer-events: none !important;
}

body:not(.mobile) .buttonSecondary:hover, body:not(.mobile) .buttonSecondary:focus {
	background-color: var(--colorYellow) !important;
	color: black !important;
}

.buttonControl {
	background-color: var(--colorBlue) !important;
	color: white !important;
	border: solid 1px var(--colorWhite50) !important;
	cursor: pointer !important;
	transition: var(--buttonTransition) !important;
	box-sizing: border-box !important;
}

.buttonControl>div {
	pointer-events: none !important;
}

body:not(.mobile) .buttonControl:hover, body:not(.mobile) .buttonControl:focus {
	background-color: var(--colorBlueLight) !important;
}

body:not(.mobile) .buttonShare:hover, body:not(.mobile) .buttonShare:focus {
	transition: var(--buttonTransition) !important;
}

body:not(.mobile) .buttonShare:hover, body:not(.mobile) .buttonShare:focus {
	background-color: var(--colorYellow) !important;
}

body:not(.mobile) .buttonShare:hover img, body:not(.mobile) .buttonShare:focus img {
	filter: invert(100%);
}

body.mobile.iphone .btnFullscreen{
	display: none !important;
}
.buttonWhite{
	background-color: #fff !important;
	border: none !important;
}
body:not(.mobile) .buttonWhite:hover > div, body:not(.mobile) .buttonWhite:focus > div{
	filter: invert(1);
}
/* Buttons */







/* Loader */
.languagesHeader > div, .gateText > div{
	font-family: var(--fontHeader) !important;
	font-weight: 400 !important;
	color:#fff !important;
	font-size: min(48px, 8vmin) !important;
}
.languagesContainerLogo{
	height: 30vh !important;
    left: 50% !important;
    top: 50% !important;
    width: min(258px, 40vmin) !important;
    transform: translate(-50%, -50%) !important;
}
.languagesContainerBlueBg{
    transform-origin: top left !important;
    transform: rotate(-10deg) scale(1.5) translateX(0%);
    opacity: 1;
    background-color: #255799d0;
    -webkit-mix-blend-mode: multiply;
    mix-blend-mode: multiply;
}
.languagesContainerBlueBlur{
	transform-origin: top left !important;
    transform: rotate(-10deg) scale(1.5) translateX(0%);
    opacity: 1;
    background-color: rgba(255,255,255,0.1);
	-webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* .loaderBg {
	background-image: url(skin-img/loader.jpg) !important;
	background-position: center !important;
	background-size: cover !important;
}
.loaderBg{
	-webkit-animation: scale-up-center 10s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate backwards;
	animation: scale-up-center 10s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate backwards;
} */

.languagesContainerCenter{
	display: flex !important;
	justify-content: center;
    align-items: center;
}
.languagesContainerCenter>div{
	position: relative !important;
	width: auto !important;
    height: auto !important;
}
.langButtonEn, .langButtonEs{
	padding:1rem 2rem !important;
	margin: 0 0.3rem;
}
@media only screen and (max-aspect-ratio: 3/4) {
	.languagesContainerRight{
		width:70% !important;
	}
}
@media only screen and (max-width: 1023px) {
	.languagesContainerRight{
		width:700px !important;
		max-width: 100% !important;
	}
}
@media only screen and (max-width: 700px) {
	.languagesContainerBlueBg{
		transform: rotate(0deg) scale(1);
	}
}


/* Gates */
.gatesPermeable *{
	pointer-events: none !important;
}
.gatesWrap{
	display: flex !important;
	flex-direction: row;
    flex-wrap: nowrap;
}
@media only screen and (max-aspect-ratio: 3/4) {
	.gatesWrap{
		flex-direction: column;
	}
}
.gate{
	position: relative !important;
	top:0 !important; left:0 !important; bottom:0 !important; right: 0 !important;
	width: 100% !important;
	background-image: url(skin-img/gate01.jpg);
	background-position: center;
	background-size: cover;
}
.gate02{
	background-image: url(skin-img/gate02.jpg);
}
.gateText{
	background: rgb(37,87,153) !important;
	background: linear-gradient(0deg, rgba(37,87,153,0.75) 0%, rgba(37,87,153,0) 60%) !important;
	transition: all 0.5s ease;
}
.gateText hr{
width:100px;
height: 2px;
background-color: #fff;
border: none;
}
.gateText > div {
	transition: all 0.5s ease;
	top: calc(50% + 50px) !important;
	width: min(700px, 100%) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
body:not(.mobile) .gateText:hover, body:not(.mobile) .gateText:focus{
	background-color: #042B5F40 !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
body:not(.mobile) .gateText:hover > div, body:not(.mobile) .gateText:focus > div {
	top: calc(50% + 0px) !important
}
body:not(.mobile) .gateText:focus > div {
	color: #FECC07 !important;
}
.gateText > div > div{
	font-family: var(--fontNormal);
	font-size: 1.5rem;
    max-width: 400px;
    margin: 0 auto;
	transition: all 0.5s ease;
	transform: translateY(50px);
	opacity: 0;
}
body:not(.mobile) .gateText:hover > div > div, body:not(.mobile) .gateText:focus > div > div{
	transform: translateY(0);
	opacity: 1;
}
body:not(.mobile) .gateText:focus > div > div{
	color: #FECC07 !important;
}
/* Loader */







/* Top Right Buttons */
.topRightButtonsContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: flex-start;
}

.topRightButtonsContainer>div {
	position: relative !important;
	height: auto !important;
	margin: 0 0 0 10px !important;
}

.topRightButtonsContainer div {
	height: auto !important;
}
/* Top Right Buttons */
















/* Share */
.shareContainer {
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	height: auto !important;
	bottom: 48px !important;
    left: -1px !important;
	top: auto !important;
	z-index: 1 !important;
}

.shareContainer > div {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	margin-top: -1px !important;
}
.socialFb{
	background-color: #0165E1 !important;
}
.socialTwitter{
	background-color: #000000 !important;
}
.socialYoutube{
	background-color: #FF0000 !important;
}
.socialInsta{
	background-color: #E1306C !important;
}
.socialLinkedin{
	background-color: #0A66C2 !important;
}

/* Share */



/* Tooltips */
.tippy-content {
	padding: 10px 20px !important;
	font-weight: 300;
	font-size: var(--tooltipFontSize);
}

/* Tooltips */






/* Hotspots */
.hotspot{
	border:none !important;
	box-shadow: 0 0 0 2px #ffffff80;
}
body:not(.mobile) .hotspot:hover, body:not(.mobile) .hotspot:focus {
	box-shadow: none;
}
body.hideHotspots .hotspot{
	display: none !important;
}
/* Hotspots */








/* Popup */
.htTitle{
	font-family: var(--fontHeader);
    margin-bottom: 0.3em;
    font-size: 2em;
    font-weight: 400;
}
.popupText{
	max-height: 90% !important;
	overflow-y: auto !important;
	/* background-color: #255799 !important;
	border: solid 1px #ffffff; */
}
.htDescription{
	white-space: pre-line !important;
}
.popupBg{
	/* border: solid 1px var(--colorWhite30) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px); */
}
@media only screen and (max-width: 800px) {
	.popupText{
		width:100% !important;
		left:0% !important;
	}
}
@media (max-width: 600px), (max-height: 600px) {
	.popupVideo{
		width: 100% !important;
		height: 100% !important;
		top:0 !important;
		left:0 !important;
	}
}

.htImage{
	background-image: url(skin-img/spinner.svg);
	background-position: center;
	background-repeat: no-repeat;
	min-width: 100px;
	min-height: 100px;
	display: block;
	margin:0 auto;
}
.htImage img{
	width: 100%;
}
/* Popup */


/* Guide */
.guideImage{
	box-shadow: 0 0 0 4px #ffffff80;
}
.guideText{
	font-size: 0.9em;
}
.guideText .h2{
	margin:0 0 0.5rem 0;
	font-size: 1.3em;
	line-height: 1.0;
	font-weight: 400;
}
/* @supports not (font-family: Calibri) {
    .guideText .h2{
        font-size: 1.2em;
    }
} */
.guideText>div::-webkit-scrollbar {
	background-color: rgba(0,0,0,0.3) !important;

}
.guideText>div::-webkit-scrollbar-thumb {
	background-color:  rgba(0,0,0,0.5) !important;
}
/* Guide */

/* AudioPlayer at hotspot */
.htSound{
	height: 40px;
	width: 40px;
	background-image: var(--playIconWhite);
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--colorBlue);
	border:solid 1px var(--colorWhite);
	cursor:pointer;
	margin: 10px 0;
	transition: all 0.3s ease;
}
body:not(.mobile) .htSound:hover, body:not(.mobile) .htSound:focus{
	background-color: var(--colorBlueLight);
}
.htSoundPlaying{
	background-image: var(--pauseIconWhite);
}

/* AudioPlayer at hotspot */




/* Menu */
.menuContainerHide{
	display: none;
}
.menuBottom{
	border-top:solid 1px #ffffff20 !important;
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
    justify-content: space-evenly;
}
.menuBottom>div{
	position: relative !important;
	top:0 !important;
	left:0 !important;
	bottom:0 !important;
	right: 0 !important;
}
.menuBg{
	box-shadow: 20px 0 30px #00000040;
}
.nodeTitle, .menuCategoryName{
	transition: all 0.3s ease !important;
}
.nodeTitleHovered, .menuCategoryNameHovered{
	transition: all 0s ease !important;
}
.nodeImage{
	overflow: hidden;
	filter: grayscale(1);
}
.nodeImage > img{
	transition: all 0.3s ease;
}
.nodeImageHovered{
	filter: grayscale(0);
	box-shadow: 0 0 0 1px #ffffff;
}
.nodeImageHovered > img{
	transform: scale(1.1) !important;
}
.nodeImageActive{
	filter: grayscale(0);
	box-shadow: 0 0 0 3px #ffffff80;
}
.menuLocationName>div{
	font-family: var(--fontHeader) !important;
	font-size: 1.1rem !important;
	padding: 0 1rem !important;
}
/* Menu */






/* Mobile */

/* vertical OR horizontal */
@media (max-width: 600px),
(max-height: 600px) {}

/* vertical & :horizontal */


/* Vertical */
@media only screen and (max-width: 600px) {}

/* Vertical */

/* Horizontal */
@media only screen and (max-height: 600px) {}

/* Horizontal */

/* Mobile */

.delay {
	transition-delay: 0.3s !important;
}









@-webkit-keyframes scale-up-center {
	0% {
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
		-moz-transform: scale(1.0);
		-ms-transform: scale(1.0);
		-o-transform: scale(1.0);
	}

	100% {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
	}
}

@keyframes scale-up-center {
	0% {
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
		-moz-transform: scale(1.0);
		-ms-transform: scale(1.0);
		-o-transform: scale(1.0);
	}

	100% {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
	}
}