

: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%;
}



/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
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: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}






/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
#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,-30vw,-10vw);
	opacity: 0.2;
    -webkit-mask: linear-gradient( 0deg, black, black, transparent );
    -webkit-mask-size: 100% 100%;
    -webkit-mask-type: alpha;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
}
#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;
}


.hover {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 30%;
	height: 100%;
	cursor: zoom-in;
	background: yellow;
	opacity: 0.0;
	transition: 2s all;
}

[data-scene="start"] .hover-back { display: none; }


#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;
}



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


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



#info {
	display: flex;
    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: 0 0 auto;
	position: relative;
	width: 30%;
	transition: 0.5s all;
	opacity: 0;
}
#info .image.open { opacity: 1; }
#info .image img {
	position: relative;
	width: 100%;
	height: auto;
	object-fit: scale-down;
}
#info .text-block {
	display: none;
	padding-left: 48px;
	color: white;
}
#info .text-block h2 {
	margin: 24px 0;
	font-size: 48px;
}
#info .text-block h3 {
	margin: 16px 0;
	font-size: 32px;
}
#info .text-block p {
	font-size: 20px;
	opacity: 0.6;
}






/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ ROME */
.rome {
	left: -15vw;
	top: -15vw;
	width: 30vw;
	height: 30vw;
	z-index: 9;
    transform-style: preserve-3d;
	cursor: pointer;
}
.rome .base3,
.rome .base2,
.rome .base {
	position: absolute;
	width: 130%;
	height: 130%;
	background: rgba(255, 255, 255, 0.33);
	transform: translate3d(-2vw, 0, -15vw);
	border-radius: 500px;
	transition: 0.3s all;
}
.rome .base2 {
	left: -10%;
	top: -10%;
	width: 150%;
	height: 150%;
	transform: translate3d(-2vw, 0vw, -17vw);
}
.rome .base3 {
	left: -20%;
	top: -20%;
	width: 170%;
	height: 170%;
	transform: translate3d(-2vw, 0vw, -19vw);
}
.rome img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
	transform: translate3d(0vw, 10vw, 0vw) rotateX(-90deg);
}
.rome .time {
    width: 250%;
    margin-left: -75%;
	height: auto;
	transform: translate3d(-2vw, -35vw, 24vw) rotateX(-90deg);
	color: white;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 900;
	font-size: 100px;
	text-align: center;
}
.rome .title {
	width: 200%;
    margin-left: -50%;
	height: auto;
	transform: translate3d(0vw, -7vw, 19vw) rotateX(-90deg);
	color: hsla(0, 0%, 100%, 0.5);
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 400;
	font-size: 56px;
    line-height: 1.1;
	text-align: center;
	transition: 0.5s all;
}
.rome .text {
	width: 100%;
	height: auto;
	padding: 16px;
	transform: translate3d(20vw, -10vw, 10vw) rotateY(0deg) rotateX(-90deg) scale(1,0);
	transform-origin: top;
	background: hsla(0, 0%, 0%, 0.75);
	color: white;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 300;
	font-size: 20px;
	text-align: left;
	transition: 1s all 0.5s;
}
.rome .frame {
	width: 100%;
	height: 100%;
	transform: translate3d(2vw, -45vw, 0vw) rotateX(-90deg);
	opacity: 0.2;
}
#rome-a .time {
	transform: translate3d(0vw, -5vw, 18vw) rotateX(-90deg);
}
#rome-a .title {
	transform: translate3d(2vw, -5vw, 12vw) rotateX(-90deg);
}
#rome-b .time {
	transform: translate3d(0vw, 0, 26vw) rotateX(-90deg);
}
#rome-b .frame {
	transform: translate3d(2vw, -81vw, 0vw) rotateX(-90deg);
}
#rome-c .frame {
	transform: translate3d(2vw, -55vw, 0vw) rotateX(-90deg);
}
#rome-c .time {
	transform: translate3d(-5vw, 0vw, 27vw) rotateX(-90deg);
}
#rome-c .title {
	transform: translate3d(-5vw, -5vw, 20vw) rotateX(-90deg);
}


