@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700);

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

body{
margin: 0 auto;
padding: 0;
font-weight:200;
font-family: 'Yanone Kaffeesatz', sans-serif;
overflow-x:hidden;
position: relative;
width:100%;
background:#fff;
color:#000;
font-size:16px
}


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

#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 150px;
	width: 150px;
	margin-top: -75px;
	margin-left: -75px;
    -moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;

}
.object{
	width: 20px;
	height: 20px;
	background-color: #87bf2f;
	position: absolute;
	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	-webkit-animation: animate 0.8s infinite;
	animation: animate 0.8s infinite;
	}


#object_one {
	top: 19px;
	left: 19px;	

	}
#object_two {
	top: 0px;
	left: 65px; 
	-webkit-animation-delay: 0.1s; 
    animation-delay: 0.1s;

	}
#object_three {
	top: 19px;
	left: 111px; 	
	-webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; 

	}
#object_four {
	top: 65px;
	left: 130px; 
	-webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; 
}
#object_five {
	top: 111px;
	left: 111px; 
	-webkit-animation-delay: 0.4s; 
    animation-delay: 0.4s; 
}
#object_six {
	top: 130px;
	left: 65px;
	-webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}
#object_seven {
	top: 111px;
	left: 19px;
	-webkit-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
}
#object_eight {
	top: 65px;
	left: 0px;
	 -webkit-animation-delay: 0.7s; 
    animation-delay: 0.7s; 
}




@-webkit-keyframes animate {
 
  25% {
	-ms-transform: scale(1.5); 
   	-webkit-transform: scale(1.5);   
    transform: scale(1.5);  
	  }


  75% {
	-ms-transform: scale(0); 
   	-webkit-transform: scale(0);  
    transform: scale(0);  
	  }


}

@keyframes animate {
  50% {
	-ms-transform: scale(1.5,1.5); 
   	-webkit-transform: scale(1.5,1.5); 
    transform: scale(1.5,1.5); 
	  }
 
  100% {
	-ms-transform: scale(1,1); 
   	-webkit-transform: scale(1,1); 
    transform: scale(1,1); 
	  }
  
}



.container{position:relative;width:100%;max-width:1400px;display:block;margin:0 auto;padding: 0 40px;}.container.padding{padding:40px}
.contDemi{max-width:700px;position:relative;width:100%;display:block;padding:60px;}
.first{padding-top:0;z-index:999}


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;}


.display{display:none;}
.show{display:block;}

.down{margin-bottom:30px;}
.up{margin-top:30px;}

