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(41, 43, 46, 0.77);
  color: #fff; }

::selection {
  background-color: rgba(41, 43, 46, 0.77);
  color: #fff; }

@font-face {
  font-family: 'Silk Serif';
  src: url("../fonts/SilkSerif-Light.woff2") format("woff2"), url("../fonts/SilkSerif-Light.woff") format("woff"); }

@font-face {
  font-family: 'Perpetua';
  src: url("../fonts/Perpetua.woff2") format("woff2"), url("../fonts/Perpetua.woff") format("woff"); }

@font-face {
  font-family: 'Placard MT Std Cond';
  src: url("../fonts/PlacardMTStd-Cond.woff2") format("woff2"), url("../fonts/PlacardMTStd-Cond.woff") format("woff"); }

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

.i-facebook, .i-twitter, .i-instagram {
  width: 26px; }
  .i-facebook svg, .i-twitter svg, .i-instagram svg {
    width: 100%;
    height: 100%;
    opacity: .7; }
    .i-facebook svg path, .i-twitter svg path, .i-instagram svg path {
      fill: currentColor; }

.i-facebook {
  height: 25px; }

.i-twitter {
  height: 26px; }

.i-pinterest {
  height: 26px; }

.i-instagram {
  width: 26px;
  height: 26px; }

.h1 {
  font-family: "Perpetua", serif;
  font-weight: 200;
  font-style: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: 82px;
  line-height: .887; }
  @media screen and (min-width: 500px) {
    .h1 {
      font-size: 128px; } }
  @media screen and (min-width: 768px) {
    .h1 {
      font-size: 166px; } }
  @media (min-width: 900px) {
    .h1 {
      font-size: 169px; } }
  .h1.rotate {
    transform: rotate(-90deg) translateY(100%);
    transform-origin: bottom left;
    font-size: 128px;
    margin-left: -.1em; }
    .h1.rotate span {
      display: block; }
    @media screen and (min-width: 768px) {
      .h1.rotate {
        font-size: 166px; } }
    @media (min-width: 900px) {
      .h1.rotate {
        font-size: 216px; } }

.h2 {
  font-family: "Perpetua", serif;
  font-weight: 200;
  font-style: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -.0087em; }
  @media screen and (min-width: 500px) {
    .h2 {
      font-size: 64px; } }
  @media screen and (min-width: 768px) {
    .h2 {
      font-size: 90px; }
      .h2 + .p {
        margin-top: -.5em; } }

.h3, .about .body blockquote {
  font-family: "Perpetua", serif;
  font-weight: 200;
  font-style: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: 41px;
  letter-spacing: -.0088em; }
  @media screen and (min-width: 500px) {
    .h3, .about .body blockquote {
      font-size: 51px; } }
  @media screen and (min-width: 768px) {
    .h3, .about .body blockquote {
      font-size: 74px; } }

.h4 {
  font-family: "Perpetua", serif;
  font-weight: 200;
  font-style: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: 1.79em;
  line-height: 1.0;
  letter-spacing: -.00678em; }

.h5 {
  font-family: "Perpetua", serif;
  font-weight: 200;
  font-style: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: 1.4em;
  line-height: 1.0;
  letter-spacing: .009em; }
  .h5 + .p {
    margin-top: 2.1vw; }
  .h5 + .h3 {
    margin-top: 1.8vw; }

.h6 {
  font-family: "Perpetua", serif;
  font-weight: 200;
  font-style: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: 1.28em;
  line-height: 1.0;
  letter-spacing: .0285em; }

.p {
  font-family: poppins, sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 2.05; }
  .p + .cta {
    margin-top: 50px; }

/* p {
  a {
    display: inline-block;
    position: relative;
    color: inherit;
    transition: .35s;
  
    &:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 5%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: currentColor;
    }

    &:hover,
    &:focus {
      transform: scale(.975);
      opacity: .7;
    }

    &:active {
      transform: translate3d(0, 1px, 0) scale(.925);
      transition: .15s;
    }
  }
} */
.label {
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: .1714em;
  text-transform: uppercase;
  /* @include bp-medium {
    + .h2 {
      // margin-top: .05em;
      margin-top: .25em;
    }
  } */ }
  .label + .h2 {
    margin-top: .25em; }

html {
  height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: poppins, sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  body:before {
    content: '';
    display: block;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: .5s ease-in; }
  body.no-transition .main,
  body.no-transition footer {
    transition: 0s; }
  body.is-loading {
    /* .main,
    footer {
      opacity: 0;
    } */ }
    body.is-loading:before {
      opacity: 1;
      pointer-events: all;
      transition: .5s ease-out; }
  body.is-done-loading:before {
    opacity: 0;
    pointer-events: none;
    transition: .5s ease-in; }

.main {
  flex: 1;
  overflow: hidden; }

.center {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  padding-left: 20px;
  padding-right: 20px; }
  .center .full {
    width: 100vw;
    margin-left: -20px; }
  @media screen and (min-width: 500px) {
    .center {
      padding-left: 30px;
      padding-right: 30px; }
      .center .full {
        margin-left: -30px; } }
  @media screen and (min-width: 640px) {
    .center {
      padding-left: 40px;
      padding-right: 40px; }
      .center .full {
        margin-left: -40px; } }
  @media screen and (min-width: 768px) {
    .center {
      padding-left: 52px;
      padding-right: 52px; }
      .center .full {
        margin-left: -52px; } }
  @media screen and (min-width: 1024px) {
    .center {
      padding-left: 64px;
      padding-right: 64px; }
      .center .full {
        margin-left: -64px; } }
  @media screen and (min-width: 1280px) {
    .center {
      padding-left: 80px;
      padding-right: 80px; }
      .center .full {
        margin-left: -80px; } }
  @media screen and (min-width: 1280px) and (min-height: 768px) {
    .center {
      padding-left: 92px;
      padding-right: 92px; }
      .center .full {
        margin-left: -92px; } }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 288px;
  padding-left: 16px;
  padding-right: 16px;
  min-height: 54px;
  border-radius: 100px;
  background-color: transparent;
  transition: .35s; }
  .btn.light {
    border: 1px solid #fff;
    color: #fff; }
    .btn.light:hover {
      background-color: #fff;
      color: #292B2E; }
  .btn.dark {
    border: 1px solid #292B2E;
    color: #292B2E; }
    .btn.dark:hover {
      background-color: #292B2E;
      color: #fff; }
  .btn:hover, .btn:focus {
    transform: scale(0.975);
    opacity: .7; }
  .btn:active {
    transform: translate3d(0, 1px, 0) scale(0.95);
    transition: .15s; }

img {
  display: block; }

.view {
  opacity: 0;
  transform: translateY(20px); }
  .view.inview {
    opacity: 1;
    transform: translateY(0);
    transition: .75s ease-out; }

.picview {
  opacity: 0; }
  .picview.inview {
    opacity: 1;
    transition: .75s ease-out; }

/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden; }

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.has-scroll-smooth body {
  overflow: hidden; }

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh; }

[data-scroll-direction=horizontal] [data-scroll-container] {
  display: inline-block;
  height: 100vh;
  white-space: nowrap; }

[data-scroll-direction=horizontal] [data-scroll-section] {
  display: inline-block;
  height: 100%;
  vertical-align: top;
  white-space: nowrap; }

.c-scrollbar {
  height: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center right;
  transition: transform .3s,opacity .3s;
  width: 11px; }

.c-scrollbar:hover {
  transform: scaleX(1.45); }

.c-scrollbar:hover, .has-scroll-dragging .c-scrollbar, .has-scroll-scrolling .c-scrollbar {
  opacity: 1; }

[data-scroll-direction=horizontal] .c-scrollbar {
  bottom: 0;
  height: 10px;
  top: auto;
  transform: scaleY(1);
  width: 100%; }

[data-scroll-direction=horizontal] .c-scrollbar:hover {
  transform: scaleY(1.3); }

.c-scrollbar_thumb {
  background-color: #000;
  border-radius: 10px;
  cursor: -webkit-grab;
  cursor: grab;
  margin: 2px;
  opacity: .5;
  position: absolute;
  right: 0;
  top: 0;
  width: 7px; }

.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing; }

[data-scroll-direction=horizontal] .c-scrollbar_thumb {
  bottom: 0;
  right: auto; }

@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal; }

:root {
  --swiper-theme-color: #007aff; }

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1; }

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column; }

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box; }

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0); }

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap; }

