/* ---------------------------------   accueil     --------------------------------------------*/



#accueil{

  text-align: center;
  margin-top: 0px;
  height: auto;
  width: 100%;
  
}



#image {

margin-top:200px;
  height: auto;
  width: 100%;
   border: 0px solid transparent;
   
  z-index:1;
   
}





 #titre h1{
 
z-index:2;
 
  position: absolute;
    left: 5%;
    top: 30%;
 
font-size: 2em;
color:#585858;
margin: 0px 0px 0px 0px;


 border: 1px solid transparent;
width: 45%;

text-align: left;

}



@media(min-width: 801px) {

#image-m {
margin-top:200px;
  height: auto;
  width: 100%;
   border: 0px solid transparent;
  z-index:1;
    display:none;
}

}	




@media(max-width: 800px) {

#image {
margin-top:200px;
  height: auto;
  width: 100%;
   border: 0px solid transparent;
  z-index:1;
 display:none;
}

#image-m {
margin-top:20%;
  height: auto;
  width: 100%;
   border: 0px solid transparent;
  z-index:1; 
}




 #titre h1{
left: 5%;
top: 22%;
font-size: 1.8em;
margin: 0px 0px 0px 0px;
width: 60%;
border: 1px solid transparent;
}



}	



@media(max-width: 650px) {



 #titre h1{
left: 3%;
top: 17%;
font-size: 1.6em;
margin: 0px 0px 0px 0px;
width: 60%;
border: 1px solid transparent;
}



}	



@media(max-width: 500px) {



 #titre h1{
left: 3%;
top: 12%;
font-size: 1.2em;
margin: 0px 0px 0px 0px;
width: 55%;
border: 1px solid transparent;
}



}	

















/* ---------------------------------   services     --------------------------------------------*/



#services{

margin-top: 100px;
  text-align: center;
  height: auto;
  width: 100%;
  padding-bottom: 200px;
}


#z-services{
 border: 1px solid transparent;
width: 10%;
margin:60px auto 0px;
}

#services h1{
  padding-top:60px;
font-size: 3.3em;
color:#0081C6;
}


 #services h3{
 

padding-bottom:100px;
font-size: 1.6em;
color:#BCBEC0;

}

#text-service{ 

width: 90%; 
height: auto; 
margin: 60px auto 60px ;
border: 1px solid transparent; 
color:#000000;
font-size: 1.6em;
	
}





.box{ 

width: 300px; 
height: 300px; 
margin: 5px 5px 5px 5px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */	
			
}





	 
@media(max-width: 1280px) {


.box{ 

width: 250px; 
height: 250px; 
margin: 5px 5px 5px 5px ;
			
}


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


.box{ 

width: 300px; 
height: 300px; 
margin: 10px 10px 10px 10px ;
			
}


}		 
	 
	 

	 
@media(max-width: 1000px) {


#services h1{
  padding-top:60px;
font-size: 3em;
color:#0081C6;
}


 #services h3{
 

padding-bottom:100px;
font-size: 1.4em;
color:#BCBEC0;

}


#text-service{ 

width: 90%; 
margin: 60px auto 60px ;
font-size: 1.4em;
	
}


}		 
	 
	 


@media(max-width: 700px) {


.box{ 

width: 250px; 
height: 250px; 
margin: 10px 10px 10px 10px ;
			
}


}



	 
	 
	 
	@media(max-width: 600px) {


#services h1{
  padding-top:60px;
font-size: 2.4em;
color:#0081C6;
}


 #services h3{
 

padding-bottom:100px;
font-size: 1em;
color:#BCBEC0;

}


#text-service{ 

width: 90%; 
margin: 60px auto 60px ;
font-size: 1.2em;
	
}




} 
	 
	 
	 
	 





a.bouton {

width: 350px;
text-decoration: none;



   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

margin: 40px 5px 0px 5px;

border: 2px solid #088A08;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
overflow: hidden; 
position: relative;
text-align:center;/* On réinitialise les élements centré a gauche */	
	
padding: 15px 15px;

color: #088A08;
font-weight: bold;
font-size: 1.2em;

}


