html, body {
	width: 			        100%;
	height: 		        100%;
	-webkit-touch-callout:  none;
	-webkit-user-select:    none;
	-khtml-user-select:     none;
	-moz-user-select:       none;
	-ms-user-select:        none;
	user-select:            none;
	/*overflow:				hidden;*/
	background:				black;
	color:				    #666;
	font-size:				1.7vh;
    font-family: 			'IBM Plex Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-style: 			normal;
	line-height:			140%;
	overflow:				hidden;
}
.border {
	box-sizing: 			border-box;
	border:					3px solid black;
	border-radius:			10px;
	pointer-events:			none;
}
.border.white {
	border-color:			white;
	border-radius:			0px;
}

.screensaver, #popup #popupClose, .close, #credits .close, div[materiaux], .copyrightbtn, .langues>div, div[action], div[hotspot], #skip {
	cursor:					pointer;
}
.canvas canvas {
	width:					100vw;
	height:					100vh;
}

h1 {
	text-transform:			uppercase;
	font-weight:			400;
	font-size:				3.51vh;
	margin-bottom:			1.85vh;
	line-height:			100%;
}
h2 {
	text-transform:			uppercase;
	font-weight:			200;
	font-size:				1.85vh;
}
h3 {
	font-weight:			200;
	font-size:				2.2vh;
	line-height:			140%;
}
p {
	font-weight:			200;
	font-size:				2.4vh;
	line-height:			140%;
}
sup {
	position:		 		relative;
	top: 					-0.5em;
	font-size: 				75%;
}

#menu h1 {
	margin:					4.4vh 4.4vh;
	font-weight:			100;
	font-size:				5.55vh;
	color:					#00FFA0;
	filter:					drop-shadow(0vh 0vh 1.38vh #00FFA0);
}
#menu h2 {
	font-size:				4.16vh;
	color:					white;
	line-height:			100%;
}
#menu h3 {
	text-transform:			uppercase;
	font-size:				2.5vh;
	line-height:			100%;
}
#titrage h3 {
	font-size:				1.48vh;
	line-height:			125%;
}
#hotspots h3 {
	margin-bottom:			0.46vh;
	font-weight:			800;
	line-height:			100%;
	mix-blend-mode:			difference;
}

#fiche h1 {
	font-size:				4.44vh;
	color:					black;
}


#menu {
	color:					white;
}
#fiche {
	background:				white;
}
#ficheZoom {
	color:					white;
	background:				black;
}
#fichePlay {
	background:				black;
}
#slideshow {
	opacity:				0.8;
}

#menu, #fiche, #ficheZoom, #fichePlay, #credits, .screensaver, .obsidienne_revers, .help.pinch, .help.draw {
	display:				none;
}
#background,#menu, #fiche, #ficheZoom, .fichePlay>*, #fichePlay, #actions, #skip, #credits, video, div[materiaux], .screensaver, .obsidienne_revers, .shutter, .border {
	position:				absolute;
	top:					0vh;
	left:					0vh;
}
#background,#menu, #fiche, #ficheZoom, .fichePlay>*, #fichePlay, #actions, #credits, video, .screensaver, .obsidienne_revers, .shutter, .border {
	width: 			        100%;
	height: 		        100%;
}
.shutter {
	background:				black;
	z-index:				1000;
}
#credits {
	background:				rgba(0,0,0,0.92);
	padding:				4.62vh 37.03vh;
	width:					calc(100vw - 2 * 37.03vh);
	height:					calc(100vh - 2 * 4.62vh);
	color:					black;
}
#credits .credits {
	position:				relative;
	background:				white;
	padding:				4.62vh;
	box-shadow: 			0vh 0vh 2.4vh rgba(0,0,0,0.75);
}
#credits h1 {
	font-size:				4.16vh;
	font-weight:			400;
}
#credits h2 {
	font-size:				3.33vh;
	font-weight:			400;
	margin-top:				3.7vh;
	margin-bottom:			1.85vh;
}
#credits p {
	font-size:				1.48vh;
	font-weight:			400;
	line-height:			130%;
}
#credits p.copyright {
	margin-bottom:			0.75em;
}
#credits .scroller {
	overflow-x:				hidden;
	overflow-y:				scroll;
	max-height:				76vh;
}

