@charset "utf-8";
/* CSS Document */

img, object, embed, video {
	max-width: 100%;
}
.ie6 img {
	width: 100%;
}
body {
	margin: 0;
	padding:0;
	font-size:18px;
	font-family: 'Roboto', sans-serif;

}
p {
    color: #545454;
    line-height: 28px;
    font-size: 18px;
    text-align: left;
}
.liste {
    color: #545454;
    line-height: 28px;
    font-size: 18px;
    text-align: left;
}
.liste a {
    color: #545454;
    line-height: 28px;
    font-size: 18px;
    text-decoration:none;
}
.listea {
    color: #545454;
    line-height: 28px;
    font-size: 18px;
    text-align: left;
}
.listea a {
    color: #545454;
    line-height: 28px;
    font-size: 18px;
    text-decoration: none;
}
h2 {
    color: #424242;
    text-align: left;
}
h3 {
    color: #424242;
}
.centre { width:80%; margin-right: auto; margin-left: auto; }
.textenumha { line-height:95px; color:#FFF; margin: 0; text-align:center; display: none;}
.textenumha a { color:#FFF; text-decoration: none; }


.textenumhb { line-height:95px; color:#FFF; margin: 0; text-align:center; display: block;}
.textenumhb a { color:#FFF; text-decoration: none; }

	.centreb { width:90%; margin-right: auto; margin-left: auto; }


#conteneur { width: 100%; }


#haut {width: 100%;  float: left; }
#centrehaut { width: 100%; margin-left: auto; margin-right: auto; text-align:center;}
#logo {width: 100%;  float: left; text-align:center; border-bottom:5px solid #00bfff;}
#menu {width: 100%;  float: left; margin-top:0px; margin-bottom:0px; border-bottom:5px solid #00bfff; }

#image {width: 100%;  float: left;}

#milieu {width: 100%;  float: left;}
#centremilieu { width: 80%; margin-left: auto; margin-right: auto;}
#centresouspage { width: 90%; margin-left: auto; margin-right: auto;}

.bloc { width:90%; float: none; margin-right: auto; margin-left: auto; margin-top: 50px;}

.blocab { width:100%; float: left; margin-bottom: 40px; text-align: center; }

.bloca {width: 100%; margin-right: 0%; float: left;}
.blocb {width: 100%; float: left;}

#troisblocs {width: 100%;  float: left;  padding-bottom:80px; }
#bloccentre {width: 90%; margin-left: auto; margin-right: auto;}
#titrebloc {
	width: 100%;
	float: left;
	padding-bottom: 38px;
}
#tblocsous {
	width: 100%;
	float: left;
	padding-bottom: 0px;
	padding-top:30px;
     margin-top: 0px;
    margin-bottom: 0px;
}

#blocun {width: 100%;  float: left;}
#blocdeux {width: 100%; float: left; margin-left: 0%; margin-right: 0%; }
#bloctrois {width: 100%; float: left;}

.bimage { width:100%; float:left; text-align:center; }
.bimage img {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.17);
    width:100%;
}
.btexte { width:95%; float:left; }
.btexteb { width:100%; float:left; }
.btexteb p { padding: 0% 15% 5% 15%; text-align:center; line-height: 28px; }

.btexte p { padding: 0% 15% 5% 15%; text-align:center; line-height: 28px; }
.btitre { float: left; width:100%; margin:0%; }
.btitre h2 { font-size:18px; font-weight:bold; line-height:20px; text-align:center;}

#banniere {
	width: 100%;
	float: left;
	height: 210px;
	background-color: #2EC3EB;
}
#bannieremilieu {width: 100%; margin-left: auto; margin-right: auto;}
#baba {width: 100%; float:left; margin-left: 0%;}
#babaa {width: 2%; float:left; display: none;}
#babb {width: 100%; float:left; height:auto; background-image: none; 	      background: #eaeaea;
    color: #565656;}
#babb a {         background: #eaeaea;
    color: #565656; padding:20px 30px 20px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 20px;     float: none;
    margin-top: auto; text-align:center; display: block; 
    margin-left: auto;}

#barreblanche {width: 100%;  float: left; padding-top: 52px; padding-bottom:2px;}
#milieublanche {width: 90%; margin-left: auto; margin-right: auto;}
#blanca  {width:100%;  float: left; }
#blanca  img {max-height:450px;}
#blancb  {width: 100%; float: left;}

.texteestimation { font-size: 28px; font-weight: bold; margin:40px 0 10px 0; text-align:center;}
.stexteestimation {font-size: 22px;     margin: 0px 0px 40px 0px; color:#FFF; text-align:center}


#bas {
	width: 100%;
	float: left;
	background-color: #F6F6F6;
	padding-top: 50px;
	padding-bottom: 50px;
}
#basmilieu { width: 90%; margin-left: auto; margin-right: auto;}
#basun { width: 100%;  float: left;}
#basun a { text-decoration: none; color: #797979;}

