@font-face {
	font-family: "backtonature";
	src: url(/charte/fonts/BackToNatureBold-lgd4V.ttf) format("truetype");
}

*, *:before, *:after { box-sizing:border-box; -webkit-box-sizing:border-box; }
img { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

html{
	height: -webkit-fill-available;
}

body {
	font-family:"Roboto";
	margin:0;
	padding:0;
	width:100%;
	min-height:100vh;
	min-height: -webkit-fill-available;
	background:#9bd5e3;
	position:relative;
	color:#006837;
	background: url('/jeu-extrafino/imgs/fond.png');
	background-position: bottom;
	background-size: cover;
	-webkit-background-size: cover;
	background-repeat: no-repeat;
}
a { color:#006837; text-decoration:none; }
.resp { max-width:100%; height:auto; }
#content { max-width:900px; margin:0 auto; position:relative; z-index:200; text-align:center; min-height: -webkit-fill-available;}
.content{
	display: flex;
	display:-webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	align-items: center;
	-webkit-flex-align: center;
	min-height: -webkit-fill-available;
}
.content>div{margin-top:20px;}
.main-image,.logo, .bravo{margin-top: 30px;}
.logo{box-shadow: rgba(0,0,0,0.5) 3px 3px 2px; border-radius: 15px;}

.entete{display: flex; display:-webkit-flex; flex-direction: row;justify-content: space-between;width: 60%; margin-top: 30px;}
.entete img{max-height: 40px;}
.btn-participez{margin-top: 50px;}
.classement{width: 490px; height: 397px; background: url("/jeu-extrafino/imgs/p4/classement.png") no-repeat; background-size: auto; background-position: top center; padding-top : 85px;}


.p2 .main-image{max-width: 300px;}
.p2 .slogan{max-width: 210px; margin-top: 20px;}
.p3 .cadre{
	border: #FFF 5px solid;
	border-radius: 15px;
	background-color: rgba(255,255,255,0.5);
	height: 600px;
	margin-top: 30px;
}

.top-list{
	margin-left: 20px;
	list-style-type: none;
	height: 255px;
	overflow: auto;width: 94%;
}
.top-list::-webkit-scrollbar{width: 12px;}
.top-li{color: #FFFFFF;text-align: left;}

.rejouez{margin-top: 30px;}

.title_game{font-family: Arial, sans-serif; font-weight: bold; width: 80%; font-size: 2.0em; text-shadow: rgba(0,0,0,0.5) 2px 2px;}
#info{text-shadow: rgba(0,0,0,0.5) 2px 2px;}
/*#majeur { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.98); z-index:9999999; }*/
/*#majeur div { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); text-align:center; }*/
/*#majeur div a { display:inline-block; border:1px solid #A8CE45; font-size:20px; line-height:20px; padding:10px 20px; background-color:#A8CE45; color:#ffffff; margin-top:10px; }*/
/*#majeur div a:hover { border:1px solid #A8CE45; background-color:#ffffff; color:#A8CE45; }*/

.hover { cursor:pointer; -webkit-transition: all .2s ease; transition: all .2s ease; }
.hover:hover { transform:scale(1.2); -webkit-transform:scale(1.2); z-index:888; }

.roue { position:absolute; z-index:-1; }

.pushscore { position:absolute; top:0; left:0; z-index:999999; }

button { padding:0; margin:0; background:transparent; border:0; cursor:pointer;  }

form .fbloc { display:flex; display:-webkit-flex; width:100%; margin:10px 0; text-align: left}
/*form .fbloc label { font-size:20px; font-weight:bold; display:table-cell; width:160px; text-align:left; }*/
/*form .fbloc span { display:table-cell; }*/
/*form .fbloc input { width:100%; color:#FFFFFF; font-size:20px; font-weight:bold; border:0; background:transparent; border-bottom:2px solid #006837; }*/
/*form input[name="vhuman"] { display:none; }*/
form label{color: white; font-size: 1.5em;font-weight: bold;margin-right: 10px; white-space: nowrap;}
form .fbloc input{border: #553015 3px solid; border-radius: 15px; font-size: 1.5em; width: 100%; padding-left: 10px;}

@media (min-width: 800px) and (max-width: 1024px) {
	/*body {background: url('/charte/fond-mobile.jpg');}*/
	#content { max-width:800px; margin:0 auto;}
	.main-image,.logo, .bravo, p1-photo{ width: 50%;}
	.logo{max-width: 228px;}
	.main-image{max-width: 400px;}
	.p2 .slogan{max-width: 100%; width: 50%;}
	.p2 .slogan{ margin-top: 50px;}
	.btn-participez{width: 50%;}
	.btn-participez img{width: 100%;}
	.rejouez{width: 40%; margin-top: 30px;}
	.rejouez img{width: 100%;}
	.bravo{margin-top: 50px;}
	.p2 .main-image{max-width: 70%;}
	/*form .fbloc input{font-size: 2.0em;}*/
	/*form label{font-size: 2.0em;}*/
	/*form .fbloc {width:80%;margin-left: 10%;}*/
	.p2 input[type='image']{width: 40%}
	/*.top-li{font-size: 1.5em;}*/
	/*.classement{margin-top: 30px;}*/
	/*.top-list{margin-top : 100px; margin-left: 20px;}*/

}

@media (min-width: 480px) and (max-width: 800px) {
	/*body {background: url('/charte/fond-mobile.jpg');}*/
	#content { max-width:800px; margin:0 auto;}
	.bravo, p1-photo{ width: 50%;}
	/*.btn-participez{width: 100%;}*/
	/*.btn-participez img{width: 460px;}*/
	.p2 .main-image{max-width: 70%;}
	/*form .fbloc input{font-size: 2.0em;}*/
	/*form label{font-size: 2.0em;}*/
	/*form .fbloc {width:80%;margin-left: 10%;}*/
	.p2 input[type='image']{width: 40%}
	.top-list{height: 228px;}
	.p1-photo{width: 100%;max-width: 460px;}
}

@media only screen and (max-width: 480px) {
	.main-image, .bravo, .p1-photo{ width: 80%;}
	.classement{background-size: cover; width: 340px; height: 275px;padding-top: 63px}
	.top-list{font-size: 1.0em;margin-left: 0px; height: 163px;}
	.fbloc{flex-direction: column}
	.p2 .texte{max-width: 80%;}
}

.win { max-width:600px; margin:20px auto; font-weight:900; font-size:20px; width:100%; padding:15px 20px; border:0; color:#0d5142; background-color:#FFFFFF; border-radius:10px; -webkit-border-radius:10px; }

.loop { -webkit-animation: slide 3s linear infinite; animation: slide 3s linear infinite; }

@keyframes slide {
	from { background-position: left 0; }
	to { background-position: left 324px; }
}
@-webkit-keyframes slide {
	from { background-position: left 0; }
	to { background-position: left 324px; }
}
@-moz-keyframes slide {
	from { background-position: left 0; }
	to { background-position: left 324px; }
}