@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-1c806e2a] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-1c806e2a] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-1c806e2a] {
    font-size: 20px;
}
}
.f-h2[data-v-1c806e2a] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-1c806e2a] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-1c806e2a] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-1c806e2a] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-1c806e2a] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-1c806e2a] {
  font-weight: 900;
}
.container[data-v-1c806e2a] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-1c806e2a] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-1c806e2a] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-1c806e2a] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-1c806e2a] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-1c806e2a] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-loader[data-v-1c806e2a] {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 1;
  visibility: visible;
  background-color: #002e50;
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, visibility;
}
.uhv-loader.is-active[data-v-1c806e2a] {
  opacity: 1;
  visibility: visible;
}
.uhv-loader.is-hidden[data-v-1c806e2a] {
  opacity: 0;
  visibility: hidden;
}
.uhv-loader.is-inactive[data-v-1c806e2a] {
  display: none;
}
.uhv-loader__footer[data-v-1c806e2a] {
  height: 48px;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 750px) {
.uhv-loader__footer[data-v-1c806e2a] {
    height: 64px;
}
}
.uhv-loader__footer .btn[data-v-1c806e2a] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
}
.uhv-loader__footer .uhv-spinner[data-v-1c806e2a] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.icon.icon--ecosystem-presente[data-v-1c806e2a] {
  margin: 0 auto;
  display: block;
  width: 110px;
  height: auto;
  max-width: 100%;
}
.icon.icon--lhistoire-vrai-du-recyclage[data-v-1c806e2a] {
  margin: 30px auto;
  display: block;
  fill: #ffffff;
}
.uhv-spinner[data-v-1c806e2a] {
  height: 36px;
  width: 36px;
  background-color: #002e50;
  -webkit-animation: spinner-data-v-1c806e2a 1.1s infinite linear;
          animation: spinner-data-v-1c806e2a 1.1s infinite linear;
  border-radius: 50%;
  border-top: 5px solid rgba(255, 255, 255, 0.2);
  border-right: 5px solid rgba(255, 255, 255, 0.2);
  border-bottom: 5px solid rgba(255, 255, 255, 0.2);
  border-left: 5px solid #ffffff;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
@keyframes spinner-data-v-1c806e2a {
0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-2580bbdc] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-2580bbdc] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-2580bbdc] {
    font-size: 20px;
}
}
.f-h2[data-v-2580bbdc] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-2580bbdc] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-2580bbdc] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-2580bbdc] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-2580bbdc] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-2580bbdc] {
  font-weight: 900;
}
.container[data-v-2580bbdc] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-2580bbdc] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-2580bbdc] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-2580bbdc] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-2580bbdc] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-2580bbdc] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-orientation[data-v-2580bbdc] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 50;
  overflow: hidden;
}
.uhv-orientation > div[data-v-2580bbdc] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 44.9775112444%;
  margin: 0 auto;
}
body.is-portrait .uhv-orientation[data-v-2580bbdc] {
  display: none;
}
body.is-landscape .uhv-orientation[data-v-2580bbdc] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 750px) {
.uhv-orientation[data-v-2580bbdc] {
    display: none !important;
}
}
.icon[data-v-2580bbdc] {
  fill: #ffffff;
}
.icon.icon--logo[data-v-2580bbdc] {
  margin-bottom: 60px;
}
h1[data-v-2580bbdc] {
  margin-top: 20px;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1 {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1 {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1 {
    font-size: 20px;
}
}
.f-h2 {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2 {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2 {
    font-size: 20px;
}
}
 .o-content a, .o-content strong {
  font-weight: 700;
}
.f-fweight-black {
  font-weight: 800;
}
.f-fweight-ultra-black {
  font-weight: 900;
}
.f-fweight-extra-black {
  font-weight: 900;
}
.container {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}

/*
Project: 	 Une Histoire Vraie
Version: 	 1.0
Author: Florian Cordillot
Description: Stylesheet for Une Histoire Vraie
-------------------------------------------------------------------*/
/*
[Notes]

-------------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, p, em, img,
small, strong, var,
b, i,
dl, ul, li, caption,
article, footer, header, menu, section,
time, video {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  outline: 0;
}
article,
footer,
header,
section,
main {
  display: block;
}
html {
  overflow-y: scroll;
  overflow: -moz-scrollbars-vertical;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}
body {
  line-height: 1;
}
ul {
  list-style: none;
}
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  -ms-touch-action: inherit;
      touch-action: inherit;
}
@-ms-viewport {
  width: device-width;
}
.f-color--black {
  color: #000000;
}
.u-bg-color--white-near {
  background-color: #f6f6f6;
}
.f-color--white {
  color: #ffffff;
}
.u-bg-color--brand-blue {
  background-color: #002e50;
}
.f-color--brand-blue {
  color: #002e50;
}

/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1 {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1 {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1 {
    font-size: 20px;
}
}
.f-h2 {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2 {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2 {
    font-size: 20px;
}
}
 .o-content a, .o-content strong {
  font-weight: 700;
}
.f-fweight-black {
  font-weight: 800;
}
.f-fweight-ultra-black {
  font-weight: 900;
}
.f-fweight-extra-black {
  font-weight: 900;
}
.icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.icon--bars,
.icon--bars svg {
  width: 16px;
  max-width: 100%;
  height: 13px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--chevron-down,
.icon--chevron-down svg {
  width: 15px;
  max-width: 100%;
  height: 9px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--chevron-left,
.icon--chevron-left svg {
  width: 9px;
  max-width: 100%;
  height: 15px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--chevron-right,
.icon--chevron-right svg {
  width: 9px;
  max-width: 100%;
  height: 15px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--close,
.icon--close svg {
  width: 20px;
  max-width: 100%;
  height: 21px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--colored-logo,
.icon--colored-logo svg {
  width: 200px;
  max-width: 100%;
  height: 56px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--e,
.icon--e svg {
  width: 480.4px;
  max-width: 100%;
  height: 505.4px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--ecosystem-presente,
.icon--ecosystem-presente svg {
  width: 110px;
  max-width: 100%;
  height: 31px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--facebook,
.icon--facebook svg {
  width: 14px;
  max-width: 100%;
  height: 14px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--info,
.icon--info svg {
  width: 3px;
  max-width: 100%;
  height: 11px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--lhistoire-vrai-du-recyclage,
.icon--lhistoire-vrai-du-recyclage svg {
  width: 272.6px;
  max-width: 100%;
  height: 165.9px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--linkedin,
.icon--linkedin svg {
  width: 14px;
  max-width: 100%;
  height: 14px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--logo,
.icon--logo svg {
  width: 109.3px;
  max-width: 100%;
  height: 13.2px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--play,
.icon--play svg {
  width: 17px;
  max-width: 100%;
  height: 20px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--sync,
.icon--sync svg {
  width: 39.1px;
  max-width: 100%;
  height: 31.9px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--times,
.icon--times svg {
  width: 8px;
  max-width: 100%;
  height: 8px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--twitter,
.icon--twitter svg {
  width: 14px;
  max-width: 100%;
  height: 14px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--une-histoire-vraie,
.icon--une-histoire-vraie svg {
  width: 212px;
  max-width: 100%;
  height: 158px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--volume-mute,
.icon--volume-mute svg {
  width: 12px;
  max-width: 100%;
  height: 9.8px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.icon--volume,
.icon--volume svg {
  width: 25.8px;
  max-width: 100%;
  height: 25.4px;
  max-height: 100%;
}
.icon--separator svg {
  fill: transparent;
}
.container {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.u-align-center, .btn {
  text-align: center;
}

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/
.u-pad-a-3 {
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
}

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/

/**
 * Margins
 **/

/**
 * Paddings
 **/

/**
 * Width / height
 **/
.app,
#app {
  width: 100vw;
  min-height: 100vh;
  font-size: 1.4em;
  line-height: 1.4285714286;
}
.app img,
#app img {
  border: 0 none;
}
.app h1,
.app h2,
.app h3,
.app p,
.app a,
#app h1,
#app h2,
#app h3,
#app p,
#app a {
  font-style: normal !important;
}
.app a,
#app a {
  color: inherit;
  text-decoration: none;
}
.app .f-uppercase, .app .o-content h2, .o-content .app h2, .app .btn,
#app .f-uppercase,
#app .o-content h2,
.o-content #app h2,
#app .btn {
  text-transform: uppercase;
}
.app .f-thin,
#app .f-thin {
  font-weight: 100;
}
.btn {
  cursor: pointer;
  -webkit-appearance: none;
  border: 0;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  display: block;
  min-width: 100px;
  background-color: #ffffff;
  border-radius: 24px;
  color: #002e50;
  font-family: 'Publica Play', Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  -webkit-transition: color 0.4s cubic-bezier(0.5, 0, 0.5, 0), background-color 0.4s cubic-bezier(0.5, 0, 0.5, 0), opacity 0.4s cubic-bezier(0.5, 0, 0.5, 0), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 0.4s cubic-bezier(0.5, 0, 0.5, 0);
  transition: color 0.4s cubic-bezier(0.5, 0, 0.5, 0), background-color 0.4s cubic-bezier(0.5, 0, 0.5, 0), opacity 0.4s cubic-bezier(0.5, 0, 0.5, 0), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 0.4s cubic-bezier(0.5, 0, 0.5, 0);
  transition: color 0.4s cubic-bezier(0.5, 0, 0.5, 0), background-color 0.4s cubic-bezier(0.5, 0, 0.5, 0), opacity 0.4s cubic-bezier(0.5, 0, 0.5, 0), box-shadow 0.4s cubic-bezier(0.5, 0, 0.5, 0), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: color 0.4s cubic-bezier(0.5, 0, 0.5, 0), background-color 0.4s cubic-bezier(0.5, 0, 0.5, 0), opacity 0.4s cubic-bezier(0.5, 0, 0.5, 0), box-shadow 0.4s cubic-bezier(0.5, 0, 0.5, 0), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 0.4s cubic-bezier(0.5, 0, 0.5, 0);
  will-change: color, background-color, box-shadow, opacity, visibility;
}
.btn:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
.btn:disabled {
  opacity: 0.4;
}
.btn:hover {
  background-color: #002e50;
  color: #ffffff;
}
.btn.is-visible {
  opacity: 1;
  visibility: visible;
}
.btn.is-hidden {
  opacity: 0;
  visibility: hidden;
}
@media screen and (min-width: 750px) {
.btn {
    padding: 22px 60px;
    border-radius: 32px;
    font-size: 16px;
    line-height: 1.3;
}
}
.btn-rounded {
  cursor: pointer;
  -webkit-appearance: none;
  border: 0;
  height: 36px;
  width: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 18px;
  background-color: #ffffff;
}
.btn-rounded:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
.btn-rounded .icon {
  height: 8px;
  width: 8px;
}
.btn-rounded .icon svg {
  height: 100%;
  width: 100%;
  fill: #002e50;
}
@media screen and (min-width: 750px) {
.btn-rounded .icon {
    height: 10px;
    width: 10px;
}
}
.btn-rounded .icon.icon--info {
  height: 11px;
  width: 3px;
}
.btn-rounded .icon.icon--bars {
  height: 13px;
  width: 16px;
}
@media screen and (min-width: 750px) {
.btn-rounded .icon.icon--bars {
    height: 22px;
    width: 28px;
}
}
.btn-rounded .icon.icon--bars svg {
  height: 100%;
  width: 100%;
}
.btn-rounded.is-dark {
  background-color: #002e50;
}
.btn-rounded.is-dark .icon svg {
  fill: #ffffff;
}
@media screen and (min-width: 750px) {
.btn-rounded {
    height: 60px;
    width: 60px;
    border-radius: 30px;
}
}
.btn-info {
  cursor: pointer;
  -webkit-appearance: none;
  border: 0;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  background-color: #ffffff;
  border-radius: 24px;
  color: #002e50;
  font-size: 14px;
  font-family: 'Publica Play', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
.btn-info:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
.lazy-load {
  opacity: 0;
  -webkit-transition: opacity 800ms ease-out;
  transition: opacity 800ms ease-out;
}
.o-content > *:first-child {
  margin-top: 0;
}
.o-content > *:last-child {
  margin-bottom: 0;
}

.o-content p {
  margin-top: 32px;
}

.o-content p:first-child {
  margin-top: 0;
}
.o-content em {
  font-style: italic;
}
.o-content a {
  color: !important;
}
.o-content a:hover {
  text-decoration: underline !important;
}
.o-content h2 {
  margin-top: 1em;
  margin-bottom: 1.5em;
}
.o-content p {
  margin-bottom: 1em;
}
.o-content video,
.o-content img {
  height: auto;
  width: auto;
  display: block;
  margin: 2em auto;
  max-width: 100%;
}
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;
  -webkit-overflow-scrolling: touch;
}
body {
  font-family: 'Century', Arial, 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%;
  width: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
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;
}
@media screen and (max-width: 449px) {
head {
    font-family: "xsmall";
}
body::after {
    content: "xsmall";
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
head {
    font-family: "small";
}
body::after {
    content: "small";
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
head {
    font-family: "medium";
}
body::after {
    content: "medium";
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
head {
    font-family: "large";
}
body::after {
    content: "large";
}
}
@media screen and (min-width: 1440px) {
head {
    font-family: "xlarge";
}
body::after {
    content: "xlarge";
}
}
.hidden {
  display: none;
}

/* Simple fade transition */

/* Simple fade-scale transition */

/* Simple fade-blur transition */

/**
 * Footer
 *
 * @package UneHistoireVraie
 *
 */
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  top: 32px;
  right: 0;
  left: 0;
  z-index: 20;
  margin: 0 auto;
  max-width: 1200px;
}

/**
 * Footer
 *
 * @package UneHistoireVraie
 */
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 20px;
  z-index: 3;
  margin: 0 auto;
  max-width: 1200px;
}
html,
body {
  -webkit-overflow-scrolling: touch;
}
#main + footer {
  background-color: #FFF;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-7ba5bd90] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-7ba5bd90] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-7ba5bd90] {
    font-size: 20px;
}
}
.f-h2[data-v-7ba5bd90] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-7ba5bd90] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-7ba5bd90] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-7ba5bd90] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-7ba5bd90] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-7ba5bd90] {
  font-weight: 900;
}
.container[data-v-7ba5bd90] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-7ba5bd90] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-7ba5bd90] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-7ba5bd90] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-7ba5bd90] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-7ba5bd90] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.app[data-v-7ba5bd90] {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
.slide-to-top-enter-active[data-v-7ba5bd90],
.slide-to-top-leave-active[data-v-7ba5bd90] {
  max-height: calc(var(--vh, 1vh) * 100);
}
.slide-to-top-enter-active[data-v-7ba5bd90] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  -webkit-transform: translateY(100%) translateZ(0);
          transform: translateY(100%) translateZ(0);
  width: inherit;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.slide-to-top-enter-to[data-v-7ba5bd90] {
  -webkit-transform: translateY(0) translateZ(0);
          transform: translateY(0) translateZ(0);
}
.slide-to-top-leave-active[data-v-7ba5bd90] {
  display: none;
  opacity: 0;
}
.slide-to-right-enter-active[data-v-7ba5bd90],
.slide-to-right-leave-active[data-v-7ba5bd90] {
  max-height: calc(var(--vh, 1vh) * 100);
}
.slide-to-right-leave-active[data-v-7ba5bd90] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  -webkit-transform: translateX(0) translateZ(0);
          transform: translateX(0) translateZ(0);
  width: inherit;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.slide-to-right-leave-to[data-v-7ba5bd90] {
  -webkit-transform: translateX(100%) translateZ(0);
          transform: translateX(100%) translateZ(0);
}
.slide-to-bottom-enter-active[data-v-7ba5bd90],
.slide-to-bottom-leave-active[data-v-7ba5bd90] {
  max-height: calc(var(--vh, 1vh) * 100);
}
.slide-to-bottom-leave-active[data-v-7ba5bd90] {
  position: absolute !important;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.slide-to-bottom-leave-to[data-v-7ba5bd90] {
  -webkit-transform: translateY(100%) translateZ(0);
          transform: translateY(100%) translateZ(0);
}
.slide-to-left-enter-active[data-v-7ba5bd90],
.slide-to-left-leave-active[data-v-7ba5bd90] {
  position: relative;
  z-index: 1;
  max-height: calc(var(--vh, 1vh) * 100);
}
.slide-to-left-enter-active[data-v-7ba5bd90] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  -webkit-transform: translateX(100%) translateZ(0);
          transform: translateX(100%) translateZ(0);
  z-index: 2;
  width: inherit;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.slide-to-left-enter-to[data-v-7ba5bd90] {
  -webkit-transform: translateX(0) translateZ(0);
          transform: translateX(0) translateZ(0);
}
.slide-to-left-leave-active[data-v-7ba5bd90] {
  display: none;
  opacity: 0;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-1f4c3473] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-1f4c3473] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-1f4c3473] {
    font-size: 20px;
}
}
.f-h2[data-v-1f4c3473] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-1f4c3473] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-1f4c3473] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-1f4c3473] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-1f4c3473] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-1f4c3473] {
  font-weight: 900;
}
.container[data-v-1f4c3473] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-1f4c3473] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-1f4c3473] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-1f4c3473] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-1f4c3473] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-1f4c3473] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-video[data-v-1f4c3473] {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0);
          transform: translateX(-50%) translateY(-50%) translateZ(0);
  width: 100%;
  height: auto;
  min-width: 1px;
  min-height: 1px;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-aa8bac08] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-aa8bac08] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-aa8bac08] {
    font-size: 20px;
}
}
.f-h2[data-v-aa8bac08] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-aa8bac08] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-aa8bac08] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-aa8bac08] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-aa8bac08] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-aa8bac08] {
  font-weight: 900;
}
.container[data-v-aa8bac08] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-aa8bac08] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-aa8bac08] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-aa8bac08] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-aa8bac08] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-aa8bac08] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-play[data-v-aa8bac08] {
  height: 112px;
  width: 112px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 56px;
  min-width: 112px;
  background-color: #ffda26;
}
.uhv-play.uhv-play--small[data-v-aa8bac08] {
  height: 36px;
  width: 36px;
  border-radius: 18px;
  min-width: 36px;
}
.uhv-play.uhv-play--small .icon[data-v-aa8bac08] {
  height: 11px;
  width: 11px;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-c8fd4d5a] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-c8fd4d5a] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-c8fd4d5a] {
    font-size: 20px;
}
}
.f-h2[data-v-c8fd4d5a] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-c8fd4d5a] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-c8fd4d5a] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-c8fd4d5a] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-c8fd4d5a] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-c8fd4d5a] {
  font-weight: 900;
}
.container[data-v-c8fd4d5a] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-c8fd4d5a] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-c8fd4d5a] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-c8fd4d5a] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-c8fd4d5a] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-c8fd4d5a] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-image__el[data-v-c8fd4d5a] {
  max-width: 100%;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1 {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1 {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1 {
    font-size: 20px;
}
}
.f-h2 {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2 {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2 {
    font-size: 20px;
}
}
.f-fweight-black {
  font-weight: 800;
}
.f-fweight-ultra-black {
  font-weight: 900;
}
.f-fweight-extra-black {
  font-weight: 900;
}
.container {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-thumb {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-height: 610px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #002e50;
}
.uhv-thumb::before {
  display: block;
  content: "";
  padding-bottom: 54.667752443%;
}
@media screen and (min-width: 750px) {
.uhv-thumb::before {
    padding-bottom: 50.8333333333%;
}
}
.uhv-thumb.ihas-overlay::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
  z-index: 2;
}
.uhv-thumb__body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  z-index: 3;
}
.uhv-thumb video,
.uhv-thumb img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: 2;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-486b9fc8] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-486b9fc8] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-486b9fc8] {
    font-size: 20px;
}
}
.f-h2[data-v-486b9fc8] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-486b9fc8] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-486b9fc8] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-486b9fc8] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-486b9fc8] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-486b9fc8] {
  font-weight: 900;
}
.container[data-v-486b9fc8] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-486b9fc8] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-486b9fc8] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-486b9fc8] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-486b9fc8] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-486b9fc8] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-socials[data-v-486b9fc8] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
}
.uhv-socials li[data-v-486b9fc8] {
  margin: 0 6px;
}
@media screen and (min-width: 750px) {
.uhv-socials li[data-v-486b9fc8] {
    margin: 0 9px;
}
}
.uhv-socials li[data-v-486b9fc8]:last-child {
  margin-right: 0;
}
.uhv-socials li[data-v-486b9fc8]:first-child {
  margin-left: 0;
}
.uhv-socials li a[data-v-486b9fc8] {
  display: block;
}
.uhv-socials li a span[data-v-486b9fc8] {
  height: 14px;
  width: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 750px) {
.uhv-socials li a span[data-v-486b9fc8] {
    height: 22px;
    width: 22px;
}
}
.uhv-socials li a span svg[data-v-486b9fc8] {
  height: 100%;
  width: 100%;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-54d5d282] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-54d5d282] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-54d5d282] {
    font-size: 20px;
}
}
.f-h2[data-v-54d5d282] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-54d5d282] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-54d5d282] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-54d5d282] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-54d5d282] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-54d5d282] {
  font-weight: 900;
}
.container[data-v-54d5d282] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-54d5d282] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-54d5d282] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-54d5d282] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-54d5d282] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-54d5d282] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-menu[data-v-54d5d282] {
  padding: 32px;
  -webkit-transform: translateY(100%) translateZ(0);
          transform: translateY(100%) translateZ(0);
  z-index: 30;
  background-color: white;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  background-image: url(../../static/img/e.fd05784c.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 33.3333333333% auto;
}
.uhv-menu.is-open[data-v-54d5d282] {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.uhv-menu__section[data-v-54d5d282] {
  margin: 0 auto;
  max-width: 1200px;
}
.uhv-menu__description[data-v-54d5d282] {
  letter-spacing: 0.01em;
  margin: 40px 0;
  font-size: 1.3333333333em;
  line-height: 1.3333333333;
}
.uhv-menu__index[data-v-54d5d282] {
  letter-spacing: 0.01em;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 150px;
  line-height: 1.37;
  font-family: 'Publica Play', Arial, sans-serif;
  color: rgba(0, 46, 80, 0.05);
  -webkit-transform: translate3d(0, 50%, 0);
          transform: translate3d(0, 50%, 0);
}
.uhv-menu__footer[data-v-54d5d282] {
  margin-top: 50px;
  margin-bottom: 50px;
}
.uhv-menu__thumbs[data-v-54d5d282] {
  margin: 20px 0;
}
.uhv-menu__thumbs .uhv-thumb[data-v-54d5d282] {
  margin: 20px 0;
}
.uhv-menu__thumbs .uhv-thumb[data-v-54d5d282]:first-child {
  margin-top: 0;
}
.uhv-menu__thumbs .uhv-thumb[data-v-54d5d282]:last-child {
  margin-bottom: 0;
}
.uhv-menu__row[data-v-54d5d282] {
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (min-width: 750px) {
.uhv-menu__row[data-v-54d5d282] {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 140px;
    margin-bottom: 140px;
    margin-right: -10px;
    margin-left: -10px;
}
.uhv-menu__row.has-not-video[data-v-54d5d282] {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.uhv-menu__row.has-not-video .uhv-menu__column[data-v-54d5d282] {
    margin-left: 0 !important;
    text-align: center;
}
.uhv-menu__row.has-not-video .uhv-menu__short-description[data-v-54d5d282] {
    text-align: center !important;
}
.uhv-menu__row:nth-child(even) .uhv-menu__short-description[data-v-54d5d282] {
    text-align: right;
}
.uhv-menu__row:nth-child(even) .uhv-menu__column[data-v-54d5d282]:first-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    margin-left: 8.3333333333%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
.uhv-menu__row:nth-child(even) .uhv-menu__column[data-v-54d5d282]:last-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
}
.uhv-menu__row:nth-child(odd) .uhv-menu__short-description[data-v-54d5d282] {
    text-align: left;
}
.uhv-menu__row:nth-child(odd) .uhv-menu__column[data-v-54d5d282]:first-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}
.uhv-menu__row:nth-child(odd) .uhv-menu__column[data-v-54d5d282]:last-child {
    margin-left: 8.3333333333%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
}
}
@media screen and (min-width: 750px) {
.uhv-menu__column[data-v-54d5d282] {
    position: relative;
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
}
.uhv-menu__short-description[data-v-54d5d282] {
    margin-top: 40px;
    font-size: 1.3333333333em;
}
}
.icon.icon--lhistoire-vrai-du-recyclage[data-v-54d5d282] {
  margin: 0 auto;
  fill: #002e50;
}
.icon.icon--colored-logo[data-v-54d5d282] {
  margin: 40px auto;
  display: block;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-14a62c00] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-14a62c00] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-14a62c00] {
    font-size: 20px;
}
}
.f-h2[data-v-14a62c00] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-14a62c00] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-14a62c00] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-14a62c00] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-14a62c00] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-14a62c00] {
  font-weight: 900;
}
.container[data-v-14a62c00] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-14a62c00] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-14a62c00] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-14a62c00] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-14a62c00] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-14a62c00] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-story-thumbnail[data-v-14a62c00] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 25;
  width: 100%;
  height: 100%;
  visibility: hidden;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
  will-change: visibility;
}
.uhv-story-thumbnail.is-visible[data-v-14a62c00] {
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.uhv-story-thumbnail__header[data-v-14a62c00] {
  position: relative;
  margin-top: -100px;
}
@media screen and (min-width: 750px) {
.uhv-story-thumbnail__header[data-v-14a62c00] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 0;
}
.uhv-story-thumbnail__header .uhv-thumb[data-v-14a62c00] {
    margin-left: auto;
    width: 64.5625692137%;
    max-width: 583px;
}
}
.uhv-story-thumbnail__header__content[data-v-14a62c00] {
  position: absolute;
  top: 50%;
  left: 0;
  margin: auto 0;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
  pointer-events: none;
  z-index: 5;
}
.uhv-story-thumbnail__header__content .f-h1[data-v-14a62c00] {
  max-width: 56.8106312292%;
}
.uhv-story-thumbnail__header__content p[data-v-14a62c00] {
  max-width: 31.8936877076%;
}
.uhv-story-thumbnail__index[data-v-14a62c00] {
  letter-spacing: 0.01em;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: -30px;
  margin-left: 20px;
  font-size: 80px;
  line-height: 1.37;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 100;
  font-family: 'Publica Play', Arial, sans-serif;
  pointer-events: none;
  -webkit-transform: translateY(100%) translateZ(0);
          transform: translateY(100%) translateZ(0);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
  opacity: 0;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: transform 1s, opacity 1s;
  transition: transform 1s, opacity 1s, -webkit-transform 1s;
  will-change: transform, opacity;
}
.uhv-story-thumbnail.is-visible .uhv-story-thumbnail__index[data-v-14a62c00] {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 1;
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
@media screen and (min-width: 750px) {
.uhv-story-thumbnail__index[data-v-14a62c00] {
    right: 0;
    left: auto;
    margin-right: 20px;
    margin-bottom: -60px;
    margin-left: 0;
    font-size: 150px;
    line-height: 1.37;
}
}
.uhv-story-thumbnail__short-description[data-v-14a62c00] {
  margin: 20px 40px 0 40px;
}
@media screen and (min-width: 750px) {
.uhv-story-thumbnail__short-description[data-v-14a62c00] {
    margin: 20px 0 0 0;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}
}
.uhv-story-thumbnail__background[data-v-14a62c00] {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.65);
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
  will-change: opacity;
}
.uhv-story-thumbnail.is-visible .uhv-story-thumbnail__background[data-v-14a62c00] {
  opacity: 1;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.uhv-story-thumbnail__wrapper[data-v-14a62c00] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform: translateY(100%) translateZ(0);
          transform: translateY(100%) translateZ(0);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 0;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: transform 1s, opacity 1s;
  transition: transform 1s, opacity 1s, -webkit-transform 1s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  will-change: transform, opacity;
}
.uhv-story-thumbnail.is-visible .uhv-story-thumbnail__wrapper[data-v-14a62c00] {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 1;
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.uhv-story-thumbnail__close-container[data-v-14a62c00] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.uhv-story-thumbnail__close[data-v-14a62c00] {
  height: 36px;
  width: 36px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  border: 0;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 1s;
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 1s;
  will-change: opacity;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  z-index: 10;
}
.uhv-story-thumbnail__close[data-v-14a62c00]:focus {
  outline: none;
}
.uhv-story-thumbnail__close .icon.icon--times[data-v-14a62c00] {
  height: 8px;
  width: 8px;
}
.uhv-story-thumbnail__close .icon.icon--times svg[data-v-14a62c00] {
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 750px) {
.uhv-story-thumbnail__close .icon.icon--times[data-v-14a62c00] {
    height: 24px;
    width: 24px;
}
}
.uhv-story-thumbnail.is-visible .uhv-story-thumbnail__close[data-v-14a62c00] {
  opacity: 1;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
@media screen and (min-width: 750px) {
.uhv-story-thumbnail__close[data-v-14a62c00] {
    height: 122px;
    width: 122px;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
}
}
.uhv-story-thumbnail__close__spinner[data-v-14a62c00] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.uhv-story-thumbnail__close__spinner circle[data-v-14a62c00]:first-child {
  stroke: #ffda26;
  stroke-dasharray: 113.094;
  stroke-dashoffset: 113.094;
}
@media screen and (min-width: 750px) {
.uhv-story-thumbnail__close__spinner circle[data-v-14a62c00]:first-child {
    stroke-dasharray: 383.263;
    stroke-dashoffset: 383.263;
}
}
.uhv-story-thumbnail__container[data-v-14a62c00] {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  margin-right: auto;
  margin-left: auto;
  width: 89.3333333333%;
  padding: 0 20px 30px 20px;
  max-width: 583px;
  background-color: #ffffff;
}
@media screen and (min-width: 750px) {
.uhv-story-thumbnail__container[data-v-14a62c00] {
    -webkit-transform: translate3d(0, calc(-50% - 61px), 0);
            transform: translate3d(0, calc(-50% - 61px), 0);
    padding: 0;
    background-color: rgba(255, 255, 255, 0);
    max-width: 903px;
}
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-75e0aa30] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-75e0aa30] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-75e0aa30] {
    font-size: 20px;
}
}
.f-h2[data-v-75e0aa30] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-75e0aa30] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-75e0aa30] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-75e0aa30] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-75e0aa30] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-75e0aa30] {
  font-weight: 900;
}
.container[data-v-75e0aa30] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-75e0aa30] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-75e0aa30] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-75e0aa30] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-75e0aa30] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-75e0aa30] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-controls[data-v-75e0aa30] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.uhv-controls__time[data-v-75e0aa30] {
  position: relative;
  font-family: 'Publica Play', Arial, sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  line-height: 1;
  min-width: 30px;
}
.uhv-controls__progress[data-v-75e0aa30] {
  height: 2px;
  width: 100%;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.uhv-controls__buffer[data-v-75e0aa30] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #ffda26;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 center;
          transform-origin: 0 center;
}
.uhv-controls__muted[data-v-75e0aa30] {
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
}
.uhv-controls__muted[data-v-75e0aa30]:hover {
  cursor: pointer;
}
.uhv-controls__muted[data-v-75e0aa30]:focus {
  outline: none;
}
.uhv-controls__muted .icon[data-v-75e0aa30] {
  height: 10px;
  width: 12px;
}
.uhv-controls__muted .icon svg[data-v-75e0aa30] {
  fill: #ffffff;
}
.uhv-controls__breakpoint[data-v-75e0aa30] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 6px;
  margin: auto 0 auto -1.5px;
  padding: 0;
  border-radius: 3px;
  border: none;
  background-color: #ffda26;
}
.uhv-controls__breakpoint[data-v-75e0aa30]:focus {
  outline: none;
}
.uhv-controls__breakpoint[data-v-75e0aa30]::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 16px;
  width: 16px;
  display: block;
  border: 1px solid rgba(255, 218, 38, 0.5);
  border-radius: 8px;
  margin: -5px 0 0 -5px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.5, 0);
  transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.5, 0);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.5, 0);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.5, 0), -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.5, 0);
  content: "";
}
.uhv-controls__breakpoint.is-active[data-v-75e0aa30]::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
@media screen and (min-width: 750px) {
.uhv-controls__breakpoint[data-v-75e0aa30] {
    height: 14px;
    width: 14px;
    border-radius: 7px;
    margin-left: -3.5px;
}
.uhv-controls__breakpoint[data-v-75e0aa30]::after {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    margin: -18px 0 0 -18px;
}
.uhv-controls__breakpoint[data-v-75e0aa30]:hover {
    cursor: pointer;
}
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-18462825] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-18462825] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-18462825] {
    font-size: 20px;
}
}
.f-h2[data-v-18462825] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-18462825] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-18462825] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-18462825] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-18462825] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-18462825] {
  font-weight: 900;
}
.container[data-v-18462825] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-18462825] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-18462825] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-18462825] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-18462825] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-18462825] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.phome[data-v-18462825] {
  position: relative;
  z-index: 1;
}
.header .icon.icon--logo[data-v-18462825] {
  fill: #ffffff;
}
.phome__overlay[data-v-18462825] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, visibility;
  z-index: 2;
}
.phome.is-ended .phome__overlay[data-v-18462825] {
  opacity: 1;
  visibility: visible;
}
.phome.is-paused .phome__overlay[data-v-18462825] {
  opacity: 1;
  visibility: visible;
}
.phome__video[data-v-18462825] {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}
.icon.icon--logo svg[data-v-18462825] {
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 750px) {
.icon.icon--logo[data-v-18462825] {
    height: 20px;
    width: 160px;
}
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-4a5db2c2] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-4a5db2c2] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-4a5db2c2] {
    font-size: 20px;
}
}
.f-h2[data-v-4a5db2c2] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-4a5db2c2] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-4a5db2c2] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-4a5db2c2] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-4a5db2c2] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-4a5db2c2] {
  font-weight: 900;
}
.container[data-v-4a5db2c2] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-4a5db2c2] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-4a5db2c2] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-4a5db2c2] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-4a5db2c2] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-4a5db2c2] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.pstory[data-v-4a5db2c2] {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: white;
  overflow: hidden;
  padding-top: 30px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}
