.grid{
 
    
    height: 100%;
width: 100vw;


  
   display: grid;
     grid-template-rows: calc(3% - 10px)    calc(20% - 10px)  calc(20% - 10px)  calc(28% - 10px)  calc(20% - 10px)      ;
     grid-template-columns:calc(2% - 10px) calc(24% - 10px ) calc(24% - 10px ) calc(24%  - 10px) calc(24% - 10px )  calc(2% - 10px)   ;
     gap: 10px;
     
}
.grid2{


}


.bw1 {
grid-column: 3 ;
    grid-row: 3;

}
.bw2 {
grid-column: 4;
    grid-row: 3;  
   
}

.grid ul{
list-style: none;
padding-top:10% ; 
width: 100%;  margin: 0;padding-left: 0; margin-top: 6%;
}

.grid ul li{
list-style: none;   
font-size: 9px; 
font-family: 'Roboto';
letter-spacing: 0.2px;
color:#e8e9dd;;
margin: 0;

}   
.blocWorks {
display: flex;  margin: 0;
}

.txtParagraphe {
width: 80%;

margin-top: 0%;
padding-right: 5%;



margin-top: 5%;
border-top: 1px solid rgb(30, 30, 29);
padding-top: 3%;
padding-bottom: 3%;

}


.txtParagraphe p{

font-family: 'Roboto';
font-size:1.5vw;
margin: 0;
margin-top: 0px;
line-height: 1.1;
font-weight: 500;
color: #333331;
}   
.txtParagraphe2 {
width:80%;

margin-top: 0%;
padding-right: 5%;



margin-top:4%;
border-top: 1px solid rgb(30, 30, 29);
padding-top: 3%;
padding-bottom: 3%;

justify-content: space-between;
}
.txtParagraphe2 p{

font-family: 'Roboto';
font-size: 0.65vw;
margin: 0;
text-transform: uppercase;
margin-top: 0px;
line-height: 1.2;
font-weight: 400;
color: #2a2a28;
margin-bottom: 2%;
width: 50%;

}
.txtParagraphe2 p span{

font-family: 'Roboto';
text-transform: uppercase;


font-weight: 700;


}
.page1 {
position: relative;z-index: 99;

}
.grid1{
position: relative;
z-index: 9999;


height: 100%;
pointer-events: none;

}
.imagePrincipale {
grid-column: 1 / 9;
grid-row: 1/7;
background-color: #f2f1eb;
overflow:hidden

}
.imagePrincipale img {
filter: grayscale(100) contrast(0.5);
mix-blend-mode: multiply;
height: 101%;
}

.titre2 h1 {
font-family: 'bd';
text-transform: uppercase;
font-size:4vw;
line-height: 0.8;
color: #242423;
}
.titre h1 {
font-family: 'bd';
text-transform: uppercase;
font-size:9vw;
line-height: 0.8;
color: #242423;
}
.titre3 h1 {
font-family: 'bd';
text-transform: uppercase;
font-size: 4vw;
line-height: 0.8;
color: #242423;
}
.titre3 {

overflow: hidden;
height: 5vw;

margin-left: 0;
margin-left: 0%;
}
.titre2 {

overflow: hidden;
height:5vw;

margin-left: 0;
margin-left: 0%;
}
.titre {

overflow: hidden;
height: 7.2vw;

margin-left: 0;
margin-bottom: 3%;
}
.Titres{
grid-column: 2/4;
grid-row: 2/7;
display: flex;
flex-direction: column;
top: 4%;
position: relative;
}

