html{overflow-x: clip;}
body{overflow-x: clip;}
/*--------------------------------------MUR------------------------------------------*/
@media(min-width:992PX)and (max-width: 1124px){
   .mur
    {height: 600px;
        width: 150px;
    background-image: url(IMAGE/MUR\ BRIQUE.jpg);
    background-repeat: no-repeat;
    margin-top: -400px;
    }}
    @media(min-width:992px)and (max-width: 1124px){
    .mur2
    {height: 600px;
        width: 70%;
    background-image: url(IMAGE/MUR\ BRIQUE.jpg);
    background-repeat: no-repeat;
    margin-top: -600px;
     margin-left: 880px;}}
   
     @media(min-width:1100px) and (orientation:landscape) {
        .mur2{margin-left: 960px;}
     }  



     
     @media(min-width:1200px){
        .mur{height: 600px;
            width: 220px;
        background-image: url(IMAGE/MUR\ BRIQUE.jpg);
        background-repeat: no-repeat;
        margin-top: -400px;}
        .mur2{height: 600px;
            width: 270px;
        background-image: url(IMAGE/MUR\ BRIQUE.jpg);
        background-repeat: no-repeat;
        margin-top: -600px;
         margin-left: 1080px;}
     }

   

/*--------------------------------------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: 25px;
background-size: 50%;}
   }
  
   @media screen and (min-width: 601px) and (max-width: 1024px){
    .bativert{margin-top: 100PX;

    }}

 

   @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(min-width:992px)and (max-width: 1024px){
    .navbar{margin-top: 40PX;}  
 }    
       @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: 100px;
    width: 110%;} }   
      
    @media screen and (min-width: 950px){
        .navbar-nav > li > a{font-size: 22PX;
        margin-left: 20px;}}  
       
       
       @media screen and (min-width: 950px) {
        .nav-link{color: aliceblue;
        font-size: 22PX;
      font-weight: 500;
    margin-left: 40px;
    font-family: "Pridi", serif;
font-style: normal;}}

  @media screen and (min-width: 950px){
    .nav > li > a:hover{color:red; }} 
    
    
     
@media screen and (min-width:300px) and (max-width:950PX){
    .nav{display: block;
    background-color: green;
width: 50%;} }

    .nav > li > a{color: white;}
   
       
    .navbar-toggler{color: red}
   .navbar-toggler-icon{color:red;}
  
   @media(min-width:992px)and (max-width: 1024px){
    .navbar{margin-top: 0PX;}  
 } 
       @media (min-width:1025px){
        .navbar{width: 120%;
        margin-top: 120px;}}

        @media(min-width:1100px) and (orientation:landscape) {
            .navbar{max-width: 140%;}
         }  
              
  
 /*--------------------------------------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:480PX){
.vert {margin-top:-220px;}}

 @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: 30px;
    width: 90%;} }
    
    @media screen and (min-width: 601px) and (max-width: 950px) {
    .vert p {font-size:16PX;
margin-top: 175PX;
margin-left: 60PX;
text-align: center;}}
 
@media screen and (min-width: 601px) and (max-width: 950px){
    .vert {margin-top: -220px;
        width: 90%;}}
        @media(min-width:992px)and (max-width: 1024px){
            .vert p{margin-left:-50px;
            margin-top: -140px;}

        }


 @media screen and (min-width: 950px) {
    .vert{margin-top: -125PX ;
    margin-left: 250px;}}

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

@media(min-width:1100px) and (orientation:landscape) {
    .vert{margin-left: 160px;}
}
 
 /*--------------------------------------SLOGAN ROUGE------------------------------------------*/     
.rouge
{margin-top: -140px;
 margin-left: 230px;
color: red;  
 margin-left: 330px;
 width: 95%; 
  
}
.rouge p{font-size: 15px;
font-weight: bold;
font-style: italic;

}               

@media screen and (max-width: 600px){
  .rouge p{margin-top:60px;
  margin-left: -290px;
  text-align: center;
  width: 90%;
  font-weight: 800;
  font-size: 9px;
  font-style: italic;
 }}
 @media screen and (min-width: 601px) and (max-width: 950px){
    .rouge p{font-size:13PX ;
    font-weight: bold;
text-align: center;
margin-top: 120px;
}}
   
@media(min-width:992px)and (max-width: 1024px){
    .rouge{margin-left: 150PX;
    margin-top: -320px;
position: absolute;}
    
    }


@media screen and (min-width: 601px) and (max-width: 950px){
        .rouge {width: 75% ;
        margin-left: 80px;}}


 
    @media(min-width:1100px) and (orientation:landscape) {
        .rouge p{margin-left: -80px;}} 

        @media screen and (min-width: 1025px) {
            .rouge p{margin-top: -190PX ;
            margin-left: 0px;}}
         
  
 /*--------------------------------------MOT PDG------------------------------------------*/   

