/* MAP MAIN */

.app {
	position: relative;
	width: 100%;
}

.main__map {
	position: absolute;
		top: 0;
		left: 0;

	width: 100vw;
	height: 100vh;

	overflow: hidden;
}

.map__base {
	position: absolute;
		left: 0;
		top: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;
}

.map__base--grid {
	position: absolute;
		top: 0;
		left: 0;
	
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: url(_images/pattern-grid-dashed.svg);
	background-size: 3.2vw;
	background-position: center;
	pointer-events: none;
	z-index: 1;
}

.map__base--grid:before, .map__base--grid:after {
	content: "";
	position: absolute;
		top: 0;

	width: 6.4vw;
	height: 100%;

	/*background-image: linear-gradient(to right, rgba(248,238,213, 1), rgba(248,238,213,1) );*/
}

.map__base--grid:before {
		left: 0;
	background-image: linear-gradient(to right, rgba(248,238,213, 1), rgba(248,238,213,0) );
}

.map__base--grid:after {
	right: 0;
	background-image: linear-gradient(to right, rgba(248,238,213, 0), rgba(248,238,213,1) );
}

.map__base--object--binocular {
	position: absolute;
	left: 6.4vw;
	top: 50%;
	width: calc(100% - 12.8vw);
	display: flex;
	opacity: 0.4;
	transform: translateY(-50%);

	filter: blur(10px);
	pointer-events: none;
}

.map__base--object--binocular img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.draggable__map--instruction {
	position: absolute;
		top: 50%;
		left: 50%;

	font-family: 'Editorial New';
	font-size: 1.4vw;
	line-height: 1.8vw;
	letter-spacing: 0.02em;

	text-align: center;

	padding: 2.4vw;

	transform: translate(-50%, -50%);

	z-index: 8;

	box-shadow: 0.6vw 0.6vw 0 rgb(0 0 0 / 20%);
}

.draggable__map--instruction::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.8vw;
	background-color: var(--black);
}

/* HEADER MAP */

.map__header {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 4.8vw;

	z-index: 20;
}

.map__header--margin {
	position: relative;
	width: calc(100% - 12.8vw);
	margin: 0 6.4vw;

	display: flex;
	justify-content: space-between;
}

.map__header--margin:before, .map__header--margin:after {
	content: "";
	position: absolute;
		left: 0;
		bottom: 0px;

	width: 100%;
	height: 1px;

	background: var(--black);
	opacity: 0.4;
}

.map__header--margin:after {
	bottom: 6px;
	opacity: 0.3;
}

.map__header--logo {
	width: 30%;
	position: relative;
	height: 4.8vw;
}

.map__header--logo img {
	position: absolute;
		top: 1.2vw;
		left: 0;

	width: 2vw;
	height: auto;
}

.map__header--obj-airballoon {
	position: absolute;
		left: -0.4vw;
		top: -0.2vw;

	width: 9.6vw;
	height: 7.2vw;

	background: url('_images/airballoon--small.png');
	background-size: 100%;
	background-position: center bottom;
	background-repeat: no-repeat;

	transform: rotate(8deg);

	pointer-events: none;
}

.map__header--ESC-name {
	position: relative;
	width: 30%;
	padding-top: 0.8vw;

	font-family: 'Editorial New Heavy';
	font-size: 1.2vw;
	line-height: 1.4vw;
	letter-spacing: -0.04em;

	text-align: center;
}

.map__header--menu {
	width: calc(30% + 0.4vw);
	/*width: calc(30% + 0vw);*/
	position: relative;
	text-align: right;

	padding-top: 1.2vw;

	margin-right: -0.4vw;
}

/* NAV MAP */

.map__nav {
	position: absolute;
		left: 0;
		bottom: 0px;

	width: 100%;
	height: 4.8vw;

	font-family: 'Editorial New';

	z-index: 20;
}

.map__nav--margin {
	position: relative;
	width: calc(100% - 12.8vw);
	margin: 0 6.4vw;

	display: flex;
}

