/*
	Mind Palace par Julien Escalas & Sophie Jobez
	TIME CORP - ESCAPE GAME
*/

/* RESET */

	html, body, div, span, applet, object,
	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, abbr, acronym, address, big, cite,
	code, del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b,
	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody,
	tfoot, thead, tr, th, td, article, aside,
	canvas, details, embed, figure, figcaption,
	footer, header, hgroup, menu, nav, output, ruby,
	section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {display: block; }

	body {line-height: 1; }
	ol, ul {list-style: none; }

	body {-webkit-text-size-adjust: none; }

	input::-moz-focus-inner {border: 0; padding: 0; }
	input,
	select,
	textarea{-moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; }

/* FONTS */

	@font-face {
		font-family: "Alice";
		src: url('../fonts/Alice-Regular.ttf');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: "DMMono";
		src: url('../fonts/DMMono-Regular.ttf');
		font-weight: normal;
		font-style: normal;
	}

/* TEMPLATE */

	*{box-sizing:border-box;
	-moz-transition: opacity 0.3s ease, -moz-transform 0.3s ease; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; -ms-transition: opacity 0.3s ease, -ms-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease;}

	html {height: 100%; }
	body {height: 100%; background-color: #EEEEEE; font-family: "Alice", Times, Georgia, serif; color:#4a4444;
	-webkit-box-shadow: inset 0px 0px 80px -35px rgba(0,0,0,1);
	-moz-box-shadow: inset 0px 0px 80px -35px rgba(0,0,0,1);
	box-shadow: inset 0px 0px 80px -35px rgba(0,0,0,1);}

