@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300,700);

html{font-size: 62.5%;}
body, html{height:100%;}

body{
margin: 0 auto;
padding: 0;
font-family: 'Quicksand', sans-serif;
font-weight:300;
overflow-x:hidden;
position: relative;
width:100%;
background:#fff;
}



/* LOAD  */


#loading{
	background-color: #333;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 10010;
	margin-top: 0px;
	top: 0px;
}

#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#loading-center-absolute {
	position: absolute;
	left: 47%;
	top: 47%;
	height: 50px;
	width: 250px;
	margin-top: -25px;
	margin-left: -60px;

}
.object{
	width: 14px;
	height: 14px;
	background-color:#00adef;
	float: left;
    margin-top: 15px;
	margin-right: 15px;
	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	-webkit-animation: object 1s infinite;
	animation: object 1s infinite;
}
.object:last-child {
	margin-right: 0px;
	}

.object:nth-child(6){
	-webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
	}
.object:nth-child(5){
	-webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
	}
.object:nth-child(4){
	-webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
	}
.object:nth-child(3){
	-webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
	}
.object:nth-child(2){
	-webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
	}								

@-webkit-keyframes object{
50% {
    -ms-transform: translate(0,-50px); 
   	-webkit-transform: translate(0,-50px);
    transform: translate(0,-50px);
	}
}		
@keyframes object{
50% {
    -ms-transform: translate(0,-50px); 
   	-webkit-transform: translate(0,-50px);
    transform: translate(0,-50px);
	}
}






.Cont{max-width:1400px;width:100%;padding:40px 60px;margin:0 auto;}


img{max-width:100%;}
a[href^=tel]{color:inherit;text-decoration:none;}	
a{text-decoration:none;color:inherit;cursor:pointer}
a:focus{outline:0;}


/* TEXT ALIGN */
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.justify{text-align:justify;}


li{list-style-type:none;font-weight:500}
ul{display:block;}

