*{
margin:0;
padding:0
}

*html{
  /*font-size: 1vw;*/
}

body{
	background:url('../images/fond5.png');
	font-family: 'myriad pro' ,sans-serif;
  }

#conteneur{
	width: 70%;
	min-height: 850px;
	position: absolute;
	top: 10px;
	left: 0;
	right:0;
	z-index: 1;
	margin:auto;
}
#main-cont{
	background-color:#FFF;
	margin-top: 5px;
	box-shadow: 1px 1px 8px #999;
	overflow: hidden;
	min-height: 850px;
}

section#milieu table td{
	/*width: 210px;*/
}

#milieu img{
	margin:5px;
}

section#milieu{
  width: 85%;
  min-height: 670px;
  /*margin:auto;*/
  position:relative;
  /*left:9%;/*/
  left:15%;
  top:10%;
  z-index:1;
}


table{
	width:85%;
}

/*==============================HEADER=======================================*/
header img{
	float: left;
	width:120px;
	margin-top:2px;
	margin-bottom:2px;

}

header{
	width: 100%;
	box-shadow: 1px 1px 8px #999;
	border-radius:2px;
	overflow: hidden;
}

header h1{
	font-family: 'Courgette', cursive;
	font-size:32px;
	color:black;
	text-align:center;
}
/*header p{
	font-family: , cursive;
	font-size:20px;
}
/*===============================ADS============*/

#ads_haut{
	display:block;
	margin-top:5px;
	text-align:center;
}

#ads_droite{
	float:right;
	width: 25%;
	display:block;
	margin-right:3px;
}

#milieu_contenu{
	width: 75%;
}

/*================champ de recherche===============================*/
#divo{
	width:100%;
	margin-bottom:10px;
	clear:both;
	overflow: hidden;
}




/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding.
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}


	label#sel {position:relative}
	label#sel:after {
		content:'<>';
		font:11px "Consolas", monospace;
		color:#aaa;
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		transform:rotate(90deg);
		right:26px; top:2px;
		padding:0 0 2px;
		border-bottom:1px solid #ddd;
		position:absolute;
		pointer-events:none;
	}
	label#sel:before {
		content:'';
		right:12px; top:-2px;
		width:20px; height:20px;
		background:#f8f8f8;
		position:absolute;
		pointer-events:none;
		display:inline-block;
	}
} */

#sel_the{
	float:right;
	padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #666666 0 -1px #fff inset;
    background: #f8f8f8;
    color:#666666;
    border:none;
    outline:none;
    /*-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;*/
    cursor:pointer;
	font-weight:bold;
	
}

#recherche{
	width:60%;
	display:inline-block;
	
}
#recherche input[type=text]{
	width:60%;
	padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#666666;
	font-weight:bold;
    border:none;
    outline:none;
}

#recherche input[type=submit]{
	padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #666666, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#666666;
	font-weight:bold;
	text-align:center;
    border:none;
    outline:none;
    display: inline-block;
    /*-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;*/
    cursor:pointer;
}
/*==========================NAV(MENU)=================================*/

nav#haut ul{
	width:100%;
	height:50px;
	margin-left:30%; 
}


nav#haut ul li{
	height:90%;
	width:18%;
	display:inline-block;
	text-align:center;
	background-color:#475967;
	text-decoration:none;
	transition: all .2s;  
	vertical-align: middle;
	margin-top: 5px;
	-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;
	
}

nav#haut ul li a{
  color:white;
  font-size:120%;
  text-decoration:none;
  display:block;
  line-height:45px;
  font-family: 'Courgette', cursive;
  transition: all .2s;
}

nav#haut ul li a:hover{   
  font-size:140%; 
  text-decoration:none;
}

nav#haut ul li:hover{  
  text-decoration:none;
  background-color:rgba(71,89,103,0.5);
}

nav#haut ul li:first-child{
  background-color:#FFCF56;
}
nav#haut ul li:nth-child(2){
	background-color:#FFA225;
}
nav#haut ul li:nth-child(3){
  
    background-color:#B8E85E;
}




/*---------------------------NAV (menu2gauche)------------------------------*/


nav#gauche{
  width:14%;
  height:0px;
  margin-top:1%;
  margin-left:5px;
  margin-right:1%;
}
nav#gauche ul{
  margin-bottom:10px;  
}


