@font-face {
    font-family: GrotesqueMT;
    font-display: swap;
    src: url('../fonts/GrotesqueMT.woff2') format('woff2'),
      url('../fonts/GrotesqueMT.woff') format('woff'),
      url('../fonts/GrotesqueMT.eot') format('embedded-opentype'),
      url('../fonts/GrotesqueMT.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+000-5FF;
}

@font-face {
    font-family: GrotesqueMT;
    font-display: swap;
    src: url('../fonts/GrotesqueMT-Light.woff2') format('woff2'),
      url('../fonts/GrotesqueMT-Light.woff') format('woff'),
      url('../fonts/GrotesqueMT-Light.eot') format('embedded-opentype'),
      url('../fonts/GrotesqueMT-Light.eot?#iefix') format('embedded-opentype');
    font-weight: 100;
    font-style: normal;
    unicode-range: U+000-5FF;
}

@font-face {
    font-family: GrotesqueMT;
    font-display: swap;
    src: url('../fonts/GrotesqueMT-LightItalic.woff2') format('woff2'),
      url('../fonts/GrotesqueMT-LightItalic.woff') format('woff'),
      url('../fonts/GrotesqueMT-LightItalic.eot') format('embedded-opentype'),
      url('../fonts/GrotesqueMT-LightItalic.eot?#iefix') format('embedded-opentype');
    font-weight: 100;
    font-style: italic;
    unicode-range: U+000-5FF;
}

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

html {
  font-family: GrotesqueMT, sans-serif;
  font-weight: 100;
  font-size: 18px;
}

body {
  margin: 3rem 1rem 1rem 1rem;
  background-color: #fff;
  /* background-color: #dedede; */
}

img {
  width: 100%;
  height: auto;
  background-color: #ededed;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Typography */
/* ------------------------------------------------------------------ */

p, a, h1, h2, h3 {
  font-family: GrotesqueMT, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 18px;
  color: #000;
  margin: 0;
  line-height: normal;
}

strong {
  font-weight: normal;
}

em {
  font-weight: 100;
  font-style: italic;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  color: #7d7d7d;
}

a:active {

}

h1, h2 {
  white-space: pre-line;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 0.9rem;
}

::-moz-selection {
  background: #b7b7b7;
}

::selection {
  background: #b7b7b7;
}

/* Header */
/* ------------------------------------------------------------------ */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem 0 1rem;

  display: -webkit-flex;

  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;

  text-transform: uppercase;
  z-index: 200;
  background-color: #fff;

  transition: height 0.4s ease-in-out;
}

header a {
  line-height: 3rem;
}

header.responsive {
  height: 100%;
  -webkit-flex-direction: column;
          flex-direction: column;
}

.icon {
  display: block;
}

.menu a {
  margin-left: 0;
}

.menu a::-moz-selection {
  background: #fff;
}

.menu a::selection {
  background: #fff;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease-in-out 0.3s;
}

.menu.responsive a {
  display: block;
  opacity: 1;
}

.menu.responsive {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  opacity: 1;
}

.stable {
  width: 100%;
  z-index: 300;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

.logo {
  font-weight: normal;
}

.menu-link, .menu-link.black, .menu-link:hover,
.menu-link.active, .other, .menu-link.active.other,
.menu-link.black.other {
  color: #000;
  transition: color 0.25s ease-out;
}

/* Projects */
/* ------------------------------------------------------------------ */

.projects {
  /* display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem; */
}

.projects a {
  text-transform: uppercase;
  text-align: center;
  line-height: 0;
  display: block;
  height: 100%;
}

.project {
  position: relative;
}

.project .project-title {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;

  opacity: 1;

  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
}

.project:hover .project-title {
  -webkit-animation: none;
          animation: none;
  opacity: 100;
}

.project-title p {
  font-weight: normal;
  line-height: 1.5;
}

.white p {
  color: white;
}

@-webkit-keyframes reveal {
  from {
      opacity: 0;
  }
  to { opacity: 1 }
}

@keyframes reveal {
  from {
      opacity: 0;
  }
  to { opacity: 1 }
}

/* Gallery */
/* ------------------------------------------------------------------ */
.gallery li {
  line-height: 0;
  margin-bottom: 1rem;
}

.gallery a {
  line-height: 0;
  display: block;
}

.info p {
  margin-bottom: 1rem;
  max-width: 100%;
}

.prev-next {
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

.vertical img {
  width: auto;
  max-width: 100%;
  height: 80vh;
}

.vertical video {
  width: auto;
  max-width: 100%;
  max-height: 80vh;
}

video {
  width: 100%;
  height: auto;
}

/* Gallery Slider */
/* ------------------------------------------------------------------ */
.image-slider {
  padding: 0;
  margin: 0 0 1rem 0;
}

.slide-wrapper {
  width: 100%;
}

.slide-wrapper img {
  display: block;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  margin-bottom: 1rem;
}

.slide-wrapper:focus {
  outline:0;
}

p.paging-info {
  display: none;
  margin: 1.9rem 0 1.9rem 0;
}

/* Arrows */

.slick-next, .slick-prev {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  z-index: 100;
}

.slick-prev.slick-disabled, .slick-next.slick-disabled {
  cursor: auto;
}

.slick-next {
  right: 0;
  cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjI4cHgiIHZpZXdCb3g9IjAgMCAxOCAyOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8dGl0bGU+cmlnaHQxeDwvdGl0bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBmaWxsPSIjQ0NDQ0NDIiBkPSJNNC4xLDI3LjlsLTQuMS00TDEwLDE0TDAuMSw0LjJsNC4xLTQuMUwxOCwxMy45TDQuMSwyNy45eiIvPgo8L3N2Zz4K),pointer;
  cursor: -webkit-image-set(url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjI4cHgiIHZpZXdCb3g9IjAgMCAxOCAyOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8dGl0bGU+cmlnaHQxeDwvdGl0bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBmaWxsPSIjQ0NDQ0NDIiBkPSJNNC4xLDI3LjlsLTQuMS00TDEwLDE0TDAuMSw0LjJsNC4xLTQuMUwxOCwxMy45TDQuMSwyNy45eiIvPgo8L3N2Zz4K) 1x,url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIzNS45cHgiIGhlaWdodD0iNTUuNXB4IiB2aWV3Qm94PSIwIDAgMzUuOSA1NS41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzNS45IDU1LjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8dGl0bGU+cmlnaHQxeDwvdGl0bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBmaWxsPSIjQ0NDQ0NDIiBkPSJNOC4xLDU1LjVMMCw0Ny40bDIwLTE5LjdMMC4xLDguMkw4LjMsMGwyNy42LDI3LjVMOC4xLDU1LjV6Ii8+Cjwvc3ZnPgo=) 2x) 16 16,pointer;
}

