@font-face {
  font-family: "Roboto";
  src: url("Roboto/Roboto-Regular.ttf");
}





body{
  /*font: 15px/1.5 Arial, Helvetica,sans-serif;*/
  padding:0;
  margin:0;
  background-color:#f4f4f4;
  font-family: "Roboto";
  src: url("Roboto/Roboto-Regular.ttf");
}




ul{
  margin:0;
  padding:0;
}



/* Header */

header{
  background:#35424a;
  color:#ffffff;
  padding-top:20px;
  min-height:60px;
  border-bottom:#e8491d 3px solid;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}

header li{
  float:left;
  display:inline;
  padding: 0 15px 0 15px;
}

header #branding{
  float:left;
}

header #branding h1{
  margin:0;
}

header nav{
  /*float: right;*/
  margin-top:10px;
  padding-left:40%;
}

header .highlight, header .current a{
  color:#e8491d;
  font-weight:bold;
}

header a:hover{
  color:#cccccc;
  font-weight:bold;
}

/* Showcase */

#showcase{
  min-height:200px;
  background:url('img/showcase.jpg') no-repeat 0 -200px;
  text-align:center;
  color:#ffffff;
}

#showcase h1{
  margin-top:50px;
  font-size:55px;
  margin-bottom:10px;
  letter-spacing: 10px;
}

#showcase p{
  font-size:20px;
}



/*signification*/

#signification {
	 /*background-color:#D2D2D2;*/
	/*background-image: linear-gradient(to right, rgba(210,210,210,0), rgba(210,210,210,1));*/
	background-image:url(img/background-gradient.png);
	width:1210px;
	height:600px;
	margin:auto;
	margin-top:20px;

}

#signification .consign1 {
	width:620px;
	padding-left:20px;
	padding-top: 20px;
	float:left;
	position:relative;
	animation-name:example;
	animation-duration:3s;


}
#signification .consign1 img {
width:620px;	


}
@keyframes example {
	
	0% { left:0px;top:0px; }
	50% {left:0px; top:15px;}
	100% {left:0px; bottom:0px;}
}
#signification .consign1 h3 {
	
	color:#0c71c3;

}

#signification .consignin1   {
	/*float: left;*/
	color:#0A0A0A;
	position:absolute;
	margin: auto;
	font-size:14px;
	
	
}

#signification .consignin2   {
	/*float: left;*/
	color:#0A0A0A;
	position:absolute;
	margin: auto;
	text-align:justify;
	padding-top:30px;
	font-size:14px;
	
}

#signification .consignin2-1   {
	/*float: left;*/
	color:#0A0A0A;
	position:absolute;
	margin: auto;
	text-align:justify;
	padding-top:70px;
	font-size:14px;
	
}

#signification .consignin3   {
	/*float: left;*/
	color:#0A0A0A;
	position:absolute;
	margin: auto;
	padding-top:115px;
	font-size:14px;
	
}


#signification .consign2 {
	float:right;
	padding-right:40px;
	padding-top: 10px;
	width:500px;


}


 blockquote {
	
	border-left: 5px solid #2ea3f2;
	/*maring:20px 0 30px;*/
	padding-left:20px;
	
}

  
 
 .reveniractivite {
	background-color:#FF5F00;
	width:200px;
	height:60px;
	border-radius:5px;
	/*border:thin solid #000000;*/
	margin: auto;
	margin-top:150px;
	margin-right:120px;
	text-decoration:none;
	/*transition: width 1s, height 1s;*/
	
	
}
 .reveniractivite a p {
	font-family: "Roboto";
	src:url("Roboto/Roboto-Light.ttf");
	font-size:20px;
	padding-top:18px;
	/*padding-bottom:20px;*/
	text-align: center;
	
	

}
.reveniractivite a {
	text-decoration:none;
	color:#ffffff;
	

}
.reveniractivite a p:visited {
	text-decoration:none;
	color:#ffffff;
	

}
.reveniractivite:hover {
	background-color:#E90003;
	
	/*width:100px;
	height:120px;*/
	/*border:thin solid #000000;
	padding:0;
	padding-bottom:0x;*/

}

/*section votre theme*/

#votretheme {
	/*background-color:#C4BFBF;*/
	width:1210px;
	height:100px;
	margin: auto;
	margin-top:10px;
	text-align:center;
	
}

#votretheme .avousjouer {
	color:#E09900;
	font-size:30px;
	margin:auto;
	padding-top:15px;
	
}

#votretheme .choisissez{
	color:#000000;
	font-size:25px;
	margin:auto;
	font-weight:bold;
}

/*significatoon containerdejeux*/

#containerdejeux {
	/*background-color:#C4BFBF;*/
	/*background-image:url("img/background4.jpg");
	background-repeat:no-repeat, repeat;
	border-radius:10px;*/
	width:80%;
	height:1000px;
	margin:0 auto;
	margin-top:5px;
	padding:0 auto;
}

.themedejeux1{
	margin-left:100px;
}

#containerdejeux .boxtravail {
	  float:left;
	  text-align: center;
	  width:45%;
	  margin-left:40px;
	  padding-top:40px;
	  /*margin-right:-40px;*/

}
#containerdejeux .boxtravail img {
	width:320px;
	border-radius:10px;
	float:left;
}
.niveudejeu1 {

	background-color:#FF5F00;
	width:80px;
	height:40px;
	border-radius:5px;
	float:left;
	/*float:right;*/
	margin-left:15px;
	margin-right:60px;
	margin-top:100px;
	transition: width 1s;

}
.niveudejeu1 p {
	font-family: "Roboto";
	src:url("Roboto/Roboto-Light.ttf");
	font-size:25px;
	padding-top:5px;
	margin:0 auto;
} 