.map__nav--margin:before {
	content: "";
	position: absolute;
		left: 0;
		top: 0px;

	width: 100%;
	height: 1px;

	background: var(--black);
	opacity: 0.4;
}

.map__nav--margin:after {
	content: "";
	position: absolute;
		left: 0;
		top: 4px;

	width: 100%;
	height: 1px;

	background-image: linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%);
	background-size: 10px 8px;
	opacity: 0.2;
}

.map__nav--process, .map__nav--profile, .map__nav--layers, .map__nav--controls {
	padding: 0.8vw 0.8vw;
	width: calc(25% - 1.6vw);

	font-size: 1vw;
}

.map__nav--controls {
	width: 50%;
}

.controls--zoomin, .controls--zoomout {
	position: absolute;
		left: calc(50% - 1.6vw);
		top: -0.8vw;

	width: 3.2vw;
	height: 3.2vw;

	background-image: url('_images/obj_wheel.png');
	background-size: 100%;
	background-position: center;

	transform: translateX(-4vw);

	cursor: pointer;
}

.controls--zoomout {
	transform: translateX(4vw);
}

.controls--zoomin span, .controls--zoomout span {
	position: absolute;
		top: 50%;
		left: 50%;

	width: 1.6vw;
	height: 1.6vw;

	background: var(--white);
	border-radius: 50%;

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

	font-size: 1.4vw;
	font-weight: bold;

	transform: translate(-50%,-50%);
}

.controls--reset {
	position: absolute;
		top: 0.8vw;
		left: calc(50% - 1.6vw);

	width: 3.2vw;
	height: 1.4vw;

	text-align: center;

	background-image: url('_images/obj_wheel.png');
	background-size: 100%;
	background-position: top center;

	border-bottom: 1px solid var(--black);

	cursor: pointer;
}

.controls--reset span {
	position: absolute;
		top: 1.4vw;
		left: 0;

	width: 100%;
	text-align: center;

	text-transform: uppercase;
	font-family: freight-sans-pro;
	font-size: 12px;
}

.map__nav--process {
	position: relative;
	width: 25%;
	padding-left: 0;

	border-right: 1px solid rgba(0, 0, 0, 0.4);

	display: flex;
}

.user__process--label {
	position: relative;
	width: calc(50% - 0.8vw);
	padding-left: 0.8vw;
	width: max-content;
}

.user__process {
	position: relative;
	width: calc(50% - 1.6vw);

	padding-top: 0.2vw;
}

.user__process--bar {
	position: relative;
	width: 100%;
	height: 0.8vw;

	border: 1px solid var(--backx);
	border-bottom: 0;
	border-right: 0;

	background: white;
}

.proces__bar {
	position: absolute;
	width: 0%;
	height: 100%;

	background-color: var(--black);
}

.map__nav--profile {
	position: relative;
	text-align: right;
	/*width: 25%;*/

	/*border-right: 1px solid rgba(0, 0, 0, 0.4);*/
}

.map__nav--layers {
	position: relative;
	/*width: 25%;*/

	border-right: 1px solid rgba(0, 0, 0, 0.4);
}

.map__nav--controls {
	position: relative;
	/*width: 25%;*/
	border-right: 1px solid rgba(0, 0, 0, 0.4);
}

.help__notification {
	position: absolute;
		bottom: 120%;

	padding: 1.6vw;

	transition-duration: 0.4s;
}

.help__notification--01 {
	left: 10%;
}

.help__notification--02 {
	left: 50%;
}

.help__notification--03 {
	right: 10%;
}

.help__notification--hide {
	transform: translateY(100%) scale(0);
}

.obj__wheel {
	position: absolute;
		left: 50%;
		top: -1.6vw;

	width: 14vw;
	height: 6.4vw;

	background: url('_images/obj_wheel.png') no-repeat;
	background-size: 100%;

	transform: translateX(-50%);
}

/* WORLDs */

