@font-face {
  font-family: 'Walsheim Light';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/gt-walsheim-light-web-webfont.woff');
}

@font-face {
  font-family: 'Walsheim Light';
  font-weight: normal;
  font-style: italic;
  src: url('../fonts/gt-walsheim-light-oblique-web-webfont.woff');
}

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

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

::input-placeholder {
  color: inherit;
}
::-webkit-input-placeholder {
  color: inherit;
}
::-moz-input-placeholder {
  color: inherit;
}
::-ms-input-placeholder {
  color: inherit;
}

[data-col="1"] { width: calc(100% * 1 / 12); }
[data-col="2"] { width: calc(100% * 2 / 12); }
[data-col="3"] { width: calc(100% * 3 / 12); }
[data-col="4"] { width: calc(100% * 4 / 12); }
[data-col="5"] { width: calc(100% * 5 / 12); }
[data-col="6"] { width: calc(100% * 6 / 12); }
[data-col="7"] { width: calc(100% * 7 / 12); }
[data-col="8"] { width: calc(100% * 8 / 12); }
[data-col="9"] { width: calc(100% * 9 / 12); }
[data-col="10"] { width: calc(100% * 10 / 12); }
[data-col="11"] { width: calc(100% * 11 / 12); }
[data-col="12"] { width: calc(100% * 12 / 12); }

[data-push="1"] { margin-left: calc(100% * 1 / 12); }
[data-push="2"] { margin-left: calc(100% * 2 / 12); }
[data-push="3"] { margin-left: calc(100% * 3 / 12); }
[data-push="4"] { margin-left: calc(100% * 4 / 12); }
[data-push="5"] { margin-left: calc(100% * 5 / 12); }
[data-push="6"] { margin-left: calc(100% * 6 / 12); }
[data-push="7"] { margin-left: calc(100% * 7 / 12); }
[data-push="8"] { margin-left: calc(100% * 8 / 12); }
[data-push="9"] { margin-left: calc(100% * 9 / 12); }
[data-push="10"] { margin-left: calc(100% * 10 / 12); }
[data-push="11"] { margin-left: calc(100% * 11 / 12); }
[data-push="12"] { margin-left: calc(100% * 12 / 12); }

body {
  font-family: 'Walsheim Light';
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.013em;
  color: #ccc;
  background-color: #fefefe;
}

#background {
  display: none;
}

body[data-page="home"] #background, #loader, body[data-template="category"] #background {
  z-index: -1;
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  pointer-events: none;
  background-image: url('../images/grid.png');
  background-repeat: repeat;
  background-size: 20px;
}

#loader {
  z-index: 1;
  background-color: #fefefe;
}

a {
  -webkit-transition: color 0.25s ease-out;
          transition: color 0.25s ease-out;
}
a:hover, a[data-open="true"] {
  color: #b5b5b5;
}

::-moz-selection {
  background: rgba(208, 199, 194, 0.3);
}

::selection {
  background: rgba(208, 199, 194, 0.3);
}

.small {
  font-size: 14px;
  line-height: 19px;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 24px;
  padding-left: 24px;
  max-width: 1800px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

header#top, main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

header#top {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 12px 0;
  z-index: 10;
  opacity: 1;
}
header#top nav {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
header#top nav a:not(:first-child) {
  margin-left: 2rem;
}
header#top h1, header#top #menu-trigger {
  z-index: 200;
}
header#top .wrapper {
  max-width: none;
}

#menu-trigger {
  display: none;
}

main {
  position: relative;
  padding-top: 36px;
  margin: 72px 0 24px 0;
  z-index: 1;
  opacity: 0;
}
main .wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

