html { 
  margin:0;
  padding:0;
  background: url(../photos/landes.JPG) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: auto; /* version standardisée */
}
header {
/*	position:fixed;*/
	top: 0px;
	left: 0px;
	width:100%;
}

@font-face {
 font-family:arial;
 src: url("images/gabriola.ttf") format("truetype");

}


/* bandeau du haut*/
.div-1 {
	position:relative;	
	text-align: center;	
	top: 0px;
	left: 0px;
	width:auto;
	height:auto;
	
}


		
/* titre dans le bandeau du haut*/
.titre  {

}
.titre a {
	
	}
	
.titre img {
	max-width:100%;
	max-height:100%;
}







/*******************************************************/
/*      Premier bandeau du péambule                    */

#main{
position: relative;
margin: 10px 0 20px 0;	
height : 160px ; 
width :auto;
border: 1mm ridge rgba(138, 135, 135, .8);
border-radius: 10px;
}

#centrage-main {
	height: 155px;
	width :auto;
	background: linear-gradient(to bottom right, #53688C, rgba(0,0,0,0));
	margin : 0 ;
	overflow : auto ;
}
/* CONTENU
************************************************************************/
#contenu {
margin : 0; 
height : auto;  
overflow : auto ;
width :auto;
}


#inner-contenu {  /*pour centrer les div*/
     margin: 0 auto;
   /* width: 1600px; */
	}


#contenu p{
margin :0 0 0 auto ; 
/*padding : 0;*/
color : #000000;
font-weight:bold;
text-align: center;
font-family : Gabriola;
font-size: 1.6em;
color: white;
}


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

#div-1 {
	position:relative;	
	
	text-align: center;
	/*margin:5px 5px 5px 5px;*/
	top: 0px;
	left: 0px;
	height:150px;
	width:auto;
	overflow:auto;
	color: white;
		
}


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




/*
               fin du premier bandeau                  */
/*********************************************************/


/*******************************************************/
/*               second bandeau                        */
/*******************************************************/
#main-2{
position: relative;
margin: 20px 0 10px 0;	
height : 280px ; /*230px;*/
width :auto;
border: 1mm ridge rgba(138, 135, 135, .8);
border-radius: 10px;

}

#centrage-main-2 {
	height: 275px; /*255px*/
	width :auto;
    background-color: rgba(255,255,255, 0.5); 
	border: 1mm ridge rgba(138, 135, 135, .0);
	border-radius: 10px;
	margin : 0 ;
	overflow :hidden ;
		
}
/*********************************************/
/* CONTENU-3
**********************************************/

#contenu-2 {
margin : 0 ; 
height : auto;  
overflow : auto ;
width :auto;
}

#inner-contenu-2 {  /*pour centrer les div*/
     margin: 0 auto;
   /* width: 1000px; */
}


#contenu-2 h2 {
background : rgba(65,82,110,1.7);
color : #ffffff;
margin :  5px 10px 10px 5px  ; 
border-radius: 10px;
font-size : 1em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
}


#div-3 {
	/*display: inline-block;	*/
	float: left;
	margin-top:10px;
	margin-left: 10px;
	text-align: center;
	height: 155px;
	width :200px;
	background-color: rgba(65,82,110,1.7);
	border: 1mm ridge rgba(138, 135, 135, .6);
	border-radius: 15px;
	overflow :hidden ;
	
}


	 
#contenu_div-3 {
height : auto;  
overflow : auto ;
height: 145px;
width :auto;
background-color: #fffff;
text-align:left;
}

#contenu_div-3 h2 {
background : #FFFFFF;
color : #DF3A01;
font-size : 1,2em ;
text-align:center;
text-transform : uppercase;
font-weight:bold;
/*border: 1mm ridge rgba(138, 135, 135, .0);*/
 border-width: 5px ;
border-radius :10px;
}


#contenu_div-3  p{
margin : 5px 15px 0 15px ; 
padding : 0;
color : #000000;
font-weight:bold;
text-align: left;
font-family: arial;

}

#contenu_div-3 a {
 margin : 0 0 0 10px ;  
 color: white;
 text-decoration: none;

}

#contenu_div-3 a:hover {
 color: black;
}

#contenu_div-3  img {
margin : 5px 0 0 auto ;
float: left;
height: 270px;
width : 478px;
border: 1mm ridge rgba(138, 135, 135, .0);
border-radius: 10px;
}

