@charset "UTF-8";
/*
Project: 	 Robot Food

-------------------------------------------------------------------*/
/* ==========================================================================
   CSS Reset
   ========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

button {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
  border: none;
  background: none;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/*
  @function get-breakpoint-directions

  Sorts through breakpoints SASS map,
  generates a full SASS map containing all the breakpoint
  variations we'll require

  Parameters:
  none
*/
/*
  @mixin breakpoint

  Inserts a media query

  Parameters:
  $name - name of breakpoint, choose from:

  xsmall, small, medium, large, xlarge, xxlarge  - *just* that breakpoint
  small-, medium-, large-, xlarge-, xxlarge-  - that breakpoint *and* below
  xsmall+, small+, medium+, large+, xlarge+  - that breakpoint *and* up

  NB: the we're mobile up, so the minus values should be avoided..

  $option - ie11, hover - to make an IE11 CSS with a breakpoint or to target browsers with mouse cursors

  ```scss
  @include breakpoint('medium+') {
    // styles to be given to browsers at `medium` and above
  }
  @include breakpoint(null,'hover') {
    // styles to be given to devices with mouse pointers
  }
  @include breakpoint(null,'ie11') {
    // styles to be given to be given to IE11
  }
  @include breakpoint('medium+','hover') {
    // styles to be given to browsers at `medium` and above that have mouse pointers
  }
  @include breakpoint('medium+','ie11') {
    // styles to be given to ie11 at `medium` and above
  }
  ```
*/
/*
  @function get-media

  Returns start and stop points of a given media query

  Parameters:
  $bp - the breakpoint you want the stop and stop points of
*/
/*
  @function colspan

  Returns a calc() that represents a column span

  Parameters:
  $number-of-columns - the number of columns you want to span
  $breakpoint - at which breakpoint
  $bump - if you want the colspan + an arbitrary number
  $inverse - if you want to return a negative number (to move things backwards)

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin width

  Returns a width and a calc() to correctly span columns
  with breakpoint selection and optional bump value

  Parameters:
  $number-of-columns - the number of columns you want to span
  $breakpoint - at which breakpoint
  $bump - if you want the colspan + an arbitrary number

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin width-multi

  A mix of @mixin width and @mixin column. Pass a map of the number
  of columns to span at each breakpoint. Use when you don't need to
  float on the grid.

  Parameters:
  $colspans - scss map detailing how many design columns this column
  needs to span on each breakpoint. Omitting a breakpoint from the
  map will not set a width at that breakpoint.
  $bump - if you want the colspan + an arbitrary number

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include width-multi($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin push

  Returns a margin-left and a calc() to correctly push
  a block a number of columns with breakpoint selection
  and optional bump value

  Parameters:
  $number-of-columns - the number of columns you want to push
  $breakpoint - at which breakpoint
  $bump - if you want the colspan + an arbitrary number

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin push-multi

  A mix of @mixin push and @mixin column. Pass a map of the number
  of columns to push at each breakpoint.

  Parameters:
  $colspans - scss map detailing how many design columns this column
  needs to push on each breakpoint. Omitting a breakpoint from the
  map will not set a width at that breakpoint.
  $bump - if you want the colspan + an arbitrary number

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include push-multi($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin push-gutter

  Adds gutter margin to the sides passed to the set breakpoints.
  Defaults to left margin across all breakpoints.

  Parameters:
  $sides - the sides you'd like to apply margin to
  $bps - at which breakpoints

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin columns-container

  Sets up columns container

  Parameters:
  none

  ```scss
    .list-articles {
    @include columns-container;
  }
  ```
*/
/*
  @mixin column

  Sets up single column

  Parameters:
  $colspans - scss map detailing how many design columns this column needs to span on each breakpoint

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include column($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin columns-container-flex

  Sets up columns container - flex version

  Parameters:
  none

  ```scss
  .list-articles {
    @include columns-container-flex;
  }
  ```
*/
/*
  @mixin column-flex

  Sets up single column

  Parameters:
  $colspans - scss map detailing how many design columns this column needs to span on each breakpoint

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include column-flex($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/
/*
  @mixin font_smoothing

  Set font smoothing ON or OFF
*/
/*
  @mixin text-underline

  Does "medium" style underlines with "iOS" style descender shadows

  Parameters:
  $underline - color
  $background - color
  $pos - vertical position
*/
/*
  @mixin hide_text

  Hides text in an element
*/
/*
  @mixin tucked-margin-top

  Intelligently applies baseline to baseline spacing to a text block:

  ```
  @include tucked-margin-top($f-h1, ('xsmall': 40, 'medium+': 60));
  ```

  Uses the `$f-h1` object from setup/_typography.scss and loops through the breakpoints, adding new margin top if required by specified margin tops and font size/line-height changes.

  'xsmall' is the default for all breakpoints and the successively overridden as breakpoints get larger.

  Its intelligent in that if you specify just the `xsmall` value, but the font size and/or line-height for this font object changes at some breakpoint, the mixin will add a breakpoint rule to adjust to maintain the consistent baseline-to-baseline spacing.

  So:

  ```
  $f-body: generate-font-obj(
    (
      font-family: $sans-serif-font,
      font-family-loaded: $sans-serif-font--loaded,
      font-loaded-class: $sans-serif-font-loaded-class,
      settings: (
        'small+': ( font-size: 16, line-height: 20, font-weight: 300, push: 1),
       )
    )
  );
  @include tucked-margin-top($f-body, ('xsmall': 40, 'medium+': 60));
  ```

  Generates a margin-top as a default (xsmall+) and a breakpoint for `medium+`.

  ```
  $f-body: generate-font-obj(
    (
      font-family: $sans-serif-font,
      font-family-loaded: $sans-serif-font--loaded,
      font-loaded-class: $sans-serif-font-loaded-class,
      settings: (
        'small+': ( font-size: 16, line-height: 20, push: 1),
        'medium+': ( font-size: 18, line-height: 25, push: 0),
       )
    )
  );
  @include tucked-margin-top($f-body, ('xsmall': 40));
  ```

  Similarly, this will produce a margin-top as a default and a breakpoint for `medium+`.

  If you need some margin-top for a singular breakpoint margin:

  ```
  @include tucked-margin-top($f-h1, null, 'large');
  ```

  Will produce a margin-top within a breakpoint of 'large'.

*/
/*
  @mixin tucked-align-top

  Intelligently aligns an text element to the top of an element.

  ```
  @include tucked-align-top($f-h1);
  ```

  Uses the `$f-h1` object from setup/_typography.scss and loops through the breakpoints, adding new margin top if required by specified margin tops and font size/line-height changes.

  Sister mixin to '@mixin tucked-margin-top'

  tucked-align-top is useful for those situations where you want to horizontally align the top of an image and the top of some text.

  If you need some align top for a singular breakpoint margin:

  ```
  @include tucked-align-top($f-h1, 'large');
  ```

  Will produce a margin-top within a breakpoint of 'large'.

  It should be noted that this mixin is very dependent of the font itself. If the box the letters sit in, in the font, is weirdly spaced, then this mixin will struggle.

  There are 5 modes to try and you may want to add others for your particular font..

  ```
  @include tucked-align-top($f-h1, null, 2); // mode based on pull value
  @include tucked-align-top($f-h1, null, 3); // mode based on push value
  @include tucked-align-top($f-h1, null, 4); // mode based on baseline value
  @include tucked-align-top($f-h1, null, 5); // mode based on 0's
  ```
*/
/*
@font-face {
  font-family: Graphik;
  src: url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.eot');
  src: url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.eot?#iefix') format('embedded-opentype'),
       url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.woff2') format('woff2'),
       url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.woff') format('woff');
}
*/
@font-face {
  font-family: "Druk";
  src: url("../fonts/Druk-Medium-Web.woff2") format("woff2"), url("../fonts/Druk-Medium-Web.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mark Pro";
  src: url("../fonts/38B663_0_0.eot");
  src: url("../fonts/38B663_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/38B663_0_0.woff2") format("woff2"), url("../fonts/38B663_0_0.woff") format("woff"), url("../fonts/38B663_0_0.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Mark Pro Heavy";
  src: url("../fonts/38B663_1_0.eot");
  src: url("../fonts/38B663_1_0.eot?#iefix") format("embedded-opentype"), url("../fonts/38B663_1_0.woff2") format("woff2"), url("../fonts/38B663_1_0.woff") format("woff"), url("../fonts/38B663_1_0.ttf") format("truetype");
  font-display: swap;
}
/***

f-XX

```
<p class="f-XX">The quick brown fox, <br>jumps over the lazy dog</p>
```

***/
.blog-headline,
.f-super-headline {
  font-family: "Druk", sans-serif;
  font-size: 60px;
  line-height: 60px;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  text-transform: uppercase;
}
.blog-headline b,
.blog-headline strong,
.f-super-headline b,
.f-super-headline strong {
  font-weight: 600;
}
.blog-headline i,
.blog-headline em,
.f-super-headline i,
.f-super-headline em {
  font-style: italic;
}
.blog-headline::before, .blog-headline::after,
.f-super-headline::before,
.f-super-headline::after {
  content: "";
  display: block;
}
.blog-headline::before,
.f-super-headline::before {
  padding-top: 0px;
}
.blog-headline::after,
.f-super-headline::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog-headline,
.f-super-headline {
    font-size: 60px;
    line-height: 60px;
    font-weight: 300;
    letter-spacing: 0.01em;
  }
  .blog-headline::before,
.f-super-headline::before {
    padding-top: 0px;
  }
  .blog-headline::after,
.f-super-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 650px) {
  .blog-headline,
.f-super-headline {
    font-size: 100px;
    line-height: 90px;
  }
  .blog-headline::before,
.f-super-headline::before {
    padding-top: 0px;
  }
  .blog-headline::after,
.f-super-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .blog-headline,
.f-super-headline {
    font-size: 120px;
    line-height: 105px;
  }
  .blog-headline::before,
.f-super-headline::before {
    padding-top: 0px;
  }
  .blog-headline::after,
.f-super-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1300px) {
  .blog-headline,
.f-super-headline {
    font-size: 150px;
    line-height: 125px;
  }
  .blog-headline::before,
.f-super-headline::before {
    padding-top: 0px;
  }
  .blog-headline::after,
.f-super-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .blog-headline,
.f-super-headline {
    font-size: 222px;
    line-height: 191px;
  }
  .blog-headline::before,
.f-super-headline::before {
    padding-top: 0px;
  }
  .blog-headline::after,
.f-super-headline::after {
    margin-bottom: 0px;
  }
}

.f-headline {
  font-family: "Druk", sans-serif;
  font-size: 74px;
  line-height: 65px;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  text-transform: uppercase;
}
.f-headline b,
.f-headline strong {
  font-weight: 600;
}
.f-headline i,
.f-headline em {
  font-style: italic;
}
.f-headline::before,
.f-headline::after {
  content: "";
  display: block;
}
.f-headline::before {
  padding-top: 0px;
}
.f-headline::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .f-headline {
    font-size: 90px;
    line-height: 80px;
    font-weight: 300;
    letter-spacing: 0.01em;
  }
  .f-headline::before {
    padding-top: 0px;
  }
  .f-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 650px) {
  .f-headline {
    font-size: 90px;
    line-height: 75px;
  }
  .f-headline::before {
    padding-top: 0px;
  }
  .f-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .f-headline {
    font-size: 115px;
    line-height: 100px;
  }
  .f-headline::before {
    padding-top: 0px;
  }
  .f-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1300px) {
  .f-headline {
    font-size: 125px;
    line-height: 105px;
  }
  .f-headline::before {
    padding-top: 0px;
  }
  .f-headline::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .f-headline {
    font-size: 130px;
    line-height: 110px;
  }
  .f-headline::before {
    padding-top: 0px;
  }
  .f-headline::after {
    margin-bottom: 0px;
  }
}

.f-headline-sm {
  font-family: "Druk", sans-serif;
  font-size: 45px;
  line-height: 40px;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.f-headline-sm b,
.f-headline-sm strong {
  font-weight: 600;
}
.f-headline-sm i,
.f-headline-sm em {
  font-style: italic;
}
.f-headline-sm::before,
.f-headline-sm::after {
  content: "";
  display: block;
}
.f-headline-sm::before {
  padding-top: 0px;
}
.f-headline-sm::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .f-headline-sm {
    font-size: 55px;
    line-height: 55px;
  }
  .f-headline-sm::before {
    padding-top: 0px;
  }
  .f-headline-sm::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 650px) {
  .f-headline-sm {
    font-size: 55px;
    line-height: 55px;
  }
  .f-headline-sm::before {
    padding-top: 0px;
  }
  .f-headline-sm::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .f-headline-sm {
    font-size: 60px;
    line-height: 55px;
  }
  .f-headline-sm::before {
    padding-top: 0px;
  }
  .f-headline-sm::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1300px) {
  .f-headline-sm {
    font-size: 60px;
    line-height: 55px;
  }
  .f-headline-sm::before {
    padding-top: 0px;
  }
  .f-headline-sm::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .f-headline-sm {
    font-size: 70px;
    line-height: 60px;
  }
  .f-headline-sm::before {
    padding-top: 0px;
  }
  .f-headline-sm::after {
    margin-bottom: 0px;
  }
}