a.bouton:hover {

color: #0B610B;
border: 2px solid #0B610B;
}




















/* ---------------------------------   annonce    --------------------------------------------*/


 #ann{
margin: 0px 0px 200px 0px;
 border: 0px solid transparent;
width: 100%;
text-align: center;
height:300px;
background-color:#939598;

}






 #ann-img{

 float:left;
 
margin: 0px 0px 0px 10%;
 border: 1px solid transparent;
width: 23%;
height:auto;
padding-top:50px;



}



 #ann-text{
float:right;
 
margin: 0px 5% 0px 0px;
 border: 1px solid transparent;
width: 60%;
text-align: right;
height:auto;
padding-top:50px;



}


#ann-text h3{
font-size: 2em;
color:#FFFFFF;
margin: 0px auto 0px;
text-align: right;
}

#ann-text h2{
font-size: 1.6em;
color:#FFFFFF;
margin: -5px auto 0px;
text-align: right;
}


#ann-text p{
font-size: 1em;
color:#000000;
margin: -20px auto 0px;
text-align: right;
}





@media(max-width: 1250px) {


 #ann-img{
margin: 0px 0px 0px 3%;
}

 #ann-text{
margin: 0px 3% 0px 0px;
width: 70%;
}

}


@media(max-width: 1100px) {



#ann-text h3{
font-size: 1.8em;
color:#FFFFFF;
margin: 0px auto 0px;
text-align: right;
}

#ann-text h2{
font-size: 1.4em;
color:#FFFFFF;
margin: -5px auto 0px;
text-align: right;
}


#ann-text p{
font-size: 0.9em;
color:#000000;
margin: -20px auto 0px;
text-align: right;
}







}




@media(max-width: 970px) {


 #ann{
margin: 0px 0px 200px 0px;
padding-bottom:40px;
 border: 0px solid transparent;
width: 100%;
text-align: center;
height:auto;
background-color:#939598;

}


 #ann-img{
 float:none;
margin: 0px auto 0px;
 border: 1px solid transparent;
width: 99%;
height:auto;
padding-top:10px;
}



 #ann-text{
float:none;
margin: -40px auto 0px;
 border: 1px solid transparent;
width: 99%;
text-align: center;
height:auto;
}


#ann-text h3{
font-size: 1.8em;
color:#FFFFFF;
margin: 0px auto 0px;
text-align: center;
}

#ann-text h2{
font-size: 1.4em;
color:#FFFFFF;
margin: -5px auto 0px;
text-align: center;
}


#ann-text p{
font-size: 0.9em;
color:#000000;
margin: -20px auto 0px;
text-align: center;
}



}












a.bouton{

text-decoration:none;
	padding:15px 10px;
border: 3px solid #FFFFFF;

	color:#FFFFFF;
	font-size:1.3em;
	font-weight:700;
	display:inline-block;
	border-radius:5px;
	text-transform:uppercase;
	line-height:25px;
	margin:0px 0px 20px 0px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

a.bouton:hover {
	text-decoration:none;
	color:#000000;
border: 3px solid #000000;
	
}




@media(max-width: 700px) {



#ann-text h3{
font-size: 1.6em;
color:#FFFFFF;
margin: 0px auto 0px;
text-align: center;
width: 95%;
}

#ann-text h2{
font-size: 1.2em;
color:#FFFFFF;
margin: -5px auto 0px;
text-align: center;
width: 95%;
}


#ann-text p{
font-size: 0.8em;
color:#000000;
margin: -20px auto 0px;
text-align: center;
}



a.bouton{

	padding:10px 5px;
	font-size:1em;
	line-height:25px;
width: 40%;
}



}





@media(max-width: 600px) {


 #ann img{

text-align:center;
 
margin: 0px auto 0px;
 border: 1px solid transparent;

width: 80%;


}



