@import url(//fast.fonts.net/cssapi/6c4175ab-9353-4eb3-a747-305bd89c4083.css);/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

/*
 * Figure to wrap images
 *
 * --------------------------------------------------
 */

.image-wrapper {
  height: 100%;
  width: 100%;
  line-height: 0;
  /*
   * Images
   *
   * --------------------------------------------------
   */
}

.image-wrapper:not(.-lazy) {
  -webkit-animation: fade-in 0.6s forwards;
  animation: fade-in 0.6s forwards;
}

.image-wrapper.-fadeOut {
  -webkit-animation: fade-out 0.6s forwards;
  animation: fade-out 0.6s forwards;
}

.image-wrapper.-img-not-found img {
  display: none;
}

.image-wrapper img {
  object-fit: cover;
  font-family: "object-fit: cover";
  width: 100%;
  height: 100%;
  position: relative;
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.video-container {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 100%;
  position: absolute;
}

.video-container:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}

.video-container > .aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.video-container.-ready .video {
  -webkit-animation: fade-in 0.5s forwards;
  animation: fade-in 0.5s forwards;
}

.video-container.-error .image-wrapper {
  visibility: visible;
}

.video-container .-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: background 0.4s ease-in-out;
}

.video-container .image-wrapper {
  z-index: 0;
  opacity: 0;
  display: none;
}

