* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
  overflow-x: hidden;
}

html {
  font-size: 13px;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {
  html {
    font-size: 12px;
  }
}

body {
  background: #fff;
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
  padding-bottom: 30px;
}

@media (max-width: 768px) {
  .content-wrapper {
    transition: 300ms;
  }
  .nav-open .content-wrapper {
    transform: translateX(100%);
  }
  body::after {
    content: 'mobile';
    display: none;
  }
}

a {
  text-decoration: none;
  color: #b2b2b2;
  transition: 300ms;
}

.no-touch a:hover,
a.active {
  color: #000;
}

.naughty-browser {
  padding: 10px;
  margin-bottom: 20px;
  text-align: center;
  background: #eee;
}


.page-header {
  padding: 80px 0 0 70px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}

@media (max-width: 1024px) {
  .page-header {
    padding: 60px 0 0 35px;
  }
}

@media (max-width: 768px) {
  .page-header {
    right: 0;
    background: #fff;
    padding: 20px;
  }
}

.page-header__title {
  font-size: 1.61rem;
  letter-spacing: 0.15em;
}

@media (max-width: 1024px) {
  .page-header__title {
    font-size: 1.47rem;
  }
}

@media (max-width: 768px) {
  .page-header__title {
    font-size: 1.63rem;
  }
}

@media (max-width: 400px) {
  .page-header__title {
    font-size: 6vw;
  }
}

.page-header__title a,
.page-header__title a:active {
  color: #000;
}

.no-touch .page-header__title a:hover {
  color: #b2b2b2;
}


.nav-toggle {
  display: none;
  color: #b2b2b2;
  transform: translateX(-4.8em);
  transition: 300ms;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
}

.nav-open .nav-toggle {
  transform: translateX(0);
}

.nav-toggle__close {
  opacity: 0;
  transition: 300ms;
}

.nav-open .nav-toggle__close {
  opacity: 1;
}

.nav-toggle__breadcrumb {
  color: #000;
  opacity: 0;
  transition: 300ms;
}

.nav-toggle__breadcrumb.visible {
  opacity: 1;
}

.nav-toggle__breadcrumb::before {
  color: #b2b2b2;
  content: " / ";
}

.nav-open .nav-toggle__breadcrumb {
  opacity: 0;
}

.main-nav {
  position: fixed;
  left: 70px;
  top: 185px;
  bottom: 0;
  font-size: 1.15rem;
  width: 333px;
  overflow-y: auto;
}

@media (max-width: 1024px) {
  .main-nav {
    left: 35px;
    top: 140px;
    font-size: 1rem;
    width: 282px;
  }
}

@media (max-width: 768px) {

  .main-nav {
    left: 0;
    top: 88px;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 50px 20px 20px;
    transform: translateX(-100%);
    transition: 300ms;
  }

  .nav-open .main-nav {
    transform: translateX(0);
  }

}

.main-nav ul {
  list-style: none;
}

.main-nav li {
  margin-bottom: 0.3em;
}

.main-nav__item--divided {
  margin-top: 2em;
}

.social {
  margin-top: 2em;
  margin-bottom: 2em !important;
}

.social a {
  opacity: 0.5;
}

.social a:hover {
  opacity: 1;
}

.social img {
  width: 20px;
  height: 20px;
}


.item {
  position: relative;
  z-index: 1;
  margin-left: 430px;

  /* 1 'line' = 1.6em */
  padding-top: 3.2em;
}

.item.copy {
  padding-top: 6.4em; /* 4 'lines' */
  min-height: calc(100vh - 82px - 30px - 6.4em); /* 82px = footer outer height, 30px = body padding bottom, 6.4em = item padding top */
}

.item--first {
  padding-top: 187px;
}

@media (max-width: 1024px) {
  .item {
    margin-left: 330px;
  }

  .item.copy {
    padding-top: 4.8em;
    min-height: calc(100vh - 82px - 30px - 4.8em); /* 82px = footer outer height, 30px = body padding bottom, 4.8em = item padding top */
  }

  .item--first {
    padding-top: 140px;
  }
}

@media (max-width: 768px) {
  .item {
    padding-top: 95px; /* has to be at least the same height as the header to scroll it into place from the menu */
    margin-left: 20px;
  }

  .item.copy {
    padding-top: 95px;
    min-height: calc(100vh - 125px - 30px - 90px); /* 125px = footer outer height, 30px = body padding bottom, 90px = mobile header height */
  }

  .item--first {
    padding-top: 141px;
  }

  .item--last {
    padding-bottom: 0;
  }
}


.project__gallery-wrapper {
  position: relative;

  /* 1 'line' = 1.6em */
  margin-bottom: 1.6em;
}

.project__gallery {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0;
  line-height: 0;
  height: 400px;
  opacity: 0;
  transform: translateX(150px);

  /* duration also used in main.js orientationchange event handler */
  transition-property: opacity, transform;
  transition-duration: 1500ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 768px) {
  .project__gallery {
    height: 250px;
    margin-left: -20px;
    padding-left: 20px;
    transform: translateX(100%);
  }
}

.project.enter .project__gallery {
  opacity: 1;
  transform: translateX(0);
}

.project__gallery img {
  height: 100%;
  width: auto;
  display: inline-block;
  cursor: pointer;
}

@media (max-width: 768px) {
  .project__gallery img {
    cursor: default;
  }
}

/*
Gaps need to be done with this masking element to avoid pixel rounding
inconsistencies. This white element is on top of the images and crops 1px from
each side of them.
*/
.project__gallery-gap {
  display: inline-block;
  height: 100%;
  width: 3px;
  background: #fff;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
}

.scroll-arrow {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 20px;
  height: 60px;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  background: url(../img/arrow.svg) no-repeat center;
  cursor: pointer;
  transition: 300ms;
}

.scroll-arrow--visible {
  pointer-events: all;
  opacity: 1;
}

.scroll-arrow:hover {
  opacity: 0.7;
}

/* Hide the scroll arrows when overlay is open */
.mfp-zoom-out-cur .scroll-arrow--visible {
  opacity: 0;
}

/* No scroll arrows or zooming for mobiles. */
@media (max-width: 768px) {
  .scroll-arrow,
  .scroll-arrow--visible {
    display: none;
  }
}

.project__caption {
  padding-right: 10%;
  max-width: 95em;
}

@media (max-width: 768px) {
  .project__caption {
    padding-right: 0;
    margin-right: 20px;
  }
}


.copy {
  max-width: 75em;
  padding-right: 4em;
}

@media (max-width: 768px) {
  .copy {
    padding-right: 0;
    margin-right: 20px;
  }
}

.rich-text p,
.rich-text ol,
.rich-text ul {
  margin-bottom: 1.2em;
}

.rich-text img {
  max-width: 100%;
  height: auto;
}

.rich-text iframe {
  display: block;
  margin-bottom: 1.2em;
  max-width: 100%;
}

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  margin: 3.6em 0 1.2em;
  font-weight: normal;
}