.pstory .header[data-v-4a5db2c2] {
  top: 0;
}
.pstory__overlay[data-v-4a5db2c2] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, visibility;
  z-index: 2;
}
.pstory.is-played .pstory__overlay[data-v-4a5db2c2], .pstory.is-ended .pstory__overlay[data-v-4a5db2c2] {
  opacity: 0;
  visibility: hidden;
}
.pstory__details[data-v-4a5db2c2] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(100%) translateZ(0);
          transform: translateX(100%) translateZ(0);
  z-index: 21;
  width: 50%;
  height: 100%;
  padding: 45px 90px;
  background-color: white;
  overflow-y: auto;
  -webkit-transition: -webkit-transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
@media screen and (max-width: 1439px) {
.pstory__details[data-v-4a5db2c2] {
    width: 100%;
}
}
.pstory.has-details-open .pstory__details[data-v-4a5db2c2] {
  -webkit-transform: translateX(0) translateZ(0);
          transform: translateX(0) translateZ(0);
}
.pstory__details__section[data-v-4a5db2c2] {
  margin-bottom: 50px;
}
@media screen and (min-width: 750px) {
.pstory__details__section[data-v-4a5db2c2] {
    margin: 160px auto 0 auto;
}
}
.pstory__details__index[data-v-4a5db2c2] {
  letter-spacing: 0.01em;
  font-size: 80px;
  line-height: 1.37;
  color: #002e50;
  opacity: 0.1;
  font-weight: 200;
  font-family: 'Publica Play', Arial, sans-serif;
}
.pstory__end[data-v-4a5db2c2] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), visibility 1s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, visibility;
  z-index: 2;
}
.pstory.is-ended .pstory__end[data-v-4a5db2c2] {
  opacity: 1;
  visibility: visible;
}
.pstory__content[data-v-4a5db2c2] {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}
.pstory__content img[data-v-4a5db2c2] {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-49b5a1d3] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-49b5a1d3] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-49b5a1d3] {
    font-size: 20px;
}
}
.f-h2[data-v-49b5a1d3] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-49b5a1d3] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-49b5a1d3] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-49b5a1d3] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-49b5a1d3] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-49b5a1d3] {
  font-weight: 900;
}
.container[data-v-49b5a1d3] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-49b5a1d3] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-49b5a1d3] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-49b5a1d3] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-49b5a1d3] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-49b5a1d3] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.pstory-details[data-v-49b5a1d3] {
  position: relative;
  z-index: 3;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: white;
  padding-top: 30px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  overflow-y: auto;
}
.pstory-details__section[data-v-49b5a1d3] {
  margin-bottom: 50px;
}
@media screen and (min-width: 750px) {
.pstory-details__section[data-v-49b5a1d3] {
    margin: 160px auto 0 auto;
    max-width: 55.1388888889%;
}
}
.pstory-details__index[data-v-49b5a1d3] {
  letter-spacing: 0.01em;
  font-size: 80px;
  line-height: 1.37;
  color: #002e50;
  opacity: 0.1;
  font-weight: 200;
  font-family: 'Publica Play', Arial, sans-serif;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-085159c0] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-085159c0] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-085159c0] {
    font-size: 20px;
}
}
.f-h2[data-v-085159c0] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-085159c0] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-085159c0] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-085159c0] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-085159c0] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-085159c0] {
  font-weight: 900;
}
.container[data-v-085159c0] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-085159c0] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-085159c0] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-085159c0] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-085159c0] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-085159c0] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-image-lazy-load[data-v-085159c0] {
  display: block;
  width: 100%;
  min-width: 1px;
  min-height: 1px;
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
          transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  -webkit-transition-delay: 15ms;
          transition-delay: 15ms;
}
.uhv-image-lazy-load.uhv-image-lazy-load--is-reveal[data-v-085159c0] {
  opacity: 1;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-382c3026] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-382c3026] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-382c3026] {
    font-size: 20px;
}
}
.f-h2[data-v-382c3026] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-382c3026] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-382c3026] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-382c3026] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-382c3026] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-382c3026] {
  font-weight: 900;
}
.container[data-v-382c3026] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-382c3026] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-382c3026] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-382c3026] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-382c3026] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-382c3026] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-image-lazy-load__container[data-v-382c3026] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  min-width: 30px;
  min-height: 30px;
}
.uhv-image-lazy-load__container.uhv-image-lazy-load__container--reveal[data-v-382c3026] {
  background-color: transparent;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1 {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1 {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1 {
    font-size: 20px;
}
}
.f-h2 {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2 {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2 {
    font-size: 20px;
}
}
.f-fweight-black {
  font-weight: 800;
}
.f-fweight-ultra-black {
  font-weight: 900;
}
.f-fweight-extra-black {
  font-weight: 900;
}
.container,
.uhv-media .uhv-media--prologue,
.uhv-media.uhv-media--slide-intersticiel,
.uhv-media.uhv-media--p-footer,
.uhv-media.uhv-media--large,
.uhv-media.uhv-media--video {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container,
  .uhv-media .uhv-media--prologue,
  .uhv-media.uhv-media--slide-intersticiel,
  .uhv-media.uhv-media--p-footer,
  .uhv-media.uhv-media--large,
  .uhv-media.uhv-media--video {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container,
  .uhv-media .uhv-media--prologue,
  .uhv-media.uhv-media--slide-intersticiel,
  .uhv-media.uhv-media--p-footer,
  .uhv-media.uhv-media--large,
  .uhv-media.uhv-media--video {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container,
  .uhv-media .uhv-media--prologue,
  .uhv-media.uhv-media--slide-intersticiel,
  .uhv-media.uhv-media--p-footer,
  .uhv-media.uhv-media--large,
  .uhv-media.uhv-media--video {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container,
  .uhv-media .uhv-media--prologue,
  .uhv-media.uhv-media--slide-intersticiel,
  .uhv-media.uhv-media--p-footer,
  .uhv-media.uhv-media--large,
  .uhv-media.uhv-media--video {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container,
  .uhv-media .uhv-media--prologue,
  .uhv-media.uhv-media--slide-intersticiel,
  .uhv-media.uhv-media--p-footer,
  .uhv-media.uhv-media--large,
  .uhv-media.uhv-media--video {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-media.uhv-media--slide-intersticiel, .uhv-media.uhv-media--p-footer, .uhv-media.uhv-media--large, .uhv-media.uhv-media--video {
  margin-top: 100px;
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.uhv-media.uhv-media--slide-intersticiel, .uhv-media.uhv-media--p-footer, .uhv-media.uhv-media--large, .uhv-media.uhv-media--video {
    margin-top: 120px;
}
}
@media screen and (min-width: 970px) {
.uhv-media.uhv-media--slide-intersticiel, .uhv-media.uhv-media--p-footer, .uhv-media.uhv-media--large, .uhv-media.uhv-media--video {
    margin-top: 150px;
}
}
@media screen and (max-width: 969px) {
.uhv-media.uhv-media--slide-intersticiel, .uhv-media.uhv-media--p-footer, .uhv-media.uhv-media--large, .uhv-media.uhv-media--video {
    width: 100%;
}
}
@media screen and (max-width: 969px) {
.uhv-media .uhv-media--prologue {
    width: 100%;
}
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-4f6db35c] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-4f6db35c] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-4f6db35c] {
    font-size: 20px;
}
}
.f-h2[data-v-4f6db35c] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-4f6db35c] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-4f6db35c] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-4f6db35c] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-4f6db35c] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-4f6db35c] {
  font-weight: 900;
}
.container[data-v-4f6db35c] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-4f6db35c] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-4f6db35c] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-4f6db35c] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-4f6db35c] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-4f6db35c] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}
.uhv-media[data-v-4f6db35c] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.uhv-media--large .uhv-media__inner[data-v-4f6db35c] {
    width: calc((((100vw - 560px) / 12) * 10) + 360px);
}
}
@media screen and (min-width: 1440px) {
.uhv-media--large .uhv-media__inner[data-v-4f6db35c] {
    width: 1193.3333333333px;
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.uhv-media--large .uhv-media__inner[data-v-4f6db35c] {
    margin-left: calc(((((100vw - 560px) / 12) * 1) + 0px) + 40px);
    margin-right: 0;
}
html[lang=ar] .uhv-media--large .uhv-media__inner[data-v-4f6db35c], html[dir=rtl] .uhv-media--large .uhv-media__inner[data-v-4f6db35c] {
    margin-left: 0;
    margin-right: calc(((((100vw - 560px) / 12) * 1) + 0px) + 40px);
}
}
@media screen and (min-width: 1440px) {
.uhv-media--large .uhv-media__inner[data-v-4f6db35c] {
    margin-left: 123.3333333333px;
    margin-right: 0;
}
html[lang=ar] .uhv-media--large .uhv-media__inner[data-v-4f6db35c], html[dir=rtl] .uhv-media--large .uhv-media__inner[data-v-4f6db35c] {
    margin-left: 0;
    margin-right: 123.3333333333px;
}
}
.uhv-media--video .uhv-media__inner[data-v-4f6db35c] {
  width: 100%;
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.uhv-media--video .uhv-media__inner[data-v-4f6db35c] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.uhv-media--video .uhv-media__inner[data-v-4f6db35c] {
    width: 1440px;
}
}
.uhv-media__aspect-ratio[data-v-4f6db35c] {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  /* media types */
}
.uhv-media__aspect-ratio[data-v-4f6db35c]:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.3333333333%;
}
.uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 750px) {
.uhv-media__aspect-ratio[data-v-4f6db35c] {
    position: relative;
}
.uhv-media__aspect-ratio[data-v-4f6db35c]:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 62.5%;
}
.uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
}
@media screen and (max-width: 749px) {
.uhv-media--full-width .uhv-media__aspect-ratio[data-v-4f6db35c] {
    max-width: 375px;
}
}
.uhv-media--mini-story .uhv-media__aspect-ratio[data-v-4f6db35c] {
  width: 100%;
  position: relative;
}
.uhv-media--mini-story .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.3333333333%;
}
.uhv-media--mini-story .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 450px) {
.uhv-media--mini-story .uhv-media__aspect-ratio[data-v-4f6db35c] {
    max-width: 375px;
}
}
.uhv-media--large .uhv-media__aspect-ratio[data-v-4f6db35c] {
  width: 100%;
  position: relative;
}
.uhv-media--large .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 55.7291666667%;
}
.uhv-media--large .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.uhv-media--video .uhv-media__aspect-ratio[data-v-4f6db35c] {
  width: 100%;
  position: relative;
}
.uhv-media--video .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.uhv-media--video .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.uhv-media--prologue .uhv-media__aspect-ratio[data-v-4f6db35c] {
  height: 100%;
  max-width: 138px;
  max-height: 300px;
  position: relative;
}
.uhv-media--prologue .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 217.3913043478%;
}
.uhv-media--prologue .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.uhv-media--slide-intersticiel .uhv-media__aspect-ratio[data-v-4f6db35c] {
  max-width: 760px;
  position: relative;
}
.uhv-media--slide-intersticiel .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 63.1578947368%;
}
.uhv-media--slide-intersticiel .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.uhv-media--p-look .uhv-media__aspect-ratio[data-v-4f6db35c] {
  width: 100%;
  position: relative;
}
.uhv-media--p-look .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.3333333333%;
}
.uhv-media--p-look .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.uhv-media--p-look .uhv-media__aspect-ratio[data-v-4f6db35c] {
    position: relative;
}
.uhv-media--p-look .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 137.5%;
}
.uhv-media--p-look .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
}
@media screen and (min-width: 970px) {
.uhv-media--p-look .uhv-media__aspect-ratio[data-v-4f6db35c] {
    position: relative;
}
.uhv-media--p-look .uhv-media__aspect-ratio[data-v-4f6db35c]:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 131.5789473684%;
}
.uhv-media--p-look .uhv-media__aspect-ratio > .uhv-media__aspect-ratio-content[data-v-4f6db35c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
}
.uhv-media__aspect-ratio-content[data-v-4f6db35c] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.uhv-media__caption[data-v-4f6db35c] {
  color: #f6f6f6;
}
@charset "UTF-8";
/* colors */
/* gradients */
/*
  @function get-breakpoint-directions

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

  Parameters:
  none
*/
/*
  @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
*/
/*
  @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
  }
  ```
*/
/*
  @mixin placeholder

  Style form placeholder text
*/
/*
  @mixin styled-select

  https://github.com/filamentgroup/select-css

  Parameters:
  - none
*/
/*
  @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
  ```
*/
/**
 * Mixin helping defining both `width` and `height` simultaneously.
 *
 * @access public
 * @param   {Length}    $width - Element’s `width`
 * @param   {Length}    $height [$width] - Element’s `height`
 * @author Hugo Giraudel
 */
