html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

html,body{ 
	background-color: white;
	overflow: hidden;
	animation-duration: 1s;
}
html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
canvas{
  display:block;
  vertical-align:bottom;
}
#container{
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	z-index: 2;
	width: 100%;
  	height: 100%;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	overflow: hidden;
}

.case{
	background: rgba(255,255,255,1);
	text-align: center;
	font-family: arial;
	color: #444;
	display: table-cell;
	transition-duration: 0.6s;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	border-radius: 15%;

}
.plateau{
	display: table-cell;
	margin: auto;  
	position: absolute;
	left:0;
	right: 0;
}
.case:hover{
	background-color:rgba(240,240,240,1);
	cursor: pointer;
}
.caseSelected{
	background-color:rgb(255,200,150);
	border-color: rgb(255,200,150);
}
.caseSelected:hover{
	background-color:rgb(255,180,120);
}
.lastCase{
	background-color:rgb(255,150,0);
}
.lastCase:hover{
	background-color:rgb(255,100,0);
}
.end{
	background-color:rgb(150,255,100);
}
.end:hover{
	background-color:rgb(80,255,50);
}
.overlay{
	top:100px;
	font-family: arial;
	font-size: 50px;
	text-align: center;
	margin: auto;  
	position: absolute;
	left:0;
	right: 0;
	color: #444;
}
.main-content{
	margin: auto;
	text-align: center;
	background: rgb(255,255,255); /* Old browsers */
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.main-menu, .menu-jouer, .ig-menu, .endPRMenu, .menu{
	position: relative;
	display: flex;
    align-items: center;
    z-index: 10;
}
.menu-option{
	background: rgba(255,255,255,0.5);
	padding: 20px;
	box-shadow: 1px 1px 0px 3px;
	width: 50%;
	color: #444;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	cursor: pointer;
	font-size: 20px;
	text-align: center;
	border-radius: 10px;
	transition-duration: 0.1s;
	font-family: arial;
	font-size: 20px;
}
.menu-option:hover{
	transform: translate(2px,2px);
	box-shadow:0px 0px 0px 2px;
}

.menu-elts{
	min-height: 100px;
	width: 100%;
}
.loading{
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
	height: 100%;
	width: 100%;
	transition-duration: 0.2s;
}
.menu-button{
	background-color: none;
	background-size: 60%;
	z-index: 2;
	background-repeat: no-repeat;
	background-image: url("menuButton.jpg");
	background-position: 50% 50%;
	width: 50px;
	height: 50px;
	border-radius: 15%;
	border: solid 2px #AAA;
	box-shadow: 0px 0px 10px lightgrey;
}
.menu-button:hover{
	box-shadow: 0px 0px 10px grey;
	cursor: pointer;
}
.reset-button:hover{
	box-shadow: 0px 0px 10px grey;
	cursor: pointer;	
}
.ig-menu{
	height: 100%;
	z-index: 3;
	width: 100%;
	background: rgba(255,255,255,0.9);
	opacity: 0;
}
.reset-button{
	z-index: 2;
	font-size: 40px;
	color: #444;
	line-height: 50px;
	vertical-align: middle;
	text-align: center;
	height: 50px;
	width: 50px;
	border-radius: 15%;
	border: solid 2px #AAA;
	box-shadow: 0px 0px 10px lightgrey;
}
.endPRMenu{
	height: 100%;
	width: 100%;
	box-shadow: 0px 0px 20px lightgrey;
	background: rgba(255,255,255,0.8);
	opacity: 0;
}
.score-display{
	padding: 20px;
	color: #444;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
	border-radius: 10px;
	font-family: arial;
	font-size: 30px;
}
.score-survie-transition{
	color: #444;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 10px;
	font-family: arial;
	font-size: 18px;
}
.score-box, .timer-box{
	z-index: 1;
	width: 100%;
	text-align: center;
	font-size: 25px;
	font-family: arial;
	color: #444;
}
.scores{
	width: 50%;
	background: rgba(255,255,255,0.5);
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	box-shadow: 1px 1px 0px 2px;
	margin: auto;
	font-size: 20px;
	color: #444;
	margin-top: 30px;
	margin-bottom: 30px;
	font-family: arial;
	border-radius: 10px;
	line-height: 30px;
}
.score-survie{
	background: rgba(255,255,255,0.5);
	padding: 20px;
	box-shadow: 1px 1px 0px 3px;
	width: 50%;
	color: #444;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	cursor: pointer;
	text-align: center;
	border-radius: 10px;
	transition-duration: 0.1s;
	font-family: arial;
	font-size: 19px;
}
.bonus-case{
	transition-duration: 0s;
	background-image: url("chrono.png");
	background-size: 97%;
	background-repeat: no-repeat;
	background-position: 48% 55%;
}
.bonus-case:hover{

}
.recap-temps-survie{
	margin-top: 5px;
	line-height: 25px;
}
.recap-survie{
	background: rgba(255,255,255,0.5);
	padding: 20px;
	box-shadow: 1px 1px 0px 3px;
	width: 50%;
	color: #444;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	cursor: pointer;
	font-size: 18px;
	text-align: center;
	border-radius: 10px;
	font-family: arial;
}
hr{
	border-top: solid 2px #444;
}
img{
	width: 80%;
	min-width: 100px;
	max-width: 500px;
	height: 50%;
	object-fit: contain;
}