main p {
  margin-bottom: 24px;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.gutter {
  margin-right: 24px;
}

main .row {
  margin-bottom: 72px;
}

body[data-template="work"] figure figcaption {
  text-align: left;
}

figure figcaption {
  margin-top: 12px;
  text-align: center;
}

.arrow {
  font-family: 'Arial';
  font-size: 48px;
  line-height: 1;
}

a.back-to-top {
  float: right;
}

.col.nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.col.nav a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.col.nav a img {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
}
.col.nav a:hover img {
  opacity: 1;
}
.col.nav.next {
  text-align: right;
}
.col.nav.next .image-container {
  margin-right: 24px;
}
.col.nav.prev .image-container {
  margin-left: 24px;
}
.col.nav .arrow {
  position: relative;
  top: 15px;
}

body[data-page="contact"] main {
  text-align: center;
}
body[data-page="contact"] .row.text .col {
  margin-left: 0!important;
  width: 100%!important;
}
body[data-page="contact"] .row.text .gutter {
  max-width: none!important;
}
body[data-page="contact"] .row.text {
  margin-top: 120px;
}
#subscribe {
  position: relative;
}
#subscribe input {
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  color: inherit;
  outline: none;
  display: block;
  text-align: center;
  width: 100%;
  overflow: visible;
}
#subscribe input[type="submit"] {
  cursor: pointer;
  margin: auto;
  width: auto;
}
#subscribe input[type="submit"]:focus, #subscribe input[type="submit"]:hover {
  color: #b5b5b5;
}

#thanks {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  display: none;
}

body[data-template="information"] .row.text .gutter {
  max-width: 960px;
}

@media (max-width: 960px) {
  body[data-menu-open="true"] header#top nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 72px 24px 24px 48px;
    background: white;
    z-index: 1;
    display: block;
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  body[data-menu-open="true"] header#top nav a {
    margin: 0;
  }
  body[data-menu-open="true"] #menu-trigger .close {
    display: block;
  }
  body[data-menu-open="true"] #menu-trigger .hamburger {
    display: none;
  }

  #menu-trigger {
    width: 24px;
    height: 24px;
    display: block;
    position: fixed;
    top: 14px; right: 48px;
    padding: 2px;
  }
  #menu-trigger svg {
    width: 100%;
    height: 100%;
  }
  #menu-trigger .close {
    display: none;
  }

  header#top nav {
    display: none;
  }


  body[data-template="information"] .row.text .col,
  body[data-template="information"] .row.sections .col:nth-child(1) {
    margin-left: 0!important;
  }

  body[data-template="work"] .row.work-information {
    position: relative;
    padding-bottom: 180px;
  }

  body[data-template="work"] .row.work-information .info-cols {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  body[data-template="work"] .row.work-information .prev,
  body[data-template="work"] .row.work-information .next {
    position: absolute;
    bottom: 0;
    max-width: 50%;
  }
  body[data-template="work"] .row.work-information .next {
    right: 0;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  body[data-template="information"] .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  body[data-template="information"] .col {
    margin-bottom: 24px;
    margin-left: 0!important;
  }

  body[data-template="information"] .col p:last-child,
  body[data-template="information"] .col:last-child {
    margin-bottom: 0;
  }

  body[data-template="information"] .col,
  body[data-template="information"] .row.sections .col:nth-child(2),
  body[data-template="information"] .row.sections .col:nth-child(3),
  body[data-template="work-list"] .col,
  body[data-template="work"] .col,
  body[data-template="category"] .col {
    margin-left: 0!important;
    width: 100%!important;
  }
}

@media (max-width: 480px) {
  .gutter {
    margin-right: 12px;
  }
  .wrapper {
    margin: 0 12px;
    padding-left: 12px;
  }
  body[data-menu-open="true"] header#top nav {
    padding: 72px 12px 24px 24px;
  }
  #menu-trigger {
    right: 24px;
  }
  .col.nav .image-container {
    display: none;
  }
  body[data-template="work"] .row.work-information {
    padding-bottom: 0;
    margin-bottom: 24px;
  }
}

@media (min-width: 1600px) {
  .work-information .nav .gutter {
    position: absolute;
    bottom: 72px;
  }
  .work-information .nav img {
    max-width: 200px;
  }
  .work-information .nav.prev .gutter {
    left: 48px;
  }
  .work-information .nav.next .gutter {
    right: 24px;
  }
}

/* elemnt */
/* overrides for centered subscribe page */

.centered { margin: 20% auto auto auto; text-align: center; }
@media (max-width: 768px) { .centered { margin-top: 40%; } }
@media (max-width: 320px) { .centered { margin-top: 25%; } }