.clear{clear:both;}
hr{border:0;border-bottom:1px solid #ccc;margin:30px 0}
br{margin:10px 0 0}

.flt-left{float:left}
.flt-right{float:right}

strong{font-weight:300}


/* COULEUR */
.blanc{color:#fff;}
.noir{color:#232323;}
.lime, .entretien h4{color:#87bf2f;}
.vert, .plate-bande h4{color:#3d8900;}
.gris{color:#8b8b8b;}

.autre-service h4{color:#5bab1b;}

.bck-vert{background:#3d8900;color:#fff}
.bck-vert h2, .bck-vert h1{color:#fff;}
.bck-gris{background:#f0f0f0;}

/* TEXTE */
h1, h2, h3, h4, h5{margin:0;font-family: 'Yanone Kaffeesatz', sans-serif;line-height:1;color:#6f6f6f;letter-spacing:1px}
h1{font-size:56px;font-weight:400;} 
h2{font-size:42px;font-weight:100;}		
h3{font-size:36px;font-weight:300;color:#87bf2f;margin:0 0 10px 0}
h4{font-size:28px;font-weight:500;margin:25px 0;color:#87bf2f;}

p, li{font-size:22px;line-height:32px;margin:20px 0;font-weight:200;z-index:1;letter-spacing:0.5px}
p:first-child{margin-top:0px}

ul{margin:0}
li:last-child, li:first-child{margin:0}
ul li{background:url('../img/dot-green.png') no-repeat left center;padding-left:15px;display:block;vertical-align:top;margin:3px 0}


.centerItem img{display:block;margin:0 auto}

.ancre{display: block; height: 200px;margin-top: -200px}

/* SECTION 1 */

.navHome{
	transform: translate( 0, -60px);
	-webkit-transform: translate(0, -60px);
    -moz-transform: translate(0, -60px);
	}

.navHome img{
	display:block;margin:0 auto;
	transform: scale(0.9);
	-webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
	}

	
.navHome h2, .navHome p{text-align:center}
.navHome p{margin:5px 0}

.navHome img, .navHome h2, .navHome p{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;}

.navHome a:hover img{
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);}

 .navHome .gazon a:hover h2{color:#87bf2f}
 .navHome .plante a:hover h2{color:#3d8900}
 .navHome .forfait a:hover h2{color:#5bab1b}
 
 
 /*   PARALLAX    */

.division{position:relative;height:500px; margin:40px 0 0}
.division .container{padding-top:0;padding-bottom:0}
.division img{position:absolute;bottom:0;right:0;z-index:0;}
.division h2{position:absolute;left:0;color:#fff;font-weight:700;font-size:70px;text-align:center;z-index:99;width:100%;padding:0 40px;} 


.parallax {
  height: auto;
  min-height:450px;
  background-position:50%  100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  padding:160px 0 60px; 
  }
  
  
#entretien .parallax{background-image: url("../img/background/background-herbe.jpg");}
#reparation .division .parallax{background-image: url("../img/background/background-herbe.jpg");}
#plate-bande .parallax{background-image: url("../img/background/background-fleur.jpg");}
#interieur .division .parallax{background-image: url("../img/background/background-fleur.jpg");}
#taille .parallax{background-image: url("../img/background/background-feuille.jpg");} 
#maintenance .parallax{background-image: url("../img/background/background-maintenance.jpg");} 

#plate-bande .division img{left:0;bottom:40px}
#maintenance .division img{left:0}

/*  SECTION  */

.picto {margin-bottom:-110px;
	transform: translate( 0, -100px);
	-webkit-transform: translate(0, -100px);
    -moz-transform: translate(0, -100px)}

.picto img{	display:block;margin:0 auto;}
.border{margin:20px 0 ;border-bottom:4px solid #3d8900}






/* ONGLET  - NO DE MODELE */

.tabs {position: relative;overflow: hidden;	width: 100%;margin:0}
.content-wrap {position: relative;}
.content-wrap section {display: none;}
.content-wrap section.content-current {display: block;}


.tabs nav ul {
	position: relative;
	text-align:left;
	margin:0 0 20px 0;
}

.tabs nav ul li {
	position: relative;
	z-index: 1;
	display: inline-block;
	text-align: right;
	background:none #b8b8b8;
	color:#fff;
	font-size:24px;
	padding:0;
	padding:6px 14px;
	margin:5px ;
	
	
}


.tabs nav li.tab-current {background-color: #87bf2f;}
.tabs nav a:focus {outline: none;}




img.secteur{border:2px solid #ccc;padding:10px;background:#fff}


footer{background:#232323;padding:20px 0 10px}
footer .container{padding:0 40px}
footer .logoFoot{max-width:160px}

.phone{font-weight:700;font-size:30px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
footer #credits p{float:right;font-size:14px;color:#8b8b8b;margin:0;padding:0;line-height:1}

.suiveznous {color:#fff;font-weight:600}
.suiveznous  img{display:inline-block;vertical-align:middle;max-width:30px;margin-left:10px}

/* CONTACT*/






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

.container{padding:30px;}
.first{padding-top:0}
.contDemi{max-width:700px;position:relative;width:100%;display:block;padding:60px;}


h1{font-size:42px;} 
h2{font-size:28px;margin-bottom:20px}		
h3{font-size:22px;}
h4{font-size:18px;}

p, li{font-size:16px;line-height:22px;}

.division h2{font-size:50px;} 


.tabs nav ul li {font-size:20px;}

	
	
}

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


h1{font-size:32px;line-height:30px} 
h2{font-size:24px;margin-bottom:20px}		
h3{font-size:20px;}
h4{font-size:14px;}


p, li{font-size:14px;line-height:18px;}




.division h2{font-size:40px;} 
.division{margin:0}
.parallax {height: auto;min-height:350px;padding-top:120px}
#maintenance .division{height:auto;margin:30px 0 0 }

.right{text-align:center;}
.border{margin:15px 0}

.navHome {margin-bottom: 0;}
.navHome h2{margin-bottom:0}

.content-wrap h2{margin:20px 0 0}
.tabs nav ul, .tabs nav ul li{text-align:center;margin:4px 1px;font-size:14px;padding:5px 10px}



.picto {margin-bottom: -220px;transform: translate(0px, -210px);}

footer #credits p{float:left;font-size:12px}


}