.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column; }

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto; }

.swiper-container-pointer-events {
  touch-action: pan-y; }
  .swiper-container-pointer-events.swiper-container-vertical {
    touch-action: pan-x; }

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform; }

.swiper-slide-invisible-blank {
  visibility: hidden; }

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto; }

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height; }

/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px; }
  .swiper-container-3d .swiper-wrapper,
  .swiper-container-3d .swiper-slide,
  .swiper-container-3d .swiper-slide-shadow-left,
  .swiper-container-3d .swiper-slide-shadow-right,
  .swiper-container-3d .swiper-slide-shadow-top,
  .swiper-container-3d .swiper-slide-shadow-bottom,
  .swiper-container-3d .swiper-cube-shadow {
    transform-style: preserve-3d; }
  .swiper-container-3d .swiper-slide-shadow-left,
  .swiper-container-3d .swiper-slide-shadow-right,
  .swiper-container-3d .swiper-slide-shadow-top,
  .swiper-container-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; }
  .swiper-container-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */ }
  .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none; }

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start; }

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory; }

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory; }

footer {
  position: relative;
  background-color: #D8D8D8; }
  footer:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: -1px;
    left: 0;
    width: 100%;
    height: 33%;
    background-image: url(../images/svg/footer-curve.svg);
    background-size: 100% 100%; }
    @media screen and (min-width: 768px) {
      footer:before {
        height: 60%; } }
    @media screen and (min-width: 1024px) {
      footer:before {
        height: 75%; } }
    @media screen and (min-width: 1280px) {
      footer:before {
        height: 87.5%; } }
  footer .center {
    position: relative;
    z-index: 2;
    padding-top: 20vw;
    padding-bottom: 40px; }
    @media (min-width: 600px) {
      footer .center {
        padding-top: 15vw; } }
    @media screen and (min-width: 768px) {
      footer .center {
        padding-bottom: 24px;
        padding-left: 48px;
        padding-right: 28px; } }
    @media screen and (min-width: 1280px) {
      footer .center {
        padding-top: 200px; } }
  footer .text {
    position: relative; }
  footer .newsletter button svg {
    color: #292B2E; }
  footer .newsletter + .social {
    margin-top: 10px; }
  footer .social svg {
    color: #292B2E; }
  footer .copyright {
    margin-top: 60px;
    font-size: 14px; }
    footer .copyright p + p {
      margin-top: .5em; }
    footer .copyright p a {
      color: inherit; }
    @media screen and (min-width: 768px) {
      footer .copyright {
        position: absolute;
        bottom: 0;
        right: 0;
        margin-top: 0;
        font-size: 10px;
        text-align: right; } }
    @media (min-width: 900px) {
      footer .copyright {
        display: flex; }
        footer .copyright p + p {
          margin-top: 0;
          margin-left: 20px; }
        footer .copyright p a {
          color: inherit; } }

form {
  position: relative; }
  form.is-submitting .formRow {
    opacity: .7;
    pointer-events: none; }
  form.is-submitted .formMessage {
    transform: translateY(0);
    opacity: 1;
    transition-delay: .15s;
    pointer-events: all; }
  form.is-submitted .formRow {
    opacity: 0;
    pointer-events: none; }

input,
textarea {
  border: 0;
  appearance: none;
  outline: none;
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.textbox,
.textarea {
  display: block;
  width: 100%;
  background: none;
  border-bottom: 1px solid #979797;
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.0;
  letter-spacing: .1714em; }

.textarea {
  height: 5.3vw;
  line-height: 1.4; }

button {
  width: 55px;
  height: 55px;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  outline: none; }

.formMessage {
  position: absolute;
  transform: translateY(50%);
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: .5s; }

.formRow {
  transition: .5s; }
  .formRow + .formRow {
    margin-top: 2px; }
    .formRow + .formRow:last-child {
      display: flex;
      padding-top: 1.65vw; }

.newsletter label {
  display: block; }

@media screen and (min-width: 768px) {
  .newsletter .h3 {
    font-size: 50px; } }

.newsletter .input {
  display: flex;
  align-items: center;
  max-width: 460px; }
  .newsletter .input input {
    color: inherit; }
  @media screen and (min-width: 500px) {
    .newsletter .input {
      width: 80%; } }

.newsletter .textbox {
  flex: 1; }

.newsletter button {
  display: block;
  margin-left: 16px;
  transition: .35s; }
  .newsletter button svg {
    width: 100%;
    height: 100%; }
    .newsletter button svg circle,
    .newsletter button svg path {
      transition: .35s; }
    .newsletter button svg circle {
      stroke: currentColor;
      fill: transparent; }
    .newsletter button svg path {
      fill: currentColor; }
  .newsletter button:hover, .newsletter button:focus {
    transform: scale(0.95);
    opacity: .7; }
    .newsletter button:hover svg circle, .newsletter button:focus svg circle {
      fill: currentColor; }
    .newsletter button:hover svg path, .newsletter button:focus svg path {
      fill: #fff; }
  .newsletter button:active {
    transform: translate3d(0, 1px, 0) scale(0.9);
    transition: .15s; }

header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  color: #fff; }
  header .center {
    display: flex;
    position: relative;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    /* @media (min-width: 900px) {
      padding-left: 100px;
      padding-right: 100px;
    } */ }
    @media screen and (min-width: 500px) {
      header .center {
        padding-top: 30px;
        padding-bottom: 30px; } }
    @media screen and (min-width: 640px) {
      header .center {
        padding-top: 36px;
        padding-bottom: 36px; } }
  header .actionbar {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%; }
    header .actionbar .center {
      justify-content: flex-end; }
  header .actions {
    display: flex;
    align-items: center; }
  header nav.is-open,
  header .finder.is-open {
    opacity: 1;
    pointer-events: all;
    transition: .5s; }
    header nav.is-open ~ .actionbar .hamburger .bun,
    header .finder.is-open ~ .actionbar .hamburger .bun {
      margin-top: 0; }
      header nav.is-open ~ .actionbar .hamburger .bun:first-child,
      header .finder.is-open ~ .actionbar .hamburger .bun:first-child {
        top: 50%;
        transform: translate3d(0, -50%, 0) rotate(45deg); }
      header nav.is-open ~ .actionbar .hamburger .bun:last-child,
      header .finder.is-open ~ .actionbar .hamburger .bun:last-child {
        top: 50%;
        transform: translate3d(0, -50%, 0) rotate(-45deg); }
    header nav.is-open ~ .actionbar .hamburger .patty,
    header .finder.is-open ~ .actionbar .hamburger .patty {
      opacity: 0; }
  header nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #292B2E;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: .35s; }
    header nav .center {
      flex-direction: column; }
    header nav.is-open:before {
      transform: scale(1);
      opacity: .1;
      transition-delay: .25s; }
    header nav.is-open ~ .center .logo,
    header nav.is-open ~ .center .hamburger {
      color: #fff; }
    header nav .menu {
      display: flex;
      flex: 1;
      flex-direction: column;
      position: relative;
      z-index: 2;
      padding: 50px 0 30px 0;
      text-align: right; }
      @media (min-height: 780px) {
        header nav .menu {
          padding: 60px 0 40px 0; } }
      @media (min-height: 820px) {
        header nav .menu {
          padding: 70px 0 50px 0; } }
      header nav .menu a {
        display: inline-block;
        transition: .5s; }
        header nav .menu a.is-unhovered {
          opacity: .3; }
        header nav .menu a:active {
          transform: scale(0.95);
          transition: .15s; }
        @media (max-height: 679px) {
          header nav .menu a {
            font-size: 64px; } }
        @media (min-width: 900px) and (min-height: 680px) and (max-height: 779px) {
          header nav .menu a {
            font-size: 130px; } }
    header nav .social {
      justify-content: flex-end; }
    header nav a {
      font-family: "Perpetua", serif;
      font-weight: 200;
      font-style: normal;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
      color: inherit; }

.hamburger {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  cursor: pointer;
  pointer-events: all;
  color: currentColor;
  transition: .35s; }
  .hamburger:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    border: 2px solid currentColor;
    transition: .35s; }
  .hamburger .bun,
  .hamburger .patty {
    display: block;
    position: absolute;
    margin-top: -1px;
    left: 24.64%;
    width: 51.72%;
    border-radius: 100px;
    height: 3px;
    background-color: currentColor;
    transition: .35s; }
  .hamburger .bun:first-child {
    top: 33.33%; }
  .hamburger .bun:last-child {
    top: 66.66%; }
  .hamburger .patty {
    top: 50%; }
  .hamburger:hover, .hamburger:focus {
    opacity: .7; }
    .hamburger:hover:before, .hamburger:focus:before {
      transform: scale(0.95);
      background-color: #fff; }
    .hamburger:hover .bun,
    .hamburger:hover .patty, .hamburger:focus .bun,
    .hamburger:focus .patty {
      background-color: #292B2E; }
  .hamburger:active {
    transform: translate3d(0, 1px, 0) scale(0.925);
    transition: .15s; }
    .hamburger:active:before {
      transition: .15s; }

.logobar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%; }
  .logobar .center {
    display: flex;
    position: relative;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    /* @media (min-width: 900px) {
      padding-left: 100px;
      padding-right: 100px;
    } */ }
    @media screen and (min-width: 500px) {
      .logobar .center {
        padding-top: 30px;
        padding-bottom: 30px; } }
    @media screen and (min-width: 640px) {
      .logobar .center {
        padding-top: 36px;
        padding-bottom: 36px; } }
  .logobar .center {
    justify-content: flex-start; }
    @media screen and (min-width: 768px) {
      .logobar .center .logo {
        margin: auto;
        width: 90%;
        max-width: 1040px; } }
    @media screen and (min-width: 1024px) {
      .logobar .center .logo {
        width: 85%; } }

.logo {
  pointer-events: all; }
  .logo a {
    display: inline-block;
    color: inherit;
    transition: .35s; }
    .logo a svg {
      height: 58px;
      width: auto; }
      @media screen and (min-width: 768px) {
        .logo a svg {
          height: 75px; } }
    .logo a:hover, .logo a:focus {
      transform: scale(0.975);
      opacity: .7; }
    .logo a:active {
      transform: translate3d(0, 1px, 0) scale(0.925);
      transition: .15s; }

.hover {
  cursor: none; }

.cursor {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  /* width: 140px;
  height: 140px; */
  width: 7.9861vw;
  height: 7.9861vw;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s; }
  .cursor:before {
    content: '';
    display: block;
    transform: scale(0.95);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    opacity: 0;
    transition: .35s; }
  .cursor span {
    transform: scale(0.9);
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: .35s; }
    .cursor span svg {
      display: block;
      width: 5vw;
      height: 5vw; }
    @media screen and (min-width: 768px) {
      .cursor span svg {
        width: 2.1118vw;
        height: 2.1118vw; } }
  .cursor.is-active {
    opacity: 1; }
    .cursor.is-active:before,
    .cursor.is-active span {
      transform: scale(1);
      opacity: 1; }
  .cursor.is-clicking:before,
  .cursor.is-clicking span {
    transition: .15s; }
  .cursor.is-clicking:before {
    transform: scale(0.95);
    background-color: rgba(0, 0, 0, 0.95); }
  .cursor.is-clicking span {
    transform: scale(0.9); }

/*!
 * baguetteBox.js
 * @author  feimosi
 * @version 1.11.1
 * @url https://github.com/feimosi/baguetteBox.js
 */
#baguetteBox-overlay {
  display: none;
  opacity: 0;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background-color: #222;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease; }

#baguetteBox-overlay.visible {
  opacity: 1; }

#baguetteBox-overlay .full-image {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center; }

#baguetteBox-overlay .full-image figure {
  display: inline;
  margin: 0;
  height: 100%; }

#baguetteBox-overlay .full-image img {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

#baguetteBox-overlay .full-image figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 1.8;
  white-space: normal;
  color: #ccc;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
  font-family: sans-serif; }

#baguetteBox-overlay .full-image:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px; }

#baguetteBox-slider {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  -webkit-transition: left .4s ease,-webkit-transform .4s ease;
  transition: left .4s ease,-webkit-transform .4s ease;
  transition: left .4s ease,transform .4s ease;
  transition: left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease; }

#baguetteBox-slider.bounce-from-right {
  -webkit-animation: bounceFromRight .4s ease-out;
  animation: bounceFromRight .4s ease-out; }

