@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; }

body {
	font-family:"Roboto";
	margin:0;
	padding:0;
	width:100%;
	min-height:100vh;
	background:#9bd5e3;
	position:relative;
	color:#006837;
	background: url('/charte/fond.jpg');
	background-position: bottom;
	background-size: cover;
}
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; }
.content{display: flex; flex-direction: column; align-items: center;}
.main-image,.logo, .bravo{margin-top: 30px;}

.entete{display: 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: 441px; height: 397px; background: url("/charte/pg-4-classement.png") no-repeat; background-size: cover;}


.p2 .main-image{max-width: 300px;}
.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-top : 170px; list-style-type: none;
	height: 193px; overflow: auto;width: 94%;
}
.top-list::-webkit-scrollbar{width: 12px;}
.top-li{color: #FFFFFF;text-align: left;}

.title_game{font-family: 'Pacifico', cursive; width: 80%;}

/*#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; 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 only screen 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: 70%;}
	.btn-participez{width: 30%;}
	.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;}
}

@media only screen and (max-width: 800px) {
	body {background: url('/charte/fond-mobile.jpg');}
	#content { max-width:800px; margin:0 auto;}
	.main-image,.logo, .bravo, p1-photo{ width: 70%;}
	.btn-participez{width: 30%;}
	.btn-participez img{width: 100%;}
	.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%}
}

.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; }
}