/* BASE */

	#background{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/mind.png") no-repeat bottom center transparent; background-size: cover; opacity: 0.25;}
	#background:after{content: ""; width: 120px; height: 120px; position: absolute; right: 20px; bottom: 30px; background: url("../img/timecorp.png") no-repeat center center transparent; background-size: auto 100%; }

	#wrapper {
		display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex;
		-moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center;
		-moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center;
		-moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
		position: relative; min-height: 100%; padding: 1.5em; z-index: 2; background-color: transparent;
		background-image: url("../img/layer1.png") no-repeat bottom center transparent;}

	.main,
	#main,
	#final {
		-moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%;
		-webkit-box-shadow: 0px 0px 100px -20px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 100px -20px rgba(0,0,0,0.3); box-shadow: 0px 0px 100px -20px rgba(0,0,0,0.3);
		z-index:1; position: relative; padding: 4em 4em 4em 4em; background: #ffffff; border-radius: 4px; cursor: default; max-width: 100%; opacity: 0.95; position: relative; text-align: center; width: 27em; min-width: 500px;}

	header{margin-bottom: 2.5em; padding-bottom: 2.5em; border-bottom: 1px solid #cbb292; position: relative;}
	header:after{content: ""; display:block; background: url("../img/sherlock.svg") no-repeat center center #FFFFFF; background-size: auto 100%; width: 30px; height: 20px; position: absolute; bottom:-10px; left: 50%; margin-left: -15px;}

	h1{text-transform: uppercase; font-size: 40px; letter-spacing: 2.5px; margin-bottom: 20px; color: #840a0a;}
	p.sous-titre{text-transform: uppercase; font-size: 18px; letter-spacing: 1px;}

	footer{margin-top: 2.5em; padding-top: 2.5em; border-top: 1px solid #cbb292; position: relative;}
	footer:after{content: ""; display:block; background: url("../img/sherlock.svg") no-repeat center center #FFFFFF; background-size: auto 100%; width: 30px; height: 20px; position: absolute; top:-10px; left: 50%; margin-left: -15px;}

	a,
	a:active{font-size: 13px; letter-spacing: 0.5px; color: #840a0a; text-transform: uppercase;}
	a:hover{color: #000000;}

	.invisible{display: none;}
	.visible{display: block;}

/* HOME */

	#main.bureau{box-shadow: none; background: transparent; width: 100%;}
	#main.bureau header:after{content: none;}

	#main.bureau h1 {text-transform: uppercase; font-size: 20px; letter-spacing: 10px; margin-bottom: 0; color: #333; font-family: Arial, sans-serif; }

	#main.bureau .apps,
	#main.bureau .apps:after{content:""; display: block; clear: both;}

	#main.bureau .apps{display: flex; flex-direction: row; justify-content:center; align-items:center; width: 100%; flex-wrap: wrap; max-width: 900px; margin: 0 auto;}
	#main.bureau .apps img{width: 100%; height: auto;}
	#main.bureau .apps li{display: block; margin: 10px 35px; width: 25%; max-width: 200px;}
	#main.bureau .apps li:hover{cursor: pointer;}
	#main.bureau .apps li span{display: block; overflow: hidden; border-radius: 100%; border: 5px solid #CCC; transition: all 0.2s ease 0s; width: 100%;}
	#main.bureau .apps li:hover span{border: 5px solid #AAA; box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.5);}
	#main.bureau .apps li p{text-transform: uppercase; padding: 20px 0 10px; letter-spacing: 1px;}
	#main.bureau .apps li:hover p{color: #840a0a;}
	#main.bureau .apps li em{font-style: italic; font-size: 13px; color: orangered; opacity: 0; transition: all 0.2s ease 0s;}
	#main.bureau .apps li:hover em{opacity: 1;}
	#main.bureau .apps li a{text-decoration: none; display: block; font-size: 16px; letter-spacing: 1px; color: #333; line-height: 12px;}
	#main.bureau .apps li a em{color: #0059FF;}

/* FORM */

	form,
	input{font-family: "DMMono", "Courier New", Courier, monospace; color:#4a4444;}

	label{font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom:15px; display: block;}
	input[type="text"]{display: block; width: 100%; padding: 10px; text-align: center; font-size: 18px; border: 1px solid #CCC; border-radius: 7px; background-color: #fafafa;}
	input[type="number"],
	input[type="text"]::-webkit-input-placeholder,
	input[type="number"],
	input[type="text"]:-moz-placeholder,
	input[type="number"],
	input[type="text"]::placeholder {font-size: 14px;}
	.error{border: 1px solid orange !important;}

	input[type="submit"]{display: block; width: 70%; max-width: 300px; padding: 10px; margin: 25px auto 0; text-align: center; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; border: 0 none; border-radius: 7px; background-color: #840a0a; color: #FAFAFA; opacity: 1;}
	input[type="submit"]:hover{opacity: 0.8; cursor: pointer;}

	.poids{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items:center; align-content:center; width: 100%; padding: 10px; text-align: center; border: 1px solid #CCC; border-radius: 7px; background-color: #fafafa; margin: 0 auto;}
	.poids input[type="number"]{display: block; background: transparent; border: 0 none; width: 100%; text-align: center; font-size: 18px; }
	.poids span{display: inline-block; margin-left: 10px;}

	footer a{display: block; transition: all 0.2s ease 0s; font-family: "DMMono", "Courier New", Courier, monospace; width: 100%; padding: 15px 10px 13px; display: inline-block; text-align: center; font-size: 14px; border: 1px solid #cbb292; border-radius: 7px; background-color: #fafafa; text-decoration: none;}
	footer a:hover{border: 1px solid green; background-color: green; color: #FFFFFF;}

/* QUESTIONNAIRE */

	#main.questionnaire,
	.main.questionnaire{width: 60%; position: relative;}

	.questionnaire:after{content:""; position: absolute; top: 0; left: 0; background: #ffffff; border-radius: 4px; z-index: 10; width: 100%; height: 100%; vertical-align: middle; display: flex; align-content: center; justify-content: center; flex-direction: column; font-size: 40px; opacity: 1;}
	#question1.questionnaire:after{content:"Question 1.";}
	#question2.questionnaire:after{content:"Bravo ! Question 2.";}
	#question3.questionnaire:after{content:"Bravo ! Question 3.";}
	#question4.questionnaire:after{content:"Bravo ! Question 4.";}
	#question5.questionnaire:after{content:"Bravo ! Question 5.";}

	.questionnaire label{text-transform: initial; font-size: 34px; letter-spacing: 1px; margin-bottom: 30px; font-family: "Alice", Times, Georgia, serif; color:#840a0a;}
	.info{margin-bottom: 20px; border: 1px solid orange; border-top: 0 none; width: 80%; margin: 0 auto; padding: 15px 10px; color: orange; font-size: 15px; font-family: "Alice", Times, Georgia, serif; border-radius: 0 0 7px 7px;}

	.progression{margin-top:25px;}
	.progression:after{content: ""; display: block; clear: both;}
	.progression span{display: block; width: 18.333%; height: 7px; background-color: #DDD; float: left; margin-right: 2%}
	.progression span:last-child{margin: 0;}

	.bravo{color: #111; text-transform: uppercase; font-size: 18px; letter-spacing: 0.5px;}

/* VIDEO */
	#final{width: 70%; max-height: 90vh;}
	.video video{width: 100%; max-height: 50vh;}

	#final h1{color: green}

	#final.end header {margin-bottom: 0; padding-bottom: 0; border-bottom: 0 none; position: relative; }
	#final.end header:after{content: none;}

	.loading{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; text-align: center; font-size: 50px; z-index: 271; color: #000; line-height: 200px;}
	.loading:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; z-index: -1;}
	.loading:after{content: ""; position: absolute; top: 25%; left: 5%; width: 0%; height: 50%; background-color: #840a0a; z-index: 200;}

	#final a{display: block; width: 100%; max-width: 500px; padding: 15px; margin: 35px auto 0; text-align: center; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; border: 0 none; border-radius: 7px; background-color: #840a0a; color: #FAFAFA; opacity: 1; text-decoration: none;}
	#final a:hover{background-color: green; cursor: pointer; animation:none;}

/* ANIMATIONS */

	.questionnaire:after{
		animation-name: questionnaire; animation-duration: 0.2s; animation-delay: 1.5s; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: linear; animation-fill-mode: forwards;
		-webkit-animation-name: questionnaire; -webkit-animation-duration: 0.2s; -webkit-animation-delay: 1.5s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards;}

		@keyframes questionnaire {
		  0% {opacity: 1;}
		  99% {opacity: 0;}
		  100% {visibility: hidden;}
		}

		@-webkit-keyframes questionnaire {
		  0% {opacity: 1;}
		  99% {opacity: 0;}
		  100% {visibility: hidden;}
		}

	.progression.etape1 .line1,

	.progression.etape2 .line1,
	.progression.etape2 .line2,

	.progression.etape3 .line1,
	.progression.etape3 .line2,
	.progression.etape3 .line3,

	.progression.etape4 .line1,
	.progression.etape4 .line2,
	.progression.etape4 .line3,
	.progression.etape4 .line4,

	.progression.etape5 .line1,
	.progression.etape5 .line2,
	.progression.etape5 .line3,
	.progression.etape5 .line4,
	.progression.etape5 .line5{background-color: #840a0a;}

	.progression.etape1 .line1,
	.progression.etape2 .line2,
	.progression.etape3 .line3,
	.progression.etape4 .line4,
	.progression.etape5 .line5{
		animation: blink 2s step-start 0s infinite; animation-timing-function: linear;
		-webkit-animation: blink 2s step-start 0s infinite; -webkit-animation-timing-function: linear;}

		@keyframes blink {
		  0% {opacity: 1;}
		  50% {opacity: 0.3;}
		  100% {opacity: 1;}
		}

		@-webkit-keyframes blink {
		  0% {opacity: 1;}
		  50% {opacity: 0.3;}
		  100% {opacity: 1;}
		}

	.loading{
		animation-name: loadingfade; animation-duration: 4s; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: linear; animation-fill-mode: forwards;
		-webkit-animation-name: loadingfade; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards;}}

		@keyframes loadingfade {
		  0% {opacity: 1;}
		  95% {opacity: 1;}
		  100% {opacity: 0;}
		}

		@-webkit-keyframes loadingfade {
		  0% {opacity: 1;}
		  95% {opacity: 1;}
		  100% {opacity: 0;}
		}

	.loading:after{
		animation-name: loading; animation-duration: 3s; animation-delay: 0.5s; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: linear; animation-fill-mode: forwards;
		-webkit-animation-name: loading; -webkit-animation-duration: 3s; -webkit-animation-delay: 0.5s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards;}}

		@keyframes loading {
		  0% {width: 0%}
		  95% {width: 90%}
		  100% {width: 90%; background-color: green;}
		}

		@-webkit-keyframes loading {
		  0% {width: 0%}
		  95% {width: 90%}
		  100% {width: 90%; background-color: green;}
		}

	#final a{
		animation: blink2 1s step-start 0s infinite; animation-timing-function: linear;
		-webkit-animation: blink2 1s step-start 0s infinite; -webkit-animation-timing-function: linear;}

		@keyframes blink2 {
		  0% {opacity: 1;}
		  50% {opacity: 0.75;}
		  100% {opacity: 1;}
		}

		@-webkit-keyframes blink2 {
		  0% {opacity: 1;}
		  50% {opacity: 0.75;}
		  100% {opacity: 1;}
		}


	@media (max-width: 640px) {
		.questionnaire:after{content: none !important;}
	}