.footer__links__item,
.contact__links__item, .header__nav-items--mobile, .homepage, .member__title, .pagination a, .thumb__info,
.f-body {
  font-family: "Mark Pro", sans-serif;
  font-size: 16px;
  line-height: 25px;
  font-weight: 300;
  letter-spacing: -0.015em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  font-weight: normal;
}
.footer__links__item b,
.contact__links__item b, .header__nav-items--mobile b, .homepage b, .member__title b, .pagination a b, .thumb__info b,
.footer__links__item strong,
.contact__links__item strong,
.header__nav-items--mobile strong,
.homepage strong,
.member__title strong,
.pagination a strong,
.thumb__info strong,
.f-body b,
.f-body strong {
  font-weight: 600;
}
.footer__links__item i,
.contact__links__item i, .header__nav-items--mobile i, .homepage i, .member__title i, .pagination a i, .thumb__info i,
.footer__links__item em,
.contact__links__item em,
.header__nav-items--mobile em,
.homepage em,
.member__title em,
.pagination a em,
.thumb__info em,
.f-body i,
.f-body em {
  font-style: italic;
}
.footer__links__item::before,
.contact__links__item::before, .header__nav-items--mobile::before, .homepage::before, .member__title::before, .pagination a::before, .thumb__info::before, .footer__links__item::after,
.contact__links__item::after, .header__nav-items--mobile::after, .homepage::after, .member__title::after, .pagination a::after, .thumb__info::after,
.f-body::before,
.f-body::after {
  content: "";
  display: block;
}
.footer__links__item::before,
.contact__links__item::before, .header__nav-items--mobile::before, .homepage::before, .member__title::before, .pagination a::before, .thumb__info::before,
.f-body::before {
  padding-top: 0px;
}
.footer__links__item::after,
.contact__links__item::after, .header__nav-items--mobile::after, .homepage::after, .member__title::after, .pagination a::after, .thumb__info::after,
.f-body::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 650px) {
  .footer__links__item,
.contact__links__item, .header__nav-items--mobile, .homepage, .member__title, .pagination a, .thumb__info,
.f-body {
    font-size: 16px;
    line-height: 25px;
  }
  .footer__links__item::before,
.contact__links__item::before, .header__nav-items--mobile::before, .homepage::before, .member__title::before, .pagination a::before, .thumb__info::before,
.f-body::before {
    padding-top: 0px;
  }
  .footer__links__item::after,
.contact__links__item::after, .header__nav-items--mobile::after, .homepage::after, .member__title::after, .pagination a::after, .thumb__info::after,
.f-body::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1300px) {
  .footer__links__item,
.contact__links__item, .header__nav-items--mobile, .homepage, .member__title, .pagination a, .thumb__info,
.f-body {
    font-size: 18px;
    line-height: 30px;
  }
  .footer__links__item::before,
.contact__links__item::before, .header__nav-items--mobile::before, .homepage::before, .member__title::before, .pagination a::before, .thumb__info::before,
.f-body::before {
    padding-top: 0px;
  }
  .footer__links__item::after,
.contact__links__item::after, .header__nav-items--mobile::after, .homepage::after, .member__title::after, .pagination a::after, .thumb__info::after,
.f-body::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__links__item,
.contact__links__item, .header__nav-items--mobile, .homepage, .member__title, .pagination a, .thumb__info,
.f-body {
    font-size: 20px;
    line-height: 30px;
  }
  .footer__links__item::before,
.contact__links__item::before, .header__nav-items--mobile::before, .homepage::before, .member__title::before, .pagination a::before, .thumb__info::before,
.f-body::before {
    padding-top: 0px;
  }
  .footer__links__item::after,
.contact__links__item::after, .header__nav-items--mobile::after, .homepage::after, .member__title::after, .pagination a::after, .thumb__info::after,
.f-body::after {
    margin-bottom: 0px;
  }
}

.f-body-lg {
  font-family: "Mark Pro", sans-serif;
  font-size: 18px;
  line-height: 25px;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
}
.f-body-lg b,
.f-body-lg strong {
  font-weight: 600;
}
.f-body-lg i,
.f-body-lg em {
  font-style: italic;
}
.f-body-lg::before,
.f-body-lg::after {
  content: "";
  display: block;
}
.f-body-lg::before {
  padding-top: 0px;
}
.f-body-lg::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .f-body-lg {
    font-size: 18px;
    line-height: 25px;
  }
  .f-body-lg::before {
    padding-top: 0px;
  }
  .f-body-lg::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 650px) {
  .f-body-lg {
    font-size: 18px;
    line-height: 30px;
  }
  .f-body-lg::before {
    padding-top: 0px;
  }
  .f-body-lg::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .f-body-lg {
    font-size: 20px;
    line-height: 30px;
  }
  .f-body-lg::before {
    padding-top: 0px;
  }
  .f-body-lg::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1300px) {
  .f-body-lg {
    font-size: 22px;
    line-height: 35px;
  }
  .f-body-lg::before {
    padding-top: 0px;
  }
  .f-body-lg::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .f-body-lg {
    font-size: 25px;
    line-height: 35px;
  }
  .f-body-lg::before {
    padding-top: 0px;
  }
  .f-body-lg::after {
    margin-bottom: 0px;
  }
}

.f-nav {
  font-family: "Mark Pro", sans-serif;
  font-size: 14px;
  line-height: 15px;
  font-weight: regular;
  letter-spacing: -0.015em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
}
.f-nav b,
.f-nav strong {
  font-weight: 600;
}
.f-nav i,
.f-nav em {
  font-style: italic;
}
.f-nav::before,
.f-nav::after {
  content: "";
  display: block;
}
.f-nav::before {
  padding-top: 0px;
}
.f-nav::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 650px) {
  .f-nav {
    font-size: 14px;
    line-height: 15px;
  }
  .f-nav::before {
    padding-top: 0px;
  }
  .f-nav::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .f-nav {
    font-size: 16px;
    line-height: 16px;
  }
  .f-nav::before {
    padding-top: 0px;
  }
  .f-nav::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .f-nav {
    font-size: 16px;
    line-height: 16px;
  }
  .f-nav::before {
    padding-top: 0px;
  }
  .f-nav::after {
    margin-bottom: 0px;
  }
}

.footer__links__item .item__heading,
.contact__links__item .item__heading,
.f-footer-heading {
  font-family: "Mark Pro Heavy";
  font-size: 12px;
  line-height: 15px;
  font-weight: bold;
  letter-spacing: 0.05em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  text-transform: uppercase;
}
.footer__links__item .item__heading b,
.contact__links__item .item__heading b,
.footer__links__item .item__heading strong,
.contact__links__item .item__heading strong,
.f-footer-heading b,
.f-footer-heading strong {
  font-weight: 600;
}
.footer__links__item .item__heading i,
.contact__links__item .item__heading i,
.footer__links__item .item__heading em,
.contact__links__item .item__heading em,
.f-footer-heading i,
.f-footer-heading em {
  font-style: italic;
}
.footer__links__item .item__heading::before,
.contact__links__item .item__heading::before, .footer__links__item .item__heading::after,
.contact__links__item .item__heading::after,
.f-footer-heading::before,
.f-footer-heading::after {
  content: "";
  display: block;
}
.footer__links__item .item__heading::before,
.contact__links__item .item__heading::before,
.f-footer-heading::before {
  padding-top: 3px;
}
.footer__links__item .item__heading::after,
.contact__links__item .item__heading::after,
.f-footer-heading::after {
  margin-bottom: -3px;
}
@media screen and (min-width: 650px) {
  .footer__links__item .item__heading,
.contact__links__item .item__heading,
.f-footer-heading {
    font-size: 12px;
    line-height: 15px;
  }
  .footer__links__item .item__heading::before,
.contact__links__item .item__heading::before,
.f-footer-heading::before {
    padding-top: 3px;
  }
  .footer__links__item .item__heading::after,
.contact__links__item .item__heading::after,
.f-footer-heading::after {
    margin-bottom: -3px;
  }
}
@media screen and (min-width: 990px) {
  .footer__links__item .item__heading,
.contact__links__item .item__heading,
.f-footer-heading {
    font-size: 13px;
    line-height: 20px;
  }
  .footer__links__item .item__heading::before,
.contact__links__item .item__heading::before,
.f-footer-heading::before {
    padding-top: 1px;
  }
  .footer__links__item .item__heading::after,
.contact__links__item .item__heading::after,
.f-footer-heading::after {
    margin-bottom: -6px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__links__item .item__heading,
.contact__links__item .item__heading,
.f-footer-heading {
    font-size: 15px;
    line-height: 20px;
  }
  .footer__links__item .item__heading::before,
.contact__links__item .item__heading::before,
.f-footer-heading::before {
    padding-top: 0px;
  }
  .footer__links__item .item__heading::after,
.contact__links__item .item__heading::after,
.f-footer-heading::after {
    margin-bottom: -5px;
  }
}

.about .about-content h3, .rich-content h2,
.f-statement {
  font-family: "Mark Pro", sans-serif;
  font-size: 19px;
  line-height: 25px;
  font-weight: bold;
  letter-spacing: 0;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
}
.about .about-content h3 b, .rich-content h2 b,
.about .about-content h3 strong,
.rich-content h2 strong,
.f-statement b,
.f-statement strong {
  font-weight: 600;
}
.about .about-content h3 i, .rich-content h2 i,
.about .about-content h3 em,
.rich-content h2 em,
.f-statement i,
.f-statement em {
  font-style: italic;
}
.about .about-content h3::before, .rich-content h2::before, .about .about-content h3::after, .rich-content h2::after,
.f-statement::before,
.f-statement::after {
  content: "";
  display: block;
}
.about .about-content h3::before, .rich-content h2::before,
.f-statement::before {
  padding-top: 0px;
}
.about .about-content h3::after, .rich-content h2::after,
.f-statement::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about .about-content h3, .rich-content h2,
.f-statement {
    font-size: 19px;
    line-height: 25px;
    font-weight: bold;
    letter-spacing: 0;
  }
  .about .about-content h3::before, .rich-content h2::before,
.f-statement::before {
    padding-top: 0px;
  }
  .about .about-content h3::after, .rich-content h2::after,
.f-statement::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 650px) {
  .about .about-content h3, .rich-content h2,
.f-statement {
    font-size: 22px;
    line-height: 30px;
  }
  .about .about-content h3::before, .rich-content h2::before,
.f-statement::before {
    padding-top: 0px;
  }
  .about .about-content h3::after, .rich-content h2::after,
.f-statement::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .about .about-content h3, .rich-content h2,
.f-statement {
    font-size: 24px;
    line-height: 35px;
  }
  .about .about-content h3::before, .rich-content h2::before,
.f-statement::before {
    padding-top: 0px;
  }
  .about .about-content h3::after, .rich-content h2::after,
.f-statement::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .about .about-content h3, .rich-content h2,
.f-statement {
    font-size: 28px;
    line-height: 40px;
  }
  .about .about-content h3::before, .rich-content h2::before,
.f-statement::before {
    padding-top: 0px;
  }
  .about .about-content h3::after, .rich-content h2::after,
.f-statement::after {
    margin-bottom: 0px;
  }
}

.section-title, .blog section .title, .rich-content h1, .text-box h2,
.f-title-r {
  font-family: "Mark Pro Heavy";
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: 0.1em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  text-transform: uppercase;
}
.section-title b, .blog section .title b, .rich-content h1 b, .text-box h2 b,
.section-title strong,
.blog section .title strong,
.rich-content h1 strong,
.text-box h2 strong,
.f-title-r b,
.f-title-r strong {
  font-weight: 600;
}
.section-title i, .blog section .title i, .rich-content h1 i, .text-box h2 i,
.section-title em,
.blog section .title em,
.rich-content h1 em,
.text-box h2 em,
.f-title-r i,
.f-title-r em {
  font-style: italic;
}
.section-title::before, .blog section .title::before, .rich-content h1::before, .text-box h2::before, .section-title::after, .blog section .title::after, .rich-content h1::after, .text-box h2::after,
.f-title-r::before,
.f-title-r::after {
  content: "";
  display: block;
}
.section-title::before, .blog section .title::before, .rich-content h1::before, .text-box h2::before,
.f-title-r::before {
  padding-top: 2px;
}
.section-title::after, .blog section .title::after, .rich-content h1::after, .text-box h2::after,
.f-title-r::after {
  margin-bottom: -7px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .section-title, .blog section .title, .rich-content h1, .text-box h2,
.f-title-r {
    font-size: 24px;
    line-height: 30px;
  }
  .section-title::before, .blog section .title::before, .rich-content h1::before, .text-box h2::before,
.f-title-r::before {
    padding-top: 2px;
  }
  .section-title::after, .blog section .title::after, .rich-content h1::after, .text-box h2::after,
.f-title-r::after {
    margin-bottom: -7px;
  }
}
@media screen and (min-width: 650px) {
  .section-title, .blog section .title, .rich-content h1, .text-box h2,
.f-title-r {
    font-size: 28px;
    line-height: 40px;
  }
  .section-title::before, .blog section .title::before, .rich-content h1::before, .text-box h2::before,
.f-title-r::before {
    padding-top: 1px;
  }
  .section-title::after, .blog section .title::after, .rich-content h1::after, .text-box h2::after,
.f-title-r::after {
    margin-bottom: -11px;
  }
}
@media screen and (min-width: 990px) {
  .section-title, .blog section .title, .rich-content h1, .text-box h2,
.f-title-r {
    font-size: 24px;
    line-height: 35px;
  }
  .section-title::before, .blog section .title::before, .rich-content h1::before, .text-box h2::before,
.f-title-r::before {
    padding-top: 4px;
  }
  .section-title::after, .blog section .title::after, .rich-content h1::after, .text-box h2::after,
.f-title-r::after {
    margin-bottom: -9px;
  }
}
@media screen and (min-width: 1850px) {
  .section-title, .blog section .title, .rich-content h1, .text-box h2,
.f-title-r {
    font-size: 32px;
    line-height: 40px;
  }
  .section-title::before, .blog section .title::before, .rich-content h1::before, .text-box h2::before,
.f-title-r::before {
    padding-top: 4px;
  }
  .section-title::after, .blog section .title::after, .rich-content h1::after, .text-box h2::after,
.f-title-r::after {
    margin-bottom: -9px;
  }
}