nav#gauche ul li{
  height:40px;
  width:100%;
  display:block;
  text-align:center;
  background-color:#FFA225;
  border-bottom: 1px solid white;
  text-decoration:none;
  transition: all .2s; 
  cursor:pointer;
  
}

 nav#gauche ul li a{
  color:white;
  text-decoration:none;
  font-family: 'Roboto', sans-serif;
  display:block;
  transition: all .2s;
  font-weight:normal;
}

nav#gauche ul li a:hover{    
  font-size:110%;
  text-decoration:none;
}





nav#gauche ul li:nth-child(2){
  background-color:#87D6F8;
  line-height:40px;
}
nav#gauche ul li:nth-child(3){
  background-color:#6FCEF5;
  line-height:40px;
}
nav#gauche ul li:nth-child(4){
  background-color:#3D9FC7;
  line-height:40px;
}

nav#gauche ul li:nth-child(5){
  background-color:#0B7099;
  line-height:40px;
}


nav#gauche ul#app li:nth-child(1){
  background-color:#B8E85E;
  line-height:40px;
}
nav#gauche ul#app li:nth-child(2){
  background-color:#ff8080;
  line-height:40px;
}
nav#gauche ul#app li:nth-child(3){
  background-color:#FFCF56;
  line-height:40px;
}
nav#gauche ul#app li:nth-child(4){
  background-color:#FFA225;
  line-height:40px;
}
nav#gauche ul#app li:nth-child(6){
  background-color:#B8E85E;
  line-height:40px;
}
nav#gauche ul#app li:nth-child(7){
  background-color:#ff8080;
  line-height:40px;
}
nav#gauche ul#app li:nth-child(8){
  background-color:#6FCEF5;
  line-height:40px;
}
nav#gauche ul#app li:nth-child(9){
  background-color:#FFA225;
  line-height:40px;
}

nav#gauche ul#app li:nth-child(10){
  background-color:#FFCF56;
  line-height:40px;
}

nav#gauche .label{
  font-family: 'Courgette', cursive;
}


nav#gauche ul#menu li:nth-child(1){
  background-color:#87D6F8;
  line-height:40px;
}
nav#gauche ul#menu li:nth-child(2){
  background-color:#87D6F8;
  line-height:40px;
}
nav#gauche ul#menu li:nth-child(3){
  background-color:#87D6F8;
  line-height:40px;
  color:#000000;
}
/*============================LIENS_RESEAUX=============================================*/

#reseau{
	position:absolute;
	top:850px;
	left:20px;
	z-index:2;
}

#reseau img{
	display:block;
	margin-top:5px;
}



/*============================ZONES_MILIEU=============================================*/

article{
	font-family: 'myriad pro' ,sans-serif;	
}

article#desc{
  padding: 1%;
}


/*==========================slide=====================================================*/


#slider-wrapper {
    background:url(../images/slider.png) no-repeat;
    width:40%;
    height:150px;
    margin:0 auto;
    padding-top:50px;
    margin-top:15px;
	margin-bottom:55px;
}

#slider {
	position:relative;
    width:40%;
    height:146px;
	margin-bottom:50px;
	background:url(../images/loading.gif) no-repeat 50% 50%;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}

.nivo-controlNav {
	position:absolute;
	left:200px;
	bottom:-40px;
}
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(../images/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(../images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

.clear {
	clear:both;
}

/*=============================affichage index===============================================*/


#bloc3{
	width:49%;
	min-height:200px;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}
#bloc3 h2{
	text-align:center;
	font-family: 'Courgette', cursive;
}

#bloc3 a.titre{
	font-size:24px;
	text-align:center;
	font-family: 'Courgette', cursive;
	color:#000;
}

#bloc3 #label_jeu{
	width:100%;
	height:20px;
	text-align:center;
}

#bloc3 p{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#666;
}

#jeu_box{
	border:solid gray 1px;
	margin:2px;
	padding:2px;
}

#jeu_box #jeu_img{
	width:49%;
	display:inline-block;
	text-align:right;
}

#jeu_box #jeu_titre{
	width:49%;
	display:inline-block;
	vertical-align:top;
	text-align:left;
}

#jeu_box img{
	width:120px;
}


#bloc4{
	width:49%;
	min-height:200px;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}

#bloc4 #label_jeu{
	width:100%;
	height:20px;
	text-align:center;
}


