

:root {

	--colorA: #BCA27D;
	--colorB: #843333;
	--colorC: #273960;
	--colorD: #21221c;
	
	
}


/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
html {
	box-sizing: border-box;
	font-family: sans-serif; 
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body { margin: 0; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
body, body * { box-sizing: border-box; }
html, body { overflow-x: hidden; }

.abs {
    position: absolute;
    width: 100%;
    height: 100%;
}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: hsl(0, 0%, 55%);
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid hsl(0, 0%, 55%);
}
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}




/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
header {
	position: relative;
	height: 108px;
	padding: 32px 48px;
	background: var(--colorB);
	color: white;
	box-shadow: 0 8px 16px hsla(0, 0%, 0%, 0.4);
	z-index: 9;
}
header h1 { margin: 0; line-height: 1.1; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }

main {
	position: relative;
	width: 100%;
	height: calc(100vh - 108px);
	background: var(--colorC);
	overflow: hidden;
    -webkit-perspective: 1100px;
    -moz-perspective: 1100px;
    perspective: 1100px;
}






/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
#actus-3D {
    position: absolute;
    top: 50%;
    left: 50%;
	padding: 0;
    transition: 1s all;
    transform: translate3d( 0, 0, 0 );
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}


#content,
#camera,
#axis {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	transition: 2s all;
}


.plane-3D {
    position: absolute;
	backface-visibility: hidden;
}

#grid {
	left: -150vw;
	top: -100vw;
    width: 300vw;
    height: 200vw;
	background: url(img/grid-01.png);
	background-size: 75px;
	transform: translate3d(0,0,-10px);
	opacity: 0.2;
    -webkit-mask: linear-gradient( 0deg, black, black, transparent );
    -webkit-mask-size: 100% 100%;
    -webkit-mask-type: alpha;
	-webkit-backface-visibility: hidden;
}
#map {
	left: -200vw;
	top: -143.88vw;
    width: 400vw;
    height: 287.77vw;
	transform: translate3d(0,0,0);
}
#map img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nodes {
	position: absolute;
	left: -430vw;
	top: -240vw;
    width: 860vw;
    height: 480vw;
	
	left: -860vw;
	top: -480vw;
    width: 1720vw;
    height: 960vw;
	
	transform: translate3d(21vw,-32vw,1px) scale(0.5);
	shape-rendering: auto;
	image-rendering: auto;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}



[data-scene="start"] #camera {
	transform: translate3d(15vw, -20vw, -35vw) rotateX(55deg);
	transform: translate3d(-11vw, 0vw, 10vw) rotateX(45deg);
}


#control {
	display: flex;
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 9999;
}
#control .ctr-button {
	width: 56px;
	margin-left: 12px;
	padding: 8px 12px;
	color: white;
	background: var(--colorB);
	text-align: center;
	cursor: pointer;
	font-size: 32px;
	font-weight: 700;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
#control .ctr-button:hover { background: black; }

.activity-button{
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 10000;

}

#activity{
	color: white;
	background-color: #843333;
	cursor: pointer; 
	font-size:1.3rem; 
	padding: 10px;
	border: none;
	border-radius: 10px;
}

#A3D-SCENES {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	transition: 2s all;
}
.A3D-scene {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}
.actus-grid-01 {
    display: none;
    position: absolute;
    transform: translate3d( -70vw, -50vh, 400px );
}
.plane-3DX {
    position: relative;
    width: 200vw;
    height: 100vh;
    background: url(img/pattern01-half.png);
    -webkit-mask: linear-gradient( 0deg, black, black, transparent );
    -webkit-mask-size: 100% 100%;
    -webkit-mask-type: alpha;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.actus-3D-floor {
    position: absolute;
    width: auto;
    height: auto;
    pointer-events: none;
}
.grid-plane {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/pattern01-half.png);
    background-size: 100px;
}
#actus-3D * {
	shape-rendering: auto;
	image-rendering: auto;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	outline: 1px solid transparent;
}


.main-map {
	shape-rendering: auto;
	image-rendering: auto;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	transform: translateZ(0);
}
.main-map img,
.main-map svg {
	width: 100%;
	height: 100%;
    transform-origin: top left;
	
	shape-rendering: auto;
	image-rendering: auto;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	transform: translateZ(0);
}








[data-name="grid"] {
    background-size: 20px !important;
}


[data-name="compass"],
[data-name="compass2"] {
	pointer-events: none;
}
[data-name="mark"] {
	display: none;
	background: red;
}