.titreOut{
display: flex;  margin-bottom: 11%;
}
.image2 {
                   height: 90%;
                   width: 40%;
                    overflow: hidden;
                    position:fixed;  
              
                    left:5%;
                    top:7.5%;
                  }

                  .image2 img {
                    mix-blend-mode: multiply;
filter: grayscale(1);
object-position: 50% 00%;  
                  }

                  .autour2{
                 
background: rgb(227, 225, 221) none repeat scroll 0% 0%;
opacity: 1;

                  }

                  .word {
                    overflow: hidden;
                    display: inline-block;
                    height:1.7vw;
                    opacity:1
                    }
                    .word .char{
                    position: relative;
                    }
                    .word span {
                  overflow: hidden;
                  display: inline-block;
                }
                .mot{
                    transform: translateY(85%);
                }
          
        .page5{
          height: 10vh;
        }

        .image1 {
            grid-column: 4/ 6;
            grid-row: 2/7;
            overflow: hidden;
            position: relative;
            background-color: #f1f1e9;
           
            opacity: 1;
            top:2%;
          width: 100%;
          height: 94%;  pointer-events: all;
          }
           .image1 img{
            mix-blend-mode: multiply;
          filter: grayscale(0.2);
          object-position: 50% 40%;
           }
           /* .image1 img{
            mix-blend-mode: difference;
          } */
          
          
          
          
          
                           
          
                                .image3 {
            grid-column: 1 / 4;
            grid-row: 1/7;
            overflow: hidden;
            filter: grayscale(0.2) brightness(1.1) contrast(0.85);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
                                  .image4{
                                    grid-column: 4/ 9;
                                  grid-row: 1/7;
                              
                                  overflow: hidden;
                                  filter: grayscale(0.2) brightness(1.1) contrast(0.85);
                                  height: 100%;margin-left: -20px;
                                  }
          
                                  img {
                                    height: 100%;
                                    width: 100%;
                                    object-fit: cover;
                                  }
                                  .page1,.page3 {height: 120vh;}
          
                                  .centre {
                                    position: absolute;
                                    height: 50%;
                                    width: 40%;
                               
                                  }
          
                              
          .grid2 {
            grid-template-rows: calc(2% - 10px) calc(20% - 10px) calc(20% - 10px) calc(25% - 10px) calc(20% - 10px);
          }      

          .page4 {height:0vh;}

          footer{
            width: 100%;
            position: fixed;
            left:0%;
            height: 4%;
            bottom:0%;
         
          
        
       
            z-index: 100; 
           align-items: flex-start;
           font-family: 'Roboto';
           text-transform: uppercase;
           font-size: 11px;font-weight: 400;align-items: start;mix-blend-mode: difference;
       color: #eae8e3;
       }
       
       .f1{
         grid-column: 2;
       }.f2{
         grid-column: 3;
       }
       
       .f3{
         grid-column: 5;
         display: flex;
         justify-content: end;
       }
       footer .grid {width: calc(100% + 0px);}.art p {
         width: 35%;
         font-size: 7px;
         font-weight: 100;
       }
       .pin-spacer {
         pointer-events: none;
       }
       
       .autour {
         background: rgb(217, 215, 211) none repeat scroll 0% 0%;
         height: 100%;
       }

       
  @media (max-width: 680px), screen and (orientation: portrait) { 

    .image1 {
  grid-column: 2/ 6;
  grid-row: 2/4;
  height: 94%;
  }
  .Titres {
  grid-column: 2/6;
  grid-row: 4/8;
  display: flex;
  flex-direction: column;
  margin-top: -10%;
}
.titre h1{
  font-size: 10vh;
}.titre {
  height: 9vh;margin-bottom: 0%;
}.word {
 
  height: 3vh;
  opacity: 1;
}
.txtParagraphe p {

  font-size: 3vh;
  line-height: 1.3;
  margin-top: 1%;
}
.txtParagraphe  {
  padding-right: 0;
  margin-top: 2%;
width: 100%;
}
.txtParagraphe2 {
  width: 100%;
  margin-top: 0%;
  padding-right: 0%;
 
}
.txtParagraphe2 p {



  line-height: 1.3;

  width: 100%;
  font-size: 1.3vh;
}
.grid  {
gap: 30px 10px;

} 
 .page4 {height:0vh;}
 footer{opacity: 0;}
 .art  {
    display:none
  }.head1 {
  grid-column: 2/4;
}
 .footerMenu{opacity:1}
  }
  .grid {
 

  }
  .menuBig{
    position: fixed;
    background-color: rgba(21, 21, 20, 1);
    height: 100%;
    width: 100%;
    z-index: 2;
    transition-delay: 2s;
    display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden; 
      transition:1.5s;
      visibility: hidden;
      opacity: 0;
      top:0
  }
  .open {
   transition: 0.5s cubic-bezier(0,.94,0,.98);
   visibility: visible;
      opacity: 1;
  }

  .head1 {
    grid-column: 2/4;
  }
  
  @media (max-width: 680px),
  screen and (orientation: portrait) {
    .head1 {
      grid-column: 2/4;
    }

    .titre {
      height: 7vh;
      margin-bottom: 0%;
    }

    .titre h1 {
      font-size: 8vh;
    }
  }    
  
  header {
              width: 100%;
              position: fixed;
              left: 0%;
              height: 6%;
              top: 2%;
              z-index: 100;
              font-family: 'Roboto';
              text-transform: uppercase;
              font-size: 13px;
              font-weight: 500;
              align-items: start;
              color: #d7d4d0;
              mix-blend-mode: difference;
            }.art {
              font-size: 13px;
              font-weight: 500;
              letter-spacing: 0.2px;
          
              color: #d7d4d0;
            }.art p {
              color: #d7d4d0;
            }
  #boutonMenu {
position: relative;
top: 0.9px;
margin-top: -8px;
width: 50%;
width: 27px;
height: 32px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
#menu h2 {

font-size: 12vh;line-height: 0.85;

}
.menu-pincipal h2{

font-size: 12vh;line-height: 0.85;
}
.work5 {
margin-left: 15%;
}.menu-pincipal {
margin-top: 5%;
margin-bottom: 2%;
}.imgPrinc {
height: 107%;

}
.grid {

grid-template-rows: calc(3% - 10px) calc(20% - 10px) calc(25% - 10px) calc(28% - 10px) calc(20% - 10px);

}
.Titres {
grid-column: 2/6;
grid-row: 4/8;
display: flex;
flex-direction: column;
margin-top: -2%;
}.image1 img {
mix-blend-mode: multiply;
filter: grayscale(0.2);
object-position: 50% 70%;
}
}