#ann-text h3{
font-size: 1.4em;
color:#FFFFFF;
margin: 0px auto 0px;
text-align: center;
width: 95%;
}

#ann-text h2{
font-size: 1em;
color:#FFFFFF;
margin: -5px auto 0px;
text-align: center;
width: 95%;
}


#ann-text p{
font-size: 0.7em;
color:#000000;
margin: -20px auto 0px;
text-align: center;
}



a.bouton{

	padding:5px 5px;
	font-size:0.9em;
	line-height:25px;
width: 50%;
}




}








/* ---------------------------------   à propos     --------------------------------------------*/



 #apropos{
 
 background-image: url('../images/apropos.jpg');
 background-position: 15% 40%; 
 background-repeat: no-repeat;

border-top: 1px solid transparent;
  text-align: center;
  height: 900px;
  width: 100%;

  padding-bottom:10%;
}




#text-apropos h1{

font-size: 3.3em;
color:#FFFFFF;
margin:0px 0px 50px 0px;


 text-align: center;
}



#text-apropos {

border: 1px solid transparent;
width: 40%;
margin:50px 0px 0px 50%;

margin-bottom: 50px;

}



#text-apropos p{

font-size: 1.4em;
color:#FFFFFF;

text-align: left;


}







@media(max-width: 1000px) {

#text-apropos h1{
font-size: 3em;
margin:0px 0px 100px 0px;
}

#text-apropos p{
font-size: 1.2em;
}


#text-apropos {

border: 1px solid transparent;
width: 60%;
margin:50px 0px 0px 35%;

}


}


@media(max-width: 800px) {


#text-apropos {

border: 1px solid transparent;
width: 80%;
margin:50px auto 0px;

}


#text-apropos h1{
font-size: 3em;
margin:0px 0px 100px 0px;

text-align: center;
}

#text-apropos p{
font-size: 1.2em;
text-align: center;

}

}


@media(max-width: 600px) {


#text-apropos {

border: 1px solid transparent;
width: 90%;
margin:50px auto 0px;

}


#text-apropos h1{
font-size: 2.4em;
margin:0px 0px 100px 0px;
text-align: center;
}

#text-apropos p{
font-size: 1em;
text-align: center;

}

}







/* ---------------------------------   Partenaires     --------------------------------------------*/




 #zone-part{
 
border-top: 1px solid transparent;

  height: auto;
  width: 100%;

  margin: 200px 0px 0px 0px ;
 
  
  
}




 #zone-part h5{
 
border-top: 1px solid transparent;
  text-align: center;

font-size: 3em;
 margin:0px auto 40px;
  
 color:#0081C6;
  
}







 #partenaires{
 

 
border-top: 1px solid transparent;
  text-align: center;
  height: 160px;
  width: 100%;

  margin: 0px 0px 0px 0px ;
  
 background-color:#BCBEC0;
  
  
}



.bx-wrapper {
  width: 100%;
  border: 0px solid transparent;
}
.bx-wrapper .bx-viewport {
  height: 220px !important;
 
}
.bx-wrapper li {
  margin-top: 40px !important;
}





@media(max-width: 1000px) {


 #zone-part h5{
font-size: 2.8em;
margin:0px auto 40px;
}





}



@media(max-width: 600px) {

 #zone-part h5{
font-size: 2.4em;
margin:0px auto 40px;
 width: 90%;

}

}




@media(max-width: 460px) {

 #zone-part h5{
font-size: 2em;
margin:0px auto 40px;
 width: 90%;

}

}










/* ===============================================   Footer  ==================================== */


 #footer{
 border: 0px solid transparent;
  height: auto;
  width: 100%;
 text-align:center;
 font-family: 'Montserrat',sans-serif;
 padding-top:120px;
 
 
}




.box-footer{ 

width: 280px; 
height: 300px; 
margin: 0px 10px 0px 10px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:center;
z-index:2;	

}


.box-footer #info{ 


text-align:left;
width: 100%; 
height: auto; 
margin:  0px 0px 0px 0px; 
border: 0px solid transparent;
}