.city { position: relative; pointer-events: none; }
.city:before {
	content: "";
	position: absolute;
	left: -0.4vw;
	top: -0.4vw;
	width: 0.8vw;
	height: 0.8vw;
	background: hsla(0, 0%, 100%, 0.54);
	border-radius: 500px;
}
.city p {
	position: relative;
	left: -2vw;
	margin: 0.5vw 0;
	font: 400 0.8vw 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	color: hsla(0, 0%, 100%, 0.6);
	color: white;
	transform: translate3d(0vw, 0vw, 2vw);
}
.city.top p {
	position: absolute;
	top: -2.3vw;
	text-rendering: geometricPrecision;
}




.nodesX {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	shape-rendering: auto;
	image-rendering: auto;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	transform: translateZ(0);
}
.nodes .node {
	position: absolute;
	shape-rendering: auto;
	image-rendering: auto;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	transform: translateZ(0);
}
.nodes .node:before {
	content: "";
	position: absolute;
	left: -0.3vw;
	top: -0.3vw;
	width: 0.6vw;
	height: 0.6vw;
	background: hsla(0, 0%, 100%, 0.5);
	border-radius: 200px;
}
.nodes .node .type,
.nodes .node .text,
.nodes .node .image2 { display: none; }

.nodes .node-0 {
    left: 46.8%;
    top: 55.8%;
}
.nodes .node-1 {
    left: 46.0%;
    top: 57.8%;
}
.nodes .node-2 {
    left: 47%;
    top: 57.3%;
}
.nodes .node-3 {
    left: 47.5%;
    top: 57.1%;
}
.nodes .node-4 {
    left: 48.1%;
    top: 57.0%;
}
.nodes .node-5 {
    left: 45.0%;
    top: 53.2%;
}
.nodes .node-6 {
    left: 49.6%;
    top: 58.3%;
}
.nodes .node-7 {
    left: 50.0%;
    top: 51.1%;
}
.nodes .node-8 {
    left: 52%;
    top: 57.1%;
}
.nodes .node-9 {
    left: 51.9%;
    top: 58.5%;
}


[data-scene="start"] .nodes .node.node-8 .place {
	left: -15vw;
}


.nodes .node-12 .place,
.nodes .node-13 .place { display: none; }

.nodes .node .photo {
	display: none;
}
.nodes .node .photo img {
	
}
.nodes .node .image img {
	position: absolute;
	left: -15vw;
	top: -15vw;
	width: 30vw;
	height: 30vw;
	filter: drop-shadow(0 0 24px black);
	transition: 0.5s all;
	transform: scale(0.2);
	cursor: pointer;
}

.nodes .node .image:hover img {
	filter: drop-shadow(0 0 12px white) drop-shadow(0 0 28px #ffff90) drop-shadow(0 0 64px darkorange);
}




.nodes,
.nodes .node {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.nodes .node .place {
	position: absolute;
	left: -5vw;
	top: -5vw;
	font: 400 2.5vw 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	color: white;
	transform: translate3d(0,0vw,1vw) rotateX(-10deg);
	white-space: nowrap;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	transition: 2s all;
}
.nodes .node.bottom .place { top: 4vw; }
.nodes .node.right .place { left: 1.5vw; }
.nodes .node.mid .place { top: 0vw; }
.nodes .node.mid.right .place { left: 4vw; }



[data-scene="start"] .nodes .node .place {
	transform: translate3d(0,0vw,1vw) rotateX(-60deg) scale(1,0.7);
}




#info {
	display: flex;
    flex-flow: column;
    align-items: center;
	position: fixed;
	background: hsla(0, 0%, 0%, 0.8);
	transition: 0.5s all;
}
#info .close {
	position: absolute;
	right: 16px;
	top: 0;
	font-size: 40px;
	color: white;
	cursor: pointer;
	transition: 0.25s all;
}
#info .close:hover { transform: scale(0.9); }

#info .image {
	display: flex;
    flex-flow: column;
    align-items: center;
    place-content: center;
	flex: 0 0 auto;
	position: relative;
	width: 30%;
    height: 100%;
	transition: 0.5s all;
	opacity: 0;
}
#info .image.open { opacity: 1; }
#info .image img {
	position: relative;
	width: 100%;
	height: auto;
	max-height: 50%;
	object-fit: scale-down;
}
#info .image img:first-child:last-child {
	max-height: 100%;
}
#info .text-block {
	display: none;
	color: white;
    max-height: 100%;
    overflow-y: auto;
	
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px 48px;
	
	
}
#info .text-block h2 {
	display: inline-block;
	margin: 0;
	padding: 12px;
	font-size: 48px;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.65);
}
#info .text-block h3 {
	display: inline-block;
	margin: 0;
	padding: 12px;
	font-size: 24px;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.65);
}
#info .text-block p {
	font-size: 20px;
	opacity: 0.6;
}


