/*-------------------------------
---.hero
-------------------------------*/

#works .hero {
  background-image: url(../image/bg/works-hero.jpg);
}


/*-------------------------------
---.barba-container
-------------------------------*/

.barba-container {
  transition : all 1000ms ease-in-out;
}

.is-transition-start .barba-container {
  opacity: 0;
  transform: translate3d(0,5px,0);
}


/*-------------------------------
---#filter
-------------------------------*/

#works #filter {
  margin-bottom: 120px;
}

#works #filter p {
  display: inline-block;
  margin: 0 1em 0.3em;
}

#works #filter ul {
  display: inline-block;
}

#works #filter li {
  position: relative;
  display: inline-block;
  margin: 0 1em 0.3em;
}

#works #filter li a:before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid #3c3c3c;
  vertical-align: middle;
  border-radius: 0.15em;
  margin-right: 0.2em;
}

#works #filter li a.active::after {
  content: '\f00c';
  display: block;
  position: absolute;
  top: 0.4em;
  left: 0.2em;
  font-size: 0.7em;
}


/*-------------------------------
---.contents
-------------------------------*/

#works .contents {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc((100vw / 3) * (2 / 3));
  grid-gap: 2px;
  background: -moz-linear-gradient( #c8c8c8 0%, #c8c8c8 25%, #c8c8c8 50%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#c8c8c8), color-stop(25%, #c8c8c8), color-stop(50%, #d5d5d5), to(#ffffff));
  background: -webkit-linear-gradient( #c8c8c8 0%, #c8c8c8 25%, #d5d5d5 50%, #ffffff 100%);
  background: -o-linear-gradient( #c8c8c8 0%, #c8c8c8 25%, #d5d5d5 50%, #ffffff 100%);
  background: linear-gradient( #c8c8c8 0%, #c8c8c8 25%, #d5d5d5 50%, #ffffff 100%);
}