#basdeux { width: 100%;  float: left; margin-left: 0%; margin-right: 0%;     padding-top: 40px;}
#bastrois { width: 100%;  float: left; text-align: center;     padding-top: 40px;}
#bastrois a { text-decoration: none; color:#333; font-size:28px; }


#basreserver { width: 100%;  float: left; background: #2cc3ea;}
#bmreserver { width: 100%; margin-left: auto; margin-right: auto;}

creation { float: left; width:100%;}
.site { float: left; width:100%; }

.textecreaa { text-align: center; line-height: 60px; margin: 0;  color: #FFF; }
.textecreab { text-align: center; line-height: 60px; margin: 0; color: #FFF; }
.textecreab a { text-align: center; line-height: 60px; margin: 0; color: #FFF; text-decoration: none;}

.boutonbleu  {}
.boutonbleu a {
	color: #FFF;
	padding: 10px 22px 10px 22px;
	background-color: #2EC3EB;
	text-decoration: none; 
	border-radius: 10px;
}
.boutonbleu a:hover {
	color: #FFF;
	background-color: #58D1EF;
}

#separation {background:#00bfff; height:94px; width:100%; float: left; display: block;}
.bloc h2 { margin:0; padding:0; color:#666;}
.bloc h3 { margin:0; padding: 0; color: #2EC3EB; margin-top:5px; }
.blocb p {}
h1 { color:#666; font-size: 25px;}

.titrebas { font-size: 25px; text-align:center; }

.bloctitre { float:left; width:100%; }
.troisbas { float:left; width:100%;}
.blocg {float:left; width:100%; margin-top: 20px; }
.bimagebas {float:left; width:30%;}
.btextebas  {float:left; width:60%; padding:2% 5% 2% 5%;    color: #797979; }

#contacta { float: left; width:100%; margin-right:0; }
#contactb { float: left; width:100%; margin-left:0; }

#bas p {
    color: #797979;
    line-height: 25px;
}
.bloca img {
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 18px 0 rgba(0, 0, 0, 0.17);
}

.photos { width:100%; float: left;}
.photo { width: 50%; float: left; }
.piscine { width: 90%; padding:5%; float: left; }


.lien{overflow:hidden;float:none; }
.lien a{float:left;display:block;font-size:19px;text-align:center;    color: #737373;margin:0px 0px 0px 0px;     padding: 5px 30px 5px 30px; text-decoration:none;  }
.lien a:hover{	border-bottom: none;
color: #fff;
background: #00bfff;
	transition: all 0.2s ease-in;
	-webkit-transition-duration: 0.4s;
 border-radius: 0px;
}
.lien .icon{display:none;}

.ligne { text-align:center; margin-right: auto; margin-left: auto; }

/* Disposition tablette : 481px sur 768px. Hérite des styles de : Disposition mobile */

@media only screen and (min-width: 481px) {

}

@media only screen and (min-width: 769px) {	
#logo {width: 100%;  float: left; text-align:center;}
#menu {width: 100%;  float: left; margin-top:0px; margin-bottom:0px;}
#separation {background:url(images/creusee.jpg); width:100%; float: left; display: block;}
.bloca {width: 40%; margin-right: 10%; float: left;}
.blocb {width: 50%; float: left;}
#centresouspage { width: 80%; margin-left: auto; margin-right: auto;}
.bloc h2 { margin:0; padding:0; color:#666; }
.bloc h3 { margin:0; padding: 0; color: #2EC3EB; margin-top:10px; }
.blocb p { }
#troisblocs {padding-top:20px;  }
.textenumha { display: block;}
.textenumhb { display: none;}

#blocun {width: 30%; }
#blocdeux {width: 30%;  margin-left: 5%; margin-right: 5%; }
#bloctrois {width: 30%; }

#basun { width: 100%;  }
#basdeux { width: 50%; margin-left: 0%; margin-right: 0%;}
#bastrois { width: 40%; margin-left:10%; text-align: left;}

}

@media only screen and (min-width: 1024px) {	
#logo {width: 100%;  float: left; text-align:center; border-bottom:5px solid #00bfff;}
#menu {width: 100%;  float: left; margin-top:0px; margin-bottom:0px; border-bottom:none;  }
#separation {background:url(images/creusee.jpg); width:100%; float: left;}
.bloca {width: 40%; margin-right: 10%; float: left;}
.blocb {width: 50%; float: left;}
#centresouspage { width: 80%; margin-left: auto; margin-right: auto;}
.bloc h2 { margin:0; padding:0; color:#666; }
.bloc h3 { margin:0; padding: 0; color: #2EC3EB; margin-top:10px;}
.blocb p { }
#blanca  {width:50%;   }
#blanca  img {}
#blancb  {width: 50%; }
#milieublanche {width: 60%;}

#basun { width: 30%;  }
#basdeux { width: 26%; margin-left: 7%; margin-right: 7%;}
#bastrois { width: 30%; text-align:left; margin-left:0%; }

#bmreserver { width: 80%;}
creation {  width:50%;}
.site { width:50%; }
.textecreaa { text-align: left;}
.textecreab { text-align: right; }
.textecreab a { text-align: right; }

.titrebas { font-size: 25px; text-align:left; }
#basmilieu { width: 80%;}
.btitre h2 { font-size:16px; font-weight: bold; }
.btitre { width:90%; margin: 5% 5% 0% 5%; }
.bimage img {
    max-width:100%;
    width:auto;
}
#bannieremilieu {width: 80%; margin-left: auto; margin-right: auto;}

#baba {width: 43%;  margin-left: 5%;}
#babaa {width: 2%; display: block; }
#babb {width: 50%;  background-image:url(images/installation.jpg); }
#babb a { background: #ffffff; color:#353535; padding:20px 30px 20px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 20px;     float: left;
    margin-top: 70px;
    margin-left: 200px; text-align:center;
 }
    
.texteestimation { font-size: 28px; font-weight: bold; margin:70px 0 10px 0; text-align:left; }
.stexteestimation {font-size: 22px; margin:0; color:#FFF;text-align:left;}

#centrehaut { width: 100%; margin-left: auto; margin-right: auto;}



.lien a:hover{	
 border-radius: 5px;
}
	.centreb { width:90%; }
#contacta { width:40%; margin-right: 10%; }
#contactb {  width: 40%;
    margin-left: 10%; }
#tblocsous {
     margin-top: 50px;
    margin-bottom: 50px;
}
#bloccentre {width: 80%;}
h1 {  font-size: 30px;}
.piscine { width: 40%; padding:5%; float: left; }

}


@media screen and (max-width:1024px){
 .lien a:not(:first-child){display:none;}
.lien a.icon{display:block;width:100%; line-height:30px; border-radius:0;     padding: 10px 0px 10px 0px;}
.lien a{display:none;padding:10px 20px 10px 20px;}
.lien.responsive{position:relative;}
.lien.responsive a.icon{right:0;top:0;display:none;}
.lien.responsive a{float:left;display:block;width:100%;text-align:center; line-height:30px;     padding: 10px 0px 10px 0px;}
}
@media only screen and (width:1024px){
  .lien{overflow:hidden;float:none; display:none; text-align:center; }
.lien a{float:left;display:none;font-size:18px;text-align:center;color:#515151;text-decoration:none; line-height: 50px;}

}


@media only screen and (min-width:1024px){

 .lien{overflow:hidden;float:none; display:inline-block; text-align:center; }
.lien a{float:left;text-align:center;margin:0;text-decoration:none;line-height: 40px;}
.lien a:hover{ border-radius:0;}

}

@media only screen and (min-width:1200px){

 .lien{overflow:hidden;float:none; display:inline-block; text-align:center; }
.lien a{float:left;display:block;text-align:center; padding: 10px 20px 10px 20px; text-decoration:none;}

	.centreb { width:70%; }

}
@media only screen and (min-width: 1232px) {	
#logo {width: 30%;  float: left; text-align:left; border:none;}
#menu {width: 70%;  float: left; margin-top:40px; margin-bottom:0px; border:none;}
#separation {background:url(images/creusee.jpg); width:100%; float: left;}
#centresouspage { width: 60%; margin-left: auto; margin-right: auto;}
.bloca {width: 40%; margin-right: 10%; float: left;}
.blocb {width: 50%; float: left;}
.blocb p {}
.bloc h2 { margin:0; padding:0; color:#666; }
.bloc h3 { margin:0; padding: 0; color: #2EC3EB; margin-top:10px; }
#troisblocs {padding-top:0px;  }
.textenumha {  text-align:left; }
.btitre h2 { font-size:28px; }
.titrebas { text-align:left; }
 .lien{ float:right; }

.lien a:hover{ border-radius:5px;}
#centrehaut { width: 90%; }
 .lien a{   padding: 10px 20px 10px 20px; }

}



@media only screen and (min-width:1340px){
 .lien a{margin:0px;     padding: 10px 20px 10px 20px; }
#menu {width: 70%; margin-top:40px; }
#centrehaut { width: 80%; }

}

@media only screen and (min-width:1400px){
#menu {width: 70%; margin-top:30px;  }

}

@media only screen and (min-width:1500px){
#menu {margin-top:40px; }
#troisblocs {padding-top:50px;  }

}

@media only screen and (min-width:1600px){
#menu {margin-top:40px; }

}
@media only screen and (min-width:1700px){
#menu {margin-top:60px; }

}
}