.fichePlay>.tools {
	pointer-events:			none;
	color:					#313131;
	text-align:				center;
	top:					auto;
	height:					auto;
	bottom:					1.38vh;
}
.fichePlay>.tools>div {
	pointer-events:			auto;
	display:				inline-block;
	margin:					0vh 0.93vh 0vh 3.7vh;
	text-align:				left;
}
.fichePlay[play=noir_ivoire]>.tools>div {
	margin-left:			0vh;
}
.fichePlay[play=fusain]>.tools>div {
	margin-left:			0vh;
}
.fichePlay p.secondline {
	margin-bottom:			1.2vh;
}
.screensaver, .obsidienne_revers {
	background:				rgba(0,0,0,0.92);
	color:					white;
	font-size:				2.2vh;
	text-align:				center;
	z-index:				100;
}
.obsidienne_revers {
	top:					9.26vh;
	height:					calc(100vh - 9.26vh);
	background:				linear-gradient(rgb(160, 161, 165) 0%, rgb(185, 186, 188) 100%);
	z-index:				90;
}
.obsidienne_revers>img {
	height:					100%;
	transform:				rotateY(0deg)
}
.screensaver>div, .help.pinch, .help.draw {
	position:				relative;
	text-align:				center;
	top: 					50%;
	transform: 				translateY(-50%);
	pointer-events:			none;
}
.help.draw {
	top:					43%;
}
.help.pinch>div, .help.draw>div {
	background:				white;
	padding:				1.38vh;
	border-radius:			9.26vh;
	width:					9.26vh;
	height:					9.26vh;
	display:				inline-block;
	pointer-events:			none;
}
.help.pinch>div>img, .help.draw>div>img {
	height:					100%;
}
.screensaver p, .consignes p, .fichePlay p {
	font-weight:			500;
}
.screensaver p.otherlang, .consignes p.secondline, .fichePlay p.secondline {
	font-weight:			200;
	font-style:				italic;
	font-size:				1.85vh;
}
.consignes p:not(.secondline) {
	font-size:				2.96vh;
	line-height:			120%;
	margin-bottom:			0.93vh;
}
.consignes .secondline {
	font-size:				2.6vh !important;
}

#menu {
	/*
	background: linear-gradient(-45deg, #303954, #3C4765);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	*/
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


video {
}
#skip {
	top:					auto;
	bottom:					3.75vh;
	right:					3.75vh;
	left:					auto;
}
#skip:hover {
	text-decoration:		underline;
}
#actions {
	top:					auto;
	bottom:					0vh;
	height:					16%;
	transition:				background linear 0.25s;
    background-color: 		transparent;
}
#actions.toolbar {
    background-image: 		linear-gradient( white, rgba(255,255,255,0));
    background-color: 		#c3c3c3;
}
#actions.toolbar>div[action].notAvailable {
	opacity:				0;
}
#actions.toolbar>div[action] {
	transition:				opacity linear 0.25s;
}
#actions:not(.toolbar)>div[action] {
	opacity:				0;
}
#actions>div {
	display:				inline-block;
}
#actions>div[action] {
	margin-bottom:			1.85vh;
}
#actions>.texte {
	margin:					1.85vh 2.77vh 0vh 3.7vh;
	width:					33%;
}
#actions>.texte.long {
	width:					49%;
}
#actions>.texte.medium {
	width:					43%;
}
.vr {
	width:					1px;
	background:				#00000080;
	margin:					0vh 5.55vh 1.85vh 0vh;
	height:					7.87vh;
}
div[materiaux] {
	text-align:				center;
}
div[materiaux]>* {
	position:				absolute;
	top:					0;
	left:					0;
}
div[materiaux]>h2, div[materiaux]>h3 {
	width:					90%;
	margin:					auto;
	position:				relative;
	text-align:				center;
	top: 					50%;
	transform: 				translateY(-50%);
}
div[materiaux]>div {
	background-color:		black;
	background:				url("") no-repeat center center/cover;
	border:					1px solid #FFFFFF22;
	width:					100%;
	height:					100%;
	border-radius:			100%;
}
div[materiaux][index='0'], div[materiaux][index='1'], div[materiaux][index='2'] {
	width:					32.4vh;
	height:					32.4vh;
}
div[materiaux][index='3'], div[materiaux][index='4'], div[materiaux][index='5'], div[materiaux][index='6'] {
	width:					18.52vh;
	height:					18.52vh;
}
div[materiaux][index='0'] { left: 11.11vh;						top: 18.52vh; }
div[materiaux][index='1'] { left: calc(50% - 32.4vh/2);			top: 13.8vh; }
div[materiaux][index='2'] { left: calc(100% - 32.4vh - 11.11vh); 	top: 18.52vh; }
div[materiaux][index='3'] { left: 11.11vh; 						top: 64.8vh; }
div[materiaux][index='4'] { left: calc(37% - 18.52vh/2); 			top: 58.33vh; }
div[materiaux][index='5'] { left: calc(63% - 18.52vh/2); 			top: 58.33vh; }
div[materiaux][index='6'] { left: calc(100% - 18.52vh - 11.11vh); 	top: 64.8vh; }


div[materiaux][index='0']>div {
	transform:				rotate(-10deg);
}
div[materiaux][index='2']>div {
	transform:				rotate( 10deg);
}