.metadata, .blog__featured .time-to-read, .details,
.f-metadata {
  font-family: "Mark Pro Heavy";
  font-size: 14px;
  line-height: 25px;
  font-weight: 800;
  letter-spacing: 0.1em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  text-transform: uppercase;
}
.metadata b, .blog__featured .time-to-read b, .details b,
.metadata strong,
.blog__featured .time-to-read strong,
.details strong,
.f-metadata b,
.f-metadata strong {
  font-weight: 600;
}
.metadata i, .blog__featured .time-to-read i, .details i,
.metadata em,
.blog__featured .time-to-read em,
.details em,
.f-metadata i,
.f-metadata em {
  font-style: italic;
}
.metadata::before, .blog__featured .time-to-read::before, .details::before, .metadata::after, .blog__featured .time-to-read::after, .details::after,
.f-metadata::before,
.f-metadata::after {
  content: "";
  display: block;
}
.metadata::before, .blog__featured .time-to-read::before, .details::before,
.f-metadata::before {
  padding-top: 3px;
}
.metadata::after, .blog__featured .time-to-read::after, .details::after,
.f-metadata::after {
  margin-bottom: -8px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .metadata, .blog__featured .time-to-read, .details,
.f-metadata {
    font-size: 14px;
    line-height: 25px;
  }
  .metadata::before, .blog__featured .time-to-read::before, .details::before,
.f-metadata::before {
    padding-top: 3px;
  }
  .metadata::after, .blog__featured .time-to-read::after, .details::after,
.f-metadata::after {
    margin-bottom: -8px;
  }
}
@media screen and (min-width: 650px) {
  .metadata, .blog__featured .time-to-read, .details,
.f-metadata {
    font-size: 14px;
    line-height: 25px;
  }
  .metadata::before, .blog__featured .time-to-read::before, .details::before,
.f-metadata::before {
    padding-top: 3px;
  }
  .metadata::after, .blog__featured .time-to-read::after, .details::after,
.f-metadata::after {
    margin-bottom: -8px;
  }
}
@media screen and (min-width: 990px) {
  .metadata, .blog__featured .time-to-read, .details,
.f-metadata {
    font-size: 14px;
    line-height: 25px;
  }
  .metadata::before, .blog__featured .time-to-read::before, .details::before,
.f-metadata::before {
    padding-top: 3px;
  }
  .metadata::after, .blog__featured .time-to-read::after, .details::after,
.f-metadata::after {
    margin-bottom: -8px;
  }
}
@media screen and (min-width: 1850px) {
  .metadata, .blog__featured .time-to-read, .details,
.f-metadata {
    font-size: 14px;
    line-height: 25px;
  }
  .metadata::before, .blog__featured .time-to-read::before, .details::before,
.f-metadata::before {
    padding-top: 3px;
  }
  .metadata::after, .blog__featured .time-to-read::after, .details::after,
.f-metadata::after {
    margin-bottom: -8px;
  }
}

.f-quote {
  font-family: "Mark Pro", sans-serif;
  font-size: 25px;
  line-height: 35px;
  letter-spacing: 0.01em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  -webkit-font-kerning: normal;
          font-kerning: normal;
}
.f-quote b,
.f-quote strong {
  font-weight: 600;
}
.f-quote i,
.f-quote em {
  font-style: italic;
}
.f-quote::before,
.f-quote::after {
  content: "";
  display: block;
}
.f-quote::before {
  padding-top: 0px;
}
.f-quote::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .f-quote {
    font-size: 25px;
    line-height: 35px;
  }
  .f-quote::before {
    padding-top: 0px;
  }
  .f-quote::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 650px) {
  .f-quote {
    font-size: 25px;
    line-height: 35px;
  }
  .f-quote::before {
    padding-top: 0px;
  }
  .f-quote::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .f-quote {
    font-size: 25px;
    line-height: 35px;
  }
  .f-quote::before {
    padding-top: 0px;
  }
  .f-quote::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .f-quote {
    font-size: 25px;
    line-height: 35px;
  }
  .f-quote::before {
    padding-top: 0px;
  }
  .f-quote::after {
    margin-bottom: 0px;
  }
}

.s-bold {
  font-family: "Mark Pro Heavy";
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
}

