/* @font-face {
    font-family: 'Satoshi-Variable';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
         url('../fonts/Satoshi-Variable.woff') format('woff'),
         url('../fonts/Satoshi-Variable.ttf') format('truetype');
         font-weight: 300 900;
         font-display: swap;
         font-style: normal;
  }

  @font-face {
    font-family: 'Satoshi-Italic';
    src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
         url('../fonts/Satoshi-Italic.woff') format('woff'),
         url('../fonts/Satoshi-Italic.ttf') format('truetype');
         font-weight: 400;
         font-display: swap;
         font-style: italic;
  } */

  @font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_slnt\,wght.ttf') format('woff2'),
;
         font-weight: 200 900;
         font-display: swap;
         font-style: normal;
  }


  #header_bottom > div img {
     
    cursor: pointer;
}


body{
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ---------------------- NAV ---------------------- */
/* .backgroundvideo-logotibod{
    position:relative;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
    
} */

a{
    cursor: pointer;

}


/* --------- Background Video --------- */
  .background-video-vhs {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }


/* --------- Image tibod/THIBAUD DETONY --------- */
.logo-tibod img{
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) ;
    width:45%;
    float:none;
    z-index: 3;
}

.logo-tibod2 {
    display: flex;
    align-items: center;
    justify-content: center;
    
    float:none;
    z-index: -3;
}

.logo-tibod2 video {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width:100%;
    margin-top: 2vh;
    float:none;
    z-index: 3;
}


/* --------- Header top --------- */
#header_top {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    z-index: 22;
    
}
#header_top > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1%;
    margin-right: 4%;
    margin-left: 4%;
}


#header_top > div a{
    font-family: 'Inter';
    font-weight:200;
    font-size: small;
    text-transform: uppercase;
    color: black;
    list-style-type: none;
    text-decoration:none; 

}

/* --------- Header bottom --------- */
#header_bottom {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
}

#header_bottom > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
}

#header_bottom > div img{
    width:1vw;
    min-width: 20px;
}

#header_bottom > div > a:nth-child(1) > img{
    color:white;


}

#header_bottom > div > a:nth-child(2) > img{
    margin-bottom:5vw;
}

/* ---------------------- PROJETS ---------------------- */
#container_projects {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    margin: 0px 79px;
    /* background-color: rgba(255, 195, 195, 0.507); */
    grid-auto-rows: 15px;
    grid-gap: 1.5vw;
    margin: 0 10%;
    margin-top: 10%;
    margin-bottom: 10%;
}

/* --------- nthchild --------- */

.item:nth-child(1),.item:nth-child(2),.item:nth-child(3),.item:nth-child(4),.item:nth-child(5),.item:nth-child(6),.item:nth-child(7),.item:nth-child(8),.item:nth-child(9),.item:nth-child(10),.item:nth-child(11),.item:nth-child(12),.item:nth-child(13),.item:nth-child(14),.item:nth-child(15),.item:nth-child(16),.item:nth-child(17),.item:nth-child(18),.item:nth-child(19),.item:nth-child(20),.item:nth-child(21){
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}
.item:nth-child(5),.item:nth-child(2),.item:nth-child(10),.item:nth-child(3),.item:nth-child(){
    align-items: flex-end;
}

#nameofwork1{
    font-family: 'Inter';
    font-size : 1vw;
    font-weight: 100;
      color:rgb(170, 169, 169);
}
.item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}






/* --------- Projet 1 --------- */
.item:nth-child(1) {
    grid-row: 5/9;
    grid-column: 14/18;
    z-index: 2;
}
.img-project1{
    background-image: url('../img/incensedome/incensedome1.png');
    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer; 
}