hr{border:0;border-top:1px dotted #ccc;margin:30px 0;}


.display{display:none;}
.down{margin-bottom:20px;}
.up{margin-top:20px;}

.clear{clear:both;}

/* COULEUR */
.bleu{color:#00adef;}
.blanc{color:#fff;}
.noir{color:#000;}


/* FOND */
.bck-blanc{background-color:#fff; padding:20px 0;}
.bck-gris{background-color:#f2f2f2;padding:40px 0 ;}
.bck-bleu{background:rgba( 0, 173, 239, 1.0);padding:40px 0 ;}
.parallax-eau .bck-bleu{background:rgba( 0, 173, 239, 0.7)}
.parallax-bckBeton .bck-gris{background:rgba( 50, 50, 50, 0.8)}

h1,h2,h3,h4,h5{font-family: 'Quicksand', sans-serif;margin:0}

h1{font-size:50px;font-size:5.0rem;font-weight:300;letter-spacing:10px;text-align:center;text-transform:uppercase;text-shadow: 2px 2px 9px #999999;color:#fff;}
h2{font-size:2.8rem;font-size:28px;font-weight:300;letter-spacing:10px;text-transform:uppercase;text-align:center;color:#888;background:url(../img/ligne-vague.png) no-repeat bottom center;padding-bottom:50px;margin-bottom:0px}
h3{font-size:22px;font-size:2.2rem;font-weight:600;text-transform:uppercase;letter-spacing:5px;color:#555;margin-bottom:30px}
h4{font-size:16px;font-size:1.6rem;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:#00adef}


p{font-size:1.7rem;font-size:17px;line-height:28px;line-height:2.8rem;margin:20px 0 40px;text-align:justify;color:#555;font-weight:400;font-family: 'Quicksand', sans-serif;}
p:first-child{margin-top:0}

.avantage p{margin:5px 0 0 0}

ul li{background:url(../img/dot-blue.png) no-repeat left center;padding-left:25px;display:block;vertical-align:top;color:#555;display:block;font-size:17px;font-size:1.7rem;line-height:22px;line-height:2.2rem;margin-bottom:15px;}
li.sml{font-size:13px;background:none;padding-left:0}



a.lien{font-family: 'Quicksand', sans-serif;font-weight:700;margin:20px 0;display:block;text-transform:uppercase;font-size:16px;letter-spacing:2px}
a.lien:hover{color:#555}

.blanc p, .blanc h1, .blanc h2, .blanc h3, .blanc h4, .blanc li{color:#fff;}
.blanc li{background:url(../img/dot-blanc.png) no-repeat left center}

/* Appear fadeIn on SCROLL */
.hideme{opacity:0;}




/*    HEADER       */

header{background:rgba(30,30,30,0.8);position:relative;width:100%;z-index:999;padding:0 5%}
#logo{float:left;width:13%;}
#logo img{width:auto;max-width:200px;}

#mainnav{width:85%;float:right;}
.navmenu{float:right;width:100%;}

nav#MainNav{display:block;text-align:right;font-family: 'Quicksand', sans-serif;}
nav#MainNav li{display:inline;padding:5px 1.5% 5px 1.5%;background:none;}
nav#MainNav li:first-child{padding-left:0}nav#MainNav li:last-child{padding-right:0}
nav#MainNav a {
	position: relative;
	display: inline-block;
	color: #fff;
	font-weight:700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;font-size:1.4rem;
}

nav#MainNav a.current{color:#00adef;}

.effet-nav a {
	padding: 0.5% 0;
	color: #237546;
	font-weight: 700;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.effet-nav a::before,
.effet-nav a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #00adef;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
	
}

.effet-nav a::before {
	top: 0;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.effet-nav a::after {
	bottom: 0;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.effet-nav a:hover, .effet-nav a:focus, nav#MainNav a:hover {color: #fff;}

.effet-nav a:hover::before,
.effet-nav a:focus::before,
.effet-nav a:hover::after,
.effet-nav a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}


/* BLOC ACCEUIL */

.bloc-gris{background:#303030;padding:0% 3%;min-height:599px}
.bloc-gris h2.title-acc{display:block;margin-top:360px;vertical-align:bottom;background:none;padding:0;letter-spacing:10px;}

.bloc-piscine, .bloc-beton, .bloc-instal, .bloc-restau{min-height:290px;padding:3%;}

.bloc-piscine{background:url(../img/bloc-piscine.jpg) no-repeat center center;}
.bloc-beton{background:url(../img/bloc-beton.jpg) no-repeat center center;}
.bloc-instal{background:url(../img/bloc-installation.jpg) no-repeat center center;}
.bloc-restau{background:url(../img/bloc-restauration.jpg) no-repeat center center;}

.bloc-piscine:hover{background:url(../img/bloc-piscine-hover.jpg) no-repeat center center;}
.bloc-beton:hover{background:url(../img/bloc-beton-hover.jpg) no-repeat center center;}
.bloc-instal:hover{background:url(../img/bloc-installation-hover.jpg) no-repeat center center;}
.bloc-restau:hover{background:url(../img/bloc-restauration-hover.jpg) no-repeat center center;}


/* HEAD SECTION*/
.picto img{display:block;margin:0 auto 20px auto}


/*  NAV SOUS MENU   */

.navSousmenu{width:100%;display:block;margin:0 auto;margin-bottom:0px;}
.navSousmenu ul{width:auto;text-align:center;}
.navSousmenu ul li{display:inline-block;background:none;padding:0}
.navSousmenu ul li a{padding:10px 20px;background:#f1f1f1;margin:0 auto;font-size:16px;font-size:1.6rem;text-transform:uppercase;letter-spacing:3px;color:#555;}
.navSousmenu ul li a:hover, .navSousmenu ul li a.current, .navSousmenu li.tab-current a{background-color:#00adef;color:#fff;}






/* Content */
.content section {display: none;}

/* Fallback example */
.no-js .content section {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid #47a3da;
}

.content section.content-current {display: block;}





.phone{display:inline-block;background:url(../img/phone-big.png) no-repeat left center;height:60px;padding-left:75px}
.phone h3{margin-top:13px;letter-spacing:5px;font-weight:700}

.mail{display:inline-block;background:url(../img/mail-big.png) no-repeat left center;height:60px;padding-left:75px}
.mail h4{margin-top:15px;letter-spacing:2px;font-weight:500}.mail h4:hover{color:#00adef}


footer{background:#303030;padding:15px 2%;}
footer .sociaux{float:right;display:block;}
footer .sociaux a{display:inline-block;margin-left:2px}footer .sociaux a:hover{opacity:0.6}
footer  h4{display:inline-block;vertical-align:top;margin:10px 10px 0}
footer #credits p{  margin: 0 0 0 12px;text-align: left;}
footer #credits a{font-size:12px;font-size:1.2rem;color:#777}




#last-real{margin-bottom:40px}

/* CONTACT*/

#map{width:100%;height:300px}

.google-maps {
position:relative;
width:100%;
height:0%;
overflow: hidden;
}

.google-maps iframe {	
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}



@media only screen and (min-width: 1550px) {
	/*Header*/
	nav#MainNav a{font-size:15px;font-size:1.5rem;}
	nav#MainNav li{padding:5px 1% 5px 1%}
	
	}


@media only screen and (max-width: 1420px) {
	/*Header*/
	nav#MainNav li{padding:0 1%}
	nav#MainNav a{font-size:13px;font-size:1.3rem;}
	
	}

	
@media only screen and (max-width: 1200px) {
	/*Header*/
	nav#MainNav li{padding:0 0.5%}
	nav#MainNav a{font-size:12px;font-size:1.2rem;}
	
	}	
	
@media only screen and (max-width: 1015px) {	
	#mainnav{display:none;}
	#logo{width:200px;}
	}
	
@media only screen and (max-width: 768px) {
	
	.navSousmenu ul li a{padding:7px 10px;background:#f1f1f1;margin:0 auto;font-size:13px;font-size:1.3rem;letter-spacing:2px;font-weight:700;}
	
@media only screen and (max-width: 600px) {	

	h1,h2,h3,h4{text-align:center;}
	h1{font-size:30px;font-size:3.0rem;letter-spacing:4px}
	h2{font-size:1.8rem;font-size:18px;letter-spacing:4px;margin-bottom:10px;padding-bottom:40px}
	h3{font-size:15px;font-size:1.5rem;letter-spacing:2px}
	h4{font-size:13px;font-size:1.3rem;letter-spacing:1px}
	
	p, ul li{font-size:13px;font-size:1.3rem;line-height:18px}
	ul li:last-child{margin-bottom:0}
	li.sml{font-size:10px;background:none;padding-left:0}
	p{text-align:center;}
	
	img{display:block;margin:auto}
	

	.Cont{padding:0 30px;}
	#logo{width:130px;}
	
	.bloc-gris{min-height:150px;height:auto;margin-bottom:10px;padding:0 8% 5%;}
	.bloc-gris h2.title-acc{margin-top:10%;text-align:center;}
	
	.bck-bleu, .bck-blanc, .bck-gris{padding:60px 0}
	
	footer .sociaux{float:none;clear:both;margin:10px auto;display:block;}
	footer .sociaux a{float:left;margin:0;margin-left:10px}
	
	.navSousmenu{margin:0 0 40px 0}
	.navSousmenu ul li{display:block;margin-bottom:10px;}
	.navSousmenu ul li a{display:block;width:100%;}
	
	
	.phone, .mail{background-size:40px;padding-left:50px;}
	.phone h3, .mail h4{text-align:left}
	.mail h4{font-size:14px;letter-spacing:0;margin-top:20px}
	

	
}