body{overflow-x:hidden ;
max-width: 100%;}
.bativert{overflow-x: hidden;}
footer{overflow-x: hidden;}


 /*--------------------------------------Mur------------------------------------------*/
@media(min-width:992px){
 .mur
  {height: 600px;
      width: 200px;
  background-image: url(IMAGE/MUR\ BRIQUE.jpg);
  background-repeat: no-repeat;
  margin-top: -400px;}}




  @media(min-width:992px){
  .mur2
  {height: 600px;
      width: 250px;
  background-image: url(IMAGE/MUR\ BRIQUE.jpg);
  background-repeat: no-repeat;
  margin-top: -600px;
   margin-left: 1060px;}}
  
  
 

 /*--------------------------------------BATIVERT------------------------------------------*/


.bativert{height: 380px;
      background-image:url(IMAGE/IMG-20210218-WA0021.jpg);
      background-repeat: no-repeat;
      background-position:center;    
  background-size: 55%;
  margin-left: 50px;
position: sticky;}

@media(max-width:500px){
.bativert{margin-top: -90px;
  margin-left: 35px;
background-size: 50%;}
 }

 @media screen and (min-width: 491px) and (max-width: 760px){
  .bativert{margin-left: 210PX;
  background-size:  80%;}
 }

 @media screen and (min-width: 601px) and (max-width: 1024px){
  .bativert{margin-top: 70PX;}
 }


 @media(min-width:992px){
  .bativert{background-size: 40%;
      margin-left:0PX ; }}

 /*--------------------------------------NAVBAR------------------------------------------*/
 
       .navbar-nav > li > a
       {font-size:24px;
           font-weight: 600;
           color: white;
           background-color: red;
           margin-top: -0px;
       margin-left: 40px;}
     
       @media screen and (min-width: 601px) and (max-width: 950px){
     .navbar{
     margin-top: 100px;
     
     }}
     
     @media screen and (min-width: 950px){
      .navbar{background: rgb(21,97,58);
        background: linear-gradient(0deg, rgba(21,97,58,1) 0%, rgba(72,189,65,1) 100%);  
      margin-top: 110px;
    width: 110%;}}   
     
    @media screen and (min-width: 950px){
      .navbar-nav > li > a{font-size: 22PX;
      margin-left: 30px;}}  
    
     @media screen and (min-width:300px) and (max-width:950PX){
      .nav{display: block;
      background-color:green;
  width: 50%;} }
  
      .nav > li > a{color: white;}
     

     @media screen and (min-width: 950px) {
      .nav-link{color: aliceblue;
      font-size: 22PX;
    font-weight: 400;
  margin-left: 40px;
  font-family: "Pridi", serif;
font-style: normal;}}

@media screen and (min-width: 950px){
  .nav > li > a:hover{color: RED; }}   


 
     
     .navbar-toggler{color: red}
     .navbar-toggler-icon{color:red;}
     
 
 /*--------------------------------------SLOGAN VERT------------------------------------------*/
.vert
  {color:green;
  margin-left: 0px;
  font-size: 26px;
  font-family: "Saira Stencil One", sans-serif;
  font-weight: 400;
  font-style: normal;
 position: absolute;
  margin-top:-190PX;
  margin-left: 20px;
  width: 95%; }
 
  @media screen and (min-width:300px) and (max-width:780PX){
.vert {margin-top:-290px;
  margin-left: 60PX;
  
}}

@media screen and (max-width: 600px){
.vert p{margin-top:170px;
margin-left: -10px;
width: 96%;
font-weight:100;
font-size: 13px;
text-align: center;}} 
 @media screen and (max-width: 600px){
  .vert{margin-left: 60px;
  width: 80%;}
}
@media screen and (min-width: 601px) and (max-width: 950px) {
  .vert p {font-size:16PX;
margin-top: 145PX;
margin-left: -30PX;
text-align: center;}
}
@media screen and (min-width: 601px) and (max-width: 950px){
  .vert {margin-top: -210px;
      width: 95%;}
}

@media screen and (min-width: 950px) {
  .vert{margin-top: -220PX ;
  margin-left: 320px;
font-size: 20PX;}
}


 /*--------------------------------------SLOGAN ROUGE-----------------------------------------*/

.rouge
{margin-top: -140px;
margin-left: 230px;
color: red;  
margin-left: 260px;
width: 90%; }

.rouge p{font-size: 19.5px;
font-weight: bold;
font-style: italic;}               

@media screen and (max-width: 600px){
.rouge p{margin-top:60px;
margin-left: -200px;
text-align: center;
width: 90%;
font-style: italic;
font-weight: 800;
font-size: 9px;}}

@media screen and (min-width: 601px) and (max-width: 950px){
  .rouge p{font-size:12PX ;
  font-weight: bold;
text-align: center;
margin-top: 110px;}}
  
@media screen and (min-width: 601px) and (max-width: 950px){
      .rouge {width: 75% ;
      margin-left: 120px;}}

