body { 
    width:100%;
    font-family: 'Roboto', sans-serif;
}
strong{
  font-family: 'Roboto', sans-serif;
  font-weight:900;
  color:#fff;
  font-size: 30px;
}
a :hover {
	opacity: 0.7;
}

a[href^=tel] { color: inherit; text-decoration: none; }

#logoheader{
    
   z-index: 49;
    position: absolute;
    padding-top: 10%;
       padding-left: 4%;
    
}

.phoneHead{
  font-family: 'Roboto', sans-serif;
  font-weight:500;
  color:#fff;
  font-size: 32px;
    
}
.headPhone{
    position: absolute;
    right: 90px;
    top: 23px;
}

.headQuote{
    position: absolute;
    left: 37%;
    padding-top: 14%;
}

.titreHead{
  font-family: 'Roboto', sans-serif;
  font-weight:300;
  color:#fff;
  font-size: 48px;
  text-transform: uppercase;
}

.sousTitreHead{
  font-family: 'Roboto', sans-serif;
  font-weight:900;
  color:#fff;
  font-size: 48px; 
  text-transform: uppercase;
}

#ligneVerte{
    
  z-index: 9;
  margin-top: -19px;
    
}
.ligneVerte{
    
    height: 721px;
   
   
}
/*Différentes sections du site*/
.description{
	
    min-height: 375px;
    width: 100%;
    background-color: #404041;
}
.centerdiv{
    margin: 0 auto;
    max-width: 975px;
    min-height: 100%;
    
}
#centrer{
    margin: 0 auto;
    max-width: 975px;
}

