body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: black;
  color: white;
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;


}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

::selection {
  background:#8b8b8b;
}

.description1 {
  visibility: hidden;
}


p {
  margin: 0;
}

a {
  color: white;
  text-decoration: none;
  cursor: none;
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


header a {
  font-size: 22px;
  font-weight: 700;
}


main .info {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 19px;
  padding-left: 16px;
  padding-right: 16px;
  grid-gap: 16px;
  font-size: 14px;
}

main .info2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0px 16px 20px 16px;
  grid-gap: 16px;
  background: black;
}

.number p {
  font-weight: 600;
  font-size: 12px;
}



main .top {
  padding: 80px 16px 0px;
  background: black;
  
}

main .outline img {

  outline: 1px solid white;
  outline-offset: -1px;
  display: block;
  
}

main .images img {

  
}

main {
  
  padding-top: 100px;
}

.line1 {
  padding: 0px 16px 16px 16px;
}

.line2 {
  padding: 0px 16px 16px 16px;
}

main .intro {
  color: white;
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 115%;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}


main .description1 {
  
  align-items: left;
  padding-top: 50px;
  padding-bottom: 50px;
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 18px;
  line-height: 115%;
  display: grid;
  grid-template-columns: 1fr;
}

main .description2 {
  
  align-items: left;
  padding-top: 50px;
  padding-bottom: 40px;
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 18px;
  line-height: 115%;
  grid-column-start: 2;
  grid-column-end: 4;
}

main .description3 {
  align-items: left;
  padding-top: 0px;
  padding-bottom: 50px;
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 18px;
  line-height: 115%;
  display: grid;
  grid-template-columns: 15% 85%;
  column-gap: 10px;

}


main .project-details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  grid-gap: 16px;
  padding-bottom: 0px;
}



.project-details > div {
  flex: 1 1;
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  grid-gap: 16px;
  align-items: left;
  color: black;
  padding: 16px 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  mix-blend-mode: none;
}

header .centerhead {
  display: flex;
  justify-content: space-between;
}

p .textframe1, .textframe2 {
  margin-left: auto;
  margin-right: auto;
}

.textframe1 {
  text-align: left;
  align-items: left;
}

.textframe2 {
  align-items: left;
}

img {
  width: 100%;
}

.left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

main img {
  border-radius: 10px;
}

video {
  border-radius: 10px;
  display: block;
  margin-top: 0px;
  margin-bottom: 16px;
}

.video {
 object-fit: contain;
}

.fit {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


main .imgcontainer {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 8px;
  margin-bottom: 40px;
}

.images {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 8px;
}

.images2 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 8px;
}

.images3 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 8px;
}

.images img {
  margin-bottom: 16px;
  vertical-align: middle;
  width: 100%;
}

.images2 img {
  margin-top: 16px;
  vertical-align: middle;
  width: 100%;
}

.images3 img {
  margin-top: 16px;
  vertical-align: middle;
  width: 100%;
}

main .imgcontainer2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  padding: 0px 16px 52px 16px;
}

main .imgcontainer3 {
  padding: 16px 16px 0px 16px;
  background: black;
  grid-gap: 16px;

}

main .imgcontainervideo {
  padding: 16px 16px 0px 16px;
  background: black;
  grid-gap: 16px;
  display: flex;
  justify-content: center;  
  
}

main .imgcontainer4 {
  padding: 0px 16px 16px 16px;
  display: block;
}

.imgcontainer5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 16px;
  padding: 0px 16px 0px 16px;

}

main .imgcontainer6 {
  padding: 0px 16px 0px 16px;
  display: block;
}
 
/* header */



.header {
  background-color: white
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  list-style: none;
  overflow: hidden;
  display: flex;
  gap: 30px;
  position: relative;
  padding: 0px;
  justify-content: flex-end;
}


.header li a {
  text-decoration: none;
  text-align: left;
  float: left;
}



/* menu */




.container {
  position: relative;
  width: 100%;
}

