#logo
{
position:absolute;
	left: 40px;
	top: 20px;
width: 15%;
height: auto;
background-color: rgb(0,112,166);
color: white;
font-size: 1.2em;
border-radius: 20px/20px;

text-align: center;
}
  		@media (max-width:480px) {
			#logo
					{	
				width: 110px;
				position: relative;
					left: 5px;
				margin-bottom: 30px;
				z-index:1;
					}
				}




#bandeau
{
	width: 100%;
	height: auto;
}
@media (max-width:750px) {
#bandeau
{
position: absolute;
	left: 80px;
	top: 6%;
	width: 310px;
	
		}
	}


#texte
 {
	Background-color: black;
	padding: 10px 50px 20px 50px;	
	font-family: corbel, arial;
	border-radius: 20px;
 }
 @media (max-width:480px) {
#texte
		{
	margin-left: 3%;
	font-size: 0.8em;
	padding: 2px 30px 2px 30px;	
		}
	}
	
 #texte p
 {
  width: 100%;
  height: auto;
  font-size: 1.2em;
  text-align: center;
  color: rgb(191,217,34);
 }
 /************************************************************
 encart rationnneur
 ******************************************************************/

 #article_maration
 {
	 display: inline-block;
	Background-color: rgb(191,217,34);
	padding: 5px 0px 20px 0px;
	font-weight: bold;
	color: black;
	width: 95%;
	height: 220px;
	margin-left: 2%;
	margin-top: 16px;
	border: 2px solid black;
	font-family: corbel, arial;
	vertical-align: top;
 }
   @media (max-width:720px) {
#article_maration
		{	
		height: 190px;
		}
	}
  @media (max-width:480px) {
#article_maration
		{	
	margin-left: 10px;
	width: 95%;
	padding: 5px 0px 10px 0px;
		height: 150px;
		}
	}
 
 
 #h1_maration
 {
	text-align: center;
	color: rgb(191,217,34);
	background-color: black;
	padding: 10px 0 10px 0;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
}
 
 
 #encart_texte_maration
 {
	width: 40%;
	font-size: 1.4em;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	vertical-align: top;
	margin-left: 5px;
}
 @media (max-width:920px) {
 #encart_texte_maration
		{
	font-size: 1.1em;
	width:30%;
		}
	}
		 @media (max-width:720px) {
 #encart_texte_maration
		{
	font-size: 0.9em;
		}
	}
 @media (max-width:480px) {
 #encart_texte_maration
		{
	font-size: 0.9em;
	margin-left: 10px;
	width: 95%;
	padding: 5px 0px 10px 0px;
	height: 135px;
		}
	}
 
 #bout_lien_maration
 {
width: 140px;
height: 30px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 0.8em;
border: 1px solid black;
border-radius: 20px;
margin: 10px 20px 0px 15px;
font-family: corbel, arial; 
 }
 
 #maration4
 {

width: 53%;
display: inline-block;
margin-top: 5px;
 }
  @media (max-width:1300px) {
#maration4
		{	
width: 58%;
		}
	}
  @media (max-width:1050px) {
#maration4
		{	
width: 57%;
		}
	}
  @media (max-width:920px) {
#maration4
		{	
width: 67%;
		}
	}
  @media (max-width:700px) {
#maration4
		{	
width: 66%;

		}
	}
  @media (max-width:600px) {
#maration4
		{	
width: 62%;
margin-left: 20px;
		}
	}
	
 /************************************************************
 encart calendrier
 ******************************************************************/
#h1_calendrier
{
	text-align: center;
	color: rgb(191,217,34);
	background-color: black;
	padding: 10px 0 10px 0;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
}
 
 
  #calendar
 {
	 display: inline-block;
	Background-color: rgb(191,217,34);
	padding: 5px 0px 20px 0px;
	font-weight: bold;
	color: black;
	width: 95%;
	height: 220px;
	margin-left: 2%;
	margin-top: 16px;
	border: 2px solid black;
	font-family: corbel, arial;
	vertical-align: top;
 }
   @media (max-width:720px) {
#calendar
		{	
		height: 190px;
		}
	}
  @media (max-width:480px) {
#calendar
		{	
	margin-left: 10px;
	width: 95%;
	padding: 5px 0px 10px 0px;
		height: 150px;
		}
	}
	
 #encart_texte_calendrier
 {
	width: 40%;
	font-size: 1.4em;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	vertical-align: top;
	margin-left: 5px;
}
 @media (max-width:920px) {
 #encart_texte_calendrier
		{
	font-size: 1.1em;
	width:30%;
		}
	}
		 @media (max-width:720px) {
 #encart_texte_calendrier
		{
	font-size: 0.9em;
		}
	}
 @media (max-width:480px) {
 #encart_texte_calendrier
		{
	font-size: 0.9em;
	margin-left: 10px;
	width: 95%;
	padding: 5px 0px 10px 0px;
	height: 135px;
		}
	}
 
 #accueil_main
 {
	 max-height: 150px;
	 margin-left: 10px;
	 margin-top: 10px;
	 	width: 10%;
 }
   @media (max-width:920px) {
 #accueil_main
		{
width: 10%;
		}
	}
  @media (max-width:480px) {
 #accueil_main
		{
display: none;
		}
	}
 
 #image_calendrier
  {
	 max-height: 150px;
	 max-width: 300px;
	 width: 30%;
	 vertical-align: top;
	 margin-top: 30px;
 }
    @media (max-width:920px) {
 #image_calendrier
		{
width: 30%;
		}
	}
	    @media (max-width:720px) {
 #image_calendrier
		{
width: 30%;
		}
	}
  @media (max-width:480px) {
 #image_calendrier
		{
display: none;
		}
	}
 