.niveudejeu1 a {
	text-decoration:none;
	color:#ffffff;
}
.niveudejeu1:hover   {
	background-color:#E90003;
	width:100px;
	text-align:center;

}

/*box themereveniractivite*/

#sectionreveniractivite {
	/*background-color:#00D1FC;*/
	margin:0 auto;
	width:80%;
	margin-top:-190px;
	
}

#sectionreveniractivite .boxrevenir {
	background-color:#FF5F00;
	width:200px;
	height:60px;
	border-radius:5px;
	text-decoration: none;
	margin:0 auto;
	margin-left:470px;
	margin-top:0px;
	text-align: center;
	
}
#sectionreveniractivite .boxrevenir a {
	text-decoration:none;
	color: #FFFFFF;
}
 #sectionreveniractivite .boxrevenir  p {
	font-family: "Roboto";
	src:url("Roboto/Roboto-Light.ttf");
	font-size:20px;
	margin-top:50px;
	padding-top:18px;
	/*padding-bottom:20px;*/
}1

#sectionreveniractivite .boxrevenir a p:visited {
	text-decoration:none;
	color:#ffffff;
}
 #sectionreveniractivite .boxrevenir:hover  {
	background-color:#E90003;
	/*width:100px;*/

}

/* Boxes */

.container{
  width:80%;
  margin:0 auto;
  overflow:hidden; 
  clear: both;
  font-family: 'Coiny', cursive;
}


#boxes{
  margin-top:20px;
	
}

#boxes .box{
  float:left;
  text-align: center;
  width:30%;
  padding:10px;
}

#boxes .box img{
  width:250px;
  border-radius:5px;
}
.entrer {
	background-color:#FF5F00;
	width:80px;
	height:40px;
	border-radius:5px;
	margin: auto;
	transition: width 1s;
}
.entrer p {
	font-family: "Roboto";
	src:url("Roboto/Roboto-Light.ttf");
	font-size:18px;
	padding-top:9px;
	
} 
.entrer a {
	text-decoration:none;
	color:#ffffff;
}
.entrer a:active {
	text-decoration:none;
	color: #00DBFF;
}
 .entrer:hover   {
	background-color:#E90003;
	width:100px;

}

#containerdejeux .themedejeux1 hr {
	display:none;
	border-width: 1px;
	border-style: inset;
	float:left;
	width:80%;
}


footer{
  padding:20px;
  margin-top:20px;
  color:#ffffff;
  background-color:#e8491d;
  text-align: center;
  font-size: 30px;
}



/* Media Queries */

/*@media only screen and (min-width: 600px) {...} */


@media only screen and (max-width: 768px){
  header #branding,
  #boxes .box {
    float:none;
    text-align:center;
    width:100%;
  }
	
  header nav li {
  	  float:left;
  	  margin:0 auto;
  	  width:100%;
  	  padding-top:10px;
  }
  header{
    padding-bottom:20px;
  }
 #showcase h1{
    margin-top:40px;
  }
#boxes .box img {

	width:220px;
}

	
#boxes .entrer {
	margin:0 auto;
	  
	}
	
 #signification {

 	background-image:none;
	margin-left:50px;

 }

 #signification ,.consign1{

 	width:80%;
	margin-left:50px;
 	
 }
#signification .consign1 img {

 	width:450px;
	
 	
 }
#signification .consignin1 {
		width:80%;
		
	}
#signification .consignin2 {
		width:80%;
		
	}
#signification .consignin2-1 {
		width:80%;
		
	}
#signification .consignin3 {
		width:80%;
		padding-top:110px;
		
	}
	
#signification img {

 	width:100%;
 }
#signification .consign2 blockquote{
  
     width:80%;
     margin-left:40px;
     margin-top:160px;
     padding-right:100px;
	 padding-top:0px;
     font-size:15px;
     text-align:left;
 }
  .consign2 blockquote{
     margin-bottom:-130px;
    
 }


.reveniractivite {
	width:50%;
	margin:0 auto;
	margin-top:180px;
	margin-left:160px;
}
.reveniractivite a p {
	font-size:25px;
	padding:0px;
	padding-top:14px;
}

#votretheme {

	width:100%;
	text-align:center;
	padding-top:200px;
	
}
#votretheme .avousjouer {

	font-size:25px;
}
#votretheme .choisissez {

	font-size:25px;
}

#containerdejeux .themedejeux1 hr {
	display:block;
	border-width: 1px;
	border-style: inset;
	width:80%;
	margin-top:30px;
	/*width:60%;
	margin-left:120px;*/
}	
	
#containerdejeux {
		margin-top:-20px;		
	}
#containerdejeux .themedejeux1 {
	width:100%;
	float:none; 
	text-align:center;

}

#containerdejeux .boxtravail img {
	width:220px;
}

#containerdejeux .boxtravail  {
	width:80%;
	margin-top:0px;
}

 #containerdejeux .niveudejeu1 {
	margin-top:50px;
	

	
}
#sectionreveniractivite {
	width:80%;
	margin-top:-20px;
	float:left;
}
#sectionreveniractivite .boxrevenir {
	margin:0 auto;
	margin-left:250px;


}

#footer {
	width:100%;
	float:left;
	margin:0 auto;
	margin-top:30px;


}
#footer p {
	margin:0 auto;
    text-align:center;
    font-size:20px;
}
	
}