/********************************************/
#div-4 {
	/*display: inline-block;*/
	float: left;
	margin-left: 10px;
	margin-top:5px;
	text-align: center;
	height: 160px;
	width :250px;
	background-color: rgba(65,82,110,0.7);
	border: 1mm ridge rgba(138, 135, 135, .6);
	border-radius :10px;
	overflow : hidden ;
}
	 
#contenu_div-4 {
margin: 0;
padding:0;	
height : auto;  
overflow : auto ;
width :auto;
background-color: #fffff;

}

#contenu_div-4 h2 {
background : #ffffff;
color : #fffffff;
margin :  10px 10px 10px 10px  ; 
padding : 0 5px 0 0;
font-size : 1.8em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
/*border: 1mm ridge rgba(138, 135, 135, .0);*/
 border-width: 5px ;
	border-radius :10px;
}


#contenu_div-4  p{
margin : 5px 0 0 auto ; 
padding : 0;
color : #000000;
font-weight:bold;
font-family: Comic Sans MS;
}

#contenu_div-4 a {
 color: white;
 text-decoration: none;
}

#contenu_div-4 a:hover {
 color: black;
}


#contenu_div-4  img {
margin : 5px 0 0 auto ;
padding : 0;
}




 /*                  fin du second bandeau               */
/*********************************************************/


/*******************************************************/
/*               troisieme bandeau                        */
/*******************************************************/
#main-3{
position: relative;
margin: 20px 0 10px 0;	
height : 185px ; 
width :auto;
border: 1mm ridge rgba(138, 135, 135, .8);
border-radius: 10px;
}

#centrage-main-3 {
	height: 180px;
	width :auto;
	background-color: rgba(255,255,255, 0.5); 
	border: 1mm ridge rgba(138, 135, 135, .0);
	border-radius: 10px;
	margin : 0 ;
/*	cursor: default;*/
	overflow : auto ;
}
/*********************************************/
/* CONTENU-3
************************************************************************/

#contenu-3 {
margin : 0; 
height : auto;  
overflow : auto ;
width :auto;
}

#inner-contenu-3 {  /*pour centrer les div*/
     margin: 0 auto;
    /* width: 1600px; */
}


#contenu-3 h2 {
background : #00000;
color : #fffff;
margin :  10px 10px 10px 10px  ; 
padding : 0 5px 0 0;
font-size : 1em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
}

#contenu-3 p{
margin : 5px 0 0 auto ; 
padding : 0;
color : #000000;
font-weight:bold;
}

#contenu-3 img {
margin : 0  ;

}

/********************************************/
/*******************************************************/
/*               quatrieme bandeau                        */
/*******************************************************/
#main-4{
position: relative;
margin: 20px 0 10px 0;	
height : 485px ; 
width :auto;
border: 1mm ridge rgba(138, 135, 135, .8);
border-radius: 10px;
}

#centrage-main-4 {
	height: 485px;
	width :auto;
	background-color: rgba(255,255,255, 0.0); 
	
	margin : 0 ;
/*	cursor: default;*/
	overflow : auto ;
}
/*********************************************/
/* CONTENU-4
************************************************************************/

#contenu-4 {
margin : 0; 
height : auto;  
overflow : auto ;
width :auto;
}

#inner-contenu-4 {  /*pour centrer les div*/
     margin: 0 auto;
     width: 1240px;
}


#contenu-4 h2 {
background : rgba(65,82,110,1.7);
color : #ffffff;
margin :  5px 10px 10px 5px  ; 
border-radius: 10px;
font-size : 1em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
}

#contenu-4 p{
margin : 5px 0 0 auto ; 
padding : 0;
color : #000000;
font-weight:bold;
}

#contenu-4 img {
margin : 0  ;
}

/********************************************/
#div-5 {
	display: inline-block;
	margin-left: 10px;
	text-align: center;
	height: 435px;
	width :600px;
	background-color: rgba(65,82,110,0.7);
	border: 1mm ridge rgba(138, 135, 135, .6);
}

#contenu_div-5 {
height : auto;  
overflow : auto ;
width :auto;
background-color: #fffff;
}

#contenu_div-5 h2 {
background : #FFFFFF;
color : red;
margin :  10px 10px 10px 10px  ; 
padding : 0 5px 0 0;
font-size : 0.8em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
}


#contenu_div-5  p{
margin : 5px 0 0 auto ; 
padding : 0;
color : #000000;
font-weight:bold;
}