#bloc4 h2{
	text-align:center;
	font-family: 'Courgette', cursive;
}

#bloc4 a.titre{
	font-size:24px;
	text-align:center;
	font-family: 'Courgette', cursive;
	color:#000;
}

#bloc4 p{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#666;
}






/*===============================Affichage fiche jeu==========================================*/

#logo_jeu{
	width:40%;
	vertical-align:top;
	display:inline-block;
	
}

#logo_jeu img{
	margin-bottom:20px;
}

#logo_jeu p{
	margin-left:5px;
	margin-bottom:5px;
	color:#999;
	font-family:Verdana, Geneva, sans-serif;
	font-size:80%;
	
}

#desc_jeu{
	width:55%;
	display:inline-block;
	padding:1%;
}

#desc_jeu h1{
	font-family: 'Courgette', cursive;
	font-size:150%;
	margin-bottom:10px;
	line-height:120%;
}
	
#desc_jeu p{
	font-family: 'myriad pro' ,sans-serif;
	font-size:90%;
	color:#333;
}

#info_pub{
	width:100%;
}

#info_pla{
	width:220px;
	height:100px;
	display:inline-block;
	padding:1%;
	vertical-align:top;
	margin:5px;
}
#info_pla p{
	font-family: 'myriad pro' ,sans-serif;
	font-size:90%;
	color:#333;
}

#info_pla_img{
	width:220px;
	display:inline-block;
	text-align:center;
}

#info_pla_gd{
	vertical-align:top;
	display:inline-block;
	width:220px;
	margin:1px;
}



/*============================ESPACE DEV + MENU_DEV=============================================*/



nav#menu_dev ul{
  width:80%;
  height:30px;
  margin-left: 20%;
  margin-bottom: 20px; 
}


nav#menu_dev ul li{
  height:inherit;
  width:30%;
  display:inline-block;
  text-align:center;
  background-color:#b4d469;
  text-decoration:none;
  transition: all .2s;  
  vertical-align: middle;
  border-radius: 8px 8px 8px 8px;
}

 nav#menu_dev ul li a{
  color:white;
  font-size:120%;
  text-decoration:none;
  display:block;
  line-height:30px;
  transition: all .2s;
}

section#index_dev{
  width: 70%;
  min-height: 600px;
  margin-left: 20%;
  padding: 5px;
  margin-top: 5px;
  background-color:#b4d469;
  border-radius: 8px 8px 8px 8px;
}

#choi_jeu{
  height: 400px;
}
#choi_jeu select{
  margin-top: 5px;
}
#info_dev{
  width: 50%;
  height: 100px;
  border-radius: 8px 8px 8px 8px;
  background-color: white;
  padding: 2px;
}


/*============================FORMULAIRE_connex===========================================*/


section#inscrip_dev{
  width: 70%;
  min-height: 600px;
  margin-left: 20%;
  padding: 5px;
  margin-top: 5px;
  background-color:#b4d469;
  border-radius: 8px 8px 8px 8px;
}


#form_dev form{
  margin-top: 20px;
}

#form_dev form input{
  padding: 2px;
  display: block;
  margin: 10px 10px;
}

#form_dev form input[type=submit]{
  width: 100px;
  margin-left: 40px;
  background-color:#4cc3a5;
  color: white;
  border: none;
}

#form_connex form{
  margin-top: 100px;
}

#form_connex form input{
  padding: 2px;
  display: block;
  margin: 10px 10px;
}

#form_connex form input[type=submit]{
  width: 100px;
  margin-left: 40px;
  background-color:#4cc3a5;
  color: white;
  border: none;
}

#recup_mdp form{
  margin-top: 50px;
  margin-left: 10px;
}

#recup_mdp label{
  display: block;
}
#recup_mdp form input[type=submit]{
  display: block;
  width: 160px;
  background-color:#4cc3a5;
  color: white;
  margin-top: 10px;
  padding: 2px;
  border: none;
}

/*==================================FORMULAIRE _JEU==========================================*/

#ajou_jeu{
  width: 70%;
  min-height: 600px;
  margin-left: 20%;
  padding: 5px;
  margin-top: 5px;
  background-color:#b4d469;
  border-radius: 8px 8px 8px 8px;
}

#haut_form_jeu input{
  margin:15px 15px;
  padding: 2px;
}

