
: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;
	overflow: hidden;
	background: var(--colorC);
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body, body * { box-sizing: border-box; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
html, body { overflow-x: hidden; }

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



/* ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
header {
	position: relative;
	height: 96px;
	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: calc(100vw - 90px);
	min-height: calc(100vh - 96px);
	width: 100%;
	background: var(--colorC);
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}
#warning {
	display: flex;
	align-items: center;
	place-content: center;
	padding: 24px 10vw;
	text-align: center;
	font-size: 20px;
	color: white;
	background: black;
	z-index: 9999;
}


/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
#warning,
#actus-clouds,
#actus-slider {
    position: absolute;
    top: 0%;
    left: 0%;
	width: 100%;
	height: 100%;
}
#actus-slider img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: auto;
	height: auto;
	max-width: 100vw;
	max-height: 100vh;
	object-fit: contain;
	margin: auto;
	-webkit-mask-image:
		linear-gradient(to right, hsla(0, 0%, 100%, 0) 1%, white 50%),
		linear-gradient(to left, hsla(0, 0%, 100%, 0) 1%, white 50%),
		linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 1%, white 30%),
		linear-gradient(to top, hsla(0, 0%, 100%, 0) 1%, white 30%);
	mask-image:
		linear-gradient(to right, hsla(0, 0%, 100%, 0) 1%, white 50%),
		linear-gradient(to left, hsla(0, 0%, 100%, 0) 1%, white 50%),
		linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 1%, white 30%),
		linear-gradient(to top, hsla(0, 0%, 100%, 0) 1%, white 30%);
	-webkit-mask-composite: source-in; /* For Chrome */
	mask-composite: intersect; /* For Firefox */
	mix-blend-mode: color-dodge;
	mix-blend-mode: exclusion;
}
#all-clouds,
#all-slides { display: none; }


#actus-clouds img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	mix-blend-mode: overlay;
	mix-blend-mode: exclusion;
}


/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */
/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */

#seeModel,
#message2 #end-ok,
#message1 #start,
#puzzle button {
	margin: 0 4px 4px 0;
	padding: 4px 12px;
	font-size: 16px;
	font-weight: 700;
	background: var(--colorA);
	border-radius: 5px;
	border: 0;
	outline: 0;
	cursor: pointer;
}
#message2 #end-ok,
#message1 #start {
	display: block;
	margin: 24px auto 0;
	font-size: 20px;
	letter-spacing: 2px;
	background: var(--colorB);
	color: white;
}
#seeModel:hover,
#message2 #end-ok:hover,
#message1 #start:hover,
#puzzle button:hover {
	background: black;
	color: white;
}


#puzzle {
	position: relative;
	width: 100%;
	min-height: 100%;
	overflow-x: auto;
	padding: 24px 48px 48px;
}
.puzzle-buttons {
	display: flex;
    place-content: space-between;
	position: relative;
    width: 100%;
	margin-bottom: 48px;
	z-index: 99;
}
.puzzle-buttons-right { display: flex; }
#puzzle .note {
	display: inline-block;
	margin-left: 16px;
	font-size: 16px;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	color: hsla(0, 0%, 100%, 0.35);
	opacity: 0;
	transition: 0.5s all;
}

#pieces {
	position: absolute;
	left: 0;
	top: -96px;
	z-index: 9;
}


#puzzle #container{
	margin: 0 auto 24px;
    box-shadow: inset 0px 0px 3px white;
    background-repeat: no-repeat;
	transition: background-position .24s ease .24s;
}
.position {
    display: inline-block;
	vertical-align: top;
	width: 100px;
	height: 100px;
}
.move svg {
	margin-top:-40px;
    margin-left: -40px;
}