#rome-a {
	transform: translate3d(-70vw, -50vw, 0);
}
#rome-b {
	transform: translate3d(0vw, -100vw, 0);
}
#rome-c {
	transform: translate3d(70vw, -150vw, 0);
}
.rome:hover .base {
	box-shadow: 
		0 0 50px white,
		0 0 150px cyan,
		0 0 300px darkorange;
}



#rome-b img { transform: translate3d(2vw, 10vw, 0vw) rotateX(-90deg);}
#rome-b .photo {
    width: 180%;
    height: 120%;
	transform: translate3d(-7vw, -32vw, 6vw) rotateX(-90deg) scale(0,1);
	transition: 1s all 0.25s;
}
[data-scene="rome-b"] #rome-b .photo {
	transform: translate3d(-40vw, -32vw, 6vw) rotateX(-90deg) scale(1,1);
}



[data-scene="rome-a"] #rome-a .text {
	transform: translate3d(23vw, -5vw, 10vw) rotateX(-90deg) rotateY(-20deg) scale(1,1);
}
#rome-b .text {
    font-size: 17px;
	transform: translate3d(0, -40vw, 1vw) rotateX(-90deg) scale(1,0);
}
[data-scene="rome-b"] #rome-b .text {
	transform: translate3d(0vw, -40vw, 1vw) rotateX(-90deg) scale(1,1);
}
#rome-c .text {
	width: 130%;
	text-align: right;
	transform: translate3d(-35vw, -10vw, 15vw) rotateX(-90deg) scale(1,0);
}
[data-scene="rome-c"] #rome-c .text {
	transform: translate3d(-35vw, -10vw, 15vw) rotateX(-90deg) scale(1,1);
}



/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ CAMERA */
[data-scene="start"] #camera {
	transform: translate3d(15vw, -0vw, -50vw) rotateX(80deg);
}