@media only screen 
and (min-device-width: 809px) 
and (max-device-width: 1200px) 
and (orientation: landscape) 
{
  #menu h2 {

font-size: 21vh;
line-height: 0.85;

} 
.menu-pincipal {
width: 90%;

}.and {
margin-left: 2%;
}.imgPrinc {
height: 16%;
width: 16.8%;
object-fit: cover;
position: absolute;
left: 60%;
top: 52%;
filter: grayscale(0.3);
}.menu-current {
position: absolute;
width: 220px;
left: 69%;
top: 2%;
font-family: 'bd';
text-transform: uppercase;
font-size: 10px;
flex-direction: column;
z-index: 9999;
color: rgb(235, 231, 220);
overflow: hidden;
}footer {
opacity:0
}
.art{opacity:1}
.grid1 {

margin-top: 1%;
}.grid {
height: 100%;
width: 100vw;
display: grid;
grid-template-rows: calc(3% - 10px) calc(20% - 10px) calc(20% - 10px) calc(28% - 10px) calc(20% - 10px);
grid-template-columns: calc(2% - 10px) calc(20% - 10px ) calc(20% - 10px ) calc(24% - 10px) calc(32% - 10px ) calc(2% - 10px);
gap: 10px;
}header .grid {

grid-template-columns: calc(2% - 10px) calc(20% - 10px ) calc(20% - 10px ) calc(32.5% - 10px) calc(24% - 10px ) calc(2% - 10px);

}
}
#boutonMenu {
  position: relative;
  top: 0.9px;
  margin-top: -9px;
  width: 50%;
  width: 24px;
  height: 32px;
}