:root{
  --p:3%;
  --headerH:90px;
  --fs:18px/1.2em 'liberation', sans-serif;
}
body{
  padding:0 var(--p) var(--p) var(--p);
  font: var(--fs);
  hyphens: auto;
  background: white;
}
#credbox{
  margin-top:10px;
  font:var(--fs) inherit;
  text-align: right;
}
.fr{display: none;}
body>header{
  padding: 2% var(--p) 0 var(--p);
  position: fixed;
  background: white;
  height:var(--headerH);
  width: 100%;
  z-index: 4;
  top:0;
  left:0;
}
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .url{
  flex:1 1 40%;
  text-align: center
}
.toggle{
  cursor:pointer;
  padding:2px;
}
.toggle.has-opened{
  background: #eee;
}
header .sub-menu{
  display: none;
  padding:calc(var(--p)/2);
  background:#eee;
}
header .sub-menu.opened{
  display: flex;
}
#info{
  flex-direction: column;
}
#info #biobox{
  margin-top:10px;
  /* columns: 3; */
}
.filter-list{
  margin-top: var(--headerH);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.filter-list button{
  cursor: pointer;
  margin-bottom: 2px;
  border:none;
  background: #eee;
  padding:calc(var(--p)/4);
}
.filter-list button:hover{
  background: lightgray;
}
.filter-list button.current{
  background: lightgray;
}
.filter-list button:active{
  background: #ccc;
}

/* Main */
main{
  margin:var(--p) 0;
  width:100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  grid-gap: var(--p);
}
.project{
  display: none;
  font-size:var(--fs);
  line-height: 1.2em;
  width: min(300px, 100%);
  margin-bottom:30px;
  overflow-x: hidden;
}
.project.long .text{
  overflow: hidden;
  position:relative;
  height:200px;
}
.expand{
  height: 4em;
  background: url(../img/down.svg) no-repeat center bottom, linear-gradient(to top, white 20%, transparent 100%);
  background-size: 14px;
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  cursor: pointer;
}
.expand:hover{
  opacity: .9;
}
.project.full .text{
  height: auto;
  padding-bottom: 20px;
}
.project.full .expand{
  background: url(../img/up.svg) no-repeat center center;
  background-size: 14px;
  height: 20px;
}
.project .images{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.project figure:not(.main){
  width:30px;
  margin-right: 4px;
}
.project figure:not(.main) .caption{
  display: none;
}
.project .caption{
  font-size: .7em;
  line-height: 1.2;
}
.project figure img{
  margin:5px 0;
  display: block;
  width:100%;
  height:auto;
  object-fit: contain;
}
.project .title, .project header{
  margin-bottom: var(--p);
}
.project.selected{
  display: block;
}
.chocolat-overlay.chocolat-visible{
  opacity: 0!important;
}
.chocolat-left, .chocolat-right{
  width: var(--p)!important;
  height:calc(var(--p)*3)!important;
  background: black!important;
}
.chocolat-bottom{
  background: black!important;
  color:white!important;
  font-size: var(--fs)!important;
  height: var(--p)!important;
}

footer{
  text-align: center;
}

/* Misc. */
a{color:inherit;}
a:visited{  /*color:#777;*/}
blockquote{
  padding:3px;
  border:1px solid black;
}
i, em{ font-style: italic;}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

@media only screen and (max-width: 400px) {
  figure{
    flex:0 0 100%;
  }
  .header:not(#header-list){
    flex-direction: column;
  }
  #header-list li{
    padding:5px;
  }
  .header li{
    padding: 7px;
  }
  .project{width:100%;}

  figure{
    font-size:inherit;
  }
}
@media only screen and (max-width: 700px) {
  :root{--headerH:50px;}
  .gallery{
    justify-content: space-around;
  }
  .filter-list button{
    padding:5px;
  }
}
@media only screen and (max-width: 1000px) {
  body>header{
    /* position:static; */
  }
  #follow{
    flex-wrap: wrap;
  }
  #newsletter-form{
    width:100%;
    margin-top:7px;
    text-align: center;
  }
  #info #biobox{
    columns: 1;
  }
}
:-moz-any-link:focus, a:active {text-decoration: none; outline:0;}
::selection {background:#ffeaaa;}
::-moz-selection {background:#ffeaaa;}