/* Image de fond */


@font-face {
    font-family: 'open_sans';
    src: url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: 700;
    font-style: normal;

}




@font-face {
    font-family: 'open_sans';
    src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensans-light-webfont.woff') format('woff'),
         url('../fonts/opensans-light-webfont.ttf') format('truetype'),
         url('../fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: 300;
    font-style: normal;

}




@font-face {
    font-family: 'open_sans';
    src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body{
	/*
	  background: url('http://www.pm-vial.com/ino/imgs/fond_site_1900_v2.jpg') no-repeat center center fixed;
	  */

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   font-family: 'open_sans';
}
#wrapper {
  width:1000px;
  margin: 0px auto;
}


#entete_1 {
  background: url("../images/backgrd.jpg") no-repeat;
  background-size: cover;
  height:400px; 
  position: relative;
}

#entete {
  background: url("../images/pommes.jpg") no-repeat;
  background-size: cover;
  height:300px; 
  position: relative;
}

#entete h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Monospace;
    font-size: 50px;
  }

.img_right{
  float: right;
  align: right;
  margin: 10px;
}

.img_left{
  float: left;
  align: left;
  margin: 10px;
}
  

  .img_footer {
    width: 100%;
    height: auto;
    opacity: 0.9;
  }

  img {
    display: inline-block;
  }

button.btn_gb{
    position: absolute;
    font-family: 'open_sans';
    font-size: 20px;
    width: 120px;
    height: 50px;
    border-radius: 25px;
    border : 4px solid #73AD21;
    top: 550px;
    left: 600px;
    background: grey;
}

#menu, #menu ul{
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* on supprime le style par défaut de la liste */
	font-size:17px; /*taille de la police*/
	 /*italic*/
}

#menu > li
{
	float : left;
	position: relative; /* Pour la position absolute des sous-listes..*/
	background:#bbb;
	border-right:1px solid #blue;
}

#menu > li > a /* On charte les liens principaux */
{
	padding : 15px 10px; /* aucune marge intérieure */
	background : #D6F5D8  ; /* couleur de fond */
	color : #000; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défaut des liens */
	width : 230px; 
	display: block;
}

#menu li ul /* On va charter les sous-menus */
{
	position: absolute; /* Position absolue */
	width: 100%; /* Largeur des sous-listes */
	top:53px;
	left:0px;
	display: none;
}

#menu li ul a /*Liens des sous-menus*/
{
	width:90%;
	display: block; /* transformation en block pour le padding */
	background:#fff;
	text-decoration: none;
	color:#1A1A1A;
	padding:5px 5%;
	font-size:16px;
	border-bottom: 1px dotted #E2007A;
}

#menu > li a:hover,#menu > li:hover > a{ /* liens principaux */
background:#74AE0C;
color:#fff;
}
#menu li ul a:hover /* Liens du sous-menu */
{
background:#CBF07F;
color:#fff;
border-bottom: 1px dotted #fff;
}


#menu > li:hover ul{
display: block;
}

/* CONTENT */
#content {

  background: #b3e6cc;
  margin: 0px auto;
  padding:25px 20px 25px 20px;
}

#content .block_text {

  background: ;
  margin: 20px;
  padding: 20px;

  border-bottom: : solid 3px #dd8c19;
}

#content h2 {
  color: #2b2b2b;
  margin-bottom: 12px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.02em;
}

#content h3 {
  color: #dd8c19;
  margin-bottom: 5px; 
  font-weight: 300;
}

#content h4 {
  font-style: italic;
  margin-top: 10px;
}

#content p {
  color: #2b2b2b;
  text-align: justify;
  margin: 10px;
  line-height: 1.5em;
}

#content ul {
  color: #2b2b2b;
  
  margin: 3px;
  margin-bottom: 0pc;
}

#content ol {
  color: #2b2b2b;
  
  margin: 3px;
  margin-bottom: 0pc;
}

#content ul li {
  
  
  margin: 3px 3px;
  margin-left: 25px;
  line-height: 1.5em;
}

#content a, #content a:visited{
  color: #dd8c19;
}

#content a:hover, #content a:active{
  color: #fff;
  background: #dd8c19;
}

.clear {
  clear: both;
}


.col_1 {
  background: #b3e6cc;
  float: left;
  height: 400px;
  width: 240px;
  margin-top: 10px;
  padding: 19px;
  border-radius: 25px;
  border : 2px solid #73AD21;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 14px;
}
.bgimg {
  background-image: url('../images/ls.jpg');
}


.col_outil{
  background: #b3e6cc;
  float: left;
  height: 650px;
  margin-top: 10px;
  padding: 19px;
  width: 164px;
  border-radius: 25px;
  border : 2px solid #73AD21;
  margin-top: 10px;
  margin-left: 10px;
}

.col_left {
  background:#D4EFDF;
  margin-top:10px;
  margin-left: 0px; 
}
.col_middle{
    background:#A9DFBF ;
    width: 300px;
}
.col_right{
    background:#52BE80 ;
    width: 350px;
}




/* jour_choisi */
#jour_choisi{
  margin: 15px;
  background: #A9DFBF ;
}

#jour_choisi .periode{
  min-height: 120px;
  border-bottom: 1px solid #73AD21;
  padding: 10px;
}

#jour_choisi .periode h3{
  text-transform: uppercase;
  font-family: Georgia;
  font-size: 15px;
  font-style: italic;
}

/* FOOTER */
#footer {
  background: #232323;
  padding:0px 0px;
}

#footer p {
  font-size: 16px;
  text-align: center;
  color: white;
  text-transform: uppercase;

}
.image_right{
    float: right;
}

.agenda {  }

/* Dates */
.agenda .agenda-date { width: 170px; }
.agenda .agenda-date .dayofmonth {
  width: 40px;
  font-size: 36px;
  line-height: 36px;
  float: left;
  text-align: right;
  margin-right: 10px; 
}
.agenda .agenda-date .shortdate {
  font-size: 0.75em; 
}


/* Times */
.agenda .agenda-time { width: 140px; } 


/* Events */
.agenda .agenda-events {  } 
.agenda .agenda-events .agenda-event {  } 

@media (max-width: 767px) {
    
}