#baguetteBox-slider.bounce-from-left {
  -webkit-animation: bounceFromLeft .4s ease-out;
  animation: bounceFromLeft .4s ease-out; }

@-webkit-keyframes bounceFromRight {
  0%, 100% {
    margin-left: 0; }
  50% {
    margin-left: -30px; } }

@keyframes bounceFromRight {
  0%, 100% {
    margin-left: 0; }
  50% {
    margin-left: -30px; } }

@-webkit-keyframes bounceFromLeft {
  0%, 100% {
    margin-left: 0; }
  50% {
    margin-left: 30px; } }

@keyframes bounceFromLeft {
  0%, 100% {
    margin-left: 0; }
  50% {
    margin-left: 30px; } }

.baguetteBox-button#next-button, .baguetteBox-button#previous-button {
  top: 50%;
  top: calc(50% - 30px);
  width: 44px;
  height: 60px; }

.baguetteBox-button {
  position: absolute;
  cursor: pointer;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  -moz-border-radius: 15%;
  border-radius: 15%;
  background-color: #323232;
  background-color: rgba(50, 50, 50, 0.5);
  color: #ddd;
  font: 1.6em sans-serif;
  -webkit-transition: background-color .4s ease;
  transition: background-color .4s ease; }

.baguetteBox-button:focus, .baguetteBox-button:hover {
  background-color: rgba(50, 50, 50, 0.9); }

