@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

*:after, *:before {
  box-sizing: inherit;
}

img {
  max-width: 100%;
}

::-moz-selection {
  background-color: rgba(25, 25, 25, 0.77);
  color: #fff;
}

::selection {
  background-color: rgba(25, 25, 25, 0.77);
  color: #fff;
}

/*********************
Variables
*********************/
/*********************
Mixins
*********************/
i {
  display: block;
}
i svg {
  display: block;
  margin: auto;
}

.icon-twitter {
  width: 23px;
  height: 23px;
}

.icon-instagram {
  width: 23px;
  height: 23px;
}

.icon-facebook {
  width: 23px;
  height: 21px;
}

.icon-pinterest {
  width: 21px;
  height: 21px;
}

.icon-1stdibs {
  width: 73px;
  height: 23px;
}

.h1 {
  font-family: "meno-display", serif;
  font-style: normal;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-weight: 300;
  font-size: 54px;
  line-height: 0.98;
}
@media screen and (min-width: 375px) {
  .h1 {
    font-size: 68px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .h1 {
    /* font-size: 150px;
    line-height: 1.0; */
    font-size: 16.16vh;
    line-height: 1;
  }
}

.h2 {
  font-family: "meno-display", serif;
  font-style: normal;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-weight: 300;
  font-size: 54px;
  line-height: 0.98;
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .h2 {
    font-size: 60px;
    line-height: 1.1;
  }
}

em {
  font-style: italic;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
}

.scroll {
  font-family: "meno-display", serif;
  font-style: normal;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  font-style: italic;
  color: #B43934;
}

.cta {
  font-family: "meno-display", serif;
  font-style: normal;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: #B43934;
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .cta {
    font-size: 22px;
    color: #191919;
  }
}

.label {
  font-family: "lato", serif;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
  font-size: 12px;
  line-height: 2.166;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.p {
  font-family: "lato", serif;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.857;
}

.sideways .words {
  font-family: "meno-display", serif;
  font-style: normal;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-weight: 300;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
@media (max-width: 767px), (max-height: 639px) {
  .sideways .words {
    font-size: 33vw;
    line-height: 1;
  }
}
@media (max-width: 767px) and (min-width: 400px), (max-height: 639px) and (min-width: 400px) {
  .sideways .words {
    font-size: 132px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .sideways .words {
    font-size: 14.22vh;
    line-height: 1.0909;
  }
}

/* @include mobile {
  .sideways {
    display: inline-flex;
    @include meno-light;
    font-size: 132px;
    line-height: 1.0;
    text-align: center;

    &.rotate {
      .words {
        transform: rotate(-90deg) translateX(-100%);
        transform-origin: top left;
      }

      &.left {
        margin-left: -.075em;
      }

      &.right {
        margin-right: -.075em;
      }
    }
  } 
}

@include desktop {
  .sideways {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    @include meno-light;
    font-size: 14.22vh;
    line-height: 1.0909;

    .words {
      display: block;
      transform: rotate(-90deg);

      span {
        display: block;
      }
    }
  } 
} */
html {
  height: 100%;
}

body {
  color: #252525;
}

@media (max-width: 767px), (max-height: 639px) {
  body {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100%;
  }
  .main {
    overflow-x: hidden;
  }
  .center {
    margin-left: auto;
    margin-right: auto;
    padding: 0 11px;
  }
  .center.double {
    padding: 0 22px;
  }
  .center.quadruple {
    padding: 0 33px;
  }
}
@media screen and (max-width: 767px) and (min-width: 375px), screen and (max-height: 639px) and (min-width: 375px) {
  .center.quadruple {
    padding: 0 44px;
  }
}
@media screen and (max-width: 767px) and (min-width: 600px), screen and (max-height: 639px) and (min-width: 600px) {
  .center {
    padding: 0 22px;
  }
  .center.double {
    padding: 0 44px;
  }
  .center.quadruple {
    padding: 0 88px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
  }
  body.is-starting .door {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: all;
    background-color: transparent;
  }
  body.is-starting .door .wipe {
    background-color: #fff;
  }
  body.is-started .door {
    opacity: 0;
    background-color: #fff;
  }
  .main {
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    min-width: 100vw;
    will-change: transform, opacity;
  }
  .main.touch {
    overflow-y: hidden;
  }
}
.color-red {
  color: #B43934;
}

img {
  display: block;
}

a,
.button {
  color: inherit;
}

.label + .body,
.label + .cta {
  padding-top: 12px;
}

.body + .cta {
  padding-top: 20px;
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .body + .cta {
    padding-top: 25px;
  }
}

.splitting .char {
  will-change: transform, opacity;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-left: -0.5em;
  margin-right: -0.5em;
}

picture {
  display: block;
  overflow: hidden;
}

.cta a {
  display: inline-block;
  position: relative;
  transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cta a:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  width: 0;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cta a:hover {
  color: #B43934;
}
.cta a:hover:before {
  width: 100%;
  opacity: 1;
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0s;
}
.cta a:active {
  transform: scale(0.95);
  transition: 0.15s;
}

a .cta span {
  display: inline-block;
  position: relative;
  transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
a .cta span:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  width: 0;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
a:hover .cta span {
  color: #B43934;
}
a:hover .cta span:before {
  width: 100%;
  opacity: 1;
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0s;
}
a:active .cta span {
  transform: scale(0.95);
  transition: 0.15s;
}

@-moz-document url-prefix() {
  * {
    filter: none !important;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  footer,
.footer {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  footer > div,
.footer > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  footer .logo,
.footer .logo {
    order: 1;
    width: 50%;
    font-size: 0;
  }
  footer .logo a,
.footer .logo a {
    display: inline-block;
  }
  footer .logo svg,
.footer .logo svg {
    margin-left: 0;
  }
  footer .copyright,
.footer .copyright {
    order: 3;
    margin-top: 20px;
    width: 50%;
  }
  footer .copyright p,
.footer .copyright p {
    line-height: 1.4;
  }
  footer .social,
.footer .social {
    order: 2;
    width: 50%;
    text-align: right;
  }
  footer .siteby,
.footer .siteby {
    order: 4;
    width: 50%;
    text-align: right;
  }
}
@media screen and (max-width: 767px) and (min-width: 640px), screen and (max-height: 639px) and (min-width: 640px) {
  footer > div,
.footer > div {
    flex-direction: column;
    justify-content: space-evenly;
    height: 96px;
  }
  footer .logo,
.footer .logo {
    width: 34%;
  }
  footer .copyright,
.footer .copyright {
    order: 2;
    margin-top: 0;
    width: 66%;
  }
  footer .social,
.footer .social {
    display: flex;
    order: 3;
    width: 66%;
    text-align: right;
  }
  footer .social li + li,
.footer .social li + li {
    margin-left: 44px;
  }
  footer .siteby,
.footer .siteby {
    width: 66%;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  footer,
.footer {
    display: inline-block;
    vertical-align: top;
    width: 154px;
    height: 100%;
    align-self: flex-end;
  }
  footer a,
.footer a {
    pointer-events: all;
  }
  footer > div,
.footer > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  footer .logo a,
.footer .logo a {
    display: block;
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  footer .logo a:hover,
.footer .logo a:hover {
    opacity: 0.7;
  }
  footer .logo a:active,
.footer .logo a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
  footer .social,
.footer .social {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  footer .social li,
.footer .social li {
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding-top: 26px;
    padding-bottom: 26px;
  }
  footer .social li a,
.footer .social li a {
    display: block;
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  footer .social li a:hover,
.footer .social li a:hover {
    color: #B43934;
  }
  footer .social li a:active,
.footer .social li a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-height: 820px) {
  footer .social .label,
.footer .social .label {
    letter-spacing: 7.89px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  footer .siteby,
.footer .siteby {
    text-align: center;
    font-size: 12px;
    /* a {
      display: block;
      transition: .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);

      &:hover {
        // opacity: .7;
      }

      &:active {
        transform: scale(.95);
        transition: .15s;
      }
    } */
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  footer .copyright,
.footer .copyright {
    margin-top: 20px;
    padding-bottom: 35px;
    text-align: center;
  }
  footer .copyright p,
.footer .copyright p {
    font-size: 10px;
    letter-spacing: 6.58px;
  }
}

@media screen and (min-width: 768px) and (min-height: 640px) {
  .footergap {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    padding-left: 13.859vh;
  }
  .end {
    height: 100%;
    align-self: flex-end;
  }
}
header {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
header .inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1.616vh 1.724vh;
}
header .logo {
  pointer-events: all;
}
@media (max-width: 767px), (max-height: 639px) {
  header .logo i {
    height: 48px;
  }
  header .logo svg {
    height: 100%;
    width: auto;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  header .logo a {
    display: block;
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  header .logo a svg path {
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  header .logo a:hover svg path {
    fill: #B43934;
  }
  header .logo a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
}
header .menu {
  display: flex;
  align-items: center;
}
header .menu .label {
  font-size: 11px;
  letter-spacing: 6.12px;
  padding-right: 0.25em;
  cursor: pointer;
  pointer-events: all;
  transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
header .menu:hover .label {
  color: #B43934;
}
header .menu:hover .hamburger .bun,
header .menu:hover .hamburger .patty {
  width: 60%;
}
header .menu:hover .hamburger .bun,
header .menu:hover .hamburger .patty {
  margin-left: -30%;
}
header .menu:active .label,
header .menu:active .hamburger {
  transform: scale(0.95);
  transition: 0.15s;
}
header .hamburger {
  position: relative;
  width: 35px;
  height: 32px;
  color: #B43934;
  cursor: pointer;
  border: 1px solid rgba(151, 151, 151, 0.5);
  border-radius: 100px;
  pointer-events: all;
  transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
header .hamburger .bun,
header .hamburger .patty {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45.714%;
  height: 1px;
  background-color: currentColor;
  transition: 0.35s;
}
header .hamburger .bun {
  margin-left: calc(-22.85% - 1px);
}
header .hamburger .bun:first-child {
  margin-top: -5px;
}
header .hamburger .bun:last-child {
  margin-top: 5px;
}
header .hamburger .patty {
  margin-left: calc(-22.85% + 1px);
}

.door {
  position: fixed;
  z-index: 4;
  transform: translateX(100%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  will-change: transform;
}
.door .left,
.door .right {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #191919;
  overflow: hidden;
}
.door .left {
  left: 0;
}
.door .left .wipe {
  right: 0;
}
.door .right {
  right: 0;
}
.door .right .wipe {
  left: 0;
}
.door .wipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(205, 196, 181, 0.56);
}

/* @include desktop {
  .door {
    position: fixed;
    z-index: 4;
    transform: translateX(100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .left,
    .right {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background-color: #191919;
      overflow: hidden;
    }

    .left {
      left: 0;

      .wipe {
        right: 0;
      }
    }

    .right {
      right: 0;

      .wipe {
        left: 0;
      }
    }

    .wipe {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #B43934;
    }
  }
} */
.instagram .feed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 15px;
  row-gap: 15px;
}
.instagram .feed a {
  display: block;
  position: relative;
  width: 100%;
}
.instagram .feed a:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
}
.instagram .feed a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .instagram .feed {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .instagram .feed {
    column-gap: 20px;
    row-gap: 20px;
  }
}
@media screen and (min-width: 1180px) {
  .instagram .feed {
    column-gap: 25px;
    row-gap: 25px;
  }
}

.overlay {
  display: flex;
  position: fixed;
  z-index: 4;
  transform: translateX(100%);
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.overlay.is-open {
  transform: translateX(0);
  transition: 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.overlay.is-open .menu li a.is-active:before, .overlay.is-open .menu li a:hover:before, .overlay.is-open .menu li a:focus:before {
  width: 183px;
}
.overlay.is-open .menu li.unhover a:before {
  width: 0px;
}
@media (max-width: 767px), (max-height: 639px) {
  .overlay .close {
    position: absolute;
    top: 3.5vh;
    left: 0;
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 767px) and (min-height: 820px), screen and (max-height: 639px) and (min-height: 820px) {
  .overlay .close {
    top: 7.004vh;
  }
  .overlay .close a {
    letter-spacing: 6.67px;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .overlay nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    height: 100%;
    padding-top: 26px;
    padding-bottom: 26px;
    background-color: rgba(205, 196, 181, 0.56);
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .overlay .menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding-top: 38px;
    padding-left: 10.56vw;
    padding-right: 10.56vw;
  }
  .overlay .menu li {
    display: inline-block;
    opacity: 1;
    transition: 0s linear 0.5s;
  }
  .overlay .menu li a {
    position: relative;
    line-height: 1.333;
    font-size: 42px;
    opacity: 1;
    transition: 0.25s;
  }
  .overlay .menu li a .active {
    display: none;
  }
  .overlay .menu li a:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -3px;
    margin-right: 17px;
    width: 0px;
    height: 1px;
    background-color: #B43934;
    transition: 0.25s;
  }
  .overlay .menu li a.is-active, .overlay .menu li a:hover, .overlay .menu li a:focus {
    font-style: italic;
    color: #B43934;
    opacity: 1;
  }
  .overlay .menu li.unhover a {
    font-style: normal;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .overlay .footer {
    display: none;
  }
}
@media screen and (max-width: 767px) and (max-height: 599px), screen and (max-height: 639px) and (max-height: 599px) {
  .overlay .menu li a {
    font-size: 42px;
  }
}
@media screen and (min-width: 768px) {
  .overlay {
    width: 49.097%;
    min-width: 768px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .overlay .close {
    position: absolute;
    z-index: 2;
    top: 3.5vh;
    left: 0;
    width: 100%;
    text-align: center;
  }
  .overlay .close a {
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .overlay .close a:hover {
    color: #B43934;
  }
  .overlay .close a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-height: 820px) {
  .overlay .close {
    top: 7.004vh;
  }
  .overlay .close a {
    letter-spacing: 6.67px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .overlay nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    position: relative;
    height: 100%;
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .overlay nav:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(205, 196, 181, 0.56);
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-height: 700px) {
  .overlay nav {
    padding-bottom: 5vh;
  }
  .overlay nav:before {
    height: calc(100% - 54px);
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-height: 768px) {
  .overlay nav {
    padding-bottom: 10vh;
  }
  .overlay nav:before {
    height: calc(100% - 10.56vh);
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-height: 880px) {
  .overlay nav {
    padding-bottom: 10vh;
  }
  .overlay nav:before {
    height: calc(100% - 154px);
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .overlay .menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding-left: 10.56vh;
    padding-right: 10.56vh;
  }
  .overlay .menu li {
    display: inline-block;
    position: relative;
    opacity: 1;
    transition: 0s linear 0.5s;
  }
  .overlay .menu li + li {
    margin-top: 0.25em;
  }
  .overlay .menu li a {
    transform-origin: left center;
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .overlay .menu li a:hover + .bar {
    width: 183px;
    transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .overlay .menu li a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
  .overlay .menu li.unhover a + .bar {
    width: 0px;
    transition: 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  .overlay .menu li a {
    display: block;
    position: relative;
    line-height: 1.225;
    font-size: 52px;
    opacity: 1;
    transition: 0.25s;
    overflow: hidden;
  }
  .overlay .menu li a span span {
    display: inline-block;
    will-change: transform;
  }
  .overlay .menu li a .active {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 0.1em;
    color: #B43934;
    font-style: italic;
    pointer-events: none;
  }
  .overlay .menu li a .active span {
    transform: translateY(100%);
  }
  .overlay .menu li a:before {
    /* content: '';
    display: block; */
  }
  .overlay .menu li a.is-active, .overlay .menu li a:hover, .overlay .menu li a:focus {
    opacity: 1;
  }
  .overlay .menu li .bar {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -3px;
    margin-right: 17px;
    width: 0px;
    height: 1px;
    background-color: #B43934;
    transition: 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }
  .overlay .menu li.unhover a {
    font-style: normal;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .overlay .footer .logo,
.overlay .footer .copyright,
.overlay .footer .siteby {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .overlay .footer .social a {
    display: block;
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .overlay .footer .social a:hover {
    color: #B43934;
  }
  .overlay .footer .social a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
}

@media (max-width: 767px), (max-height: 639px) {
  .intro {
    position: relative;
    padding-top: 100px;
  }
  .intro .title h1 {
    display: block;
    font-family: "meno-display", serif;
    font-style: normal;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-weight: 300;
    font-size: 80px;
    line-height: 1;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .intro .title {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 100%;
    width: 13.859vh;
    padding-bottom: 3.232vh;
  }
  .intro .title > .center {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .intro .title h1 {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: -0.1em;
    font-family: "meno-display", serif;
    font-style: normal;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-weight: 300;
    font-size: 11.206vh;
    line-height: 1;
  }
}

/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
  position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none;
}

/* Expanded CSS Variables */
.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);
  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);
  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));
  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));
  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));
  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );
  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));
  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}

.splitting.cells img {
  width: 100%;
  display: block;
}

@supports (display: grid) {
  .splitting.cells {
    position: relative;
    overflow: hidden;
    background-size: cover;
    visibility: hidden;
  }
  .splitting .cell-grid {
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr);
  }
  .splitting .cell {
    background: inherit;
    position: relative;
    overflow: hidden;
  }
  .splitting .cell-inner {
    background: inherit;
    position: absolute;
    visibility: visible;
    /* Size to fit the whole container size */
    width: calc(100% * var(--col-total));
    height: calc(100% * var(--row-total));
    /* Position properly */
    left: calc(-100% * var(--col-index));
    top: calc(-100% * var(--row-index));
  }
  /* Helper variables for advanced effects */
  .splitting .cell {
    --center-x: calc((var(--col-total) - 1) / 2);
    --center-y: calc((var(--row-total) - 1) / 2);
    /* Offset from center, positive & negative */
    --offset-x: calc(var(--col-index) - var(--center-x));
    --offset-y: calc(var(--row-index) - var(--center-y));
    /* Absolute distance from center, only positive */
    --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );
    /* Absolute distance from center, only positive */
    --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
  }
}
.e404 .p + .cta {
  margin-top: 20px;
}

@media (max-width: 767px), (max-height: 639px) {
  .about #introTitle {
    display: none;
  }
  .about .biography {
    background: #fff;
    background: linear-gradient(0deg, #e1e3e2 0%, #fff 100%);
  }
  .about .biography .center {
    display: flex;
    flex-direction: column;
  }
  .about .nicole {
    display: none;
    order: 2;
    margin-top: 30px;
  }
  .about .nicole picture {
    display: block;
    margin-left: -3%;
  }
  .about .nicole img {
    margin: auto;
  }
  .about .text {
    order: 1;
    padding-bottom: 30px;
  }
  .about .text blockquote {
    color: #B43934;
    /* + .block,
    + p {
      margin-top: 1.5em;
    } */
  }
  .about .text blockquote ~ blockquote {
    display: none;
  }
  .about .text blockquote ~ blockquote ~ blockquote {
    display: block;
  }
  .about .text blockquote + h1 {
    margin-top: 30px;
  }
  .about .text h1 + .block,
.about .text h1 + p,
.about .text .block + .block,
.about .text .block + p,
.about .text p + .block,
.about .text p + p {
    margin-top: 1.5em;
  }
  .about .text h1 + blockquote,
.about .text .block + blockquote,
.about .text p + blockquote {
    margin-top: 0.6em;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .about {
    position: relative;
    height: 100%;
    padding-left: 13.859vh;
    overflow: visible;
    white-space: nowrap;
  }
  .about #mobileTitle {
    display: none;
  }
  .about .intro {
    position: relative;
    z-index: 2;
    height: 100%;
  }
  .about .biography {
    background: #fff;
    background: linear-gradient(90deg, #e1e3e2 0%, #fff 100%);
  }
  .about .biography .center {
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .about .nicole {
    position: relative;
    z-index: 2;
    width: 45%;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 1024px) {
  .about .nicole {
    width: 450px;
  }
  .about .nicole img {
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 1200px) {
  .about .nicole {
    width: 500px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .about .text {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding-left: 45%;
    white-space: normal;
  }
  .about .text #biographyQuote,
.about .text .image {
    display: none;
  }
  .about .text .width {
    position: absolute;
    top: 0;
    right: 15px;
    width: calc(55% - 30px);
  }
  .about .text .inner {
    width: 1000vw;
    columns: 313px;
    height: 100%;
    column-gap: 30px;
    column-fill: auto;
    padding: 80px 15px 30px;
  }
  .about .text p,
.about .text blockquote {
    max-width: 590px;
    padding: 0 15px;
  }
  .about .text blockquote {
    color: #B43934;
  }
  .about .text blockquote + .image + .block,
.about .text blockquote + .image + p {
    margin-top: 1.5em;
  }
  .about .text blockquote .block,
.about .text blockquote + p {
    margin-top: 1.5em;
  }
  .about .text .block .block,
.about .text .block + p,
.about .text p .block,
.about .text p + p {
    margin-top: 1.5em;
  }
  .about .text .block .block.breaker,
.about .text .block + p.breaker,
.about .text p .block.breaker,
.about .text p + p.breaker {
    margin-top: 0;
  }
  .about .text .block + blockquote,
.about .text p + blockquote {
    margin-top: 0.6em;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 1024px) {
  .about .text {
    padding-left: 450px;
  }
  .about .text .inner {
    padding: 120px 20px 60px;
  }
  .about .text p,
.about .text blockquote {
    max-width: 600px;
    padding: 0 20px;
  }
  .about .text .width {
    right: 20px;
    width: calc(100% - 490px);
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 1200px) {
  .about .text {
    padding-left: 500px;
  }
  .about .text .width {
    width: calc(100% - 530px);
  }
}

.advisory .artImage .image {
  position: relative;
  z-index: 2;
}
@media (max-width: 767px), (max-height: 639px) {
  .advisory .intro {
    padding-top: 130px;
  }
  .advisory .intro .paint {
    position: absolute;
    top: 0;
    left: -25%;
    display: block;
    width: 125%;
    height: 100%;
    background-image: url(../images/svg/paint-stroke.svg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 150% auto;
    pointer-events: none;
  }
  .advisory .intro .title {
    display: none;
  }
  .advisory .intro .headline {
    position: relative;
    z-index: 2;
  }
  .advisory .intro .headline .word {
    white-space: nowrap;
  }
  .advisory .intro .headline br {
    display: none;
  }
  .advisory .intro .text {
    position: relative;
    z-index: 2;
    padding-top: 60px;
  }
}
@media screen and (max-width: 767px) and (min-width: 768px), screen and (max-height: 639px) and (min-width: 768px) {
  .advisory .intro:before {
    left: 0;
    width: 100%;
    background-size: 100% auto;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .advisory .aart {
    position: relative;
    z-index: 2;
    padding-top: 80px;
    padding-bottom: 30px;
  }
  .advisory .aart li {
    position: relative;
  }
  .advisory .aart li.name {
    /* .credit {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;
      padding-top: 0;
    } */
  }
  .advisory .aart li + li {
    margin-top: 60px;
  }
  .advisory .aart .credit {
    padding-top: 6px;
  }
  .advisory .aart .credit .words {
    display: block;
    transform: none;
    font-family: "meno-display", serif;
    font-style: normal;
    font-weight: 300;
    font-size: 54px;
    line-height: 0.98;
    writing-mode: initial;
  }
  .advisory .aart .credit p {
    font-size: 12px;
  }
}
@media screen and (max-width: 767px) and (min-width: 768px), screen and (max-height: 639px) and (min-width: 768px) {
  .advisory .aart {
    padding-top: 120px;
  }
  .advisory .aart ul {
    text-align: center;
  }
  .advisory .aart li {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }
  .advisory .aart li + li {
    margin-top: 80px;
  }
  .advisory .aart .image {
    padding: 0;
  }
  .advisory .aart .credit {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .advisory {
    position: relative;
    height: 100%;
    padding-left: 13.859vh;
    overflow: visible;
    white-space: nowrap;
  }
  .advisory .intro {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    position: relative;
    height: 100%;
    padding-left: 9.955vh;
  }
  .advisory .intro .paint {
    position: absolute;
    top: 0;
    left: 4.741vh;
    display: block;
    width: 100%;
    height: 76.939vh;
    /* width: 1307px;
    height: 714px; */
    background-image: url(../images/svg/paint-stroke.svg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    pointer-events: none;
    will-change: opacity, transform;
  }
  .advisory .intro .headline {
    position: relative;
    z-index: 2;
    min-width: 117.456vh;
  }
  .advisory .intro .headline .h1 {
    font-size: 13.146vh;
    line-height: 1.1803;
  }
  .advisory .intro .text {
    position: relative;
    z-index: 2;
    margin-left: 12.068vh;
    min-width: 378px;
    width: 40.732vh;
    padding-bottom: 41.162vh;
    white-space: normal;
  }
  .advisory .aart {
    height: 100%;
    margin-left: -4.094vh;
  }
  .advisory .aart ul {
    display: inline-flex;
    align-items: center;
    height: 100%;
  }
  .advisory .aart li {
    display: flex;
    position: relative;
  }
  .advisory .aart li img {
    max-height: 80vh;
    max-width: none;
  }
  .advisory .aart li.full {
    align-items: flex-end;
    height: 100%;
  }
  .advisory .aart li.full .image,
.advisory .aart li.full picture,
.advisory .aart li.full img {
    height: 100%;
    max-height: 100%;
  }
  .advisory .aart li.full .credit {
    display: flex;
    text-align: left;
  }
  .advisory .aart li.full .credit p {
    padding-top: 10px;
  }
  .advisory .aart li.name {
    align-items: center;
    padding-left: 20vh;
  }
  .advisory .aart li.name .image {
    display: inline-block;
    vertical-align: middle;
  }
  .advisory .aart li.name .credit {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
  }
  .advisory .aart li.name .words {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-right: -0.5em;
    max-height: 90vh;
  }
  .advisory .aart li.name .whitespace {
    height: 0.25em;
  }
  .advisory .aart li + li {
    margin-left: 25vh;
  }
  .advisory .aart li + li.name {
    margin-left: 10vh;
  }
  .advisory .aart .image {
    order: 2;
  }
  .advisory .aart .credit {
    order: 1;
    /* position: absolute;
    right: 100%;
    bottom: 0; */
  }
  .advisory .aart .credit p {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding-left: 4px;
    font-size: 10px;
  }
}

.collaborations .collabs .x {
  position: relative;
  z-index: 2;
  margin: 20px auto;
  width: 36px;
  height: 36px;
  overflow: hidden;
}
.collaborations .collabs .x .line {
  position: absolute;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background-color: #191919;
}
.collaborations .collabs .x .line:first-child {
  transform: rotate(45deg);
}
.collaborations .collabs .x .line:last-child {
  transform: rotate(-45deg);
}
.collaborations .collabs ul li .inner {
  background-color: #f2f1ed;
}
.collaborations .collabs ul li .inner .nf svg {
  width: 100%;
  max-width: 224px;
  height: auto;
}
.collaborations .collabs ul li .inner .logo {
  mix-blend-mode: multiply;
}
.collaborations .collabs ul li .text {
  margin-top: 30px;
}
.collaborations .collabs ul li .text .cta {
  margin-top: 50px;
}
.collaborations .collabs ul li .text .cta span {
  display: block;
}
.collaborations .collabs ul li .text .cta a {
  padding-left: 58px;
}
.collaborations .collabs ul li .text .cta a:before {
  z-index: 2;
  left: 0;
  margin-left: 0;
  width: 0;
  background-color: #B43934;
}
.collaborations .collabs ul li .text .cta a .dash {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 47px;
  height: 1px;
  background-color: #191919;
}
.collaborations .collabs ul li .text .cta a:hover:before {
  width: 47px;
}
@media (max-width: 767px), (max-height: 639px) {
  .collaborations .intro .headline br {
    display: none;
  }
  .collaborations .intro .text {
    padding-top: 40px;
  }
  .collaborations .intro .word {
    white-space: nowrap;
  }
  .collaborations .title {
    display: none;
  }
  .collaborations .collabs {
    position: relative;
  }
  .collaborations .collabs .bar {
    display: block;
    position: absolute;
    top: 100px;
    left: 50%;
    width: 1px;
    height: calc(100% - 100px);
    background-color: #000;
  }
  .collaborations .collabs .scroll {
    z-index: 2;
    padding-top: 60px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #fff;
  }
  .collaborations .collabs ul {
    position: relative;
    z-index: 2;
    padding-top: 80px;
  }
  .collaborations .collabs ul li + li {
    padding-top: 80px;
  }
  .collaborations .collabs ul .center {
    display: flex;
    flex-direction: column;
  }
  .collaborations .collabs ul .inner {
    order: 2;
    padding: 30px 20px;
  }
  .collaborations .collabs ul .image {
    order: 1;
  }
  .collaborations .collabs ul .image img {
    margin: auto;
  }
  .collaborations .collabs ul .logo img {
    margin: auto;
  }
}
@media screen and (max-width: 767px) and (min-width: 520px), screen and (max-height: 639px) and (min-width: 520px) {
  .collaborations .collabs {
    margin-bottom: 40px;
  }
  .collaborations .collabs ul .inner {
    padding: 50px 30px;
  }
}
@media screen and (max-width: 767px) and (min-width: 768px), screen and (max-height: 639px) and (min-width: 768px) {
  .collaborations .collabs {
    margin-bottom: 60px;
  }
  .collaborations .collabs ul li {
    margin: auto;
    max-width: 1200px;
  }
  .collaborations .collabs ul li + li {
    padding-top: 100px;
  }
  .collaborations .collabs ul li .center {
    flex-direction: row;
    align-items: center;
  }
  .collaborations .collabs ul li .inner {
    width: 45%;
  }
  .collaborations .collabs ul li .image {
    width: 55%;
  }
  .collaborations .collabs ul li .image img {
    width: 100%;
  }
  .collaborations .collabs ul li:nth-child(odd) .inner {
    order: 1;
  }
  .collaborations .collabs ul li:nth-child(odd) .image {
    order: 2;
  }
}
@media screen and (max-width: 767px) and (min-width: 1024px), screen and (max-height: 639px) and (min-width: 1024px) {
  .collaborations .collabs {
    margin-bottom: 100px;
  }
  .collaborations .collabs ul .inner {
    padding: 80px;
  }
}
@media screen and (max-width: 767px) and (min-width: 1200px), screen and (max-height: 639px) and (min-width: 1200px) {
  .collaborations .collabs ul .inner {
    padding: 100px 120px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .collaborations {
    position: relative;
    height: 100%;
    padding-left: 13.859vh;
    overflow: visible;
    white-space: nowrap;
  }
  .collaborations .intro {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: top;
    position: relative;
    max-width: 50.639vh;
    height: 100%;
    white-space: normal;
  }
  .collaborations .intro .headline {
    order: 2;
    margin-top: 40px;
  }
  .collaborations .intro .text {
    order: 1;
  }
  .collaborations .collabs {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    position: relative;
    height: 100%;
    font-size: 0;
    white-space: nowrap;
  }
  .collaborations .collabs:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .collaborations .collabs .bar {
    display: block;
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
  }
  .collaborations .collabs .scroll {
    display: inline-block;
    vertical-align: middle;
    z-index: 2;
    text-align: center;
  }
  .collaborations .collabs .scroll a {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 2;
    display: block;
    padding-right: 40px;
    padding-left: 5px;
    font-size: 38px;
    line-height: 1;
    cursor: text;
    background-color: #fff;
  }
  .collaborations .collabs ul {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    position: relative;
    height: 100%;
    padding-left: 47px;
    z-index: 2;
  }
  .collaborations .collabs ul li {
    height: 100%;
  }
  .collaborations .collabs ul li + li {
    margin-left: 26.93vh;
  }
  .collaborations .collabs ul li .center {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: 100%;
  }
  .collaborations .collabs ul li .inner {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 490px;
    height: calc(100% - 10.774vh);
  }
  .collaborations .collabs ul li .upper {
    width: 100%;
  }
  .collaborations .collabs ul li .nf,
.collaborations .collabs ul li .logo {
    margin: auto;
  }
  .collaborations .collabs ul li .nf {
    width: 80%;
  }
  .collaborations .collabs ul li .logo {
    max-width: 80%;
    height: 160px;
  }
  .collaborations .collabs ul li .logo picture {
    height: 100%;
  }
  .collaborations .collabs ul li .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
  }
  .collaborations .collabs ul li .text {
    padding-left: 100px;
    padding-right: 100px;
    white-space: normal;
  }
  .collaborations .collabs ul li .image {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .collaborations .collabs ul li .image picture,
.collaborations .collabs ul li .image img {
    height: 100%;
  }
  .collaborations .collabs ul li .image img {
    max-width: none;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (max-height: 679px) {
  .collaborations .collabs ul li .inner {
    flex-direction: row;
    width: 750px;
  }
  .collaborations .collabs ul li .upper,
.collaborations .collabs ul li .text {
    width: 50%;
  }
  .collaborations .collabs ul li .upper {
    padding-left: 30px;
  }
  .collaborations .collabs ul li .logo {
    max-width: none;
  }
  .collaborations .collabs ul li .text {
    padding-left: 30px;
    padding-right: 80px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-height: 680px) and (max-height: 767px) {
  .collaborations .collabs ul li .x {
    margin: 12px auto;
    width: 32px;
    height: 32px;
  }
  .collaborations .collabs ul li .text .cta {
    margin-top: 20px;
  }
}

.contact {
  padding-top: 130px;
  background-color: #F8F6F4;
}
@media screen and (min-width: 1180px) {
  .contact {
    padding-top: 220px;
  }
}
.contact .intro {
  position: relative;
  z-index: 2;
}
.contact .intro .image {
  margin-top: 60px;
}
@media screen and (min-width: 768px) {
  .contact .intro .center {
    display: flex;
  }
  .contact .intro .text {
    width: 60%;
    padding-right: 40px;
    padding-bottom: 160px;
  }
  .contact .intro .image {
    align-self: flex-end;
    width: 40%;
  }
}
@media screen and (min-width: 1180px) {
  .contact .intro .text {
    max-width: 633px;
    padding-right: 80px;
  }
  .contact .intro .image {
    flex: 1;
    margin-top: 110px;
  }
}
@media screen and (min-width: 1200px) {
  .contact .intro .center {
    padding-left: 120px;
    padding-right: 120px;
  }
}
@media screen and (min-width: 1440px) {
  .contact .intro .text {
    padding-right: 140px;
  }
}
.contact .content {
  position: relative;
  padding-top: 70px;
  padding-bottom: 80px;
  background-color: #fff;
}
.contact .content .center:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 100%;
  height: 290px;
  background-color: #fff;
}
.contact .content .body a {
  display: inline-block;
}
.contact .content .body a ~ a {
  margin-top: 10px;
}
.contact .content .body span {
  display: block;
}
.contact .content .body br {
  display: none;
}
.contact .content .visit {
  margin-top: 40px;
}
.contact .content .visit h2 + p {
  margin-top: 15px;
}
.contact .content .connect {
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .contact .content {
    padding-bottom: 120px;
  }
  .contact .content .center:before {
    height: 80px;
  }
  .contact .content .wrap {
    display: flex;
    flex-wrap: wrap;
  }
  .contact .content .body {
    width: 100%;
  }
  .contact .content .body p + p {
    margin-top: 0.5em;
  }
  .contact .content .body a ~ a {
    margin-top: 0;
  }
  .contact .content .body span {
    display: inline;
  }
  .contact .content .body br {
    display: inline;
  }
  .contact .content .visit,
.contact .content .connect {
    margin-top: 50px;
    width: 50%;
  }
}
@media screen and (min-width: 1180px) {
  .contact .content {
    margin-top: -100px;
    background-color: transparent;
    padding: 0;
  }
  .contact .content .center {
    position: relative;
    padding: 160px 160px 170px;
  }
  .contact .content .center:before {
    right: 240px;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .contact .content .wrap {
    position: relative;
    z-index: 2;
    max-width: 740px;
  }
}
@media screen and (min-width: 1280px) {
  .contact .content {
    margin-top: -160px;
  }
}
@media screen and (min-width: 1440px) {
  .contact .content {
    margin-top: -215px;
  }
}
.contact .instagram {
  padding-top: 160px;
  padding-bottom: 120px;
}
@media screen and (min-width: 1200px) {
  .contact .instagram {
    padding-top: 170px;
    padding-bottom: 170px;
  }
  .contact .instagram .center {
    padding-left: 120px;
    padding-right: 120px;
  }
}

.home {
  /* .more {
    em {
      color: $cred;
    }
  }

  .trending {
    .title {
      em {
        color: $cred;

        ~ em {
          color: inherit;
        }
      }
    }
  } */
}
@media (max-width: 767px), (max-height: 639px) {
  .home .intro {
    position: relative;
    padding-top: 130px;
  }
  .home .intro .ampersand {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% - 25px);
    background-image: url(../images/svg/ampersand.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    opacity: 0.09;
    pointer-events: none;
  }
  .home .intro .headline {
    text-align: center;
  }
  .home .intro .headline h1 {
    display: inline-block;
    text-align: left;
  }
  .home .intro .headline h1 .word {
    white-space: nowrap;
  }
  .home .intro .text {
    padding-top: 60px;
  }
  .home .intro .text .scroll {
    position: relative;
    padding-bottom: 90px;
    text-align: center;
  }
  .home .intro .text .scroll:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    background-color: #000;
  }
  .home .intro .text .body {
    padding-top: 14px;
  }
}
@media screen and (max-width: 767px) and (min-width: 540px), screen and (max-height: 639px) and (min-width: 540px) {
  .home .intro {
    padding-bottom: 50px;
  }
  .home .intro:before {
    height: 100%;
    background-size: 125% auto;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .home .more {
    padding-top: 50px;
    padding-bottom: 96px;
  }
  .home .more .image {
    position: relative;
    z-index: 2;
  }
  .home .more .text {
    position: relative;
    padding-top: 100px;
    padding-bottom: 120px;
    text-align: center;
  }
  .home .more .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% + 140px);
    background-image: url(../images/svg/ampersand.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    opacity: 0.09;
    pointer-events: none;
  }
  .home .more .text h2 {
    display: inline-block;
    text-align: left;
  }
}
@media screen and (max-width: 767px) and (min-width: 540px), screen and (max-height: 639px) and (min-width: 540px) {
  .home .more {
    padding-top: 0;
  }
  .home .more .text:before {
    height: 100%;
    background-size: 125% auto;
    background-position: center bottom;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .home .hPortfolio {
    padding-bottom: 100px;
  }
  .home .hPortfolio .title .words {
    margin-top: -1.2em;
    margin-left: -0.075em;
  }
  .home .hPortfolio .text {
    padding-top: 26px;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .home .hArtAdvisory {
    padding-bottom: 140px;
  }
  .home .hArtAdvisory .title {
    position: relative;
    z-index: 2;
    text-align: right;
  }
  .home .hArtAdvisory .title .sieways {
    word-spacing: 100vw;
  }
  .home .hArtAdvisory .title .words {
    margin-bottom: -0.75em;
    height: min-content;
    text-align: center;
  }
  .home .hArtAdvisory .title .words .word {
    white-space: nowrap;
  }
  .home .hArtAdvisory .text {
    padding-top: 50px;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .home .hStudio {
    padding-bottom: 120px;
  }
  .home .hStudio .title .words {
    display: block;
    margin-top: -0.5em;
  }
  .home .hStudio .text {
    padding-top: 40px;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .home .trending {
    padding-bottom: 90px;
  }
  .home .trending .title {
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .home .trending .title h2 {
    font-size: 120px;
    line-height: 96px;
    color: #B43934;
  }
  .home .trending .title h2 .words {
    margin-left: 0.25em;
    line-height: 0.8;
    white-space: nowrap;
  }
  .home .trending .title h2 .words span {
    /* display: block;
    white-space: nowrap; */
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .home .hArticles {
    margin-top: 50px;
  }
  .home .hArticles li {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .home .hArticles li:first-child {
    padding-top: 0;
  }
  .home .hArticles li:last-child {
    padding-bottom: 0;
  }
  .home .hArticles li a {
    display: block;
    margin: auto;
    max-width: 280px;
    pointer-events: none;
  }
  .home .hArticles li a .image,
.home .hArticles li a .label,
.home .hArticles li a .cta span {
    pointer-events: all;
  }
  .home .hArticles li .image {
    position: relative;
  }
  .home .hArticles li .image:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 131%;
  }
  .home .hArticles li .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .home .hArticles li .text {
    padding-top: 30px;
  }
}
@media screen and (max-width: 767px) and (min-width: 600px), screen and (max-height: 639px) and (min-width: 600px) {
  .home .hArticles ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
    row-gap: 80px;
    padding: 0 44px;
  }
  .home .hArticles li {
    padding: 0;
  }
  .home .hArticles li .center {
    padding: 0;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .home {
    position: relative;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .home .intro {
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 2;
    height: 100%;
    min-width: 142vh;
    white-space: nowrap;
    overflow: visible;
  }
  .home .intro .ampersand {
    position: absolute;
    top: 0;
    left: 30.81vh;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/svg/ampersand.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto 110%;
    opacity: 0.09;
    pointer-events: none;
    will-change: opacity, filter, transform;
  }
  .home .intro .headline {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    padding-left: 15.08vh;
    padding-right: 16.16vh;
    white-space: nowrap;
    will-change: transform;
  }
  .home .intro .headline:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .home .intro .headline .center {
    display: inline-block;
    vertical-align: middle;
  }
  .home .intro .text {
    position: absolute;
    bottom: 12.93vh;
    right: -3.44vh;
    width: 33.4vh;
    min-width: 310px;
    white-space: normal;
    will-change: transform;
  }
  .home .intro .scroll {
    position: fixed;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
    padding-right: 90px;
  }
  .home .intro .scroll:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 50%;
    right: 0;
    width: 80px;
    height: 1px;
    background-color: #000;
  }
  .home .intro .scroll a {
    position: absolute;
    top: 50%;
    right: 90px;
    transform: rotate(-90deg) translateX(75%) translateY(-50%);
    transform-origin: right;
    display: block;
    font-size: 38px;
    line-height: 1;
  }
  .home .more {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    white-space: nowrap;
  }
  .home .more .image {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    white-space: nowrap;
  }
  .home .more .image img {
    height: 100vh;
    max-width: none;
  }
  .home .more .text {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    height: 100%;
    /* margin-left: -9.69vh;
    margin-left: -4.845vh; */
    padding-right: 9.69vh;
    white-space: nowrap;
    will-change: transform;
  }
  .home .more .text:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .home .more .text .center {
    display: inline-block;
    vertical-align: middle;
  }
  .home .hPortfolio {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    white-space: nowrap;
  }
  .home .hPortfolio .image {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .home .hPortfolio .image img {
    height: 100vh;
    max-width: none;
  }
  .home .hPortfolio .title {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    will-change: transform;
  }
  .home .hPortfolio .title .words {
    display: block;
    margin-left: -0.5em;
  }
  .home .hPortfolio .text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.5vh;
    padding-right: 18.53vh;
  }
  .home .hPortfolio .text .body {
    width: 33.4vh;
    min-width: 300px;
    white-space: normal;
  }
  .home .hArtAdvisory {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    white-space: nowrap;
  }
  .home .hArtAdvisory .image {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .home .hArtAdvisory .image img {
    height: 100vh;
    max-width: none;
  }
  .home .hArtAdvisory .title {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    will-change: transform;
  }
  .home .hArtAdvisory .title .words {
    display: block;
    margin-right: -0.5em;
    white-space: nowrap;
  }
  .home .hArtAdvisory .text {
    display: inline-block;
    vertical-align: middle;
    align-self: flex-start;
    margin-left: 6.25vh;
    padding-right: 18.53vh;
    padding-top: 21.55vh;
  }
  .home .hArtAdvisory .text .body {
    width: 33.4vh;
    min-width: 300px;
    white-space: normal;
  }
  .home .hStudio {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-right: 16.81vh;
  }
  .home .hStudio .image {
    height: 66.66vh;
    /* @media (min-height: 800px) {
      height: 72.84vh;
    } */
  }
  .home .hStudio .image picture {
    height: 100%;
  }
  .home .hStudio .image img {
    height: 100%;
    max-width: none;
  }
  .home .hStudio .title .sideways {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    text-align: center;
  }
  .home .hStudio .title h2 {
    margin-top: -0.5em;
  }
  .home .hStudio .title .words {
    display: block;
    margin-left: -0.5em;
  }
  .home .hStudio .title .word {
    will-change: transform;
  }
  .home .hStudio .text {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    width: 44.71vh;
    padding-bottom: 1.5vh;
    white-space: normal;
    overflow: hidden;
    /* padding-top: 6.25vh;
    padding-bottom: 7.75vh; */
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (max-height: 800px) {
  .home .hStudio .text {
    width: 60vh;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .home .trending {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    white-space: nowrap;
  }
  .home .trending:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .home .trending .title {
    display: inline-block;
    vertical-align: middle;
  }
  .home .trending .title .sideways {
    left: 25vw;
  }
  .home .trending .title .sideways .words {
    display: block;
    text-align: center;
    will-change: transform;
  }
  .home .trending .title .sideways em {
    display: inline-block;
  }
  .home .trending .hArticles {
    display: inline-block;
    vertical-align: middle;
    padding-left: 12.931vh;
  }
  .home .trending .hArticles ul {
    display: flex;
  }
  .home .trending .hArticles li {
    width: 30.17vh;
    min-width: 280px;
  }
  .home .trending .hArticles li + li {
    margin-left: 12.931vh;
  }
  .home .trending .hArticles a {
    display: block;
    pointer-events: none;
  }
  .home .trending .hArticles a .image,
.home .trending .hArticles a .label,
.home .trending .hArticles a .cta span {
    pointer-events: all;
  }
  .home .trending .hArticles .image {
    position: relative;
  }
  .home .trending .hArticles .image:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 131%;
  }
  .home .trending .hArticles .image picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .home .trending .hArticles .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .home .trending .hArticles .text {
    padding-top: 30px;
    white-space: normal;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .home .hArtAdvisory,
.home .hStudio,
.home .trending {
    position: relative;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .home .footergap {
    padding-left: 19.827vh;
  }
}

.splash {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* .graphic {
    width: 100%;
    height: 100%;
    background-image: url(../images/svg/splash.svg);
    background-size: 200% 100%;
    background-repeat: no-repeat;
  } */
  display: flex;
  flex-direction: column;
}
.splash .left,
.splash .right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #191919;
  background-color: #B43934;
  overflow: hidden;
}
.splash .left {
  left: 0;
  padding: 30px 0 30px 25px;
}
.splash .left .graphic {
  transform-origin: right;
  background-position: left center;
}
.splash .left .wipe {
  right: 0;
}
.splash .right {
  right: 0;
  padding: 30px 25px 30px 0;
}
.splash .right .graphic {
  transform-origin: left;
  background-position: right center;
}
.splash .right .wipe {
  left: 0;
}
.splash .wipe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #B43934;
  background-color: #191919;
}
.splash .line {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 0;
  height: 50%;
  border-bottom: 1px solid #B43934;
}
.splash .bg {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px 25px;
  background-color: #fff;
  background-color: #B43934;
}
.splash .graphic {
  position: relative;
  width: 100%;
  height: 100%;
}
.splash .graphic svg {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 200%;
}
.splash .graphic svg path {
  opacity: 0;
}
.splash .top,
.splash .bottom {
  position: relative;
  height: 50%;
  width: 100%;
  overflow: hidden;
  background-color: #B43934;
}
.splash .top {
  padding: 30px 25px 0;
}
.splash .top .graphic svg {
  top: 0;
}
.splash .bottom {
  padding: 0 25px 30px;
}
.splash .bottom .graphic svg {
  bottom: 0;
}

.portfolio .pproducts ul li .image {
  margin: auto;
  max-width: 360px;
}
.portfolio .pproducts ul li.tall .image {
  max-width: none;
}
@media (max-width: 767px), (max-height: 639px) {
  .portfolio {
    /* .intro {
      position: relative;
      padding-top: 130px;

      .title {
        h1 {
          display: none;
          @include meno-light;
          font-size: 104px;
          line-height: 1.0;
        }
      }
    } */
  }
  .portfolio .pprojects {
    padding-top: 30px;
    padding-bottom: 60px;
  }
  .portfolio .pprojects ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .portfolio .pprojects ul li {
    display: inline-flex;
    overflow: hidden;
  }
  .portfolio .pprojects ul li .label {
    display: none;
  }
  .portfolio .pprojects ul li .body {
    margin-top: 0.5em;
  }
  .portfolio .pprojects ul li a {
    display: block;
    pointer-events: none;
  }
  .portfolio .pprojects ul li a img,
.portfolio .pprojects ul li a h2 {
    pointer-events: all;
  }
  .portfolio .pprojects ul li a .cta span {
    pointer-events: all;
  }
  .portfolio .pprojects ul li.wide .image {
    display: flex;
    justify-content: center;
  }
  .portfolio .pprojects ul li.wide img {
    height: 40vh;
    width: auto;
    max-width: none;
    margin: auto;
  }
  .portfolio .pprojects ul li .text {
    margin-top: 20px;
    max-width: 400px;
  }
  .portfolio .pprojects ul li ~ li {
    padding-top: 60px;
  }
}
@media screen and (max-width: 767px) and (min-width: 768px), screen and (max-height: 639px) and (min-width: 768px) {
  .portfolio .pprojects ul li.wide img {
    height: auto;
    max-width: 100%;
  }
  .portfolio .pprojects ul li.wide .text {
    margin-left: auto;
    margin-right: 0;
  }
  .portfolio .pprojects ul li .text {
    margin-left: 0;
  }
  .portfolio .pprojects ul li ~ li {
    padding-top: 80px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .portfolio {
    position: relative;
    height: 100%;
    overflow: visible;
    white-space: nowrap;
  }
  .portfolio .intro {
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 3;
    left: 0;
    bottom: 0;
    height: 100%;
  }
  .portfolio .intro .title {
    left: 0;
    right: auto;
    pointer-events: none;
  }
  .portfolio .pprojects {
    display: inline-block;
    vertical-align: top;
    height: 100%;
  }
  .portfolio .pprojects ul {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .portfolio .pprojects ul li {
    position: relative;
  }
  .portfolio .pprojects ul li a:hover h2 {
    color: var(--hover-color);
  }
  .portfolio .pprojects ul li:nth-child(4n+1) a {
    --hover-color: #ED7A4A;
  }
  .portfolio .pprojects ul li:nth-child(4n+2) a {
    --hover-color: #613665;
  }
  .portfolio .pprojects ul li:nth-child(4n+3) a {
    --hover-color: #D96F87;
  }
  .portfolio .pprojects ul li:nth-child(4n+4) a {
    --hover-color: #742D49;
  }
  .portfolio .pprojects ul li a {
    display: block;
    pointer-events: none;
  }
  .portfolio .pprojects ul li a picture {
    overflow: visible;
    transition: 1s;
  }
  .portfolio .pprojects ul li a .imageBox {
    overflow: hidden;
  }
  .portfolio .pprojects ul li a .image {
    will-change: opacity;
  }
  .portfolio .pprojects ul li a img,
.portfolio .pprojects ul li a h2 {
    pointer-events: all;
  }
  .portfolio .pprojects ul li a h2 {
    transition: 0.35s;
  }
  .portfolio .pprojects ul li a img {
    will-change: transform;
  }
  .portfolio .pprojects ul li a .label,
.portfolio .pprojects ul li a .body,
.portfolio .pprojects ul li a .cta {
    will-change: opacity, transform;
  }
  .portfolio .pprojects ul li a .cta span {
    pointer-events: all;
  }
  .portfolio .pprojects ul li a:hover picture {
    transform: scale(1.025);
  }
  .portfolio .pprojects ul li img {
    object-fit: cover;
    max-width: none;
  }
  .portfolio .pprojects ul li .text {
    white-space: normal;
  }
  .portfolio .pprojects ul li.square {
    align-self: flex-start;
  }
  .portfolio .pprojects ul li.square .image {
    padding-right: 24vh;
  }
  .portfolio .pprojects ul li.square img {
    width: 65vh;
    height: 65vh;
  }
  .portfolio .pprojects ul li.square .text {
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-top: -5em;
    float: right;
  }
  .portfolio .pprojects ul li.tall {
    height: 100%;
  }
  .portfolio .pprojects ul li.tall .image {
    padding-right: 300px;
  }
  .portfolio .pprojects ul li.tall img {
    height: 100vh;
    width: auto;
  }
  .portfolio .pprojects ul li.tall .text {
    position: absolute;
    top: 27.262vh;
    right: 0;
  }
  .portfolio .pprojects ul li.wide img {
    height: 43.857vh;
    width: auto;
  }
  .portfolio .pprojects ul li.wide .text {
    margin-right: 17.543%;
    margin-left: auto;
    margin-top: -4.5em;
  }
  .portfolio .pprojects ul li ~ li {
    margin-left: 30vh;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-height: 820px) {
  .portfolio .pprojects ul li.square .image {
    padding-right: 17.241vh;
  }
  .portfolio .pprojects ul li.tall .image {
    padding-right: 300px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .portfolio .pprojects ul .text {
    text-align: right;
    /* .body {
      width: 81.25%;
    } */
  }
  .portfolio .pprojects ul .text .label,
.portfolio .pprojects ul .text .body,
.portfolio .pprojects ul .text .cta {
    margin-left: auto;
    min-width: 320px;
    width: 34.482vh;
    text-align: left;
  }
  .portfolio .pprojects ul .text h2 {
    display: inline-block;
    min-width: 320px;
    margin-left: auto;
    text-align: left;
    font-size: 72px;
    line-height: 1.444;
    white-space: nowrap;
  }
}

.press .articles ul li .center {
  text-align: center;
}
.press .articles ul li .inner {
  display: inline-block;
  position: relative;
}
.press .articles ul li .image {
  margin: auto;
  max-width: 360px;
  box-shadow: 0 2px 17px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.press .articles ul li .image picture {
  background-color: #fff;
}
.press .articles ul li .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  background-color: rgba(205, 196, 181, 0.9);
  white-space: normal;
  opacity: 0;
}
.press .articles ul li .text .label + .h2 {
  margin-top: 0.25em;
}
.press .articles ul li .text .h2 {
  font-size: 24px;
}
.press .articles ul li .hidden {
  display: none;
}
.press ~ .fslightbox-container .fslightbox-slide-number-container {
  padding-left: 24px;
  font-family: "meno-display", serif;
  font-style: normal;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-weight: 300;
}
.press ~ .fslightbox-container .fslightbox-slide-number-container:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 0;
  width: 16px;
  height: 1px;
  background-color: #d7d7d7;
}
.press ~ .fslightbox-container .fslightbox-slide-number-container .fslightbox-slash {
  margin: 0;
  width: auto;
  height: auto;
  transform: none;
  background: transparent;
}
.press ~ .fslightbox-container .fslightbox-slide-number-container .fslightbox-slash:before {
  content: "/";
  padding-right: 0.25em;
  padding-left: 0.25em;
}
.press ~ .fslightbox-container .fslightbox-toolbar,
.press ~ .fslightbox-container .fslightbox-slide-btn {
  background-color: rgba(205, 196, 181, 0.56);
}
.press ~ .fslightbox-container .fslightbox-slide-btn-container-next {
  padding-right: 0;
}
.press ~ .fslightbox-container .fslightbox-slide-btn-container-previous {
  padding-left: 0;
}
@media (max-width: 767px), (max-height: 639px) {
  .press .intro .headline br {
    display: none;
  }
  .press .intro .text {
    padding-top: 40px;
  }
  .press .articles {
    position: relative;
  }
  .press .articles .bar {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: calc(100% - 100px);
    background-color: #000;
  }
  .press .articles .scroll {
    position: relative;
    z-index: 2;
    padding-top: 60px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #fff;
  }
  .press .articles ul {
    position: relative;
    z-index: 2;
    padding-top: 80px;
  }
  .press .articles ul li + li {
    padding-top: 40px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .press {
    position: relative;
    height: 100%;
    padding-left: 13.859vh;
    overflow: visible;
    white-space: nowrap;
  }
  .press .intro {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: top;
    position: relative;
    max-width: 50.639vh;
    height: 100%;
    white-space: normal;
  }
  .press .intro .headline {
    order: 2;
    margin-top: 40px;
  }
  .press .intro .text {
    order: 1;
  }
  .press .articles {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    height: 100%;
    font-size: 0;
    white-space: nowrap;
  }
  .press .articles:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .press .articles .bar {
    display: block;
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
  }
  .press .articles .scroll {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    padding-left: 40px;
    padding-right: 5px;
    text-align: center;
    background-color: #fff;
  }
  .press .articles .scroll a {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: block;
    font-size: 38px;
    line-height: 1;
  }
  .press .articles ul {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    width: 10000vw;
    padding-left: 50px;
    padding-top: 40px;
    /* li {
      .image {
        // width: 360px;
        height: 360px;
        max-width: none;
      }

      a {
        picture {
          transition: 1s;
        }

        &:hover {
          picture {
            transform: scale(1.025);
          }
        }
      }

      picture {
        height: 100%;
        background: #fff;
        // overflow: hidden;
        overflow: visible;
      }

      img {
        max-height: 100%;
        // width: 100%;
        max-width: none;
        box-shadow: 0 2px 17px rgba(0, 0, 0, .3);
      }

      + li {
        margin-left: 40px;
      }
    } */
  }
  .press .articles ul li {
    margin-bottom: 40px;
  }
  .press .articles ul li .image {
    height: 40vh;
    max-width: none;
  }
  .press .articles ul li .bar {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 0;
    height: 20px;
    background-color: #191919;
  }
  .press .articles ul li.ignore .bar {
    top: auto;
    bottom: 100%;
  }
  .press .articles ul li.ignore:first-child .bar {
    top: 100%;
    bottom: auto;
  }
  .press .articles ul li.ignore:first-child ~ li .bar {
    top: auto;
    bottom: 100%;
  }
  .press .articles ul li.ignore:first-child ~ li.ignore .bar {
    top: 100%;
    bottom: auto;
  }
  .press .articles ul li a picture {
    transition: 1s;
  }
  .press .articles ul li a .text {
    transition: 0.5s;
  }
  .press .articles ul li a .text .label,
.press .articles ul li a .text .h2 {
    transform: translateY(20px);
    opacity: 0;
    transition: 0.35s;
  }
  .press .articles ul li a:hover picture {
    transform: scale(1.025);
  }
  .press .articles ul li a:hover .text {
    opacity: 1;
  }
  .press .articles ul li a:hover .text .label,
.press .articles ul li a:hover .text .h2 {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
  }
  .press .articles ul li a:hover .text .label + .h2 {
    transition-delay: 0.165s;
  }
  .press .articles ul li picture {
    height: 100%;
    background: #fff;
    overflow: visible;
  }
  .press .articles ul li img {
    height: 100%;
    width: auto;
    box-shadow: 0 2px 17px rgba(0, 0, 0, 0.3);
  }
  .press .articles ul li + li {
    padding-left: 40px;
  }
}

.product .intro .a {
  color: #B43934;
  text-transform: uppercase;
}
.product .intro p + p {
  margin-top: 2em;
}
.product .details .text {
  padding: 44px 0 88px;
  background-color: rgba(205, 196, 181, 0.56);
}
.product .details .block {
  color: #3F3F3F;
}
.product .details .block strong {
  display: block;
  color: #B43934;
}
.product .details .block + .block {
  margin-top: 2em;
}
@media (max-width: 767px), (max-height: 639px) {
  .product .intro {
    position: relative;
    padding-top: 130px;
  }
  .product .intro .cta {
    position: relative;
  }
  .product .intro .return {
    margin-top: -20px;
    margin-bottom: 40px;
  }
  .product .intro .return .bar {
    position: absolute;
    top: 50%;
    margin-top: -1px;
    margin-right: 8px;
    right: 100%;
    width: 24px;
    height: 1px;
    background-color: #191919;
  }
  .product .intro .return a {
    color: #191919;
  }
  .product .intro .return a:before {
    left: auto;
    right: 100%;
    margin-right: 13px;
    margin-top: -1px;
    margin-left: 0;
  }
  .product .intro .return a:hover:before {
    width: 47px;
  }
  .product .intro .title h1 {
    display: none;
    font-family: "meno-display", serif;
    font-style: normal;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-weight: 300;
    font-size: 104px;
    line-height: 1;
  }
  .product .intro .headline br {
    display: none;
  }
  .product .intro .text {
    padding-top: 40px;
  }
  .product .featuredImage {
    padding-top: 60px;
  }
  .product .featuredImage .scroll {
    position: relative;
    padding-bottom: 90px;
    text-align: center;
  }
  .product .featuredImage .scroll .bar {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    background-color: #000;
  }
  .product .featuredImage img {
    margin: auto;
  }
  .product .details,
.product .gallery {
    margin-top: 60px;
  }
  .product .gallery ul + ul {
    margin-top: 40px;
  }
  .product .gallery li + li {
    margin-top: 40px;
  }
  .product .gallery img {
    margin: auto;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .product {
    position: relative;
    height: 100%;
    padding-left: 13.859vh;
    overflow: visible;
    white-space: nowrap;
  }
  .product .intro {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: top;
    position: relative;
    width: 40.948vh;
    min-width: 400px;
    height: 100%;
  }
  .product .intro .text {
    margin-top: 20px;
  }
  .product .intro .headline .word {
    white-space: nowrap;
  }
  .product .intro .headline,
.product .intro .text {
    white-space: normal;
  }
  .product .intro .return {
    position: absolute;
    bottom: 5.387vh;
    left: 0;
  }
  .product .intro .return .cta {
    position: relative;
    padding-left: 60px;
    font-size: 20px;
  }
  .product .intro .return .cta .bar {
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 0;
    width: 47px;
    height: 1px;
    background-color: #191919;
  }
  .product .intro .return .cta a:before {
    left: auto;
    right: 100%;
    margin-right: 13px;
    margin-top: -1px;
    margin-left: 0;
  }
  .product .intro .return .cta a:hover:before {
    width: 47px;
  }
  .product .featuredImage {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    position: relative;
    height: 100%;
  }
  .product .featuredImage .scroll {
    position: relative;
    z-index: 2;
    padding-left: 14.547vh;
    padding-right: 60px;
    text-align: center;
    background-color: #fff;
  }
  .product .featuredImage .scroll a {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: block;
    font-size: 38px;
    line-height: 1;
  }
  .product .featuredImage .scroll .bar {
    content: "";
    display: block;
    position: absolute;
    bottom: 50%;
    right: 0;
    width: 47px;
    height: 1px;
    background-color: #000;
  }
  .product .featuredImage img {
    height: 100vh;
    width: auto;
    max-width: none;
  }
  .product .details,
.product .gallery {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    height: 100%;
    white-space: nowrap;
    height: 100%;
    padding-left: 12.284vh;
  }
  .product .details:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .product .details .center {
    display: inline-block;
    vertical-align: middle;
  }
  .product .details .text {
    margin-top: 2.156vh;
    width: 46.336vh;
    min-width: 430px;
    padding: 7.543vh 7.543vh 11.853vh 5.387vh;
    white-space: normal;
  }
  .product .details .title + p {
    margin-top: 0;
  }
  .product .gallery .images {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
  }
  .product .gallery ul {
    display: inline-flex;
    height: 50%;
  }
  .product .gallery ul:first-child {
    padding-bottom: 3.448vh;
  }
  .product .gallery ul:first-child:last-child {
    height: 85%;
  }
  .product .gallery ul:last-child {
    padding-top: 3.448vh;
  }
  .product .gallery li {
    display: inline-flex;
    height: 100%;
  }
  .product .gallery li + li {
    margin-left: 6.896vh;
  }
  .product .gallery .image,
.product .gallery picture,
.product .gallery img {
    height: 100%;
  }
  .product .gallery img {
    width: auto;
    max-width: none;
  }
}

.products .pproducts ul li .center {
  text-align: center;
}
.products .pproducts ul li .inner {
  display: inline-block;
  position: relative;
}
.products .pproducts ul li .image {
  margin: auto;
  max-width: 360px;
}
.products .pproducts ul li .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  background-color: rgba(205, 196, 181, 0.9);
  white-space: normal;
  opacity: 0;
}
.products .pproducts ul li .text .h2 {
  font-size: 48px;
  font-style: italic;
}
.products .pproducts ul li.tall .image {
  max-width: none;
}
@media (max-width: 767px), (max-height: 639px) {
  .products .intro .headline br {
    display: none;
  }
  .products .intro .text {
    padding-top: 40px;
  }
  .products .title {
    margin-top: 40px;
  }
  .products .pproducts {
    padding-top: 60px;
  }
  .products .pproducts .scroll {
    position: relative;
    padding-bottom: 90px;
    text-align: center;
  }
  .products .pproducts .scroll .bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    background-color: #000;
  }
  .products .pproducts ul {
    position: relative;
    z-index: 2;
  }
  .products .pproducts ul li {
    text-align: center;
  }
  .products .pproducts ul li .center {
    display: flex;
    flex-direction: column;
  }
  .products .pproducts ul li .center .quote {
    order: 2;
  }
  .products .pproducts ul li + li {
    padding-top: 40px;
  }
  .products .pproducts .quote {
    background-color: rgba(205, 196, 181, 0.56);
    padding: 30px 20px;
    text-align: center;
  }
  .products .pproducts .quote .h2 {
    color: #B43934;
  }
  .products .pproducts .quote .h2 .word:first-child {
    position: relative;
  }
  .products .pproducts .quote .h2 .word:first-child:before {
    content: "“";
    position: absolute;
    top: 0;
    right: 100%;
  }
  .products .pproducts .quote .h2 .word:last-child {
    position: relative;
  }
  .products .pproducts .quote .h2 .word:last-child:after {
    content: "”";
    position: absolute;
    top: 0;
    left: 100%;
  }
  .products .pproducts .quote .h2 + .label {
    margin-top: 2em;
  }
}
@media screen and (max-width: 767px) and (min-width: 480px), screen and (max-height: 639px) and (min-width: 480px) {
  .products .pproducts .quote {
    padding: 50px 40px;
  }
}
@media screen and (max-width: 767px) and (min-width: 640px), screen and (max-height: 639px) and (min-width: 640px) {
  .products .pproducts .quote {
    padding: 60px 50px;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .products .pproducts a {
    display: inline-block;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .products .pproducts img {
    margin: auto;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .products {
    position: relative;
    height: 100%;
    padding-left: 13.859vh;
    overflow: visible;
    white-space: nowrap;
  }
  .products .intro {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: top;
    position: relative;
    max-width: 50.639vh;
    height: 100%;
    white-space: normal;
  }
  .products .intro .text {
    margin-top: 40px;
  }
  .products .pproducts {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    height: 100%;
    white-space: nowrap;
  }
  .products .pproducts:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .products .pproducts .bar {
    display: block;
    position: absolute;
    bottom: 50%;
    right: 0;
    width: 50px;
    height: 1px;
    background-color: #000;
  }
  .products .pproducts .scroll {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    padding-left: 40px;
    padding-right: 60px;
    text-align: center;
    background-color: #fff;
  }
  .products .pproducts .scroll a {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: block;
    font-size: 38px;
    line-height: 1;
  }
  .products .pproducts .scroll:before {
    content: "";
  }
  .products .pproducts ul {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    position: relative;
    z-index: 2;
  }
  .products .pproducts ul li a picture {
    transition: 1s;
  }
  .products .pproducts ul li a .text {
    transition: 0.5s;
  }
  .products .pproducts ul li a .text .h2 {
    transform: translateY(20px);
    opacity: 0;
    transition: 0.35s;
  }
  .products .pproducts ul li a:hover picture {
    transform: scale(1.025);
  }
  .products .pproducts ul li a:hover .text {
    opacity: 1;
  }
  .products .pproducts ul li a:hover .text .h2 {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
  }
  .products .pproducts ul li .center {
    display: flex;
    align-items: center;
  }
  .products .pproducts ul li .quote {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100vw;
    height: 100%;
    max-width: 740px;
    padding: 13.146vh 9.28vh 9.28vh;
    text-align: right;
    background-color: rgba(205, 196, 181, 0.56);
    white-space: normal;
  }
  .products .pproducts ul li .quote .h2 {
    color: #B43934;
  }
  .products .pproducts ul li .quote .h2 .word:first-child:before {
    content: "“";
  }
  .products .pproducts ul li .quote .h2 .word:last-child:after {
    content: "”";
  }
  .products .pproducts ul li .quote .h2 + .label {
    margin-top: 2em;
  }
  .products .pproducts ul li .image {
    width: 38.793vh;
    overflow: hidden;
  }
  .products .pproducts ul li + li {
    margin-left: 20vh;
  }
  .products .pproducts ul li.tall .image {
    height: 100vh;
    width: auto;
  }
  .products .pproducts ul li.tall img {
    height: 100%;
    width: auto;
    max-width: none;
    height: 100vh;
  }
}
.project .intro .title h1 {
  color: #B43934;
}
.project .intro .title h2 {
  font-style: italic;
}
@media (max-width: 767px), (max-height: 639px) {
  .project .intro {
    display: flex;
    flex-direction: column;
  }
  .project .intro .title {
    order: 1;
  }
  .project .intro .title h1 {
    display: block;
  }
  .project .intro .title h2 {
    font-size: 28px;
    padding-left: 0.25em;
    padding-right: 60px;
  }
  .project .intro .image {
    order: 2;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 22px;
  }
  .project .intro .image img {
    height: 50vh;
    width: auto;
    max-width: none;
    min-width: 100vw;
    object-fit: cover;
  }
}
@media screen and (max-width: 767px) and (min-width: 580px), screen and (max-height: 639px) and (min-width: 580px) {
  .project .intro .image img {
    height: auto;
    max-width: 100%;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .project .intro .description {
    order: 3;
    position: relative;
    padding-top: 22px;
    padding-bottom: 22px;
    background-color: rgba(205, 196, 181, 0.95);
    color: #272727;
  }
  .project .intro .description .handler {
    opacity: 0;
    pointer-events: none;
    transition: 0.35s;
  }
  .project .intro .description .center.closed {
    height: 6.33em;
    overflow: hidden;
  }
  .project .intro .description .center.closed:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5em;
    background: linear-gradient(to bottom, rgba(205, 196, 181, 0), #cdc4b5 70%, #CDC4B5 100%);
  }
  .project .intro .description .center.closed .handler {
    opacity: 1;
  }
  .project .intro .description .center.opening {
    height: auto;
  }
  .project .intro .description .center.opening:after {
    opacity: 0;
    transition: 0.35s;
  }
  .project .intro .description .center.opening .handler {
    opacity: 0;
    pointer-events: none;
    transition: 0.35s;
  }
  .project .intro .description .handler {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 50%, 0);
    pointer-events: none;
  }
  .project .intro .description .handle {
    width: 45px;
    height: 45px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  .project .intro .description .handle i svg {
    width: 100%;
    height: 100%;
  }
  .project .intro .description .handle .icon-carat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -150%, 0) translate3d(2.5%, 50%, 0) rotate(180deg);
    width: 40%;
    height: 40%;
    transition: 0.5s;
  }
  .project .intro .description .handle .icon-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) translate3d(-2.5%, 0, 0) rotate(180deg);
    width: 40%;
    height: 40%;
    opacity: 0;
    transition: 0.35s;
  }
  .project .intro .description .handle .icon-info svg {
    fill: #B43934;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .project .intro .counter {
    display: flex;
    position: absolute;
    bottom: 100%;
    right: 0;
    padding-right: 24px;
    margin-bottom: 27px;
    font-family: "meno-display", serif;
    font-style: normal;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 3.2px;
    pointer-events: none;
  }
  .project .intro .counter .bar {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -2px;
    width: 20px;
    height: 1px;
    background-color: #979797;
  }
  .project .intro .counter .word {
    white-space: nowrap;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .project .gallery {
    margin-top: 44px;
  }
  .project .gallery li + li {
    margin-top: 44px;
  }
  .project .gallery img {
    margin: auto;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .project .quote {
    background-color: rgba(205, 196, 181, 0.56);
    padding: 30px 20px;
    text-align: right;
  }
  .project .quote .h2 {
    color: #B43934;
  }
  .project .quote .h2 .word:first-child:before {
    content: "“";
  }
  .project .quote .h2 .word:last-child:after {
    content: "”";
  }
  .project .quote .h2 + .label {
    margin-top: 2em;
  }
}
@media screen and (max-width: 767px) and (min-width: 480px), screen and (max-height: 639px) and (min-width: 480px) {
  .project .quote {
    padding: 50px 40px;
  }
}
@media screen and (max-width: 767px) and (min-width: 640px), screen and (max-height: 639px) and (min-width: 640px) {
  .project .quote {
    padding: 60px 50px;
  }
}
@media (max-width: 767px), (max-height: 639px) {
  .project .next {
    margin-top: 50px;
  }
  .project .next a {
    display: block;
    margin: auto;
    max-width: 280px;
    pointer-events: none;
  }
  .project .next a .image,
.project .next a .label,
.project .next a .cta span {
    pointer-events: all;
  }
  .project .next .image {
    position: relative;
  }
  .project .next .image:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 131%;
  }
  .project .next .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .project .next .text {
    padding-top: 30px;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .project {
    position: relative;
    height: 100%;
    padding-left: 46.659vh;
    overflow: visible;
    white-space: nowrap;
  }
  .project .intro {
    display: inline-flex;
    vertical-align: top;
    position: relative;
    height: 100%;
    /* &:hover {
      .image {
        // cursor: pointer;
      }
    }

    &.cursor {

      .description {

        .handle {
          // position: fixed;
          width: 100px;
          height: 100px;
          background-color: rgba(255,255,255,.6);

          .icon-carat {
            transform: translate3d(-50%, -50%, 0) rotate(359deg);
            opacity: 0;
            transition: .35s;
          }

          .icon-info {
            transform: translate3d(-50%, -50%, 0) translate3d(-2.5%, 0, 0);
            opacity: 1;
            transition: .5s;
          }
        }
      }
    }

    &:active {
      .description {
        .handle {
          width: 90px;
          height: 90px;
          opacity: .7;
          transition: .1s;
        }
      }
    }

    &.cursor {
      .description {
        overflow: visible;
      }
    }

    &.moving {
      .description {
        .handle {
          transition: .25s ease-out;
        }
      }
    }

    &.open {
      .description {
        transform: translateY(0);

        .text {
          transform: translateY(0);
          opacity: 1;
        }

        .handle {
          .icon-carat {
            transform: translate3d(-50%, -50%, 0) translate3d(-7%, 65%, 0) rotate(180deg);
          }
        }
      }
    } */
  }
  .project .intro .title {
    width: auto;
    padding-right: 40px;
    pointer-events: none;
  }
  .project .intro .title > div {
    display: flex;
  }
  .project .intro .title h2 {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding-top: 0.5em;
    padding-right: 0.25em;
    font-size: 34px;
  }
  .project .intro .image {
    display: inline-flex;
  }
  .project .intro img {
    height: 100vh;
    max-width: none;
  }
  .project .intro .description {
    transform: translateY(100%) translateY(-35px);
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    min-width: 400px;
    width: 43.103vh;
    padding: 55px 50px 35px;
    background-color: rgba(205, 196, 181, 0.95);
    color: #272727;
    overflow: hidden;
    transition: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: normal;
  }
  .project .intro .description .text {
    transform: translateY(25%);
    opacity: 0;
    transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  }
  .project .intro .description .handler {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
  }
  .project .intro .description .handle {
    width: 45px;
    height: 45px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  .project .intro .description .handle i svg {
    width: 100%;
    height: 100%;
  }
  .project .intro .description .handle .icon-carat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) translate3d(-7.5%, 50%, 0);
    width: 40%;
    height: 40%;
    transition: 0.5s;
  }
  .project .intro .description .handle .icon-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) translate3d(-2.5%, 0, 0) rotate(180deg);
    width: 40%;
    height: 40%;
    opacity: 0;
    transition: 0.35s;
  }
  .project .intro .description .handle .icon-info svg {
    fill: #B43934;
  }
  .project .intro .counter {
    display: flex;
    position: absolute;
    top: 36px;
    top: 3.879vh;
    right: 100%;
    padding-right: 64px;
    font-family: "meno-display", serif;
    font-style: normal;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 5.2px;
    pointer-events: none;
  }
  .project .intro .counter .bar {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -1px;
    width: 57px;
    height: 1px;
    background-color: #979797;
  }
  .project .intro .counter .word {
    white-space: nowrap;
  }
  .project .gallery {
    display: inline-flex;
    vertical-align: top;
    position: relative;
    height: 100%;
    padding-left: 70px;
  }
  .project .gallery ul {
    display: flex;
    height: 100%;
  }
  .project .gallery li {
    height: 100%;
  }
  .project .gallery li.text {
    min-width: 340px;
    width: 36.422vh;
    padding-top: 17.241vh;
    white-space: normal;
  }
  .project .gallery li.text + li {
    margin-left: 70px;
  }
  .project .gallery li.image + li {
    margin-left: 200px;
  }
  .project .gallery picture,
.project .gallery img {
    max-height: 100vh;
  }
  .project .gallery .image {
    display: flex;
    align-items: center;
  }
  .project .gallery img {
    height: 100%;
    max-width: none;
  }
  .project .quote {
    display: flex;
    align-items: center;
  }
  .project .quote .text {
    width: 100vw;
    max-width: 740px;
    padding: 13.146vh 9.28vh 9.28vh;
    text-align: right;
    background-color: rgba(205, 196, 181, 0.56);
    white-space: normal;
  }
  .project .quote .h2 {
    color: #B43934;
  }
  .project .quote .h2 .word:first-child:before {
    content: "“";
  }
  .project .quote .h2 .word:last-child:after {
    content: "”";
  }
  .project .quote .h2 + .label {
    margin-top: 2em;
  }
  .project .next {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 15vh;
    height: 100%;
    width: 30.17vh;
    min-width: 280px;
  }
  .project .next a {
    display: block;
    pointer-events: none;
  }
  .project .next a .image,
.project .next a .label,
.project .next a .cta span {
    pointer-events: all;
  }
  .project .next .image {
    position: relative;
  }
  .project .next .image:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 131%;
  }
  .project .next .image picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .project .next .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .project .next .text {
    padding-top: 30px;
    white-space: normal;
  }
}
.studio .scontact,
.e404 .scontact {
  padding-top: 75px;
}
.studio .scontact h2,
.e404 .scontact h2 {
  font-family: "meno-display", serif;
  font-style: normal;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-weight: 300;
  font-style: italic;
  font-size: 28px;
  line-height: 1;
}
.studio .scontact .rotate,
.e404 .scontact .rotate {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.studio .scontact ul,
.e404 .scontact ul {
  padding-top: 20px;
}
.studio .scontact li span,
.e404 .scontact li span {
  display: inline-block;
  padding-right: 1em;
}
.studio .scontact li a,
.e404 .scontact li a {
  color: inherit;
  text-transform: lowercase;
}
.studio .scontact li.email,
.e404 .scontact li.email {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 500px) {
  .studio .scontact li.email,
.e404 .scontact li.email {
    display: block;
  }
}
.studio .locations,
.e404 .locations {
  overflow: hidden;
}
@media (max-width: 767px), (max-height: 639px) {
  .studio,
.e404 {
    display: flex;
    flex-direction: column;
    padding-bottom: 75px;
  }
  .studio .intro,
.e404 .intro {
    order: 2;
    position: relative;
    margin-top: 75px;
    padding-top: 0;
  }
  .studio .intro .text,
.e404 .intro .text {
    margin-top: 30px;
  }
  .studio .h2,
.e404 .h2 {
    font-size: 32px;
    line-height: 1.15;
  }
  .studio .locations,
.e404 .locations {
    order: 1;
    padding-top: 130px;
  }
  .studio .locations h3,
.e404 .locations h3 {
    display: inline-block;
    /* margin-left: -.05em;
    margin-right: -.075em; */
    font-family: "meno-display", serif;
    font-style: normal;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-weight: 300;
    line-height: 1.09;
    font-size: 50px;
    white-space: nowrap;
    overflow: hidden;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .studio,
.e404 {
    position: relative;
    padding-left: 13.859vh;
    padding-right: 13.859vh;
  }
  .studio .intro,
.e404 .intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 40.948vh;
    min-width: 310px;
    height: 100%;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 900px) {
  .studio .intro,
.e404 .intro {
    width: 51.723vh;
    min-width: calc(310px + 10.775vh);
    padding-left: 10.775vh;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .studio .h2,
.e404 .h2 {
    font-size: 32px;
    line-height: 1.15;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .studio .scontact li,
.e404 .scontact li {
    white-space: nowrap;
  }
  .studio .scontact li a,
.e404 .scontact li a {
    display: inline-block;
    transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .studio .scontact li a:hover,
.e404 .scontact li a:hover {
    color: #B43934;
  }
  .studio .scontact li a:active,
.e404 .scontact li a:active {
    transform: scale(0.95);
    transition: 0.15s;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .studio .locations,
.e404 .locations {
    position: absolute;
    bottom: 0;
    left: 33.33%;
    right: 0;
    pointer-events: none;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 960px) {
  .studio .locations,
.e404 .locations {
    left: 40%;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 1024px) {
  .studio .locations,
.e404 .locations {
    left: 50%;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 1280px) {
  .studio .locations,
.e404 .locations {
    right: 8.081vh;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .studio .locations ul,
.e404 .locations ul {
    display: flex;
    align-items: flex-end;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .studio .locations li,
.e404 .locations li {
    flex: 1;
  }
  .studio .locations li + li,
.e404 .locations li + li {
    margin-left: -3em;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) {
  .studio .locations h3,
.e404 .locations h3 {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: -0.125em;
    font-family: "meno-display", serif;
    font-style: normal;
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
    font-weight: 300;
    line-height: 1.2;
    font-size: 50px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.2;
  }
}
@media screen and (min-width: 768px) and (min-height: 640px) and (min-width: 1200px) {
  .studio .locations h3,
.e404 .locations h3 {
    opacity: 1;
  }
}