/* --------- Projet 2 --------- */
.item:nth-child(2) {
    grid-row: 18/24;
    grid-column: 23/28;
}
.img-project2{
    background-image: url('../img/index/evabag4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
}


/* --------- Projet 3 --------- */
.item:nth-child(3) {
    grid-row: 14/20;
    grid-column: 4/9;
}
.img-project3{
    background-image: url('../img/surfacebag/v1.jpg');
    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer;
}



/* --------- Projet 4 --------- */
.item:nth-child(4) {
    grid-row: 38/44;
    grid-column: 5/11;
    z-index: 2;
}
.img-project4{

    background-image: url('../img/index/furniture.jpg');

    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer;

}



/* --------- Projet 5 --------- */
.item:nth-child(5) {
grid-row: 68/74;
    grid-column: 3/13;
    z-index: 1;
    /* background-color: rgba(11, 36, 105, 0.582); */
}
.img-project5{
    background-image: url('../img/zerochair/zerochair.png');
    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer;
}





/* --------- Projet 6 --------- */
.item:nth-child(6) {
    grid-row: 61/71;
    grid-column: 22/27;


    
    /* background-color: rgba(11, 105, 19, 0.582); */
}


.img-project6{
       background-image: url('../img/index/langerdress.jpg');

    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer;
}


/* --------- Projet 7 --------- */
.item:nth-child(7) {
   


    grid-row: 29/33;
        grid-column: 10/18;
        z-index: 1;
    /* background-color: rgba(88, 105, 11, 0.582); */
}

.img-project7{
        background-image: url('../img/meditationspace/structure2.png');

    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer;
 
}




/* --------- Projet 8 --------- */
.item:nth-child(8) {
   

     grid-row: 86/92;
    grid-column: 25/29;
    z-index: 1;
    /* background-color: rgba(88, 105, 11, 0.582); */
}
.img-project8{
        background-image: url('../img/unfamous/cover3.png');

    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer;
}





/* --------- Projet 9 --------- */
.item:nth-child(9) {

 grid-row: 48/52;
    grid-column: 15/23;
    z-index: 1;}
.img-project9{
        background-image: url('../img/angeldust/archi1.png');

    background-position: center; 
    background-size:cover;
   
    height: 90%;
    width: 100%;
    cursor: pointer;
}

/* --------- Projet 10 --------- */
.item:nth-child(10) {

    grid-row: 1/14;
        grid-column: 17/26;}
.img-project10{
    background-image: url('../img/spacedesign/1.jpg');

    background-position: center; 
    background-size:cover;
   
    height: 90%;
    width: 100%;
    cursor: pointer;
}



.paquet{
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-row: 97/100;
    grid-column: 12/18;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 10%;
    align-content: center;
    gap: 0.4%;

   
}


/* --------- Projet 11 --------- */
.item:nth-child(11) {
 
        grid-row: 3/8;
    grid-column: 7/15;
}

.img-project11{
    background-position: center; 
    background-size:cover;
    height: 90%;
    width: 100%;
    object-fit: cover;
    object-position: center;

    cursor: pointer; 
}



/* --------- Projet 12 --------- */

.img-project12{
    background-position: center; 
    background-size:cover;
    height: 90%;
    width: 100%;
    object-fit: cover;
    object-position: center;

    cursor: pointer; 
}
.item:nth-child(12) {
 
       grid-row: 54/61;
    grid-column: 1/9;
    /* background-color: rgba(88, 105, 11, 0.582); */
}



/* --------- Projet 13 --------- */

.img-project13{
    background-position: center; 
    background-size:cover;
    height: 90%;
    width: 100%;
    object-fit: cover;
    object-position: center;

    cursor: pointer; 
}

.item:nth-child(13) {
  
       grid-row: 27/31;
    grid-column: 2/13;
    /* background-color: rgba(88, 105, 11, 0.582); */
}

/* --------- Projet 14 --------- */

.img-project14{
    background-position: center; 
    background-size:cover;
    height: 90%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer; 
}

.item:nth-child(14) {

      grid-row: 39/51;
    grid-column: 21/29;
}

/* --------- Projet 15 --------- */

.img-project15{
       background-position: center; 
    background-size:cover;
    height: 90%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer; 

}

.item:nth-child(15) {
 
        grid-row: 59/63;
    grid-column: 5/13;
    z-index: 0;
}



/* --------- Projet 16 --------- */

.img-project16{
        background-image: url('../img/etudes/P1013546.jpg');

    background-position: center; 
    background-size:cover;
   
    height: 90%;
    width: 100%;
    cursor: pointer;

 
}

.item:nth-child(16) {

    grid-row: 79/93;
    grid-column: 2/8;

}

/* --------- Projet 17 --------- */

.img-project17{
    background-image: url('../img/index/ziggychen.jpg');
    background-position: center; 
    background-size:cover;
   
    height: 90%;
    width: 100%;
    cursor: pointer;

    
}

.item:nth-child(17) {
    grid-row: 80/89;
    grid-column: 22/27;
}


/* --------- Projet 18 --------- */

.img-project18{

      background-image: url('../img/index/acumen.png');

    
    background-position: center; 
    background-size:cover;
   
    height: 90%;
    width: 100%;
    cursor: pointer;


  
}

.item:nth-child(18) {
      grid-row: 95/103;
    grid-column: 11/15;
 

}













.item { 
    opacity: 1;
    display: block;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    backface-visibility: hidden;
}




[id^="img-project"] {
    background-size: contain;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
    }
    



@media screen and (min-width: 850px) {
    video {
        transition: filter 0.3s ease;
        will-change: filter;
      }
.item:hover{
    filter: blur(5px);
transform: scale(1.05);
 }

.paquet .item:hover{
    width :180%;
     height:100%;
 }
body{    margin-top: 50%;
}
}

@media screen and (max-width: 1200px) {
   
    #container_projects {
        display: grid;
        margin: 0px 79px;
        /* background-color: rgba(255, 195, 195, 0.507); */
    
        
        margin-top:10% ;
        grid-auto-rows: 15px;
    grid-gap: 1.5vw;

    
    }
    .vide3,.logo-tibod2{
        flex-shrink: 0;
      
        width: 10vh;
        height: 20vh;
        z-index: -9;
    }
   
    .logo-tibod2  {
        margin-top: 7vh;
        
    }
  
     .img-project9 {
       
        /* padding-bottom: 0vh; */
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
        /* height: 57%; */
        /* margin-bottom: -87vh; */
        /* width: 100%; */
        cursor: pointer;
    }

  }

  @media screen and (max-width: 1000px) {
   
    #container_projects {
        display: grid;
        /* background-color: rgba(255, 195, 195, 0.507); */

        

    }

   
    .logo-tibod2 img {
        margin-top: 34vh;
    }
  }


  @media screen and (max-width: 850px) {
    body{    margin-top: 50%;
    }
    .paquet {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;        grid-row: 32/39;
        grid-column: 1/17;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        gap: 1%;
    }
    #container_projects {
        display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    margin-top:10% ;
}