[data-scene="rome-a"] #camera {
	transform: translate3d(50vw, -0vw, 20vw) rotateX(90deg)  rotateZ(-10deg);
}
[data-scene="rome-b"] #camera {
	transform: translate3d(15vw, 4vw, 70vw) rotateX(91deg)  rotateZ(-5deg);
}
[data-scene="rome-c"] #camera {
	transform: translate3d(-65vw, 4vw, 110vw) rotateX(91deg)  rotateZ(10deg);
}




















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


	main {
		-webkit-perspective: 800px;
		-moz-perspective: 800px;
		perspective: 800px;
	}
	
	.rome .time { font-size: 70px; }
	.rome .title { font-size: 40px; }
	.rome .text { width: 130%; }
	#rome-c .text { width: 170%; margin-left: -40%; }
	
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@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;
	}
	
	
	.rome .time { font-size: 60px; }
	.rome .text { width: 160%; }
	#rome-c .text { width: 200%; margin-left: -60%; }
	.rome .title {
    	transform: translate3d(0vw, -7vw, 22vw) rotateX(-90deg);
	}
	#rome-a .time {
		transform: translate3d(0vw, -5vw, 24vw) rotateX(-90deg);
	}
	#rome-a .title {
		transform: translate3d(2vw, -5vw, 14vw) rotateX(-90deg);
	}
	#rome-b .time {
		transform: translate3d(0vw, 0, 32vw) rotateX(-90deg);
	}
	#rome-c .time {
		transform: translate3d(-5vw, 0vw, 32vw) rotateX(-90deg);
	}
	#rome-c .title {
		transform: translate3d(-5vw, -5vw, 23vw) rotateX(-90deg);
	}

}



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


	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 {
		place-content: center;
		width: 100%;
	}
	#info .image img { width: auto; height: 150px; }

	
	.rome .time { font-size: 56px; }
	.rome .title { font-size: 34px; }
	.rome .text { width: 200%; }
	#rome-c .text { width: 260%; margin-left: -120%; }

	[data-scene="rome-b"] #rome-b .text {
		transform: translate3d(-5vw, -40vw, 1vw) rotateX(-90deg) scale(1, 1);
	}
	
	
}


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


	header { padding: 16px 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;
	}
	
	
	
	.rome .time { font-size: 40px; transition: 0.5s all; }
	.rome .title { font-size: 24px; transition: 0.5s all; }

	#rome-b .text { width: 260%; }
	[data-scene="rome-b"] #rome-b .time {
        transform: translate3d(0vw, 0, 62vw) rotateX(-90deg);
	}
	[data-scene="rome-b"] #rome-b .title {
        transform: translate3d(0vw, -7vw, 52vw) rotateX(-90deg);
	}
	#rome-b .text {
		font-size: 16px;
		transform: translate3d(-32vw, -50vw, -15vw) rotateX(-90deg) scale(1, 0);
	}
	[data-scene="rome-b"] #rome-b .text {
        transform: translate3d(-32vw, -50vw, -15vw) rotateX(-90deg) scale(1, 1);
    }
	#rome-b .photo {
		width: 300%;
		height: 200%;
    	transform: translate3d(-36vw, -38vw, 13vw) rotateX(-90deg) scale(0, 1);
	}
	[data-scene="rome-b"] #rome-b .photo {
		transform: translate3d(-36vw, -38vw, 13vw) rotateX(-90deg) scale(1, 1);
	}

	[data-scene="rome-c"] #camera {
		transform: translate3d(-75vw, 1vw, 110vw) rotateX(76deg) rotateZ(10deg);
	}
	#rome-c .text {
		width: 300%;
		text-align: left;
		transform: translate3d(-9vw, -10vw, -15vw) rotateX(-90deg) scale(1, 0);
	}
	[data-scene="rome-c"] #rome-c .text {
		transform: translate3d(-9vw, -10vw, -15vw) rotateX(-70deg) scale(1, 1);
	}
	
	

}


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

	header { padding: 16px 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(30vw, 30vw, -180vw) rotateX(50deg) rotateY(-10deg) rotateZ(-15deg);
	}

	
    #rome-a .time {
        transform: translate3d(0vw, -5vw, 40vw) rotateX(-90deg);
    }
    #rome-a .title {
        transform: translate3d(2vw, -5vw, 34vw) rotateX(-90deg);
    }
    #rome-b .time {
        transform: translate3d(0vw, 0, 49vw) rotateX(-90deg);
    }
	.rome .title {
        transform: translate3d(-3vw, -7vw, 38vw) rotateX(-90deg);
    }
    #rome-c .time {
        transform: translate3d(-5vw, 0vw, 50vw) rotateX(-90deg);
    }
    #rome-c .title {
        transform: translate3d(-5vw, -5vw, 40vw) rotateX(-90deg);
    }

	[data-scene="rome-a"] #camera {
		transform: translate3d(70vw, -26vw, 20vw) rotateX(60deg) rotateZ(-0deg);
	}
	
    #rome-b .text,
    .rome .text { width: 300%; }
	[data-scene="rome-a"] #rome-a .text {
		transform: translate3d(-30vw, -5vw, -20vw) rotateX(-60deg) rotateY(-0deg) scale(1, 1);
	}

	[data-scene="rome-b"] #camera {
		transform: translate3d(15vw, 24vw, 70vw) rotateX(61deg) rotateZ(-5deg);
	}
    [data-scene="rome-b"] #rome-b .text {
        transform: translate3d(-41vw, -60vw, -15vw) rotateX(-60deg) scale(1, 1);
    }
    [data-scene="rome-b"] #rome-a .time,
    [data-scene="rome-b"] #rome-a .title,
    [data-scene="rome-b"] #rome-c .time,
    [data-scene="rome-b"] #rome-c .title { opacity: 0; }


	[data-scene="rome-c"] #camera {
        transform: translate3d(-75vw, 20vw, 90vw) rotateX(62deg) rotateZ(5deg);
    }
	#rome-c .text { width: 340%; }
	[data-scene="rome-c"] #rome-c .text {
        transform: translate3d(-5vw, -35vw, -15vw) rotateX(-70deg) scale(1, 1);
    }




	
}
