body
{background-color:#1E90FF;
margin : 0;
top: 0;
padding: 0;
left: 0;}

#en_tete
{background-image: url(images/background_baniere.png);
background-repeat: no-repeat;
background-position: left top; 
width: 100%;
background-size: 100%;
top: 0;
height: 0;
padding: 0;
padding-bottom: 30%;
background-size: 100%;
background-repeat: no-repeat;
left: 0;
font-size: 10px;
margin-bottom: -8%;}

.autoco
{margin-left: 23%;
margin-top: 7%;}

.nom_site
{margin-top: 5%;
position: absolute;}

#pied_de_page
{background-image:url(images/pied_de_page.png);
background-repeat: no-repeat;
background-position: left bottom;
width:100%;
height:350px;
background-size: 100%;
position: relative;
bottom: 0; left: 0;
font-size: 10px;}

#pdp_copyright
{font-size: 12px;
text-align: center;
font-weight: bold;
padding-top: 270px;}

#pdp_infos
{text-align: center;
font-size: 12px;}

#pdp_maj
{text-align: right;
font-size: 10px;}

.texte1
{background-image:url(images/buisson.png);
background-repeat:no-repeat;
background-position: center right;
background-size: auto 100%;
text-align: center;
font-family:monotype corsiva;
font-size: 2.5vw;
color:#ADD1F9;}

.container
{background-image:url(images/mouche.gif);
background-repeat:no-repeat;
background-position: center left;
background-size: 125px 58px;}


.slideshow {  
   width: 350px;  
   height: 200px;  
   overflow: hidden;  
   border: 3px solid #F2F2F2;  
   margin-left: auto;
   margin-right: auto;
}  
  
.slideshow ul {  
    /* 4 images donc 3 x 100% */  
   width: 600%;  
   height: 200px;  
   padding:0; margin:0;  
   list-style: none;  
}  
.slideshow li {  
   float: left;  
}  

#actualite 
{text-align: center;
overflow:auto;
height: 40vh;
width: 70vw;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
background-image: linear-gradient(#ADD1F9, #1E90FF);
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;}

#calendar
{-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;}

#calendardiv
{text-align: center;}


/*-- POPUP LIEN --*/
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}

.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 5% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
 
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}

.x{
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}


@media only screen and (max-width: 767px) {

#pied_de_page
{background-image:url(images/pied_de_page.png) no-repeat;
height:300px;
background-size:100% 100%;
margin:0;
padding:0;
bottom:0;}

#pdp_copyright
{font-size:10px;
padding-top:220px}

#pdp_infos
{font-size:10px;}

#pdp_maj
{font-size: 8px;}
}

#oModal
{overflow:auto;}

#oModal_mobile
{width: 80%;}

@media (max-device-width:767px) and (orientation: landscape) {

#pied_de_page
{background-image:url(images/pied_de_page.png) no-repeat;
height:300px;
background-size:100% 100%;
margin:0;
padding:0;
bottom:0;}

#pdp_copyright
{padding-top: 220px;
font-size:10px;}

#pdp_infos
{font-size:10px;}

#pdp_maj
{font-size: 10px;}
}

#oModal
{overflow:auto;}

#oModal_mobile
{width: 80%;}