.design-grid-toggles {
  position: fixed;
  z-index: 9999;
  left: 0;
  bottom: 0;
  font-size: 0;
}
.design-grid-toggles::before, .design-grid-toggles::after {
  display: block;
  position: absolute;
  left: 5px;
  bottom: 100%;
  color: #00a449;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
}
.design-grid-toggles::before {
  margin-bottom: 3px;
}
@media screen and (max-width: 413px) {
  .design-grid-toggles::before {
    content: "xsmall";
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .design-grid-toggles::before {
    content: "small";
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .design-grid-toggles::before {
    content: "medium";
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .design-grid-toggles::before {
    content: "large";
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .design-grid-toggles::before {
    content: "xlarge";
  }
}
@media screen and (min-width: 1850px) {
  .design-grid-toggles::before {
    content: "xxlarge";
  }
}
.design-grid-toggles::after {
  content: attr(data-env);
  margin-bottom: 17px;
}

.design-grid-toggle {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  transition: all 200ms linear;
}

.design-grid-toggle.js-active {
  background-color: #f00;
}

.design-grid-toggle svg {
  display: block;
  width: 10px;
  height: 10px;
}

.design-grid--baseline {
  display: block;
  position: absolute;
  z-index: 9998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 5px, #7fffff 5px, #7fffff 10px);
  opacity: 0.25;
  pointer-events: none;
}
.design-grid--baseline.js-hide {
  display: none;
}

.design-grid--columns {
  display: block;
  position: fixed;
  z-index: 9998;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: transparent;
  opacity: 0.25;
  pointer-events: none;
}
.design-grid--columns.js-hide {
  display: none;
}
@media screen and (max-width: 413px) {
  .design-grid--columns {
    width: calc(100vw - 40px);
    background: repeating-linear-gradient(90deg, #7fffff, #7fffff calc( ( 100vw - 70px ) / 4 ), rgba(0, 0, 0, 0) calc( ( 100vw - 70px ) / 4 ), rgba(0, 0, 0, 0) calc( ( ( 100vw - 70px ) / 4 ) + 10px ));
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .design-grid--columns {
    width: calc(100vw - 80px);
    background: repeating-linear-gradient(90deg, #7fffff, #7fffff calc( ( 100vw - 140px ) / 4 ), rgba(0, 0, 0, 0) calc( ( 100vw - 140px ) / 4 ), rgba(0, 0, 0, 0) calc( ( ( 100vw - 140px ) / 4 ) + 20px ));
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .design-grid--columns {
    width: calc(100vw - 100px);
    background: repeating-linear-gradient(90deg, #7fffff, #7fffff calc( ( 100vw - 240px ) / 8 ), rgba(0, 0, 0, 0) calc( ( 100vw - 240px ) / 8 ), rgba(0, 0, 0, 0) calc( ( ( 100vw - 240px ) / 8 ) + 20px ));
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .design-grid--columns {
    width: 970px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 20px, #7fffff 20px, #7fffff calc( ( ( 930px - 220px ) / 12 ) + 20px ));
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .design-grid--columns {
    width: 1260px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 20px, #7fffff 20px, #7fffff calc( ( ( 1220px - 220px ) / 12 ) + 20px ));
  }
}
@media screen and (min-width: 1850px) {
  .design-grid--columns {
    width: 1640px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 20px, #7fffff 20px, #7fffff calc( ( ( 1600px - 220px ) / 12 ) + 20px ));
  }
}

.work-drawer {
  position: fixed;
  bottom: -100vh;
  z-index: 10;
  display: block;
  width: 100vw;
  height: calc(100% - 90px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: #000;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
@media screen and (min-width: 650px) {
  .work-drawer {
    height: calc(100% - 100px);
  }
}
.work-drawer::-webkit-scrollbar {
  width: 0;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}
.work-drawer[data-state=open] {
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
}
.work-drawer[data-state=open][data-scrolled=true] {
  height: calc(100% - 65px);
}
.work-drawer[data-state=closed] {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.work-drawer .work-drawer__inner {
  position: relative;
  margin: 100px 0;
}
.work-drawer .work-drawer__inner .work-grid__item {
  background-color: #000;
}

.work-grid {
  display: inline-block;
  overflow: hidden;
  margin-bottom: -20px;
}
.work-grid::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}
@media screen and (max-width: 413px) {
  .work-grid {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .work-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .work-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .work-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .work-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .work-grid {
    margin-left: -20px;
  }
}

.work-grid__item {
  overflow: hidden;
  background-color: #ccc;
  background-color: #fff;
  background-size: cover;
  cursor: pointer;
  float: left;
  position: relative;
}
@media screen and (max-width: 413px) {
  .work-grid__item {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .work-grid__item {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .work-grid__item {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .work-grid__item {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .work-grid__item {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .work-grid__item {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 413px) {
  .work-grid__item {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .work-grid__item {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .work-grid__item {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .work-grid__item {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .work-grid__item {
    width: 290px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .work-grid__item {
    width: 385px;
    margin-left: 20px;
  }
}
.work-grid__item:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 62.8571428571%;
}
.work-grid__item > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.work-grid__item video {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.work-grid__item iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 100%;
}

.work-grid__item.large {
  width: 613.3333333333px;
}

@supports (display: grid) {
  .work-grid {
    display: inline-block;
  }
  @media screen and (min-width: 650px) and (max-width: 989px) {
    .work-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media screen and (min-width: 990px) and (max-width: 1299px) {
    .work-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media screen and (min-width: 1300px) {
    .work-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media screen and (max-width: 413px) {
    .work-grid__item {
      grid-gap: 10px;
    }
  }
  @media screen and (min-width: 414px) and (max-width: 649px) {
    .work-grid__item {
      grid-gap: 20px;
    }
  }
  @media screen and (min-width: 650px) and (max-width: 989px) {
    .work-grid__item {
      grid-gap: 20px;
    }
  }
  @media screen and (min-width: 990px) and (max-width: 1299px) {
    .work-grid__item {
      grid-gap: 20px;
    }
  }
  @media screen and (min-width: 1300px) and (max-width: 1849px) {
    .work-grid__item {
      grid-gap: 20px;
    }
  }
  @media screen and (min-width: 1850px) {
    .work-grid__item {
      grid-gap: 20px;
    }
  }

  .work-grid__item.large {
    grid-column: span 2;
    grid-row: span 2;
  }
  @media screen and (max-width: 413px) {
    .work-grid__item.large {
      width: auto;
    }
  }
  @media screen and (min-width: 414px) and (max-width: 649px) {
    .work-grid__item.large {
      width: auto;
    }
  }
  @media screen and (min-width: 650px) and (max-width: 989px) {
    .work-grid__item.large {
      width: auto;
    }
  }
  @media screen and (min-width: 990px) and (max-width: 1299px) {
    .work-grid__item.large {
      width: auto;
    }
  }
  @media screen and (min-width: 1300px) and (max-width: 1849px) {
    .work-grid__item.large {
      width: auto;
    }
  }
  @media screen and (min-width: 1850px) {
    .work-grid__item.large {
      width: auto;
    }
  }
}
.item--video__fallback {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.work-grid__close-icon {
  position: absolute;
  top: -60px;
  right: 0;
  width: 20px;
  height: 20px;
  background-image: url("../img/close-icon.svg");
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  transition: -webkit-transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1);
  transition: transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1);
  transition: transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1), -webkit-transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1);
}
.work-grid__close-icon:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.work-grid__item.lazyloaded {
  position: relative;
}

.thumb__info {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 413px) {
  .thumb__info .thumb__title {
    font-family: "Mark Pro Heavy";
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .thumb__info .thumb__title {
    font-family: "Mark Pro Heavy";
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .thumb__info .thumb__title {
    font-family: "Mark Pro Heavy";
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .thumb__info .thumb__title {
    font-family: "Mark Pro Heavy";
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .thumb__info .thumb__title {
    font-family: "Mark Pro Heavy";
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}
@media screen and (min-width: 1850px) {
  .thumb__info .thumb__title {
    font-family: "Mark Pro Heavy";
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}
.thumb__info span {
  display: block;
}

.thumb__title {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  transition: all 0.6s ease 0.2s;
}

.thumb__statement {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  transition: all 0.6s ease;
}

@media screen and (min-width: 650px) {
  .work-grid__item:hover .thumb__title {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    transition: all 0.6s ease;
  }
  .work-grid__item:hover .thumb__statement {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    transition: all 0.6s ease 0.2s;
  }
  .work-grid__item:hover .work-grid__overlay {
    opacity: 0.9;
  }
}
.work-grid__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  background-color: #000;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: opacity 0.3s ease;
}

.work-grid--home {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .work-grid--home {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 990px) {
  .work-grid--home {
    display: grid;
  }
}

.work-grid--home .work-grid__item {
  float: left;
}
@media screen and (max-width: 413px) {
  .work-grid--home .work-grid__item {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .work-grid--home .work-grid__item {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .work-grid--home .work-grid__item {
    width: calc((((100vw - 240px) / 8) * 2) + 20px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .work-grid--home .work-grid__item {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .work-grid--home .work-grid__item {
    width: 393.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .work-grid--home .work-grid__item {
    width: 520px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .work-grid--home .work-grid__item:nth-child(6) {
    display: none;
  }
}

.work-grid--home .work-grid__item.large {
  grid-column: span 2;
  grid-row: span 2;
  float: left;
}
@media screen and (max-width: 413px) {
  .work-grid--home .work-grid__item.large {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .work-grid--home .work-grid__item.large {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .work-grid--home .work-grid__item.large {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .work-grid--home .work-grid__item.large {
    width: 613.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .work-grid--home .work-grid__item.large {
    width: 806.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .work-grid--home .work-grid__item.large {
    width: 1060px;
    margin-left: 20px;
  }
}

.object-fit-contain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.object-fit-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*! Flickity v2.0.10
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 0;
}

.flickity-prev-next-button:hover {
  background: red;
  border: none;
}

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09f;
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #fff;
}

.flickity-prev-next-button:hover .arrow {
  fill: #fff;
  border: initial;
}

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -35px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: transparent;
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  position: relative;
}
.flickity-page-dots .dot:after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border: solid 2px #efefef;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
  background: #efefef;
}

.carousel-container {
  margin-bottom: 100px;
  position: relative;
}

.main-carousel {
  margin-bottom: 100px;
}

.carousel-cell {
  width: 100%;
}

.flickity-nav {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

.flickity-previous {
  left: 30px;
}
.flickity-previous:hover {
  -webkit-transform: translate(-10px, -50%);
          transform: translate(-10px, -50%);
}

.flickity-next {
  right: 30px;
}
.flickity-next:hover {
  -webkit-transform: translate(10px, -50%);
          transform: translate(10px, -50%);
}

.image-crossfader {
  position: relative;
  position: relative;
  background-color: #fff;
}
.image-crossfader:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 62.4731182796%;
}
.image-crossfader > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.image-crossfader a {
  display: block;
}
.image-crossfader__wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.image-crossfader__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  transition: opacity 900ms ease;
}
.image-crossfader__img.lazyloaded {
  opacity: 0;
}
.image-crossfader__img--visible {
  opacity: 1;
  pointer-events: initial;
}
.image-crossfader__img--visible.lazyloaded {
  opacity: 1;
}
.image-crossfader img {
  opacity: 0;
  transition: opacity 1s;
}
.image-crossfader img.flickity-lazyloaded,
.image-crossfader img.flickity-lazyerror {
  opacity: 1;
  height: auto;
}
.image-crossfader .flickity-viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.image-crossfader__cell {
  pointer-events: none;
}
.image-crossfader__cell.is-selected {
  pointer-events: initial;
}
.image-crossfader__cell img {
  height: auto;
}

html {
  /* juggling left/right and margin left/right as 100vw includes scroll bars so forcing 100vw width to make grid colspan calcs work */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  min-height: 100%;
  margin-right: -50vw;
  margin-left: -50vw;
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  background: #fff;
  color: #000;
  font-family: "Mark Pro", sans-serif;
  font-size: 62.5%;
  -webkit-font-feature-settings: "kern";
          font-feature-settings: "kern";
  -webkit-font-kerning: normal;
          font-kerning: normal;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  height: 100%;
  width: 100vw;
  overflow-x: hidden;
}
body::after {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 1px;
  height: 1px;
  margin-top: -1px;
  margin-left: -1px;
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
}

body.lock-scroll {
  position: fixed;
}

@media screen and (max-width: 413px) {
  head {
    font-family: "xsmall";
  }

  body::after {
    content: "xsmall";
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  head {
    font-family: "small";
  }

  body::after {
    content: "small";
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  head {
    font-family: "medium";
  }

  body::after {
    content: "medium";
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  head {
    font-family: "large";
  }

  body::after {
    content: "large";
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  head {
    font-family: "xlarge";
  }

  body::after {
    content: "xlarge";
  }
}
@media screen and (min-width: 1850px) {
  head {
    font-family: "xxlarge";
  }

  body::after {
    content: "xxlarge";
  }
}
.container,
footer,
.header__nav-items--mobile,
.video-overlay,
main,
.work-drawer .work-drawer__inner {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 413px) {
  .container,
footer,
.header__nav-items--mobile,
.video-overlay,
main,
.work-drawer .work-drawer__inner {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .container,
footer,
.header__nav-items--mobile,
.video-overlay,
main,
.work-drawer .work-drawer__inner {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .container,
footer,
.header__nav-items--mobile,
.video-overlay,
main,
.work-drawer .work-drawer__inner {
    width: calc(100vw - 100px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .container,
footer,
.header__nav-items--mobile,
.video-overlay,
main,
.work-drawer .work-drawer__inner {
    width: 930px;
    padding-right: 0;
    padding-left: 0;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .container,
footer,
.header__nav-items--mobile,
.video-overlay,
main,
.work-drawer .work-drawer__inner {
    width: 1220px;
    padding-right: 0;
    padding-left: 0;
  }
}
@media screen and (min-width: 1850px) {
  .container,
footer,
.header__nav-items--mobile,
.video-overlay,
main,
.work-drawer .work-drawer__inner {
    width: 1600px;
    padding-right: 0;
    padding-left: 0;
  }
}

main {
  position: relative;
}

img {
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.lazyload,
.lazyloading {
  opacity: 0;
}

.loading,
.lazyload,
.lazyloaded,
.image {
  opacity: 1;
  transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}

[style*="--aspect-ratio"] > img {
  height: auto;
}

@supports (--custom: property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }

  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
    background-color: #000;
  }

  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}
.project-bar {
  position: relative;
  display: flex;
  padding: 80px 0;
  padding-top: calc(80px + 60px);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translateY(-80px);
          transform: translateY(-80px);
  display: flex;
  flex-flow: row wrap;
}
@media screen and (max-width: 413px) {
  .project-bar {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .project-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .project-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .project-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .project-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .project-bar {
    margin-left: -20px;
  }
}
.project-bar *::-moz-selection {
  background: rgba(255, 255, 255, 0.996);
  /* WebKit/Blink Browsers */
  color: #000;
}
.project-bar *::selection {
  background: rgba(255, 255, 255, 0.996);
  /* WebKit/Blink Browsers */
  color: #000;
}
.project-bar *::-moz-selection {
  opacity: 1;
  background: rgba(255, 255, 255, 0.996);
  /* Gecko Browsers */
  color: #000;
}
.project-bar::before {
  content: "";
  position: absolute;
  top: 0;
  right: -99em;
  bottom: 0;
  left: -99em;
  z-index: -1;
  background-color: #000;
}
.project-bar .bar__headline {
  margin-top: 0;
  color: #fff;
  float: left;
}
@media screen and (max-width: 413px) {
  .project-bar .bar__headline {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .project-bar .bar__headline {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .project-bar .bar__headline {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .project-bar .bar__headline {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .project-bar .bar__headline {
    width: 496.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .project-bar .bar__headline {
    width: 520px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .project-bar .bar__headline {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .project-bar .bar__headline {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 40px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .project-bar .bar__headline {
    margin-left: calc((((100vw - 240px) / 8) * 0) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .project-bar .bar__headline {
    margin-left: 99.1666666667px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .project-bar .bar__headline {
    margin-left: 123.3333333333px;
  }
}
@media screen and (min-width: 1850px) {
  .project-bar .bar__headline {
    margin-left: 155px;
  }
}
@media screen and (max-width: 989px) {
  .project-bar .bar__headline {
    margin-left: 20px;
  }
}
.project-bar div > * + * {
  margin-top: 20px;
}
.project-bar .description {
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .project-bar .description {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .project-bar .description {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .project-bar .description {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .project-bar .description {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .project-bar .description {
    width: 496.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .project-bar .description {
    width: 655px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .project-bar .description {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .project-bar .description {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 40px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .project-bar .description {
    margin-left: calc((((100vw - 240px) / 8) * 0) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .project-bar .description {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .project-bar .description {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .project-bar .description {
    margin-left: 155px;
  }
}
@media screen and (max-width: 989px) {
  .project-bar .description {
    height: auto;
    margin-left: 20px;
  }
}
.project-bar .description__title {
  margin-top: 0;
  color: #b3b3b3;
}
.project-bar .description__content {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
}
.project-bar .description__content.hang-quote p::before {
  content: "\201C";
  position: absolute;
  display: block;
  margin-left: -0.7rem;
}
.project-bar .description__content.hang-quote p::after {
  content: "\201D";
  position: relative;
  display: inline-block;
}
.project-bar .bar__details {
  display: block;
  color: #b3b3b3;
}

.project-bar.extended {
  padding-bottom: 0;
}
.project-bar.extended::after {
  content: "";
  position: absolute;
  top: 100%;
  right: -99em;
  left: -99em;
  display: block;
  background-color: #000;
}
@media screen and (max-width: 413px) {
  .project-bar.extended::after {
    height: 50vw;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .project-bar.extended::after {
    height: 40vw;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .project-bar.extended::after {
    height: 34vw;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .project-bar.extended::after {
    height: 280px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .project-bar.extended::after {
    height: 400px;
  }
}
@media screen and (min-width: 1850px) {
  .project-bar.extended::after {
    height: 530px;
  }
}

.posts-grid {
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  padding-top: 44px;
  padding-bottom: 70px;
  background: yellow;
  display: flex;
  flex-flow: row wrap;
}
@media screen and (max-width: 413px) {
  .posts-grid {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .posts-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .posts-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .posts-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .posts-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .posts-grid {
    margin-left: -20px;
  }
}
.posts-grid .posts-grid__post {
  position: relative;
  margin: 20px 0;
  background: pink;
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .posts-grid .posts-grid__post {
    width: calc((((100vw - 70px) / 4) * 3) + 20px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .posts-grid .posts-grid__post {
    width: calc((((100vw - 140px) / 4) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .posts-grid .posts-grid__post {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .posts-grid .posts-grid__post {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .posts-grid .posts-grid__post {
    width: 290px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .posts-grid .posts-grid__post {
    width: 385px;
    margin-left: 20px;
  }
}
.posts-grid img {
  width: 100%;
}

main {
  display: block;
  margin-top: 120px;
}

.cover-asset {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  transition: all 1s ease;
}
.cover-asset video {
  width: 100%;
}

.project-page .cover-asset--image {
  position: relative;
}
.project-page .cover-asset--image:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 62.4590163934%;
}
.project-page .cover-asset--image > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.project-page .cover-asset--image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: #fff;
  transition: opacity 0.6s ease 0.3s;
}

.project-page .cover-asset--popup img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: #fff;
  transition: opacity 0.6s ease 0.3s;
}

.project-page .cover-asset--image img.lazyloaded {
  opacity: 1;
}
.project-page .cover-asset--image img.lazyloaded::after {
  content: inital;
  display: none;
  padding-bottom: 0;
}

.project-page .cover-asset--popup {
  position: relative;
  z-index: 1;
  position: relative;
  overflow: hidden;
}
.project-page .cover-asset--popup:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 62.4590163934%;
}
.project-page .cover-asset--popup > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.project-page .cover-asset--popup__overlay {
  position: relative;
  z-index: 0;
}

.cover-asset.hide {
  overflow: 0;
  -webkit-transform: translateY(200%);
          transform: translateY(200%);
}

.cover-asset.reveal {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.packery-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
@media screen and (max-width: 413px) {
  .packery-block {
    grid-gap: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .packery-block {
    grid-gap: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .packery-block {
    grid-gap: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .packery-block {
    grid-gap: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .packery-block {
    grid-gap: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .packery-block {
    grid-gap: 20px;
  }
}

[data-js~=gridItem] {
  grid-column: span 1;
  grid-row: span 1;
}

.grid-image--tall {
  display: block;
  overflow: hidden;
  grid-column: span 1;
  grid-row: span 2;
}
.grid-image--tall img {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
}
@media screen and (max-width: 413px) {
  .grid-image--tall {
    position: relative;
  }
  .grid-image--tall img {
    position: relative;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .grid-image--tall {
    position: relative;
  }
  .grid-image--tall img {
    position: relative;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .grid-image--tall {
    position: relative;
  }
  .grid-image--tall:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 129.746835443%;
  }
  .grid-image--tall > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .grid-image--tall {
    position: relative;
  }
  .grid-image--tall:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 129.4505494505%;
  }
  .grid-image--tall > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .grid-image--tall {
    position: relative;
  }
  .grid-image--tall:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 128.3333333333%;
  }
  .grid-image--tall > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 1850px) {
  .grid-image--tall {
    position: relative;
  }
  .grid-image--tall:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 127.4683544304%;
  }
  .grid-image--tall > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media screen and (max-width: 413px) {
  .grid-image-sizer {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .grid-image-sizer {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .grid-image-sizer {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .grid-image-sizer {
    width: 455px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .grid-image-sizer {
    width: 600px;
  }
}
@media screen and (min-width: 1850px) {
  .grid-image-sizer {
    width: 790px;
  }
}

.carousel-cell {
  cursor: pointer;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 413px) {
  .carousel-cell {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .carousel-cell {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .carousel-cell {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .carousel-cell {
    width: 613.3333333333px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .carousel-cell {
    width: 1013.3333333333px;
  }
}
@media screen and (min-width: 1850px) {
  .carousel-cell {
    width: 1330px;
  }
}
.carousel-cell.is-selected {
  opacity: 1;
  cursor: -webkit-grab;
  cursor: grab;
}
@media screen and (max-width: 413px) {
  .carousel-cell {
    margin-right: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .carousel-cell {
    margin-right: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .carousel-cell {
    margin-right: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .carousel-cell {
    margin-right: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .carousel-cell {
    margin-right: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .carousel-cell {
    margin-right: 20px;
  }
}

.project-page > * + * + * {
  position: relative;
  margin-bottom: 40px;
}
@media screen and (min-width: 650px) {
  .project-page > * + * + * {
    margin-bottom: 80px;
  }
}

.breakout-image img {
  position: relative;
  top: 0;
}

.text-box {
  color: #3C3C3C;
}
@media screen and (max-width: 413px) {
  .text-box {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .text-box {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .text-box {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .text-box {
    width: 455px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .text-box {
    width: 600px;
  }
}
@media screen and (min-width: 1850px) {
  .text-box {
    width: 655px;
  }
}
@media screen and (max-width: 413px) {
  .text-box.text-box--right {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 10px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .text-box.text-box--right {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .text-box.text-box--right {
    margin-left: calc(((((100vw - 240px) / 8) * 4) + 60px) + 20px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .text-box.text-box--right {
    margin-left: 475px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .text-box.text-box--right {
    margin-left: 620px;
  }
}
@media screen and (min-width: 1850px) {
  .text-box.text-box--right {
    margin-left: 810px;
  }
}
@media screen and (max-width: 413px) {
  .text-box.text-box--right {
    margin-left: 0;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .text-box.text-box--right {
    margin-left: 0;
  }
}
.text-box > *::-moz-selection {
  background: rgba(0, 0, 0, 0.996);
  /* WebKit/Blink Browsers */
  color: #fff;
}
.text-box > *::selection {
  background: rgba(0, 0, 0, 0.996);
  /* WebKit/Blink Browsers */
  color: #fff;
}
.text-box > *::-moz-selection {
  background: rgba(0, 0, 0, 0.996);
  /* Gecko Browsers */
  color: #fff;
}
.text-box > * + * {
  margin-top: 20px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .text-box {
    margin-left: 0;
  }
}

.stat-box * + * {
  margin-top: 10px;
}
.stat-box .stat__headline {
  color: #000;
}

.dark-section .stat__headline {
  color: #fff;
}

.dark-section .stat__title {
  color: #b3b3b3;
}

.quote-credit {
  display: block;
  color: #afafaf;
}

.embed-container {
  position: relative;
  max-width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}
.embed-container.embed-container--square {
  padding-bottom: 51%;
  padding-bottom: calc(50% - 20px);
}
@media screen and (max-width: 649px) {
  .embed-container.embed-container--square {
    padding-bottom: 95.1%;
  }
}
.embed-container.embed-container--tall {
  padding-bottom: 86.05%;
  padding-bottom: calc(88% - 25px);
}
@media screen and (max-width: 649px) {
  .embed-container.embed-container--tall {
    padding-bottom: 170.89%;
  }
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-js=openWorkDrawer] {
  cursor: pointer;
}

.half-images::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}
@media screen and (max-width: 413px) {
  .half-images {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .half-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .half-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .half-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .half-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .half-images {
    margin-left: -20px;
  }
}
.half-images > * {
  float: left;
  margin-bottom: 20px;
}
@media screen and (max-width: 413px) {
  .half-images > * {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .half-images > * {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .half-images > * {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .half-images > * {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .half-images > * {
    width: 600px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .half-images > * {
    width: 790px;
    margin-left: 20px;
  }
}

.embed-container--half {
  padding-bottom: 56.25%;
}
@media screen and (min-width: 650px) {
  .embed-container--half {
    padding-bottom: 27.65%;
  }
}

.half-content::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}
@media screen and (max-width: 413px) {
  .half-content {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .half-content {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .half-content {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .half-content {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .half-content {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .half-content {
    margin-left: -20px;
  }
}
.half-content .side {
  float: left;
  box-sizing: border-box;
  margin-bottom: 20px;
}
@media screen and (max-width: 413px) {
  .half-content .side {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .half-content .side {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .half-content .side {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .half-content .side {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .half-content .side {
    width: 600px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .half-content .side {
    width: 790px;
    margin-left: 20px;
  }
}
.half-content .side img {
  width: 100%;
}
@media screen and (max-width: 413px) {
  .half-content .text-box > * {
    width: calc((((100vw - 70px) / 4) * 3) + 20px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .half-content .text-box > * {
    width: calc((((100vw - 140px) / 4) * 3) + 40px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .half-content .text-box > * {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .half-content .text-box > * {
    width: 375.8333333333px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .half-content .text-box > * {
    width: 496.6666666667px;
  }
}
@media screen and (min-width: 1850px) {
  .half-content .text-box > * {
    width: 520px;
  }
}
.half-content .text--left {
  padding-right: 30px;
}
.half-content .text--right {
  padding-left: 30px;
}

.next-project {
  display: block;
  width: 100%;
}
.next-project .inner {
  position: relative;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.next-project .inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 66.6666666667%;
}
.next-project .inner > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 650px) {
  .next-project .inner {
    position: relative;
  }
  .next-project .inner:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 41%;
  }
  .next-project .inner > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.next-project .next-project__shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  opacity: 0.3;
  background-color: #000;
  transition: opacity 0.6s ease;
}
.next-project:hover .next-project__shade {
  opacity: 0;
}
.next-project .thumb__info {
  position: absolute;
  padding-left: 0;
  color: #fff;
}
.next-project .thumb__info .thumb__title,
.next-project .thumb__info .thumb__statement {
  opacity: 1;
  color: #fff;
}
.next-project .container {
  position: relative;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: block;
  height: 100%;
  margin: 0 auto;
}

.dark-section {
  position: relative;
  padding: 80px 0;
  background-color: #000;
}
.dark-section > * {
  position: relative;
  margin-bottom: 40px;
  color: #f9f9f9;
}
.dark-section > * ::-moz-selection {
  background: rgba(255, 255, 255, 0.996);
  /* WebKit/Blink Browsers */
  color: #000;
}
.dark-section > * ::selection {
  background: rgba(255, 255, 255, 0.996);
  /* WebKit/Blink Browsers */
  color: #000;
}
.dark-section > * ::-moz-selection {
  background: rgba(255, 255, 255, 0.996);
  /* Gecko Browsers */
  color: #000;
}
@media screen and (min-width: 650px) {
  .dark-section > * {
    margin-bottom: 80px;
  }
}
.dark-section > *:last-child {
  margin-bottom: 0;
}

.dark-section__extended {
  position: absolute;
  top: 0;
  right: -99em;
  bottom: 0;
  left: 0;
  left: -99em;
  height: 100%;
  background-color: #000;
}

.full-image {
  background-color: #000;
}
.full-image img {
  display: block;
}

.fade-in {
  opacity: 1;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-name: fadeInOpacity;
          animation-name: fadeInOpacity;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.work-drawer .work-grid__item {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.work-drawer .work-grid__item:first-child {
  -webkit-animation-delay: 0;
          animation-delay: 0;
}
.work-drawer .work-grid__item:nth-child(2), .work-drawer .work-grid__item:nth-child(5) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.work-drawer .work-grid__item:nth-child(3), .work-drawer .work-grid__item:nth-child(6), .work-drawer .work-grid__item:nth-child(9) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.work-drawer .work-grid__item:nth-child(4), .work-drawer .work-grid__item:nth-child(7), .work-drawer .work-grid__item:nth-child(10), .work-drawer .work-grid__item:nth-child(13) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.work-drawer .work-grid__item:nth-child(8), .work-drawer .work-grid__item:nth-child(7), .work-drawer .work-grid__item:nth-child(11), .work-drawer .work-grid__item:nth-child(14) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.work-drawer .work-grid__item:nth-child(12), .work-drawer .work-grid__item:nth-child(15) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.work-drawer .work-grid__item:nth-child(16) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.flickity-indicator {
  position: absolute;
  right: 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  margin-top: 0;
  background-color: #fff;
  color: #3c3c3c;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .flickity-indicator {
    padding-right: 40px;
  }
}
@media screen and (min-width: 650px) {
  .flickity-indicator {
    display: none;
  }
}
.flickity-indicator span {
  display: inline-block;
}

.heading-behind {
  height: 65vw;
  width: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0) translateZ(0) translateY(0);
  transition: -webkit-transform 1s cubic-bezier(0.7, -0.01, 0.34, 1.01);
  transition: transform 1s cubic-bezier(0.7, -0.01, 0.34, 1.01);
  transition: transform 1s cubic-bezier(0.7, -0.01, 0.34, 1.01), -webkit-transform 1s cubic-bezier(0.7, -0.01, 0.34, 1.01);
}
.heading-behind.hide {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0) translateZ(0) translateY(-100%);
}
@media screen and (min-width: 650px) {
  .heading-behind {
    height: 58vw;
  }
}
@media screen and (min-width: 990px) {
  .heading-behind {
    height: 600px;
  }
}
@media screen and (min-width: 1300px) {
  .heading-behind {
    height: 800px;
  }
}
@media screen and (min-width: 1850px) {
  .heading-behind {
    height: 1000px;
  }
}

.rich-content {
  margin: 0 auto;
  margin-top: 62px;
  margin-bottom: 120px;
}
@media screen and (max-width: 413px) {
  .rich-content {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .rich-content {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .rich-content {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .rich-content {
    width: 613.3333333333px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .rich-content {
    width: 806.6666666667px;
  }
}
@media screen and (min-width: 1850px) {
  .rich-content {
    width: 1060px;
  }
}
.rich-content > * + * {
  margin-top: 20px;
}

.rich-content a {
  display: inline-block;
  margin-bottom: 0;
}
.rich-content .breakout-image {
  margin-top: 60px;
  margin-bottom: 40px;
}

.rich-content > .flickity-slider {
  margin-bottom: 60px;
  margin-top: 60px;
}
.rich-content .one-col-image {
  line-height: 0;
  margin-top: 40px;
}
.rich-content .one-col-image + p {
  margin-top: 40px;
}
.rich-content .two-col-images {
  margin-top: 40px;
  margin-bottom: 40px;
  line-height: 0;
}
.rich-content .two-col-images::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}
@media screen and (max-width: 413px) {
  .rich-content .two-col-images {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .rich-content .two-col-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .rich-content .two-col-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .rich-content .two-col-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .rich-content .two-col-images {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .rich-content .two-col-images {
    margin-left: -20px;
  }
}
.rich-content .two-col-images > div {
  float: left;
}
@media screen and (max-width: 413px) {
  .rich-content .two-col-images > div {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .rich-content .two-col-images > div {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .rich-content .two-col-images > div {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .rich-content .two-col-images > div {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .rich-content .two-col-images > div {
    width: 393.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .rich-content .two-col-images > div {
    width: 520px;
    margin-left: 20px;
  }
}
.rich-content .two-col-images * + * {
  margin-top: 30px;
}
@media screen and (min-width: 990px) {
  .rich-content .two-col-images * + * {
    margin-top: 0;
  }
}

.details {
  margin-top: 10px;
  font-size: 1.5em;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
@media screen and (min-width: 650px) {
  .details {
    flex-direction: row;
  }
}
.details > * {
  display: inline-block;
}
.details:before {
  content: unset;
}
.details:after {
  content: unset;
}

.details__time-to-read {
  color: #8c8c8c;
  display: flex;
}

.details__breadcrumb span {
  color: #8c8c8c;
}

.link, .rich-content a {
  background-image: linear-gradient(to bottom, rgba(204, 204, 204, 0) 50%, #cccccc 50%);
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0 1.5em;
  padding-bottom: 5px;
  margin-bottom: -5px;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -5px;
}

.blog__featured .featured-columns::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}
@media screen and (max-width: 413px) {
  .blog__featured .featured-columns {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog__featured .featured-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .blog__featured .featured-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog__featured .featured-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog__featured .featured-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .blog__featured .featured-columns {
    margin-left: -20px;
  }
}
.blog__featured .featured-columns__col {
  float: left;
  display: block;
  height: 100%;
  position: relative;
  margin-bottom: 40px;
}
@media screen and (max-width: 413px) {
  .blog__featured .featured-columns__col {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog__featured .featured-columns__col {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .blog__featured .featured-columns__col {
    width: calc(100vw - 100px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog__featured .featured-columns__col {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog__featured .featured-columns__col {
    width: 600px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .blog__featured .featured-columns__col {
    width: 790px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .blog__featured .featured-columns__col .featured-lg-module {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog__featured .featured-columns__col .featured-lg-module {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .blog__featured .featured-columns__col .featured-lg-module {
    width: calc(100vw - 100px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog__featured .featured-columns__col .featured-lg-module {
    width: 455px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog__featured .featured-columns__col .featured-lg-module {
    width: 600px;
  }
}
@media screen and (min-width: 1850px) {
  .blog__featured .featured-columns__col .featured-lg-module {
    width: 790px;
  }
}
.blog__featured .sm-grid {
  display: none;
}
@media screen and (min-width: 990px) {
  .blog__featured .sm-grid {
    display: inline-block;
  }
}
.blog__featured .featured-sm-module {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  flex-flow: row wrap;
}
@media screen and (max-width: 413px) {
  .blog__featured .featured-sm-module {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog__featured .featured-sm-module {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .blog__featured .featured-sm-module {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog__featured .featured-sm-module {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog__featured .featured-sm-module {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .blog__featured .featured-sm-module {
    margin-left: -20px;
  }
}
.blog__featured .featured-sm-module:last-child {
  margin-bottom: 0;
}
.blog__featured .time-to-read {
  color: #bebebe;
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog__featured .featured-sm-module__text {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog__featured .featured-sm-module__text {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .blog__featured .featured-sm-module__text {
    margin-left: 20px;
  }
}
.blog__featured .featured-sm-module__text > * + * {
  margin-top: 15px;
}
.blog__featured .featured-sm-module__img {
  align-self: center;
  float: left;
}
@media screen and (max-width: 413px) {
  .blog__featured .featured-sm-module__img {
    width: calc((((100vw - 70px) / 4) * 2) + 10px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog__featured .featured-sm-module__img {
    width: calc((((100vw - 140px) / 4) * 2) + 20px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .blog__featured .featured-sm-module__img {
    width: calc((((100vw - 240px) / 8) * 2) + 20px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog__featured .featured-sm-module__img {
    width: 138.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog__featured .featured-sm-module__img {
    width: 186.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .blog__featured .featured-sm-module__img {
    width: 250px;
    margin-left: 20px;
  }
}

.blog section .title {
  width: 100%;
  margin-bottom: 40px;
  font-variant-numeric: initial;
}

.blog-headline {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 413px) {
  .blog-headline {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog-headline {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .blog-headline {
    width: calc((((100vw - 240px) / 8) * 7) + 120px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog-headline {
    width: 613.3333333333px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog-headline {
    width: 806.6666666667px;
  }
}
@media screen and (min-width: 1850px) {
  .blog-headline {
    width: 1060px;
  }
}

.blog-headline--desktop {
  display: none;
  position: absolute;
  bottom: 0;
  color: #fff;
}
@media screen and (max-width: 413px) {
  .blog-headline--desktop {
    margin-left: 10px;
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .blog-headline--desktop {
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .blog-headline--desktop {
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .blog-headline--desktop {
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .blog-headline--desktop {
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .blog-headline--desktop {
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 650px) {
  .blog-headline--desktop {
    display: block;
  }
}

.blog-headline--mobile {
  display: block;
  position: relative;
  margin: 10px 0;
}
@media screen and (min-width: 650px) {
  .blog-headline--mobile {
    display: none;
  }
}

.shade {
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: 2px;
  background: #020024;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.posts__grid {
  display: flex;
  flex-flow: row wrap;
}
@media screen and (max-width: 413px) {
  .posts__grid {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .posts__grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .posts__grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .posts__grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .posts__grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .posts__grid {
    margin-left: -20px;
  }
}

.posts__grid__item {
  flex: 0 0 auto;
  margin-bottom: 60px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 413px) {
  .posts__grid__item {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .posts__grid__item {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .posts__grid__item {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .posts__grid__item {
    width: 217.5px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .posts__grid__item {
    width: 290px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .posts__grid__item {
    width: 385px;
    margin-left: 20px;
  }
}
.posts__grid__item:hover {
  opacity: 0.8;
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}
.posts__grid__item > * + * {
  margin-top: 15px;
}
.posts__grid__item .thumbnail {
  position: relative;
  background-color: #000;
  overflow: hidden;
}
.posts__grid__item .thumbnail:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 62.2580645161%;
}
.posts__grid__item .thumbnail > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.posts__grid__item .thumbnail img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  top: 0;
  width: 100%;
}

.metadata span {
  display: inline-block;
  color: #6e6e6d;
}
.metadata .category {
  color: #bebebe;
}

.featured-columns__col > * + * {
  margin-top: 15px;
}

/* Fade-In Effect */
.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}

/* Fade-Out Effect */
.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 2s linear;
}

.cover-image {
  position: relative;
}

.pagination {
  height: 100px;
  display: flex;
  justify-content: space-between;
}
.pagination a {
  display: inline-block;
  line-height: 1;
  color: #6e6e6d;
}

.rich-content .size-full {
  height: auto !important;
}

/* Careers section */
.blog__featured--careers {
  margin-top: 80px;
  margin-bottom: 80px;
}

.about-motto {
  height: 60px;
  background-image: url("../img/in-creative.svg");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin: 0 auto;
  margin-bottom: 100px;
  margin-top: 180px;
  display: none;
}
@media screen and (max-width: 413px) {
  .about-motto {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about-motto {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about-motto {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about-motto {
    width: 455px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about-motto {
    width: 600px;
  }
}
@media screen and (min-width: 1850px) {
  .about-motto {
    width: 790px;
  }
}

.about .about-content {
  margin-top: 62px;
  margin-bottom: 30px;
}
@media screen and (max-width: 413px) {
  .about .about-content {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about .about-content {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about .about-content {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about .about-content {
    width: 455px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about .about-content {
    width: 806.6666666667px;
  }
}
@media screen and (min-width: 1850px) {
  .about .about-content {
    width: 790px;
  }
}
@media screen and (max-width: 413px) {
  .about .about-content {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 10px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about .about-content {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about .about-content {
    margin-left: calc(((((100vw - 240px) / 8) * 1) + 0px) + 20px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about .about-content {
    margin-left: 0px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about .about-content {
    margin-left: 103.3333333333px;
  }
}
@media screen and (min-width: 1850px) {
  .about .about-content {
    margin-left: 135px;
  }
}
.about .about-content > * + * {
  margin-top: 20px;
}
@media screen and (max-width: 413px) {
  .about .about-content {
    margin-left: 0;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about .about-content {
    margin-left: 0;
    margin-top: 30px;
    margin-bottom: 40px;
  }
}
.about .blog-headline--mobile {
  margin-top: 30px;
}

section.about__team {
  position: relative;
  color: #fff;
  background-color: #000;
  padding: 100px 0;
}
section.about__team:before {
  content: "";
  left: -50vh;
  right: -50vh;
  background: inherit;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
}

.section__heading {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  margin-bottom: 60px;
}
@media screen and (max-width: 413px) {
  .section__heading {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .section__heading {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .section__heading {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .section__heading {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .section__heading {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .section__heading {
    margin-left: -20px;
  }
}

.section-description {
  margin-left: 10px;
  margin-top: 20px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .section-description {
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) {
  .section-description {
    flex: 0 0 auto;
  }
}
@media screen and (min-width: 650px) and (max-width: 413px) {
  .section-description {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 650px) and (min-width: 414px) and (max-width: 649px) {
  .section-description {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 650px) and (max-width: 989px) {
  .section-description {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 990px) and (max-width: 1299px) {
  .section-description {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 1300px) and (max-width: 1849px) {
  .section-description {
    width: 496.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 1850px) {
  .section-description {
    width: 520px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 413px) {
  .section-description {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 650px) and (min-width: 414px) and (max-width: 649px) {
  .section-description {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 40px);
  }
}
@media screen and (min-width: 650px) and (min-width: 650px) and (max-width: 989px) {
  .section-description {
    margin-left: calc(((((100vw - 240px) / 8) * 1) + 0px) + 40px);
  }
}
@media screen and (min-width: 650px) and (min-width: 990px) and (max-width: 1299px) {
  .section-description {
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 1300px) and (max-width: 1849px) {
  .section-description {
    margin-left: 123.3333333333px;
  }
}
@media screen and (min-width: 650px) and (min-width: 1850px) {
  .section-description {
    margin-left: 20px;
  }
}

.section-heading {
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .section-heading {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .section-heading {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .section-heading {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .section-heading {
    width: 375.8333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .section-heading {
    width: 496.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .section-heading {
    width: 520px;
    margin-left: 20px;
  }
}

.team__member-grid {
  display: flex;
  flex-flow: row wrap;
}
@media screen and (max-width: 413px) {
  .team__member-grid {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .team__member-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .team__member-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .team__member-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .team__member-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .team__member-grid {
    margin-left: -20px;
  }
}

.team__member {
  flex: 0 0 auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 413px) {
  .team__member {
    width: calc((((100vw - 70px) / 4) * 2) + 10px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .team__member {
    width: calc((((100vw - 140px) / 4) * 2) + 20px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .team__member {
    width: calc((((100vw - 240px) / 8) * 2) + 20px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .team__member {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .team__member {
    width: 290px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .team__member {
    width: 385px;
    margin-left: 20px;
  }
}

.member__title {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 25px;
  margin-top: 10px;
}
.member__title span {
  width: 100%;
  display: inline-block;
}
.member__title .member__name {
  font-family: "Mark Pro Heavy";
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: bold;
  text-transform: uppercase;
}

.member__img {
  transition: 0.3s ease;
}

section.about__brands {
  position: relative;
  color: #000;
  background-color: #fff;
  padding: 100px 0;
}

.about__brands-grid {
  display: flex;
  flex-flow: row wrap;
}
@media screen and (max-width: 413px) {
  .about__brands-grid {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about__brands-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about__brands-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about__brands-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about__brands-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .about__brands-grid {
    margin-left: -20px;
  }
}

.about__brands-grid__item {
  flex: 0 0 auto;
  margin-bottom: 20px;
  position: relative;
  background-size: contain;
  background-position: 50% 50%;
}
@media screen and (max-width: 413px) {
  .about__brands-grid__item {
    width: calc((((100vw - 70px) / 4) * 2) + 10px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about__brands-grid__item {
    width: calc((((100vw - 140px) / 4) * 2) + 20px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about__brands-grid__item {
    width: calc((((100vw - 240px) / 8) * 2) + 20px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about__brands-grid__item {
    width: 138.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about__brands-grid__item {
    width: 186.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .about__brands-grid__item {
    width: 250px;
    margin-left: 20px;
  }
}
.about__brands-grid__item:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 73.0964467005%;
}
.about__brands-grid__item > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.about__img-collection {
  width: 100%;
}

.manifesto {
  display: flex;
  flex-flow: row wrap;
  margin-top: 30px;
  margin-bottom: 30px;
}
@media screen and (max-width: 413px) {
  .manifesto {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .manifesto {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .manifesto {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .manifesto {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .manifesto {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .manifesto {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) {
  .manifesto {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.manifesto__item {
  flex: 0 0 auto;
  margin-bottom: 30px;
}
@media screen and (max-width: 413px) {
  .manifesto__item {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .manifesto__item {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .manifesto__item {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .manifesto__item {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .manifesto__item {
    width: 393.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .manifesto__item {
    width: 520px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .manifesto__item {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .manifesto__item {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 40px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .manifesto__item {
    margin-left: calc(((((100vw - 240px) / 8) * 1) + 0px) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .manifesto__item {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .manifesto__item {
    margin-left: 123.3333333333px;
  }
}
@media screen and (min-width: 1850px) {
  .manifesto__item {
    margin-left: 155px;
  }
}
@media screen and (min-width: 990px) {
  .manifesto__item {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 413px) {
  .manifesto__item {
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .manifesto__item {
    margin-left: 20px;
  }
}

.manifesto__item__headline {
  margin-bottom: 15px;
}
@media screen and (min-width: 990px) {
  .manifesto__item__headline {
    margin-bottom: 15px;
  }
}

.manifesto__item__body {
  color: #454545;
}

main.contact > * + * {
  margin-top: 60px;
}

main .contact-statement {
  color: #3c3c3c;
  margin-top: 62px;
  margin-bottom: 60px;
}
@media screen and (max-width: 413px) {
  main .contact-statement {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  main .contact-statement {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  main .contact-statement {
    width: calc((((100vw - 240px) / 8) * 7) + 120px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  main .contact-statement {
    width: 613.3333333333px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  main .contact-statement {
    width: 806.6666666667px;
  }
}
@media screen and (min-width: 1850px) {
  main .contact-statement {
    width: 1060px;
  }
}
@media screen and (max-width: 413px) {
  main .contact-statement {
    margin-left: 0;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  main .contact-statement {
    margin-left: 0;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.contact .blog-headline--mobile {
  margin-top: 30px;
}

.about-columns {
  margin-bottom: 120px;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
@media screen and (max-width: 413px) {
  .about-columns {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about-columns {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .about-columns {
    margin-left: -20px;
  }
}
.about-columns .about-columns__col {
  margin-top: 20px;
}
.about-columns .about-columns__col:first-child {
  margin-top: 0;
}
@media screen and (min-width: 990px) {
  .about-columns .about-columns__col {
    margin-bottom: 0;
    margin-top: 0;
  }
}
.about-columns .about-columns__col--1 {
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .about-columns .about-columns__col--1 {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about-columns .about-columns__col--1 {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about-columns .about-columns__col--1 {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about-columns .about-columns__col--1 {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about-columns .about-columns__col--1 {
    width: 290px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .about-columns .about-columns__col--1 {
    width: 385px;
    margin-left: 20px;
  }
}
.about-columns .about-columns__col--2 {
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .about-columns .about-columns__col--2 {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about-columns .about-columns__col--2 {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about-columns .about-columns__col--2 {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about-columns .about-columns__col--2 {
    width: 217.5px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about-columns .about-columns__col--2 {
    width: 186.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .about-columns .about-columns__col--2 {
    width: 250px;
    margin-left: 20px;
  }
}
.about-columns .about-columns__col--3 {
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .about-columns .about-columns__col--3 {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .about-columns .about-columns__col--3 {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .about-columns .about-columns__col--3 {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .about-columns .about-columns__col--3 {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .about-columns .about-columns__col--3 {
    width: 600px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .about-columns .about-columns__col--3 {
    width: 790px;
    margin-left: 20px;
  }
}

.map {
  width: 100%;
  padding-bottom: 60%;
  background-color: #efefef;
  margin-top: 20px;
  position: relative;
}

#map {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.header-bar {
  position: relative;
  display: flex;
  padding: 40px 0;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-flow: row wrap;
}
.header-bar a {
  background-image: linear-gradient(to bottom, rgba(204, 204, 204, 0) 50%, #cccccc 50%);
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0 1.5em;
  padding-bottom: 5px;
  margin-bottom: -5px;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -5px;
}
@media screen and (min-width: 650px) {
  .header-bar {
    padding: 80px 0;
  }
}
@media screen and (max-width: 413px) {
  .header-bar {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .header-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .header-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .header-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .header-bar {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .header-bar {
    margin-left: -20px;
  }
}
.header-bar .bar__headline {
  float: left;
  margin-top: 0;
}
@media screen and (max-width: 413px) {
  .header-bar .bar__headline {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .header-bar .bar__headline {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .header-bar .bar__headline {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .header-bar .bar__headline {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .header-bar .bar__headline {
    width: 496.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .header-bar .bar__headline {
    width: 520px;
    margin-left: 20px;
  }
}
.header-bar div > * + * {
  margin-top: 20px;
}
.header-bar .description {
  color: #4c4c4c;
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .header-bar .description {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .header-bar .description {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .header-bar .description {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .header-bar .description {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .header-bar .description {
    width: 496.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .header-bar .description {
    width: 520px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .header-bar .description {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .header-bar .description {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 40px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .header-bar .description {
    margin-left: calc(((((100vw - 240px) / 8) * 1) + 0px) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .header-bar .description {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .header-bar .description {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .header-bar .description {
    margin-left: 155px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .header-bar .description {
    margin-top: 40px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .header-bar .description {
    margin-top: 40px;
    margin-left: 10px;
  }
}

.studio-grid::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}
@media screen and (max-width: 413px) {
  .studio-grid {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .studio-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .studio-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .studio-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .studio-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .studio-grid {
    margin-left: -20px;
  }
}
@media screen and (max-width: 649px) and (max-width: 413px) {
  .studio-grid > * + * {
    margin-top: 10px;
  }
}
@media screen and (max-width: 649px) and (min-width: 414px) and (max-width: 649px) {
  .studio-grid > * + * {
    margin-top: 20px;
  }
}
@media screen and (max-width: 649px) and (min-width: 650px) and (max-width: 989px) {
  .studio-grid > * + * {
    margin-top: 20px;
  }
}
@media screen and (max-width: 649px) and (min-width: 990px) and (max-width: 1299px) {
  .studio-grid > * + * {
    margin-top: 20px;
  }
}
@media screen and (max-width: 649px) and (min-width: 1300px) and (max-width: 1849px) {
  .studio-grid > * + * {
    margin-top: 20px;
  }
}
@media screen and (max-width: 649px) and (min-width: 1850px) {
  .studio-grid > * + * {
    margin-top: 20px;
  }
}
.studio-grid .studio__item--sm {
  position: relative;
  float: left;
}
.studio-grid .studio__item--sm:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 62.8571428571%;
}
.studio-grid .studio__item--sm > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 413px) {
  .studio-grid .studio__item--sm {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .studio-grid .studio__item--sm {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .studio-grid .studio__item--sm {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .studio-grid .studio__item--sm {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .studio-grid .studio__item--sm {
    width: 393.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .studio-grid .studio__item--sm {
    width: 520px;
    margin-left: 20px;
  }
}
.studio-grid .studio__item--sm img {
  position: absolute;
  top: 0;
}
@media screen and (min-width: 650px) and (max-width: 413px) {
  .studio-grid .studio__item--sm + .studio__item--sm {
    margin-top: 10px;
  }
}
@media screen and (min-width: 650px) and (min-width: 414px) and (max-width: 649px) {
  .studio-grid .studio__item--sm + .studio__item--sm {
    margin-top: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 650px) and (max-width: 989px) {
  .studio-grid .studio__item--sm + .studio__item--sm {
    margin-top: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 990px) and (max-width: 1299px) {
  .studio-grid .studio__item--sm + .studio__item--sm {
    margin-top: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 1300px) and (max-width: 1849px) {
  .studio-grid .studio__item--sm + .studio__item--sm {
    margin-top: 20px;
  }
}
@media screen and (min-width: 650px) and (min-width: 1850px) {
  .studio-grid .studio__item--sm + .studio__item--sm {
    margin-top: 20px;
  }
}
.studio-grid .studio__item--lg {
  position: relative;
  position: relative;
  background-color: #000;
  float: left;
}
.studio-grid .studio__item--lg:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 62.380952381%;
}
.studio-grid .studio__item--lg > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 413px) {
  .studio-grid .studio__item--lg {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .studio-grid .studio__item--lg {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .studio-grid .studio__item--lg {
    width: calc((((100vw - 240px) / 8) * 5) + 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .studio-grid .studio__item--lg {
    width: 613.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .studio-grid .studio__item--lg {
    width: 806.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .studio-grid .studio__item--lg {
    width: 1060px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .studio-grid .studio__item--lg {
    background-color: #000;
    position: relative;
  }
  .studio-grid .studio__item--lg:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 77.5316455696%;
  }
  .studio-grid .studio__item--lg > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .studio-grid .studio__item--lg {
    background-color: #000;
    position: relative;
  }
  .studio-grid .studio__item--lg:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 77.5316455696%;
  }
  .studio-grid .studio__item--lg > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .studio-grid .studio__item--lg {
    background-color: #000;
    position: relative;
  }
  .studio-grid .studio__item--lg:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 64.1758241758%;
  }
  .studio-grid .studio__item--lg > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .studio-grid .studio__item--lg {
    position: relative;
  }
  .studio-grid .studio__item--lg:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 63.5%;
  }
  .studio-grid .studio__item--lg > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 1850px) {
  .studio-grid .studio__item--lg {
    position: relative;
  }
  .studio-grid .studio__item--lg:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 63.2075471698%;
  }
  .studio-grid .studio__item--lg > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.studio-grid .studio__item--lg img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.news-grid::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}
@media screen and (max-width: 413px) {
  .news-grid {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .news-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .news-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .news-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .news-grid {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  .news-grid {
    margin-left: -20px;
  }
}
.news-grid .flickity-viewport {
  overflow: visible;
}
.news-grid .flickity-slider {
  margin-left: 10px;
}
@media screen and (min-width: 650px) {
  .news-grid .flickity-slider {
    margin-left: 20px;
  }
}
.news-grid .posts__grid__item {
  margin-bottom: 0;
  opacity: 0.3;
}
@media screen and (max-width: 413px) {
  .news-grid .posts__grid__item:first-child {
    margin-left: 0;
  }
}
.news-grid .posts__grid__item.is-selected {
  opacity: 1;
}
.news-grid .posts__grid__item.is-selected + .posts__grid__item {
  opacity: 1;
}
.news-grid .posts__grid__item.is-selected + .posts__grid__item + .posts__grid__item {
  opacity: 1;
}
.news-grid .posts__grid__item.is-selected + .posts__grid__item + .posts__grid__item + .posts__grid__item {
  opacity: 1;
}

.news__item {
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .news__item {
    width: calc((((100vw - 70px) / 4) * 3) + 20px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .news__item {
    width: calc((((100vw - 140px) / 4) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .news__item {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .news__item {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .news__item {
    width: 290px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .news__item {
    width: 385px;
    margin-left: 20px;
  }
}

.homepage .link, .homepage .rich-content a, .rich-content .homepage a {
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (min-width: 650px) {
  .homepage .link, .homepage .rich-content a, .rich-content .homepage a {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

main.homepage {
  margin-bottom: 60px;
}
@media screen and (min-width: 650px) {
  main.homepage {
    margin-bottom: 120px;
  }
}

.section-title {
  margin-bottom: 40px;
}

.embed-container video {
  max-width: 100%;
}

.play-prompt {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition: all 0.6s ease;
  cursor: pointer;
  display: none;
}
@media screen and (min-width: 650px) {
  .play-prompt {
    display: flex;
  }
}
.play-prompt .play-prompt__arrow {
  height: 20px;
  width: 20px;
  margin-right: 5px;
  background-image: url("../img/icon/play-icon--black.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.cover-image .embed-container:hover .play-prompt {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.cover-asset .cover-asset--popup:hover .play-prompt {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.play-circle {
  opacity: 0.9;
  background-color: #fff;
  z-index: 5;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  position: absolute;
  background-image: url("../img/icon/play-icon--black.svg");
  background-size: 35%;
  background-position: 55% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 50px;
  height: 50px;
  transition: opacity 0.6s ease;
}
.play-circle:hover {
  opacity: 1;
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .play-circle {
    width: 70px;
    height: 70px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .play-circle {
    width: 80px;
    height: 80px;
  }
}
@media screen and (min-width: 1300px) {
  .play-circle {
    width: 90px;
    height: 90px;
  }
}

.video-overlay {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition: all 0.6s ease;
}
.video-overlay.video-overlay {
  width: 100%;
}
.video-overlay.slidein {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.video-overlay .embed-container {
  width: 100%;
  overflow: visible;
  transition: all 0.6s ease-out 0.6s;
  opacity: 0;
}
.video-overlay.slidein .embed-container {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.overlay-module {
  cursor: pointer;
}

.overlay__close-prompt {
  width: 100px;
  height: 50px;
  color: #fff;
  top: 0;
  right: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  padding-right: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.overlay__close-icon {
  height: 0.9em;
  width: 0.8em;
  margin-top: 0.1em;
  background-image: url("../img/icon/menu-icon--close--white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 10px;
  transition: -webkit-transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1);
  transition: transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1);
  transition: transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1), -webkit-transform 0.6s cubic-bezier(0.79, 0.07, 0.12, 1);
}

.overlay__close-prompt:hover {
  opacity: 0.9;
}
.overlay__close-prompt:hover .overlay__close-icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.data-overlay-trigger {
  cursor: pointer;
}

.close-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.latest-news {
  position: relative;
}

.latest-news__trigger {
  position: absolute;
  background-color: green;
  height: 400px;
  width: 500px;
  margin-top: 60px;
  z-index: 2;
  opacity: 0;
}

.latest-news__next-trigger {
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.latest-news__prev-trigger {
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.landing__showreel {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.landing__showreel.ready {
  opacity: 1;
}

.ventures__quote p {
  color: #454545;
}
.ventures__quote h2 {
  font-family: "Mark Pro", sans-serif;
  font-size: 18px;
  line-height: 25px;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
}
.ventures__quote h2 b,
.ventures__quote h2 strong {
  font-weight: 600;
}
.ventures__quote h2 i,
.ventures__quote h2 em {
  font-style: italic;
}
.ventures__quote h2::before, .ventures__quote h2::after {
  content: "";
  display: block;
}
.ventures__quote h2::before {
  padding-top: 0px;
}
.ventures__quote h2::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .ventures__quote h2 {
    font-size: 18px;
    line-height: 25px;
  }
  .ventures__quote h2::before {
    padding-top: 0px;
  }
  .ventures__quote h2::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 650px) {
  .ventures__quote h2 {
    font-size: 18px;
    line-height: 30px;
  }
  .ventures__quote h2::before {
    padding-top: 0px;
  }
  .ventures__quote h2::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .ventures__quote h2 {
    font-size: 20px;
    line-height: 30px;
  }
  .ventures__quote h2::before {
    padding-top: 0px;
  }
  .ventures__quote h2::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1300px) {
  .ventures__quote h2 {
    font-size: 22px;
    line-height: 35px;
  }
  .ventures__quote h2::before {
    padding-top: 0px;
  }
  .ventures__quote h2::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .ventures__quote h2 {
    font-size: 25px;
    line-height: 35px;
  }
  .ventures__quote h2::before {
    padding-top: 0px;
  }
  .ventures__quote h2::after {
    margin-bottom: 0px;
  }
}
.ventures__quote .manifesto__item > * + * {
  margin-top: 15px;
}

.f-headline-md {
  font-size: 100px;
  line-height: 0.85;
}
@media screen and (max-width: 649px) {
  .f-headline-md {
    font-size: 60px;
    line-height: 60px;
  }
}

.ventures .description {
  color: #000;
}
.header {
  width: 100vw;
  position: fixed;
  z-index: 10;
  background: #fff;
  display: flex;
  align-items: center;
  top: 0;
  display: block;
  font-family: "Mark Pro", sans-serif;
  font-size: 14px;
  line-height: 15px;
  font-weight: regular;
  letter-spacing: -0.015em;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  height: 100px;
}
.header b,
.header strong {
  font-weight: 600;
}
.header i,
.header em {
  font-style: italic;
}
.header::before, .header::after {
  content: "";
  display: block;
}
.header::before {
  padding-top: 0px;
}
.header::after {
  margin-bottom: 0px;
}
@media screen and (min-width: 650px) {
  .header {
    font-size: 14px;
    line-height: 15px;
  }
  .header::before {
    padding-top: 0px;
  }
  .header::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 990px) {
  .header {
    font-size: 16px;
    line-height: 16px;
  }
  .header::before {
    padding-top: 0px;
  }
  .header::after {
    margin-bottom: 0px;
  }
}
@media screen and (min-width: 1850px) {
  .header {
    font-size: 16px;
    line-height: 16px;
  }
  .header::before {
    padding-top: 0px;
  }
  .header::after {
    margin-bottom: 0px;
  }
}
.header[data-color=white] {
  color: #fff;
  background: transparent;
}
.header[data-color=black] {
  color: #000;
  background: transparent;
}
.header[data-scrolled=true][data-color=white] {
  color: #fff;
  background: #000;
}
.header[data-scrolled=true][data-color=black] {
  color: #000;
  background: #fff;
}
.header:before {
  content: "";
  left: -50vh;
  right: -50vh;
  background: inherit;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
}
.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row wrap;
  height: 100%;
  padding: 20px 0;
  height: 50px;
  transition: height 0.5s ease;
}
@media screen and (min-width: 650px) {
  .header .container {
    height: 60px;
  }
}
.header .header__logo {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
}
@media screen and (min-width: 650px) {
  .header .header__logo {
    width: 60px;
    height: 60px;
  }
}
.header .header__logo svg {
  width: inherit;
  height: inherit;
  transition: all 0.5s ease;
  fill: #fff;
}
.header .header__logo svg g path {
  fill: currentColor !important;
  stroke: currentColor !important;
}
.header .rf-logo {
  height: inherit;
}
.header .header__nav-items {
  display: none;
  transition: color 0.3s ease;
}
@media screen and (min-width: 650px) {
  .header .header__nav-items {
    align-items: center;
    display: flex;
  }
}
.header .header__nav-items li {
  padding: 0 0.5rem;
  cursor: pointer;
}
.header .header__nav-items li:last-child {
  margin-right: 0;
  padding-right: 0;
}

header[data-scrolled=true] {
  height: 65px;
}
header[data-scrolled=true] .container {
  padding: 10px 0;
  height: 45px;
}
header[data-scrolled=true] .header__logo,
header[data-scrolled=true] .header__logo svg {
  width: 45px;
  height: 45px;
}

header.header-unpin {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
header.header-unpin:before {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

header.header-pin {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
header.header-pin:before {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.menu-icon {
  width: 20px;
  height: 20px;
  background-image: url("../img/icon/menu-icon.svg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: -webkit-transform 0.3s cubic-bezier(0.66, 0.15, 0.32, 1.01);
  transition: transform 0.3s cubic-bezier(0.66, 0.15, 0.32, 1.01);
  transition: transform 0.3s cubic-bezier(0.66, 0.15, 0.32, 1.01), -webkit-transform 0.3s cubic-bezier(0.66, 0.15, 0.32, 1.01);
}
header[data-color=white] .menu-icon {
  background-image: url("../img/icon/menu-icon--white.svg");
}
@media screen and (min-width: 650px) {
  .menu-icon {
    display: none;
  }
}
.menu-icon[data-state=open] {
  background-image: url("../img/icon/menu-icon--close.svg");
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
header[data-color=white] .menu-icon[data-state=open] {
  background-image: url("../img/icon/menu-icon--close--white.svg");
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.mobile-menu {
  width: 100%;
  height: calc(100vh - 90px);
  background-color: #000;
  position: fixed;
  top: 90px;
  left: -100vw;
  transition: -webkit-transform 0.5s cubic-bezier(0.66, 0.15, 0.32, 1.01);
  transition: transform 0.5s cubic-bezier(0.66, 0.15, 0.32, 1.01);
  transition: transform 0.5s cubic-bezier(0.66, 0.15, 0.32, 1.01), -webkit-transform 0.5s cubic-bezier(0.66, 0.15, 0.32, 1.01);
}
@media screen and (min-width: 650px) {
  .mobile-menu {
    display: none;
  }
}
.mobile-menu[data-state=open] {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.mobile-menu[data-state=open][data-scrolled=true] {
  height: calc(100vh - 65px);
  top: 65px;
}

.header__nav-items--mobile {
  transition: color 0.3s ease;
  color: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
@media screen and (min-width: 650px) {
  .header__nav-items--mobile {
    display: none;
  }
}
.header__nav-items--mobile li {
  font-size: 23px;
  line-height: 30px;
  padding: 5px 0rem;
  cursor: pointer;
}
.header__nav-items--mobile li:last-child {
  margin-right: 0;
  padding-right: 0;
}

footer {
  position: relative;
  padding: 40px 0;
  background-color: #000;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: -50vh;
  bottom: 0;
  left: -50vh;
  z-index: -1;
  background: inherit;
  pointer-events: none;
}
@media screen and (min-width: 650px) {
  footer {
    padding: 80px 0;
  }
}
footer .footer__inner {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  height: 100%;
}
@media screen and (max-width: 413px) {
  footer .footer__inner {
    margin-left: -10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  footer .footer__inner {
    margin-left: -20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  footer .footer__inner {
    margin-left: -20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  footer .footer__inner {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  footer .footer__inner {
    margin-left: -20px;
  }
}
@media screen and (min-width: 1850px) {
  footer .footer__inner {
    margin-left: -20px;
  }
}

.footer__logo {
  height: 60px;
  background-image: url("../img/rf-footer-logo--white.svg");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 0 0 auto;
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__logo {
    height: 60px;
  }
}
@media screen and (min-width: 990px) {
  .footer__logo {
    height: 100px;
  }
}
@media screen and (max-width: 413px) {
  .footer__logo {
    width: calc((((100vw - 70px) / 4) * 3) + 20px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__logo {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__logo {
    width: calc((((100vw - 240px) / 8) * 4) + 60px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .footer__logo {
    width: 217.5px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .footer__logo {
    width: 290px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__logo {
    width: 385px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__logo {
    background-size: calc((((100vw - 140px) / 4) * 2) + 20px);
  }
}

.footer__links {
  display: inline-block;
  height: 100%;
  margin-left: 0;
  color: #fff;
  flex: 0 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 413px) {
  .footer__links {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__links {
    width: calc(100vw - 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__links {
    width: calc((((100vw - 240px) / 8) * 6) + 100px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .footer__links {
    width: 455px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .footer__links {
    width: 600px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__links {
    width: 790px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .footer__links {
    margin-left: calc((((100vw - 70px) / 4) * 0) + 20px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__links {
    margin-left: calc((((100vw - 140px) / 4) * 0) + 40px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__links {
    margin-left: calc((((100vw - 240px) / 8) * 0) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .footer__links {
    margin-left: 178.3333333333px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .footer__links {
    margin-left: 330px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__links {
    margin-left: 425px;
  }
}
@media screen and (max-width: 413px) {
  .footer__links {
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__links {
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__links {
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) {
  .footer__links {
    display: flex;
  }
}

.footer__links .column {
  position: relative;
}
@media screen and (max-width: 413px) {
  .footer__links .column:first-child {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__links .column:first-child {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__links .column:first-child {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .footer__links .column:first-child {
    width: 375.8333333333px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .footer__links .column:first-child {
    width: 393.3333333333px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__links .column:first-child {
    width: 385px;
  }
}
@media screen and (max-width: 413px) {
  .footer__links .column:last-child {
    width: calc(100vw - 40px);
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__links .column:last-child {
    width: calc(100vw - 80px);
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__links .column:last-child {
    width: calc((((100vw - 240px) / 8) * 3) + 40px);
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .footer__links .column:last-child {
    width: 296.6666666667px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .footer__links .column:last-child {
    width: 393.3333333333px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__links .column:last-child {
    width: 385px;
  }
}
@media screen and (max-width: 413px) {
  .footer__links .column:last-child {
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__links .column:last-child {
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__links .column:last-child {
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .footer__links .column:last-child {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .footer__links .column:last-child {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__links .column:last-child {
    margin-left: 20px;
  }
}
@media screen and (max-width: 413px) {
  .footer__links .column:last-child {
    margin-top: 20px;
    margin-left: 0;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__links .column:last-child {
    margin-top: 20px;
    margin-left: 0;
  }
}

.footer__links__item,
.contact__links__item {
  margin-bottom: 20px;
}
.footer__links__item:last-child,
.contact__links__item:last-child {
  margin-bottom: 0;
}
.footer__links__item .item__heading,
.contact__links__item .item__heading {
  margin-bottom: 10px;
}
.footer__links__item a,
.contact__links__item a {
  -webkit-transform: opacity 0.3s ease;
          transform: opacity 0.3s ease;
}
.footer__links__item a:hover,
.contact__links__item a:hover {
  opacity: 0.8;
}

.footer__links__item.terms {
  margin-top: -7px;
}
.footer__links__item.terms .item__heading {
  margin-bottom: 7px;
}

.item__social-icons {
  display: inline-flex;
  height: 20px;
  margin-top: 10px;
}
@media screen and (min-width: 990px) {
  .item__social-icons {
    margin-top: 0;
  }
}

.social-icons__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.3s ease;
}
.social-icons__icon.behance {
  width: 35px;
}
.social-icons__icon:hover {
  opacity: 0.7;
}
.social-icons__icon:last-child {
  margin-right: 0;
}

.footer__legals {
  position: relative;
  bottom: 3px;
  display: block;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 30px;
  margin-left: 20px;
  color: #8c8c8c;
  flex: 0 0 auto;
}
@media screen and (max-width: 413px) {
  .footer__legals {
    width: calc(100vw - 40px);
    margin-left: 10px;
  }
}
@media screen and (min-width: 414px) and (max-width: 649px) {
  .footer__legals {
    width: calc((((100vw - 140px) / 4) * 3) + 40px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 650px) and (max-width: 989px) {
  .footer__legals {
    width: calc((((100vw - 240px) / 8) * 5) + 80px);
    margin-left: 20px;
  }
}
@media screen and (min-width: 990px) and (max-width: 1299px) {
  .footer__legals {
    width: 296.6666666667px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1849px) {
  .footer__legals {
    width: 393.3333333333px;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1850px) {
  .footer__legals {
    width: 385px;
    margin-left: 20px;
  }
}
@media screen and (max-width: 649px) {
  .footer__legals {
    order: 8;
    margin-top: 30px;
  }
}
@media screen and (min-width: 990px) {
  .footer__legals {
    position: absolute;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1850px) {
  .footer__legals {
    max-width: 320px;
  }
}

.item__information p {
  line-height: 1.3;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.aspect--16-9 {
  position: relative;
  background-color: #ccc;
}
.aspect--16-9:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.aspect--16-9 > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}