.slick-prev {
  left: 0;
  cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjI4cHgiIHZpZXdCb3g9IjAgMCAxOCAyOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8dGl0bGU+cmlnaHQxeDwvdGl0bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBmaWxsPSIjQ0NDQ0NDIiBkPSJNMTMuOSwwLjFsNC4xLDRMOCwxNGw5LjksOS43bC00LjEsNC4xTDAsMTQuMUwxMy45LDAuMXoiLz4KPC9zdmc+Cg==),pointer;
  cursor: -webkit-image-set(url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjI4cHgiIHZpZXdCb3g9IjAgMCAxOCAyOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8dGl0bGU+cmlnaHQxeDwvdGl0bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBmaWxsPSIjQ0NDQ0NDIiBkPSJNMTMuOSwwLjFsNC4xLDRMOCwxNGw5LjksOS43bC00LjEsNC4xTDAsMTQuMUwxMy45LDAuMXoiLz4KPC9zdmc+Cg==) 1x,url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIzNS45cHgiIGhlaWdodD0iNTUuNXB4IiB2aWV3Qm94PSIwIDAgMzUuOSA1NS41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzNS45IDU1LjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8dGl0bGU+cmlnaHQxeDwvdGl0bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBmaWxsPSIjQ0NDQ0NDIiBkPSJNMjcuOCwwbDguMSw4LjFMMTUuOSwyNy44bDE5LjgsMTkuNWwtOC4yLDguMkwwLDI4TDI3LjgsMHoiLz4KPC9zdmc+Cg==) 2x) 16 16,pointer;
}