.baguetteBox-button#next-button {
  right: 2%; }

.baguetteBox-button#previous-button {
  left: 2%; }

.baguetteBox-button#close-button {
  top: 20px;
  right: 2%;
  right: calc(2% + 6px);
  width: 30px;
  height: 30px; }

.baguetteBox-button svg {
  position: absolute;
  left: 0;
  top: 0; }

.baguetteBox-spinner {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px; }

.baguetteBox-double-bounce1, .baguetteBox-double-bounce2 {
  width: 100%;
  height: 100%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  opacity: .6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out; }

.baguetteBox-double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s; }

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1); } }

.baguetteBox-button {
  background-color: transparent;
  transition: .35s; }
  .baguetteBox-button svg circle,
  .baguetteBox-button svg path,
  .baguetteBox-button svg line {
    transition: .35s; }
  .baguetteBox-button svg circle {
    stroke: #fff;
    fill: #292B2E; }
  .baguetteBox-button svg path {
    fill: #fff; }
  .baguetteBox-button:hover, .baguetteBox-button:focus {
    transform: scale(0.95);
    background-color: transparent;
    opacity: .7; }
    .baguetteBox-button:hover svg circle, .baguetteBox-button:focus svg circle {
      fill: #fff; }
    .baguetteBox-button:hover svg path, .baguetteBox-button:focus svg path {
      fill: #292B2E; }
  .baguetteBox-button:active {
    transform: translate3d(0, 1px, 0) scale(0.9);
    background-color: transparent;
    transition: .15s; }
  .baguetteBox-button#previous-button, .baguetteBox-button#next-button {
    width: 57px;
    height: 57px; }
  .baguetteBox-button#previous-button svg {
    transform: rotate(180deg); }
  .baguetteBox-button#close-button {
    top: 5vh;
    right: 5vh; }
    .baguetteBox-button#close-button:before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -29px;
      margin-top: -29px;
      width: 58px;
      height: 58px;
      border: 1px solid #fff;
      background-color: #292B2E;
      border-radius: 100px;
      transition: .35s; }
    .baguetteBox-button#close-button svg line {
      stroke: #fff; }
    .baguetteBox-button#close-button:hover:before, .baguetteBox-button#close-button:focus:before {
      background-color: #fff; }
    .baguetteBox-button#close-button:hover svg line, .baguetteBox-button#close-button:focus svg line {
      stroke: #292B2E; }

.social {
  display: flex;
  align-items: center; }
  .social li + li {
    margin-left: 24px; }
  .social a {
    display: block;
    transition: .35s; }
    .social a:hover, .social a:focus {
      transform: scale(0.975);
      opacity: .7; }
    .social a:active {
      transform: translate3d(0, 1px, 0) scale(0.95);
      transition: .15s; }

.splash {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #304243;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s; }
  .splash.is-in {
    opacity: 1;
    pointer-events: all; }
    .splash.is-in .splashimage {
      opacity: 1; }
    .splash.is-in .splashlogo img,
    .splash.is-in .splashlogo svg {
      transform: scale(1); }
    .splash.is-in .splashlogo #logo-custom {
      transition-delay: .25s; }
    .splash.is-in .splashlogo #logo-home {
      transition-delay: .325s; }
    .splash.is-in .splashlogo #logo-building {
      transition-delay: .4s; }
    .splash.is-in .splashlogo #logo-custom,
    .splash.is-in .splashlogo #logo-home,
    .splash.is-in .splashlogo #logo-building {
      opacity: 1;
      transform: translateY(0); }
    .splash.is-in + .home .hero:before {
      transform: translateY(100%); }
    .splash.is-in + .home .intro .h1.rotate {
      opacity: 0;
      transform: rotate(-90deg) translateY(100%) translateX(-50%); }
  .splash.is-out {
    opacity: 0;
    pointer-events: none; }
    .splash.is-out + .home .hero:before {
      transform: translateY(0);
      transition: 1s cubic-bezier(0.33, 1, 0.68, 1); }
    .splash.is-out + .home .intro .h1.rotate {
      opacity: 1;
      transform: rotate(-90deg) translateY(100%) translateX(0);
      transition: 0.75s cubic-bezier(0.33, 1, 0.68, 1) 0.25s; }

.splashimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 1s cubic-bezier(0.33, 1, 0.68, 1) 0.25s; }
  .splashimage img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; }