.langues, .consignes, .copyrightbtn {
	position: 				absolute;
	bottom:					2.77vh;
}
.langues {
	font-size:				2.6vh;
	color:					#444;
	right:					2.77vh;
	text-align:				right;
	width:					18.52vh;
}
.langues>div {
	display:				inline-block;
	margin:					0vh 0.93vh;
	color:					#666;
}
.langues>div.selected {
	color:					#00FFA0;
}
.consignes {
	right:					0vh;
	width:					100%;
	color:					white;
	font-size:				2.6vh;
	font-style:				italic;
	text-align:				center;
	pointer-events:			none;
}
.copyrightbtn {
	color:					#888;
	left:					2.77vh;
	text-align:				left;
	width:					18.52vh;
	font-size:				3.33vh;
	font-weight:			300;
}

div[action], div[action]>div {
	transition:				color linear 0.25s, border-color linear 0.25s;
}
div[action]>div {
	display:				inline-block;
	vertical-align:			top;
	margin:					3.7vh 2.77vh 0vh 1.85vh;
	font-weight:			300;
	font-size:				1.85vh;
	position: 				relative;
	top: 					50%;
	transform: 				translateY(-50%);
	text-transform:			uppercase;
}
div[action][inGroup].selected>div {
	font-weight:			500;
	color:					black;
}
div[action]>img {
	width:					7.87vh;
	border-radius:			7.87vh;
	border:					0.19vh solid transparent;
}
div[action]:not([action='home']):not([action='back'])>img {
	background:				white;
	border-color:			#00000064;
	box-shadow:				0vh 0vh 2.77vh #00000044;
}
div[action]>div span>span {
	color:					black;
}
div[action].disabled {
	opacity:				0.2;
}
toto.disabled {
	display:				none;
}
div[action='close'], div[action='back'], div[action='home'] {
	position: 				absolute;
	bottom:					2.77vh;
	right:					2.77vh;
	border:					0.19vh solid white;
	width:					4.16vh;
	height:					4.16vh;
	border-radius:			4.16vh;
	color:					white;
}
div[action='close']>div, div[action='back']>div, div[action='home']>div {
	margin:					-0.27vh 0vh 0vh 0.78vh;
	font-size:				4.35vh;
}
div[action]:not([action='home']):not([action='back']).selected>img {
	border-color:			#00FFA0;
}
div[action='close'].selected, div[action='close'].selected>div, div[action='home'].selected, div[action='home'].selected>div {
	color:					#00FFA0;
	border-color:			#00FFA0;
}

div[action='close'] {
	color:					black;
	border-color:			black;
}
div[action='home'] {
	opacity:				0;
	transition:				opacity linear 0.25s;
	right:					8.33vh;
}
div[action='home']>img, div[action='back']>img {
	background:				transparent;
	width:					3.24vh;
	margin:					0.27vh 0vh 0vh 0.27vh;
}
div[action='back']>img {
	background:				transparent;
	width:					2.96vh;
	margin:					0.74vh 0vh 0vh 0.37vh;
}
body[step='zoom'] div[action='home'], body[step='play'] div[action='home'] {
	opacity:				1;
}

body[step='zoom'] div[action='home'], body[step='zoom'] div[action='back'], body[step='zoom'] div[action='close'], body[step='play'] div[action='home'], body[step='play'] div[action='back'], body[step='play'] div[action='close'] {
	background:				white;
	border:					1px solid black;
}
body[step='zoom'] div[action='home']>img, body[step='zoom'] div[action='close']>div, body[step='play'] div[action='home']>img, body[step='play'] div[action='close']>div {
	filter:					invert(100%);
}

.icon_touch {
	 width: 				16.2vh;
}

.piewrapper {
	background:				white;
	display:				none;
	position: 				absolute;
	right:					2.77vh;
	top:					2.77vh;
	z-index:				99;
	width: 					3.14vh;
	height: 				3.14vh;
	border-radius: 			50%;
	border:					0.19vh solid black;
	padding:				0.19vh;	
}
.pie {
	position: 				relative;
	width: 					100%;
	height: 				100%;
	border-radius: 			50%;
	background: 			black;
	background-image:		linear-gradient(to right, transparent 50%, white 0);
}

@keyframes spin {
	to { transform: rotate(.5turn); }
}
@keyframes bg {
	50% { background: white; }
}

.pie::before {
	content: 				"";
	position: 				absolute;
	top: 					0;
	left: 					50%;
	width: 					50%;
	height: 				100%;
	border-radius: 			0 100% 100% 0 / 50%;
	background-color: 		inherit;
	transform-origin: 		left;
	animation: 				spin 50s linear infinite, bg 100s step-end infinite;
	animation-play-state:  	paused;
	animation-delay: 		inherit;
}