#haut_form_jeu input[type=text]{
  margin:15px 15px;
  display: block;
  padding: 2px;
}

#haut_form_jeu select{
  margin:15px 15px;
  display: block;
  padding: 2px;
}

#desc_courte{
  width: 60%;
  height: 50px;
  margin:15px 15px;
  display: block;
  padding: 2px;
}
#desc_longue{
  width: 60%;
  height: 150px;
  margin:15px 15px;
  display: block;
  padding: 2px;
}

#radio{
  width: 50%
}

#radio input{
  margin:10px 15px;
  padding: 2px;
}


#radio label{
  margin-right: 15px;
}

#select_support form input{
  display: block;
  padding: 1%;
}

#select_support select{
  margin: 5px;
}

#select_support input[type=text]{
  width: 250px;
  margin:5px;
  display: block;
  padding: 2px;
}

#select_support p{
  margin: 10px 50px;
}

#select_support label{
  margin-left: 5px;
}

#age select{
  display: inline-block;
}

#ajou_jeu form input[type=submit]{
  width: 120px;
  height: 25px;
  margin: 20px 250px;
  background-color:#4cc3a5;
  border: none;
  cursor: pointer;
  color: white;

}
/*==================================FORMULAIRE _JEU_IMG==========================================*/

#ajou_img_jeu{
  width: 70%;
  min-height: 600px;
  margin-left: 180px;
  padding: 5px;
  margin-top: 5px;
  background-color: rgba(0, 0, 0, 0.3);
}

#ajou_img_jeu form input[type=file]{
  display: block;
  padding: 2px;
  margin: 2%;
}
#ajou_img_jeu form input[type=submit]{
  width: 150px;
  height: 25px;
  margin-left: 40px;
  padding: 2px;
  background-color: CornflowerBlue;
  border: none;
  cursor: pointer;
}
/*========================================CONTACT============================================*/
#contact{
  width: 60%;
  min-height: 600px;
  margin-left: 200px;
}

#contact form input{
  margin:2%;
  padding: 2px;
  display: block;
  border: 2px solid gray;
}
#contact form textarea{
  width: 60%;
  height: 150px;
}
/*=======================================FOOTER===============================================*/
#footer{
  width: 100%;
  min-height: 150px;
  margin-top: 10px;
  color:white;
  background:#232d3b url("../images/deco_footer.png") no-repeat;
}

#footer table{
  width:auto;
}

#footer a{
  text-decoration: none;
  list-style-type: none;
  text-align:center;
}

/*#footer img{
  width: 100%;
  margin-top:-85px;
}*/

.vide{
	width:100%;
	text-align:center;
}

.vide2{
	width:100%;
	text-align:center;
}

.vide2 a{
	color:#FFF;
}

.foot{
  width: 25%;
  height: 60px;
  display: inline-block;
  vertical-align: bottom;
  color:white;
  padding:1%;
  padding-top:5%; 
  text-align:center; 
}

/*===========================================================================================*/
label#ok{
  color:green;
  font-size: 150%;
}
label#no{
  color: red;
  font-size: 150%;
}

#msg{
  color:#f37006;
  display:block;
  width:100%;
  padding:0 0 8px 0;

}
#color_champ{
  background-color:#fcdbb7;
}






.jeu_bloc img{
	width:100px;	
}

.app_titre{
	font-size:1.3em;
}

.apps_box a{
	font-size:1em;
}

.apps_box td{
	font-size:.8em;
}

.apps_box img{
	width:90px;
}

img.coeur {
	width:30px;
}

#jeu_box img.coeur {
	width:30px;
}

a.acoeur {
	width:90px;
	height:90px;
	background-size:90px 90px;
	margin:5px;
}

a.acoeur_index {
	width:120px;
	height:120px;
	background-size:120px 120px;
	margin:5px;
}

/*=============================================MEDIAS_QUERIES==============================*/
      

@media screen and (max-width:1070px){   
 #conteneur{
  width:90%;
  
  }

  }

@media screen and (max-width:860px){   
 #conteneur{
  width:95%;
  }
  
header h1{
	font-family: 'Courgette', cursive;
	font-size:25px;
	text-align:center;
}
 



}
@media screen and (max-width:660px){   
 #conteneur{
  width:100%;
  }