.move {
    width:100px;
    height:100px;
    position:absolute;
    z-index: 0;
    transition:transform .2s;
}
.move svg > path {
    fill:url(#xina);
    stroke:#001111;
    stroke-width:1px;
}
[classangle=g0] path { filter:url(#g0); }
[classangle=g1] path { filter:url(#g1); }
[classangle=g2] path { filter:url(#g2); }
[classangle=g3] path { filter:url(#g3); }

#tap {
    position:absolute;
    width: 100%;
    height: 2000px;
    background-color:black;
    z-index: 900;
    opacity:0;
    transition:height 0s ease , opacity .6s ease ;
    color:white;
}
#models {
    height: 0;
    text-align:center;
    overflow: hidden;    
}
#models > div {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
    padding: 10px;
    border:1px solid white;
    text-align: left;
    cursor: pointer;
    transition: .24s;
   
}
#models>div:hover{
    background-color:white; 
    color:black;
}
#seeModel {
	display: none;
    width: auto;    
    z-index:0;
    text-align: center;  
}
#fullscreen {
    height: 32px;
    width: 32px;
	margin-left: 16px;
    cursor: pointer;
    transition:.24s;
    z-index: 1000;
	opacity: 0.35;
}
#fullscreen:hover{
	opacity: 1;
    transform:scale(1.1);
}
.fullscreen{
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d=' M 2 2 L 14 2 L 14 6 L 6 6 L 6 14 L 2 14 L 2 2 Z  M 2 30 L 14 30 L 14 26 L 6 26 L 6 18 L 2 18 L 2 30 Z  M 30 2 L 18 2 L 18 6 L 26 6 L 26 14 L 30 14 L 30 2 Z  M 30 30 L 18 30 L 18 26 L 26 26 L 26 18 L 30 18 L 30 30 Z ' fill='white'/></svg>");
}
.fullscreenOff{
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d=' M 14 14 L 2 14 L 2 10 L 10 10 L 10 2 L 14 2 L 14 14 Z  M 14 18 L 2 18 L 2 22 L 10 22 L 10 30 L 14 30 L 14 18 Z  M 18 14 L 30 14 L 30 10 L 22 10 L 22 2 L 18 2 L 18 14 Z  M 18 18 L 30 18 L 30 22 L 22 22 L 22 30 L 18 30 L 18 18 Z ' fill='white'/></svg>");
}
#time{
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    transition: .6s;
    transition-delay: 1s;
    color: white;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
#logo{
       display: inline-block; 
       margin:10px 0px 10px 10px;
       vertical-align: middle;
       filter:grayscale(100%)
    }
#logo:hover{
	filter:grayscale(0)
}


#message2,
#message1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: fit-content;
	padding: 64px 32px;
	font-size: 22px;
	font-weight: 700;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	text-align: center;
	background: rgba(0, 0, 0, 0.75);
	color: white;
	border-radius: 24px;
	z-index: 999;
}

#message2 {
	display: none;
	font-size: 16px;
	font-weight: 400;
}










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

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


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

	header h1 { font-size: 28px; }

	.A3D-PANEL {
		flex-flow: row;
    	place-content: center;
		top: unset;
		bottom: 0;
		width: 100vw;
		height: auto;
		padding: 16px 8px;
	}
	.A3D-PANEL .A-timeline {
		display: flex;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.A3D-PANEL .A3D-period[alt="A"] {
		width: calc(57vw / var(--div1));
		height: auto;
	}
	.A3D-PANEL .A3D-period[alt="B"] {
		width: calc(32vw / var(--div1));
		height: auto;
	}
	.A3D-PANEL .A3D-period[alt="C"] {
		width: calc(123vw / var(--div1));
		height: auto;
	}
	.A3D-PANEL .A3D-period[alt="D"] {
		width: calc(171vw / var(--div1));
		height: auto;
	}
	.A-timeline-scale { display: none; }
	
	#message2 { width: 75%; }
	
}



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

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

}


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

	header { height: 64px; padding: 16px 24px; }
	main { height: calc(100vh - 64px); }
	
	#message2 { width: 90%; padding: 48px 24px; }
}


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

	
}