/*GENERAL*/
	@font-face {font-family: 'gotham';src: url('../police/gothamlight.otf') format('truetype');
				font-weight: normal;	font-style: normal;}

	@font-face {font-family: 'gotham';src: url('../police/gothamlight-italic.otf') format('truetype');
				font-weight: lighter;	font-style: italic;}

	@font-face {font-family: 'gotham';src: url('../police/gothamblack.otf') format('truetype');
				font-weight: bold;}

	@font-face {font-family: 'gotham';src: url('../police/gotham-blackitalic.otf') format('truetype');
				font-weight: bold;	font-style: italic;}

	* {margin:0;padding:0;overflow: hidden;font-family:"gotham";text-decoration: none;color: black;}
	body{width: 100%;height: 100%;}
	main{margin-left: 20px;margin-right: 20px;}
	p{width: 85%;margin: auto;padding-top: 10px;padding-bottom: 10px;
		font-weight:inherit;font-style: italic;font-size: 1.5em;}	
	h1{padding-bottom: 5px;}

	/*HEADER*/
	header {position: relative; top: 10px; height: 15%;max-width: 97%;margin:auto;margin-bottom: 20px;
			display: flex; display: -webkit-flex; justify-content: space-between; align-items: flex-start;}
	#logo{background: url(../img/logo.svg);background-size: contain;  background-repeat: no-repeat;  background-position: center;width: 100%;height: 100%;margin: 10px;}
	header p{font-size: 1em;}

	/*JEUX*/
	#scene { position: absolute;z-index: 30;display: none;}
	#sceneGraphique { position: absolute;width:100%;height:100%;z-index: 5;background-color: #00B1B1;}/*background: #d7cf65;*/
	#page {z-index: 20;position:absolute;top: 20px;width: 60.7%;left : 38.2%;/*equivaut aux proportion du nombre d'or*/
			bottom:20px; background: rgba(255,255,255,0.61);text-align: center;overflow: auto;}
	#barreControleJeux{position: absolute;top: 5px;left:5px;z-index: 25;}
	.iconControleJeux{position: relative;margin-left: 5px;width: 30px;cursor: pointer;}
	.panneauJeu{position: absolute;top: 5px;right:5px;z-index: 25;background: rgba(255,255,255,0.6);padding: 20px;
				display: flex; display: -webkit-flex; justify-content: space-between; align-items: flex-start;}
	.boutonSuivant{padding: 10px 20px;font-weight:bold;font-size: 2em;cursor: pointer;float: right;margin-top: 10px;
					background-color: rgb(163,12,12);color: white;text-transform: uppercase;}
	.panneauJeu img{flex:1;  max-height: 250px;}
	.panneauJeu p{flex:1;width: 200px}
	#explicationTouche1 img{width: 500px;margin: auto;display: block;margin-left: 20px;}
	#explicationTouche1 p{text-align: center;margin: none}

	.questionCentrale{position: absolute;padding: 20px;width: 38.2%;height: 14.6%;background: rgba(255,255,255,0.6);margin: auto;z-index: 30;top:20px;right: 20px;}
	.questionCentrale p{text-align: center;}

	.choixBoutons{width: 100%;padding:10px;display: flex; display: -webkit-flex; justify-content: space-around; align-items: flex-start;}
	.bouton{padding: 10px 20px;font-weight:bold;font-size: 2em;background-color: rgb(163,12,12);color: white;text-transform: uppercase;cursor: pointer;}


	/*ACCUEIL*/
	#carousselExplication {width: 100%;cursor: w-resize;}
	#carousselExplication .item img{display: block;width: 100%;height: auto; background: rgba(255,255,255,0.61);}

	#explication{padding-top: 10px;padding-bottom: 10px;display: flex; display: -webkit-flex; justify-content: space-around; align-items: flex-start;}
	#explication img{width: 30%;background: rgba(255,255,255,0.3);}

	nav {padding-top: 10px;padding-bottom: 10px;font-weight:bold;font-size: 2.5em;
		display: flex; display: -webkit-flex; justify-content: space-around; align-items: flex-start;}
	nav a{width: 40%;background-color: rgb(163,12,12);padding: 30px 20px 30px 20px;text-transform: uppercase;cursor: pointer;color: white;}

	/*FOOTER*/
	footer{padding-top:30px;padding-bottom: 30px;
		display: flex; display: -webkit-flex; justify-content: space-around; align-items: flex-start;
		color: black;text-decoration:none;font-size: 1.2em;font-weight: bold;text-decoration: underline;}

	.non-disponible{color: grey;cursor: default;/*font-weight: normal;*/}
	.non-disponible:hover{text-decoration: none;text-decoration: none;}
	.actuel{color: rgb(163,12,12);}
	.actuel:hover{text-decoration: none;}

	/*CONTACT*/
	form{width: 80%;margin: auto;}
	label{display: block;padding: 10px 0px;font-size: 1.5em}
	input{display: block;padding: 10px 20px;width: 100%;margin: auto;}
	textarea{display: inline-block;padding: 10px 20px;width: 100%;margin: auto;}
	#basForm{width: 100%;margin:auto;margin: 10px 0px;display: flex; display: -webkit-flex; justify-content: space-around; align-items: flex-start;}
	#basForm p{flex: 2;padding-right: 20px;}
	#basForm input{flex: 1;padding: 10px 20px;font-weight:bold;font-size: 2em;background-color: rgb(163,12,12);
					text-transform: uppercase;cursor: pointer;color: white;}
	.attentionContact{color: red;padding: 5px;}

	/*MENTIONS*/
	#mentions{padding: 20px;text-align: left;}
	#mentions h2{padding-top: 15px;padding-bottom: 10px;}
	#mentions p{font-size: 0.9em;}

	/*VERSION ECRAN MOYEN*/
	@media all and (max-width: 1100px) {
		#basForm input{font-size: 1em;}
	}

	/*VERSION ECRAN PEU HAUT*/
	@media all and (max-height: : 600px) {
		header {height: 100px;}
	}

	/*VERSION PETIT ECRAN*/
	@media all and (max-width: 900px) {
		footer {display: block;}
		footer a{display: block;padding-bottom: 10px;}
	}

	/*VERSION MOBILE*/
	@media all and (max-width: 800px) {
		#scene {display: none;}
		#sceneGraphique {display: none;}
		#page {width: 100%;left : 0px;background-color: rgb(206,234,233);top:0;}
		.iconControleJeux{display: none;}
		#commencerPartie{display: none;}
		#rejoindrePartie{width: 80%}	
	}