#image_graph_calendrier
{
	max-height: 150px;
	max-width: 200px;
	margin-left: 10px;
	width: 15%;

}
    @media (max-width:920px) {
#image_graph_calendrier
		{
width: 20%;
margin-top: 80px;
		}
	}
 @media (max-width:480px) {
#image_graph_calendrier
		{
display: none;
		}
	}
 
 
#boutdetail_cal
 {
width: 120px;
height: 30px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 0.8em;
border: 1px solid black;
border-radius: 20px;
margin: 0px 20px 0px 15px;
font-family: corbel, arial;
 }
@media (max-width:720px) {
#boutdetail_cal
		{
		width: 85px;
		height: 20px;
		}
	}
   @media (max-width:480px) {
#boutdetail_cal
		{	
	margin-top: 0px;
	width: 85px;
		}
	}
 
 #boutconnexion_cal
 {
width: 75px;
height: 30px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 0.8em;
border: 1px solid black;
border-radius: 20px;
margin: 15px 20px 0px 15px;
font-family: corbel, arial;
 }
 @media (max-width:720px) {
 #boutconnexion_cal
		{
		width: 65px;
		height: 20px;
		}
	}
    @media (max-width:480px) {
#boutconnexion_cal
		{	
	margin-top: 0px;
	width: 65px;
	}}
 
 
 
 
 
 /**********************************************************************
 formation en ligne
 *************************************************************************/
 #h1_formation_online
 {
	text-align: center;
	color: rgb(191,217,34);
	background-color: black;
	padding: 10px 0 10px 0;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
 }
 

 #formationenligne
 {
	 display: inline-block;
	Background-color: rgb(191,217,34);
	padding: 5px 0px 20px 0px;
	font-weight: bold;
	color: black;
	width: 95%;
	height: 220px;
	margin-left: 2%;
	margin-top: 16px;
	border: 2px solid black;
	font-family: corbel, arial;
	vertical-align: top;
 }
   @media (max-width:720px) {
 #formationenligne
		{	
		height: 220px;
		}
	}
  @media (max-width:480px) {
 #formationenligne
		{	
	margin-left: 10px;
	width: 95%;
	padding: 5px 0px 10px 0px;
		height: 220px;
		}
	}
	
#encart_texte_formation
{
	width: 40%;
	font-size: 1.4em;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	vertical-align: top;
	margin-left: 5px;
}
 @media (max-width:920px) {
#encart_texte_formation
		{
	font-size: 1.1em;
	width:30%;
		}
	}
		 @media (max-width:720px) {
#encart_texte_formation
		{
	font-size: 0.9em;
		}
	}
 @media (max-width:480px) {
#encart_texte_formation
		{
	font-size: 0.9em;
	margin-left: 10px;
	width: 95%;
	padding: 5px 0px 10px 0px;
	height: 135px;
		}
	}
	
#boutdetail_formation
 {
width: 120px;
height: 30px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 0.8em;
border: 1px solid black;
border-radius: 20px;
margin: 0px 20px 0px 15px;
font-family: corbel, arial;
 }
@media (max-width:720px) {
#boutdetail_formation
		{
		width: 85px;
		height: 20px;
		}
	}
   @media (max-width:480px) {
#boutdetail_formation
		{	
	margin-top: 0px;
	width: 85px;
		}
	}
	
#image_formation
{
	max-height: 180px;
	width: 55%;
	margin-left:4%;
	margin-top: 5px;

}
@media (max-width:900px) {
#image_formation
		{	
	margin-top: 20px;

		}
	}