.rich-text h1 span,
.rich-text h2 span,
.rich-text h3 span,
.rich-text h4 span,
.rich-text h5 span,
.rich-text h6 span {
  line-height: 1;
  display: inline-block;
  padding-bottom: 1px;
  box-shadow: 0 1px 0px #888;
}

.rich-text > :last-child {
  margin-bottom: 0;
}


.footer {
  color: #b2b2b2;
}

@media (max-width: 768px) {
  .footer {
    font-size: 0.8rem;
  }
}


/* Magnific Popup lightbox overrides */

.mfp-bg {
  background: #fff;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close,
.mfp-preloader {
  color: #000;
}

.mfp-container {
  padding-left: 20px;
  padding-right: 20px;
}

img.mfp-img {
  padding: 80px 0;
  user-select: none;
}

.mfp-figure:after {
  content: none; /* removes box shadow */
}

.mfp-image-holder .mfp-close {
  position: fixed;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: url(../img/cross.svg) no-repeat center;
  background-size: contain;
  opacity: 1;
  transition: 300ms;
}

.mfp-image-holder .mfp-close:hover {
  opacity: 0.7;
}

.mfp-zoom-out-cur {
  cursor: default;
}

.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: pointer;
}

/* Fade effect */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: 500ms;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.9;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: 500ms;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

@media (max-width: 900px) {
  .mfp-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  img.mfp-img {
    padding: 80px 0;
  }
}