.slick-next img, .slick-prev img {
  height: 1.4rem;
  width: auto;
}

/* Video */
/* ------------------------------------------------------------------ */
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-wrapper {
  padding:56.25% 0 0 0;
  position:relative;
  margin-bottom: 1rem;
}

.video-wrapper iframe {
  background-color: #000;
}

/* Animations */
/* ------------------------------------------------------------------ */
.js-fade-in-out-scroll {
  transition: opacity 300ms ease-in;
  opacity: 0;
}

.js-fade-in-out-scroll--visible {
  opacity: 1;
}

/* Queries */
/* ------------------------------------------------------------------ */

@media (max-width: 576px) and (orientation: portrait) {
  .vertical img {
    width: 100%;
    height: auto;
    max-height: 100%;
  }
}

@media (min-width: 768px) {

  body {
    margin: 5rem 4rem 4rem 4rem;
  }

  header {
    height: 5rem;
    line-height: 5rem;
    padding: 0 4rem 0 4rem;
  }

  header a {
    line-height: 5rem;
  }

  /* Projects */

  .projects {
    /* grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.5rem;
    margin-bottom: 4rem; */
  }

  .project .project-title {
    opacity: 0;
  }

  .project:hover .project-title {
    -webkit-animation-name: reveal;
            animation-name: reveal;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 100;
  }

  /* Gallery — Single Work Page */

  .gallery li {
    margin-bottom: 2rem;
  }

  .prev-next {
    margin-bottom: 2rem;
  }

  h1, h2 {
    margin-bottom: 1.9rem;
  }

  .video-wrapper {
    margin-bottom: 2rem;
  }

  .info p {
    margin-bottom: 1.4rem;
    max-width: 80%;
  }

  /* Slider */
  p.paging-info {
    display: block;
  }

  .slide-wrapper img {
    margin: 0 auto; /*  to center horizontally */
    max-height: 70vh;
    margin-bottom: 0;
  }

  .image-slider {
    padding: 0;
    margin: 0 0 2rem 0;
  }

}

@media (min-width: 850px) and (orientation: landscape) {

  body {
    margin: 5rem 5rem 5rem 5rem;
  }

  header {
    padding: 0 5rem 0 5rem;
  }

  /* Nav */
  .icon {
    display: none;
  }

  .menu a {
    padding: 0 0.5rem 0 0.5rem;
    display: block;
    float: left;
  }

  .menu a:first-of-type {
    padding: 0 0.5rem 0 1rem;
  }

  .menu {
    opacity: 1;
    width: auto;
    height: 5rem;
    position: static;
    top: 0;
    left: 0;
    display: block;
    transition: none;
  }

  .menu.responsive {
    width: auto;
    height: 5rem;
    position: static;
    top: 0;
    left: 0;
    display: block;
  }

  .header.responsive {
    height: 5rem;
    -webkit-flex-direction: row;
            flex-direction: row;
  }

  .stable {
    width: auto;
    height: 5rem;
    z-index: 300;
    display: block;
  }

  .menu-link {
    color: #7d7d7d;
    transition: color 0.25s ease-out;
  }

  .menu-link.black {
    color: #000;
  }

  .menu-link:hover {
    color: #000;
  }

  .menu-link.active {
    color: #000;
  }

  .other, .menu-link.active.other, .menu-link.black.other {
    color: #7d7d7d;
  }

  /* Gallery — Single Work Page */
  .info p {
    max-width: 60%;
  }

}

@media (min-width: 995px) and (orientation: landscape) {

}

@media (min-width: 1200px) {

}

@media (hover: none) {
  .slick-next, .slick-prev {
    display: none;
  }
}

@supports (display: grid) {
  .projects {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }

  @media (min-width: 768px) {
    .projects {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 1.5rem;
      margin-bottom: 4rem;
    }
  }

  @media (min-width: 995px) and (orientation: landscape) {
    .projects {
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 1.5rem;
      margin-bottom: 5rem;
    }
  }

  @media (min-width: 1200px) {
    .projects {
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 1.5rem;
    }
  }
}