.img-project1{

    height: 60%;  width: 100%;}

.img-project9 {
    
    /* padding-bottom: 0vh; */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    /* height: 57%; */
    /* margin-bottom: -87vh; */
    /* width: 100%; */
    cursor: pointer;
}




.img-project3 {
   
  
    /* width: 125%; */
    /* padding-bottom: 7vh; */
    background-position: center;
  background-size: contain;
            background-repeat: no-repeat;
            height: 100%;
            width: 100%;
    cursor: pointer;

}



.item{
    height: 53vh;
    width: 38vh;
}

#nameofwork1{
    font-size:1.4vh;
}

    
    }
    
    @media screen and (max-width: 500px) {
     
        #container_projects {
            display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        margin: 0px 8vh;
        margin-top: 35%;
    }
    .logo-tibod2 img {
        margin-top: 5vh;    }
    .logo-tibod img{
        width: 94%;
    }
    .vide3 {
        display: block;
        width: 100%;
        height: 100%;
        z-index: -8;
    }
    .item{
        height: 58vh;    }

  

        }
        
        @media screen and (max-width: 400px) {
          
            #container_projects {
                display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
        }

        .logo-tibod img{
            width: 94%;
        }/*
        .item:nth-child(5){
            height: 53vh;    
        } 
        .item:nth-child(6){
            height: 30vh;    
        }

    .item:nth-child(7){
            height: 40vh;    
        }
        .item:nth-child(8){
            height: 40vh;    

        }
        .item:nth-child(9){
            height: 40vh;    
        }
        .item:nth-child(17){
            height: 40vh;    
        }
       
       .item:nth-child(2){
        height: 41vh;    
    }*/

        .item{
            height: 42vh;   
             }
        
    
            }
  @media screen and (max-width: 400px) {
  
            #container_projects {
                display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
        }
        
    
        .item{
            height: 50vh;  }


         

        .logo-tibod img{
            width: 94%;
        }
        
      
            }


   @media screen and (max-width: 420px) {
  
       #container_projects {
           display: flex;
       flex-direction: column;
       flex-wrap: nowrap;
       align-content: center;
       align-items: center;

   }
   


   .logo-tibod img{
    width: 94%;
}

   
       }

       @media screen and (max-width: 380px) {
  
        #container_projects {
            display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
    }

    .logo-tibod img{
        width: 94%;
    }
    
 
    
   
        }

        @media screen and (max-width: 340px) {
          
            #container_projects {
                display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
        }
        
        .item{
            width:27vh;
            height:37vh;
        }
        
     
            }

   @media screen and (max-width: 300px) {
  
       #container_projects {
           display: flex;
       flex-direction: column;
       flex-wrap: nowrap;
       align-content: center;
       align-items: center;
    }

   .logo-tibod img{
    width: 94%;
}

   .img-project4 {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    cursor: pointer;
}
   .item{
       width:25vh;
       height:35vh;
   }
 
    
       
       }

       @media screen and (max-width: 270px) {
      
        #container_projects {
            display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
    }

    .logo-tibod img{
        width: 94%;
    }
    
    .item{
        width:23vh;
        height:33vh;
    }
  
    }

       @media screen and (max-width: 250px) {

        #container_projects {
            display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
    }
    
    .item{
        width:20vh;
        height:25vh;
    }
    
  
        }

        @media screen and (max-width: 200px) {

            #container_projects {
                display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
        }
        
        .item{
            width:15vh;
            height:20vh;
        }
        
 
            }



          

            @media screen and (max-width: 300px) {


                #header_top > div a {
                    font-size: medium;
                   
                }
                
                }