.panel__world_elm {
	position: absolute;
		top: 50%;
		right: -50vw;

	width: 40vw;
	/*height: 30vw;*/

	background-color: white;

	z-index: 6;
	transition-duration: 0.6s;

	transform: translateY(-50%);

	box-shadow: 0.6vw 0.6vw 0 rgb(0 0 0 / 20%);
}

.panel__world_elm:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.8vw;
	background-color: var(--black);
}

.panel__world_elm--margin {
	position: relative;
	width: calc(100% - 4.8vw);
	padding: 2.4vw;
}

.panel__world_elm--title {
	font-family: 'Editorial New';
	font-size: 2.2vw;
	line-height: 3vw;
	font-weight: normal;
	letter-spacing: -0.04em;

	text-align: center;
}

.panel__world_elm--about {
	position: relative;
	width: 100%;

	margin: 1.6vw 0;
	padding: 1.6vw 0;



	border-top: 1px solid var(--black);
    max-height: 32vh;
    overflow: scroll;
}

.panel__world_elm--about span {
	font-size: 1vw;
	line-height: 1.2vw;
	text-transform: uppercase;
	letter-spacing: 0.1em;

	padding-bottom: 0.8vw;

	opacity: 0.8;

	display: block;
}

.panel__world_elm--cta {
	position: relative;
	width: 100%;

	text-align: center;
}

.panel__world_elm--cta:before {
	content: "";
	position: absolute;
		top: 50%;
		left: 0;

	width: 100%;
	height: 1px;

	background-color: var(--black);
	opacity: 0.4;
}

.inview {
	right: 6.4vw;
}

.obj_world {
	position: absolute;

	padding: 0vw;
	width: 20vw;
	height: 20vw;
}

.obj_world--layer-outline {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	opacity: 1;

	transition-duration: 0.4s;
}

.obj_world--layer-land {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	opacity: 0;

	transition-duration: 0.4s;
}

.obj_world--layer-solid {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	/*opacity: 0.2;*/
	opacity: 0;
	z-index: 0;

	transition-duration: 0.4s;
}

.obj_world:hover .obj_world--layer-solid {
	opacity: 1;
	/*transform: scale(1);*/
}

.obj_world--selected .obj_world--layer-outline {
	opacity: 0;
}

.obj_world--selected .obj_world--layer-land {
	opacity: 1;
}

.obj_world--selected .obj_world--layer-solid {
	opacity: 0 !important;
	/*transform: scale(1);*/
}

.obj_world--name {
	position: absolute;

	font-family: 'Editorial New';
	font-size: 2vw;
	line-height: 2.4vw;
	letter-spacing: -0.04em;

	opacity: 0;

	transition-duration: 0.4s;
}

.obj_world--selected .obj_world--name {
	opacity: 1;
}

.obj_world--selected {

}

.obj_world .button-small {
	position: absolute;
		top: 50%;
		left: 50%;

	width: max-content;

	transform: translate(-50%, -50%);
	pointer-events: auto;

	transition-duration: 0.2s;

	z-index: 2;
}

/*.obj_world .button-small:hover {
	transform: translate(-50%, -50%) scale(1.1);
}*/

.obj_world--selected .button-small {
	opacity: 0;
}

.world__sustainability {
		top: 26%;
		left: 20%;

/*	background: url('_images/island_shape--sustainability.png');
	background-repeat: no-repeat;
	background-size: 100%;*/
}

.world__sustainability .obj_world--name {
	top: 10.4vw;
	left: 9.6vw;
}