.hotspotPulse {
	height:				100%;
	width:				100%;
}
@-webkit-keyframes pulsate {
    0% 		{ transform: scale(0.1, 0.1); opacity: 0.0;  }
    50% 	{ 							  opacity: 0.3;  }
    100% 	{ transform: scale(1.0, 1.0); opacity: 0.0;  }
}


div[hotspot] {
	background:		black;
	margin:			0.93vh 0 0 1.85vh;
	padding:		0.83vh 1.11vh;
	background:		#00FFA0;
	border:			1px solid #00000064;
	box-shadow:		0vh 0vh 2.77vh #00FFA033;
	border-radius:	0.93vh;
	color:			black;
	font-size:		1.7vh;
	font-weight:	600;
	display:		inline-block;
	pointer-events:	auto;
}
div[hotspot].selected {
	color:			darkgray;
	border-color:  	darkgray;
	background:		black;
	box-shadow:		none;
}

#hotspots {
	pointer-events:	none;
	position: 		absolute;
	width:			29.16vh;
	right:			2.5vh;
	bottom:			9.72vh;
	height: 		30%;
	line-height:	100%;
	text-align:		right;
	text-transform: uppercase;
}
#hotspots>div {
	position:		absolute;
	bottom:			0;
}

#popup {
	z-index:		99;
	position: 		absolute;
	width:			50%;
	max-height: 	76vh;
	padding:	 	2%;
	left: 			-100vw;
	margin-left:	23%;
	bottom:			4.62vh;
	background: 	linear-gradient(155deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.9) 25%, rgba(0,0,0,.85) 75%, rgba(0,0,0,.5) 100%);
	overflow-y:		auto;
	overflow-x: 	hidden;
}
.highlight {
	box-shadow:		0vh 0vh 2.77vh #FFFFFF11;
}

#popup #popupClose, .obsidienne_revers .close, #credits .close {
	position: 		absolute;
	font-size:		3em;
	font-weight:	100;
	left: 			95%;
	color:			#AAA;
}
#popup #popupClose {
	top:			6%;
}
#credits .close {
	left:			94%;
	top:			4%;
	font-weight:	400;
}
.obsidienne_revers .close {
	bottom:			5%;
	color:			white;
}


#gigapixel {
	top:			9.26vh;
	height:			calc(100% - 9.26vh);
}
#titrage {
	text-align:		center;
	position: 		absolute;
	top:			0vh;
	width:			100%;
	height:			9.26vh;
	left:			0;
	display:		none;
	background: 	rgba(0, 0, 0, 0.9);
	background: 	linear-gradient(155deg, rgba(20,20,20,1) 0%, rgba(0,0,0,1) 100%);
	pointer-events: none;
}

#titragetable {
	height:			calc(100% - 3.7vh);
	margin-top:		1.85vh;
}
#titragetableleft {
	text-align:		left;
	vertical-align:	middle;
	padding:		0vh 2.77vh 0vh 2.77vh;
}
#titragetableleft h1 {
	font-size:		2.77vh;
	margin-bottom:	0.46vh;
}
#titragetableleft h1, #titragetableleft h2 {
	text-transform:	initial;
}
#titragetableright {
	text-align:		left;
	vertical-align:	middle;
	border-left:	1px solid #4e4e4e;
	padding:		0vh 2.77vh 0vh 2.77vh;
}
#titragetableextremeright {
	text-align:		left;
	vertical-align:	middle;
	border-left:	1px solid #4e4e4e;
	padding:		0vh 2.77vh 0vh 2.77vh;
}
#titragetableextremeright h3 {
	font-weight:	300;
	font-size:		1.85vh;
}

#titrageEchelle {
	display:		none;
	position:		absolute;
	right:			2.4vh;
	top:			3.24vh;
	width:			20%;
	height:			1.3vh;
	line-height:	1.3vh;
	color:			#00FFA0;
	opacity:		.75;
}
#titrageEchelle div {
	width:			100%;
	height:			100%;
	margin-left:	auto;
	font-weight:	400;
}
#zoom {
	margin-top:		0.19vh;
	font-size:		0.93vh;
	color:			white;
	font-weight:	500 !important;
}
#titrageEchelle #scale {
	width:			100%;
	height:			0.55vh;
	border-right:	1px solid #00FFA0;
	border-left:	1px solid #00FFA0;
	border-bottom:	1px solid #00FFA0;
}

#titrageZone {
	display:	none;
	position:	absolute;
	left:		2.4vh;
	/*top:		calc(100vh - 100% - 13.8vh);*/
	bottom:		-82vh;
	border:		0.19vh solid #353535;
	background:	black;
}
#titrageZone #zone, #titrageZone #zoneBackground {
	position:	absolute;
	left:		0;
	top:		0;
	width:		100%;
	height:		100%;
	background:	url("") no-repeat center center/contain;
}
#titrageZone #zoneBackground {
	opacity:	0.25;
}
#titrageZone #zone {
	outline:	1px solid #00FFA0;
}