@media (max-width:480px) {
#image_formation
		{	
display:none;
		}
	}
 
 #boutconnexion_formation
 {
width: 75px;
height: 30px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 0.8em;
border: 1px solid black;
border-radius: 20px;
margin: 15px 20px 0px 15px;
font-family: corbel, arial;
 }
 @media (max-width:720px) {
 #boutconnexion_formation
		{
		width: 65px;
		height: 20px;
		}
	}
    @media (max-width:480px) {
#boutconnexion_formation
		{	
	margin-top: 0px;
	width: 65px;
	}}
 
	
	
	
	
	
 
  .sstitre
  {
font-size: 0.8em; 
font-style: italic;
  }
  
    .prix
  {
font-size: 0.6em; 
font-style: italic;
margin: 0px 0px 0px 0px;
  }

 .dateavenir
 {
	display: inline-block;
	Background-color: rgb(191,217,34);
	font-size: 0.9em;
	padding: 5px 5px 20px 5px;
	color: black;
	width: 95%;
	height: 250px;
	overflow: auto;
	text-align: left;
	margin-left: 2%;
	margin-top: 15px;
	vertical-align: top;
	border: 2px solid black;
	font-family: corbel, arial;
 }
 @media (max-width:480px) {
.dateavenir
		{	
	font-size: 0.9em;
	margin-left: 10px;
	width: 95%;
	padding: 5px 0px 10px 0px;
		height: 120px;
		}
	}
	
#h1_formation_avenir
{
	text-align: center;
	color: rgb(191,217,34);
	background-color: black;
	padding: 10px 0 10px 0;
	margin-top: 0px;
	margin-left: 0px;
}


	h2
	{
		text-align: center;
		font-size: 1.3em;
	}

#encart_1, #encart_2
{
	display: inline-block;
	vertical-align: top;
	text-align: justify;
	width: 500px;
	margin-left: 20px;
}

#encart_2
{
	margin-left: 70px;
}

#encart_3
{
	width: 90%;
	text-align: center;
	margin-left: 20px;
}
	
.gras
{
	font-weight: bold;
}

#coordonnees
{

	padding : 5px;
	margin: 10px 0 0 0;
}

 h1
 {
	 font-size: 1.4em; 
 }
 

  
 #boutdetail
 {
width: 120px;
height: 35px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 0.8em;
border: 1px solid black;
border-radius: 20px;
margin: 0px 20px 0px 15px;
font-family: corbel, arial;
 }
   @media (max-width:480px) {
#boutdetail
		{	
	margin-top: 0px;
	width: 85px;
		}
	}
 
 #boutconnexion
 {
width: 120px;
height: 35px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 0.8em;
border: 1px solid black;
border-radius: 20px;
margin: 0px 20px 0px 15px;
font-family: corbel, arial;
 }
    @media (max-width:480px) {
#boutconnexion
		{	
	margin-top: 0px;
	width: 85px;
	}}
	

  #cadres
 {
	 padding: 40px 0 0 0 ;
	 background-color: rgb(251,250,236);
margin-bottom: 20px;
	  display: inline-block;
 }


 
.encart
 {
 display: inline-block;
 vertical-align: top;
 width: 300px;
 margin: 10px 0 0 100px;
 }
      @media (max-width:480px) {
.encart
		{	
	 margin-left: 5px;
	height: auto;

	}}

.bouton
{
width: 300px;
height: 150px;
text-align: center;
background-color: black;
color: rgb(191,217,34);
font-size: 1.15em;
vertical-align: top;
border: 3px solid black;
border-radius: 20px 20px 0 0;
}
      @media (max-width:480px) {
.bouton
		{	
border-radius: 20px;
width: 270px;
height: 100px;
font-size: 1em;
	}}

	
/***************************************************************
encart rationneur
*****************************************************************/



	
#picptd
{
width: 294px;
 height: auto;
 border: 3px solid black;
 border-radius: 0 0 20px 20px;
}
      @media (max-width:480px) {
#picptd
		{	
display: none;

	}}



#contactarnaud, #contactmathieu
{
display: inline-block;
Background-color: black;
margin: 10px 0 0 60px;
width: 400px;
height: 220px;
vertical-align: top;
}
      @media (max-width:480px) {
#contactarnaud, #contactmathieu
		{	
display: inherit;
margin: 20px 0 0 10px;
width: 320px;
font-size: 0.9em;
height: 175px;
}}

#contactarnaud p, #contactmathieu p
{
margin: 5px 30px 20px 170px;
padding-top: 20px;
font-size: 1.2em;
color: rgb(191,217,34);
text-align: left;
vertical-align: center;
}
@media (max-width:480px) {
	#contactarnaud p, #contactmathieu p
		{	
	margin-left: 130px;
	padding-top: 10px;
	}}


#photocontact
{
height: 220px;
width: auto;
position: absolute;
}
@media (max-width:480px) {
	#photocontact
		{	
	height:175px;
	
		}
	}

strong
{
font-style: bold;
text-decoration: underline;
}

#contmath, #contarn
{
padding-top: 5px;
font-size: 0.9em;
color: rgb(191,217,34);
text-align: left;
vertical-align: center;
}
@media (max-width:480px) {
#contmath, #contarn
		{	

}}