#contenu_div-5 a {
 color: white;
 text-decoration: none;
}

#contenu_div-5 a:hover {
 color: black;
}

/*#contenu_div-5  img {
margin : 5px 0 0 auto ;
}
/*                   fin du troisiéme bandeau               */
/*********************************************************/


/*------------------slideshow photos --------------------*/

*{box-sizing: border-box }

img{
max-width:100%
}


.slideshow{
/*border: 5px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.5);*/
/*overflow: hidden;
top: 10px;*/
max-width: 480px;

/*margin: 2rem auto;*/
position: relative
}
    
.slideshow ul{
padding-bottom: 66.67%; /*ratio pour le responsive */
margin: 0;
list-style-type: none;
position: relative	
	}
    
    
.slideshow li{
top: 0;
left:-250px;
animation: slideshow 30s ease infinite;
position: absolute;
opacity: 0;
}



.slideshow li:nth-child(2){
animation-delay: 5s
}

.slideshow li:nth-child(3){
animation-delay: 10s
}

.slideshow li:nth-child(4){
animation-delay: 15s
}

.slideshow li:nth-child(5){
animation-delay: 20s
}

.slideshow li:nth-child(6){
animation-delay: 25s
}
.slideshow li:nth-child(7){
animation-delay: 30s
}
.slideshow li:nth-child(8){
animation-delay: 35s
}
.slideshow li:nth-child(9){
animation-delay: 40s
}
.slideshow li:nth-child(10){
animation-delay: 45s
}
.slideshow li:nth-child(11){
animation-delay: 55s
}

.slideshow li:nth-child(12){
animation-delay: 60s
}


    
@keyframes slideshow{	
0%{opacity: 0}
10%{opacity: 1}
20%{opacity: 1}
25%{opacity: 0}
100%{opacity: 0}	
	} 

    
.slideshow span{
/*background: rgba(0,0,0,0.4);*/
height: 20px;
align-items: center;
justify-content: center;
display: flex;
color: black;
position:absolute;
top: 0;
right: 0;
left: 0
}
    
/*****barre progression *****/
.barre_progression{ 	
position: absolute;
left: 0;
bottom: 50px;
height: 5px;
background: #53688c;
animation: barre_progression 30s ease-out infinite;	
}
    
/*****animation barre progression *****/    
@keyframes barre_progression{	
0%,20%,40%,60%,80%,100%{width: 0%;opacity: 0}	
4%,24%,44%,64%,84%{width: 0%;opacity: .3}	
16%,36%,56%,76%,96%{width: 100%;opacity: .7}	
17%,37%,57%,77%,97%{width: 100%;opacity: .3}	
18%,38%,58%,78%,98%{width: 100%;opacity: 0}	

	}

/*                        fin du slideshow photo         */
/*********************************************************/
/*              FOOTER                                   */
/*********************************************************/

#footer{

background-image:-webkit-linear-gradient(top, #53688c 0%, #324360 100%);
background-image: linear-gradient(to bottom, #53688c 0%, #324360 100%);
border-radius: 6px;
bottom:0;
width:auto;
height:60px;
}

#contenu-footer {
margin : 0; 
height : auto;  
overflow : auto ;
width :auto;
}

#contenu-footer h2 {
background : #FFFFFF;
color : #000000;
margin :  10px 10px 10px 10px  ; 
padding : 0 5px 0 0;
font-size : 0.8em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
}

#contenu-footer a {
 color: white;
 text-decoration: none;
}

#contenu-footer a:hover {
 color: black;
}
#contenu-footer p{
margin : 5px 0 0 auto ; 
padding : 0;
color : #000000;
font-weight:bold;
}

#inner-footer {  
     margin: 0 auto;
    /* width: 1600px; */
}

#div-6 {
	float: left;
	margin-left: 10px;
	text-align: left;
	height: auto;
	width :180px;
	font-weight:bold;
font-family: Arial;
color : #FFFFFF;

	}

	 
#contenu_div-6 {
margin: 0;
padding:0;	
height : auto;  
overflow : auto ;
width :auto;
/*background-color: #fffff;*/

}
#contenu-div-6 a {
 color: white;
 text-decoration: none;
}

#contenu-div-6 a:hover {
 color: black;
}



/****************************************************************************************************************************
 MENU smartphone
*****************************************************************************************************************************/ 

