*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: helvetica;
  src: url(fonts/Helvetica.otf);
}

html{
    font-family: helvetica, serif;
    scroll-behavior: smooth;
}

body{
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
}

a{
  color: currentColor;
  text-decoration: none;

}

p{
  font-size: 13.5pt;
}

.small-type{
  font-size: 8.5pt;
}

.all-caps{
  text-transform: uppercase;
}

.left{
  width: calc(35vw - 26px);
}

.right{
  width: calc(65vw + 26px);
}

.right p{
  width: 95%;
  max-width: 1000px;

}

.hover-underline:hover{
  text-decoration: underline;
}

.container{
  min-height: calc(100vh - 40px);
}

.italic{
  font-style: italic;
}

header a{
  text-decoration: none;

}

header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px black solid;
  margin-top: -3px;
  padding-bottom: 5px;
  margin-bottom: 7px;
}

.nav-mobile{
  display: none;
  height: 100vh;
  width: 100vw;
}

.nav-mobile nav{
  display: flex;
  flex-direction: column;
  position: absolute;
  margin-top: 20px;
}

.nav-mobile nav ul{
  list-style: none;
  display: flex;
  flex-direction: column;
}


.nav-desktop nav{
  display: flex;
  flex-direction: row;
  width: 65vw;
}

nav a{
  text-decoration: none;
}

nav h2{
  margin-right: 20px;
}


nav ul{
  list-style: none;
  display: flex;
  flex-direction: row;
}

ul{
  list-style: none;
}

li{
  list-style: none;
}



.dropdown {
  position: relative;
  display: inline-block;
}

.project-list-wrapper{
  padding-top: 10px;
  z-index: 1;
  display: none;
  position: absolute;


}

.project-list{
  background-color: white;
  width: 35vw;
  padding-left: 3px;
  margin-left: -3px;
}

.dropdown:hover .project-list-wrapper {
  display: block;
  -webkit-box-shadow: -6px 6px 23px -24px #000000;
  box-shadow: -6px 6px 23px -24px #000000;
}



h1{
  font-size: 13.5pt;
  font-weight: normal;
}

h2{
  font-size: 13.5pt;
  font-weight: normal;
  cursor: pointer;
}

h3{
  font-size: 13.5pt;
  font-weight: normal;
}


.wrapper{
  height: 100%;
  width: 100%;
}

.button{
  vertical-align: super;
  font-size: 9pt;
  text-transform: uppercase;
  font-style: normal;
  cursor: pointer;
}

.project-item{
  display: flex;
  flex-direction: row;
}


.archive a{
  text-decoration: none;
}

.archive-item{
  z-index: 1;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid black;
  padding-bottom: 20px;
  margin-top: 20px;
  height: calc(20px + 13.5pt + 13.5pt + 13.5pt + 20px + 110px + 19px);
  overflow-y: hidden;
  width: calc(100vw - 40px);
}

@media only screen and (min-width: 1750px){
  .archive-item{
    height: auto;
    overflow-y: visible;
  }

}

.archive-item .left{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.archive-item img{
  height: 110px;
  margin-right: 20px;
  margin-top: 20px;
}

.archive-thumbnails{
  font-size: 0pt;
}

#video-piece-wrapper{
  padding-top: 10px;
  margin-bottom: -20px;
}

#video-piece-wrapper p.small-type{
  margin-bottom: 20px;
}

p#video{
  margin-top: 10px;
  margin-bottom: 20px;
}

.video-item{
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid black;

}

.video-item .left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px;
  align-items: center;

}

.video-item .left img{
  height: 130px;


}

.video-item .small-type{
  margin-top: 20px;

}

.video-item .right{

  margin-left: -2px;
}

.archive-wrapper ul li{
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
}

.exhibition-wrapper{
  margin-bottom: -20px;
}

p#exhibitions {
    margin-top: -10px;
  }


.installation-item{
  height: 150px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid black;
  width: calc(100vw - 40px);
}

.installation-item:hover{
  text-decoration: underline;
}

.installation-item .left{
padding-right: 20px;
display: flex;
align-items: center;
justify-content: center;

}



.installation-item img{
  height: 100%;
}



.video-info{
  width: calc(33% - 10px);
}

iframe{
  border: 0px;
  height: 200px;
  width: auto;

}

.thumbnails img{
  height: 22px;

}