.box-footer #info #title{ 
color:#0081C6;
font-size: 1.2em;
margin:  0px 0px 20px 0px; 
font-weight:bold;
}


#info img{ 
margin:  0px 0px 10px 0px; 
}


.box-footer #info p{ 
color: #000000;
font-size: 1em;
font-weight:400;
line-height:1.2;
}




.box-footer #info a {

color: #000000;
text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
}


.box-footer #info a:hover {

color: #E31837;

}




.box-footer #liens{

text-align:left;
width: 100%; 
height: auto; 
margin:  0px 0px 0px 0px; 
border: 1px solid transparent;

}


.box-footer #liens #title{ 

color:#0081C6;
font-size: 1.2em;
margin:  0px 0px 20px 0px; 
font-weight:bold;
}


.box-footer #liens p a {

margin:  0px 0px 0px 0px; 
font-size: 1em;
font-weight:400;
line-height:1.6;
color: #000000;
text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
}



.box-footer #liens p a:hover {

color: #E31837;

}








.box-footer2{ 

width: 200px; 
height: 300px; 
margin: 0px 10px 0px 10px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:center;
z-index:2;	

}


.box-footer2 #liens{

color:#0081C6;
text-align:left;
width: 100%; 
height: auto; 
margin:  0px 0px 0px 0px; 
border: 1px solid transparent;

}


.box-footer2 #liens #title{ 
font-size: 1.2em;
margin:  0px 0px 20px 0px; 
font-weight:bold;
}


.box-footer2 #liens p a {

margin:  0px 0px 0px 0px; 
font-size: 1em;
font-weight:400;
line-height:1.6;
color: #000000;
text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
}



.box-footer2 #liens p a:hover {

color: #E31837;

}



.box-fb{ 

width: 300px; 
height: 300px; 
margin: 0px 10px 0px 10px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:center;
z-index:2;	

}







@media (max-width: 1200px) {
 

 
 
 .box-footer{ 

width: 250px; 
height: 250px; 
margin: 10px 10px 10px 10px ;
border: 1px solid transparent; 
}
 
 .box-footer #info{ 
text-align:center;
}
 
 .box-footer #info #title{ 
font-size: 1.1em;
}

.box-footer #info p{ 
font-size: 1em;
}
 
 
 
 .box-footer #liens{
text-align:center;
}
 
 .box-footer #liens #title{ 
font-size: 1.1em;
}

.box-footer #liens p a {
font-size: 1em;
}
 
 
 
 
 
 
 

 
 .box-footer2{ 
width: 150px; 
height: 250px; 
margin: 10px 10px 10px 10px ;
border: 1px solid transparent; 
}

  .box-footer2 #liens{
text-align:center;
}
 
 
 .box-footer2 #liens #title{ 
font-size: 1.1em;
}
 
 .box-footer2 #liens p a {
font-size: 1em;
}

 

 .box-fb{ 

width: 250px; 
height: 250px; 
margin: 10px 10px 10px 10px ;
border: 1px solid transparent; 
}
 
 
 
 
 

  }















/* ===============================================   Copyright  ==================================== */



#copyright{ 


color:#000000;
text-align:center;
width: 100%; 
height: auto; 
margin: 120px auto 0px; 
border: 0px solid transparent;
padding-bottom:20px;

}



#copyright p{ 

font-size: 1em;
 line-height: 1.4;

}



#copyright a {


text-decoration: none;
   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

color: #000000;



}


#copyright a:hover {
color: #E31837;
}




@media (max-width: 1000px) {

#copyright p{ 
font-size: 0.9em;
 line-height: 1.4;
}
}


@media (max-width: 600px) {


#copyright{ 

width: 80%; 
padding-bottom:20px;

}


#copyright p{ 
font-size: 0.8em;
 line-height: 1.4;
 
 
}
}












/* ===============================================   Bouton up  ==================================== */


.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(180, 180, 180, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #BCBEC0;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 50px;
    width: 50px;
    right: 15px;
    bottom: 30px;
  }
}