/*@media all and (max-width: 480px){*/
	@media all and (max-width: 1024px){
/*@font-face {
 font-family: gabriola;
 src: url("images/gabriola.ttf") format("truetype");

}*/


#main{
position: relative;
margin: 10px 0 10px 0;	
height : 150px ; 
width :auto;
border: 1mm ridge rgba(138, 135, 135, .8);
border-radius: 10px;
}

#centrage-main {
	height: 145px;
	width :100%;
	background: linear-gradient(to bottom right, #53688C, rgba(0,0,0,0));
	border-radius: 10px;
	margin : 0 ;
/*	cursor: default;
	overflow : auto ;*/
}
/* CONTENU
************************************************************************/
#contenu {
margin : 0; 
height : auto;  
overflow : auto ;
width :auto;


}


#inner-contenu {  /*pour centrer les div*/
    /*  margin: 0 auto;
    width: 1600px; */
	height:auto;
	width: auto;
}


#contenu h2 {
background : #61380B;
color : #FFFFFF;
margin :  10px 10px 10px 10px  ; 
padding : 0 5px 0 0;
font-size : 0.5em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
}

/*#contenu p{
margin : 5px 0 0 auto ; 
padding : 0;
color : #000000;
font-weight:bold;
}*/

#contenu p{
margin :0 0 0 auto ; 
/*padding : 0;*/
color : #000000;
font-weight:bold;
text-align: center;
/*font-family : Gabriola;*/
font-size: 1em;
color: white;
}

#contenu img {
margin : 0 0 10px 250px ;
}

/******************************************-------------*/
/*
               fin du premier bandeau                  */
/*******************************************************/


/*******************************************************/
/*               second bandeau                        */
/*******************************************************/
#main-2{
position: relative;
margin: 20px 0 10px 0;	
height : 255px; /*235px ; */
width :auto;
border: 1mm ridge rgba(138, 135, 135, .8);
border-radius: 10px;
}

#centrage-main-2 {
	height: 245px; /*225px;*/
	width :auto;
    background-color: rgba(255,255,255, 0.5); 
	border: 1mm ridge rgba(138, 135, 135, .0);
	border-radius: 10px;
	margin : 0 ;
	overflow : auto ;
		
}
/*********************************************/
/* CONTENU-3
**********************************************/

#contenu-2 {
margin : 0 ; 
height : auto;  
overflow : auto ;
width :auto;
}

#inner-contenu-2 {  /*pour centrer les div*/
     margin: 0 auto;
   /* width: 1000px; */
}


#contenu-2 h2 {
background : rgba(65,82,110,1.7);
color : #ffffff;
margin :  5px 10px 10px 5px  ; 
/*padding : 0 5px 0 0;*/
font-size : 1em ;
height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
}

#contenu-2 p{
margin : 5px 0 0 auto ; 
padding : 0;
color : #000000;
font-weight:bold;
}

#contenu-2 img {
margin : 0 0 10px 250px ;
}
#div-3 {
	/*display: inline-block;	*/
	float: left;
/*	margin-top:10px;*/
	margin-left: 10px;
	text-align: center;
	height: 165px;
	width :200px;
	background-color: rgba(65,82,110,1.7);
	border: 1mm ridge rgba(138, 135, 135, .6);
	border-radius: 10px;
	overflow :hidden ;
}


	 
#contenu_div-3 {
/*height : auto;  
overflow : auto ;*/
height: 215px;
width :auto;
background-color: #fffff;
font-weight:bold;
text-align:left;
font-size : 1em ;
font-family:arial;
}


#contenu_div-3 h2 {
background : #FFFFFF;
color : #DF3A01;
/*margin :  10px 10px 10px 10px  ; 
padding : 0 5px 0 0;*/
font-size : 1.2em ;
border-width: 5px;
text-align:center;
/*height : 18px; 
line-height : 18px ;
text-indent : 10px ; 
text-transform : uppercase;
font-weight:bold;
border: 1mm ridge rgba(138, 135, 135, .0);
border-radius :10px;*/
}


#contenu_div-3 a {
 color: white;
 text-decoration: none;
}
#contenu_div-3 a:hover {
 color: black;
}


#inner-contenu-4 {  /*pour centrer les div*/
     margin: 0 auto;
     width: 780px; 


#div-5 {
	display: inline-block;
	margin-left: 10px;
	text-align: center;
	height: 435px;
	width :360px;
	background-color: rgba(65,82,110,0.7);
	border: 1mm ridge rgba(138, 135, 135, .6);
}