.world__sustainability .obj_world--layer-solid {
	background: url('_images/island_shape--sustainability-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__sustainability .obj_world--layer-outline {
	background: url('_images/island_shape--sustainability.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__sustainability .obj_world--layer-land {
	background: url('_images/island_shape--sustainability-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__finance {
		top: 24%;
		left: 38%;

/*	background: url('_images/island_shape--finance.png');
	background-repeat: no-repeat;
	background-size: 100%;*/
}

.world__finance .obj_world--name {
	top: 1.6vw;
	left: 11vw;
}

.world__finance .obj_world--layer-solid {
	background: url('_images/island_shape--finance-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__finance .obj_world--layer-outline {
	background: url('_images/island_shape--finance.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__finance .obj_world--layer-land {
	background: url('_images/island_shape--finance-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__tech {
		top: 16%;
		right: 18%;

/*	background: url('_images/island_shape--tech.png');
	background-repeat: no-repeat;
	background-size: 100%;*/
}

.world__tech .obj_world--name {
	top: 12.8vw;
	left: 0vw;
}

.world__tech .obj_world--layer-solid {
	background: url('_images/island_shape--tech-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__tech .obj_world--layer-outline {
	background: url('_images/island_shape--tech.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__tech .obj_world--layer-land {
	background: url('_images/island_shape--tech-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__mobility {
		bottom: 32%;
		left: 32%;

	width: 22vw;
	height: 22vw;
}

.world__mobility .obj_world--layer-solid {
	background: url('_images/island_shape--mobility-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__mobility .obj_world--layer-outline {
	background: url('_images/island_shape--mobility.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__mobility .obj_world--layer-land {
	background: url('_images/island_shape--mobility-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__mobility .obj_world--name {
	top: 3.2vw;
	left: 2vw;
}

.world__urban {
		top: 32%;
		right: 32%;
/*
	background: url('_images/island_shape--urban.png');
	background-repeat: no-repeat;
	background-size: 100%;*/
}

.world__urban .obj_world--name {
	top: 6.4vw;
	left: -0.8vw;
}

.world__urban .obj_world--layer-solid {
	background: url('_images/island_shape--urban-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__urban .obj_world--layer-outline {
	background: url('_images/island_shape--urban.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__urban .obj_world--layer-land {
	background: url('_images/island_shape--urban-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__water {
		bottom: 16%;
		left: 16%;

/*	background: url('_images/island_shape--water.png');
	background-repeat: no-repeat;
	background-size: 100%;*/
}

.world__water .obj_world--name {
	top: 3.2vw;
	left: 12.8vw;
}

.world__water .obj_world--layer-solid {
	background: url('_images/island_shape--water-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__water .obj_world--layer-outline {
	background: url('_images/island_shape--water.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__water .obj_world--layer-land {
	background: url('_images/island_shape--water-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__social {
		bottom: 20%;
		right: 36%;

/*	background: url('_images/island_shape--social.png');
	background-repeat: no-repeat;
	background-size: 100%;*/
}

.world__social .obj_world--name {
	top: 1.6vw;
	left: -0.8vw;
}

.world__social .obj_world--layer-solid {
	background: url('_images/island_shape--social-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__social .obj_world--layer-outline {
	background: url('_images/island_shape--social.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__social .obj_world--layer-land {
	background: url('_images/island_shape--social-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__energy {
		bottom: 24%;
		right: 20%;

/*	background: url('_images/island_shape--energy.png');
	background-repeat: no-repeat;
	background-size: 100%;*/
}

.world__energy .obj_world--name {
	top: 0.4vw;
	left: 1.6vw;
}

.world__energy .obj_world--layer-solid {
	background: url('_images/island_shape--energy-hover.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__energy .obj_world--layer-outline {
	background: url('_images/island_shape--energy.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.world__energy .obj_world--layer-land {
	background: url('_images/island_shape--energy-overlay.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

#open__about {
	cursor: pointer;
}

.container__about {
	position: absolute;
		top: 5.4vw;
		left: 6.4vw;

	width: calc(100% - 12.8vw);
	height: calc(100% - 11.4vw);
	z-index: 18;
}

.container__about--margin {
	position: relative;
	width: calc(100% - 6.4vw);
	padding: 3.2vw;
	padding-top: 4.8vw;
}

.container__about--margin h2 {
	font-family: 'Editorial New bold';
	font-size: 2.4vw;
	line-height: 3.2vw;
	letter-spacing: -0.04em;
	font-weight: normal;

	padding-left: 2.4vw;
}

.panel__about--headline {
	position: relative;
	width: 100%;
	padding-bottom: 3.2vw;
}

.panel__about--content {
	position: relative;
	width: 100%;

	display: flex;
	justify-content: space-between;
}

.about-column {
	position: relative;
	width: 30%;
}

.about-column:last-of-type {
	padding: 1.6vw;
	margin-top: -1.6vw;

	border-radius: 0.2vw;
}

.about-column h3 {
	padding-bottom: 0.8vw;
}


.about-column:last-of-type h3 {
	font-family: 'Editorial New';
	font-size: 1.8vw;
	line-height: 2.2vw;
	letter-spacing: -0.04em;
	font-weight: normal;
}

.privacy--note-region {
	position: relative;
	opacity: 0.7;

	font-size: 14px;

	padding-top: 1.6vw;
}

.panel--cta-explorer {
	position: relative;
	width: calc(100% + 0vw);
	padding: 1.6vw;
	margin: -1.6vw;
	margin-top: 2.4vw;
}

.frame__explorertest {
	position: relative;
	width: 100%;
	padding-bottom: 100%;

	overflow: hidden;
}

.explorer__test-slides {
	position: absolute;
		top: 0;
		left: 0;

	width: 600%;
	height: 100%;

	display: flex;

	transition-duration: 0.4s;
}

.explorer__test-slide {
	position: relative;
	width: calc(100% / 6);
	height: 100%;

	overflow: hidden;
}

.completed__test {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

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

	z-index: 3;
}

.badge__20years {
	position: absolute;
		top: 0;
		right: 6.4vw;

	width: 7.2vw;
	height: 8vw;

	background: url('_images/badge_20yearsa.png');
	background-size: 100%;
	background-position: center bottom;
}

.home .badge__20years {
	right: calc(50% - 3.6vw);
}

.container__process {
	position: absolute;
		top: 50%;
		left: 50%;
	
	font-family: 'Editorial New';
	font-size: 1.4vw;
	line-height: 1.8vw;
	letter-spacing: 0.02em;
	
	width: calc(40vw);
	padding: 2.4vw;
	transform: translate(-50%, -50%);
	
	z-index: 8;
	
	box-shadow: 0.6vw 0.6vw 0 rgb(0 0 0 / 20%);

}

.list_tasks {
	position: relative;
	width: 100%;
	list-style-type: none;
	display: flex;
	flex-flow: wrap;
}

.list_tasks li {
	width: 50%;
}

@media screen and (max-width: 768px){

	.map__header--logo {
		height: 16vw;
	}

	.map__header--logo img {
		top: 3.2vw;
		left: 0;
		width: 6.4vw;
		height: auto;
	}

	.map__header--ESC-name {
		width: 40%;
		padding-top: 3vw;
		font-size: 3.8vw;
		line-height: 4vw;
		letter-spacing: -0.04em;
	}

	.map__header--menu {
		width: calc(30% + 0.8vw);
		padding-top: 3.2vw;
		margin-right: -0.8vw;
	}

	.map__header--obj-airballoon {
		left: -4vw;
		top: -1.2vw;
		width: 26vw;
		height: 23vw;
	}

	.map__nav {
		height: 12.8vw;
		font-family: 'Editorial New';
		z-index: 20;
	}

	.map__nav--profile {
		display: none;
	}

	.container__about {
		position: absolute;
		top: 26vw;
		left: 6.4vw;
		width: calc(100% - 12.8vw);
		height: calc(100% - 40vw);
		z-index: 18;
		overflow: scroll;
	}

	.container__about--margin {
		position: relative;
		width: calc(100% - 12.8vw);
		padding: 6.4vw;
		padding-top: 7.2vw;
	}

	.panel__about--content {
		flex-flow: wrap;
	}

	.about-column {
		position: relative;
		width: 100%;
		padding-bottom: 9.6vw;
	}

	.container__about--margin h2 {
		font-size: 6.4vw;
		line-height: 7.2vw;
		letter-spacing: -0.04em;
		font-weight: normal;
		padding-left: 2.4vw;
	}




}