* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 1.2;
  font-family: sans-serif;
  overflow-x: hidden;
}

ul{margin:0; padding:0;}
li{list-style: none;}
img{height:100%;}

figure{
  padding:0;
  margin:0;
}

h1{
  font-size: 1.3em;
  text-align: center;
  font-weight: normal;
}

figcaption{
  font-size:0.8em;
}

/* FILTERS */
nav{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;  
  padding: 0px 30px;
}

nav .nav{
  display: flex;
  width:45%;
  flex-wrap: wrap;
  font-size: 0.8em;

}

nav .nav > li {
  padding: 3px 10px; 
  margin:2px;
  border: 1px solid #000;
  cursor: pointer; 
}

nav .nav > li:hover, nav .nav > li.active {
  background: #000;
  color:#FFF;
}

/* IMAGE GALLERY GRID */

/*.gallery .grid{
  display: flex;
  flex-wrap: wrap;
}*/

/*.gallery .grid li{
  width: 25%;
}*/

.gallery .grid{
  padding: 40px 0px;
  width:85%;
  margin:auto;
}

.gallery .grid li{
  height: 200px;
  /*width: 20%;*/
  padding: 60px 20px;
}

.gallery .grid figure{
  height: 100%;
}
.gallery .grid figcaption{
  width: 300px;
  text-align: center;
  padding: 10px 0;
}

.gallery .grid figure img{
  /*width:100%;*/
  height: 100%;
  display: block;
  margin:auto;
}

/* lazy load style */
.gallery .grid figure .blur-up {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.gallery .grid figure .blur-up.lazyloaded {
   -webkit-filter: blur(0);
   filter: blur(0);
 }

.gallery .grid .credits{
  display: none;
}

.gallery .grid .year{
  font-size: 0.8em;
  border: 1px solid #7F7F7F;
  color:#3F3F3F;
  text-align: center; 
  padding: 2px;
  line-height: 1;
  width: 40px;
  margin:auto;
  margin-bottom: 7px;
}