@media screen and (min-width: 950px) {
  .rouge p{margin-top: -190PX ;
  margin-left: 80px;
font-size: 15PX;}}



 /*--------------------------------------TITRE------------------------------------------*/
h1{color: red;
  text-align: center;
margin-top: 50px;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;}

@media(max-width:480px){
  h1{margin-top: 10px;
  font-size: 22px;
margin-left: 20px;
color: green;
font-weight: 500;}}
@media screen and (min-width: 491px) and (max-width: 760px){
  h1{margin-left: 200PX;}}

@media(min-width:760PX){
  h1{margin-top: 20px;}}

 /*--------------------------------------PARAGRAPHE------------------------------------------*/
.para1
{width: 450px;
height: 140px;
margin-top: 60px;
margin-left: 120px;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
}



.para2
{width: 450px;
height: 140px;
position: absolute;
margin-left: 720px;
margin-top: 120px;
font-family: "Pridi",serif;
font-weight: 400;
font-style: normal;
font-size: 22px;}

.para3
{width: 450px;
height: 60px;
margin-top:300px ;
margin-left: 90px;
position: absolute;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 22px;}


 /*--------------------------------------PHOTOS------------------------------------------*/

.photos1
{width: 70%;
height: 80%;
border-radius: 40px;
margin-left: 100px;}


.photos2
{width: 70%;
height: 90%;
border-radius: 40px;}

.photos3
{width: 100%;
height: 80%;
border-radius: 40px;}

.img1
{width: 300px;
height:200px;
position: absolute;
margin-top: -20px;
margin-left:600px;}


.img2
{width: 200px;
height: 150px;
position: absolute;
margin-top: 50px;
margin-left: 70px;}


.img3
{margin-left: 0px;
margin-top: 740px;}


 /*--------------------------------------FOOTER------------------------------------------*/

footer
{width: 100%;
  height: 200px;
  margin-top: 40px;
  background: rgb(21,97,58);
            background: linear-gradient(0deg, rgba(21,97,58,1) 0%, rgba(72,189,65,1) 100%); }
  @media(max-width:480px){
    footer{
        margin-top: 280PX;}
    }
 
    @media screen and (min-width: 491px) and (max-width: 760px){
      footer{width: 140%;}
    }
 
  
  h3{color: aliceblue;
  text-align: center;
  font-family: "Pridi", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;}
  
  .mail p{ margin-top: 20px;
    color: beige;
    font-weight: 650;
  font-size: 22px;}
    
    .tel p{margin-top: -20px;
        color: yellow;
    font-weight: 700;}



.mail p{ margin-top: 20px;
color: beige;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-weight: 650;
text-align: center;}

.tel p{margin-top: -20px;
    color: yellow;
font-weight: 700;
text-align: center;}


 /*--------------------------------------MEDIA QUERIE PARA------------------------------------------*/
@media(max-width:490px){
  .para1{width: 250px;
  font-size: 15PX;
margin-left: 60px;
margin-top: 40px;}
}
@media screen and (min-width: 491px) and (max-width: 760px){
  .para1{width: 90%;
    text-align: center;
    font-size: 16PX;
  margin-left: 140px;
  margin-top: 40px;}
  }

  @media(max-width:490px){
    .para2{width: 250px;
    font-size: 15PX;
  margin-left: 40px;
margin-top: 230px;}}



  @media screen and (min-width:300px) and (max-width:490PX){
    .para2 p{ margin-left: 30px;
    width: 260px;}
  }

  @media screen and (min-width: 491px) and (max-width: 760px){
    .para2{width: 90%;
      font-size: 16PX;
      text-align: center;
    margin-left: 130px;
    margin-top: 160px;}
    }

    @media(max-width:490px){
      .para3{width:250px; 
              font-size: 15px;
              margin-top: 600px;
              margin-left: 60px;
              
            }}
  
    @media screen and (min-width: 491px) and (max-width: 760px){
      .para3{width: 90%;
        font-size: 16PX;
      margin-left: 130px;
      text-align: center;
      margin-top: 480px;}
      }


      @media(min-width:760PX){
        .para1{width: 380PX;
          font-size: 18px;
        margin-left: 40px;}
      }
      
      @media(min-width:760PX){
        .para2{width: 380PX;
          font-size: 18px;
        margin-left: 375px;
      margin-top: 100px;}
      }
      
      @media(min-width:760PX){
        .para3{width: 50%;
          font-size: 18px;
        margin-left: 30px;
        }
      }

      @media(min-width:1000px){
        .para1{width: 450px;
          height: 140px;
          margin-top: 60px;
          margin-left: 130px;
          font-size: 22px;
          }}
        
        
        
        @media(min-width:1000px){
          .para2{
            width: 450px;
            height: 140px;
            position: absolute;
            margin-left: 720px;
            margin-top: 140px;
            font-size: 22px;}
            }
          
          
        
          @media(min-width:1000px){
            .para3{
              width: 450px;
              height: 140px;
              margin-top:380px;
              margin-left: 120px;
              font-size: 22px;}
              }

 /*--------------------------------------MEDIA QUERY PHOTOS------------------------------------------*/

      @media screen and (min-width:300px) and (max-width:490PX){
        .photos1{margin-top:60PX ;
        margin-left: -520PX;
       }
      }
      @media screen and (min-width: 491px) and (max-width: 760px){
        .photos1{margin-top: -20PX;
       
        width: 100%;
        height: 95%;  
      margin-left: -300px;}
      }
    
    @media screen and (min-width:300px) and (max-width:490PX){
      .photos2{margin-left: 0PX;
      margin-top: 350PX;}
    }
    @media screen and (min-width: 491px) and (max-width: 760px){
      .photos2{margin-top: 220PX ;
        
      width: 150%;
    height: 120%;
  margin-left:210PX ;}
    }
 
    @media screen and (min-width:300px) and (max-width:490PX){
      .photos3{margin-top: 120px;
      margin-left: -410PX;}
    }
    @media screen and (min-width: 491px) and (max-width: 760px){
      .photos3{margin-left: 260px;
        margin-top: -20PX;
      width:60%;
    height: 20%;}
    }


    @media screen and (min-width:300px) and (max-width:490PX){
    .img1{width:90% ;
          height: 30%;}
    }
    
    @media screen and (min-width:300px) and (max-width:490PX){
      .img2{width: 90%;
      height: 30%;}
    }

  
    @media screen and (min-width:300px) and (max-width:490PX){
      .img3{margin-left: 470px;
        width: 70%;
      height: 30%;}
    }