#info .photo {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
	opacity: 0;
}
#info .photo.open { opacity: 1; }
#info .photo img {
    max-width: 100%;
	max-height: 100%;
    height: 100%;
    object-fit: scale-down;
}















.take {
	background: hsla(0, 100%, 50%, 0.3);
	background: transparent;
	cursor: zoom-in;
}









/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1280px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


	main {
		-webkit-perspective: 800px;
		-moz-perspective: 800px;
		perspective: 800px;
	}
	
	[data-scene="start"] #camera {
	}
	

	
	
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	header h1 { font-size: 28px; }
	#info .text-block h2 {
		margin: 20px 0;
		font-size: 44px;
	}
	#info .text-block h3 { font-size: 28px; }
	#info .text-block p { font-size: 18px; }

	main {
		-webkit-perspective: 700px;
		-moz-perspective: 700px;
		perspective: 700px;
	}
	
	[data-scene="start"] #camera {
		transform: translate3d(-12vw, 0vw, 20vw) rotateX(45deg);
	}
	

}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 800px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	header {
		height: 80px;
		padding: 24px 48px;
	}
	main { height: calc(100vh - 80px); }

	main {
		-webkit-perspective: 700px;
		-moz-perspective: 700px;
		perspective: 700px;
	}
	#info { flex-flow: column; overflow-y: auto; }
	#info .text-block { padding: 0; }
	#info .text-block h2 {
		margin: 16px 0;
		font-size: 40px;
	}
	#info .text-block h3 {
		margin: 12px 0;
		font-size: 24px;
	}
	#info .text-block p { font-size: 16px; }
	#info .image {
		flex-flow: row;
		place-content: center;
		width: 100%;
		height: auto;
	}
	#info .image img {
		width: auto;
		height: 150px;
		margin: 0 16px;
		max-height: unset;
	}

	
	[data-scene="start"] #camera {
		transform: translate3d(-12vw, -3vw, 20vw) rotateX(25deg);
	}
	[data-scene="start"] .nodes .node .place {
		transform: translate3d(0, 0vw, 1vw) rotateX(-30deg) scale(1, 0.7);
		font-size: 4vw;
		top: -7.5vw;
	}
	
	[data-scene="start"] .nodes .node-2 .place {
		left: -9vw;
	}
	[data-scene="start"] .nodes .node-4 .place {
		left: -1vw;
	}
	[data-scene="start"] .nodes .node.node-8 .place {
		left: -35vw;
	}
	[data-scene="start"] .nodes .node.node-9 .place {
		left: -15vw;
	}
	
	
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


	header { padding: 12px 40px; }
	main {
		-webkit-perspective: 700px;
		-moz-perspective: 700px;
		perspective: 700px;
	}
	
	#info .text-block h2 {
		margin: 12px 0;
		font-size: 34px;
	}
	#info .text-block h3 {
		margin: 8px 0;
		font-size: 22px;
	}
	#info .text-block p { margin: 0; }
	#info .image img { 
		max-width: 50%;
		height: 150px;
	}
	
	
	
	[data-scene="start"] #camera {
	}
	
	
	
	
	
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	header { padding: 12px 24px; }
	header h1 { font-size: 24px; }

	main {
		-webkit-perspective: 900px;
		-moz-perspective: 900px;
		perspective: 900px;
	}
	
	#info .text-block h2 {
		margin: 8px 0;
		font-size: 28px;
	}
	#info .text-block h3 {
		margin: 6px 0;
		font-size: 20px;
	}
	#info .text-block p { margin: 0; font-size: 14px; }
	#info .image img { height: 100px; }
	
	
	
	[data-scene="start"] #camera {
		transform: translate3d(-10vw, -3vw, 80vw) rotateX(25deg);
	}
	[data-scene="start"] .nodes .node .place {
		transform: translate3d(0, 0vw, 1vw) rotateX(-30deg) scale(1, 0.7);
		font-size: 4vw;
		top: -7.5vw;
	}

	
}