.splashlogo {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .splashlogo img,
  .splashlogo svg {
    display: block;
    width: 50vw;
    overflow: visible;
    transform: scale(0.95);
    transition: transform 1.5s cubic-bezier(0.33, 1, 0.68, 1); }
  .splashlogo #logo-custom,
  .splashlogo #logo-home,
  .splashlogo #logo-building {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
  @media screen and (min-width: 768px) {
    .splashlogo img,
    .splashlogo svg {
      width: 34.6527vw; } }

.e404 p + .cta {
  margin-top: 4em; }

.about {
  background-color: #525252; }
  .about .intro {
    position: relative;
    min-height: 51.38vw;
    padding-top: 120px;
    color: #fff; }
    @media screen and (min-width: 500px) {
      .about .intro {
        padding-top: 140px; } }
    @media screen and (min-width: 768px) {
      .about .intro {
        padding-top: 180px; } }
    @media screen and (min-width: 1024px) {
      .about .intro {
        padding-top: 200px; } }
    .about .intro .text h1 {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      margin-left: -.066em; }
    @media screen and (min-width: 768px) {
      .about .intro .text {
        margin: auto;
        width: 90%;
        max-width: 1100px; } }
    @media screen and (min-width: 1024px) {
      .about .intro .text {
        width: 92.5%; }
        .about .intro .text h1 {
          margin-left: 0; } }
    @media screen and (min-width: 1440px) and (min-height: 560px) {
      .about .intro .text h1 {
        margin-left: -.066em; } }
    .about .intro .image {
      position: absolute;
      right: 0;
      top: 0;
      width: 73.61vw;
      height: 100%; }
      .about .intro .image:after {
        content: '';
        display: block;
        position: absolute;
        z-index: 2;
        top: 1%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, transparent 0%, transparent 95%, #525252 95%, #525252 100%); }
      .about .intro .image .container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden; }
        .about .intro .image .container:before {
          content: '';
          display: block;
          position: absolute;
          z-index: 2;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: url(../images/svg/about-mask.svg);
          background-size: 100% 100%; }
      .about .intro .image .inner {
        position: absolute;
        top: -10%;
        left: 0;
        width: 100%;
        height: 110%; }
      .about .intro .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center; }
      @media screen and (min-width: 1440px) and (min-height: 560px) {
        .about .intro .image {
          width: calc(1060px + ((100vw - 1440px) / 2)); } }
  .about .body {
    margin-top: 60px;
    padding-bottom: 60px;
    color: #fff; }
    .about .body .p + .p {
      margin-top: 2em; }
    .about .body p + p {
      margin-top: 2em; }
    .about .body p + blockquote {
      margin-top: 1.5em; }
    .about .body blockquote {
      line-height: 1.0; }
      .about .body blockquote p {
        margin-left: auto;
        width: 92.5%; }
    @media screen and (min-width: 768px) {
      .about .body {
        margin-top: 120px; }
        .about .body .text {
          margin: auto;
          width: 90%;
          max-width: 1040px; }
        .about .body p + blockquote {
          margin-top: 1em; } }
    @media screen and (min-width: 1024px) {
      .about .body .columns {
        column-count: 2;
        column-gap: 24px; }
      .about .body .p + .p {
        margin-top: 3.5em; } }
  .about .instagram {
    position: relative;
    padding-bottom: 80px;
    background-color: #fff; }
    .about .instagram:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background-image: url(../images/svg/about-curve.svg);
      background-color: #525252;
      background-size: 100% 100%; }
    .about .instagram:after {
      content: '';
      display: block;
      position: absolute;
      top: 1%;
      left: 0;
      width: 100%;
      height: 50%;
      background: linear-gradient(180deg, transparent 0%, transparent 75%, #fff 75%, #fff 100%); }
    @media screen and (min-width: 768px) {
      .about .instagram {
        padding-bottom: 180px; } }
    .about .instagram .center {
      position: relative;
      z-index: 2; }
    .about .instagram .text {
      padding-top: 120px;
      text-align: center; }
      .about .instagram .text:before {
        content: '';
        display: block;
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #525252; }
      @media screen and (min-width: 768px) {
        .about .instagram .text {
          padding-top: 200px; } }
      @media screen and (min-width: 1024px) {
        .about .instagram .text {
          padding-top: 240px; }
          .about .instagram .text h2 {
            font-size: 142px; } }
    .about .instagram .feed {
      position: relative;
      margin: 30px auto 0;
      background-color: #fff; }
      .about .instagram .feed:before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50vw;
        width: 100vw;
        height: 50%;
        background-color: #525252; }
      .about .instagram .feed:after {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 80px;
        background-color: #525252; }
      .about .instagram .feed ul {
        display: flex;
        position: relative;
        margin: auto;
        padding-left: 20px; }
        .about .instagram .feed ul:before {
          content: '';
          display: block;
          position: absolute;
          top: -1px;
          left: 50%;
          margin-left: -50vw;
          width: 100vw;
          height: 2px;
          background-color: #fff; }
        .about .instagram .feed ul:after {
          content: '';
          display: block;
          position: absolute;
          bottom: -1px;
          left: 50%;
          margin-left: -100vw;
          width: 200vw;
          height: 2px;
          background-color: #525252; }
      .about .instagram .feed li {
        flex: 1;
        position: relative;
        z-index: 2; }
        .about .instagram .feed li a {
          display: block;
          position: relative;
          overflow: hidden;
          transition: .35s; }
          .about .instagram .feed li a:before {
            content: '';
            display: block;
            width: 100%;
            height: 0;
            padding-top: 100%; }
          .about .instagram .feed li a img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .35s; }
          .about .instagram .feed li a:hover {
            transform: scale(0.95); }
            .about .instagram .feed li a:hover img {
              transform: scale(1.1); }
          .about .instagram .feed li a:active {
            transform: translate3d(0, 1px, 0) scale(0.925);
            transition: .15s; }
        .about .instagram .feed li + li {
          margin-left: 20px; }
        @media (max-width: 599px) {
          .about .instagram .feed li:nth-child(3), .about .instagram .feed li:nth-child(4) {
            display: none; } }
        @media (max-width: 959px) {
          .about .instagram .feed li:nth-child(4) {
            display: none; } }
      @media (min-width: 500px) {
        .about .instagram .feed ul {
          padding-left: 30px; } }
      @media (min-width: 640px) {
        .about .instagram .feed ul {
          padding-left: 40px; } }
      @media screen and (min-width: 768px) {
        .about .instagram .feed {
          margin-top: 40px; }
          .about .instagram .feed ul {
            padding: 0;
            width: calc(100vw - (50vw - (100vw - 104px) * .45));
            margin-left: auto;
            margin-right: 0; }
          .about .instagram .feed li + li {
            margin-left: 24px; } }
      @media screen and (min-width: 768px) {
        .about .instagram .feed:after {
          height: 180px; } }
      @media screen and (min-width: 1024px) {
        .about .instagram .feed {
          margin-top: 50px; }
          .about .instagram .feed ul {
            width: calc(100vw - (50vw - (100vw - 128px) * .45)); } }
      @media screen and (min-width: 1280px) {
        .about .instagram .feed ul {
          /* margin-left: auto;
          margin-right: 0;
          padding: 0; */
          width: calc(100vw - (50vw - (100vw - 160px) * .45));
          max-width: calc(100vw - ((100vw - 1040px) / 2)); } }
      @media screen and (min-width: 1280px) and (min-height: 768px) {
        .about .instagram .feed ul {
          width: calc(100vw - (50vw - (100vw - 184px) * .45));
          max-width: calc(100vw - ((100vw - 1040px) / 2)); } }

.page-template-page-contact header .logo {
  visibility: hidden;
  pointer-events: none; }

.contact {
  background-color: #292B2E;
  color: #fff;
  padding-bottom: 60px; }
  @media screen and (min-width: 768px) {
    .contact {
      padding-bottom: 0;
      background-color: #525252; } }
  .contact ~ footer {
    display: none; }
  @media screen and (min-width: 768px) {
    .contact .center {
      min-height: 100vh; } }
  @media screen and (min-width: 1280px) {
    .contact .center {
      display: flex; } }
  .contact .header {
    position: relative;
    padding: 48px 0 32px;
    background-color: #525252; }
    .contact .header:before {
      content: '';
      display: block;
      position: absolute;
      transform: rotate(90deg);
      transform-origin: left top;
      top: 100%;
      left: 100%;
      width: 50%;
      height: 100vw;
      background-image: url(../images/svg/contact-curve.svg);
      background-color: inherit;
      background-size: 100% 100%; }
    @media screen and (min-width: 768px) {
      .contact .header {
        display: flex;
        position: fixed;
        top: 0;
        margin-left: 0;
        height: 100%;
        width: 20%;
        padding: 0;
        text-align: center; }
        .contact .header:before {
          transform: none;
          top: 0;
          left: 75%;
          width: 600%;
          height: 100%; }
        .contact .header .center {
          margin: 0;
          padding: 0; }
        .contact .header h1 {
          writing-mode: vertical-rl;
          text-orientation: mixed;
          transform: rotate(180deg);
          margin-left: .066em;
          height: 100%;
          text-align: center; } }
    @media (min-width: 900px) and (max-height: 699px) {
      .contact .header h1 {
        font-size: 166px; } }
    @media screen and (min-width: 1024px) {
      .contact .header {
        padding-left: 20px; }
        .contact .header:before {
          left: 100%;
          width: 500%; } }
    @media screen and (min-width: 1280px) {
      .contact .header {
        width: 250px;
        padding-left: 30px; }
        .contact .header:before {
          width: 600%; } }
  .contact .text {
    position: relative;
    z-index: 2;
    padding-top: 70px;
    width: 60%; }
    @media screen and (min-width: 768px) {
      .contact .text {
        margin-left: 40%;
        width: 40%; } }
    @media screen and (min-width: 1024px) {
      .contact .text {
        margin-left: 45%;
        width: 30%;
        max-width: 260px; } }
    @media screen and (min-width: 1280px) {
      .contact .text {
        margin-left: 34%; } }
    @media (min-width: 1280px) and (min-height: 720px) {
      .contact .text {
        padding-top: 15vh; } }
  .contact .details {
    position: relative;
    z-index: 2;
    padding-top: 60px; }
    .contact .details .label {
      color: #B6A57A; }
    .contact .details a {
      color: inherit; }
    @media screen and (min-width: 768px) {
      .contact .details {
        margin-left: 40%;
        padding-bottom: 70px; } }
    @media screen and (min-width: 1024px) {
      .contact .details {
        margin-left: 45%; } }
    @media screen and (min-width: 1280px) {
      .contact .details {
        flex: 1;
        margin-left: 70px; } }
    @media (min-width: 1280px) and (min-height: 720px) {
      .contact .details {
        padding-top: 15vh; } }
  .contact .methods li + li {
    margin-top: 20px; }
  .contact .methods a {
    display: inline-block;
    transform-origin: left;
    transition: .35s; }
    .contact .methods a:hover, .contact .methods a:focus {
      transform: scale(0.975);
      opacity: .7; }
    .contact .methods a:active {
      transform: translate3d(0, 1px, 0) scale(0.95);
      transition: .15s; }
  .contact .newsletter {
    margin-top: 100px; }
    .contact .newsletter button svg {
      color: #fff; }
    .contact .newsletter button:hover svg path, .contact .newsletter button:focus svg path {
      fill: #292B2E; }
    .contact .newsletter + .social {
      margin-top: 40px; }
  .contact .social svg {
    color: #fff; }

.home .hero {
  position: relative;
  width: 100vw;
  height: 80vh; }
  .home .hero .text {
    position: absolute;
    z-index: 2;
    top: 101px;
    left: 0;
    width: 100%; }
    .home .hero .text .h1 {
      padding-left: 4px;
      font-size: 64px;
      text-transform: uppercase;
      color: #fff; }
      .home .hero .text .h1 span {
        display: block;
        width: 0; }
  .home .hero .image {
    width: 100%;
    height: 100%; }
  .home .hero:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 20%;
    background-image: url(../images/svg/home-black-curve.svg);
    background-size: 100% 100%; }
  .home .hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media (min-width: 500px) {
    .home .hero .text {
      top: 121px; }
      .home .hero .text .h1 {
        font-size: 72px; } }
  @media screen and (min-width: 768px) {
    .home .hero {
      height: 100vh; }
      .home .hero:before {
        height: 40%; }
      .home .hero .text {
        top: 151px; }
        .home .hero .text .h1 {
          margin: auto;
          width: 90%;
          max-width: 1040px;
          font-size: 72px; } }
  @media screen and (min-width: 1024px) {
    .home .hero .text .h1 {
      width: 85%;
      font-size: 101px; } }
  @media screen and (min-width: 1280px) {
    .home .hero .text .h1 {
      font-size: 135px; } }

.home .intro {
  position: relative;
  z-index: 2;
  padding-top: 115px;
  background-color: #292B2E;
  color: #fff; }
  .home .intro:before {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 20%;
    background-image: url(../images/svg/home-white-curve.svg);
    background-color: #292b2f;
    background-size: 100% 100%; }
  .home .intro .text {
    position: relative;
    padding-top: 50px;
    max-width: 575px; }
  .home .intro h1 {
    position: absolute;
    bottom: 100%;
    left: 0; }
    @media (max-height: 539px) {
      .home .intro h1 {
        transform: none; } }
    @media (min-width: 768px) and (max-height: 599px) {
      .home .intro h1 {
        transform: none; } }
    @media (min-width: 900px) and (max-height: 739px) {
      .home .intro h1 {
        transform: none; } }
  .home .intro .image {
    position: relative;
    z-index: 2;
    margin-top: 100px; }
    .home .intro .image img {
      width: 100%; }
  @media screen and (min-width: 768px) {
    .home .intro:before {
      bottom: auto;
      top: 100%;
      height: 50%; }
    .home .intro:after {
      content: '';
      display: block;
      position: absolute;
      z-index: 2;
      top: 101%;
      left: 0;
      width: 100%;
      height: 50%;
      background: linear-gradient(180deg, transparent 0%, transparent 75%, #fff 75%, #fff 100%); }
    .home .intro .center {
      display: flex; }
    .home .intro .text {
      padding-top: 0;
      padding-bottom: 60px;
      width: 50%;
      max-width: 400px; }
    .home .intro .image {
      flex: 1;
      margin-top: 0;
      padding-left: 60px; } }
  @media (min-width: 900px) {
    .home .intro:before {
      top: 85%; }
    .home .intro:after {
      top: 86%; }
    .home .intro .text {
      width: 40%; }
    .home .intro .center {
      padding-left: 8vw; } }
  @media screen and (min-width: 960px) {
    .home .intro:before {
      top: 80%; }
    .home .intro:after {
      top: 81%; }
    .home .intro .text {
      width: 45%; }
    .home .intro .center {
      padding-left: 8vw; } }
  @media screen and (min-width: 1024px) {
    .home .intro .center {
      padding-left: 9.930vw;
      padding-right: 9.930vw; }
    .home .intro .text {
      width: 40%;
      padding-top: 70px; }
    .home .intro .image {
      padding-left: 60px; } }
  @media screen and (min-width: 1280px) {
    .home .intro:before {
      top: 70%; }
    .home .intro:after {
      top: 71%; }
    .home .intro .image {
      margin-top: -20px;
      padding-left: 80px; } }
  @media screen and (min-width: 1440px) and (min-height: 560px) {
    .home .intro:before {
      top: 65%; }
    .home .intro:after {
      top: 66%; }
    .home .intro .center {
      padding-left: 200px;
      padding-right: 143px; }
    .home .intro .image {
      margin-top: -40px;
      padding-left: 120px; } }
  @media (min-width: 768px) and (max-height: 599px) {
    .home .intro .image {
      margin-top: 20px; } }
  @media (min-width: 900px) and (max-height: 739px) {
    .home .intro .image {
      margin-top: 40px; } }

.home .discover {
  position: relative;
  z-index: 2;
  padding-top: 100px;
  padding-bottom: 80px; }
  .home .discover .text {
    max-width: 575px; }
  .home .discover h3 {
    color: #B6A57A; }
  @media (min-width: 900px) {
    .home .discover {
      padding-top: 20px; } }
  @media screen and (min-width: 1024px) {
    .home .discover {
      padding-top: 0; } }
  @media screen and (min-width: 1280px) {
    .home .discover {
      margin-top: -5vw; } }
  @media screen and (min-width: 1440px) and (min-height: 560px) {
    .home .discover {
      margin-top: -160px; } }

.home .projects {
  position: relative;
  padding-bottom: 117px;
  background-color: #525252; }
  .home .projects:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15vw;
    background-color: #fff; }
  @media screen and (min-width: 768px) {
    .home .projects:before {
      height: 7.5vw; } }
  .home .projects .swiper-slide {
    position: relative;
    z-index: 2;
    width: 37.5vw;
    padding-right: 5vw; }
    .home .projects .swiper-slide:last-child {
      width: 32.5vw;
      padding-right: 0; }
    .home .projects .swiper-slide a {
      display: block;
      position: relative;
      width: 100%;
      transition: .35s; }
      .home .projects .swiper-slide a:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 144.3333%; }
      .home .projects .swiper-slide a:hover {
        transform: scale(0.95); }
        .home .projects .swiper-slide a:hover .image img {
          transform: scale(1.1); }
        .home .projects .swiper-slide a:hover .expand {
          transform: scale(0.95);
          opacity: .7; }
      .home .projects .swiper-slide a:active {
        transform: translate3d(0, 1px, 0) scale(0.925);
        transition: .15s; }
    .home .projects .swiper-slide .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
      .home .projects .swiper-slide .image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: .35s; }
    .home .projects .swiper-slide .expand {
      position: absolute;
      z-index: 2;
      bottom: 10px;
      right: 10px;
      transition: .35s; }
      .home .projects .swiper-slide .expand svg {
        display: block;
        width: 7.5vw;
        max-width: 57px;
        height: 7.5vw;
        max-height: 57px; }
    .home .projects .swiper-slide .text {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      color: #fff; }
      .home .projects .swiper-slide .text h3 {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        text-orientation: inherit;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding-top: 1.1458vw;
        margin-left: -.4em;
        font-family: "Placard MT Std Cond", sans-serif;
        font-weight: 400;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 7vw;
        letter-spacing: .010461em;
        text-transform: uppercase; }
        .home .projects .swiper-slide .text h3:before {
          content: '';
          float: right;
          width: 1px;
          height: 15vw; }
    @media screen and (min-width: 768px) {
      .home .projects .swiper-slide {
        width: 23.8194vw;
        padding-right: 2.9861vw; }
        .home .projects .swiper-slide:last-child {
          width: 20.8333vw;
          padding-right: 0; }
        .home .projects .swiper-slide .expand {
          bottom: 1.3888vw;
          right: 1.3888vw; }
        .home .projects .swiper-slide .text h3 {
          padding-bottom: 1.1458vw;
          font-size: 4.5138vw;
          font-size: 3.6vw; }
          .home .projects .swiper-slide .text h3:before {
            height: 7.5vw; } }
  .home .projects .swiper-buttons {
    display: flex;
    justify-content: center;
    margin-top: 57px; }
  .home .projects .swiper-button svg circle {
    stroke: #fff;
    fill: transparent; }
  .home .projects .swiper-button svg path {
    fill: #fff; }
  .home .projects .swiper-button a {
    display: block;
    transition: .35s; }
    .home .projects .swiper-button a svg circle,
    .home .projects .swiper-button a svg path {
      transition: .35s; }
    .home .projects .swiper-button a:hover, .home .projects .swiper-button a:focus {
      transform: scale(0.95);
      opacity: .7; }
      .home .projects .swiper-button a:hover svg circle, .home .projects .swiper-button a:focus svg circle {
        fill: #fff; }
      .home .projects .swiper-button a:hover svg path, .home .projects .swiper-button a:focus svg path {
        fill: #292B2E; }
    .home .projects .swiper-button a:active {
      transform: translate3d(0, 1px, 0) scale(0.9);
      transition: .15s; }
  .home .projects .swiper-button.prev svg {
    transform: rotate(180deg); }
  .home .projects .swiper-button + .swiper-button {
    margin-left: 23px; }

.home .contactUs {
  position: relative;
  padding-top: 100px;
  padding-bottom: 60px;
  overflow: hidden; }
  .home .contactUs .background {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px); }
    .home .contactUs .background img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .home .contactUs .text {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 575px; }
  @media screen and (min-width: 768px) {
    .home .contactUs {
      padding-top: 150px;
      padding-bottom: 70px; }
      .home .contactUs .text {
        max-width: 533px; } }

.label.dash:before {
  content: '\2014';
  margin-right: .33em; }

.portfolio .intro {
  position: relative;
  padding: 150px 0 48px 0;
  background-color: #304243;
  color: #fff; }
  .portfolio .intro:before {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/svg/portfolio-curve.svg);
    background-color: inherit;
    background-size: 100% 100%; }
  .portfolio .intro:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #304243; }
  .portfolio .intro .center {
    position: relative;
    z-index: 2; }
  .portfolio .intro h1 + .p {
    margin-top: 50px; }
  @media screen and (min-width: 500px) {
    .portfolio .intro {
      padding-top: 160px; } }
  @media screen and (min-width: 768px) {
    .portfolio .intro {
      padding-top: 180px; }
      .portfolio .intro:before {
        height: 150%; }
      .portfolio .intro .text {
        margin: auto;
        width: 90%;
        max-width: 1040px; } }
  @media screen and (min-width: 1024px) {
    .portfolio .intro {
      padding-bottom: 24px; }
      .portfolio .intro:before {
        height: 200%; }
      .portfolio .intro .text {
        width: 85%; } }
  @media screen and (min-width: 1280px) {
    .portfolio .intro:before {
      top: 92.5%;
      height: 300%; }
    .portfolio .intro:after {
      bottom: auto;
      top: 92.5%;
      margin-top: -2px; } }

.portfolio .projects {
  position: relative;
  z-index: 2;
  padding-top: 100px; }
  @media screen and (min-width: 768px) {
    .portfolio .projects {
      padding-top: 120px; } }
  @media screen and (min-width: 1280px) {
    .portfolio .projects {
      padding-top: 150px; } }

.portfolio .filter .toolbar {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2; }

.portfolio .filter .actions {
  position: relative;
  padding-left: 16px; }

.portfolio .filter .hamburger {
  width: 29px;
  height: 29px; }
  .portfolio .filter .hamburger:before {
    border: 1px solid #979797;
    opacity: .5; }
  .portfolio .filter .hamburger .bun,
  .portfolio .filter .hamburger .patty {
    height: 1px; }
  .portfolio .filter .hamburger .bun:last-child {
    margin-top: 0; }
  .portfolio .filter .hamburger:hover:before {
    background-color: #979797; }
  .portfolio .filter .hamburger.is-open .bun {
    margin-top: 0; }
    .portfolio .filter .hamburger.is-open .bun:first-child {
      top: 50%;
      transform: translate3d(0, -50%, 0) rotate(45deg); }
    .portfolio .filter .hamburger.is-open .bun:last-child {
      top: 50%;
      transform: translate3d(0, -50%, 0) rotate(-45deg); }
  .portfolio .filter .hamburger.is-open .patty {
    opacity: 0; }
  .portfolio .filter .hamburger.is-open + .categories {
    height: auto; }

.portfolio .filter select {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; }
  @media screen and (min-width: 640px) {
    .portfolio .filter select {
      display: none; } }

.portfolio .filter .categories {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  height: 0;
  overflow: hidden; }
  .portfolio .filter .categories ul {
    padding: 20px 30px;
    background-color: #fff; }
  .portfolio .filter .categories li.is-unhovered a {
    opacity: .5; }
  .portfolio .filter .categories li a {
    color: #292B2E;
    transition: .35s; }
    .portfolio .filter .categories li a.is-active {
      font-weight: 600; }

@media screen and (min-width: 1440px) and (min-height: 560px) {
  .portfolio .filter .h3 {
    font-size: 74px; } }

.portfolio .list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 80px;
  margin-top: 30px; }
  @media (min-width: 560px) {
    .portfolio .list {
      grid-template-columns: 1fr 1fr;
      column-gap: 24px;
      row-gap: 100px; } }
  @media screen and (min-width: 960px) {
    .portfolio .list {
      grid-template-columns: 1fr 1fr 1fr;
      row-gap: 146px; } }
  .portfolio .list li {
    position: relative; }
    .portfolio .list li.is-hidden {
      display: none; }
    .portfolio .list li a {
      display: block;
      transition: .35s; }
      .portfolio .list li a img {
        transition: .35s; }
      .portfolio .list li a:hover, .portfolio .list li a:focus {
        transform: scale(0.975); }
        .portfolio .list li a:hover img, .portfolio .list li a:focus img {
          transform: scale(1.1); }
        .portfolio .list li a:hover .cta .btn, .portfolio .list li a:focus .cta .btn {
          background-color: #292B2E;
          color: #fff;
          opacity: 1; }
      .portfolio .list li a:active {
        transform: translate3d(0, 1px, 0) scale(0.95);
        transition: .15s; }
    .portfolio .list li .image {
      position: relative;
      overflow: hidden; }
      .portfolio .list li .image:before {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        padding-top: 144.139%; }
      .portfolio .list li .image:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 75%;
        background: linear-gradient(to bottom, rgba(41, 43, 46, 0), rgba(41, 43, 46, 0.7)); }
      .portfolio .list li .image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .portfolio .list li .text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 0 24px 52px;
      text-align: center;
      color: #fff; }
      .portfolio .list li .text .h3 {
        line-height: 1.0; }
        @media screen and (min-width: 768px) {
          .portfolio .list li .text .h3 {
            font-size: 51px; } }
    .portfolio .list li .cta {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%; }
      .portfolio .list li .cta .btn {
        transform: translateY(50%);
        margin: auto;
        width: 80%;
        background-color: #fff; }

.portfolio footer {
  margin-top: 120px; }

.project .hero img {
  transform: translateY(-5%) scale(1.1);
  min-height: 300px;
  width: 100vw;
  object-fit: cover; }

.project .intro {
  padding-top: 80px;
  padding-bottom: 100px;
  background-color: #292B2E;
  color: #fff; }
  .project .intro .pagination {
    position: relative; }
  .project .intro .buttons {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: -40px;
    right: 0; }
    @media screen and (min-width: 500px) {
      .project .intro .buttons {
        top: -20px; } }
    @media screen and (min-width: 640px) {
      .project .intro .buttons {
        top: 0; } }
  .project .intro .previous svg circle,
  .project .intro .next svg circle {
    stroke: #fff;
    fill: #292B2E; }
  .project .intro .previous svg path,
  .project .intro .next svg path {
    fill: #fff; }
  .project .intro .previous a,
  .project .intro .next a {
    display: block;
    transition: .35s; }
    .project .intro .previous a svg circle,
    .project .intro .previous a svg path,
    .project .intro .next a svg circle,
    .project .intro .next a svg path {
      transition: .35s; }
    .project .intro .previous a:hover, .project .intro .previous a:focus,
    .project .intro .next a:hover,
    .project .intro .next a:focus {
      transform: scale(0.95);
      opacity: .7; }
      .project .intro .previous a:hover svg circle, .project .intro .previous a:focus svg circle,
      .project .intro .next a:hover svg circle,
      .project .intro .next a:focus svg circle {
        fill: #fff; }
      .project .intro .previous a:hover svg path, .project .intro .previous a:focus svg path,
      .project .intro .next a:hover svg path,
      .project .intro .next a:focus svg path {
        fill: #292B2E; }
    .project .intro .previous a:active,
    .project .intro .next a:active {
      transform: translate3d(0, 1px, 0) scale(0.9);
      transition: .15s; }
  .project .intro .previous svg {
    transform: rotate(180deg); }
  .project .intro .next {
    margin-top: 20px; }
  .project .intro .text .label + .h2 {
    margin-top: .25em; }
  .project .intro .text .h2 {
    line-height: 1.0; }
  .project .intro .text p + p {
    margin-top: 1em; }
  .project .intro .label {
    color: #B6A57A; }
  .project .intro h1 {
    max-width: 80%; }
    .project .intro h1 + .p {
      margin-top: 20px; }
  @media screen and (min-width: 768px) {
    .project .intro {
      padding-top: 100px; }
      .project .intro .text {
        margin: auto;
        width: 90%;
        max-width: 1040px; }
      .project .intro h1 {
        max-width: 90%; }
      .project .intro .p {
        width: 85%;
        max-width: 720px; } }
  @media screen and (min-width: 1024px) {
    .project .intro .text {
      width: 85%; }
    .project .intro h1 {
      max-width: none; }
    .project .intro .p {
      width: 75%; } }

.project .details {
  margin-top: -1px; }

.project .gallery:first-child {
  position: relative;
  background-color: #292B2E; }
  .project .gallery:first-child:before {
    content: '';
    display: block;
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/svg/project-curve.svg);
    background-color: inherit;
    background-size: 100% 100%; }
  .project .gallery:first-child:after {
    content: '';
    display: block;
    position: absolute;
    top: 6%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, transparent 75%, #fff 75%, #fff 100%); }
  @media (min-width: 960px) {
    .project .gallery:first-child:before {
      top: 2.5%; } }

.project .gallery .images {
  position: relative;
  z-index: 2; }

.project .gallery .image {
  font-size: 0;
  text-align: center; }
  .project .gallery .image a {
    display: inline-block;
    overflow: hidden;
    transition: .35s; }
    .project .gallery .image a img {
      transition: .35s; }
    .project .gallery .image a:hover {
      transform: scale(0.95); }
      .project .gallery .image a:hover img {
        transform: scale(1.1); }
    .project .gallery .image a:active {
      transform: translate3d(0, 1px, 0) scale(0.925);
      transition: .15s; }
  .project .gallery .image + .image {
    margin-top: 60px; }

.project .gallery img {
  margin: auto; }

.project .gallery + .banner,
.project .gallery + .gallery {
  margin-top: 80px; }

@media (min-width: 960px) {
  .project .gallery .images {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .project .gallery .images.odd:before {
      content: '';
      display: block;
      width: 50%; }
    .project .gallery .images.odd .image:nth-child(even) {
      padding-right: 12px; }
    .project .gallery .images.odd .image:nth-child(odd) {
      padding-left: 12px; }
    .project .gallery .images.odd .image:nth-child(2n + 2) {
      align-self: flex-start;
      padding-bottom: 20%; }
    .project .gallery .images.odd .image:nth-child(2n + 3) {
      align-self: flex-end;
      padding-top: 20%; }
    .project .gallery .images.even .image:nth-child(even) {
      padding-left: 12px; }
    .project .gallery .images.even .image:nth-child(odd) {
      padding-right: 12px; }
    .project .gallery .images.even .image:nth-child(2n) {
      align-self: flex-end;
      padding-top: 20%; }
    .project .gallery .images.even .image:nth-child(2n + 1) {
      align-self: flex-start;
      padding-bottom: 20%; }
  .project .gallery .image {
    width: 50%; }
    .project .gallery .image + .image {
      margin-top: 100px; }
  .project .gallery + .banner,
  .project .gallery + .gallery {
    margin-top: 140px; } }

.project .banner {
  position: relative;
  background-color: #292B2E;
  overflow: hidden; }
  .project .banner .image {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px); }
  .project .banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .project .banner .center {
    position: relative;
    z-index: 2; }
  .project .banner .text {
    padding-top: 120px;
    padding-bottom: 110px;
    color: #fff;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .project .banner .text {
        margin: auto;
        width: 85%;
        max-width: 920px;
        padding-top: 180px;
        padding-bottom: 170px; } }
    @media screen and (min-width: 1024px) {
      .project .banner .text {
        width: 75%; } }
  .project .banner .label + .h3 {
    margin-top: 40px; }
  .project .banner + .gallery {
    margin-top: 80px; }
  @media (min-width: 960px) {
    .project .banner + .gallery {
      margin-top: 140px; } }

.project footer {
  margin-top: 120px; }