@media(min-width:760PX){
  .photos1{width: 290PX;
    height: 180px;
    font-size: 18px;
  margin-left: -150px;
margin-top: -120PX;}
}

@media(min-width:760PX){
  .photos2{width: 300PX;
    height: 180px;
    font-size: 18px;
  margin-left: -20px;}
}

@media(min-width:760PX){
  .photos3{width: 290PX;
    height: 180px;
    font-size: 18px;
  margin-left: 430px;
  margin-top: -740PX;
}}



      @media(min-width:1000px){
        .photos1{width: 500px;
          height: 250px;
          border-radius: 40px;
          margin-left: 100px;}}
            

    @media(min-width:1000px){
    .photos2{width: 500px;
      height: 250px;
      border-radius: 40px;
      margin-left: 40px;
    margin-top: 30PX;}}
      
      
    @media(min-width:1000px){
      .photos3{width: 500px;
        height: 250px;
        border-radius: 40px;
        margin-left: 680px;
      margin-top: -520PX;}}
      
      @media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {

.mur
    {height: 600px;
        width: 200px;
    background-image: url(IMAGE/MUR\ BRIQUE.jpg);
    background-repeat: no-repeat;
    margin-top: -400px;
    }
   
    .mur2
    {height: 600px;
        width: 200PX;
    background-image: url(IMAGE/MUR\ BRIQUE.jpg);
    background-repeat: no-repeat;
    margin-top: -600px;
     margin-left: 1240px;}
    
    .vert
    {color:green;
   
    font-size: 24px;
    font-family: "Saira Stencil One", sans-serif;
    font-weight: 400;
    font-style: normal;
   position: absolute;
    margin-top:-220PX;
    margin-left: 350px;
    width: 95%; }
    

   .rouge
{margin-top: -100px;
 margin-left: 280px;
color: red;  
 margin-left: 330px;
 width: 95%; 
  
}
.rouge p{font-size: 15px;
font-weight: bold;
font-style: italic;
margin-left: 90PX;
} 

.para1
{width: 450px;
height: 140px;
margin-top: 60px;
margin-left: 140px;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
color: black;
}

.para2
{width: 450px;
height: 140px;
position: absolute;
margin-left: 720px;
margin-top: 140px;
font-family: "Pridi",serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
color: black;}

.para3
{width: 450px;
height: 60px;
margin-top:380px ;
margin-left: 140px;
position: absolute;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
color: black;}

.img2
{width: 200px;
height: 150px;
position: absolute;
margin-top: 70px;
margin-left: 70px;}

footer
{max-width: 100%;
height: 230PX;
margin-top: 10px;
background: rgb(21,97,58);
background: linear-gradient(0deg, rgba(21,97,58,1) 0%, rgba(72,189,65,1) 100%); 
font-family: "Pridi", serif;
        font-weight: 400;
        font-style: normal;}

h3{color:white;
text-align: center;
font-size: 38px;
font-weight: 600;
font-family: "Pridi", serif;
        font-weight: 400;
        font-style: normal;
}




    .tel p{margin-left: 26%;}

    .mail p{ margin-top: 20px;
color: beige;
font-weight: 650;
text-align: center;
font-family: "Pridi", serif;
margin-left: 0px;       
 font-style: normal;
font-size: 22px;}


}