.centerdiv2{
    max-width: 975px;
    min-height: 100%;
    float: left;
    clear: both;
    width: 100%;
    
}
.centerdiv3{
    max-width: 975px;
    min-height: 100%;
    float: left;
    clear: both;
    width: 100%;
    
}
.histoire{
        padding-bottom: 90px;
    height: auto;
    background-color: #ffffff;
    background-image: url('../img/histoireBack.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    
}

.histoire h3{
    
  font-family: 'Roboto', sans-serif;
  font-weight:700;
  color:#8cc63f;
  font-size: 24px;
  margin-bottom: -18px;
    
}

.hisImg h3{
  font-family: 'Roboto', sans-serif;
  font-weight:900;
  color     :#fff;
  text-transform: uppercase;
  font-size: 28px;
  
  
}

.excavation{
    background-image: url('../img/terre.png');
    max-width: 489px;
    height: 160px;
    margin-bottom: 10px;
    line-height: 160px;
}
.excavation img{
    float: left;
    min-width: 30px;
    padding-top:40px;
    padding-left: 30px;
}
.excavation h3{float:left; clear: none; padding-left: 0; margin-top: 0px;margin-bottom: 0px;padding-left: 60px;}

.terrassement{
    background-image: url('../img/gazon.png');
    max-width: 489px;
    height: 160px;
    margin-bottom: 10px;
    line-height: 160px;
}
.terrassement img{
    float: left;
    min-width: 30px;
    padding-top:40px;
    padding-left: 30px;
}
.terrassement h3{float:left; clear: none; padding-left: 0; margin-top: 0px;margin-bottom: 0px;padding-left: 60px;}

.deneigement{
    background-image: url('../img/neige.png');
    max-width: 489px;
    height: 160px;
    line-height: 160px;
    padding-left: 22px;
}

.deneigement img{
    float: left;
    min-width: 30px;
    padding-top:40px;
    padding-left: 30px;
}
.deneigement h3{float:left; clear: none; padding-left: 0; margin-top: 0px;margin-bottom: 0px;padding-left: 60px;}

.icone{
  
   padding-top:26px!important;
   
}

.services{
    
    min-height: 571px;
    background-image: url('../img/wetGrass.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
        margin-bottom: -40px;
    
}
.servicesOffert{
    height: 105px;
    min-width: 290px;
    background-color: #ffffff;
    float: left;
     width: 32.05%;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    
}

.territoireDesservis{
    height: 95px;
    min-width: 225px;
    background-color: #ffffff;
    float: left;
    width: 20%;
   /* margin-right: 5px;*/
    margin-bottom: 5px;
    margin-left: 5px;
    
}

.servicesOffert h3{
    
    clear: none; 
    padding-left: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300; 
    padding-top:40px;
}

.servicesOffert img{
    float: right;
    padding-top:33px;
    padding-right: 30px;
    
   
}

.territoire{
    
    margin-top: -1px;
    min-height:380px;
     background-image: url('../img/map.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin-bottom: -80px;
}

.territoire .titre{
padding-top: 20px;

}

/*.territoireDesservis{
    min-height: 94px;
    max-width: 240px;
    background-color: #ffffff;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}*/

.territoireDesservis h3{
   text-transform: uppercase;
   text-align: center;
   font-family: 'Roboto', sans-serif;
   font-size: 18px;
   font-weight: normal;
    padding-top: 20px;
    
   
}

.footer {
    background: linear-gradient(
    to right, 
    #ffffff 0%, 
    #ffffff 60%, 
    #e6e7e5 60%, 
    #e6e7e5 100%
  );
    
    bottom:0;
    position: relative;
	text-align:center;
	
    min-height: 235px;
}

.footer img{
    margin-left: -20px;
    float: left;
    
}

.contact{
    padding-top: 55px;
    width: 95%;
}

.phoneUn{
   font-family: 'Roboto', sans-serif;
   font-size: 40px;
   font-weight: 900;
   color: #404041;
   margin-left: 6px;
   float: right;
    
}

.phoneDeux{
   font-family: 'Roboto', sans-serif;
   font-size: 40px;
   font-weight: 900; 
   color: #404041;
   margin-right: 16px;
   float: right;
    
}

.email a{
   font-family: 'Roboto', sans-serif;
   font-size: 18px;
   font-weight: 500; 
   color: #558125;
   margin-right: -10px;
   float: right;
   margin-right: 28px;
    
}

.copyrights{
    
    min-height: 33px;
    width: 100%;
    background-color: #404041;
    
}
.copyrights a{
    
   color: #fff;
    
}
.copyrights a:hover{
    
   color: #91c43b;
    
}
.gauche{
    float: left;
    font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: 300;
    color: #fff;
}

.gauche p{
    float: left;
    margin-left: 10px;
}

.droite{
    
    font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: 300;
    color: #fff;
}

.droite p{
    float: right;
    margin-right: 10px;
}

.titre{
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 40px;
    color: #fff;
    text-align: center;
    text-transform:uppercase;
    line-height: 35px;
    padding-top: 25px;
}

.sousTitre{
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 40px;
    color: #8cc63f;
    
}

.sousTitreBlanc{
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 40px;
    color: #fff; 
}

.textCenter{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 18px;
    color: #fff;
}

.textCenterDark{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: left;
    font-size: 18px;
    color: #383837;
}
.hisTexte{
    width: 400px;
    padding-top: 70px
}

.hisImg{
    
   padding-top: 100px;
    margin-left: 80px;
       
}

.centerCenter {
    max-width: 686px;
}

.backDroite{
    height: 721px;
    
    background-image: url('../img/pelle2.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
   /* z-index: -99;*/
}

.header{
 height: 721px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  z-index: 1;
  border-bottom:1px solid #bfbfbf;
    
}
.headerAnchor{
   
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/* Media Querries */





@media only screen  and (max-width : 1279px) {
#logoheader {width: 27%;    padding-top: 13%;padding-left: 2%;}
.titreHead {font-size: 38px;}
.sousTitreHead {font-size: 38px;}
.headQuote {left: 40%; padding-top: 19%;}    
}


@media screen and (max-width: 1056px) {
.territoireDesservis {width: 48%;    margin-left: 10px;}  
.contact {width: 100%;}
.sousTitreHead {font-size: 25px;} 
.titreHead {font-size: 25px;}
.headQuote {left: 45%;   padding-top: 24%;} 
#logoheader {width: 27%;padding-top: 18%;}  
/*.territoireDesservis {margin: -8px auto;} */   
.territoire {padding-bottom: 50px;margin-bottom: 0px; }   
.excavation {height: 90px;width: 76%;line-height: 0px; }  
.terrassement{height: 90px;width: 76%;line-height: 0px; }      
.deneigement{height: 90px;width: 76%; line-height: 0px; }
.hisTexte{margin-left: 16%;}
.hisImg{margin-left:25px;margin-bottom: 5%;padding-top: 90px;}    
.excavation img {height: 60%;padding-left: 15px;padding-top: 0px;margin-top: 20px;}  
.terrassement img {height: 60%;padding-left: 10px;padding-top: 0px;margin-top: 20px;}      
.deneigement img {height: 60%;padding-left: 0px;padding-top: 0px;margin-top: 15px;}
.hisImg h3{font-size: 16px;float: right;padding-left: 0px;padding-top: 20%;margin-right: 15px;}    
.textCenterDark {font-size: 15px;}
.histoire{padding-bottom: 50px; }
.footer img {display: none;}    
.footer {background: linear-gradient( to right, #ffffff 0%, #ffffff 60%, #ffffff 60%, #ffffff 100% );}    
.phoneUn {float: none;    color: #404041;}
.phoneDeux {float: none;margin-right: 0px;    color: #404041;} 
.email a {float: none; margin-right: 0px;}
.gauche {font-size: 10px;}
.droite {font-size: 10px;} 
.droite p {float: none;margin-right: 0px; margin-top: -6px;}
.gauche p {float: none;margin-left: 0px; }
.copyrights{text-align: center;}    
    
}
@media screen and (max-width: 917px) {
.centerdiv2 {    padding-left: 16%;padding-bottom: 50px;}
.services{margin-bottom: 0px;}    
}


@media screen and (max-width: 900px) {
.hisImg {display: none;}
.hisTexte { padding-top: 0px;margin: 0 25px 0 25px;text-align: center;    width: 100%;}
.textCenterDark {text-align: center;font-size: 14px;}
.histoire{background-image: url('');    padding-bottom: 10px;}    
}

@media screen and (max-width: 850px) {
.centerdiv2 {    padding-left: 13%;} 
}
@media screen and (max-width: 768px) {
    .centerdiv2 {padding-left: 0;} 
.ligneVerte {display: none;} 
#logoheader {background: #fff;/*padding-bottom: 30px;*/width: 100%;padding-top: 15%;}
.cd-nav-trigger {top: 20px!important;right: 20px!important;}
.logo{height: auto;width: 50%;margin-left: 22%;}
.backDroite {height: 0px;}   
.header {height: 500px;}
#bouton_down {display: none;}
.headQuote{display: none;} 
.titreHead{font-size: 18px;}
.sousTitreHead{font-size:18px}
.phoneHead{display: none;}
.titre{font-size: 30px; padding-top: 20px;}
.sousTitre{font-size: 30px; }
.description{padding-bottom: 25px;margin-bottom: -90px;}    
.textCenter{font-size: 14px;margin: 0 12px 15px 12px;text-align: center;}    
 strong{font-size: 22px;} 
.hisTexte { padding-top: 0px;margin: 0 25px 0 25px;text-align: center;    width: 100%;} 
.textCenterDark {text-align: center;font-size: 14px;}
.hisImg {display: none;}
.histoire h3 {margin-bottom: -14px;} 
.histoire {height: auto;background-color: #fff;background-image: url();padding-bottom: 0;} 
.servicesOffert h3 {padding-left: 19px;font-size: 17px;}
.sousTitreBlanc {font-size: 30px;}
.servicesOffert {margin-left: 7px;width: 98%;}
.services {padding-bottom: 0px;}
.territoire{padding-bottom: 60px;}    
/*.territoireDesservis {margin: -8px auto;}*/ 
.footer img {display: none;}    
.footer {background: linear-gradient( to right, #ffffff 0%, #ffffff 60%, #ffffff 60%, #ffffff 100% );}    
.phoneUn {float: none;    color: #404041;}
.phoneDeux {float: none;margin-right: 0px;    color: #404041;} 
.email a {float: none; margin-right: 0px;}
.gauche {font-size: 10px;}
.droite {font-size: 10px;} 
.droite p {float: none;margin-right: 0px; margin-top: -6px;}
.gauche p {float: none;margin-left: 0px; }
.copyrights{text-align: center;}
.territoireDesservis {width: 48%;margin-left: 10px;}
}


@media screen and (max-width: 668px){
.territoireDesservis {width: 97%;margin-left: 8px;}
    
}


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

.description{padding-bottom: 25px;margin-bottom: -20px!important;}    
       
}

@media screen and (max-width: 550px) {
.logo {width: 83%;margin-left: 7%;} 
.servicesOffert {margin-left: 0px;width: 98%;}    
}

@media screen and (max-width: 450px) {
.logo {width: 100%!important;margin-left: -2%!important;}
.servicesOffert {margin-left: 4px;width: 98%;}
.territoireDesservis {width: 97%;margin-left: 6px;}
    
}

@media screen and (max-width: 375px) {
.phoneUn {font-size: 30px;}
.phoneDeux {font-size: 30px;} 
.email a {font-size: 14px;}   
.header {margin-bottom: -130px;}
.servicesOffert {margin-left: 3px;width: 98%;}
.territoireDesservis {width: 97%;margin-left: 5px;}    
}
















/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #353535;
    font-family: 'Roboto', sans-serif;
	font-weight:normal;
    
}
h2{
	font-size:2.80em;
}
h2 span{
	font-size:1.65em;
	font-family: 'Roboto', sans-serif;
}
p span{
	
	font-family: 'Roboto', sans-serif;
    padding-bottom: 10px;
}
.pure-img-responsive {
    
max-width: 100%;
    height: auto;
    

}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
   
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
    text-align: center;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em;
    text-align: center;
   
}
.home-menu {
   
}
.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #AECFE5;
}

#bounce {
        
}
/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */
.splash-container{
    background: #d5d5d5;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    padding-top: 10%;
    position: fixed !important;
}
.splash-containerLeft {
 background: #d5d5d5;
    z-index: 10;
   
}
.splash-containerRight{
  background: #d5d5d5;
    z-index: -1;
    
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 100%;
    height: 100%;
    margin: auto;
    
   
    text-transform: uppercase;
	color:#353535;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 20px;
    font-weight: bold;
    color: white;
    border: 3px solid white;
    padding: 1em 1.6em;
    font-weight: 100;
    border-radius: 5px;
    line-height: 1em;
}
.splash h1{
	font-size:4.8em;
	color:#353535; 
	line-height:73px;
	letter-spacing:6px;
	margin-bottom:39px!important;
}
.splash h1 span{
	font-family: 'Roboto', sans-serif;
}
p.splash-head {
	margin-top:0;
}
#btn_ancre > div, #btn_ancre img{
	
	text-transform:none;
	font-size: 2.25em;
	color:#353535;
	line-height:33px;
}
#btn_ancre > div{
	margin-top:47px;
	margin-left:15px;
	text-align:left;
	
}
#btn_ancre{
    padding-top: 40%;
    /*padding-right: 5%;*/
}
#bouton_down{
	
	margin: 0 auto;
	text-align: center;
	background-color: #7aad37;
    border-radius: 50%;
	height:70px;
    width: 70px;
    margin-top: -160px;
    z-index: 9;
    position: relative;
      
}

#bouton_down span{
  display: block;
  width: 8px;
  height: 8px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid #414042;
  border-bottom: 2px solid #414042;
  margin:5px auto;
}
.unu{
  margin-top: 6px;
}
.unu, .doi, .trei{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
}
.unu{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
}
.doi{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
}
.trei{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
}
.mouse{
	height: 36px;
	width: 25px;
  	border-radius: 15px;
  	transform: none;
  	border: 2px solid #414042;
  	top: 170px;
	margin:20px auto 0px;
}
.wheel{
	height: 5px;
  	width: 2px;
  	display: block;
  	margin: 5px auto;
  	background: #414042;
  	position: relative;
}
.wheel{
  -webkit-animation: mouse-wheel 1.2s ease infinite;
  -moz-animation: mouse-wheel 1.2s ease infinite;
}
@-webkit-keyframes mouse-wheel
{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel
{
  0% { top: 1px; }
  50% { top: 2px; }
  100% { top: 3px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}


/* This is the subheading that appears on the blue section */
.splash-subhead {
	text-transform:none;
	font-size:2.25em;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    
   
    min-height: 12%;
    z-index: 2;
    background: white;

}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
}
    .content-subhead i {
        margin-right: 7px;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #2d3e50;
    color: #aaa;
}






/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }
    /* We want to give the content area some more padding */
    .content {
        /*padding: 1em;*/
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: right;
    }
        .home-menu ul {
            float: none;
        }

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        right: 20%;
        width: 30%;
        height: 80%;
    }

    .splash-head {
        font-size: 250%;
    }


    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }

}




/* Example media queries (reduce number of columns and change slideshow layout) */

@media screen and (max-width: 60em) {
	/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
	.grid li {
		width: 33.3%;
	}

	.slideshow li {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
	}

	.slideshow li figure img {
		width: auto;
		margin: 0 auto;
		max-width: 100%;
	}

	.slideshow nav span,
	.slideshow nav span.nav-close {
		font-size: 1.8em;
		padding: 0.3em;
	}

	.info-keys {
		display: none;
	}

}

@media screen and (max-width: 900px) {
	.grid li {
		width: 50%;
	}
     .footer hr {
    width: 20%!important;
    position: absolute;
    top: 25%;
}
    .sitePartenaire h2 {
    color: #00abb9;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
   
}
   .sitePartenaire p {
    margin-top: -5%;
    color: #fff;
    padding-left: 3%;
       
}
    .descPartenaires p {
    padding-left: 2%;
    margin-top: -2%;
    color: #fff;
        
}
   
}

@media screen and (max-width: 600px) {
	.grid li {
		width: 100%;
	}
    .grid-wrap h1 {
    text-align: center;
    font-size: 2em;
    line-height: 1em;
}
        .grid-wrap h2 {
    text-align: center;
    font-size: 1em;
    line-height: 1em;
}
}