.body {
    font-family: 'Roboto';
    overflow: scroll;
    overflow-x:hidden
  
  }
  
  .body.menu {
    overflow: hidden;
  
  }
  
  .menubig{
    top:0
  }
  
  
  
  .marquee {
    position: fixed;
    top: 7%;
    z-index: 9999;
    text-transform: uppercase;
    left: 2%;
    font-size: 35px;
    color: #3e3e3e;
    letter-spacing: 1px;
  }
  .pardessus{
      height: 100vh;
      width: 100%;
      object-fit: cover;
      opacity: 0.025;
      position: fixed;
      z-index: 1001;
      pointer-events: none;
  }
  
    
  
  
  
  .imgup{
  position: fixed;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 9999;
  opacity:0;
  background: url('ok.jpg');
  background-size: cover;
  pointer-events: none;
  top:0
  }
  #intro {
      height: 100%;
      position: fixed;
      width: 100%;
      bottom:0;
      background-color: rgba(21, 21, 20, 1);
      z-index: 9999;
  }
  
  .art {
  grid-column: 3;
    font-size: 11px;
  
  }
  header {
    font-family: 'trade bold';
    text-transform: uppercase;
    font-size: 11px;
  position: fixed;
  
  top:2%;
  height: 6%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;align-items: start;
  color: #e2dfd9;
  }.art p {
    width: 50%;
    font-size: 8px;font-weight: 100;
  letter-spacing: 0.1px;color: #e2dfd9;
  }
  .pardessus{
      height: 100vh;
      width: 100%;
      object-fit: cover;
      opacity: 0.025;
      position: fixed;
      z-index:999999999999999999;
      pointer-events: none;
  }
  section{min-height: 100vh;}
  /* /////////////////////////////////HEADER */
  
  header{
       width: 100%;
       position: fixed;
       left:0%;
       height: 6%;
       top:2%;
     
   
  
       z-index: 999999999999999999999999999;  
  
      font-family: 'Roboto';
      text-transform: uppercase;
      font-size: 13px;font-weight: 700;align-items: start;color: #e2dfd9;
      mix-blend-mode: difference;
      transform:translateY(-100px) ;
  }
  header  .grid{
   
      
   height: 100%;
  width: 100%;
  
  
  
  display: grid;
  grid-template-rows: 100%;
    grid-template-columns:calc(2% - 10px) calc(24% - 10px ) calc(24% - 10px ) calc(24%  - 10px) calc(24% - 10px )  calc(2% - 10px)   ;
    gap: 10px;
    
  }
  .art {
      font-size: 13px; font-weight: 700;letter-spacing: 0.2px;
   color: #e2dfd9;
  }
  
  .art p {
    width: 70%;
    font-size: 9px;
    font-weight: 100;
  }
  .head1{grid-column: 2;}
  .head2 {grid-column: 3;
  margin-left: 2%;
  }
  .head3 {
    grid-column: 5;
    display: flex;
    justify-content: flex-end;
  }
  .menu{margin-right: 2%;}
  #boutonMenu {
    position: relative;
    top: 0.9px;
    margin-top: 2px;
  }
  header .grid {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: calc(2% - 10px) calc(30.5% - 10px ) calc(24% - 10px ) calc(24% - 10px) calc(18.5% - 10px ) calc(2% - 10px);
    gap: 10px;
  }

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


  
   display: grid;
     grid-template-rows: calc(2% - 10px)    calc(20% - 10px)  calc(20% - 10px)  calc(20% - 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;
     
}





.txtParagraphe {
grid-column: 3 / 6;
grid-row: 3;

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


}
#author {

padding-right: 2%;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2px;
color: #302f2d;
text-transform: uppercase;
margin-top: 5%;
}
#author span {

color: #82807c;

}
.author {
grid-column: 2 / 3;
grid-row: 3;
padding-right: 2%;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2px;
color: #302f2d;
text-transform: uppercase;
}
.author span {
grid-column: 2 / 3;
grid-row: 3;
padding-right: 2%;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2px;
color: #82807c;
text-transform: uppercase;
}
.author2 img {

width: 100%;
margin-top: 3%;
margin-bottom: 2%;
height: 20%;
position: relative;
top:0

}
.author img {

width: 90%;
margin-top: 3%;
height: 155%;
position: relative;
top:0

}
.txtParagraphe p{

font-family: 'Roboto';
font-size:3.8vw;
margin: 0;
margin-top: 0px;
line-height: 1.1;
font-weight: 700;
color:#302f2d;
width: 95%;
}
.page1 {
position: relative;z-index: 99;

}
.grid1{
position: relative;
z-index: 9999;
mix-blend-mode: difference;

height: 160%;

}
.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:16vw;
line-height: 0.8;
color: #302f2d;
}
.titre h1 {
font-family: 'bd';
text-transform: uppercase;
font-size:16vw;
line-height: 0.8;
color:#302f2d;
}
.titre3 h1 {
font-family: 'bd';
text-transform: uppercase;
font-size: 16vw;
line-height: 0.8;
color:#302f2d;
}
.titre3 {
grid-column: 3/7;
grid-row: 2;
overflow: hidden;
height: 13vw;
margin-top: 0%;
margin-left: 0;
margin-left: 25%;
}
.titre2 {
grid-column: 5/6;
grid-row: 2;
overflow: hidden;
height: 13vw;
margin-top: 0%;
margin-left: 0;
margin-left: -12%;
}
.titre {
grid-column: 2/4;
grid-row: 2;
overflow: hidden;
height: 13vw;
margin-top: 0%;
margin-left: 0;
}