.motdupdg
{ margin-left: 300px;
    margin-top: 50px;
}
@media screen and (max-width: 600px){
.motdupdg h1{ font-size: 16px;
margin-top:-30px;
margin-left: -290px;}
    }

    @media screen and (min-width: 601px) and (max-width: 950px){
        .motdupdg{margin-left: 70px ;
        margin-top: -80px;}}   
       
       
       
        @media screen and (min-width: 950px){
            .motdupdg{ margin-left: -20px;}
        }

 
 /*--------------------------------------TEXTE------------------------------------------*/

.texte {width:69%;
    height: 800PX;
    margin-top: 20px;
    margin-left: 260px;
    font-family: "Pridi", serif;
    font-weight: 400;
    font-style: normal;  
color:black;
display: flex;}

@media screen and (max-width: 600px){
.texte {margin-left: 40px;
margin-top: 40px;
width: 80%;}}


 @media screen and (min-width: 601px) and (max-width: 950px){
.texte{width: 80%;
     margin-left: 100PX;
     margin-top: 140px; }}
 @media screen and (min-width: 601px) and (max-width: 950px){
.texte p{font-size:16PX ;
margin-left: -30px;}}

 @media screen and (max-width: 600px){
 .texte p {margin-top: 90PX;
        margin-left: 35px;
    font-size: 16PX;
    width:80%;
height: 600px;}}
 @media screen and (min-width: 950px){
        .texte{width: 85%;
        margin-left:-60px;}}

 @media(min-width:950px){
        .texte p {width:970PX;
        height: 950PX;
    font-size: 26px;
margin-left: 260PX;}}

h1{text-align: center;
    font: size 40px;
    color: rgb(57, 142, 57);
    margin-top:  100PX; 
    font-weight: 700;
}

p{text-align:justify;
    font-size:22px;
    margin-left: 70px;
margin-top: 90px;}


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

.photos {background-image: url(IMAGE/PHTO\ V.jpg);
        background-repeat: no-repeat;
        background-position:center;    
    background-size: 55%;   
margin-left:1100px;
margin-top: -110px;
position: absolute;}

@media screen and (max-width: 600px) {
.photos{margin-top: -70px;
    margin-left: 140px;
height: 40%;
width: 30%;}}



@media screen and (min-width: 601px) and (max-width: 950px){
.photos{margin-left: 300PX;
     margin-top: -140px;
    width: 25%;
height: 50%;}}

@media(orientation: landscape) {
    .photos{margin-top: 20PX;
    margin-left: 280px;}

 }

 
@media(min-width:992px){
.photos{margin-left: 930px;
    margin-top: -90px;
width: 15%;
height: 35%;}
}
@media(min-width:992px)and (max-width: 1024px){
    .photos{margin-left: 420px;}
 }  
 /*--------------------------------------FOOTER------------------------------------------*/ 

footer
{width: 100%;
height: 230px;
margin-top: 50px;
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;
}
@media screen and (max-width: 600px) {
   footer h3 {font-size: 30px;
margin-top: -50px;
}}

@media screen and (max-width: 950px) {
    .tel p{margin-left: 90%;}}


@media screen and (max-width: 600px){
footer{margin-top: 200px;
width: 100%;
height: 170px;}}


@media(min-width :768px){
footer{margin-top: -200px;
width: 100%;}
}
@media(min-width:992px){
footer{margin-top: 200px;}}


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

@media  (max-width: 480px){
.mail P{font-size:20PX;}}


.tel p{margin-top: -20px;
    color: yellow;
font-weight: 700;
margin-left: 560PX;
font-size: 16PX;}
@media (max-width: 480px){
    .tel p{margin-left: 100PX;}  
}
@media screen and (min-width: 601px) and (max-width: 950px){
    .tel p{margin-left: 300px;}
    .mail P{margin-left: -30px;}
    footer h3{margin-left: -20PX;}}
 @media(orientation: landscape) {
    .tel p{margin-left: 280px;}
    .mail P{margin-left: -100px;}
    footer h3{margin-left: -120PX;}    


}


@media(min-width:1000px){
    .tel{margin-left: 18%;} 
  } 

@media(min-width:1000px){
    .mail p{margin-left: -20%;} 
  }  
  @media(min-width:1000px){
    footer h3{margin-left: -310px;}
  }
  
 @media (orientation: landscape){
        footer{width: 125%;
        }}

        @media(min-width:1100px) and (orientation:landscape) {
            footer{max-width:140%;}
         }  
           

img{width: 80%;}

@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: 26px;
    font-family: "Saira Stencil One", sans-serif;
    font-weight: 400;
    font-style: normal;
   position: absolute;
    margin-top:-120PX;
    margin-left: 250px;
    width: 95%; }
    

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


.photos {background-image: url(IMAGE/PHTO\ V.jpg);
        background-repeat: no-repeat;
        background-position:center;    
    background-size: 55%;   
margin-left:1150px;
margin-top: -150px;
position: absolute;}


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

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


}



  html{overflow-x: clip;}

 body{ color: white;
  overflow-x: clip;}