/**
 * Position
 *
 * @see http://hugogiraudel.com/2014/05/19/new-offsets-sass-mixin/
 */
/**
 * Set opacity and visibility properties in one time, like GSAP.
 *
 * @param $value 0|1
 * @author Julien Vasseur <julien@poigneedemainvirile.com>
 */
/**
 * Set letter-spacing with unitless value from Photoshop.
 *
 * @param   {Number}     $value
 * @uses    letter-spacing(48)
 * @see 	http://sass-lang.com/documentation/file.SASS_REFERENCE.html#if
 */
/***

f-XX

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

***/
/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': (font-size: 30, line-height: 30, letter-spacing: -0.015em, font-weight: 300, push: 0),
      'medium+': (font-size: 48, line-height: 55, push: 0),
      'xlarge+': (font-size: 60, line-height: 65, push: 0),
      'xxlarge': (font-size: 72, line-height: 75, push: 0)
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Black.f06a25ef.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Black.5e02639a.woff) format("woff"), url(../../static/fonts/Publica-Play-Black.0420ea02.ttf) format("truetype"), url(../../static/img/Publica-Play-Black.815a0676.svg#Publica) format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Regular.37178b58.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Regular.af24a117.woff) format("woff"), url(../../static/fonts/Publica-Play-Regular.15c2a625.ttf) format("truetype"), url(../../static/img/Publica-Play-Regular.6bbd101c.svg#Publica) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Light.78e02cbb.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Light.dcc7e9cd.woff) format("woff"), url(../../static/fonts/Publica-Play-Light.ddd94814.ttf) format("truetype"), url(../../static/img/Publica-Play-Light.afbfc089.svg#Publica) format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Thin.4f858029.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Thin.dd2b7060.woff) format("woff"), url(../../static/fonts/Publica-Play-Thin.a60c73ce.ttf) format("truetype"), url(../../static/img/Publica-Play-Thin.74542753.svg#Publica) format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Publica Play";
  src: url(../../static/fonts/Publica-Play-Bold.b9456442.eot?#iefix) format("embedded-opentype"), url(../../static/fonts/Publica-Play-Bold.f705c17f.woff) format("woff"), url(../../static/fonts/Publica-Play-Bold.66f554e1.ttf) format("truetype"), url(../../static/img/Publica-Play-Bold.fc50f736.svg#Publica) format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Century";
  src: url(../../static/fonts/Century.7f448a93.woff) format("woff"), url(../../static/fonts/Century.6997ea5c.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
.f-h1[data-v-4c24561e] {
  font-size: calc(
      20px +
        (54 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h1[data-v-4c24561e] {
    font-size: 54px;
}
}
@media screen and (max-width: 449px) {
.f-h1[data-v-4c24561e] {
    font-size: 20px;
}
}
.f-h2[data-v-4c24561e] {
  font-size: calc(
      20px +
        (40 - 20) *
        (100vw - 449px) /
        (1440 - 449)
    );
  font-family: 'Publica Play', Arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 1440px) {
.f-h2[data-v-4c24561e] {
    font-size: 40px;
}
}
@media screen and (max-width: 449px) {
.f-h2[data-v-4c24561e] {
    font-size: 20px;
}
}
.f-fweight-black[data-v-4c24561e] {
  font-weight: 800;
}
.f-fweight-ultra-black[data-v-4c24561e] {
  font-weight: 900;
}
.f-fweight-extra-black[data-v-4c24561e] {
  font-weight: 900;
}
.container[data-v-4c24561e] {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 449px) {
.container[data-v-4c24561e] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 450px) and (max-width: 749px) {
.container[data-v-4c24561e] {
    width: calc(100vw - 40px);
}
}
@media screen and (min-width: 750px) and (max-width: 969px) {
.container[data-v-4c24561e] {
    width: calc(100vw - 80px);
}
}
@media screen and (min-width: 970px) and (max-width: 1439px) {
.container[data-v-4c24561e] {
    width: calc(100vw - 120px);
}
}
@media screen and (min-width: 1440px) {
.container[data-v-4c24561e] {
    width: 1440px;
    padding-right: 0;
    padding-left: 0;
}
}