.video-container .video {
  z-index: 2;
  border: none;
  opacity: 0;
  right: 0;
  bottom: 0;
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

/*
 * First container for images, 2x images or videos
 *
 * --------------------------------------------------
 */

.thumbnail-container {
  width: 100.1%;
  height: 100.1%;
  opacity: 1;
  overflow: hidden;
}

.thumbnail-container .-lazy:not(.-fadeOut) {
  opacity: 0;
}

.thumbnail-container .-lazy:not(.-fadeOut).-loaded {
  -webkit-animation: fade-in 0.5s forwards;
  animation: fade-in 0.5s forwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.thumbnail-container img:not([src]) {
  opacity: 0;
}

.thumbnail-container.-double-img .image-wrapper {
  position: absolute;
  overflow: hidden;
}

.thumbnail-container.-double-img .image-wrapper:first-child {
  visibility: hidden;
}

.thumbnail-container.-double-img .image-wrapper:first-child.-loaded {
  visibility: visible;
  transition: visibility;
  transition-delay: 1s;
}

/**
 * Hover animations
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes scale-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}.layout-thumbnail .link {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

/*
 * Main Layout container
 * --------------------------------------------------
 */

.layout {
  width: 100% !important;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.layout.-expanded .layout-thumbnail:not(.-open) {
  cursor: auto;
}

@media screen and (max-width: 767px) {
  .layout {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/*
 * Layout Thumbnail element
 * Represent the thumbnail for each project/page. Can have video, images or two images
 * Will have gridstack and masonry inline styles implemented on them
 * --------------------------------------------------
 */

.layout-thumbnail {
  opacity: 1;
  width: 50%;
  margin: 0;
  height: auto;
  z-index: 1;
  /*
   * Images inside this type of thumbnail
   *
   * --------------------------------------------------
   */
  /*
   * Link with titles and black overlay
   *
   * --------------------------------------------------
   */
}

@media screen and (max-width: 767px) {
  .layout-thumbnail[data-gs-width='1'] {
    width: 50%;
  }

  .layout-thumbnail[data-gs-width='2'],
  .layout-thumbnail[data-gs-width='3'],
  .layout-thumbnail[data-gs-width='4'] {
    width: 100%;
  }

  .layout-thumbnail[data-orientation='landscape'] {
    position: relative;
    position: absolute;
  }

  .layout-thumbnail[data-orientation='landscape']:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
  }

  .layout-thumbnail[data-orientation='landscape'] > .aspect-ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
  }

  .layout-thumbnail[data-orientation='portrait'] {
    position: relative;
    position: absolute;
  }

  .layout-thumbnail[data-orientation='portrait']:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 168.88889%;
  }

  .layout-thumbnail[data-orientation='portrait'] > .aspect-ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .layout-thumbnail[data-gs-width='1'],
  .layout-thumbnail[data-gs-width='2'],
  .layout-thumbnail[data-gs-width='3'] {
    cursor: pointer;
  }
}

.layout-thumbnail.-video,
.layout-thumbnail.-expandable {
  transition: all 0.5s ease-in-out, z-index 0s 0.5s;
  transition: top  0.7s ease-in-out, bottom  0.7s ease-in-out, left  0.7s ease-in-out, right 0.7s ease-in-out, height  0.7s ease-in-out, width  0.7s ease-in-out, z-index 0s 0s ease-in-out;
}

.layout-thumbnail.-bordered {
  border: calc(40px/4) solid #000;
}

@media screen and (min-width: 641px) {
  .layout-thumbnail.-bordered {
    border: calc(40px / 2) solid #000;
  }
}

.layout-thumbnail:hover:not(.-expandable) img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.layout-thumbnail.-open {
  width: 100%;
  z-index: 3;
  transition: top 0.5s ease-out, height 0.5s ease-out, width 0.5s ease-out, bottom 0.5s ease-out, position 0.5s ease-out, left 0.5s ease-out, z-index 0s 0s ease-in-out, -webkit-transform 0.5s ease-out;
  transition: top 0.5s ease-out, height 0.5s ease-out, width 0.5s ease-out, bottom 0.5s ease-out, position 0.5s ease-out, left 0.5s ease-out, transform 0.5s ease-out, z-index 0s 0s ease-in-out;
  transition: top 0.5s ease-out, height 0.5s ease-out, width 0.5s ease-out, bottom 0.5s ease-out, position 0.5s ease-out, left 0.5s ease-out, transform 0.5s ease-out, z-index 0s 0s ease-in-out, -webkit-transform 0.5s ease-out;
}

.layout-thumbnail.-open img {
  transition: all 0.5s ease-in-out;
}

@media screen and (max-width: 767px) {
  .layout-thumbnail.-open {
    left: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .layout-thumbnail.-open {
    width: auto;
    left: auto;
  }
}

.layout-thumbnail img {
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.layout-thumbnail .link {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100.1%;
  margin-bottom: 0;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  background: transparent;
  padding: 0 10px;
  transition-property: background;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.layout-thumbnail .link:hover {
  background: rgba(0, 0, 0, 0.5);
}

.layout-thumbnail .link .title {
  font-weight: normal;
  padding-bottom: 0;
  line-height: 1.53333;
  transition-property: font-size, line-height;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.layout-thumbnail .link .title.-project {
  font-weight: bold;
}

/*
 * Set styles only for medium up items used in gridstack
 *
 * --------------------------------------------------
 */

.grid-stack > .grid-stack-item {
  min-width: 8.3333333333%;
  position: absolute;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .grid-stack > .grid-stack-item[data-gs-width='0'] {
    width: 0%;
  }

  .grid-stack > .grid-stack-item[data-gs-x='0'] {
    left: 0;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-min-width='0'] {
    min-width: 0%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-max-width='0'] {
    max-width: 0%;
  }

  .grid-stack > .grid-stack-item[data-gs-width='1'] {
    width: 25%;
  }

  .grid-stack > .grid-stack-item[data-gs-x='1'] {
    left: 25%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-min-width='1'] {
    min-width: 25%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-max-width='1'] {
    max-width: 25%;
  }

  .grid-stack > .grid-stack-item[data-gs-width='2'] {
    width: 50%;
  }

  .grid-stack > .grid-stack-item[data-gs-x='2'] {
    left: 50%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-min-width='2'] {
    min-width: 50%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-max-width='2'] {
    max-width: 50%;
  }

  .grid-stack > .grid-stack-item[data-gs-width='3'] {
    width: 75%;
  }

  .grid-stack > .grid-stack-item[data-gs-x='3'] {
    left: 75%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-min-width='3'] {
    min-width: 75%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-max-width='3'] {
    max-width: 75%;
  }

  .grid-stack > .grid-stack-item[data-gs-width='4'] {
    width: 100%;
  }

  .grid-stack > .grid-stack-item[data-gs-x='4'] {
    left: 100%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-min-width='4'] {
    min-width: 100%;
  }

  .grid-stack > .grid-stack-item.grid-stack-item[data-gs-max-width='4'] {
    max-width: 100%;
  }
}

/*
 * Frame we use to show images on mobile, instead of expanding them
 *
 * --------------------------------------------------
 */

/*
 * Sample layout-thumbnail
 *
 * Hidden HTML element so we always have a 1 column 1 height element
 * to get values for masonry and gridstack, no matter which layout is created
 * Instead of using the @mixin aspect-ratio we define our own padding-top value to make sure the px values arecloser to a integer value,
 * we do this to because gridstack rounds the values and this makes a difference of decimals between our fallback grid and gridstack which
 * gives a 2px gap in all images
 * --------------------------------------------------
 */

.sample-thumbnail {
  visibility: hidden;
  position: absolute;
  width: 50%;
}

.sample-thumbnail:before,
.fallback-grid .thumbnail:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.225%;
}

@media screen and (min-width: 1440px) {
  .sample-thumbnail:before,
  .fallback-grid .thumbnail:before {
    padding-top: 56.1%;
  }
}

@media screen and (min-width: 768px) {
  .sample-thumbnail,
  .fallback-grid .thumbnail {
    width: 25%;
  }
}

/*
 * Overlay
 *
 * to be shown top of images that have not been expanded
 * --------------------------------------------------
 */

/*
 * Fallback bg images
 *
 * Block elemts with images in 16:9, we show these after expanding
 * images so the overlap the black wholes
 * --------------------------------------------------
 */

.layout .fallback-grid {
  width: 100%;
  height: auto;
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

@media screen and (max-width: 767px) {
  .layout .fallback-grid {
    display: none;
  }
}

.layout .fallback-grid .thumbnail {
  position: relative;
  visibility: visible;
  width: 25%;
  opacity: 0;
  background-position: center;
  background-size: cover;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.layout.-expanded .fallback-grid .thumbnail {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
  transition-timing-function: ease-in-out;
}.plus {
  margin: 0;
  padding: 0;
}

.plus {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  border-radius: 0;
}

.plus {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.plus {
  width: 23px;
  height: 23px;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.plus div {
  width: 100%;
  position: absolute;
  height: 3px;
  background: #fff;
  left: 0;
  border-radius: 20px;
  transition-property: opacity, left, top, -webkit-transform;
  transition-property: opacity, transform, left, top;
  transition-property: opacity, transform, left, top, -webkit-transform;
  transition-duration: .35s;
}

.plus div:nth-child(1) {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.plus.-active div:nth-child(1) {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.plus.-active div:nth-child(2) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.plus.-correct.-active div:nth-child(1) {
  -webkit-transform: rotate(-230deg);
  transform: rotate(-230deg);
}

.plus.-correct.-active div:nth-child(2) {
  top: 11px;
  width: 10px;
  /* right: 15px; */
  -webkit-transform: rotate(-140deg);
  transform: rotate(-140deg);
  left: -4px;
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.info .title,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01,
.info .title {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01,
  .info .title {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

.info {
  width: 12%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  height: 100%;
  transition: width ease-in 0.2s 0.8s;
}

@media screen and (min-width: 768px) {
  .info {
    width: 10%;
    height: calc(100% - 1px);
    height: 100%;
  }
}

.info.-scrollable {
  overflow-y: scroll;
  height: calc(100% - 1px);
  bottom: 0;
}

.info.-opened {
  transition: width ease-in 0s 0s;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .info.-opened {
    width: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .info.-opened {
    width: 30%;
  }
}

.info.-opened .container {
  overflow: hidden;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition-delay: 0s;
}

.info.-opened .container .title,
.info.-opened .container .text,
.info.-opened .container .details {
  -webkit-animation: content-slide-from-right 0.4s forwards;
  animation: content-slide-from-right 0.4s forwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.info.-opened .container .border:before {
  -webkit-animation: border-slide-from-right 0.5s forwards;
  animation: border-slide-from-right 0.5s forwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.info .title {
  transition: -webkit-transform ease-in-out 0.4s;
  transition: transform ease-in-out 0.4s;
  transition: transform ease-in-out 0.4s, -webkit-transform ease-in-out 0.4s;
  padding: 0 30px 10px 0;
}

.info .plus {
  position: absolute;
  top: calc(15px + 10px);
  right: 15px;
  z-index: 4;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (min-width: 641px) {
  .info .plus {
    width: 24px;
    height: 24px;
    top: 20px + 10px;
    right: 20px;
  }
}

.info .container {
  padding: 25px 15px 25px;
  background: rgba(0, 0, 0, 0.7);
  overflow: visible;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  transition: overflow 0s 2s, -webkit-transform .5s ease-in-out 0.4s;
  transition: transform .5s ease-in-out 0.4s, overflow 0s 2s;
  transition: transform .5s ease-in-out 0.4s, overflow 0s 2s, -webkit-transform .5s ease-in-out 0.4s;
}

@media screen and (min-width: 768px) {
  .info .container {
    padding: calc(20px - 2px) 20px 0;
    height: 100%;
  }
}

.info .container .border {
  width: 100%;
  overflow: hidden;
}

.info .container .border:before {
  content: '';
  height: 2px;
  display: block;
  background: #fff;
  opacity: 0;
  -webkit-animation: border-slide-to-right 0.5s forwards;
  animation: border-slide-to-right 0.5s forwards;
}

.info .container .border.-top {
  margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
  .info .container .border.-top {
    margin-bottom: 20px;
  }
}

.info .container .border.-bottom {
  margin-top: 15px;
}

@media screen and (min-width: 768px) {
  .info .container .border.-bottom {
    margin-top: 25px;
    margin-bottom: 40px;
  }
}

.info .container a {
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

.info .container .text::-webkit-scrollbar-track {
  border: 2px solid #000;
  background-color: #8A8A8A;
}

.info .container .text::-webkit-scrollbar {
  width: 6px;
  background-color: #8A8A8A;
}

.info .container .text::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 6px;
}

.info .container .text {
  padding: 0 5px 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100% - 150px);
}

.info .container .text.-text-height-1 {
  height: calc(100% - 170px);
}

.info .container .text.-text-height-2 {
  height: calc(100% - 190px);
}

.info .container .text.-text-height-3 {
  height: calc(100% - 210px);
}

.info .container .text.-text-height-4 {
  height: calc(100% - 230px);
}

.info .container .text.-text-height-5 {
  height: calc(100% - 250px);
}

.info .container .text.-text-height-6 {
  height: calc(100% - 270px);
}

.info .container .text.-text-height-7 {
  height: calc(100% - 290px);
}

.info .container .text.-text-height-8 {
  height: calc(100% - 310px);
}

.info .container .text.-text-height-9 {
  height: calc(100% - 330px);
}

.info .container .text.-text-height-10 {
  height: calc(100% - 350px);
}

.info .container .title,
.info .container .text,
.info .container .details {
  -webkit-animation: content-slide-to-right 0.4s forwards;
  animation: content-slide-to-right 0.4s forwards;
  opacity: 0;
}

.info .container .title,
.info .container .details {
  text-transform: lowercase;
}

@media screen and (min-width: 768px) {
  .info .container .bottom-section {
    width: calc(100% - 2 * 20px);
    position: absolute;
    bottom: 0;
  }
}

/**
 * Slide in
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes content-slide-from-right {
  0% {
    opacity: 0;
    -webkit-transform: translate(20%, 0);
    transform: translate(20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes content-slide-from-right {
  0% {
    opacity: 0;
    -webkit-transform: translate(20%, 0);
    transform: translate(20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes content-slide-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(20%, 0);
    transform: translate(20%, 0);
  }
}

@keyframes content-slide-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(20%, 0);
    transform: translate(20%, 0);
  }
}

/**
 * Slide in borders
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes border-slide-from-right {
  0% {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes border-slide-from-right {
  0% {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes border-slide-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

@keyframes border-slide-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

/*
 * Hero Container
 *
 * --------------------------------------------------
 */

.hero-container {
  position: relative;
  overflow: hidden;
  transition: overflow, position 0.3s ease-in-out;
}

.hero-container:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}

.hero-container > .aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.hero-container .video-container {
  top: 0;
  min-height: 0;
  height: 100%;
}

.hero-container .video-container .image-wrapper {
  display: block;
  opacity: 1;
}

.hero-container.-overflow-visible {
  overflow: visible;
}

.hero-container.-overflow-visible .image-wrapper {
  height: auto;
}

@media screen and (min-width: 768px) {
  .hero-container.-overflow-visible .image-wrapper img {
    height: auto;
  }
}

.hero-container.-overflow-visible .info {
  height: auto;
}

.hero-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover";
}

/*
 * Down Arrow
 *
 * --------------------------------------------------
 *//**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
.thumbnail .title,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01 {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

.thumbnail {
  position: relative;
  overflow: hidden;
}

.thumbnail:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 0.6;
}

@media screen and (min-width: 768px) {
  .thumbnail:hover .title,
  .thumbnail:hover .location {
    color: #8A8A8A;
  }
}

.thumbnail .image-wrapper {
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
  background: #000;
}

.thumbnail .image-wrapper:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}

.thumbnail .image-wrapper > .aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.thumbnail .image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.thumbnail .link {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.thumbnail .title,
.thumbnail .location {
  transition-property: color;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.thumbnail .title {
  line-height: 14px;
}

.thumbnail .location {
  font-size: calc(14px - 1px);
}

/**
 * Hover animations
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes show-text-with-fade {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0;
    font-size: 0;
  }

  50% {
    -webkit-transform: translate(0, -450%);
    transform: translate(0, -450%);
    text-align: center;
    opacity: 1;
  }

  100% {
    font-size: 16px;
    text-align: center;
    -webkit-transform: translate(0, -450%);
    transform: translate(0, -450%);
  }
}

@keyframes show-text-with-fade {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0;
    font-size: 0;
  }

  50% {
    -webkit-transform: translate(0, -450%);
    transform: translate(0, -450%);
    text-align: center;
    opacity: 1;
  }

  100% {
    font-size: 16px;
    text-align: center;
    -webkit-transform: translate(0, -450%);
    transform: translate(0, -450%);
  }
}

@-webkit-keyframes hide-text-with-fade {
  0% {
    opacity: 0;
    font-size: 16px;
    -webkit-transform: translate(0, -450%);
    transform: translate(0, -450%);
    text-align: center;
  }

  25% {
    opacity: 0;
    font-size: 0;
  }

  50% {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    text-align: left;
    font-size: 14px;
  }

  100% {
    opacity: 1;
  }
}

@keyframes hide-text-with-fade {
  0% {
    opacity: 0;
    font-size: 16px;
    -webkit-transform: translate(0, -450%);
    transform: translate(0, -450%);
    text-align: center;
  }

  25% {
    opacity: 0;
    font-size: 0;
  }

  50% {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    text-align: left;
    font-size: 14px;
  }

  100% {
    opacity: 1;
  }
}

/*
@keyframes show-text {
  0% {
    text-align: left;
    font-size: $body-font-size;
    transform: translate(0, 0);
  }
  100% {
    font-size: 16px;
    text-align: center;
    transform: translate(0, -450%);
  }
}

@keyframes hide-text {
  0% {
    font-size: 16px;
    text-align: center;
    transform: translate(0, -450%);
  }
  100% {
    text-align: left;
    font-size: $body-font-size;
    transform: translate(0, 0);

  }
}*/.suggestions {
  padding: 0 20px;
  margin: 0 auto;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.suggestions > .title,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01,
.suggestions > .title {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01,
  .suggestions > .title {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

.suggestions {
  background: #000;
  min-height: 200px;
  padding-top: 25px;
}

@media screen and (min-width: 768px) {
  .suggestions {
    padding-top: 70px;
    padding-bottom: 20px;
  }
}

.suggestions > .title {
  padding-bottom: 15px;
}

@media screen and (min-width: 641px) {
  .suggestions > .title {
    padding-bottom: 35px;
  }
}

.suggestions .columns {
  padding-bottom: 0;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (min-width: 641px) {
  .suggestions .columns {
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

.suggestions .columns .column:nth-last-child(2),
.suggestions .columns .column:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 641px) {
  .suggestions .columns .column {
    width: calc((100% / 2) - (40px * (2 - 1) / 2) - (0px * (3) / 2));
    margin-right: 40px;
  }

  .suggestions .columns .column:nth-child(2n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 768px) {
  .suggestions .columns .column {
    width: calc((100% / 4) - (40px * (4 - 1) / 4) - (0px * (5) / 4));
    margin-bottom: 0;
  }

  .suggestions .columns .column:nth-child(2n) {
    margin-right: 40px;
  }

  .suggestions .columns .column:nth-child(4n) {
    margin-right: 0;
  }
}.search-results {
  padding: 0 20px;
  margin: 0 auto;
}

.search-results.-noResults {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01 {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

.search-results {
  background: rgba(0, 0, 0, 0.7);
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  width: 100%;
  z-index: 12;
  overflow-y: scroll;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
  /*
   * Class for element when we have results
   * --------------------------------------------------
   */
  /*
   * Class for element when there are no results
   * --------------------------------------------------
   */
}

@media screen and (min-width: 641px) {
  .search-results {
    z-index: 5;
  }
}

.search-results.-hasResults {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  bottom: 0;
  top: 0;
  -webkit-animation: slide-to-right 0.4s forwards;
  animation: slide-to-right 0.4s forwards;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.search-results.-hasResults.-open {
  -webkit-animation: slide-from-right 0.4s forwards;
  animation: slide-from-right 0.4s forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.search-results.-hasResults.-open .thumbnail {
  -webkit-animation: fade-in 0.4s forwards;
  animation: fade-in 0.4s forwards;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.search-results.-noResults {
  top: 0;
  visibility: hidden;
  -webkit-transform: translate(0, -100px);
  transform: translate(0, -100px);
  height: auto;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-animation: hide-error 0.4s forwards;
  animation: hide-error 0.4s forwards;
}

.search-results.-noResults .error {
  padding: 0;
  font-size: 15px;
}

.search-results.-noResults.-open {
  visibility: visible;
  -webkit-animation: show-error 0.4s forwards;
  animation: show-error 0.4s forwards;
}

.search-results .columns {
  padding-bottom: 0;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.search-results .columns .column {
  width: calc((100% / 1) - (40px * (1 - 1) / 1) - (0px * (2) / 1));
}

@media screen and (max-width: 640px) {
  .search-results .columns .column:last-child {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 641px) {
  .search-results .columns .column {
    width: calc((100% / 2) - (40px * (2 - 1) / 2) - (0px * (3) / 2));
    margin-right: 40px;
  }

  .search-results .columns .column:nth-child(2n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 768px) {
  .search-results .columns .column {
    width: calc((100% / 4) - (40px * (4 - 1) / 4) - (0px * (5) / 4));
  }

  .search-results .columns .column:nth-child(2n) {
    margin-right: 40px;
  }

  .search-results .columns .column:nth-child(4n) {
    margin-right: 0;
  }
}

.search-results .thumbnail {
  opacity: 0;
  -webkit-animation: fade-out 0.4s forwards;
  animation: fade-out 0.4s forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

/*
 * Animations
 * --------------------------------------------------
 */

@-webkit-keyframes show-error {
  0% {
    -webkit-transform: translate(0, -100px);
    transform: translate(0, -100px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes show-error {
  0% {
    -webkit-transform: translate(0, -100px);
    transform: translate(0, -100px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes hide-error {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(0, -100px);
    transform: translate(0, -100px);
  }
}

@keyframes hide-error {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(0, -100px);
    transform: translate(0, -100px);
  }
}.text-input {
  margin: 0;
  padding: 0;
}

.text-input {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  border-radius: 0;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.input-container.-error .text-input {
  opacity: 0.5;
  border-bottom: 1px solid #000;
}

.input-container.-error .text-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #f5e2e2 inset;
}

.input-container.-error .input-feedback.-error {
  display: block;
  padding-top: 5px;
  max-height: 100px;
  visibility: visible;
  -webkit-animation: fade-in 0.2s forwards;
  animation: fade-in 0.2s forwards;
}

.input-label {
  display: block;
  margin: 27px 0 10px 0;
}

@media screen and (max-width: 640px) {
  .input-label {
    margin: 15px 0 10px 0;
  }
}

.text-input {
  width: auto;
  background: transparent;
  border: none;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #fff;
  color: #fff;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  font-size: inherit;
}

.text-input::-webkit-input-placeholder {
  color: #fff;
}

.text-input:-ms-input-placeholder {
  color: #fff;
}

.text-input::placeholder {
  color: #fff;
}

.text-input::-webkit-input-placeholder {
  color: #fff;
}

.text-input::-moz-placeholder {
  color: #fff;
}

.text-input:-ms-input-placeholder {
  color: #fff;
}

.text-input:-moz-placeholder {
  color: #fff;
}

.text-input:not(.-transparent) {
  background: #000;
}

.input-feedback {
  display: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  padding-top: 0;
  transition-property: max-height, opacity, visibility, padding;
  transition-duration: .35s;
}.button {
  margin: 0;
  padding: 0;
}

.button {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  border-radius: 0;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.button {
  color: #939598;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  transition: color .25s;
  cursor: pointer;
}

.button:disabled {
  cursor: default;
  color: #dfdfdf;
}

.button:not(:disabled):hover {
  color: #fff;
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  position: relative;
  font-family: "icon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.icon-check:before {
  content: "\E905";
}

.icon-plus:before {
  content: "\E900";
  color: #fff;
}

.icon-close:before {
  content: "\E901";
  color: #fff;
}

.icon-logo:before {
  content: "\E902";
  color: #fefefe;
}

.icon-menu:before {
  content: "\E903";
  color: #fff;
}

.icon-search:before {
  content: "\E904";
  color: #fff;
}.search-form-wrapper form {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.search-form-wrapper {
  position: relative;
  overflow: hidden;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

@media screen and (min-width: 1024px) {
  .search-form-wrapper {
    max-width: 300px;
  }
}

.search-form-wrapper.-expanded .input-container .text-input {
  width: 100%;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: .35s;
  transition-timing-function: ease-in-out;
}

.search-form-wrapper form {
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.search-form-wrapper .input-container {
  overflow: hidden;
  width: 100%;
}

.search-form-wrapper .text-input {
  width: 100%;
  border-bottom: 1px solid #fff;
  padding: 0 0 5px 0;
  -webkit-transform: translate(101%, 0);
  transform: translate(101%, 0);
  font-weight: bold;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: .35s;
  transition-timing-function: ease-in-out;
}

.search-form-wrapper .text-input::-webkit-input-placeholder {
  color: #8A8A8A;
}

.search-form-wrapper .text-input:-ms-input-placeholder {
  color: #8A8A8A;
}

.search-form-wrapper .text-input::placeholder {
  color: #8A8A8A;
}

.search-form-wrapper .text-input::-webkit-input-placeholder {
  color: #8A8A8A;
}

.search-form-wrapper .text-input:-ms-input-placeholder {
  color: #8A8A8A;
}

.search-form-wrapper .text-input::placeholder {
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.search-form-wrapper .text-input::-webkit-input-placeholder {
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.search-form-wrapper .text-input::-moz-placeholder {
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.search-form-wrapper .text-input:-ms-input-placeholder {
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.search-form-wrapper .text-input:-moz-placeholder {
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.search-form-wrapper button {
  font-size: 21px;
  margin-left: 5px;
  cursor: pointer;
}

.search-form-wrapper button .icon-close {
  top: 1px;
  position: relative;
}

.page-header.-small .search-form-wrapper {
  -ms-flex-positive: 2;
  flex-grow: 2;
  max-width: 100%;
}

@media screen and (min-width: 1024px) {
  .page-header.-small .search-form-wrapper {
    max-width: 100%;
  }
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.nav-item .nav-link,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01,
.nav-item .nav-link {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01,
  .nav-item .nav-link {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

/*
 * Navigation item
 *
 * --------------------------------------------------
 */

.nav-item {
  position: relative;
}

.nav-item .nav-link {
  color: rgba(255, 255, 255, 0.8);
  transition: color .2s ease-in-out;
}

@media screen and (min-width: 768px) {
  .nav-item .nav-link:hover {
    color: #fff;
  }
}

.nav-item .nav-link.-active {
  color: #fff;
}

/*
 * Navigation item when menu is OPEN
 *
 * --------------------------------------------------
 */

.-open .nav-list.-main > .nav-item {
  -webkit-animation: slide-from-right 0.4s forwards;
  animation: slide-from-right 0.4s forwards;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.-open .nav-list.-main > .nav-item:nth-child(0) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.-open .nav-list.-main > .nav-item:nth-child(1) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.-open .nav-list.-main > .nav-item:nth-child(2) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.-open .nav-list.-main > .nav-item:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.-open .nav-list.-main > .nav-item:nth-child(4) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.-open .nav-list.-main > .nav-item:nth-child(5) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

/*
 * First level nav-items
 *
 * --------------------------------------------------
 */

.nav-list.-main > .nav-item {
  padding-bottom: 20px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-animation: slide-to-right 0.4s forwards;
  animation: slide-to-right 0.4s forwards;
}

.nav-list.-main > .nav-item:nth-child(0) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.nav-list.-main > .nav-item:nth-child(1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.nav-list.-main > .nav-item:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.nav-list.-main > .nav-item:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.nav-list.-main > .nav-item:nth-child(4) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.nav-list.-main > .nav-item:nth-child(5) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

/*
 *Sub navigation nav-items
 *
 * --------------------------------------------------
 */

.nav-list.-sub .nav-link {
  color: #8A8A8A;
}

@media screen and (min-width: 768px) {
  .nav-list.-sub .nav-link:hover {
    color: #fff;
  }
}

.nav-list.-sub .nav-link.-active {
  color: #fff;
}.nav-wrapper {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

/*
 * Nav wrapper
 *
 * container for nav list and na items
 * --------------------------------------------------
 */

.nav-wrapper {
  width: 100%;
  z-index: 6;
  overflow-y: scroll;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  right: -100%;
  top: 60px;
  bottom: 0;
  padding: 60px 0 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  transition-property: right, top;
  transition-duration: .5s;
  transition-delay: .5s;
  transition-timing-function: ease-in-out;
}

@media screen and (min-width: 768px) {
  .nav-wrapper {
    width: 400px;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.nav-wrapper.-hidden {
  opacity: 0;
  pointer-events: none;
}

.nav-wrapper .nav-list.-main {
  overflow-y: scroll;
  box-sizing: content-box;
}

@media screen and (min-width: 768px) {
  .nav-wrapper .nav-list.-main {
    padding: 0 15px 0 0;
    overflow-x: hidden;
  }
}

.nav-wrapper .nav-list {
  width: 100%;
}

.nav-wrapper .nav-list.-sub {
  max-height: 0;
  overflow: hidden;
  height: auto;
  transition-property: max-height;
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

.nav-wrapper .nav-list.-show-children {
  transition-duration: 0.8s;
  transition-delay: 0.2s;
  max-height: 300px;
}

@media screen and (min-width: 768px) {
  .nav-wrapper .nav-list.-show-children {
    max-height: 500px;
  }
}

/*
 * Styles for when navigation is open
 *
 * --------------------------------------------------
 */

.page-header.-open .nav-wrapper {
  transition-delay: 0s;
  right: 0;
}

.page-header.-open .overlay {
  opacity: 1;
  pointer-events: auto;
}.burger {
  margin: 0;
  padding: 0;
}

.burger {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  border-radius: 0;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.burger {
  width: 21px;
  height: 21px;
  position: relative;
  cursor: pointer;
}

.burger div {
  width: 100%;
  min-width: 21px;
  position: absolute;
  height: 3px;
  background: #fff;
  left: 0;
  border-radius: 20px;
  transition-property: opacity, width, -webkit-transform;
  transition-property: opacity, transform, width;
  transition-property: opacity, transform, width, -webkit-transform;
  transition-duration: .35s;
}

.burger div:nth-child(1) {
  top: 0;
}

.burger div:nth-child(2) {
  top: 8px;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.burger div:nth-child(3) {
  top: 16px;
}

.burger.-active div {
  width: 120%;
  left: -2px;
}

.burger.-active div:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.burger.-active div:nth-child(2) {
  opacity: 0;
  -webkit-transform: translateX(-2px);
  transform: translateX(-2px);
}

.burger.-active div:nth-child(3) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}.page-header .wrapper,
.page-header .-big .column,
.page-header .-small .actions .logo,
.page-header .-small .-sub-container,
.page-header .-container,
.page-header .actions .burger {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01 {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

.page-header {
  color: #fff;
  width: 100%;
  min-height: 60px;
  z-index: 10;
  position: relative;
  transition-property: opacity, background;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  /*
   * Big header
   *
   * Big header with big text that shows when user first enters
   * and goes up on scrolling (not fixed)
   * --------------------------------------------------
   */
  /*
   * Small header
   * UPDATE NOT USING THIS IF CLIENT ACCPETS NEW ANIMATION
   * Smaller header without big text that sits fixed on top
   * --------------------------------------------------
   */
  /*
   * Small mobile header
   *
   * Styles for smaller header while on mobile viewport
   * --------------------------------------------------
   */
  /*
   * General styling
   *
   * Styles for both small and big wrappers
   * --------------------------------------------------
   */
}

.page-header.-green .wrapper {
  background: green !important;
}

.page-header.-red .wrapper {
  background: darkred !important;
}

@media screen and (min-width: 768px) {
  .page-header.-show-smaller .-big {
    background: none;
    transition-property: background;
    transition-timing-function: ease-in-out;
    transition-delay: 0.4s;
  }

  .page-header.-show-smaller .-big .actions {
    right: 146px;
    -ms-flex-align: center;
    align-items: center;
    height: 60px;
    padding-right: 60px;
    transition-delay: 0s;
    width: 100%;
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1023px) {
  .page-header.-show-smaller .-big .actions .search-form-wrapper {
    right: 140px;
    width: calc(100% - 300px);
  }
}

@media screen and (min-width: 768px) {
  .page-header.-show-smaller .-big .copy.-mobile {
    opacity: 1;
    width: calc(100% - 146px);
  }

  .page-header.-show-smaller .-big .copy.-mobile .column {
    -webkit-animation: content-slide-from-right 0.4s forwards;
    animation: content-slide-from-right 0.4s forwards;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }

  .page-header.-show-smaller .-big .copy:not(.-mobile) {
    margin-top: -325px;
    opacity: 0;
    transition-delay: 0.2s;
  }

  .page-header.-show-smaller .-big .logo {
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.4s;
    transition-delay: 0.6s;
  }
}

@media screen and (min-width: 1024px) {
  .page-header.-show-smaller .-big .actions {
    width: auto;
  }
}

@media screen and (min-width: 768px) {
  .page-header {
    position: fixed;
  }
}

.page-header .wrapper {
  width: 100%;
  padding: 0;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-line-pack: end;
  align-content: flex-end;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
}

@media screen and (min-width: 768px) {
  .page-header .wrapper {
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media screen and (min-width: 1024px) {
  .page-header .wrapper {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.page-header .-big {
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  position: relative;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition-delay: 0.4s;
}

@media screen and (min-width: 768px) {
  .page-header .-big {
    z-index: 2;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.page-header .-big .logo {
  display: none;
  background: white;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .page-header .-big .logo {
    display: block;
  }
}

.page-header .-big .copy {
  padding: 80px 15px 20px;
}

@media screen and (max-width: 640px) {
  .page-header .-big .copy p {
    padding: 0 0 10px 0;
  }
}

.page-header .-big .copy p {
  line-height: 18px;
}

@media screen and (min-width: 768px) {
  .page-header .-big .copy {
    padding: 60px 20px 20px;
    width: 495px;
  }
}

@media screen and (min-width: 1024px) {
  .page-header .-big .copy {
    -ms-flex-direction: row;
    flex-direction: row;
    width: 650px;
  }
}

.page-header .-big .copy.-mobile {
  display: none;
  position: absolute;
  left: 0;
  opacity: 0;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

@media screen and (min-width: 768px) {
  .page-header .-big .copy.-mobile {
    display: block;
    padding: 20px 20px;
  }
}

.page-header .-big .copy.-mobile .column {
  opacity: 0;
  width: 100%;
}

.page-header .-big .copy:not(.-mobile) {
  -webkit-animation: content-slide-from-right 0.4s forwards;
  animation: content-slide-from-right 0.4s forwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  margin-top: 0;
  transition-property: translate, margin-top, margin, -webkit-transform;
  transition-property: transform, translate, margin-top, margin;
  transition-property: transform, translate, margin-top, margin, -webkit-transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.page-header .-big .column {
  width: 100%;
  text-align: left;
  display: block;
}

@media screen and (min-width: 768px) {
  .page-header .-big .column {
    width: calc((100% / 1) - (20px * (1 - 1) / 1) - (0px * (2) / 1));
  }
}

@media screen and (min-width: 1024px) {
  .page-header .-big .column {
    width: calc((100% / 2) - (20px * (2 - 1) / 2) - (0px * (3) / 2));
  }
}

.page-header .-big .actions {
  display: none;
  z-index: 1;
  width: 100%;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  padding-left: 15px;
}

@media screen and (min-width: 768px) {
  .page-header .-big .actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(100% - 650px);
    transition-property: right, padding;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.2s;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .page-header .-big .actions {
    padding-right: 20px;
    width: calc(100% - 20px);
  }

  .page-header .-big .actions .burger {
    right: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .page-header .-big .search-form-wrapper {
    position: absolute;
    right: 125px;
    width: calc(100% - 125px);
  }
}

@media screen and (min-width: 1024px) {
  .page-header .-big .search-form-wrapper .input-container {
    width: 300px;
  }
}

.page-header .-small {
  background: none;
  z-index: 2;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0;
  min-height: 60px;
  position: fixed;
  top: 0;
  transition-delay: 0.1s;
  transition-property: margin, visibility, -webkit-transform;
  transition-property: margin, visibility, transform;
  transition-property: margin, visibility, transform, -webkit-transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
}

@media screen and (max-width: 767px) {
  .page-header .-small {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media screen and (min-width: 768px) {
  .page-header .-small {
    -webkit-transform: translate(0, -60px);
    transform: translate(0, -60px);
    z-index: 1;
    visibility: hidden;
  }
}

.page-header .-small .actions .logo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.page-header .-small .-sub-container {
  width: 100%;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  padding-left: 15px;
}

@media screen and (min-width: 768px) {
  .page-header .-small .-sub-container {
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 20px;
    padding-left: 20px;
  }
}

.page-header .-small .copy {
  display: none;
  padding: 0 15px 0;
  position: absolute;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  -ms-flex-pack: center;
  justify-content: center;
  left: 0;
  height: 100%;
  -webkit-animation: content-slide-from-right 0.8s forwards;
  animation: content-slide-from-right 0.8s forwards;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@media screen and (min-width: 768px) {
  .page-header .-small .copy {
    padding: 0 20px 0;
  }
}

@media screen and (min-width: 768px) {
  .page-header .-small .copy {
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (min-width: 1024px) {
  .page-header .-small .copy {
    width: 50%;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.page-header .-small .copy p {
  padding: 0;
}

.page-header .-small .actions {
  width: 100%;
  z-index: 1;
  position: relative;
}

@media screen and (min-width: 768px) {
  .page-header .-small .actions {
    padding-right: 0;
  }
}

.page-header .-small .actions .-sub-container {
  padding-right: 15px;
  background: #000;
  padding-bottom: 0;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .page-header .-small .actions .-sub-container {
    padding-right: 60px;
  }
}

@media screen and (max-width: 767px) {
  .page-header .-small .actions .logo {
    position: absolute;
    right: 0;
    top: 0;
  }
}

@media screen and (min-width: 768px) {
  .page-header .-small .actions .burger {
    margin-left: 60px;
  }
}

.page-header .-small.-mobile.-expanded .-sub-container {
  width: 100%;
  transition-delay: 0.1s;
}

.page-header .-small.-mobile .-sub-container {
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: calc(100% - 146px);
  transition-property: width;
  transition-duration: 0.35s;
  transition-timing-function: ease-in-out;
}

.page-header .-small.-mobile .burger {
  position: absolute;
  top: calc(50% - 10px);
  left: 15px;
}

.page-header .-small.-mobile .search-form-wrapper {
  margin-left: 40px;
  z-index: 1;
  -ms-flex-positive: 0;
  flex-grow: 0;
  width: 100%;
  transition-property: margin;
  transition-duration: 0.35s;
  transition-timing-function: ease-in-out;
}

.page-header .-small.-mobile .search-form-wrapper .search-input-submit {
  margin-left: 20px;
}

.page-header .-small.-mobile .search-form-wrapper.-expanded {
  margin-left: 0;
}

.page-header .-small.-mobile .search-form-wrapper.-expanded .input-container {
  max-width: 100%;
}

.page-header .-small.-mobile .search-form-wrapper .search-input-submit {
  padding-left: 10px;
  background: #000;
  margin-left: 0;
}

@media screen and (min-width: 641px) {
  .page-header .-small.-mobile .search-form-wrapper .search-input-submit {
    padding-left: 20px;
  }
}

.page-header .-small.-mobile .search-form-wrapper form {
  -ms-flex-pack: start;
  justify-content: start;
  -ms-flex-align: center;
  align-items: center;
  background: #000;
}

.page-header .-small.-mobile .search-form-wrapper form .input-container {
  max-width: 0;
  transition-property: max-width;
  transition-duration: 0.35s;
  transition-timing-function: ease-in-out;
}

.page-header .-small.-mobile .search-form-wrapper form .text-input {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.page-header .logo {
  line-height: 0;
  background: white;
  transition-property: top, margin;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}

.page-header .logo.-transparent {
  background: rgba(255, 255, 255, 0.3);
}

.page-header .logo img {
  width: auto;
  height: 60px;
}

.page-header .-container {
  width: auto;
}

.page-header .copy {
  background: #000;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  opacity: 0;
}

.page-header .copy .column:last-child p:last-child {
  padding: 0;
}

@media screen and (min-width: 1024px) {
  .page-header .copy .column p:last-child {
    padding: 0;
  }
}

.page-header .actions {
  max-width: 100%;
  z-index: 1;
}

@media screen and (max-width: 480px) {
  .page-header .actions {
    width: calc((100% / 2) - (20px * (2 - 1) / 2) - (0px * (3) / 2));
  }
}

@media screen and (min-width: 1024px) {
  .page-header .actions {
    position: relative;
    padding-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .page-header .actions .burger {
    margin-left: 84px;
    left: -1px;
  }
}

.page-header .actions .search-form-wrapper form .search-input-submit {
  margin-left: 30px;
}

.page-header .actions .search-form-wrapper form .search-input-submit .icon {
  top: 1px;
}

.page-header .actions .search-form-wrapper form .text-input {
  top: -1px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .page-header .actions .search-form-wrapper form .search-input-submit {
    margin-left: 20px;
  }
}

/*
 * Overlay
 *
 * to be shown on top of pages when mobile menu is open
 * --------------------------------------------------
 */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: block;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

/*
 * Remove text in all mobile pages except home
 *
 * using slug id in .bonsai-router element for this
 * See BonsaiRouter.tsx
 * --------------------------------------------------
 */

@media screen and (max-width: 767px) {
  .bonsai-router.-no-copy-mobile .page-header .-big {
    display: none;
  }
}

/**
 * Slide in
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes content-slide-from-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes content-slide-from-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes content-slide-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(10%, 0);
    transform: translate(10%, 0);
  }
}

@keyframes content-slide-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    opacity: 0;
  }

  100% {
    -webkit-transform: translate(10%, 0);
    transform: translate(10%, 0);
  }
}

/**
 * hide copy in mobile if not on home
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes fade-out-up-copy {
  0% {
    opacity: 1;
    margin-top: 0;
  }

  50% {
    opacity: 0;
    margin-top: -100%;
  }

  100% {
    display: none;
    height: 0;
  }
}

@keyframes fade-out-up-copy {
  0% {
    opacity: 1;
    margin-top: 0;
  }

  50% {
    opacity: 0;
    margin-top: -100%;
  }

  100% {
    display: none;
    height: 0;
  }
}.newsletter {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.newsletter {
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

.newsletter.-submitted .input-container {
  overflow: visible;
}

.newsletter.-submitted .text-input {
  -webkit-animation: hide-input 0.5s forwards;
  animation: hide-input 0.5s forwards;
}

.newsletter.-submitted .input-feedback.-success {
  display: block;
  visibility: visible;
  -webkit-animation: fade-in 0.3s forwards;
  animation: fade-in 0.3s forwards;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

@media screen and (max-width: 640px) {
  .newsletter.-submitted button {
    font-size: 18px;
    top: -5px;
  }
}

.newsletter .input-container {
  overflow: hidden;
  position: relative;
}

@media screen and (min-width: 481px) {
  .newsletter .input-container {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }
}

.newsletter .text-input {
  width: calc(100% - 15px);
  transition-property: opacity;
  transition-duration: .15s;
  transition-timing-function: ease-in-out;
}

@media screen and (min-width: 481px) {
  .newsletter .text-input {
    width: 100%;
  }
}

.newsletter .input-feedback.-success {
  position: absolute;
  top: 0;
}

.newsletter button {
  margin-left: 20px;
  font-size: 20px;
  cursor: pointer;
  color: white;
  position: relative;
}

/*
 * Newsletter animations
 *
 * --------------------------------------------------
 */

@-webkit-keyframes hide-input {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

@keyframes hide-input {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.page-footer .columns h2,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01,
.page-footer .columns h2 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01,
  .page-footer .columns h2 {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

.page-footer {
  position: relative;
  bottom: 0;
  width: 100%;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  padding: 23px 0 0 0;
  background: #000;
  color: #fff;
  z-index: 7;
}

@media screen and (max-width: 480px) {
  .page-footer {
    font-size: 13px;
  }
}

@media screen and (min-width: 768px) {
  .page-footer {
    padding: 70px 0 40px;
  }
}

.page-footer .columns {
  padding-bottom: 0;
}

@media screen and (max-width: 767px) {
  .page-footer .columns {
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.page-footer .columns h2 {
  text-transform: lowercase;
  padding-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .page-footer .columns h2 {
    padding-bottom: 25px;
  }
}

.page-footer .columns p,
.page-footer .columns a {
  color: #8A8A8A;
}

.page-footer .columns a:hover {
  color: white;
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

#loader-wrapper {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  overflow: hidden;
  background: #000;
  transition-property: opacity, visibility, -webkit-transform;
  transition-property: transform, opacity, visibility;
  transition-property: transform, opacity, visibility, -webkit-transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  /* -loaded styles */
}

@media screen and (min-width: 768px) {
  #loader-wrapper {
    top: 0;
    z-index: 9;
  }
}

#loader-wrapper.-loaded {
  opacity: 0;
  visibility: hidden;
}

.no-js #loader-wrapper {
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #000;
  -webkit-animation: spin 1.7s linear infinite;
  animation: spin 1.7s linear infinite;
  z-index: 11;
}

@media screen and (min-width: 768px) {
  #loader {
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
  }
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: spin-reverse 1s linear infinite;
  animation: spin-reverse 1s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #000;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01 {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

.modal {
  opacity: 1;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  z-index: 1000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  transition: all 0.3s ease-in;
}

.modal .modal-bg {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  transition: all 0.3s ease-in;
}

.modal .modal-content {
  z-index: 1;
  position: relative;
  transition: all 0.3s ease-in;
  max-width: 90%;
  -webkit-transform: translate(0, 10px);
  transform: translate(0, 10px);
  opacity: 0;
}

.modal .modal-content img {
  max-width: 450px;
}

@media screen and (max-width: 640px) {
  .modal .modal-content img {
    max-width: 100%;
  }
}

.modal .button {
  position: absolute;
  right: -30px;
  top: -30px;
  font-size: 21px;
}

@media screen and (max-width: 640px) {
  .modal .button {
    right: 0;
    font-size: 20px;
  }
}

.page-index.-show-modal .modal {
  visibility: visible;
}

.page-index.-show-modal .modal .modal-bg {
  transition: all 0.3s ease-in;
  opacity: 0.7;
}

.page-index.-show-modal .modal .modal-content {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.3s 0.5s ease-in;
}/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

.page-index {
  overflow: hidden;
  position: relative;
  background: #000;
}

.page-index .page-wrapper {
  transition: padding, margin-top 0.3s ease-in-out;
}

@media screen and (max-width: 767px) {
  .page-index .page-wrapper {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .page-index .page-wrapper {
    margin-top: 325px;
  }
}

@media screen and (min-width: 1024px) {
  .page-index .page-wrapper {
    margin-top: 220px;
  }
}

@media screen and (min-width: 768px) {
  .page-index .page-wrapper.-user-page {
    margin-top: 120px;
  }
}/**
 * Import all animations
 * -----------------------------------------------------------------------------
 */

/**
 * Fade in animation
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/**
 * Fade out animation
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/**
 * Slide in
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes slide-from-right {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes slide-from-right {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

/**
 * Slide out to right
 * -----------------------------------------------------------------------------
 */

@-webkit-keyframes slide-to-right {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

@keyframes slide-to-right {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

input[type="text"],
input[type="textarea"],
input,
ul,
li,
html,
body,
#root,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

input[type="text"],
input[type="textarea"],
input {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  border-radius: 0;
}

ul,
li {
  list-style: none;
}

figure {
  padding: 0;
  margin: 0;
}

html,
body,
#root {
  /* hide scrollbar but allow scrolling */
}

html body,
body body,
#root body {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

html body::-webkit-scrollbar,
body body::-webkit-scrollbar,
#root body::-webkit-scrollbar {
  width: 0;
  background: transparent;
  /* make scrollbar transparent */
}

a {
  padding: 0;
  margin: 0;
  font-style: normal;
  text-decoration: none;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  outline: none;
  -webkit-appearance: button;
  /* for input */
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

.wrapper {
  padding: 0 20px;
  margin: 0 auto;
}

.columns,
.columns .column {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica LT W01 Roman", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

p,
ul,
ol {
  line-height: 20px;
}

a {
  color: #fff;
  font-weight: normal;
  transition: color .25s;
}

i,
em {
  font-style: italic;
  font-family: "Helvetica LT W01 Roman", sans-serif;
}

.bold,
b,
strong {
  font-weight: bold;
  font-family: "Helvetica LT W01 Bold", sans-serif;
}

small {
  font-size: .5em;
}

a {
  color: inherit;
}

/*
 * Heading styles
 *
 * --------------------------------------------------
 */

.heading-01,
.heading-02,
.heading-03 {
  font-weight: normal;
  font-family: "Helvetica LT W01 Bold", sans-serif;
  text-transform: lowercase;
}

.heading-01 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
  font-size: 20px;
  line-height: 25px;
}

@media screen and (min-width: 768px) {
  .heading-01 {
    font-size: calc(20px + 8px);
    line-height: 38px;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  position: relative;
  height: 100%;
}

html.-hide-overflow body {
  overflow: hidden;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  font-weight: normal;
  font-size: inherit;
}

body p {
  padding: 0 0 15px 0;
}

.wrapper {
  position: relative;
}

main {
  position: relative;
}

input[type="text"],
input[type="textarea"],
input,
ul,
li,
html,
body,
#root,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

input[type="text"],
input[type="textarea"],
input {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  border-radius: 0;
}

ul,
li {
  list-style: none;
}

figure {
  padding: 0;
  margin: 0;
}

html,
body,
#root {
  /* hide scrollbar but allow scrolling */
}

html body,
body body,
#root body {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

html body::-webkit-scrollbar,
body body::-webkit-scrollbar,
#root body::-webkit-scrollbar {
  width: 0;
  background: transparent;
  /* make scrollbar transparent */
}

a {
  padding: 0;
  margin: 0;
  font-style: normal;
  text-decoration: none;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  outline: none;
  -webkit-appearance: button;
  /* for input */
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

.wrapper {
  padding: 0 20px;
  margin: 0 auto;
}

.columns,
.columns .column {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

/*
 * Styles for columns and column
 * eg: list of suggestions, footer blocks, search results
 *
 * --------------------------------------------------
 */

.columns {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-direction: row;
  flex-direction: row;
}

.columns .column {
  width: calc((100% / 2) - (20px * (2 - 1) / 2) - (0px * (3) / 2));
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: left;
  margin-bottom: 30px;
  position: relative;
}

.columns .column .image-wrapper {
  height: auto;
}

.columns .column .link {
  cursor: pointer;
  top: 0;
}

@media screen and (min-width: 1024px) {
  .columns .column {
    width: calc((100% / 4) - (40px * (4 - 1) / 4) - (0px * (5) / 4));
    margin-right: 40px;
  }
}

.columns .column:nth-child(4n) {
  margin-right: 0;
}

.columns .column p:last-child {
  padding: 0;
}

input[type="text"],
input[type="textarea"],
input,
ul,
li,
html,
body,
#root,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

input[type="text"],
input[type="textarea"],
input {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  border-radius: 0;
}

ul,
li {
  list-style: none;
}

figure {
  padding: 0;
  margin: 0;
}

html,
body,
#root {
  /* hide scrollbar but allow scrolling */
}

html body,
body body,
#root body {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

html body::-webkit-scrollbar,
body body::-webkit-scrollbar,
#root body::-webkit-scrollbar {
  width: 0;
  background: transparent;
  /* make scrollbar transparent */
}

a {
  padding: 0;
  margin: 0;
  font-style: normal;
  text-decoration: none;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  outline: none;
  -webkit-appearance: button;
  /* for input */
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

.wrapper {
  padding: 0 20px;
  margin: 0 auto;
}

.columns,
.columns .column {
  display: flex;
  display: -ms-flexbox;
}

/**
 * This sets the column's width to 100% / $columns, minus the column's share of the spacing.
 */

/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);

  Use it to complement object-fit-images polyfill
  https://github.com/bfred-it/object-fit-images
*/

/**
 * Import local fonts here
 */

@font-face {
  font-family: "icon";
  font-style: normal;
  font-weight: normal;
  src: url(data:application/font-woff;base64,d09GRgABAAAAAArkAAsAAAAACpgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIJImNtYXAAAAFoAAAAVAAAAFQXVtKMZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAABrwAAAa8hbRGIGhlYWQAAAiAAAAANgAAADYlIHldaGhlYQAACLgAAAAkAAAAJBzNGNZobXR4AAAI3AAAACgAAAAoNKgAZGxvY2EAAAkEAAAAFgAAABYGrgXobWF4cAAACRwAAAAgAAAAIAATAVduYW1lAAAJPAAAAYYAAAGGmUoJ+3Bvc3QAAArEAAAAIAAAACAAAwAAAAMG8wGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QUDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkF//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/8AEAAPAAA4AHAAAEyEyFhUUBiMhIiY1NDYzAREUBiMiJjURNDYzMhY5A44YISEY/HIYISEYAgAhGBghIRgYIQH5IRgYISEYGCEBjvxyGCEhGAOOGCEhAAACADn/9APMA4cADgAcAAAXDgEnJjY3AT4BFxYGBwEDLgE3NhYXAR4BBwYmJ64ZRBgYAhkDGxlEGBcBGfzlchkCGBhEGQMbGQEXGEQZCRkBFxhEGQMbGQIYGEQZ/OUDGxlEGBgCGfzlGUQYFwEZAAAACAAA/8AZCwPAADUAVQCLAKoA4gEDARwBVAAAEz4BNz4BNz4BMzIWFxYXHgEXFhUUBw4BBwYHDgEjIiYnLgEnMx4BFx4BMzI2Nz4BNyE0NjcxAR4BMxYyMzI2Nz4BNREjNTM1MxUzFSMRFAYHDgEvATUBPgE3PgE3PgEzMhYXFhceARcWFRQHDgEHBgcOASMiJicuASczHgEXHgEzMjY3PgE3ISY2NzEBPgE3OgEzMhYXHgEXNTMRIxE0JicuASMqASMOAQc1BT4BMzIWFxYXHgEXFhUUBgcOASMiJicuASczHgEXHgEzMjY3PgE1NCYnLgEjIgYHDgEHIz4BNzEFNDY3PgEzMhYXHgEXNTMRIxE0JicuASMiBgcOARURIxElPgEzMhYXHgEVFAYHDgEjIiYnLgE1NDY3JT4BMzIWFxYXHgEXFhUUBgcOASMiJicuASczHgEXHgEzMjY3PgE1NCYnLgEjIgYHDgEHIz4BNzEHBx4XGkEoKFkxU4g0GhMUGgcGBwcdFhYdOYZLXI8zICUEywkUDBU3IiA2FyYnA/3XAwQDdAUKBQUKBB4lBQYGe3vHamoRERpgR18CFAceGBlCJyhZMVSHNBoUExsGBwgHHRUWHTqFTFyOMyElBMsJFQsVNyIgNxclKAL92AEDBANpBwgCAgUDLUkcEigXvMcLDBVRPQQMBwgRCQL4LnVIVIQwGBISFwYGKysrh1xcii8dIQTPAxIODzEjMEISCgkJChJFMiMzEQwOA88JNi0DKCUlJl87L00eESQTwcYKCRNEMSg3DggIzwPjMZNiYpMwMTAwMTCTYmKTMTAwMDADvi51R1WELxgSEhgGBisrLIdcW4suHiEDzwMSDg8xIjFCEgkKCgkTRDIjNBAMDgPPCDYuAcYuUCMoORMSEjY2HCEhTi0tMzYvL04gHxgxMDk5JEcjEhsKExIPDxhUPDNOG/6nAQEBBgYGHhgBoZDd3ZD+GyU2EhwZAgaZAVkuUCMoORMSEjY2HCEhTi0tMzYvL04gHxgxMDk5JEcjEhsKExIPDxhUPDNOGwE2AQEBGBgONieH/O8BeS9GFykoAQEBzz4hIDc3HCEiTy0uNFuTNzc4Q0IpWC4fMhMTEzAxG0csL0scMzQYGBEoFlNzIdJKaiAgHxcYDSwecvzvAaskPBgsLR8eETAf/iECEpg9Pj49PpJVVZM9PT09PT2TVVWSPjohIDc3HCEiTy0uNFuTNzc4Q0IpWC4fMhMTEzAxG0csL0scMzQYGBEoFlNzIQAAAwAA/8AE2APAAA0AGwApAAAFISImNTQ2MyEyFhUUBgMhIiY1NDYzITIWFRQGAyEiJjU0NjMhMhYVFAYEh/vKIi8vIgQ2ITAwIfvKIi8vIgQ2ITAwIfvKIi8vIgQ2ITAwQC8iITAwISIvAa8vIiIvLyIiLwGvMCEiLy8iITAAAAADABT/1gPqA8AADgAuAFMAADcPAQYUFx4BMzI2PwEuASUiJicuAScuATU0Nz4BNzYzMhYXHgEXHgEVFAcOAQcGAyIHDgEHBgcOARUUFhceARceATMyNjc2Nz4BNzY1NCcuAScmI7oGoBQUCRkNDRgKphswAYwlRR0eMBERFBUVSTAxNyZFHhwvERIUFRVIMTE3Mi8uUyMkGyQpKCMTMBsxdkFCeDEmHh8rDAwgH21JSVPuBqATOBMKCgoKphMwURQREjAdHkQlODAxSBUVFBIRLxweRSY3MTBJFRUCnAwMKx8eJjF4QkF1MhswEyMnKCQcIyNTLy4yU0lJbSAfAAAAAgAX/84ErQOZAA4AHQAAEyY0NzYyFwEWFAcGIicBAQ4BJy4BNwE+ARceAQcBFxcXF0EXAdIXFxdBGP4vAkoTQBsbCxMCTBNAGxoME/20AagYQRcXF/4uF0EXFxcB0f46GwsSE0AbA0oaDBMTQBv8twAAAAABAAAAAAAAuLRhl18PPPUACwQAAAAAANZ7mnAAAAAA1nuacAAA/8AZCwPAAAAACAACAAAAAAAAAAEAAAPA/8AAABkLAAAAABkLAAEAAAAAAAAAAAAAAAAAAAAKBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAA5GQsAAATYAAAEAAAUBMUAFwAAAAAACgAUAB4ATACEAmQCpAMkA14AAAABAAAACgFVAAgAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff");
}

.helvetica-bold {
  font-family: 'Helvetica LT W01 Bold';
  font-weight: bold;
}