:root {
  --content-width: 65rem;
}

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


@font-face {
 font-family: "SimplonReg";
 src: url("../fonts/SimplonNorm-Regular-WebS.woff") format("woff");
}

@font-face {
 font-family: "IKANSEEYOUALL";
 src: url("../fonts/IKANSEEYOUALL-Web.woff") format("woff");
}


html {
  font-family: "SimplonReg", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
  transition: .3s;
}

a:hover{
  transition: .3s;
}

strong, b {
  font-weight: 500;
}

img {
  width: 100%;
}

h3{
  font-weight: normal;
  text-align: center;

}

@media screen and (min-width: 2000px) {
    h2{
      font-size: 1.5rem !important;
      margin-bottom: 40px !important;
    }
    
    .project-list{
  
  font-size: 1.5rem !important;
  
  }
}



.page > * {
  max-width: 100vw;
  margin: 0 auto;
}

.active{
  color: #ffc800;
}


.header a {
  position: relative;
  text-transform: uppercase;
  font-weight: normal;
  font-size: .875rem;
  /*cursor: pointer;*/
}

.header a:hover{
  padding-left: 5px;
  opacity: 1;
}


.header .logo {
  width: auto;
  margin-bottom: 0;
  cursor: default;
}


.header {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  left: 1vh;
  top:10px;
  flex-direction: row;
  
}

#img-about{
  width: 70vh;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: -1;
}


.menu a {
  margin: 0 .75rem;
}

.menu a[aria-current] {
  border-bottom: 2px solid #000;
}

.menu{
  padding-right: 2vw;
}


h2{
  font-size: .875rem;
  width: auto;
  float: left;
  z-index: 20;
  text-transform: uppercase;
  font-weight: normal;

}

.header-project{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  left: 0px;
  padding: 1vh;
  z-index: 25;
  height: 4vh;
  background: white;
  color: black;
  /*background: rgba(255,255,255);*/
  background: linear-gradient(180deg, rgba(255,255,255,100) 0%, rgba(255,255,255,0) 100%);
  /*mix-blend-mode: lighten;*/
}

.project-list a:hover{
 opacity: .5;
}

.project-list{
  z-index: 25;
  font-size: .875rem;
  width: 50%;
  float: right;
  text-align: right;
  
}

.project-list li{
  display:inline;
  padding-left: 10px;
}

.project-title{

  display: flex; 
  width: 50vw;
  padding: 50px;
  
  margin-bottom: -3px;
}

.project-title section{
  margin: auto; /* Important */ 
  text-align: justify;
}

.project-cover{
  width: 50vw;
  transition: .5s;
  
  
}

.project-cover:hover{
  opacity: .9;
  transition: .5s;
}

.links p{
  font-size: 1em;
  line-height: 1;
}

.links{
  line-height: 1;
  color: black;
}



.desc{
  position: fixed;
  top: 27px;
  left: 10px;
  line-height: 1.1;
  padding-right: 10px;
  text-transform: none;
  width: 50%;

}

.desc a{
  line-height: 1.2;
}




#about{
  position: fixed;
  left: 1vw;
  bottom: 11vh;
  font-size: 2em;
  line-height: 1;
  text-align: left;
  width: 50%;
}

#films-wrapper {
  position: fixed;
  border-top: 1px solid black;
  background-color: white;
  width: 100vw;
  height: 92vh;
  top: 8vh;
  left: 0;
  overflow-y: scroll;
  overflow-x: scroll;
}


#films{
  position: absolute;
  top: 0px;
  display: grid;
  grid-template-columns: repeat(2, 50vw);
  align-items: middle;
  grid-gap: 0rem;
  margin-left: 0px;
  max-width: auto;
  justify-content: left;
}


.video-cover{
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 50vw;
  margin-bottom: -5px;
}



.fancybox-content{
  padding: 0px;
}

.fancybox-content img{
  width: auto;
  max-height: 95vh;
}

.fancybox-bg{
  background: white;
  opacity: .95;
}

.fancybox-button{
  background: none;
  color: #ffc800;

}

.fancybox-button:hover{
  background: none;
  color: #ffc800;

}

.fancybox-infobar{
  color: #ffc800;
  mix-blend-mode: normal;
  left: 47%;
}

.fancybox-caption{
  background: none;
  color: black;
  line-height: 1.2;
}

.fancybox-is-open .fancybox-bg{
  opacity: 0.95;
}

iframe{
  width: 100%;
  min-height: 28vw;
  border: none;  
  opacity: 0;

}

h3{
  padding-bottom: 5px;
}

@media screen and (max-width: 40rem) {

  .project-list li{
    display: list-item;
    padding-bottom: 10px;
    line-height: 1;
    font-size: 1.5em;
  }

  #about{
    font-size: 1.8em;
    width: 100%;
    left: 3vw;
    color: black;
    bottom: 15vh; 
  }

  .album-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }


  .header-project{
    height: 20vh;
  }

  #films{
    grid-template-columns: repeat(1, 50vw);
  }

  .video-cover{
    min-height: 32vw;
    width: 100vw;  
  }

  #coverpicture{
   display: grid;
   grid-template-columns: repeat(1, 1fr) !important;
 }


 #coverpicture li{
  width: 100vw;
  border-bottom: none;
}


#films-wrapper {
  top: 12vh ;
  /*top: calc(var(--vh, 1vh)*90);*/
}

.album{
  top: 10vh ;
}

iframe{
  min-height: 56vw;
}

.desc{
  width: 100%; 
}

.links a{
  font-size: 1.5em;
  color: black;
}
#img-about img{
  filter: blur(50px);
}

h2{
  z-index: 55;
  font-size: 1.5em;
}

.fancybox-caption{
  opacity: 0;
}

.project-title{
  display: none; 
}


}


@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 700px) {

  

  .project-list li{
    display: list-item;
    padding-bottom: 10px;
    line-height: 1;
    font-size: 1.5em;
  }

  .project-title{
    display: none; 
  }

  #about{
    font-size: 1.5em !important;
    width: 50% !important;
    left: 3vw;
    color: black;
    float: right;
    top: 10vh !important;
    margin-left: 50vw;
  }

  .album-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .header-project{
    height: 20vh;
  }

  #films{
    grid-template-columns: repeat(1, 50vw);
  }

  .video-cover{
    min-height: 32vw;
    width: 100vw;  
  }

  #coverpicture{
   display: grid;
   grid-template-columns: repeat(1, 1fr) !important;
 }


 #coverpicture li{
  width: 100vw;
  border-bottom: none;
}


#films-wrapper {
  top: 80vh !important;
  
}

#films-wrapper.expanded{
   top: 20vh !important;
   transition: .5s;
}

#films-wrapper.small{
   top: 80vh !important;
   transition: .5s;
}

.album{
  top: 10vh !important;
}

.album.expanded{
  top: 80vh !important;
  transition: .5s;
}

.album.small{
  top: 10vh !important;
  transition: .5s;
}



iframe{
  min-height: 56vw;
}

.desc{
  width: 100%; 

}

.links a{
  font-size: 1.5em;
  color: black;
}
#img-about img{
  filter: blur(50px);
}

h2{

  z-index: 55;
  font-size: 1.5em;

}
}