.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 16px;
  padding: 0px 16px 0px 16px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: black;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 24px;
  height: calc(100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


.cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  pointer-events: none;
  mix-blend-mode: none;
  z-index: 999;
  transition: transform 350ms ease;
}

video {
        width: 100%;
        height: auto;
    }

.video2 {
  width: 70%;
}

footer {
  position: relative;
  padding: 0px 16px 0px 16px;
  bottom: 0;
  width: 100%;
  height: 50px;
  color: black;
 }

footer a {
  color: white;
}


.footer {
  display: flex;
  justify-content: space-between;
 }
/* 48em = 768px */

@media (min-width: 48em) {

 
}

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


  header .centerhead {
    display: block;
    justify-content: space-between;
  }

  header a {
    font-size: 20px;
  }

  main {
    grid-template-columns: 1fr;
   }


  p {
    font-size: 16px;
    font-optical-sizing: auto;
    line-height: 115%; 
  }

  main .imgcontainervideo {
    padding-top: 10px;
    display: block;
    
  }


  header {
    grid-template-columns: 1fr 1fr;
    }

  main .project-details {
  display: block; 
  grid-gap: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
  }

  main .description1 {
    padding-top: 30px;
    padding-bottom: 20px;
  }


  main .description2 {
    padding-top: 0px;
    padding-bottom: 30px;
    display: block;
  }

  main .description3 {
    padding-top: 0px;
    padding-bottom: 20px;
    display: block;
  }


  main br {
    display: none;
  }

  main .imgcontainer2 {
    grid-template-columns: 1fr;
    grid-gap: 10px;
  
     }

  .left {
    gap: 10px;
  }


   main .imgcontainer4 {
    padding-top: 0px;
    padding-bottom: 10px;
    
  }

  main .imgcontainer5 {
    padding-top: 0px;
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  main .imgcontainer6 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
   

   main .imgcontainer3 {
    padding-top: 10px;
 
    display: block;
   }
   

   main img {
    border-radius: 10px;
  }

  main video {
    border-radius: 10px;
  }

  main .images {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }


  .images img {
    margin-top: 0px;
    margin-bottom: 16px;
    vertical-align: middle;
    width: 100%;
  }

  .images video {
    margin-top: 0px;
    margin-bottom: 16px;
    vertical-align: middle;
    width: 100%;
  }

 main .description {
   grid-template-columns: 1fr;
   font-size: 18px;
   line-height: 120%;
 }

 .description .textframe1 {
padding-bottom: 20px;
 }
   
   .cursor {
       width: 0px;
       height: 0px;
   }

   p .textframe1, .textframe2 {
     width: 100%;
   }

   footer {
    overflow: hidden;
    width: 100%;
    max-height:100%;        
    text-align: center;
 } 

 header .year {
  display: none;
}

.video2 {
  width: 100%;
}

.container2 {
  display: grid;
  grid-template-columns: 1fr;
}

video {
  margin-bottom: 16px;
  }

  main .imgcontainer {
    margin-bottom: 30px;
  }

  .line2 {
    padding: 0px 16px 16px 16px;
  }
  

}

/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) and (min-width: 600px) {
  .images {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }

  .container2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

}



@media screen and (max-width: 1366px) and (min-width: 600px) {


   main .imgcontainer2 {
    padding-top: 13px;
    padding-bottom: 52px;
    grid-gap: 13px;
   }

   main .imgcontainer3 {
    padding-top: 13px;
   }

   main .imgcontainer4 {
    padding-top: 0px;
    padding-bottom: 13px;
  }

  main .imgcontainer5 {
    padding-top: 0px;
    grid-gap: 13px;
  }

  main .imgcontainer6 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
   main img {
    border-radius: 10px;
  }

  main video {
    border-radius: 10px !important; 
  }

  main .imgcontainer {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 9.5px;
    
  }

  .left {
    gap: 13px;
  }
  
  .images {
    padding: 0 6.5px;
  }

  .container2 {
    column-gap: 13px;
  }

  video {
  margin-top: 0px;
  margin-bottom: 13px;
  }

  .images img {
    margin-bottom: 13px;
  }
  




}