#desc_jeu{
	width:100%;
	display:inline-block;
	padding:4%;
}

#logo_jeu{
	width:100%;
	margin-left:75px;
}

  }

@media screen and (max-width:530px){   
  #conteneur{
  width:100%;
  top:0%;
  padding:1%;
  }

}
@media screen and (max-width:400px){   
  
  } 

a{
	font-size:14px;
	color:#FFA225;
	font-weight:bold;
}

a:hover{
	color:#6FCEF5;
}

a.sscat{
	font-size:14px;
	color:#0B7099;
	font-weight:bold;
}

a.sscat:hover{
	color:#6FCEF5;
}




/************* MEDIA QUERIES *************/


/********* iPhone 6 Plus in portrait & landscape ********/
@media only screen 
and (min-width : 375px) 
and (max-width : 812px) { 
	
	
	
	nav#gauche ul li{
 	 height:20px;
	}

	nav#gauche ul li:nth-child(2){
	  line-height:20px;
	}
	nav#gauche ul li:nth-child(3){
	  line-height:20px;
	}
	nav#gauche ul li:nth-child(4){
	  line-height:20px;
	}
	
	nav#gauche ul li:nth-child(5){
	  line-height:20px;
	}
	
	nav#gauche ul#app li:nth-child(1){
	  line-height:20px;
	}
	nav#gauche ul#app li:nth-child(2){
	  line-height:20px;
	}
	nav#gauche ul#app li:nth-child(3){
	  line-height:20px;
	}
	nav#gauche ul#app li:nth-child(4){
	  line-height:20px;
	}
	nav#gauche ul#app li:nth-child(6){
	  line-height:20px;
	}
	nav#gauche ul#app li:nth-child(7){
	  line-height:20px;
	}
	nav#gauche ul#app li:nth-child(8){
	  line-height:20px;
	}
	nav#gauche ul#app li:nth-child(9){
	  line-height:20px;
	}
	
	nav#gauche ul#app li:nth-child(10){
	  line-height:20px;
	}
	
	nav#gauche ul#menu li:nth-child(1){
	  line-height:20px;
	}
	nav#gauche ul#menu li:nth-child(2){
	  line-height:20px;
	}
	nav#gauche ul#menu li:nth-child(3){
	  line-height:20px;
	}
	
	nav#haut ul{
		height:30px;
		margin-left:35%; 
	}
	
	nav#haut ul li a{
	  line-height:28px;
	}
	
	nav#haut ul li a{
	  font-size:75%;
	}
	
	
	header h1{
		font-size:18px;
	}
	
	header img{
		/*width:60px;*/
	
	}
	
	a{
		font-size:12px;
	}
	
	article#desc{
	  font-size:.5em;
	}
	
	.jeu_bloc td{
		font-size:.5em;
	}
	
	.jeu_bloc img{
		width:40px;	
	}
	
	#jeu_box{
		font-size:.5em;
	}
	
	#jeu_box img{
		width:40px;	
	}
	
	#bloc3 a.titre{
		font-size:1em;
	}
	
	#bloc3 #label_jeu{
		font-size:.5em;
		height:10px;
	}
	
	
	#bloc4 a.titre{
		font-size:1em;
	}
	
	#bloc4 #label_jeu{
		font-size:.5em;
		height:10px;
	}
	
	h1{
		font-size:1.1em;	
	}
	
	h2{
		font-size:1.1em;	
	}
	
	#ads_droite{
		display:none;
	}
	
	.app_titre{
		font-size:1em;
	}
	
	.apps_box a{
		/*font-size:.5em;*/
	}
	
	.apps_box td{
		font-size:.3em;
	}
	
	
	.apps_box img{
		width:40px;
	}
	
	a.sscat{
		font-size:10px;
	}
	
	#conteneur{
	  width:100%;
	}
	
	#logo_jeu{
		width:95%;
	}
	
	#desc_jeu{
		width:95%;
		display:inline-block;
		padding:4%;
	}
	
	a.acoeur {
		width:40px;
		height:40px;
		background-size:40px 40px;
		margin:5px;
	}
	
	a.acoeur_index {
		width:40px;
		height:40px;
		background-size:40px 40px;
		margin:5px;
	}
	
	img.coeur {
		width:15px;
	}
	
	#jeu_box img.coeur {
		width:15px;
	}

	
}

/********************************************************/