.thumbnails{
  margin-top: 10px;
  margin-right: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: top;
  font-size: 0pt;
  }

.gallery-wrapper{
  height: calc(100vh - 178px);
  display: flex;
  flex-direction: column-reverse;

}

.gallery-wrapper-exhibitions{
  height: calc(100vh - 40px - 15pt - 15pt - 6px);
  display: flex;
  flex-direction: column-reverse;

}

.slideshow{
  position: relative;
  height: 100%;
  width: 100%;
  padding: 20px;
  padding-bottom: calc(20px + 8.5pt + 9px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid black;
}

.slideshow img{
  max-height: 100%;
  max-width: 100%;
  position: relative;

}

.image-wrapper{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}



.slide{
  position: absolute;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  opacity: 0;

}

.slide.active{
  opacity: 1;
}

.thumbnail-slide{
  margin-right: 20px;
}

.thumbnail-slide.thumb-active{
 padding-bottom: 10px;
 border-bottom: 1px solid black;
}

.slide p{
  z-index: 1;
  font-size: 8.5pt;
  padding-top: 10px;
}

.caption-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.description-button{
  cursor: pointer;
  margin-left: 40px;
  margin-top: 20px;
}

.project-buttons{
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.project-buttons p{
  margin-right: 20px;
}

#project-description{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid black;
}



.about-wrapper{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.about-wrapper .left{
  padding-right: 20px;
}

.about-wrapper .right{
  margin-left: -2px;
  margin-top: -14px;
}

.information-container{
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid black;
}

.CV-wrapper{
  padding-top: 20px;
  padding-bottom: 20px;
  height: calc(100vh - 13.5pt - 20px - 8.5pt - 13.5pt);
  overflow: scroll;
  margin-bottom: -20px;
}

.cv p{
  font-size: 8.5pt;
}

.book-archive{
  list-style: none;
}


.book-item{
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px black solid;
  display: flex;
  flex-direction: row;
}

.book-item .left{
  display: flex;
  justify-content: center;
}

.book-item img{
  height: 230px;
}

.book-item:hover{
  text-decoration: underline;
}

.book-slideshow{
  position: relative;
  height: calc(100vh - 178px);
  width: 100%;
  padding: 20px;
  padding-bottom: calc(20px + 8.5pt + 9px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid black;
}

.book-slideshow img{
  max-height: 100%;
  max-width: 100%;
}

.book-description-wrapper{
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.book-information{
  width: 30%;
}

.book-information p{
  font-size: 15pt;

}

.book-text{
  margin-left: 30px;
  width: 70%;
  column-count: 2;
  column-gap: 20px;

}




.mobile-textbite{
  display: none;
}




.writing-info-list{
  width: calc(30vw - 30px);
  margin-left: 25px;
}

.writing-item{
  display: flex;
  flex-direction: row;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: black solid 1px;
}

.writing-item .left{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-right: 20px;
}

.writing-item:hover{
  text-decoration: underline;
}

.writing-wrapper{
  padding-top: 20px;
  padding-bottom: 20px;

  display: flex;
  flex-direction: row;
}

.writing-wrapper .left{
  padding-right: 20px;
}

.home-wrapper{
  display: flex;
  flex-direction: row;
}



.writing-text{
  margin-left: 25px;
  padding: 20px;
  border-radius: 7px;
  -webkit-box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.16);
  box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.16);
  margin-left: 20px;
  column-count: 2;
  column-gap: 20px;
  width: 70vw;

}

.writing-info{
  width: 30vw;
}

.home-info{
  width: calc(35vw - 24px);
  padding-right: 20px;
}

.upcoming{
  border-bottom: 1px black solid;
  padding-bottom: 20px;
  margin-bottom: 6px;
}

.vitrine{
  width: calc(65vw + 24px);
  padding: 20px;
  height: calc(100vh - 13.5pt - 13.5pt - 40px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.vitrine img{
  max-height: 100%;
  max-width: 100%;
}

.copyright{
  float: right;
  position: relative;
  bottom: 0px;
}

.hamburger {
  display: none;
}

.bar1, .bar2, .bar3 {
  width: 20px;
  height: 2px;
  background-color: #333;
  margin: 4px 0;
  transition: 0.2s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-1px, .5px) ;
  transform: rotate(-45deg) translate(-1px, .5px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

.formobilemenu{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* ------------------------ MOBILE ------------------------- */

@media only screen and (min-width: 0px) and (max-width: 1100px) {

/* -------------- GENERAL -------------- */
  .project-list-wrapper {
    display: block;
    position: relative;
    margin-bottom: 20px;
    width: 100vw;

  }

  .project-list {
    display: block;
    position: relative;
    width: 100%;

  }


  .dropdown:hover .project-list {

    -webkit-box-shadow: 0px 0px 0px 0px #ffffff;
    box-shadow: 0px 0px 0px 0px #ffffff;
  }


  .nav-desktop{
    display: none;
  }

  header{
    flex-direction: column;

  }

  .hamburger {
    display: block;
  }

/* -------------- HOME -------------- */

  .home-wrapper{
    flex-direction: column-reverse;
  }

  .vitrine{
    width: 100%;
    margin: 0px;
    margin-bottom: 20px;
    height: calc(100vw - 40px);
  }

  .home-info{
    width: 100%;
    margin-bottom: 20px;
  }

  .left{
    width: 100%;
  }

  .right {
    width: 100%;
  }



/* -------------- PROJECTS -------------- */

  .archive-item{
    flex-direction: column;
    overflow: visible;
    height: auto;
  }

  .archive-item .left{
    flex-direction: row;
    width: 100%;

  }

  .archive-item .right{
    margin-top: 20px;
    width: 100%;

  }

  .archive-wrapper ul li{
    flex-direction: column;
  }

  .video-item{
    flex-direction: column;
    padding-top: 20px;
    margin-bottom: 0px;
  }

  .video-item .right{
    margin-top: 20px;
  }


  .video-box{
    margin-left: 0px;
    margin-bottom: 20px;
    width: 100%;
    height: 325px;
    padding: 20px;
    border-radius: 7px;
    -webkit-box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.16);
    box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.16);
  }

  .video-info{
    width: 100%;
  }

p#exhibitions {
    margin-top: 10px;
  }

  .exhibition-wrapper{
    margin-bottom: 0px;
  }

  .slideshow img{

  }

  .thumbnails{
    margin-top: 10px;
      margin-right: 0px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;


    }

  .thumbnail-slide{
    margin-bottom: 10px;
    height: calc(22px + 10px);
  }


  .description-button{
    display: none;
  }


  /* -------------- PROJECT -------------- */

  .gallery-wrapper{
    height: calc(100vh - 198px);
    display: flex;
    flex-direction: column-reverse;
    margin-top: 20px;
  }

  #project-description{
    flex-direction: column;
    margin-left: 0px;


  }
  #video-piece-wrapper{
    margin-left: 0px;
  }

  #video-piece-wrapper .video-item{
    margin-bottom: 20px;
  }

  .project-buttons{
    margin-bottom: 20px;
  }

  /* -------------- BOOKS -------------- */

  .book-item{
    flex-direction: column;
  }

  .book-item .right{
    margin-top: 20px;
  }

  /* -------------- BOOK -------------- */

  .book-slideshow{
    position: relative;
    height: calc(100vw - 40px);
  }

  .book-description-wrapper{
    margin-left: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
  }



  /* -------------- WRITINGS -------------- */

  .writings-list .writing-item{
    display: flex;
    flex-direction: column;
  }

  .writing-item .left{
    padding-bottom: 20px;
    padding-bottom: 20px;
  }

  .text-bite{
    width: 100%;


  }

  .text-bite p{
    column-count: 1;

  }

  .desktop-textbite{
    display: none;
  }

  .mobile-textbite{
    display: block;
    margin-bottom: 20px;
  }

  .writing-info-list{
    width: 100%;
    margin-left: 0px;
  }

  /* -------------- WRITING -------------- */

  .writing-wrapper{
    display: flex;
    flex-direction: column;
  }

  .writing-wrapper .left{
    margin-bottom: 20px;
  }





  /* -------------- WRITING -------------- */

  .about-wrapper{
    flex-direction: column-reverse;
  }

  .about-wrapper .right{
    margin: 0px;
    margin-top: 20px;
  }


  .CV-wrapper{
    padding: 0px;
    height: auto;
    overflow: visible;
  }


}

/* ------------------------ TABLET ------------------------- */

@media only screen and (min-width: 701px) and (max-width: 1100px) {


}