.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;

                  }

                  .image1 {
                    grid-column: 2 / 6;
                    grid-row: 2/9;
                    overflow: hidden;
                    position: relative;
                    background-color: #f1f1e9;
                    margin-top: 19%;
                    opacity: 0.9;
                  }
                   .image1 img{
                    mix-blend-mode: multiply;
                  filter: grayscale(0);
                  object-position: 50% 00%;
                   }
                   /* .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;
                                          }
                                    
                  
                                          .centre {
                                            position: absolute;
                                            height: 50%;
                                            width: 40%;
                                       
                                          }
                  
                                          .txtParagraphe2 {
                    grid-column: 4 / 6;
                    grid-row: 4/6;
                    margin-top: 0%;
                    padding-right: 8%;
                    column-count: 3;
                    align-self: end;
                    column-gap: 3%;margin-top: 50px;
                  }
                  .txtParagraphe3 {
                    grid-column: 4 / 6;
                    grid-row: 4/6;
                    margin-top: 0%;
                    padding-right: 8%;
                    column-count: 1;
                    align-self: end;
                    column-gap: 3%;margin-top: 50px;
                    width: 30%;
                  }
                  
                  
                  .txtParagraphe2 p{
                  
                    font-family: 'Roboto';
                    font-size: 0.85vw;
                  margin: 0;
                    margin-top: 0px;
                  line-height: 1.2;
                  font-weight: 400;
                  color: #302f2d;
                  margin-bottom: 2%;
                  
                  }
                  .txtParagraphe3 p{
                  
                    font-family: 'Roboto';
                    font-size: 0.85vw;
                  margin: 0;
                    margin-top: 0px;
                  line-height: 1.2;
                  font-weight: 400;
                  color: #302f2d;
                  margin-bottom: 2%;
                  
                  }
                  .grid2 {
                    grid-template-rows: calc(2% - 10px) calc(8% - 10px) calc(26% - 10px) calc(26% - 10px) calc(26% - 10px) calc(10% - 10px);
                    grid-template-columns: calc(2% - 10px) calc(30% - 10px ) calc(24% - 10px ) calc(24% - 10px) calc(24% - 10px ) calc(2% - 10px);
                  }   
                  @media screen  and (max-width:1400px) {
                    .txtParagraphe2 p, .txtParagraphe3 p  {
                  
                    font-size: 1vw;
                  
                  }
                  }
                  
                  @media screen  and (min-width:681px) {
                    .author2 {
                      display: none;
                    }
                  
                  }


                  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%;
               }
               
               
               
               
               @media (max-width: 680px), screen and (orientation: portrait) {
               
                 .author img{
                   display: none;
                 }
                 .art{display: none;}.head1 {
                 grid-column: 2/4;
               }
               
               .titre2 {
                 font-size: 16vw;
                 margin-left: 0vw;
                 justify-self: end;
               }
               .titre2 {
               
                 margin-left: 20%;
               
               }
               .f3 {
                 grid-column: 4/6;
                 display: flex;
                 justify-content: end;
               }
               .f3 p {
                 text-align: right;
               }
               .txtParagraphe {
                 grid-column: 2 / 6;
                 grid-row: 2/6;
                 padding-right: 0%;
                 margin-top: 8%;
                 margin-bottom: 2%;
               }
               .page1{
                 height: auto;
               } .page0{
                height: auto;
              }
               .image1 {
                 grid-column: 2 / 6;
                 grid-row: 2/6;
               
               }
               .grid2 {
                 position: relative;
                 height: auto;
                 grid-template-rows: calc(2% - 10px) calc(8% - 10px) calc(26% - 10px) calc(26% - 10px) calc(28% - 10px) calc(25% - 10px);
                 padding-bottom: 15%;
               
                 margin-top: 2%;
                 width: 98vw;
               
               }
               .txtParagraphe p {
                 font-size: 10vw;
               }
               .txtParagraphe2 , .txtParagraphe3{
                width: auto;
           
               padding-right: 5%;
               column-count: 1;
               
               
               margin-top: 0px;
               
               }.txtParagraphe2 p,.txtParagraphe3 p {
               
               
                 font-size: 18px;
                 margin-top: 20px;
               }
               .txtParagraphe2 p:last-child {
                 margin-bottom: 20px;
                
               }
               .txtParagraphe3 p:last-child {
                margin-bottom: 20px;
               
              }
               .f1 {
                 grid-column: 2/5;
                 grid-row: 1/5;
               }
               .f2 {
                 grid-column: 2/5;
                 grid-row: 1/5;
               }footer div {
                 width: 100%;
                 overflow: hidden;
                 position: relative;
               }.f3 {
                 grid-column: 4/6;
                 display: flex;
                 justify-content: end;
                 width: 100%;
                 grid-row: 1/4;
               }
               }
               
               
               
               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;
              }.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%;

}

.txtParagraphe p {
  font-size: 90vw;
  width: 90%;
  margin-top: 0%;

}
.txtParagraphe2 p {
  font-size: 2vh;  width: 100%;  margin-top: 2%;
}
}




@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}
header {
  width: 99%;
  
}.grid2 {
  grid-template-rows: calc(2% - 10px) calc(8% - 10px) calc(26% - 10px) calc(26% - 10px) calc(26% - 10px) calc(10% - 10px);
  grid-template-columns: calc(2% - 10px) calc(30% - 10px ) calc(24% - 10px ) calc(24% - 10px) calc(22% - 10px ) calc(2% - 10px);
}.txtParagraphe2 {
 
  margin-top: 23px;
}
#author {
 
  margin-top: 7%;
  }
  .author img {
  width: 90%;
  margin-top: 3%;
  height: 122%;
  position: relative;
  top: 0;
}
.txtParagraphe p {

  font-size: 4vw;
 
}.txtParagraphe2 p {
  font-size: 1vw;
}

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