@font-face {
    font-family: 'Perpetua';
    src: url('../font/Perpetua.woff2') format('woff2'),
        url('../font/Perpetua.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

body{font-family: "Perpetua"}


.container-fluid:first-child {padding-left:0px;
         padding-right:0px;}

.size_img_header{height: 100px;}

.bg-light{
  background-image: -moz-linear-gradient( 0deg, rgb(145,141,131) 0%, rgb(227,223,215) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(145,141,131) 0%, rgb(227,223,215) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(145,141,131) 0%, rgb(227,223,215) 100%);
  
}
strong{font-weight:900;}

.navbar-nav>a{

 font-size: 2.5em;
  
  color: rgb( 87, 112, 55 );
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  margin:auto 5%;
}

h1{font-style: italic;
    color: rgb( 154, 167, 135 );
    font-weight: bold;
    text-decoration: underline;}


#localisation_bm_loc{  border-radius: 10px;
  background-color: #3f423d;
  box-shadow: 2.5px 4.33px 5px 0px #7f8684;
  opacity: 0.9;
    
}
#localisation_bm_loc p
{
  font-size: 25px;
  font-family: "Perpetua";
  color: rgb( 154, 167, 135 );
  font-weight: bold;
  text-align: center;
  }


#localisation_bm_loc a{
  background-color: #76a43b;
   font-size: 25px;
  font-family: "Perpetua";
  color: rgb( 63, 66, 61 );
  font-weight: bold;
  text-align: center;
  padding:0 5%;
    }




#texte-presentation {
  font-size: 20px;
  font-family: "Perpetua";
  color: rgb( 154, 167, 135 );
  font-weight: 500;
  text-align: center;
  }
.contact-presentation{color:#76A43B;
                      font-weight: bold;}


.contact-presentation:hover{color:#5D773C;
    
}

#section_presentation{background-image: url(../images/bm-loc_camion_benne.png);
                      background-size: cover;
                      background-position: center;
                      position: relative;
                      z-index: 0;}


#section_presentation::before,#coordonnees::before{content: "";
width: 100%;
height: 100%;
position: absolute;
z-index:-1;
background-color:#3f423d;
opacity:0.8;     
}


#titre_nos_services{ background-image: -moz-linear-gradient( 90deg, rgb(64,67,61) 0%, rgb(118,164,59) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(64,67,61) 0%, rgb(118,164,59) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(64,67,61) 0%, rgb(118,164,59) 100%);
  }


h2{
  font-size: 37.5px;
  color: rgb( 193, 189, 180 );
  font-weight: bold;
    }
  

.img-illustration_service{width: 100%;}

.liste-services li{list-style: none;
 font-size: 20px;
  
  color: rgb( 87, 112, 55 );
  font-weight: bold;
    }

h3{ background-color: #7f8684;
    margin-bottom: 0px;
     font-size: 22px;
  
  color: rgb( 63, 66, 61 );
  font-weight: bold;
 border-radius: 5px 5px 0px 0px; 
    padding-top:1%;
    padding-bottom:1%;
    padding-bottom:1%;
  }



.liste-services{padding-left: 1%;}

#section-services .col-lg-3 {
  background-color: #76a43b;
  box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
    border-radius: 5px 5x 0px 0px;  
    margin-left:6%;
    padding-right: 0px;
    padding-left:0px;
    border-radius: 5px 5px 0px 0px;
     }

.col-lg-10.offset-lg-2{
    background: #3f423d;
   box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
 
}
#section-services a{
  font-size: 25px;
  
  color: rgb( 118, 164, 59 );
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 2.5px 4.33px 5px rgb( 0, 0, 0 );
  }

#section-services{
  background-color: #41443d;
    padding-top:3%;
    padding-bottom: 2%;
  }


.titre_formulaire{  background-color: #41443d;
    
    border-style: groove;
    border-color:#afb0ad;
    border-right:0px;
    border-left: 0px;
    border-bottom:0px;
}

.titre_formulaire>h3{  background-color: #41443d;
  font-size: 37.5px;
    color: rgb( 118, 164, 59 );
  font-weight: bold;
  }


input{width: 90%;
    margin-bottom:20px;
  border-radius: 5px;
  background-color: #7f8684;
  box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
  border:none;
  padding-top:5px;
  padding-bottom:5px;  
  font-size: 25px;
  color: rgb( 222, 230, 212 );
  font-weight: bold;
 }


.col-lg-12>input{width: 100%;}



form .col-lg-4{margin-bottom:1%;}

textarea{width: 80%;
height: 200px;
 border-radius: 5px;
  background-color: #7f8684;
  box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
  border:none;
  padding-top:5px;
  padding-bottom:5px;  
  font-size:25px;
  color:white;
}

form{width: 100%;
      padding-left:1%;}

#coordonnees{background-image: url(../images/bm-loc_demolition.png);
background-size: cover;
background-position: center;
position: relative;
z-index: 0;}

::placeholder{color:white;
              font-weight: 900;}





button{background-color:#7f8684;
    background-image:url(../images/bm-loc_logo.png);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 40%;
     padding: 2%;
     color:white;
     margin:2% auto;
     font-size:25px;}


#coordonnees p:first-child {
  font-size: 25px;
  font-family: "Perpetua";
  color: rgb( 222, 230, 212 );
  font-weight: bold;
  
}

button:hover{cursor: pointer;}



#message_erreur_envoye{position: relative;
                       background-color:#76A43B;
                       padding-top:5%;
                         padding-bottom:5%;
                         z-index:20;                       }



#coordonnees span{font-size:25px;color:#41443D;}


#coordonnees span:hover {cursor: pointer;}



/*media querie pour le responsive*/

@media (max-width:576px){
    h1{font-size: 1.5em;}
    h2{font-size:27px;}
}





@media (min-width:576px) and (max-width: 991.99px){
    .liste-services li{font-size:25px;}
    
    }





@media (max-width: 991.99px) { .size_img_header{display: none;}

    .navbar-toggler.collapsed{height: 80px;}

    #section-services .col-lg-3{margin:10px 2%;}

    input{width: 100%;}
    
    textarea{width: 100%;}

    input,textarea{font-size:17px;}
}






@media (max-width: 1199.99px) {
    .navbar-nav > a{font-size:20px;
    margin: auto 1%;}

    .size_img_header{height: 60px;}

    .titre_formulaire > h3{font-size:25px;}

}


@media (max-width: 1199.99px) and (min-width:992px) {    h3 {font-size: 15px;}

    #section-services a{font-size: 15px;}
    
    .liste-services li{font-size: 17px;}}






@media (min-width: 1200px) and (max-width: 1700px){
    
    .navbar-nav > a{font-size:30px;
    margin: auto 1%;}
   
    .size_img_header{height: 80px;}
    
}