@charset "UTF-8";
/* ==========================================================================
   TOOLKIT-CORE
   ========================================================================== */
/* ==========================================================================
   GENERIC / #FONT-FACE
   ========================================================================== */
/**
   * Define our custom Sky `@font-face` rules here in order to use them later on in
   * the project.
   *
   * We only output this if "Sky Text" is defined in the `$global-font-family`.
   */
@font-face {
  font-family: "Sky Text";
  src: url("//static.skyassets.com/assets/fonts/sky-regular.woff") format("woff"); }

@font-face {
  font-family: "Sky Text";
  src: url("//static.skyassets.com/assets/fonts/sky-medium.woff") format("woff");
  font-weight: bold; }

/* ==========================================================================
   GENERIC / #BOX-SIZING
   ========================================================================== */
/**
 * Set the global `box-sizing` state to `border-box`.
 *
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 * http://paulirish.com/2012/box-sizing-border-box-ftw
 */
html {
  /*! autoprefixer: off */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*, *::before, *::after {
  /*! autoprefixer: off */
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit; }

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

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

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

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   GENERIC / #RESET
   ========================================================================== */
/**
 * As well as using Normalize.css, it is often advantageous to remove all
 * margins from certain elements.
 */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
figure,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0; }

/**
 * Remove trailing margins from nested lists.
 */
li > ul,
li > ol {
  margin-bottom: 0; }

/**
 * Let’s get `<table>`s behaving how we expect.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ==========================================================================
   GENERIC / #OVERFLOW
   ========================================================================== */
/**
 * As browsers interpret `vw` differently, some of our full-width (`100vw`) UI
 * components cause unwanted horizontal scrolling.
 *
 * Note: this can be overridden using the classes in utilities/overflow.
 */
html,
body {
  overflow-x: hidden; }

/* ==========================================================================
   GENERIC / #VERTICAL-RHYTHM
   ========================================================================== */
/**
 * Apply our base spacing unit as a `margin-bottom` to all block level elements
 * so that we get nice and consistent vertical rhythm very cheaply.
 * http://csswizardry.com/2012/06/single-direction-margin-declarations/
 */
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre {
  margin-bottom: 20px; }

/**
 * We’ll also indent list elements by the same amount of spacing.
 */
ul, ol,
dd {
  margin-left: 20px; }

/* ==========================================================================
   GENERIC / #KEYFRAMES
   ========================================================================== */
/**
 * Spin animation keyframes
 */
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg); } }

@-moz-keyframes spin {
  to {
    -moz-transform: rotate(360deg); } }

@-ms-keyframes spin {
  to {
    -ms-transform: rotate(360deg); } }

@keyframes spin {
  to {
    transform: rotate(360deg); } }

/* ==========================================================================
   ELEMENTS / #PAGE
   ========================================================================== */
/**
 * High-level, page-level styling.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 * 4. Prevent certain mobile browsers from automatically zooming fonts.
 * 5. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing.
 */
html {
  /*! autoprefixer: off */
  background-color: #f5f5f5;
  font-size: 1.125em;
  line-height: 1.44444;
  font-family: Sky Text, Helvetica, Arial, sans-serif;
  color: #4a4a4a;
  overflow-y: scroll;
  /* [2] */
  min-height: 100%;
  /* [3] */
  -webkit-text-size-adjust: 100%;
  /* [4] */
  -ms-text-size-adjust: 100%;
  /* [4] */
  -moz-osx-font-smoothing: grayscale;
  /* [5] */
  -webkit-font-smoothing: antialiased;
  /* [5] */ }

/* ==========================================================================
   ELEMENTS / #TYPOGRAPHY
   ========================================================================== */
/* Headings
   =========================================== */
/**
 * Force all headings to have the exact same *default* styling. This means we
 * are free to use the correct semantic element without having opinionated look-
 * and-feel attached to it. Provide all cosmetics for specific visual use cases
 * via heading classes (i.e. `.c-heading-*`).
 *
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/
 */
h1, h2, h3, h4, h5, h6 {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  font-weight: normal; }

/* Text-level elements
   =========================================== */
/**
 * As above, leave SMALL as a purely semantic choice, and omit any cosmetics.
 */
small {
  font: inherit; }

/* ==========================================================================
   ELEMENTS / #FORMS
   ========================================================================== */
/**
 * Semantically, we’d like all forms to be built with `<fieldset>`s and
 * `<legend>`s, but we don’t want to visually see them.
 * Note that sky-toolkit@3.0 will use c-form-caption to limit scope on legend
 */
fieldset {
  border: none; }

legend {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; }

/**
 * Make sure our form elements don’t use any UA-specific font styles: we want
 * them to use ours. This may need reverting as more design information becomes
 * available, and we start putting together more complete forms.
 */
button,
input,
optgroup,
select,
textarea {
  font: inherit; }

/* ==========================================================================
   ELEMENTS / #LINKS
   ========================================================================== */
/**
 * Our basic `<a>` elements only need very minimal styling.
 * Anything more opinionated (e.g. buttons, calls-to-action, etc.) will need a
 * class defining in the Components layer.
 */
a {
  color: #0073c5;
  text-decoration: none;
  cursor: pointer; }
  a:hover, a:focus {
    text-decoration: underline; }

/* ==========================================================================
   ELEMENTS / #TABLES
   ========================================================================== */
/**
 * Table styles are incredibly unopinionated. Simply:
 *
 * 1. Force `<table>`s to be full-width by default.
 * 2. Ensure their first and last cells in each row carry no indents.
 */
table {
  width: 100%;
  /* [1] */ }

th:first-child,
td:first-child {
  padding-left: 0;
  /* [2] */ }

th:last-child,
td:last-child {
  padding-right: 0;
  /* [2] */ }

/* ==========================================================================
   ELEMENTS / #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */
  vertical-align: middle;
  /* [3] */ }

/**
 * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
 *    not make the image fluid.
 */
img[width],
img[height] {
  /* [1] */
  max-width: none; }

/* ==========================================================================
   OBJECTS / LAYOUT
   ========================================================================== */
/**
 * Grid-like layout system.
 *
 * The Layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width Utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-width-1/2">
 *     </div>
 *     <div class="o-layout__item  u-width-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-width-1/1  u-width-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-width-1/2  u-width-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-width-1/2  u-width-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of Modifiers
 * to the `.o-layout` Block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */
/* Default/mandatory classes.
   =========================================== */
.o-layout {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  margin-left: -20px;
  font-size: 0; }

.o-layout__item {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  font-size: 1rem; }

/* Gutter size modifiers.
   =========================================== */
/**
 * Smaller gutters between items.
 */
.o-layout--narrow {
  margin-left: -10px; }
  .o-layout--narrow > .o-layout__item {
    padding-left: 10px; }

/**
 * Larger gutters between items.
 */
.o-layout--wide {
  margin-left: -40px; }
  .o-layout--wide > .o-layout__item {
    padding-left: 40px; }

/**
 * No gutters between items.
 */
.o-layout--flush {
  margin-left: 0; }
  .o-layout--flush > .o-layout__item {
    padding-left: 0; }

/* Vertical alignment modifiers.
   =========================================== */
/**
 * Align all grid items to the middles of each other.
 *
 * Input:
 *
 *   1 2 3 4 5
 *   1 2 - 4 5
 *   1 2 - 4 5
 *   - 2 - - 5
 *   - 2 - - 5
 *
 * Output:
 *
 *   - 2 - - 5
 *   1 2 - 4 5
 *   1 2 3 4 5
 *   1 2 - 4 5
 *   - 2 - - 5
 */
.o-layout--middle > .o-layout__item {
  vertical-align: middle; }

/**
 * Align all grid items to the bottoms of each other.
 *
 * Input:
 *
 *   1 2 3 4 5
 *   1 2 - 4 5
 *   1 2 - 4 5
 *   - 2 - - 5
 *   - 2 - - 5
 *
 * Output:
 *
 *   - 2 - - 5
 *   - 2 - - 5
 *   1 2 - 4 5
 *   1 2 - 4 5
 *   1 2 3 4 5
 */
.o-layout--bottom > .o-layout__item {
  vertical-align: bottom; }

/* Fill order modifiers.
   =========================================== */
/**
 * Fill up the layout system from the centre.
 *
 * Input:
 *
 *   1 2 3 - -
 *
 * Output:
 *
 *   - 1 2 3 -
 */
.o-layout--center {
  text-align: center; }
  .o-layout--center > .o-layout__item {
    text-align: left; }

/**
 * Fill up the layout system from the right-hand side.
 *
 * Input:
 *
 *   1 2 3 - -
 *
 * Output:
 *
 *   - - 1 2 3
 */
.o-layout--right {
  text-align: right; }
  .o-layout--right > .o-layout__item {
    text-align: left; }

/**
 * Reverse the rendered order of the grid system.
 *
 * Input:
 *
 *   1 2 3 4 5
 *
 * Output:
 *
 *   5 4 3 2 1
 */
.o-layout--reverse {
  direction: rtl; }
  .o-layout--reverse > .o-layout__item {
    direction: ltr;
    text-align: left; }

/* Vertical gutter modifiers.
   =========================================== */
/**
 * Include vertical gutters on layout items.
 *
 * Input:
 *
 *   1 2 3 4 5
 *   1 2 3 4 5
 *
 * Output:
 *
 *   1 2 3 4 5
 *
 *   1 2 3 4 5
 */
.o-layout--spaced {
  /**
   * If we’ve chosen to change the size of the horizontal gutters, let’s change
   * the vertical gutters accordingly.
   */ }
  .o-layout--spaced > .o-layout__item {
    margin-bottom: 20px; }
  .o-layout--spaced.o-layout--narrow > .o-layout__item {
    margin-bottom: 10px; }
  .o-layout--spaced.o-layout--wide > .o-layout__item {
    margin-bottom: 40px; }

/* ==========================================================================
   OBJECTS / #CONTAINER
   ========================================================================== */
.o-container {
  max-width: 1200px;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto; }

/* ==========================================================================
   OBJECTS / #FLAG
   ========================================================================== */
/**
 * The Flag Object shares a similar structure to the Media Object, placing any
 * image-like content next to any text-like content, but with greater control on
 * vertical alignment.
 *
 * Please see: https://csswizardry.com/2013/05/the-flag-object/
 *
 * Example usage:
 *
 *   <div class="o-flag">
 *     <div class="o-flag__img">
 *       <img src="" alt=""/>
 *     </div>
 *     <div class="o-flag__body">
 *       <p>Some content</p>
 *     </div>
 *   </div>
 */
.o-flag {
  display: table;
  width: 100%; }

.o-flag__img,
.o-flag__body {
  display: table-cell;
  vertical-align: middle; }

.o-flag__img {
  padding-right: 20px;
  /* Fill the img element to the full width of the `__img` container */ }
  .o-flag__img > img {
    display: block;
    max-width: none; }

.o-flag__body {
  width: 100%; }

/* Modifiers
   =========================================== */
/* Alignment
  ---------------------------------- */
/**
 * Align the flag image and body to the top.
 */
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
  vertical-align: top; }

/**
 * Align the flag image and body to the bottom.
 */
.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
  vertical-align: bottom; }

/* Spacing
  ---------------------------------- */
/**
 * Reduce the gutter between image and body.
 */
.o-flag--small > .o-flag__img {
  padding-right: 10px; }

/**
 * Increase the gutter between image and body.
 */
.o-flag--large > .o-flag__img {
  padding-right: 40px; }

/**
 * Reduce the gutter between image and body even further.
 */
.o-flag--tiny > .o-flag__img {
  padding-right: 5px; }

/* Order & Structure
  ---------------------------------- */
/**
 * Reverse the rendered order of the Flag Object.
 */
.o-flag--reverse {
  direction: rtl;
  /**
   * Flip all padding to the left-hand side.
   *
   * 1. If the Flag Object is reversed *and* has modified spacing, flip it with
   *    the appropriate spacing.
   */ }
  .o-flag--reverse > .o-flag__img,
  .o-flag--reverse > .o-flag__body {
    direction: ltr; }
  .o-flag--reverse > .o-flag__img {
    padding-left: 20px;
    padding-right: 0; }
    .o-flag--tiny.o-flag--reverse > .o-flag__img {
      /* [1] */
      padding-left: 5px; }
    .o-flag--small.o-flag--reverse > .o-flag__img {
      /* [1] */
      padding-left: 10px; }
    .o-flag--large.o-flag--reverse > .o-flag__img {
      /* [1] */
      padding-left: 40px; }

/**
 * Remove all spacing from the Flag Object.
 */
.o-flag--flush > .o-flag__img {
  padding-left: 0;
  padding-right: 0; }

/* ==========================================================================
   OBJECTS / #MEDIA
   ========================================================================== */
/**
 * The Media Object is the poster-child of the OOCSS methodology. It simply
 * places any image-like content next to any text-like content.
 *
 * For further and philosophical reading about OOCSS in general, please see:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 *
 */
.o-media::after {
  content: "";
  display: table;
  clear: both; }

.o-media__body {
  overflow: hidden; }

.o-media__img {
  float: left;
  margin-right: 20px; }

/* Modifiers
   =========================================== */
/**
 * Smaller spacing between media items.
 */
.o-media--narrow > .o-media__img {
  margin-right: 10px; }

/**
 * Wider spacing between media items.
 */
.o-media--wide > .o-media__img {
  margin-right: 40px; }

/**
 * No spacing between media items.
 */
.o-media--flush > .o-media__img {
  margin-right: 0; }

/**
 * Swap the image and body around.
 */
.o-media--reverse > .o-media__img {
  float: right;
  margin-right: 0;
  margin-left: 20px;
  /**
     * Adjust our previously defined modifiers to work in reverse.
     */ }
  .o-media--narrow .o-media--reverse > .o-media__img {
    margin-left: 10px; }
  .o-media--wide .o-media--reverse > .o-media__img {
    margin-left: 40px; }
  .o-media--flush .o-media--reverse > .o-media__img {
    margin-left: 0; }

/* ==========================================================================
   OBJECTS / #TABLES
   ========================================================================== */
/**
 * Borderless Table
 *
 * Removes default border-bottom on `<table>` rows.
 */
.o-table-borderless tr {
  border: none; }

/* ==========================================================================
   OBJECTS / #LIST-BARE
   ========================================================================== */
/**
 * The list-bare object removes indents and bullet points from any list.
 */
/* [ul|ol] */
.o-list-bare {
  margin-left: 0;
  list-style: none; }

/* ==========================================================================
   OBJECTS / #LIST-BLOCK
   ========================================================================== */
/**
 * The list-block object displays any list of items into stacked blocks.
 */
/* [ul|ol] */
.o-list-block {
  margin-left: 0;
  list-style: none; }

/* li */
.o-list-block__item {
  display: block; }

/* ==========================================================================
   OBJECTS / #LIST-INLINE
   ========================================================================== */
/**
 * The list-inline object displays any list of items spaced on a single line.
 */
/* [ul|ol] */
.o-list-inline {
  margin-left: 0;
  list-style: none; }

/* li */
.o-list-inline__item {
  display: inline-block;
  margin-right: 20px; }

/* Modifiers
   =========================================== */
/**
 * Smaller spacing between list items.
 */
.o-list-inline--narrow > .o-list-inline__item {
  margin-right: 10px; }

/**
 * Wider spacing between list items.
 */
.o-list-inline--wide > .o-list-inline__item {
  margin-right: 40px; }

/**
 * No spacing between list items.
 */
.o-list-inline--flush > .o-list-inline__item {
  margin-right: 0; }

/* ==========================================================================
   UTILITIES / #BREAKOUT
   ========================================================================== */
/**
 * Class-based implementation of our breakout mixin.
 */
.u-breakout {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important; }

/* ==========================================================================
   UTILITIES / #CLEARFIX
   ========================================================================== */
/**
 * Class-based implementation of our clearfix mixin. Use in markup only when
 * there is no other hook available to apply the mixin to.
 */
.u-clearfix::after {
  content: "";
  display: table;
  clear: both; }

/* ==========================================================================
   UTILITIES / #HIDE
   ========================================================================== */
.u-hide-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; }

@media (min-width: 26.25em) {
  .u-hide-visually\@small {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; } }

@media (min-width: 46.25em) {
  .u-hide-visually\@medium {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; } }

@media (min-width: 61.25em) {
  .u-hide-visually\@large {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; } }

@media (min-width: 81.25em) {
  .u-hide-visually\@x-large {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; } }

.u-hide-completely {
  /* Hiding elements completely overrides any matching property declarations */
  display: none !important; }

@media (min-width: 26.25em) {
  .u-hide-completely\@small {
    /* Hiding elements completely overrides any matching property declarations */
    display: none !important; } }

@media (min-width: 46.25em) {
  .u-hide-completely\@medium {
    /* Hiding elements completely overrides any matching property declarations */
    display: none !important; } }

@media (min-width: 61.25em) {
  .u-hide-completely\@large {
    /* Hiding elements completely overrides any matching property declarations */
    display: none !important; } }

@media (min-width: 81.25em) {
  .u-hide-completely\@x-large {
    /* Hiding elements completely overrides any matching property declarations */
    display: none !important; } }

/* ==========================================================================
   UTILITIES / #TYPOGRAPHY
   ========================================================================== */
/* Typography utilities will override any matching property declarations */
/* Text alignment utilities
   =========================================== */
.u-text-left {
  text-align: left !important; }

@media (min-width: 26.25em) {
  .u-text-left\@small {
    text-align: left !important; } }

@media (min-width: 46.25em) {
  .u-text-left\@medium {
    text-align: left !important; } }

@media (min-width: 61.25em) {
  .u-text-left\@large {
    text-align: left !important; } }

@media (min-width: 81.25em) {
  .u-text-left\@x-large {
    text-align: left !important; } }

.u-text-center {
  text-align: center !important; }

@media (min-width: 26.25em) {
  .u-text-center\@small {
    text-align: center !important; } }

@media (min-width: 46.25em) {
  .u-text-center\@medium {
    text-align: center !important; } }

@media (min-width: 61.25em) {
  .u-text-center\@large {
    text-align: center !important; } }

@media (min-width: 81.25em) {
  .u-text-center\@x-large {
    text-align: center !important; } }

.u-text-right {
  text-align: right !important; }

@media (min-width: 26.25em) {
  .u-text-right\@small {
    text-align: right !important; } }

@media (min-width: 46.25em) {
  .u-text-right\@medium {
    text-align: right !important; } }

@media (min-width: 61.25em) {
  .u-text-right\@large {
    text-align: right !important; } }

@media (min-width: 81.25em) {
  .u-text-right\@x-large {
    text-align: right !important; } }

.u-text-justify {
  text-align: justify !important; }

@media (min-width: 26.25em) {
  .u-text-justify\@small {
    text-align: justify !important; } }

@media (min-width: 46.25em) {
  .u-text-justify\@medium {
    text-align: justify !important; } }

@media (min-width: 61.25em) {
  .u-text-justify\@large {
    text-align: justify !important; } }

@media (min-width: 81.25em) {
  .u-text-justify\@x-large {
    text-align: justify !important; } }

/* Font style utilities
  =========================================== */
.u-text-bold {
  font-weight: bold !important; }

.u-text-italic {
  font-style: italic !important; }

/**
 * Text utility to constrain text to a maximum of 75 characters per line,
 * regardless of the text’s `font-size`. 30em is roughly equal to 75 characters,
 * so we hard-code this value. Please don’t change it.
 *
 * https://jsfiddle.net/5571te7g/
 *
 */
.u-text-constrain {
  max-width: 30em !important; }

/* ==========================================================================
   UTILITIES / #SPACING
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements, overriding any
 * existing matching property declarations
 */
.u-padding,
.u-padding-all {
  padding: 20px !important; }

.u-padding-tiny,
.u-padding-all-tiny {
  padding: 5px !important; }

.u-padding-small,
.u-padding-all-small {
  padding: 10px !important; }

.u-padding-large,
.u-padding-all-large {
  padding: 40px !important; }

.u-padding-x-large,
.u-padding-all-x-large {
  padding: 80px !important; }

.u-padding-none,
.u-padding-all-none {
  padding: 0 !important; }

.u-padding-top {
  padding-top: 20px !important; }

.u-padding-top-tiny {
  padding-top: 5px !important; }

.u-padding-top-small {
  padding-top: 10px !important; }

.u-padding-top-large {
  padding-top: 40px !important; }

.u-padding-top-x-large {
  padding-top: 80px !important; }

.u-padding-top-none {
  padding-top: 0 !important; }

.u-padding-right {
  padding-right: 20px !important; }

.u-padding-right-tiny {
  padding-right: 5px !important; }

.u-padding-right-small {
  padding-right: 10px !important; }

.u-padding-right-large {
  padding-right: 40px !important; }

.u-padding-right-x-large {
  padding-right: 80px !important; }

.u-padding-right-none {
  padding-right: 0 !important; }

.u-padding-bottom {
  padding-bottom: 20px !important; }

.u-padding-bottom-tiny {
  padding-bottom: 5px !important; }

.u-padding-bottom-small {
  padding-bottom: 10px !important; }

.u-padding-bottom-large {
  padding-bottom: 40px !important; }

.u-padding-bottom-x-large {
  padding-bottom: 80px !important; }

.u-padding-bottom-none {
  padding-bottom: 0 !important; }

.u-padding-left {
  padding-left: 20px !important; }

.u-padding-left-tiny {
  padding-left: 5px !important; }

.u-padding-left-small {
  padding-left: 10px !important; }

.u-padding-left-large {
  padding-left: 40px !important; }

.u-padding-left-x-large {
  padding-left: 80px !important; }

.u-padding-left-none {
  padding-left: 0 !important; }

.u-padding-x {
  padding-left: 20px !important;
  padding-right: 20px !important; }

.u-padding-x-tiny {
  padding-left: 5px !important;
  padding-right: 5px !important; }

.u-padding-x-small {
  padding-left: 10px !important;
  padding-right: 10px !important; }

.u-padding-x-large {
  padding-left: 40px !important;
  padding-right: 40px !important; }

.u-padding-x-x-large {
  padding-left: 80px !important;
  padding-right: 80px !important; }

.u-padding-x-none {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.u-padding-y {
  padding-top: 20px !important;
  padding-bottom: 20px !important; }

.u-padding-y-tiny {
  padding-top: 5px !important;
  padding-bottom: 5px !important; }

.u-padding-y-small {
  padding-top: 10px !important;
  padding-bottom: 10px !important; }

.u-padding-y-large {
  padding-top: 40px !important;
  padding-bottom: 40px !important; }

.u-padding-y-x-large {
  padding-top: 80px !important;
  padding-bottom: 80px !important; }

.u-padding-y-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.u-margin,
.u-margin-all {
  margin: 20px !important; }

.u-margin-tiny,
.u-margin-all-tiny {
  margin: 5px !important; }

.u-margin-small,
.u-margin-all-small {
  margin: 10px !important; }

.u-margin-large,
.u-margin-all-large {
  margin: 40px !important; }

.u-margin-x-large,
.u-margin-all-x-large {
  margin: 80px !important; }

.u-margin-none,
.u-margin-all-none {
  margin: 0 !important; }

.u-margin-top {
  margin-top: 20px !important; }

.u-margin-top-tiny {
  margin-top: 5px !important; }

.u-margin-top-small {
  margin-top: 10px !important; }

.u-margin-top-large {
  margin-top: 40px !important; }

.u-margin-top-x-large {
  margin-top: 80px !important; }

.u-margin-top-none {
  margin-top: 0 !important; }

.u-margin-right {
  margin-right: 20px !important; }

.u-margin-right-tiny {
  margin-right: 5px !important; }

.u-margin-right-small {
  margin-right: 10px !important; }

.u-margin-right-large {
  margin-right: 40px !important; }

.u-margin-right-x-large {
  margin-right: 80px !important; }

.u-margin-right-none {
  margin-right: 0 !important; }

.u-margin-bottom {
  margin-bottom: 20px !important; }

.u-margin-bottom-tiny {
  margin-bottom: 5px !important; }

.u-margin-bottom-small {
  margin-bottom: 10px !important; }

.u-margin-bottom-large {
  margin-bottom: 40px !important; }

.u-margin-bottom-x-large {
  margin-bottom: 80px !important; }

.u-margin-bottom-none {
  margin-bottom: 0 !important; }

.u-margin-left {
  margin-left: 20px !important; }

.u-margin-left-tiny {
  margin-left: 5px !important; }

.u-margin-left-small {
  margin-left: 10px !important; }

.u-margin-left-large {
  margin-left: 40px !important; }

.u-margin-left-x-large {
  margin-left: 80px !important; }

.u-margin-left-none {
  margin-left: 0 !important; }

.u-margin-x {
  margin-left: 20px !important;
  margin-right: 20px !important; }

.u-margin-x-tiny {
  margin-left: 5px !important;
  margin-right: 5px !important; }

.u-margin-x-small {
  margin-left: 10px !important;
  margin-right: 10px !important; }

.u-margin-x-large {
  margin-left: 40px !important;
  margin-right: 40px !important; }

.u-margin-x-x-large {
  margin-left: 80px !important;
  margin-right: 80px !important; }

.u-margin-x-none {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.u-margin-y {
  margin-top: 20px !important;
  margin-bottom: 20px !important; }

.u-margin-y-tiny {
  margin-top: 5px !important;
  margin-bottom: 5px !important; }

.u-margin-y-small {
  margin-top: 10px !important;
  margin-bottom: 10px !important; }

.u-margin-y-large {
  margin-top: 40px !important;
  margin-bottom: 40px !important; }

.u-margin-y-x-large {
  margin-top: 80px !important;
  margin-bottom: 80px !important; }

.u-margin-y-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

/* ==========================================================================
   UTILITIES / #WIDTHS
   ========================================================================== */
/**
   * Generate an auto width utility class at each of our breakpoints.
   */
.u-width-auto {
  width: auto !important; }

.u-width-1\/1 {
  width: 100% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-1\/1 {
  position: relative;
  right: auto;
  /* [1] */
  left: 100% !important; }

.u-pull-1\/1 {
  position: relative;
  right: 100% !important;
  left: auto;
  /* [1] */ }

.u-width-1\/2 {
  width: 50% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-1\/2 {
  position: relative;
  right: auto;
  /* [1] */
  left: 50% !important; }

.u-pull-1\/2 {
  position: relative;
  right: 50% !important;
  left: auto;
  /* [1] */ }

.u-width-2\/2 {
  width: 100% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-2\/2 {
  position: relative;
  right: auto;
  /* [1] */
  left: 100% !important; }

.u-pull-2\/2 {
  position: relative;
  right: 100% !important;
  left: auto;
  /* [1] */ }

.u-width-1\/3 {
  width: 33.33333% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-1\/3 {
  position: relative;
  right: auto;
  /* [1] */
  left: 33.33333% !important; }

.u-pull-1\/3 {
  position: relative;
  right: 33.33333% !important;
  left: auto;
  /* [1] */ }

.u-width-2\/3 {
  width: 66.66667% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-2\/3 {
  position: relative;
  right: auto;
  /* [1] */
  left: 66.66667% !important; }

.u-pull-2\/3 {
  position: relative;
  right: 66.66667% !important;
  left: auto;
  /* [1] */ }

.u-width-3\/3 {
  width: 100% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-3\/3 {
  position: relative;
  right: auto;
  /* [1] */
  left: 100% !important; }

.u-pull-3\/3 {
  position: relative;
  right: 100% !important;
  left: auto;
  /* [1] */ }

.u-width-1\/4 {
  width: 25% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-1\/4 {
  position: relative;
  right: auto;
  /* [1] */
  left: 25% !important; }

.u-pull-1\/4 {
  position: relative;
  right: 25% !important;
  left: auto;
  /* [1] */ }

.u-width-2\/4 {
  width: 50% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-2\/4 {
  position: relative;
  right: auto;
  /* [1] */
  left: 50% !important; }

.u-pull-2\/4 {
  position: relative;
  right: 50% !important;
  left: auto;
  /* [1] */ }

.u-width-3\/4 {
  width: 75% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-3\/4 {
  position: relative;
  right: auto;
  /* [1] */
  left: 75% !important; }

.u-pull-3\/4 {
  position: relative;
  right: 75% !important;
  left: auto;
  /* [1] */ }

.u-width-4\/4 {
  width: 100% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-4\/4 {
  position: relative;
  right: auto;
  /* [1] */
  left: 100% !important; }

.u-pull-4\/4 {
  position: relative;
  right: 100% !important;
  left: auto;
  /* [1] */ }

.u-width-1\/5 {
  width: 20% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-1\/5 {
  position: relative;
  right: auto;
  /* [1] */
  left: 20% !important; }

.u-pull-1\/5 {
  position: relative;
  right: 20% !important;
  left: auto;
  /* [1] */ }

.u-width-2\/5 {
  width: 40% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-2\/5 {
  position: relative;
  right: auto;
  /* [1] */
  left: 40% !important; }

.u-pull-2\/5 {
  position: relative;
  right: 40% !important;
  left: auto;
  /* [1] */ }

.u-width-3\/5 {
  width: 60% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-3\/5 {
  position: relative;
  right: auto;
  /* [1] */
  left: 60% !important; }

.u-pull-3\/5 {
  position: relative;
  right: 60% !important;
  left: auto;
  /* [1] */ }

.u-width-4\/5 {
  width: 80% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-4\/5 {
  position: relative;
  right: auto;
  /* [1] */
  left: 80% !important; }

.u-pull-4\/5 {
  position: relative;
  right: 80% !important;
  left: auto;
  /* [1] */ }

.u-width-5\/5 {
  width: 100% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-5\/5 {
  position: relative;
  right: auto;
  /* [1] */
  left: 100% !important; }

.u-pull-5\/5 {
  position: relative;
  right: 100% !important;
  left: auto;
  /* [1] */ }

.u-width-1\/6 {
  width: 16.66667% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-1\/6 {
  position: relative;
  right: auto;
  /* [1] */
  left: 16.66667% !important; }

.u-pull-1\/6 {
  position: relative;
  right: 16.66667% !important;
  left: auto;
  /* [1] */ }

.u-width-2\/6 {
  width: 33.33333% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-2\/6 {
  position: relative;
  right: auto;
  /* [1] */
  left: 33.33333% !important; }

.u-pull-2\/6 {
  position: relative;
  right: 33.33333% !important;
  left: auto;
  /* [1] */ }

.u-width-3\/6 {
  width: 50% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-3\/6 {
  position: relative;
  right: auto;
  /* [1] */
  left: 50% !important; }

.u-pull-3\/6 {
  position: relative;
  right: 50% !important;
  left: auto;
  /* [1] */ }

.u-width-4\/6 {
  width: 66.66667% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-4\/6 {
  position: relative;
  right: auto;
  /* [1] */
  left: 66.66667% !important; }

.u-pull-4\/6 {
  position: relative;
  right: 66.66667% !important;
  left: auto;
  /* [1] */ }

.u-width-5\/6 {
  width: 83.33333% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-5\/6 {
  position: relative;
  right: auto;
  /* [1] */
  left: 83.33333% !important; }

.u-pull-5\/6 {
  position: relative;
  right: 83.33333% !important;
  left: auto;
  /* [1] */ }

.u-width-6\/6 {
  width: 100% !important; }

/**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
.u-push-6\/6 {
  position: relative;
  right: auto;
  /* [1] */
  left: 100% !important; }

.u-pull-6\/6 {
  position: relative;
  right: 100% !important;
  left: auto;
  /* [1] */ }

@media (min-width: 26.25em) {
  /**
   * Generate an auto width utility class at each of our breakpoints.
   */
  .u-width-auto\@small {
    width: auto !important; }
  .u-width-1\/1\@small {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/1\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-1\/1\@small {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/2\@small {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/2\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-1\/2\@small {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/2\@small {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/2\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-2\/2\@small {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/3\@small {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/3\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-1\/3\@small {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/3\@small {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/3\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-2\/3\@small {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/3\@small {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/3\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-3\/3\@small {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/4\@small {
    width: 25% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/4\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 25% !important; }
  .u-pull-1\/4\@small {
    position: relative;
    right: 25% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/4\@small {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/4\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-2\/4\@small {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/4\@small {
    width: 75% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/4\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 75% !important; }
  .u-pull-3\/4\@small {
    position: relative;
    right: 75% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/4\@small {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/4\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-4\/4\@small {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/5\@small {
    width: 20% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/5\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 20% !important; }
  .u-pull-1\/5\@small {
    position: relative;
    right: 20% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/5\@small {
    width: 40% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/5\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 40% !important; }
  .u-pull-2\/5\@small {
    position: relative;
    right: 40% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/5\@small {
    width: 60% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/5\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 60% !important; }
  .u-pull-3\/5\@small {
    position: relative;
    right: 60% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/5\@small {
    width: 80% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/5\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 80% !important; }
  .u-pull-4\/5\@small {
    position: relative;
    right: 80% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/5\@small {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/5\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-5\/5\@small {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/6\@small {
    width: 16.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/6\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 16.66667% !important; }
  .u-pull-1\/6\@small {
    position: relative;
    right: 16.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/6\@small {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/6\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-2\/6\@small {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/6\@small {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/6\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-3\/6\@small {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/6\@small {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/6\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-4\/6\@small {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/6\@small {
    width: 83.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/6\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 83.33333% !important; }
  .u-pull-5\/6\@small {
    position: relative;
    right: 83.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-6\/6\@small {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-6\/6\@small {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-6\/6\@small {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ } }

@media (min-width: 46.25em) {
  /**
   * Generate an auto width utility class at each of our breakpoints.
   */
  .u-width-auto\@medium {
    width: auto !important; }
  .u-width-1\/1\@medium {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/1\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-1\/1\@medium {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/2\@medium {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/2\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-1\/2\@medium {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/2\@medium {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/2\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-2\/2\@medium {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/3\@medium {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/3\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-1\/3\@medium {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/3\@medium {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/3\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-2\/3\@medium {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/3\@medium {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/3\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-3\/3\@medium {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/4\@medium {
    width: 25% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/4\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 25% !important; }
  .u-pull-1\/4\@medium {
    position: relative;
    right: 25% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/4\@medium {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/4\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-2\/4\@medium {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/4\@medium {
    width: 75% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/4\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 75% !important; }
  .u-pull-3\/4\@medium {
    position: relative;
    right: 75% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/4\@medium {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/4\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-4\/4\@medium {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/5\@medium {
    width: 20% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/5\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 20% !important; }
  .u-pull-1\/5\@medium {
    position: relative;
    right: 20% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/5\@medium {
    width: 40% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/5\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 40% !important; }
  .u-pull-2\/5\@medium {
    position: relative;
    right: 40% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/5\@medium {
    width: 60% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/5\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 60% !important; }
  .u-pull-3\/5\@medium {
    position: relative;
    right: 60% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/5\@medium {
    width: 80% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/5\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 80% !important; }
  .u-pull-4\/5\@medium {
    position: relative;
    right: 80% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/5\@medium {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/5\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-5\/5\@medium {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/6\@medium {
    width: 16.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/6\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 16.66667% !important; }
  .u-pull-1\/6\@medium {
    position: relative;
    right: 16.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/6\@medium {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/6\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-2\/6\@medium {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/6\@medium {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/6\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-3\/6\@medium {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/6\@medium {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/6\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-4\/6\@medium {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/6\@medium {
    width: 83.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/6\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 83.33333% !important; }
  .u-pull-5\/6\@medium {
    position: relative;
    right: 83.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-6\/6\@medium {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-6\/6\@medium {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-6\/6\@medium {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ } }

@media (min-width: 61.25em) {
  /**
   * Generate an auto width utility class at each of our breakpoints.
   */
  .u-width-auto\@large {
    width: auto !important; }
  .u-width-1\/1\@large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/1\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-1\/1\@large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/2\@large {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/2\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-1\/2\@large {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/2\@large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/2\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-2\/2\@large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/3\@large {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/3\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-1\/3\@large {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/3\@large {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/3\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-2\/3\@large {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/3\@large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/3\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-3\/3\@large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/4\@large {
    width: 25% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/4\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 25% !important; }
  .u-pull-1\/4\@large {
    position: relative;
    right: 25% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/4\@large {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/4\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-2\/4\@large {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/4\@large {
    width: 75% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/4\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 75% !important; }
  .u-pull-3\/4\@large {
    position: relative;
    right: 75% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/4\@large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/4\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-4\/4\@large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/5\@large {
    width: 20% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/5\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 20% !important; }
  .u-pull-1\/5\@large {
    position: relative;
    right: 20% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/5\@large {
    width: 40% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/5\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 40% !important; }
  .u-pull-2\/5\@large {
    position: relative;
    right: 40% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/5\@large {
    width: 60% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/5\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 60% !important; }
  .u-pull-3\/5\@large {
    position: relative;
    right: 60% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/5\@large {
    width: 80% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/5\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 80% !important; }
  .u-pull-4\/5\@large {
    position: relative;
    right: 80% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/5\@large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/5\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-5\/5\@large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/6\@large {
    width: 16.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/6\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 16.66667% !important; }
  .u-pull-1\/6\@large {
    position: relative;
    right: 16.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/6\@large {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/6\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-2\/6\@large {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/6\@large {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/6\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-3\/6\@large {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/6\@large {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/6\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-4\/6\@large {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/6\@large {
    width: 83.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/6\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 83.33333% !important; }
  .u-pull-5\/6\@large {
    position: relative;
    right: 83.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-6\/6\@large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-6\/6\@large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-6\/6\@large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ } }

@media (min-width: 81.25em) {
  /**
   * Generate an auto width utility class at each of our breakpoints.
   */
  .u-width-auto\@x-large {
    width: auto !important; }
  .u-width-1\/1\@x-large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/1\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-1\/1\@x-large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/2\@x-large {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/2\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-1\/2\@x-large {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/2\@x-large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/2\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-2\/2\@x-large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/3\@x-large {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/3\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-1\/3\@x-large {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/3\@x-large {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/3\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-2\/3\@x-large {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/3\@x-large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/3\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-3\/3\@x-large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/4\@x-large {
    width: 25% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/4\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 25% !important; }
  .u-pull-1\/4\@x-large {
    position: relative;
    right: 25% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/4\@x-large {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/4\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-2\/4\@x-large {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/4\@x-large {
    width: 75% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/4\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 75% !important; }
  .u-pull-3\/4\@x-large {
    position: relative;
    right: 75% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/4\@x-large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/4\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-4\/4\@x-large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/5\@x-large {
    width: 20% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/5\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 20% !important; }
  .u-pull-1\/5\@x-large {
    position: relative;
    right: 20% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/5\@x-large {
    width: 40% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/5\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 40% !important; }
  .u-pull-2\/5\@x-large {
    position: relative;
    right: 40% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/5\@x-large {
    width: 60% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/5\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 60% !important; }
  .u-pull-3\/5\@x-large {
    position: relative;
    right: 60% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/5\@x-large {
    width: 80% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/5\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 80% !important; }
  .u-pull-4\/5\@x-large {
    position: relative;
    right: 80% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/5\@x-large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/5\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-5\/5\@x-large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/6\@x-large {
    width: 16.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-1\/6\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 16.66667% !important; }
  .u-pull-1\/6\@x-large {
    position: relative;
    right: 16.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/6\@x-large {
    width: 33.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-2\/6\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.33333% !important; }
  .u-pull-2\/6\@x-large {
    position: relative;
    right: 33.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/6\@x-large {
    width: 50% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-3\/6\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-3\/6\@x-large {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/6\@x-large {
    width: 66.66667% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-4\/6\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.66667% !important; }
  .u-pull-4\/6\@x-large {
    position: relative;
    right: 66.66667% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/6\@x-large {
    width: 83.33333% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-5\/6\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 83.33333% !important; }
  .u-pull-5\/6\@x-large {
    position: relative;
    right: 83.33333% !important;
    left: auto;
    /* [1] */ }
  .u-width-6\/6\@x-large {
    width: 100% !important; }
  /**
       * 1. Defensively reset any leftover or conflicting `left`/`right` values.
       */
  .u-push-6\/6\@x-large {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-6\/6\@x-large {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ } }

/* ==========================================================================
   UTILITIES / #VERTICAL-ALIGN
   ========================================================================== */
/**
 * Utility classes to vertically align an element centrally within its parent.
 *
 * This class requires a set height on the parent element to function correctly.
 */
.u-vertical-align-center {
  /*! autoprefixer: off */
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

/**
 * Using .u-vertical-align-center on an element can cause visual issues if it renders
 * on a half pixel so we can apply preserve-3d to prevent this on the parent
 * element.
 */
.u-vertical-align-parent {
  /*! autoprefixer: off */
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; }

/* ==========================================================================
   UTILITIES / #IE9
   ========================================================================== */
/**
 * This file is a crude, hacky dumping ground for any IE9-specific bug/fixes.
 */
.ie9 {
  /**
   * Nasty hard-coded height to fix IE bug with sizes of form inputs:
   * http://joshnh.com/weblog/line-height-doesnt-work-as-expected-on-inputs/
   */
  /**
   * Remove custom icon offset.
   */
  /**
   * Remove custom icon and gradient overflow on form select inputs
   */
  /**
   * IE9 doesn’t support CSS animations, so let’s just undo everything visual
   * and drop back to some simple ‘Loading…’ text.
   */ }
  .ie9 .c-form-date,
  .ie9 .c-form-input,
  .ie9 .c-form-select {
    height: 2.3em; }
  .ie9 .c-form-select__dropdown {
    padding-right: 5px; }
  .ie9 .c-form-select::before,
  .ie9 .c-form-select::after {
    content: normal; }
  .ie9 .c-spinner {
    font-size: inherit;
    width: auto;
    height: auto;
    animation: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    text-indent: 0; }

/* ==========================================================================
   UTILITIES / #FILL
   ========================================================================== */
/**
 * Utility classes to position an element within its parent.
 */
.u-fill-absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

/* ==========================================================================
   UTILITIES / #OVERFLOW
   ========================================================================== */
/* Horizontal scrolling
  ============================================ */
/**
 * Enable Horizontal Scrolling
 *
 * Recommended for overriding the hidden horizontal scrolling set by
 * generic/overflow.
 */
.u-overflow-x-scroll {
  overflow-x: scroll !important; }

/* Hide overflow
  ============================================ */
.u-overflow-hidden {
  overflow: hidden !important; }

/* ==========================================================================
   COMPONENTS / #TILE
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Tile
 *
 * The base Tile component; providing the glass border and shadow.
 *
 * 1. Forces tile markers to sit above corresponding panels
 */
.c-tile {
  position: relative;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
  padding: 5px;
  margin-bottom: 20px;
  will-change: transform;
  z-index: 10;
  /* [1] */
  height: auto; }

/* Structure and Text
  ---------------------------------- */
/**
 * Tile Content
 *
 * The inner container of the tile provides the background gradient and extra
 * positioning for square tiles
 *
 * 1. Defensively clip overflowing text that can't be handled because of absolute
 *    positioning
 */
.c-tile__content {
  position: relative;
  overflow: hidden;
  /* [1] */ }
  .c-tile__content > :last-child {
    margin-bottom: 0; }

/**
 * Tile Body & Caption - Shared Background structure
 *
 * All Tiles utilise a `.c-tile__body` to wrap the main content area.
 * Split Template Tiles utilise `.c-tile__body .c-tile__caption`.
 *
 * This allows us to use Pseudo Elements to build the Tile gradient background,
 * allowing for easy z-indexing and avoiding issues with nested content.
 */
.c-tile__body,
.c-tile__caption {
  /**
   * Tile Body & Caption - Default/Active Backgrounds
   *
   * Set up shared pseudo element styling
   */
  /**
   * Tile Body & Caption - Default Background
   *
   * Sets the default visible background for Tiles.
   * Sits below the body/caption to avoid hiding content.
   */
  /**
   * Tile Body & Caption - Active Background
   *
   * Hidden by default and triggered on `.c-tile__link` hover.
   * Sits between `::before` and body/caption.
   */ }
  .c-tile__body::before, .c-tile__body::after,
  .c-tile__caption::before,
  .c-tile__caption::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    position: absolute;
    will-change: transform; }
  .c-tile__body::before,
  .c-tile__caption::before {
    z-index: -2; }
  .c-tile__body::after,
  .c-tile__caption::after {
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1; }

/**
 * Tile Body
 *
 * The body container for the tile; This should be applied to any content
 * which doesn't sit flush to the edge of the tile.
 */
.c-tile__body {
  height: 100%;
  padding: 10px;
  position: relative;
  width: 100%; }
  .c-tile__body::before {
    background-color: #fff; }
  .c-tile__body::after {
    /*! autoprefixer: off */
    background-color: #e6e6ea;
    background-image: -webkit-linear-gradient(top, #fff 50%, #e6e6ea 100%);
    background-image: -moz-linear-gradient(top, #fff 50%, #e6e6ea 100%);
    background-image: -o-linear-gradient(top, #fff 50%, #e6e6ea 100%);
    background-image: linear-gradient(to bottom, #fff 50%, #e6e6ea 100%); }
  .c-tile__body > :last-child {
    margin-bottom: 0; }

/**
 * Tile Caption
 *
 * Captions are needed for media tiles; they add a new background gradient and
 * take up the lower 50% of the tile.
 */
.c-tile__caption {
  position: absolute;
  bottom: 0;
  height: 45%;
  z-index: 20;
  text-align: left; }
  .c-tile__caption::before {
    /*! autoprefixer: off */
    background-color: #fff;
    background-image: -webkit-linear-gradient(top, #f2f2f5 0%, #fff 100%);
    background-image: -moz-linear-gradient(top, #f2f2f5 0%, #fff 100%);
    background-image: -o-linear-gradient(top, #f2f2f5 0%, #fff 100%);
    background-image: linear-gradient(to bottom, #f2f2f5 0%, #fff 100%); }
  .c-tile__caption::after {
    /*! autoprefixer: off */
    background-color: #fff;
    background-image: -webkit-linear-gradient(top, #cdccd4 0%, #fff 100%);
    background-image: -moz-linear-gradient(top, #cdccd4 0%, #fff 100%);
    background-image: -o-linear-gradient(top, #cdccd4 0%, #fff 100%);
    background-image: linear-gradient(to bottom, #cdccd4 0%, #fff 100%); }

/**
 * Tile Overlay
 *
 * Overlays are needed for full tiles, overlapping the tile content to take up
 * the lower side of the tile.
 */
.c-tile__overlay {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 1em;
  right: 1em;
  height: 20%;
  z-index: 20; }
  .c-tile__overlay--large {
    height: 25%; }

/**
 * Tile Title
 *
 * Normal heading classes e.g. `c-heading-alpha` are more useful in flexible
 * tiles, but square tiles need more specific and scalable headings in order to
 * prevent overflow.
 */
.c-tile__title {
  position: relative;
  font-size: 28px;
  line-height: 1.3; }
  @media (min-width: 46.25em) and (max-width: 61.24em) {
    .c-tile__title {
      font-size: 2.8vw; } }

/* Media
  ---------------------------------- */
/**
 * Tile Media
 *
 * Container for tile media which takes the top 55% of the tile when used.
 * This usually (but not always) contains a .c-tile-poster.
 *
 * Media and caption pairs should only be used in conjunction with the
 * `c-tile--square` modifier
 */
.c-tile__media {
  position: relative;
  overflow: hidden;
  display: block;
  height: 55.5%; }

/**
 * Tile Poster
 *
 * A poster is a full bleed image which scales when the linked tile is hovered.
 *
 * 1. Prevent IE9 adding height attributes for asynchronously rendered images.
 */
.c-tile__poster {
  height: auto;
  /* [1] */
  transition: transform 1s ease;
  will-change: transform; }

/**
 * Tile Channel
 *
 * A channel logo that sits above the bottom-left of the poster, unaffected by
 * the scale animation.
 */
.c-tile__channel {
  bottom: 10px;
  height: 20px;
  left: 10px;
  width: auto;
  position: absolute;
  z-index: 10; }

/**
 * Tile Sponsor
 *
 * A dedicated area to display the sponsor brand of a show or channel.
 * It should sit adjacent to the `c-tile__link`, linking off to a separate page.
 *
 * Note: Don't remove the brand name and rely on the image within the
 *       "Sponsored by ×" text.
 *       Use `<span class="u-hide-visually">×</span>` to hide the brand name.
 */
.c-tile__sponsor {
  font-size: 12px;
  color: inherit;
  bottom: 10px;
  height: 20px;
  left: 10px;
  right: 10px;
  width: auto;
  position: absolute;
  z-index: 20;
  outline: none; }

/**
 * Tile Sponsor Image
 *
 * Icon/Logo of the sponsor brand, used purely for decoration.
 * Should be applied directly to the `<img>` within `.o-flag__img`.
 */
.c-tile__sponsor-img {
  height: 20px; }

/* Interaction
  ---------------------------------- */
/**
 * Tile Link
 *
 * Tiles can have links, just wrap the `.c-tile__content` with a
 * `a.c-tile__link` or `button.c-tile__link` node.
 *
 * Outline is set to "none" to utilise the `.has-focus` state on `c-tile`.
 *
 * 1. Reset `.c-tile__link` styling on <button> elements allowing more
 *    semantic usage.
 */
.c-tile__link {
  display: block;
  width: 100%;
  /* [1] */
  color: inherit;
  background-color: transparent;
  /* [1] */
  border: 0;
  /* [1] */
  outline: none;
  transition: color 0.5s ease, box-shadow 0.25s ease;
  position: relative;
  height: 100%;
  cursor: pointer;
  /**
   * Tile Link - Drop Shadow
   *
   * A pseudo-element is used to contain the hover box-shadow transition, set to
   * be invisible by default.
   * The `opacity` is then animated for smooth performance [1].
   *
   * 1. http://tobiasahlin.com/blog/how-to-animate-box-shadow/
   */
  /**
   * All default hover interaction for the Tile is handled via `.c-tile__link`.
   */
  /**
   * Apply `:hover` / `:focus` text underline only to the Tile's Title.
   */ }
  .c-tile__link::before {
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    content: "";
    position: absolute;
    box-shadow: 0 15px 20px -8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform-origin: bottom;
    transition: opacity 0.5s ease;
    will-change: transform; }
  .c-tile__link:hover {
    /**
     * Show the Tile Link's Drop Shadow
     */
    /**
     * Show the active Body / Caption gradient
     */
    /**
     * Scale the Tile's Poster
     */ }
    .c-tile__link:hover::before {
      opacity: 1; }
    .c-tile__link:hover .c-tile__body::after,
    .c-tile__link:hover .c-tile__caption::after {
      opacity: 1; }
    .c-tile__link:hover .c-tile__poster {
      /*! autoprefixer: off */
      -ms-transform: scale(1.05, 1.05);
      transform: scale(1.05, 1.05); }
  .c-tile__link:hover, .c-tile__link:focus {
    text-decoration: none; }
    .c-tile__link:hover .c-tile__title, .c-tile__link:focus .c-tile__title {
      text-decoration: underline; }

/**
 * Tile Shine
 *
 * Tile shine to be applied to a .c-shine component to give the correct
 * positioning when used on a Tile.
 *
 * The shine hover effect can then be applied by using `.c-shine-context`
 * alongside `.c-tile__link`.
 *
 * 1. As `.c-tile__link` sits inside a relative `.c-tile__content` by default,
 *    we have to ensure *both* top and bottom Tile paddings are counted.
 */
.c-tile__shine {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 30; }

.c-tile__shine--top {
  top: -25px;
  /* [1] */ }

.c-tile__shine--bottom {
  bottom: -25px;
  /* [1] */ }

/* States
  =========================================== */
/**
 * Keyboard Focus
 *
 * Should be applied to `.c-tile` on keyboard focus for Accessibility.
 */
.c-tile.has-focus {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75); }

/**
 * Selected
 *
 * Should be applied to `.c-tile` when used to trigger the opening of a
 * corresponding `.c-panel`.
 */
.c-tile.is-selected {
  /**
   * Arrow markers to signify panel relationship.
   *
   * 1. Positions the marker between element and panel
   * 2. Need to take off an extra pixel here to allow for browser rendering/
   *    rounding quirks.
   * 3. Rotate 45deg to allow it to mask the panel gradient and look like a
   *    notch in the panel (webkit placed after to prevent render quirk)
   * 4. Box-shadow that matches the panel background color to smooth the
   *    shadow transition
   * 5. Inset box-shadow that is offset to be visible only on the top edges
   */
  margin-bottom: 20px;
  position: relative;
  z-index: 10; }
  .c-tile.is-selected::before, .c-tile.is-selected::after {
    display: block;
    content: "";
    position: absolute;
    /* [1] */
    bottom: -32px;
    /* [1, 2] */
    left: 50%;
    /* [1] */
    width: 22px;
    height: 22px;
    margin-left: -11px;
    /* [1] */
    -ms-transform: rotate(45deg);
    /* [3] */
    transform: rotate(45deg);
    /* [3] */
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    /* [3] */ }
  .c-tile.is-selected::before {
    box-shadow: 5px 5px 8px #fff;
    /* [4] */ }
  .c-tile.is-selected::after {
    background-color: #fff;
    box-shadow: inset 11px 11px 11px -11px #9f9f9f;
    /* [5] */ }

/**
 * Selected (Dark Themed Panels)
 *
 * Identical to above for `.c-panel--dark`
 */
.c-tile--dark.is-selected {
  /**
   * Arrow markers to signify panel relationship.
   *
   * 1. Positions the marker between element and panel
   * 2. Need to take off an extra pixel here to allow for browser rendering/
   *    rounding quirks.
   * 3. Rotate 45deg to allow it to mask the panel gradient and look like a
   *    notch in the panel (webkit placed after to prevent render quirk)
   * 4. Box-shadow that matches the panel background color to smooth the
   *    shadow transition
   * 5. Inset box-shadow that is offset to be visible only on the top edges
   */
  margin-bottom: 20px;
  position: relative;
  z-index: 10; }
  .c-tile--dark.is-selected::before, .c-tile--dark.is-selected::after {
    display: block;
    content: "";
    position: absolute;
    /* [1] */
    bottom: -32px;
    /* [1, 2] */
    left: 50%;
    /* [1] */
    width: 22px;
    height: 22px;
    margin-left: -11px;
    /* [1] */
    -ms-transform: rotate(45deg);
    /* [3] */
    transform: rotate(45deg);
    /* [3] */
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    /* [3] */ }
  .c-tile--dark.is-selected::before {
    box-shadow: 5px 5px 8px #222;
    /* [4] */ }
  .c-tile--dark.is-selected::after {
    background-color: #222;
    box-shadow: inset 11px 11px 11px -11px #000;
    /* [5] */ }

/* Modifiers
  =========================================== */
/**
 * Square Tiles
 *
 * Forces a Tile to keep a square ratio.
 */
.c-tile--square {
  height: 0;
  padding-top: 100%;
  padding-bottom: 0;
  /**
   * 1. As `.c-tile__content` is now absolute, we can reduce the offset to both
   *    borders instead of paddings
   */ }
  .c-tile--square .c-tile__content {
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    position: absolute; }
  .c-tile--square .c-tile__link,
  .c-tile--square .c-tile__link::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute; }
  .c-tile--square .c-tile__shine--top {
    top: -20px;
    /* [1] */ }
  .c-tile--square .c-tile__shine--bottom {
    bottom: -20px;
    /* [1] */ }

/**
 * Full Tiles
 *
 * Designed for Tiles that highlight a product, with the media set to fill
 * the background to compliment transparent PNG images.
 *
 * Text should then `overlay` the content.
 */
.c-tile--full {
  /**
   * Stretch image to fit full height on full tiles
   */
  /**
   * Align to center on full tiles
   */ }
  .c-tile--full .c-tile__body {
    position: absolute;
    height: 100%;
    top: 0; }
    .c-tile--full .c-tile__body::after {
      /*! autoprefixer: off */
      background-color: #e6e6ea;
      background-image: -webkit-linear-gradient(top, #fff 50%, #e6e6ea 100%);
      background-image: -moz-linear-gradient(top, #fff 50%, #e6e6ea 100%);
      background-image: -o-linear-gradient(top, #fff 50%, #e6e6ea 100%);
      background-image: linear-gradient(to bottom, #fff 50%, #e6e6ea 100%); }
  .c-tile--full .c-tile__media {
    height: auto;
    z-index: 20;
    position: relative; }
  .c-tile--full .c-tile__poster {
    display: block;
    margin: 0 auto; }

/**
 * Collapsible Tiles
 *
 * Collapses split tiles at medium size, placing image and caption side by side.
 * Most of the code below resets changes to the structure by `.c-tile--square`.
 *
 * Please note: Only "Split Template" Tiles can be collapsed.
 */
@media (max-width: 46.24em) {
  .c-tile--collapsible {
    height: auto;
    padding: 5px;
    /**
     * Display media and caption side by side.
     */
    /**
     * Caption positioned absolutely to prevent text overflowing media height.
     */ }
    .c-tile--collapsible .c-tile__link {
      position: relative;
      /* stylelint-disable-next-line max-nesting-depth */ }
      .c-tile--collapsible .c-tile__link::before {
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px; }
    .c-tile--collapsible .c-tile__content {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      position: relative;
      display: block;
      width: 100%; }
    .c-tile--collapsible .c-tile__caption,
    .c-tile--collapsible .c-tile__media {
      display: inline-block;
      vertical-align: top; }
    .c-tile--collapsible .c-tile__caption {
      position: absolute;
      width: 65%;
      height: 100%;
      overflow: hidden; }
    .c-tile--collapsible .c-tile__media {
      position: relative;
      width: 35%; }
    .c-tile--collapsible .c-tile__title {
      /*! autoprefixer: off */
      position: relative;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      font-size: 28px;
      line-height: 1.3; } }

/**
 * Themed Tiles
 *
 * For each brand gradient in `$tile-themes`, generate a Tile Theme class
 * e.g. `.c-tile--sky-1`
 */
.c-tile--sky-1 .c-tile__link:hover,
.c-tile--sky-1 .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-1 .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #079ef8;
  background-image: -webkit-linear-gradient(top, #0080df 0%, #079ef8 100%);
  background-image: -moz-linear-gradient(top, #0080df 0%, #079ef8 100%);
  background-image: -o-linear-gradient(top, #0080df 0%, #079ef8 100%);
  background-image: linear-gradient(to bottom, #0080df 0%, #079ef8 100%); }

.c-tile--sky-account .c-tile__link:hover,
.c-tile--sky-account .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-account .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #197bc9;
  background-image: -webkit-linear-gradient(top, #135fa0 0%, #197bc9 100%);
  background-image: -moz-linear-gradient(top, #135fa0 0%, #197bc9 100%);
  background-image: -o-linear-gradient(top, #135fa0 0%, #197bc9 100%);
  background-image: linear-gradient(to bottom, #135fa0 0%, #197bc9 100%); }

.c-tile--sky-atlantic .c-tile__link:hover,
.c-tile--sky-atlantic .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-atlantic .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #079ef8;
  background-image: -webkit-linear-gradient(top, #003a7f 0%, #079ef8 100%);
  background-image: -moz-linear-gradient(top, #003a7f 0%, #079ef8 100%);
  background-image: -o-linear-gradient(top, #003a7f 0%, #079ef8 100%);
  background-image: linear-gradient(to bottom, #003a7f 0%, #079ef8 100%); }

.c-tile--sky-arts .c-tile__link:hover,
.c-tile--sky-arts .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-arts .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #fd5366;
  background-image: -webkit-linear-gradient(top, #fd004c 0%, #fd5366 100%);
  background-image: -moz-linear-gradient(top, #fd004c 0%, #fd5366 100%);
  background-image: -o-linear-gradient(top, #fd004c 0%, #fd5366 100%);
  background-image: linear-gradient(to bottom, #fd004c 0%, #fd5366 100%); }

.c-tile--sky-box-sets .c-tile__link:hover,
.c-tile--sky-box-sets .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-box-sets .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #80082c;
  background-image: -webkit-linear-gradient(top, #5c0f39 0%, #80082c 100%);
  background-image: -moz-linear-gradient(top, #5c0f39 0%, #80082c 100%);
  background-image: -o-linear-gradient(top, #5c0f39 0%, #80082c 100%);
  background-image: linear-gradient(to bottom, #5c0f39 0%, #80082c 100%); }

.c-tile--sky-cinema .c-tile__link:hover,
.c-tile--sky-cinema .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-cinema .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #cb0033;
  background-image: -webkit-linear-gradient(top, #903 0%, #cb0033 100%);
  background-image: -moz-linear-gradient(top, #903 0%, #cb0033 100%);
  background-image: -o-linear-gradient(top, #903 0%, #cb0033 100%);
  background-image: linear-gradient(to bottom, #903 0%, #cb0033 100%); }

.c-tile--sky-kids .c-tile__link:hover,
.c-tile--sky-kids .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-kids .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #6626a1;
  background-image: -webkit-linear-gradient(top, #4c0080 0%, #6626a1 100%);
  background-image: -moz-linear-gradient(top, #4c0080 0%, #6626a1 100%);
  background-image: -o-linear-gradient(top, #4c0080 0%, #6626a1 100%);
  background-image: linear-gradient(to bottom, #4c0080 0%, #6626a1 100%); }

.c-tile--sky-living .c-tile__link:hover,
.c-tile--sky-living .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-living .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #67a0b5;
  background-image: -webkit-linear-gradient(top, #68879c 0%, #67a0b5 100%);
  background-image: -moz-linear-gradient(top, #68879c 0%, #67a0b5 100%);
  background-image: -o-linear-gradient(top, #68879c 0%, #67a0b5 100%);
  background-image: linear-gradient(to bottom, #68879c 0%, #67a0b5 100%); }

.c-tile--sky-witness .c-tile__link:hover,
.c-tile--sky-witness .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-witness .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #262626;
  background-image: -webkit-linear-gradient(top, #000 0%, #262626 100%);
  background-image: -moz-linear-gradient(top, #000 0%, #262626 100%);
  background-image: -o-linear-gradient(top, #000 0%, #262626 100%);
  background-image: linear-gradient(to bottom, #000 0%, #262626 100%); }

.c-tile--sky-news .c-tile__link:hover,
.c-tile--sky-news .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-news .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #122d74;
  background-image: -webkit-linear-gradient(top, #041957 0%, #122d74 100%);
  background-image: -moz-linear-gradient(top, #041957 0%, #122d74 100%);
  background-image: -o-linear-gradient(top, #041957 0%, #122d74 100%);
  background-image: linear-gradient(to bottom, #041957 0%, #122d74 100%); }

.c-tile--sky-sports .c-tile__link:hover,
.c-tile--sky-sports .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-sports .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #122476;
  background-image: -webkit-linear-gradient(top, #021158 0%, #122476 100%);
  background-image: -moz-linear-gradient(top, #021158 0%, #122476 100%);
  background-image: -o-linear-gradient(top, #021158 0%, #122476 100%);
  background-image: linear-gradient(to bottom, #021158 0%, #122476 100%); }

.c-tile--sky-store .c-tile__link:hover,
.c-tile--sky-store .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-store .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #073fa0;
  background-image: -webkit-linear-gradient(top, #003268 0%, #073fa0 100%);
  background-image: -moz-linear-gradient(top, #003268 0%, #073fa0 100%);
  background-image: -o-linear-gradient(top, #003268 0%, #073fa0 100%);
  background-image: linear-gradient(to bottom, #003268 0%, #073fa0 100%); }

.c-tile--ultimate-on-demand .c-tile__link:hover,
.c-tile--ultimate-on-demand .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--ultimate-on-demand .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #3c7191;
  background-image: -webkit-linear-gradient(top, #000514 0%, #133e73 50%, #3c7191 100%);
  background-image: -moz-linear-gradient(top, #000514 0%, #133e73 50%, #3c7191 100%);
  background-image: -o-linear-gradient(top, #000514 0%, #133e73 50%, #3c7191 100%);
  background-image: linear-gradient(to bottom, #000514 0%, #133e73 50%, #3c7191 100%); }

.c-tile--sky-mobile .c-tile__link:hover,
.c-tile--sky-mobile .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-mobile .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #ff6400;
  background-image: -webkit-linear-gradient(top, #ff00a5 0%, #ff6400 100%);
  background-image: -moz-linear-gradient(top, #ff00a5 0%, #ff6400 100%);
  background-image: -o-linear-gradient(top, #ff00a5 0%, #ff6400 100%);
  background-image: linear-gradient(to bottom, #ff00a5 0%, #ff6400 100%); }

.c-tile--pick .c-tile__link:hover,
.c-tile--pick .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--pick .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #763175;
  background-image: -webkit-linear-gradient(top, #361740 0%, #763175 100%);
  background-image: -moz-linear-gradient(top, #361740 0%, #763175 100%);
  background-image: -o-linear-gradient(top, #361740 0%, #763175 100%);
  background-image: linear-gradient(to bottom, #361740 0%, #763175 100%); }

.c-tile--challenge .c-tile__link:hover,
.c-tile--challenge .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--challenge .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #ff5200;
  background-image: -webkit-linear-gradient(top, #ff5200 0%, #ff5200 100%);
  background-image: -moz-linear-gradient(top, #ff5200 0%, #ff5200 100%);
  background-image: -o-linear-gradient(top, #ff5200 0%, #ff5200 100%);
  background-image: linear-gradient(to bottom, #ff5200 0%, #ff5200 100%); }

/* ==========================================================================
   COMPONENTS / #TILE-FLUID
   ========================================================================== */
/**
 * Fluid tiles are designed to scale proportionally, this means the tile's
 * content scales in relation to its width.
 *
 * To achieve this we utilise viewport width units (vw) which allow us to scale
 * the tile relative to the browser, the downside being that we loose the
 * ability to accurately set exact font-sizes.
 *
 *
 * Fluid base breakpoint
 * ==============================================
 *
 * The fluid base breakpoint is the breakpoint used to base our proportional
 * scaling on. At this breakpoint our base font-size for tiles will be the vw
 * equivalent of our $global-font-size (20px).
 *
 */
/* Tile Fluid base font size
 * ==============================================
 *
 * This calculates the vw equivalent of the $global-font-size at our specified
 * $tile-fluid-base-breakpoint value. It uses the following logic:
 *
 *  static font size / viewport width * 100vw
 *
 * This means that at our target browser width we will know that our fluid-base-
 * font-size is set to the vw equivalent of 20px (or what ever our global font
 * size is). Given our mobile first approach it makes sense this should be set
 * to our smallest breakpoint, this means we can be sure of the font-size at
 * this resolution.
 *
 */
/* Tile Fluid max width
 * ==============================================
 *
 * To prevent the tiles scaling infinitely we can set a maximum size, by default
 * this is matched to .o-container (1200px).
 *
 */
/**
 * Now we have the fluid-base-font-size calculated we can apply this to the
 * `c-tile` via a modifier `--fluid`.
 */
.c-tile--fluid {
  font-size: 4.28571vw;
  /**
   * Now that our fluid tiles are set using the vw based font-size we can
   * automate scaling of content using em units which are relative to the tile
   * font-size. This removes the need to set bespoke vw sizes on all content.

   * Set generic fluid values for the tile:
   * 1. Convert the standard value for tile padding to em so it scales
   *    proportionally.
   */
  /**
   * Set generic fluid tile title values:
   * 1. Convert our heading charlie (36px) to an em value.
   * 2. Set margin bottom in em relative to the elements font-size (36px)
   */ }
  .c-tile--fluid .c-tile__body {
    line-height: 1.2em;
    padding: 0.55556em;
    /* [1] */ }
  .c-tile--fluid .c-tile__title {
    font-size: 1.55556em;
    /* [1] */
    line-height: 1.25em;
    margin-bottom: 0.17857em;
    /* [2] */ }

/* ==============================================
 * Tile Fluid Container
 * ==============================================
 */
/**
 * Tile Fluid constrain ratio
 * ==============================================
 * Once the browser goes beyond our standard container width (1200px) we want
 * the the fluid tiles to stop scaling so they maintain proportional to the tile
 * rather than the browser.
 *
 * To achieve this we need to find the px value which is equivalent to our vw
 * fluid font-size at 1200px. To do this we we can divide the container maximum
 * width by our fluid base breakpoint size.
 *
 */
/**
 * This gives us the ratio between these two sizes. Now if we multiply our
 * global font size (20px) by this ratio we have the exact font-size of the
 * fluid tiles at 1200px.
 */
@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile--fluid {
    font-size: 51.42857px; } }

/* ==============================================
 * Tile Fluid Scaling
 * ==============================================
 *
 * Fluid tiles work based on browser width so when used in combination with the
 * toolkit grid we need to use modifiers to adjust the base font-size
 * accordingly. If we are using 1/2 width grid items then we can apply a
 * modifier to the reduce the fluid-base-font-size by half, maintaining the
 * tiles proportions.
 *
 * So:
 * .c-tile-fluid-scale-1/2         - Scales the fluid base font by 1/2
 * .c-tile-fluid-scale-1/3@medium  - Scales by 1/3 at the medium breakpoint and up
 * .c-tile-fluid-scale-1/1@large   - Resets scale full at the large breakpoint and up
 *
 * The tile-fluid-scales() mixin will generate these classes for each scale and
 * breakpoint provided.
 *
 */
/**
 * Create the fluid scale classes when no breakpoint is specified
 */
/**
   * Loop through the number of columns for each denominator of our fractions.
   */
/**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-1\/1 .c-tile--fluid {
  font-size: 4.28571vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/1 .c-tile--fluid {
      font-size: 51.42857px; } }

/**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-1\/2 .c-tile--fluid {
  font-size: 2.14286vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/2 .c-tile--fluid {
      font-size: 25.71429px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-2\/2 .c-tile--fluid {
  font-size: 4.28571vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/2 .c-tile--fluid {
      font-size: 51.42857px; } }

/**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-1\/3 .c-tile--fluid {
  font-size: 1.42857vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/3 .c-tile--fluid {
      font-size: 17.14286px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-2\/3 .c-tile--fluid {
  font-size: 2.85714vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/3 .c-tile--fluid {
      font-size: 34.28571px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-3\/3 .c-tile--fluid {
  font-size: 4.28571vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/3 .c-tile--fluid {
      font-size: 51.42857px; } }

/**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-1\/4 .c-tile--fluid {
  font-size: 1.07143vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/4 .c-tile--fluid {
      font-size: 12.85714px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-2\/4 .c-tile--fluid {
  font-size: 2.14286vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/4 .c-tile--fluid {
      font-size: 25.71429px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-3\/4 .c-tile--fluid {
  font-size: 3.21429vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/4 .c-tile--fluid {
      font-size: 38.57143px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-4\/4 .c-tile--fluid {
  font-size: 4.28571vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/4 .c-tile--fluid {
      font-size: 51.42857px; } }

/**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-1\/5 .c-tile--fluid {
  font-size: 0.85714vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/5 .c-tile--fluid {
      font-size: 10.28571px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-2\/5 .c-tile--fluid {
  font-size: 1.71429vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/5 .c-tile--fluid {
      font-size: 20.57143px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-3\/5 .c-tile--fluid {
  font-size: 2.57143vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/5 .c-tile--fluid {
      font-size: 30.85714px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-4\/5 .c-tile--fluid {
  font-size: 3.42857vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/5 .c-tile--fluid {
      font-size: 41.14286px; } }

/**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
.c-tile-fluid-scale-5\/5 .c-tile--fluid {
  font-size: 4.28571vw;
  /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }
  @media (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-5\/5 .c-tile--fluid {
      font-size: 51.42857px; } }

/**
 * Create the fluid scale classes when a breakpoint is specified
 */
@media (min-width: 26.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/1\@small .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@small .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 26.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/2\@small .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@small .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/2\@small .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@small .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 26.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/3\@small .c-tile--fluid {
    font-size: 1.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@small .c-tile--fluid {
      font-size: 17.14286px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/3\@small .c-tile--fluid {
    font-size: 2.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@small .c-tile--fluid {
      font-size: 34.28571px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/3\@small .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@small .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 26.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/4\@small .c-tile--fluid {
    font-size: 1.07143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@small .c-tile--fluid {
      font-size: 12.85714px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/4\@small .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@small .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/4\@small .c-tile--fluid {
    font-size: 3.21429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@small .c-tile--fluid {
      font-size: 38.57143px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/4\@small .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@small .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 26.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/5\@small .c-tile--fluid {
    font-size: 0.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@small .c-tile--fluid {
      font-size: 10.28571px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/5\@small .c-tile--fluid {
    font-size: 1.71429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@small .c-tile--fluid {
      font-size: 20.57143px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/5\@small .c-tile--fluid {
    font-size: 2.57143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@small .c-tile--fluid {
      font-size: 30.85714px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/5\@small .c-tile--fluid {
    font-size: 3.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@small .c-tile--fluid {
      font-size: 41.14286px; } }

@media (min-width: 26.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-5\/5\@small .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 26.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@small .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 46.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/1\@medium .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@medium .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 46.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/2\@medium .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@medium .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/2\@medium .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@medium .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 46.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/3\@medium .c-tile--fluid {
    font-size: 1.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@medium .c-tile--fluid {
      font-size: 17.14286px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/3\@medium .c-tile--fluid {
    font-size: 2.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@medium .c-tile--fluid {
      font-size: 34.28571px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/3\@medium .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@medium .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 46.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/4\@medium .c-tile--fluid {
    font-size: 1.07143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@medium .c-tile--fluid {
      font-size: 12.85714px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/4\@medium .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@medium .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/4\@medium .c-tile--fluid {
    font-size: 3.21429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@medium .c-tile--fluid {
      font-size: 38.57143px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/4\@medium .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@medium .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 46.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/5\@medium .c-tile--fluid {
    font-size: 0.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@medium .c-tile--fluid {
      font-size: 10.28571px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/5\@medium .c-tile--fluid {
    font-size: 1.71429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@medium .c-tile--fluid {
      font-size: 20.57143px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/5\@medium .c-tile--fluid {
    font-size: 2.57143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@medium .c-tile--fluid {
      font-size: 30.85714px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/5\@medium .c-tile--fluid {
    font-size: 3.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@medium .c-tile--fluid {
      font-size: 41.14286px; } }

@media (min-width: 46.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-5\/5\@medium .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 46.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@medium .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 61.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/1\@large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 61.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/2\@large .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@large .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/2\@large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 61.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/3\@large .c-tile--fluid {
    font-size: 1.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@large .c-tile--fluid {
      font-size: 17.14286px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/3\@large .c-tile--fluid {
    font-size: 2.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@large .c-tile--fluid {
      font-size: 34.28571px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/3\@large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 61.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/4\@large .c-tile--fluid {
    font-size: 1.07143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@large .c-tile--fluid {
      font-size: 12.85714px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/4\@large .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@large .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/4\@large .c-tile--fluid {
    font-size: 3.21429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@large .c-tile--fluid {
      font-size: 38.57143px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/4\@large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 61.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/5\@large .c-tile--fluid {
    font-size: 0.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@large .c-tile--fluid {
      font-size: 10.28571px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/5\@large .c-tile--fluid {
    font-size: 1.71429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@large .c-tile--fluid {
      font-size: 20.57143px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/5\@large .c-tile--fluid {
    font-size: 2.57143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@large .c-tile--fluid {
      font-size: 30.85714px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/5\@large .c-tile--fluid {
    font-size: 3.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@large .c-tile--fluid {
      font-size: 41.14286px; } }

@media (min-width: 61.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-5\/5\@large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 61.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 81.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/1\@x-large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@x-large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 81.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/2\@x-large .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@x-large .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/2\@x-large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@x-large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 81.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/3\@x-large .c-tile--fluid {
    font-size: 1.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@x-large .c-tile--fluid {
      font-size: 17.14286px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/3\@x-large .c-tile--fluid {
    font-size: 2.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@x-large .c-tile--fluid {
      font-size: 34.28571px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/3\@x-large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@x-large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 81.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/4\@x-large .c-tile--fluid {
    font-size: 1.07143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@x-large .c-tile--fluid {
      font-size: 12.85714px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/4\@x-large .c-tile--fluid {
    font-size: 2.14286vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@x-large .c-tile--fluid {
      font-size: 25.71429px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/4\@x-large .c-tile--fluid {
    font-size: 3.21429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@x-large .c-tile--fluid {
      font-size: 38.57143px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/4\@x-large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@x-large .c-tile--fluid {
      font-size: 51.42857px; } }

@media (min-width: 81.25em) {
  /**
     * Begin creating a numerator for our fraction up until we hit the
     * denominator.
     */
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-1\/5\@x-large .c-tile--fluid {
    font-size: 0.85714vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@x-large .c-tile--fluid {
      font-size: 10.28571px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-2\/5\@x-large .c-tile--fluid {
    font-size: 1.71429vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@x-large .c-tile--fluid {
      font-size: 20.57143px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-3\/5\@x-large .c-tile--fluid {
    font-size: 2.57143vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@x-large .c-tile--fluid {
      font-size: 30.85714px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-4\/5\@x-large .c-tile--fluid {
    font-size: 3.42857vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@x-large .c-tile--fluid {
      font-size: 41.14286px; } }

@media (min-width: 81.25em) {
  /**
       * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
       */
  .c-tile-fluid-scale-5\/5\@x-large .c-tile--fluid {
    font-size: 4.28571vw;
    /**
         * For tiles wrapped in the container we set a fixed px font-size to
         * prevent scaling.
         */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }
  @media (min-width: 81.25em) and (min-width: 75em) {
    .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@x-large .c-tile--fluid {
      font-size: 51.42857px; } }

/* Modifiers
  =========================================== */
/**
 * Collapsible Fluid Tiles
 *
 * Collapsible Fluid Tiles are overridden to the correct size on medium screens.
 */
@media (max-width: 46.24em) {
  .c-tile--fluid.c-tile--collapsible {
    font-size: 2.85714vw; } }

/* ==========================================================================
   COMPONENTS / #SHINE
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Shine
 *
 * Base container, positioning and behaviour
 */
.c-shine {
  overflow: hidden;
  pointer-events: none;
  display: block;
  height: 45px;
  width: 100%;
  z-index: 100; }

/**
 * Shine Rail
 *
 * The moving part of the shine. We start with the shine transformed *away* from
 * it's context, and move it to it's natural position on hover.
 */
.c-shine__rail {
  /*! autoprefixer: off */
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: 0.5s ease-out;
  will-change: transform;
  position: relative;
  height: 100%;
  overflow: hidden;
  /**
   * Reverse modifier for shines to move LTR rather than RTL
   */
  /**
   * Shine Graphics
   *
   * Pseudo elements to contain the shine graphics generated by CSS.
   */
  /**
   * Shine Graphics: Diffraction Spike
   */
  /**
   * Shine Graphics: Orb
   */ }
  .c-shine--rev .c-shine__rail {
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
  .c-shine__rail::before, .c-shine__rail::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat; }
  .c-shine__rail::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.15) 38%, rgba(255, 255, 255, 0) 50%);
    background-size: 300px 16px; }
  .c-shine__rail::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0) 50%);
    background-size: 60px 28px; }

/**
 * Shine Context
 *
 * Applied to the parent node in which the shine is contained, animating shine
 * rails on hover.
 */
.c-shine-context {
  /*! autoprefixer: off */ }
  .c-shine-context .c-shine__rail {
    opacity: 0; }
  .c-shine-context:hover .c-shine__rail {
    opacity: 1;
    -ms-transform: translateX(25%);
    transform: translateX(25%); }
  .c-shine-context:hover .c-shine--rev .c-shine__rail {
    -ms-transform: translateX(-25%);
    transform: translateX(-25%); }

/* ==========================================================================
   COMPONENTS / #DIVIDER
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Divider
 *
 * Prominent horizontal (and vertical) rules between other elements.
 *
 * The default Divider and it's `--top` modifier are intended for use on
 * horizontal rules.
 * e.g. `<hr class="c-divider">`
 *
 * With `--left` and `--right` modifiers intended to wrap content.
 * (The default divider and `--top` modifier will also work in this manner)
 * e.g. `<div class="c-divider c-divider--right">Some content</div>`
 *
 * 1. Set a transparent border on the relevant edge to prevent element collapse.
 * 2. Reduce the `margin-bottom` by the same width as the divider in order to
 *    keep on our baseline grid.
 */
.c-divider {
  position: relative;
  border-width: 0 0 1px 0;
  /* 1 */
  border-style: solid;
  border-color: transparent;
  margin-bottom: 19px;
  /* 2 */
  /**
   * Divider - Gradient Border
   */
  /**
   * Divider - Shadow
   */ }
  .c-divider::before, .c-divider::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%; }
  .c-divider::before {
    /*! autoprefixer: off */
    background: #c0c0c0;
    background: -webkit-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -moz-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -ms-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -o-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: linear-gradient(to right, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    bottom: 0;
    height: 1px; }
  .c-divider::after {
    /*! autoprefixer: off */
    background: -webkit-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -moz-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -ms-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -o-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: radial-gradient(at 50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
    top: 100%;
    height: 10px; }

/* Modifiers
  ============================================ */
/* Directions
  ---------------------------------- */
/**
 * Loop to generate our suite of modifiers for each divider direction:
 *
 *   .c-divider--right {}
 *   .c-divider--bottom {}
 *   .c-divider--left {}
 */
.c-divider--top {
  border-width: 1px 0 0 0;
  /**
     * Divider gradient border.
     *
     * 1. Attach the border to the appropriate edge.
     */
  /**
     * Divider shadow.
     *
     * 1. Flow the shadow over the appropriate edge.
     */ }
  .c-divider--top::before {
    /*! autoprefixer: off */
    background: #c0c0c0;
    background: -webkit-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -moz-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -ms-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -o-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: linear-gradient(to right, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    bottom: 100%; }
  .c-divider--top::after {
    /*! autoprefixer: off */
    background: -webkit-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -moz-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -ms-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -o-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
    background: radial-gradient(at 50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
    top: -11px; }

.c-divider--right {
  border-width: 0 1px 1px 0;
  margin-bottom: 0;
  /**
     * Divider gradient border.
     *
     * 1. Attach the border to the appropriate edge.
     */
  /**
     * Divider shadow.
     *
     * 1. Flow the shadow over the appropriate edge.
     */ }
  .c-divider--right::before {
    /*! autoprefixer: off */
    background: #c0c0c0;
    background: -webkit-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -moz-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -ms-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -o-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: linear-gradient(to bottom, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    top: 0;
    width: 1px;
    height: 100%;
    right: 0;
    /* 1 */ }
  .c-divider--right::after {
    /*! autoprefixer: off */
    background: -webkit-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -moz-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -ms-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -o-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: radial-gradient(farthest-corner at 0 50%, rgba(74, 74, 74, 0.15), transparent 40%);
    top: 0;
    height: 100%;
    width: 10px;
    right: -10px;
    /* 1 */ }

.c-divider--left {
  border-width: 0 0 1px 1px;
  margin-bottom: 0;
  /**
     * Divider gradient border.
     *
     * 1. Attach the border to the appropriate edge.
     */
  /**
     * Divider shadow.
     *
     * 1. Flow the shadow over the appropriate edge.
     */ }
  .c-divider--left::before {
    /*! autoprefixer: off */
    background: #c0c0c0;
    background: -webkit-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -moz-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -ms-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: -o-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    background: linear-gradient(to bottom, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
    top: 0;
    width: 1px;
    height: 100%;
    left: 0;
    /* 1 */ }
  .c-divider--left::after {
    /*! autoprefixer: off */
    background: -webkit-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -moz-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -ms-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: -o-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
    background: radial-gradient(farthest-corner at 100% 50%, rgba(74, 74, 74, 0.15), transparent 40%);
    top: 0;
    height: 100%;
    width: 10px;
    left: -10px;
    /* 1 */ }

/**
 * Larger gaps underneath dividers.
 */
.c-divider--large {
  margin-bottom: 39px; }

/* Subsection
  ---------------------------------- */
/**
 * Applying the `--sub` modifier to any divider will remove the shadow by
 * resetting the pseudo-element.
 */
.c-divider--sub::after {
  content: normal; }

/**
 * Additional alignment modifiers that are only applicable to `--sub`.
 */
.c-divider--sub.c-divider--align-left::before {
  background: #c0c0c0;
  background: -webkit-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to right, #c0c0c0, rgba(192, 192, 192, 0)); }

.c-divider--sub.c-divider--align-right::before {
  background: #c0c0c0;
  background: -webkit-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to left, #c0c0c0, rgba(192, 192, 192, 0)); }

/* ==========================================================================
   COMPONENTS / #LINK-FAUX
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Link (Faux)
 *
 * See `c-link` for a `<button>` styled as `<a:link> `only
 *
 * When a `<button>` needs to appear as a hybrid of a `<a:link>` and a `<button>`
 * for cosmetic reasons, Link (Faux) should be used.
 *
 * 1. Reset browser styles.
 * 2. Tidy alignment for when the button size needs to be modified.
 * 3. Make buttons inherit font styles (necessary when styling `input`s as
 *    buttons).
 * 4. Base transparent background-color for modifiers to alter.
 * 5. Force all button-styled elements to appear clickable.
 * 6. Mimic link underline.
 */
.c-link-faux {
  position: relative;
  display: inline-block;
  margin: 0;
  /* [1] */
  padding: 0;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  font: inherit;
  /* [3] */
  color: #4a4a4a;
  background-color: transparent;
  /* [4] */
  border: 0;
  /* [1] */
  cursor: pointer;
  /* [5] */
  /**
   * Link (Faux) `:focus`
   *
   * When a `<button>` needs to appear similar to a link for cosmetic reasons,
   * Link (Faux) should be used.
   *
   * To protect the Link (Faux) box-model, a pseudo-element with negative margins
   * is used to create the "button" focus appearance.
   */ }
  .c-link-faux:hover {
    text-decoration: underline;
    /* [6] */ }
  .c-link-faux:focus {
    outline: 0; }
    .c-link-faux:focus::before {
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      outline: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75);
      content: "";
      position: absolute;
      border-radius: 0.25em; }

/* Modifiers
   =========================================== */
/**
* For Link (Faux)s used in dark areas of UI.
*/
.c-link-faux--invert {
  color: #fff; }
  .c-link-faux--invert:focus::before {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 15px 3px rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   COMPONENTS / #PANEL
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Panel
 *
 * Panels are used to convey extra information and minimise screen space.
 *
 * 1. Break the panel outside of current container (typically `.o-container`).
 */
.c-panel {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 12px 12px -12px #9f9f9f, inset 0 -12px 12px -12px #9f9f9f;
  transition: 0.5s linear;
  transition-property: max-height, margin-bottom; }

.c-panel__content {
  padding-top: 60px;
  padding-bottom: 60px; }

/* Panel Navigation
  ---------------------------------- */
/**
 * Panel Back & Toggle - Shared Positioning
 *
 * 1. Position buttons at the top of the panel.
 */
.c-panel__back,
.c-panel__toggle {
  font-size: 18px;
  position: absolute;
  /* [1] */
  top: 20px;
  /* [1] */ }

/**
 * Panel Back
 *
 * Used for navigating backwards in a panel journey.
 *
 * This should be applied as a BEM Mix alongside `.c-link .c-link--back`.
 * e.g. `<button class="c-panel__back c-link c-link--back">Back</button>`
 *
 * 1. Position the button in top left of panel
 * 2. Provide spacing for cross icon
 */
.c-panel__back {
  left: 20px;
  /* [1] */
  padding-left: 0;
  /* [2] */ }

/**
 * Panel Toggle
 *
 * Used for closing the panel on completion of a journey.
 *
 * This should be applied as a BEM Mix alongside `c-link c-link--close`.
 * e.g. `<button class="c-panel__toggle c-link c-link--close">Close</button>`
 *
 * 1. Position the button in top right of panel
 * 2. Inherit the font colour for light and dark panels.
 */
.c-panel__toggle {
  right: 20px;
  /* [1] */
  color: inherit;
  /* [2] */
  /**
   * ⚠️ DEPRECATION WARNING
   * The following styles will be deprecated in sky-toolkit-ui@3.0.0, please use
   * `c-panel__toggle c-link c-link--close` instead.
   * To avoid clashing with the new approach (specifically, to avoid weird
   * behaviour in IE where `font-size` cascades and multiplies) we need to
   * wrap our previously-surfaced styles in a `:not` selector.
   */ }
  .c-panel__toggle:not(.c-link--close) {
    padding-right: 1.5em; }
    .c-panel__toggle:not(.c-link--close)::after {
      display: inline-block;
      margin-left: 5px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      content: "\2715";
      font-size: 1.5em; }

/* States
  =========================================== */
/**
 * When a panel's state is toggled open
 */
.c-panel.is-open {
  max-height: none;
  margin-bottom: 20px; }

/* Modifiers
   =========================================== */
/**
 * Dark-themed panels
 *
 * Note: For `.c-link--back` you will need to apply an additional class of
 *       `.c-link--invert` to achieve darker-themed styling.
 */
.c-panel--dark {
  background-color: #222;
  box-shadow: inset 0 12px 12px -12px #000, inset 0 -12px 12px -12px #000;
  color: #fff;
  /**
   * Utilise dark-themed focus-styles on pseudo-focus.
   */ }
  .c-panel--dark .c-panel__toggle:focus::before {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 15px 3px rgba(255, 255, 255, 0.75); }

/**
 * Constrain content to full viewport height when open
 */
.c-panel--constrain.is-open {
  max-height: 100vh; }

/*
   Set Order
   ==========================================================================
*/
/**
 * Flexbox powered reordering of content
 * Prefixeing for the following browser support:
 * -webkit-box-ordinal-group: $rank;   OLD - iOS 6-, Safari 3.1-6
 * -moz-box-ordinal-group: $rank;      OLD - Firefox 19-
 * -ms-flex-order: $rank;              TWEENER - IE 10
 * -webkit-order: $rank;               OLD - Chrome
 * order: $rank;                       MODERN
 */
.o-reorder {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-flow: row wrap;
  flex-wrap: wrap; }

.u-order-1 {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1; }

.u-order-2 {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2; }

.u-order-3 {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3; }

.u-order-4 {
  -webkit-box-ordinal-group: 4;
  -moz-box-ordinal-group: 4;
  -ms-flex-order: 4;
  -webkit-order: 4;
  order: 4; }

.u-order-5 {
  -webkit-box-ordinal-group: 5;
  -moz-box-ordinal-group: 5;
  -ms-flex-order: 5;
  -webkit-order: 5;
  order: 5; }

.u-order-6 {
  -webkit-box-ordinal-group: 6;
  -moz-box-ordinal-group: 6;
  -ms-flex-order: 6;
  -webkit-order: 6;
  order: 6; }

/*
   IE HACKS
   ========================================================================== */
/* stylelint-disable max-nesting-depth */
@media (max-width: 46.24em) {
  .ie9 .o-set-order .is-selected::before, .ie9 .o-set-order .is-selected::after {
    display: none; } }

/* stylelint-enable */
/* ==========================================================================
   COMPONENTS / #TYPOGRAPHY
   ========================================================================== */
/**
 * In order to divorce our semantic decisions from our stylistic ones, we only
 * define opinionated typographical styles against classes, NOT against
 * typographic HTML elements.
 *
 * https://csswizardry.com/2016/02/managing-typography-on-large-apps/
 *
 * Using the properties defined in toolkit-core/settings/typography,
 * the loop below will generate us a suite of mobile-first responsive
 * typographical component classes:
 *
 *   Heading-level Typography
 *   ---------------------------------
 *   .c-heading-alpha
 *   .c-heading-bravo
 *   .c-heading-charlie
 *   .c-heading-delta
 *
 *   Text-level Typography
 *   ---------------------------------
 *   .c-text-lead
 *   .c-text-body
 *   .c-text-smallprint
 */
.c-heading-alpha {
  font-size: 36px;
  font-size: 2rem;
  line-height: 1.16; }
  @media (min-width: 46.25em) {
    .c-heading-alpha {
      font-size: 50px;
      font-size: 2.77778rem;
      line-height: 1.12; } }

.c-heading-bravo {
  font-size: 29px;
  font-size: 1.61111rem;
  line-height: 1.2; }
  @media (min-width: 46.25em) {
    .c-heading-bravo {
      font-size: 40px;
      font-size: 2.22222rem;
      line-height: 1.15; } }

.c-heading-charlie {
  font-size: 25px;
  font-size: 1.38889rem;
  line-height: 1.24; }
  @media (min-width: 46.25em) {
    .c-heading-charlie {
      font-size: 34px;
      font-size: 1.88889rem;
      line-height: 1.18; } }

.c-heading-delta {
  font-size: 20px;
  font-size: 1.11111rem;
  line-height: 1.3; }
  @media (min-width: 46.25em) {
    .c-heading-delta {
      font-size: 28px;
      font-size: 1.55556rem;
      line-height: 1.21; } }

.c-text-lead {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44; }
  @media (min-width: 46.25em) {
    .c-text-lead {
      font-size: 22px;
      font-size: 1.22222rem;
      line-height: 1.36; } }

.c-text-body {
  font-size: 16px;
  font-size: 0.88889rem;
  line-height: 1.5; }
  @media (min-width: 46.25em) {
    .c-text-body {
      font-size: 18px;
      font-size: 1rem;
      line-height: 1.44; } }

.c-text-smallprint {
  font-size: 12px;
  font-size: 0.66667rem;
  line-height: 1.5; }
  @media (min-width: 46.25em) {
    .c-text-smallprint {
      font-size: 12px;
      font-size: 0.66667rem;
      line-height: 1.5; } }

.c-footer {
  font-size: 14px;
  font-size: 0.77778rem;
  line-height: 1.5; }
  @media (min-width: 46.25em) {
    .c-footer {
      font-size: 14px;
      font-size: 0.77778rem;
      line-height: 1.5; } }

/* ==========================================================================
   COMPONENTS / #BUTTONS
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Button
 *
 * 1. Allows styling of box model properties.
 * 2. Reset browser styles.
 * 3. Subtract border-width from the padding so buttons don't grow if the
 *    border-width is modified.
 * 4. Tidy alignment for when the button size needs to be modified.
 * 5. Remove anchor text-decoration (necessary when styling `a`s as buttons).
 * 6. Base transparent border for modifiers to alter.
 * 7. Force all button-styled elements to appear clickable.
 */
.c-btn {
  padding-top: 0;
  padding-bottom: 0;
  height: 2.22em;
  line-height: 2.22em;
  display: inline-block;
  /* [1] */
  margin: 0;
  /* [2] */
  padding-left: 19px;
  /* [3] */
  padding-right: 19px;
  /* [3] */
  vertical-align: middle;
  /* [4] */
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  /* [5] */
  border: 1px solid transparent;
  /* [6] */
  border-radius: 0.25em;
  transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
  /* [7] */
  /**
   * Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
   */ }
  .c-btn:hover, .c-btn:active, .c-btn:focus {
    text-decoration: none;
    /* [8] */
    outline: none; }
  .c-btn::-moz-focus-inner {
    border: 0;
    padding: 0; }

/**
 * Button Icon
 *
 * This enables an icon to be placed to the **left** of a button's text. The
 * icon's colour will be inherited from the component's `color` attribute unless
 * the icon has an explicit `fill` property set.
 *
 * Note: To avoid spacing issues, do *not* add an extra space character between
 *       your button text and image tag.
 *
 * 1. Offset icon from the text baseline to be centered within
      the component.
 * 2. Icons must always conform to a set width and height.
 * 3. Icon should inherit it's fill from the component's text colour.
 */
.c-btn__icon {
  position: relative;
  /* [1] */
  top: 10px;
  /* [1] */
  margin-right: 10px;
  width: 20px;
  /* [2] */
  height: 20px;
  /* [2] */
  line-height: inherit;
  /* [1] */
  vertical-align: top;
  /* [1] */
  fill: currentColor;
  /* [3] */ }

/**
 * Button Icon - Right
 *
 * This enables an icon to be placed to the **right** side of a button's text.
 */
.c-btn__icon--right {
  margin-left: 10px;
  margin-right: 0; }

/* Modifiers (Cosmetic)
   =========================================== */
/**
 * For buttons that identify as the primary action.
 */
.c-btn--primary {
  color: #fff;
  background-color: #0073c5;
  border-color: #0073c5; }
  .c-btn--primary:hover, .c-btn--primary:active {
    background-color: #73add8;
    border-color: #73add8; }
  .c-btn--primary:focus {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75); }

/**
 * For regular buttons or buttons that identify as a secondary actions.
 */
.c-btn--secondary {
  color: #0073c5;
  background-color: transparent;
  border-color: #0073c5; }
  .c-btn--secondary:hover, .c-btn--secondary:active {
    color: #fff;
    background-color: #73add8;
    border-color: #73add8; }
  .c-btn--secondary:focus {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75); }

/**
 * For regular buttons or buttons that identify as a secondary actions.
 * e.g. buttons on a dark panel
 */
.c-btn--secondary-invert {
  color: #fff;
  background-color: transparent;
  border-color: #fff; }
  .c-btn--secondary-invert:hover, .c-btn--secondary-invert:active {
    color: #4a4a4a;
    background-color: #fff;
    border-color: #fff; }
  .c-btn--secondary-invert:focus {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 15px 3px rgba(255, 255, 255, 0.75); }

/* States
   =========================================== */
/**
 * For buttons whose state is toggled.
 */
.c-btn.is-disabled, .c-btn.is-disabled:hover, .c-btn.is-disabled:active, .c-btn.is-disabled:focus {
  color: #fff;
  background-color: #c0c0c0;
  border-color: #c0c0c0;
  cursor: not-allowed; }

/**
 * For buttons whose state is toggled when a related form or field contains
 * an error or multiple errors.
 */
.c-btn.is-error, .c-btn.is-error:hover, .c-btn.is-error:active, .c-btn.is-error:focus,
.is-error .c-btn,
.is-error .c-btn:hover,
.is-error .c-btn:active,
.is-error .c-btn:focus {
  color: #fff;
  background-color: #ff2744;
  border-color: #ff2744;
  cursor: not-allowed; }

/**
 * For inputs used as a select action (`.c-select`).
 * This should be applied as a BEM Mix [A] alongside `.c-select__btn`.
 * e.g. `<span class="c-btn  c-btn--select  c-select__btn">Select</span>`
 *
 * A. https://en.bem.info/forum/4/
 *
 * 1. This should be the same value as the icon width used in _select.scss
 */
.c-btn--select {
  padding-left: 40px;
  /* [1] */
  padding-right: 40px;
  /* [1] */
  color: #0073c5;
  background-color: transparent;
  border: none;
  transition: all 0.25s ease; }

/* Modifiers (Sizing)
   =========================================== */
/**
 * For buttons that need to display full-width.
 */
.c-btn--full {
  display: block;
  width: 100%; }

/**
 * For buttons that need to display full-width on small devices only.
 */
@media (max-width: 46.24em) {
  .c-btn--full\@small {
    display: block;
    width: 100%; } }

.c-btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
  font-size: 30px; }

.c-btn.is-loading {
  cursor: not-allowed;
  position: relative; }

.c-btn-text--hide {
  visibility: hidden; }

/**
 * Title:
 *    Panels
 * Description:
 *    Polaris brand panels and extensions
 * Sections:
 *    $. Dependencies
 *    $. Extensions
 */
/* $. Dependencies

\* ---------------------------------------------------------------- */
/* $. Settings
\* ---------------------------------------------------------------- */
/* $. Extensions
\* ---------------------------------------------------------------- */
.u-prevent-animation,
.u-prevent-animation .c-panel__content {
  transition: none !important;
  animation: none !important; }

.c-panel.c-panel--animation-override {
  transition: none;
  transition: margin-bottom 0.5s ease;
  transform: translate3d(0, 0, 0);
  transform-origin: top;
  will-change: transform;
  animation-name: c-panel-shrink;
  animation-duration: 750ms;
  animation-timing-function: cubic-bezier(0.665, 0.425, 0.31, 0.965);
  animation-fill-mode: forwards; }

.c-panel.c-panel--animation-override.is-open {
  max-height: none;
  animation-name: c-panel-grow;
  animation-duration: 750ms;
  animation-timing-function: cubic-bezier(0.665, 0.425, 0.31, 0.965);
  animation-fill-mode: forwards; }

.c-panel__content {
  transform-origin: top;
  animation-name: c-panel-inner-zoom-out;
  animation-duration: 750ms;
  animation-timing-function: cubic-bezier(0.665, 0.425, 0.31, 0.965);
  animation-fill-mode: forwards; }

.is-open .c-panel__content {
  animation-name: c-panel-inner-zoom;
  animation-duration: 750ms;
  animation-timing-function: cubic-bezier(0.665, 0.425, 0.31, 0.965);
  animation-fill-mode: forwards; }

@keyframes c-panel-grow {
  0%, 1% {
    max-height: 0;
    transform: scale3d(1, 0, 0); }
  99% {
    transform: scale3d(1, 1, 1);
    max-height: 100vh; }
  100% {
    max-height: none; } }

@keyframes c-panel-shrink {
  0%, 1% {
    max-height: 100vh;
    transform: scale3d(1, 1, 1); }
  100% {
    max-height: 0;
    transform: scale3d(1, 0, 0); } }

@keyframes c-panel-inner-zoom {
  0%, 35% {
    opacity: 0;
    transform: scale3d(1, 1.6, 1); }
  50% {
    transform: scale3d(1, 1.1, 1);
    opacity: 0.5; }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1); } }

@keyframes c-panel-inner-zoom-out {
  0%, 1% {
    opacity: 1;
    transform: scale3d(1, 1, 1); }
  65% {
    transform: scale3d(1, 1.5, 1);
    opacity: 0; } }

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0.6; }
  to {
    opacity: 1; } }

.c-media--progressive {
  animation-name: fadeIn;
  animation-duration: 0.5s; }

.c-media-placeholder__image {
  width: 100%;
  height: 100%;
  opacity: 0.6;
  filter: blur(20px); }

.c-media-placeholder {
  display: inline-block;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  vertical-align: middle; }

.c-media-placeholder::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eaeaea; }

@supports (filter: blur(0)) {
  .c-media-placeholder::after {
    content: unset; } }

/* ==========================================================================
   Hero

   Core styling for shared Hero components. Do not directly modify these c
   ========================================================================== */
/* Shared component imports */
/* ==========================================================================
 * HERO / CHANNEL TX
 * Displays channel logo and caption text
 * ========================================================================== */
@media (min-width: 46.25em) {
  .c-hero-channel-tx {
    text-align: right; } }

.c-hero-channel-tx__logo-container {
  display: inline-block;
  max-width: 106px; }

@media (min-width: 46.25em) {
  .c-hero-channel-tx__logo-container {
    display: block;
    margin-left: auto;
    vertical-align: bottom; } }

.c-hero-channel-tx__logo {
  max-width: 100%;
  max-height: 20px; }

.c-hero-channel-tx__caption {
  font-size: 12px;
  font-size: 0.6666666667rem;
  line-height: 1.5;
  /* Branding/content requirement */ }

@media (max-width: 46.24em) {
  .c-hero-channel-tx--inline .c-hero-channel-tx__caption {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    text-indent: 5px; } }

@media (min-width: 26.25em) {
  .c-hero-channel-tx__caption {
    font-size: 14px;
    font-size: 0.7777777778rem; } }

.c-hero-channel-tx__caption strong {
  display: block; }

/* ==========================================================================
 * HERO / PICTURE MEDIA
 * Uses `<picture>` to support art direction in hero images.
 * ========================================================================== */
.c-hero-picture-media {
  position: relative;
  height: 100%;
  overflow: hidden; }

.c-hero-picture-media__image,
.c-hero-picture-media__source {
  width: 100%;
  height: 100%; }

.c-hero-picture-media--cover .c-hero-picture-media__image,
.c-hero-picture-media--cover .c-hero-picture-media__source {
  object-fit: cover;
  font-family: "object-fit: cover;"; }

@media (min-width: 46.25em) {
  .c-hero-picture-media--cover .c-hero-picture-media__image,
  .c-hero-picture-media--cover .c-hero-picture-media__source {
    object-position: center !important; } }

.c-hero-picture-media--contain .c-hero-picture-media__image,
.c-hero-picture-media--contain .c-hero-picture-media__source {
  object-fit: contain !important;
  object-position: center !important;
  font-family: "object-fit: contain; object-position: center"; }

/* ==========================================================================
 * HERO / VIDEO MEDIA
 * Uses `<video>` to support art direction in hero images.
 * ========================================================================== */
.c-hero-video-media {
  object-fit: cover;
  position: absolute; }

.c-hero-video-media--cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

/* ==========================================================================
 * ONE HERO
 * Core styling for One Hero variant.
 * ========================================================================== */
/* Component Settings
 * =========================================== */
/* Settings
  ============================================ */
.c-one-hero {
  color: #4a4a4a;
  position: relative; }

.c-one-hero.has-overlap {
  margin-bottom: 0; }

@media (min-width: 46.25em) {
  .c-one-hero.has-overlap {
    padding-bottom: 48px; } }

@media (max-width: 46.24em) {
  .c-one-hero--center {
    text-align: center; } }

.c-one-hero__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; }

.c-one-hero__wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
  z-index: 1; }

@media (min-width: 46.25em) {
  .c-one-hero__wrapper {
    justify-content: center;
    min-height: 660px;
    padding-right: 50%; } }

/*
 * Media
 * =========================================== */
@media (max-width: 46.24em) {
  .c-one-hero__media-block {
    min-height: 150px;
    height: 50vw;
    max-height: 40vh;
    position: relative;
    overflow: hidden; } }

@media (min-width: 46.25em) {
  .c-one-hero__media-block {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    top: 0; } }

@media (max-width: 46.24em) {
  .c-one-hero--text-only .c-one-hero__background, .c-one-hero--text-only .c-one-hero__media-block {
    display: none; } }

@media (min-width: 46.25em) {
  .c-one-hero__foreground {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; } }

.c-one-hero__channel-tx {
  bottom: 10px;
  left: 20px;
  position: absolute; }

@media (min-width: 46.25em) {
  .c-one-hero__channel-tx {
    bottom: 20px;
    left: auto;
    right: 20px; } }

@media (max-width: 46.24em) {
  .c-one-hero--center .c-one-hero__channel-tx {
    left: 50%;
    transform: translateX(-50%); } }

.c-one-hero__background {
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  top: 0; }

/*
 * Content
 * =========================================== */
.c-one-hero__content-block {
  padding: 0 20px; }

.c-one-hero__costing {
  margin-bottom: 20px; }

.c-one-hero__ctas {
  margin-bottom: 20px; }

.c-one-hero__body .c-hero-body__subheading,
.c-one-hero__body .c-hero-body__bodytext {
  max-width: 30em; }

@media (max-width: 46.24em) {
  .c-one-hero--center .c-one-hero__body .c-hero-body__subheading,
  .c-one-hero--center .c-one-hero__body .c-hero-body__bodytext {
    margin-left: auto;
    margin-right: auto; } }

.c-hero-body__heading {
  margin-top: 10px; }

@media (max-width: 46.24em) {
  .c-hero-body__heading,
  .c-hero-body__subheading {
    margin-bottom: 10px; } }

/*
 * Markdown restyling */
.c-hero-body__bodytext ul {
  font-size: 16px;
  list-style: none;
  margin-left: 0;
  margin-bottom: 10px; }

.c-hero-body__bodytext p {
  margin-bottom: 10px; }

.c-hero-body__bodytext li::before {
  content: "\2713";
  display: inline;
  margin-right: 5px; }

/*
 * Actions
 * =========================================== */
.c-one-hero__action-block {
  padding: 0 20px 20px;
  max-width: 30em;
  grid-gap: 5px 10px;
  display: grid;
  grid-template: "costing costing" auto "ctaPrimary ctaSecondary" auto "terms terms" auto/1fr 1fr; }

@media (max-width: 21.875em) {
  .c-one-hero__action-block {
    grid-template: "costing costing" auto "ctaPrimary ctaPrimary" auto "ctaSecondary ctaSecondary" auto "terms terms" auto/1fr 1fr; } }

.c-one-hero__action-block.has-single-cta {
  grid-template: "costing costing" auto "ctaPrimary ctaPrimary" auto "terms terms" auto/1fr 1fr; }

@media (max-width: 46.24em) {
  .c-one-hero--center .c-one-hero__action-block {
    margin-left: auto;
    margin-right: auto; } }

.c-one-hero__action-block .c-one-hero__costing {
  grid-area: costing; }

.c-one-hero__action-block .c-one-hero__cta .c-btn--one-hero-cta {
  display: block;
  width: 100%; }

.c-one-hero__action-block .c-one-hero__cta.c-hero-cta--primary {
  grid-area: ctaPrimary; }

.c-one-hero__action-block .c-one-hero__cta.c-hero-cta--secondary {
  grid-area: ctaSecondary; }

.c-one-hero__action-block.has-single-cta .c-btn--one-hero-cta {
  display: inline-block;
  width: auto; }

.c-one-hero__action-block .c-one-hero__terms-modal {
  grid-area: terms; }

@media (max-width: 46.24em) {
  .c-one-hero--center .c-costing__main {
    display: inline-block; }
  .c-one-hero--center .c-one-hero__costing,
  .c-one-hero--center .c-costing__disclaimer {
    text-align: center; } }

/* Vertical layouts
 * ==============================================
 *
 * Uses flex ordering to reposition our 3 blocks on mobile.
 *
 * Block Ordering
 *
 *                  | text-led | image-led | split | text-only |
 * content-block    | 1        | 2         | 1     | 1         |
 * action-block     | 2        | 3         | 3     | 2         |
 * media-block      | 3        | 1         | 2     | n/a       |
 */
/*
 * Image Led
 * =========================================== */
@media (max-width: 46.24em) {
  .c-one-hero--image-led .c-one-hero__media-block {
    order: 1; }
  .c-one-hero--image-led .c-one-hero__content-block {
    order: 2; }
  .c-one-hero--image-led .c-one-hero__action-block {
    order: 3; } }

/*
 * Split
 * =========================================== */
@media (max-width: 46.24em) {
  .c-one-hero--split .c-one-hero__content-block {
    order: 1; }
  .c-one-hero--split .c-one-hero__media-block {
    order: 2; }
  .c-one-hero--split .c-one-hero__action-block {
    order: 3; } }

/*
 * Text Only
 * =========================================== */
@media (max-width: 46.24em) {
  .c-one-hero--text-only .c-one-hero__content-block {
    order: 1; }
  .c-one-hero--text-only .c-one-hero__action-block {
    order: 2; }
  .c-one-hero--text-only .c-one-hero__media-block {
    display: none; } }

/*
 * Themes
 * =========================================== */
.c-one-hero.t-dark {
  color: #fff; }

.c-one-hero.t-dark .c-one-hero__wrapper {
  color: #fff; }

.c-one-hero.t-dark .c-one-hero__costing .c-costing__prefix {
  color: #eaeaea; }

/* Polyfill for object-fit-images
============================================ */
/* see https://github.com/bfred-it/object-fit-images */
/* stylelint-disable max-nesting-depth */
/* stylelint-enable */
.u-focal-point-0-0 {
  font-family: "object-fit: cover; object-position: 0% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-0 {
    font-family: none; } }

.u-focal-point-0-1 {
  font-family: "object-fit: cover; object-position: 0% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-1 {
    font-family: none; } }

.u-focal-point-0-2 {
  font-family: "object-fit: cover; object-position: 0% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-2 {
    font-family: none; } }

.u-focal-point-0-3 {
  font-family: "object-fit: cover; object-position: 0% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-3 {
    font-family: none; } }

.u-focal-point-0-4 {
  font-family: "object-fit: cover; object-position: 0% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-4 {
    font-family: none; } }

.u-focal-point-0-5 {
  font-family: "object-fit: cover; object-position: 0% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-5 {
    font-family: none; } }

.u-focal-point-0-6 {
  font-family: "object-fit: cover; object-position: 0% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-6 {
    font-family: none; } }

.u-focal-point-0-7 {
  font-family: "object-fit: cover; object-position: 0% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-7 {
    font-family: none; } }

.u-focal-point-0-8 {
  font-family: "object-fit: cover; object-position: 0% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-8 {
    font-family: none; } }

.u-focal-point-0-9 {
  font-family: "object-fit: cover; object-position: 0% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-9 {
    font-family: none; } }

.u-focal-point-0-10 {
  font-family: "object-fit: cover; object-position: 0% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-10 {
    font-family: none; } }

.u-focal-point-0-11 {
  font-family: "object-fit: cover; object-position: 0% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-11 {
    font-family: none; } }

.u-focal-point-0-12 {
  font-family: "object-fit: cover; object-position: 0% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-12 {
    font-family: none; } }

.u-focal-point-0-13 {
  font-family: "object-fit: cover; object-position: 0% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-13 {
    font-family: none; } }

.u-focal-point-0-14 {
  font-family: "object-fit: cover; object-position: 0% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-14 {
    font-family: none; } }

.u-focal-point-0-15 {
  font-family: "object-fit: cover; object-position: 0% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-15 {
    font-family: none; } }

.u-focal-point-0-16 {
  font-family: "object-fit: cover; object-position: 0% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-16 {
    font-family: none; } }

.u-focal-point-0-17 {
  font-family: "object-fit: cover; object-position: 0% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-17 {
    font-family: none; } }

.u-focal-point-0-18 {
  font-family: "object-fit: cover; object-position: 0% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-18 {
    font-family: none; } }

.u-focal-point-0-19 {
  font-family: "object-fit: cover; object-position: 0% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-19 {
    font-family: none; } }

.u-focal-point-0-20 {
  font-family: "object-fit: cover; object-position: 0% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-20 {
    font-family: none; } }

.u-focal-point-0-21 {
  font-family: "object-fit: cover; object-position: 0% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-21 {
    font-family: none; } }

.u-focal-point-0-22 {
  font-family: "object-fit: cover; object-position: 0% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-22 {
    font-family: none; } }

.u-focal-point-0-23 {
  font-family: "object-fit: cover; object-position: 0% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-23 {
    font-family: none; } }

.u-focal-point-0-24 {
  font-family: "object-fit: cover; object-position: 0% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-0-24 {
    font-family: none; } }

.u-focal-point-1-0 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-0 {
    font-family: none; } }

.u-focal-point-1-1 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-1 {
    font-family: none; } }

.u-focal-point-1-2 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-2 {
    font-family: none; } }

.u-focal-point-1-3 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-3 {
    font-family: none; } }

.u-focal-point-1-4 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-4 {
    font-family: none; } }

.u-focal-point-1-5 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-5 {
    font-family: none; } }

.u-focal-point-1-6 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-6 {
    font-family: none; } }

.u-focal-point-1-7 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-7 {
    font-family: none; } }

.u-focal-point-1-8 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-8 {
    font-family: none; } }

.u-focal-point-1-9 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-9 {
    font-family: none; } }

.u-focal-point-1-10 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-10 {
    font-family: none; } }

.u-focal-point-1-11 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-11 {
    font-family: none; } }

.u-focal-point-1-12 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-12 {
    font-family: none; } }

.u-focal-point-1-13 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-13 {
    font-family: none; } }

.u-focal-point-1-14 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-14 {
    font-family: none; } }

.u-focal-point-1-15 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-15 {
    font-family: none; } }

.u-focal-point-1-16 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-16 {
    font-family: none; } }

.u-focal-point-1-17 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-17 {
    font-family: none; } }

.u-focal-point-1-18 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-18 {
    font-family: none; } }

.u-focal-point-1-19 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-19 {
    font-family: none; } }

.u-focal-point-1-20 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-20 {
    font-family: none; } }

.u-focal-point-1-21 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-21 {
    font-family: none; } }

.u-focal-point-1-22 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-22 {
    font-family: none; } }

.u-focal-point-1-23 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-23 {
    font-family: none; } }

.u-focal-point-1-24 {
  font-family: "object-fit: cover; object-position: 4.1666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-1-24 {
    font-family: none; } }

.u-focal-point-2-0 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-0 {
    font-family: none; } }

.u-focal-point-2-1 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-1 {
    font-family: none; } }

.u-focal-point-2-2 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-2 {
    font-family: none; } }

.u-focal-point-2-3 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-3 {
    font-family: none; } }

.u-focal-point-2-4 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-4 {
    font-family: none; } }

.u-focal-point-2-5 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-5 {
    font-family: none; } }

.u-focal-point-2-6 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-6 {
    font-family: none; } }

.u-focal-point-2-7 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-7 {
    font-family: none; } }

.u-focal-point-2-8 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-8 {
    font-family: none; } }

.u-focal-point-2-9 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-9 {
    font-family: none; } }

.u-focal-point-2-10 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-10 {
    font-family: none; } }

.u-focal-point-2-11 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-11 {
    font-family: none; } }

.u-focal-point-2-12 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-12 {
    font-family: none; } }

.u-focal-point-2-13 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-13 {
    font-family: none; } }

.u-focal-point-2-14 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-14 {
    font-family: none; } }

.u-focal-point-2-15 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-15 {
    font-family: none; } }

.u-focal-point-2-16 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-16 {
    font-family: none; } }

.u-focal-point-2-17 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-17 {
    font-family: none; } }

.u-focal-point-2-18 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-18 {
    font-family: none; } }

.u-focal-point-2-19 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-19 {
    font-family: none; } }

.u-focal-point-2-20 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-20 {
    font-family: none; } }

.u-focal-point-2-21 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-21 {
    font-family: none; } }

.u-focal-point-2-22 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-22 {
    font-family: none; } }

.u-focal-point-2-23 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-23 {
    font-family: none; } }

.u-focal-point-2-24 {
  font-family: "object-fit: cover; object-position: 8.3333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-2-24 {
    font-family: none; } }

.u-focal-point-3-0 {
  font-family: "object-fit: cover; object-position: 12.5% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-0 {
    font-family: none; } }

.u-focal-point-3-1 {
  font-family: "object-fit: cover; object-position: 12.5% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-1 {
    font-family: none; } }

.u-focal-point-3-2 {
  font-family: "object-fit: cover; object-position: 12.5% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-2 {
    font-family: none; } }

.u-focal-point-3-3 {
  font-family: "object-fit: cover; object-position: 12.5% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-3 {
    font-family: none; } }

.u-focal-point-3-4 {
  font-family: "object-fit: cover; object-position: 12.5% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-4 {
    font-family: none; } }

.u-focal-point-3-5 {
  font-family: "object-fit: cover; object-position: 12.5% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-5 {
    font-family: none; } }

.u-focal-point-3-6 {
  font-family: "object-fit: cover; object-position: 12.5% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-6 {
    font-family: none; } }

.u-focal-point-3-7 {
  font-family: "object-fit: cover; object-position: 12.5% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-7 {
    font-family: none; } }

.u-focal-point-3-8 {
  font-family: "object-fit: cover; object-position: 12.5% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-8 {
    font-family: none; } }

.u-focal-point-3-9 {
  font-family: "object-fit: cover; object-position: 12.5% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-9 {
    font-family: none; } }

.u-focal-point-3-10 {
  font-family: "object-fit: cover; object-position: 12.5% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-10 {
    font-family: none; } }

.u-focal-point-3-11 {
  font-family: "object-fit: cover; object-position: 12.5% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-11 {
    font-family: none; } }

.u-focal-point-3-12 {
  font-family: "object-fit: cover; object-position: 12.5% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-12 {
    font-family: none; } }

.u-focal-point-3-13 {
  font-family: "object-fit: cover; object-position: 12.5% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-13 {
    font-family: none; } }

.u-focal-point-3-14 {
  font-family: "object-fit: cover; object-position: 12.5% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-14 {
    font-family: none; } }

.u-focal-point-3-15 {
  font-family: "object-fit: cover; object-position: 12.5% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-15 {
    font-family: none; } }

.u-focal-point-3-16 {
  font-family: "object-fit: cover; object-position: 12.5% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-16 {
    font-family: none; } }

.u-focal-point-3-17 {
  font-family: "object-fit: cover; object-position: 12.5% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-17 {
    font-family: none; } }

.u-focal-point-3-18 {
  font-family: "object-fit: cover; object-position: 12.5% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-18 {
    font-family: none; } }

.u-focal-point-3-19 {
  font-family: "object-fit: cover; object-position: 12.5% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-19 {
    font-family: none; } }

.u-focal-point-3-20 {
  font-family: "object-fit: cover; object-position: 12.5% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-20 {
    font-family: none; } }

.u-focal-point-3-21 {
  font-family: "object-fit: cover; object-position: 12.5% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-21 {
    font-family: none; } }

.u-focal-point-3-22 {
  font-family: "object-fit: cover; object-position: 12.5% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-22 {
    font-family: none; } }

.u-focal-point-3-23 {
  font-family: "object-fit: cover; object-position: 12.5% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-23 {
    font-family: none; } }

.u-focal-point-3-24 {
  font-family: "object-fit: cover; object-position: 12.5% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-3-24 {
    font-family: none; } }

.u-focal-point-4-0 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-0 {
    font-family: none; } }

.u-focal-point-4-1 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-1 {
    font-family: none; } }

.u-focal-point-4-2 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-2 {
    font-family: none; } }

.u-focal-point-4-3 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-3 {
    font-family: none; } }

.u-focal-point-4-4 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-4 {
    font-family: none; } }

.u-focal-point-4-5 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-5 {
    font-family: none; } }

.u-focal-point-4-6 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-6 {
    font-family: none; } }

.u-focal-point-4-7 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-7 {
    font-family: none; } }

.u-focal-point-4-8 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-8 {
    font-family: none; } }

.u-focal-point-4-9 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-9 {
    font-family: none; } }

.u-focal-point-4-10 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-10 {
    font-family: none; } }

.u-focal-point-4-11 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-11 {
    font-family: none; } }

.u-focal-point-4-12 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-12 {
    font-family: none; } }

.u-focal-point-4-13 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-13 {
    font-family: none; } }

.u-focal-point-4-14 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-14 {
    font-family: none; } }

.u-focal-point-4-15 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-15 {
    font-family: none; } }

.u-focal-point-4-16 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-16 {
    font-family: none; } }

.u-focal-point-4-17 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-17 {
    font-family: none; } }

.u-focal-point-4-18 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-18 {
    font-family: none; } }

.u-focal-point-4-19 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-19 {
    font-family: none; } }

.u-focal-point-4-20 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-20 {
    font-family: none; } }

.u-focal-point-4-21 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-21 {
    font-family: none; } }

.u-focal-point-4-22 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-22 {
    font-family: none; } }

.u-focal-point-4-23 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-23 {
    font-family: none; } }

.u-focal-point-4-24 {
  font-family: "object-fit: cover; object-position: 16.6666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-4-24 {
    font-family: none; } }

.u-focal-point-5-0 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-0 {
    font-family: none; } }

.u-focal-point-5-1 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-1 {
    font-family: none; } }

.u-focal-point-5-2 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-2 {
    font-family: none; } }

.u-focal-point-5-3 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-3 {
    font-family: none; } }

.u-focal-point-5-4 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-4 {
    font-family: none; } }

.u-focal-point-5-5 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-5 {
    font-family: none; } }

.u-focal-point-5-6 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-6 {
    font-family: none; } }

.u-focal-point-5-7 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-7 {
    font-family: none; } }

.u-focal-point-5-8 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-8 {
    font-family: none; } }

.u-focal-point-5-9 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-9 {
    font-family: none; } }

.u-focal-point-5-10 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-10 {
    font-family: none; } }

.u-focal-point-5-11 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-11 {
    font-family: none; } }

.u-focal-point-5-12 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-12 {
    font-family: none; } }

.u-focal-point-5-13 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-13 {
    font-family: none; } }

.u-focal-point-5-14 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-14 {
    font-family: none; } }

.u-focal-point-5-15 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-15 {
    font-family: none; } }

.u-focal-point-5-16 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-16 {
    font-family: none; } }

.u-focal-point-5-17 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-17 {
    font-family: none; } }

.u-focal-point-5-18 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-18 {
    font-family: none; } }

.u-focal-point-5-19 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-19 {
    font-family: none; } }

.u-focal-point-5-20 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-20 {
    font-family: none; } }

.u-focal-point-5-21 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-21 {
    font-family: none; } }

.u-focal-point-5-22 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-22 {
    font-family: none; } }

.u-focal-point-5-23 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-23 {
    font-family: none; } }

.u-focal-point-5-24 {
  font-family: "object-fit: cover; object-position: 20.8333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-5-24 {
    font-family: none; } }

.u-focal-point-6-0 {
  font-family: "object-fit: cover; object-position: 25% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-0 {
    font-family: none; } }

.u-focal-point-6-1 {
  font-family: "object-fit: cover; object-position: 25% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-1 {
    font-family: none; } }

.u-focal-point-6-2 {
  font-family: "object-fit: cover; object-position: 25% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-2 {
    font-family: none; } }

.u-focal-point-6-3 {
  font-family: "object-fit: cover; object-position: 25% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-3 {
    font-family: none; } }

.u-focal-point-6-4 {
  font-family: "object-fit: cover; object-position: 25% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-4 {
    font-family: none; } }

.u-focal-point-6-5 {
  font-family: "object-fit: cover; object-position: 25% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-5 {
    font-family: none; } }

.u-focal-point-6-6 {
  font-family: "object-fit: cover; object-position: 25% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-6 {
    font-family: none; } }

.u-focal-point-6-7 {
  font-family: "object-fit: cover; object-position: 25% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-7 {
    font-family: none; } }

.u-focal-point-6-8 {
  font-family: "object-fit: cover; object-position: 25% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-8 {
    font-family: none; } }

.u-focal-point-6-9 {
  font-family: "object-fit: cover; object-position: 25% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-9 {
    font-family: none; } }

.u-focal-point-6-10 {
  font-family: "object-fit: cover; object-position: 25% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-10 {
    font-family: none; } }

.u-focal-point-6-11 {
  font-family: "object-fit: cover; object-position: 25% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-11 {
    font-family: none; } }

.u-focal-point-6-12 {
  font-family: "object-fit: cover; object-position: 25% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-12 {
    font-family: none; } }

.u-focal-point-6-13 {
  font-family: "object-fit: cover; object-position: 25% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-13 {
    font-family: none; } }

.u-focal-point-6-14 {
  font-family: "object-fit: cover; object-position: 25% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-14 {
    font-family: none; } }

.u-focal-point-6-15 {
  font-family: "object-fit: cover; object-position: 25% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-15 {
    font-family: none; } }

.u-focal-point-6-16 {
  font-family: "object-fit: cover; object-position: 25% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-16 {
    font-family: none; } }

.u-focal-point-6-17 {
  font-family: "object-fit: cover; object-position: 25% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-17 {
    font-family: none; } }

.u-focal-point-6-18 {
  font-family: "object-fit: cover; object-position: 25% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-18 {
    font-family: none; } }

.u-focal-point-6-19 {
  font-family: "object-fit: cover; object-position: 25% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-19 {
    font-family: none; } }

.u-focal-point-6-20 {
  font-family: "object-fit: cover; object-position: 25% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-20 {
    font-family: none; } }

.u-focal-point-6-21 {
  font-family: "object-fit: cover; object-position: 25% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-21 {
    font-family: none; } }

.u-focal-point-6-22 {
  font-family: "object-fit: cover; object-position: 25% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-22 {
    font-family: none; } }

.u-focal-point-6-23 {
  font-family: "object-fit: cover; object-position: 25% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-23 {
    font-family: none; } }

.u-focal-point-6-24 {
  font-family: "object-fit: cover; object-position: 25% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-6-24 {
    font-family: none; } }

.u-focal-point-7-0 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-0 {
    font-family: none; } }

.u-focal-point-7-1 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-1 {
    font-family: none; } }

.u-focal-point-7-2 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-2 {
    font-family: none; } }

.u-focal-point-7-3 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-3 {
    font-family: none; } }

.u-focal-point-7-4 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-4 {
    font-family: none; } }

.u-focal-point-7-5 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-5 {
    font-family: none; } }

.u-focal-point-7-6 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-6 {
    font-family: none; } }

.u-focal-point-7-7 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-7 {
    font-family: none; } }

.u-focal-point-7-8 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-8 {
    font-family: none; } }

.u-focal-point-7-9 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-9 {
    font-family: none; } }

.u-focal-point-7-10 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-10 {
    font-family: none; } }

.u-focal-point-7-11 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-11 {
    font-family: none; } }

.u-focal-point-7-12 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-12 {
    font-family: none; } }

.u-focal-point-7-13 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-13 {
    font-family: none; } }

.u-focal-point-7-14 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-14 {
    font-family: none; } }

.u-focal-point-7-15 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-15 {
    font-family: none; } }

.u-focal-point-7-16 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-16 {
    font-family: none; } }

.u-focal-point-7-17 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-17 {
    font-family: none; } }

.u-focal-point-7-18 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-18 {
    font-family: none; } }

.u-focal-point-7-19 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-19 {
    font-family: none; } }

.u-focal-point-7-20 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-20 {
    font-family: none; } }

.u-focal-point-7-21 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-21 {
    font-family: none; } }

.u-focal-point-7-22 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-22 {
    font-family: none; } }

.u-focal-point-7-23 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-23 {
    font-family: none; } }

.u-focal-point-7-24 {
  font-family: "object-fit: cover; object-position: 29.1666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-7-24 {
    font-family: none; } }

.u-focal-point-8-0 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-0 {
    font-family: none; } }

.u-focal-point-8-1 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-1 {
    font-family: none; } }

.u-focal-point-8-2 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-2 {
    font-family: none; } }

.u-focal-point-8-3 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-3 {
    font-family: none; } }

.u-focal-point-8-4 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-4 {
    font-family: none; } }

.u-focal-point-8-5 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-5 {
    font-family: none; } }

.u-focal-point-8-6 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-6 {
    font-family: none; } }

.u-focal-point-8-7 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-7 {
    font-family: none; } }

.u-focal-point-8-8 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-8 {
    font-family: none; } }

.u-focal-point-8-9 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-9 {
    font-family: none; } }

.u-focal-point-8-10 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-10 {
    font-family: none; } }

.u-focal-point-8-11 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-11 {
    font-family: none; } }

.u-focal-point-8-12 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-12 {
    font-family: none; } }

.u-focal-point-8-13 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-13 {
    font-family: none; } }

.u-focal-point-8-14 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-14 {
    font-family: none; } }

.u-focal-point-8-15 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-15 {
    font-family: none; } }

.u-focal-point-8-16 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-16 {
    font-family: none; } }

.u-focal-point-8-17 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-17 {
    font-family: none; } }

.u-focal-point-8-18 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-18 {
    font-family: none; } }

.u-focal-point-8-19 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-19 {
    font-family: none; } }

.u-focal-point-8-20 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-20 {
    font-family: none; } }

.u-focal-point-8-21 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-21 {
    font-family: none; } }

.u-focal-point-8-22 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-22 {
    font-family: none; } }

.u-focal-point-8-23 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-23 {
    font-family: none; } }

.u-focal-point-8-24 {
  font-family: "object-fit: cover; object-position: 33.3333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-8-24 {
    font-family: none; } }

.u-focal-point-9-0 {
  font-family: "object-fit: cover; object-position: 37.5% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-0 {
    font-family: none; } }

.u-focal-point-9-1 {
  font-family: "object-fit: cover; object-position: 37.5% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-1 {
    font-family: none; } }

.u-focal-point-9-2 {
  font-family: "object-fit: cover; object-position: 37.5% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-2 {
    font-family: none; } }

.u-focal-point-9-3 {
  font-family: "object-fit: cover; object-position: 37.5% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-3 {
    font-family: none; } }

.u-focal-point-9-4 {
  font-family: "object-fit: cover; object-position: 37.5% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-4 {
    font-family: none; } }

.u-focal-point-9-5 {
  font-family: "object-fit: cover; object-position: 37.5% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-5 {
    font-family: none; } }

.u-focal-point-9-6 {
  font-family: "object-fit: cover; object-position: 37.5% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-6 {
    font-family: none; } }

.u-focal-point-9-7 {
  font-family: "object-fit: cover; object-position: 37.5% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-7 {
    font-family: none; } }

.u-focal-point-9-8 {
  font-family: "object-fit: cover; object-position: 37.5% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-8 {
    font-family: none; } }

.u-focal-point-9-9 {
  font-family: "object-fit: cover; object-position: 37.5% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-9 {
    font-family: none; } }

.u-focal-point-9-10 {
  font-family: "object-fit: cover; object-position: 37.5% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-10 {
    font-family: none; } }

.u-focal-point-9-11 {
  font-family: "object-fit: cover; object-position: 37.5% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-11 {
    font-family: none; } }

.u-focal-point-9-12 {
  font-family: "object-fit: cover; object-position: 37.5% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-12 {
    font-family: none; } }

.u-focal-point-9-13 {
  font-family: "object-fit: cover; object-position: 37.5% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-13 {
    font-family: none; } }

.u-focal-point-9-14 {
  font-family: "object-fit: cover; object-position: 37.5% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-14 {
    font-family: none; } }

.u-focal-point-9-15 {
  font-family: "object-fit: cover; object-position: 37.5% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-15 {
    font-family: none; } }

.u-focal-point-9-16 {
  font-family: "object-fit: cover; object-position: 37.5% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-16 {
    font-family: none; } }

.u-focal-point-9-17 {
  font-family: "object-fit: cover; object-position: 37.5% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-17 {
    font-family: none; } }

.u-focal-point-9-18 {
  font-family: "object-fit: cover; object-position: 37.5% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-18 {
    font-family: none; } }

.u-focal-point-9-19 {
  font-family: "object-fit: cover; object-position: 37.5% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-19 {
    font-family: none; } }

.u-focal-point-9-20 {
  font-family: "object-fit: cover; object-position: 37.5% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-20 {
    font-family: none; } }

.u-focal-point-9-21 {
  font-family: "object-fit: cover; object-position: 37.5% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-21 {
    font-family: none; } }

.u-focal-point-9-22 {
  font-family: "object-fit: cover; object-position: 37.5% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-22 {
    font-family: none; } }

.u-focal-point-9-23 {
  font-family: "object-fit: cover; object-position: 37.5% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-23 {
    font-family: none; } }

.u-focal-point-9-24 {
  font-family: "object-fit: cover; object-position: 37.5% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-9-24 {
    font-family: none; } }

.u-focal-point-10-0 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-0 {
    font-family: none; } }

.u-focal-point-10-1 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-1 {
    font-family: none; } }

.u-focal-point-10-2 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-2 {
    font-family: none; } }

.u-focal-point-10-3 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-3 {
    font-family: none; } }

.u-focal-point-10-4 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-4 {
    font-family: none; } }

.u-focal-point-10-5 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-5 {
    font-family: none; } }

.u-focal-point-10-6 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-6 {
    font-family: none; } }

.u-focal-point-10-7 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-7 {
    font-family: none; } }

.u-focal-point-10-8 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-8 {
    font-family: none; } }

.u-focal-point-10-9 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-9 {
    font-family: none; } }

.u-focal-point-10-10 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-10 {
    font-family: none; } }

.u-focal-point-10-11 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-11 {
    font-family: none; } }

.u-focal-point-10-12 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-12 {
    font-family: none; } }

.u-focal-point-10-13 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-13 {
    font-family: none; } }

.u-focal-point-10-14 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-14 {
    font-family: none; } }

.u-focal-point-10-15 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-15 {
    font-family: none; } }

.u-focal-point-10-16 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-16 {
    font-family: none; } }

.u-focal-point-10-17 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-17 {
    font-family: none; } }

.u-focal-point-10-18 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-18 {
    font-family: none; } }

.u-focal-point-10-19 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-19 {
    font-family: none; } }

.u-focal-point-10-20 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-20 {
    font-family: none; } }

.u-focal-point-10-21 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-21 {
    font-family: none; } }

.u-focal-point-10-22 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-22 {
    font-family: none; } }

.u-focal-point-10-23 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-23 {
    font-family: none; } }

.u-focal-point-10-24 {
  font-family: "object-fit: cover; object-position: 41.6666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-10-24 {
    font-family: none; } }

.u-focal-point-11-0 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-0 {
    font-family: none; } }

.u-focal-point-11-1 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-1 {
    font-family: none; } }

.u-focal-point-11-2 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-2 {
    font-family: none; } }

.u-focal-point-11-3 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-3 {
    font-family: none; } }

.u-focal-point-11-4 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-4 {
    font-family: none; } }

.u-focal-point-11-5 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-5 {
    font-family: none; } }

.u-focal-point-11-6 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-6 {
    font-family: none; } }

.u-focal-point-11-7 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-7 {
    font-family: none; } }

.u-focal-point-11-8 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-8 {
    font-family: none; } }

.u-focal-point-11-9 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-9 {
    font-family: none; } }

.u-focal-point-11-10 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-10 {
    font-family: none; } }

.u-focal-point-11-11 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-11 {
    font-family: none; } }

.u-focal-point-11-12 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-12 {
    font-family: none; } }

.u-focal-point-11-13 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-13 {
    font-family: none; } }

.u-focal-point-11-14 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-14 {
    font-family: none; } }

.u-focal-point-11-15 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-15 {
    font-family: none; } }

.u-focal-point-11-16 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-16 {
    font-family: none; } }

.u-focal-point-11-17 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-17 {
    font-family: none; } }

.u-focal-point-11-18 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-18 {
    font-family: none; } }

.u-focal-point-11-19 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-19 {
    font-family: none; } }

.u-focal-point-11-20 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-20 {
    font-family: none; } }

.u-focal-point-11-21 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-21 {
    font-family: none; } }

.u-focal-point-11-22 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-22 {
    font-family: none; } }

.u-focal-point-11-23 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-23 {
    font-family: none; } }

.u-focal-point-11-24 {
  font-family: "object-fit: cover; object-position: 45.8333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-11-24 {
    font-family: none; } }

.u-focal-point-12-0 {
  font-family: "object-fit: cover; object-position: 50% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-0 {
    font-family: none; } }

.u-focal-point-12-1 {
  font-family: "object-fit: cover; object-position: 50% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-1 {
    font-family: none; } }

.u-focal-point-12-2 {
  font-family: "object-fit: cover; object-position: 50% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-2 {
    font-family: none; } }

.u-focal-point-12-3 {
  font-family: "object-fit: cover; object-position: 50% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-3 {
    font-family: none; } }

.u-focal-point-12-4 {
  font-family: "object-fit: cover; object-position: 50% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-4 {
    font-family: none; } }

.u-focal-point-12-5 {
  font-family: "object-fit: cover; object-position: 50% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-5 {
    font-family: none; } }

.u-focal-point-12-6 {
  font-family: "object-fit: cover; object-position: 50% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-6 {
    font-family: none; } }

.u-focal-point-12-7 {
  font-family: "object-fit: cover; object-position: 50% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-7 {
    font-family: none; } }

.u-focal-point-12-8 {
  font-family: "object-fit: cover; object-position: 50% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-8 {
    font-family: none; } }

.u-focal-point-12-9 {
  font-family: "object-fit: cover; object-position: 50% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-9 {
    font-family: none; } }

.u-focal-point-12-10 {
  font-family: "object-fit: cover; object-position: 50% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-10 {
    font-family: none; } }

.u-focal-point-12-11 {
  font-family: "object-fit: cover; object-position: 50% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-11 {
    font-family: none; } }

.u-focal-point-12-12 {
  font-family: "object-fit: cover; object-position: 50% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-12 {
    font-family: none; } }

.u-focal-point-12-13 {
  font-family: "object-fit: cover; object-position: 50% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-13 {
    font-family: none; } }

.u-focal-point-12-14 {
  font-family: "object-fit: cover; object-position: 50% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-14 {
    font-family: none; } }

.u-focal-point-12-15 {
  font-family: "object-fit: cover; object-position: 50% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-15 {
    font-family: none; } }

.u-focal-point-12-16 {
  font-family: "object-fit: cover; object-position: 50% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-16 {
    font-family: none; } }

.u-focal-point-12-17 {
  font-family: "object-fit: cover; object-position: 50% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-17 {
    font-family: none; } }

.u-focal-point-12-18 {
  font-family: "object-fit: cover; object-position: 50% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-18 {
    font-family: none; } }

.u-focal-point-12-19 {
  font-family: "object-fit: cover; object-position: 50% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-19 {
    font-family: none; } }

.u-focal-point-12-20 {
  font-family: "object-fit: cover; object-position: 50% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-20 {
    font-family: none; } }

.u-focal-point-12-21 {
  font-family: "object-fit: cover; object-position: 50% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-21 {
    font-family: none; } }

.u-focal-point-12-22 {
  font-family: "object-fit: cover; object-position: 50% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-22 {
    font-family: none; } }

.u-focal-point-12-23 {
  font-family: "object-fit: cover; object-position: 50% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-23 {
    font-family: none; } }

.u-focal-point-12-24 {
  font-family: "object-fit: cover; object-position: 50% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-12-24 {
    font-family: none; } }

.u-focal-point-13-0 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-0 {
    font-family: none; } }

.u-focal-point-13-1 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-1 {
    font-family: none; } }

.u-focal-point-13-2 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-2 {
    font-family: none; } }

.u-focal-point-13-3 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-3 {
    font-family: none; } }

.u-focal-point-13-4 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-4 {
    font-family: none; } }

.u-focal-point-13-5 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-5 {
    font-family: none; } }

.u-focal-point-13-6 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-6 {
    font-family: none; } }

.u-focal-point-13-7 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-7 {
    font-family: none; } }

.u-focal-point-13-8 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-8 {
    font-family: none; } }

.u-focal-point-13-9 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-9 {
    font-family: none; } }

.u-focal-point-13-10 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-10 {
    font-family: none; } }

.u-focal-point-13-11 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-11 {
    font-family: none; } }

.u-focal-point-13-12 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-12 {
    font-family: none; } }

.u-focal-point-13-13 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-13 {
    font-family: none; } }

.u-focal-point-13-14 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-14 {
    font-family: none; } }

.u-focal-point-13-15 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-15 {
    font-family: none; } }

.u-focal-point-13-16 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-16 {
    font-family: none; } }

.u-focal-point-13-17 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-17 {
    font-family: none; } }

.u-focal-point-13-18 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-18 {
    font-family: none; } }

.u-focal-point-13-19 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-19 {
    font-family: none; } }

.u-focal-point-13-20 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-20 {
    font-family: none; } }

.u-focal-point-13-21 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-21 {
    font-family: none; } }

.u-focal-point-13-22 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-22 {
    font-family: none; } }

.u-focal-point-13-23 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-23 {
    font-family: none; } }

.u-focal-point-13-24 {
  font-family: "object-fit: cover; object-position: 54.1666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-13-24 {
    font-family: none; } }

.u-focal-point-14-0 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-0 {
    font-family: none; } }

.u-focal-point-14-1 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-1 {
    font-family: none; } }

.u-focal-point-14-2 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-2 {
    font-family: none; } }

.u-focal-point-14-3 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-3 {
    font-family: none; } }

.u-focal-point-14-4 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-4 {
    font-family: none; } }

.u-focal-point-14-5 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-5 {
    font-family: none; } }

.u-focal-point-14-6 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-6 {
    font-family: none; } }

.u-focal-point-14-7 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-7 {
    font-family: none; } }

.u-focal-point-14-8 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-8 {
    font-family: none; } }

.u-focal-point-14-9 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-9 {
    font-family: none; } }

.u-focal-point-14-10 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-10 {
    font-family: none; } }

.u-focal-point-14-11 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-11 {
    font-family: none; } }

.u-focal-point-14-12 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-12 {
    font-family: none; } }

.u-focal-point-14-13 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-13 {
    font-family: none; } }

.u-focal-point-14-14 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-14 {
    font-family: none; } }

.u-focal-point-14-15 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-15 {
    font-family: none; } }

.u-focal-point-14-16 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-16 {
    font-family: none; } }

.u-focal-point-14-17 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-17 {
    font-family: none; } }

.u-focal-point-14-18 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-18 {
    font-family: none; } }

.u-focal-point-14-19 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-19 {
    font-family: none; } }

.u-focal-point-14-20 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-20 {
    font-family: none; } }

.u-focal-point-14-21 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-21 {
    font-family: none; } }

.u-focal-point-14-22 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-22 {
    font-family: none; } }

.u-focal-point-14-23 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-23 {
    font-family: none; } }

.u-focal-point-14-24 {
  font-family: "object-fit: cover; object-position: 58.3333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-14-24 {
    font-family: none; } }

.u-focal-point-15-0 {
  font-family: "object-fit: cover; object-position: 62.5% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-0 {
    font-family: none; } }

.u-focal-point-15-1 {
  font-family: "object-fit: cover; object-position: 62.5% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-1 {
    font-family: none; } }

.u-focal-point-15-2 {
  font-family: "object-fit: cover; object-position: 62.5% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-2 {
    font-family: none; } }

.u-focal-point-15-3 {
  font-family: "object-fit: cover; object-position: 62.5% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-3 {
    font-family: none; } }

.u-focal-point-15-4 {
  font-family: "object-fit: cover; object-position: 62.5% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-4 {
    font-family: none; } }

.u-focal-point-15-5 {
  font-family: "object-fit: cover; object-position: 62.5% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-5 {
    font-family: none; } }

.u-focal-point-15-6 {
  font-family: "object-fit: cover; object-position: 62.5% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-6 {
    font-family: none; } }

.u-focal-point-15-7 {
  font-family: "object-fit: cover; object-position: 62.5% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-7 {
    font-family: none; } }

.u-focal-point-15-8 {
  font-family: "object-fit: cover; object-position: 62.5% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-8 {
    font-family: none; } }

.u-focal-point-15-9 {
  font-family: "object-fit: cover; object-position: 62.5% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-9 {
    font-family: none; } }

.u-focal-point-15-10 {
  font-family: "object-fit: cover; object-position: 62.5% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-10 {
    font-family: none; } }

.u-focal-point-15-11 {
  font-family: "object-fit: cover; object-position: 62.5% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-11 {
    font-family: none; } }

.u-focal-point-15-12 {
  font-family: "object-fit: cover; object-position: 62.5% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-12 {
    font-family: none; } }

.u-focal-point-15-13 {
  font-family: "object-fit: cover; object-position: 62.5% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-13 {
    font-family: none; } }

.u-focal-point-15-14 {
  font-family: "object-fit: cover; object-position: 62.5% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-14 {
    font-family: none; } }

.u-focal-point-15-15 {
  font-family: "object-fit: cover; object-position: 62.5% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-15 {
    font-family: none; } }

.u-focal-point-15-16 {
  font-family: "object-fit: cover; object-position: 62.5% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-16 {
    font-family: none; } }

.u-focal-point-15-17 {
  font-family: "object-fit: cover; object-position: 62.5% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-17 {
    font-family: none; } }

.u-focal-point-15-18 {
  font-family: "object-fit: cover; object-position: 62.5% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-18 {
    font-family: none; } }

.u-focal-point-15-19 {
  font-family: "object-fit: cover; object-position: 62.5% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-19 {
    font-family: none; } }

.u-focal-point-15-20 {
  font-family: "object-fit: cover; object-position: 62.5% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-20 {
    font-family: none; } }

.u-focal-point-15-21 {
  font-family: "object-fit: cover; object-position: 62.5% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-21 {
    font-family: none; } }

.u-focal-point-15-22 {
  font-family: "object-fit: cover; object-position: 62.5% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-22 {
    font-family: none; } }

.u-focal-point-15-23 {
  font-family: "object-fit: cover; object-position: 62.5% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-23 {
    font-family: none; } }

.u-focal-point-15-24 {
  font-family: "object-fit: cover; object-position: 62.5% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-15-24 {
    font-family: none; } }

.u-focal-point-16-0 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-0 {
    font-family: none; } }

.u-focal-point-16-1 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-1 {
    font-family: none; } }

.u-focal-point-16-2 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-2 {
    font-family: none; } }

.u-focal-point-16-3 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-3 {
    font-family: none; } }

.u-focal-point-16-4 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-4 {
    font-family: none; } }

.u-focal-point-16-5 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-5 {
    font-family: none; } }

.u-focal-point-16-6 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-6 {
    font-family: none; } }

.u-focal-point-16-7 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-7 {
    font-family: none; } }

.u-focal-point-16-8 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-8 {
    font-family: none; } }

.u-focal-point-16-9 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-9 {
    font-family: none; } }

.u-focal-point-16-10 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-10 {
    font-family: none; } }

.u-focal-point-16-11 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-11 {
    font-family: none; } }

.u-focal-point-16-12 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-12 {
    font-family: none; } }

.u-focal-point-16-13 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-13 {
    font-family: none; } }

.u-focal-point-16-14 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-14 {
    font-family: none; } }

.u-focal-point-16-15 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-15 {
    font-family: none; } }

.u-focal-point-16-16 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-16 {
    font-family: none; } }

.u-focal-point-16-17 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-17 {
    font-family: none; } }

.u-focal-point-16-18 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-18 {
    font-family: none; } }

.u-focal-point-16-19 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-19 {
    font-family: none; } }

.u-focal-point-16-20 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-20 {
    font-family: none; } }

.u-focal-point-16-21 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-21 {
    font-family: none; } }

.u-focal-point-16-22 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-22 {
    font-family: none; } }

.u-focal-point-16-23 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-23 {
    font-family: none; } }

.u-focal-point-16-24 {
  font-family: "object-fit: cover; object-position: 66.6666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-16-24 {
    font-family: none; } }

.u-focal-point-17-0 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-0 {
    font-family: none; } }

.u-focal-point-17-1 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-1 {
    font-family: none; } }

.u-focal-point-17-2 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-2 {
    font-family: none; } }

.u-focal-point-17-3 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-3 {
    font-family: none; } }

.u-focal-point-17-4 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-4 {
    font-family: none; } }

.u-focal-point-17-5 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-5 {
    font-family: none; } }

.u-focal-point-17-6 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-6 {
    font-family: none; } }

.u-focal-point-17-7 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-7 {
    font-family: none; } }

.u-focal-point-17-8 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-8 {
    font-family: none; } }

.u-focal-point-17-9 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-9 {
    font-family: none; } }

.u-focal-point-17-10 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-10 {
    font-family: none; } }

.u-focal-point-17-11 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-11 {
    font-family: none; } }

.u-focal-point-17-12 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-12 {
    font-family: none; } }

.u-focal-point-17-13 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-13 {
    font-family: none; } }

.u-focal-point-17-14 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-14 {
    font-family: none; } }

.u-focal-point-17-15 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-15 {
    font-family: none; } }

.u-focal-point-17-16 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-16 {
    font-family: none; } }

.u-focal-point-17-17 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-17 {
    font-family: none; } }

.u-focal-point-17-18 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-18 {
    font-family: none; } }

.u-focal-point-17-19 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-19 {
    font-family: none; } }

.u-focal-point-17-20 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-20 {
    font-family: none; } }

.u-focal-point-17-21 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-21 {
    font-family: none; } }

.u-focal-point-17-22 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-22 {
    font-family: none; } }

.u-focal-point-17-23 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-23 {
    font-family: none; } }

.u-focal-point-17-24 {
  font-family: "object-fit: cover; object-position: 70.8333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-17-24 {
    font-family: none; } }

.u-focal-point-18-0 {
  font-family: "object-fit: cover; object-position: 75% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-0 {
    font-family: none; } }

.u-focal-point-18-1 {
  font-family: "object-fit: cover; object-position: 75% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-1 {
    font-family: none; } }

.u-focal-point-18-2 {
  font-family: "object-fit: cover; object-position: 75% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-2 {
    font-family: none; } }

.u-focal-point-18-3 {
  font-family: "object-fit: cover; object-position: 75% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-3 {
    font-family: none; } }

.u-focal-point-18-4 {
  font-family: "object-fit: cover; object-position: 75% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-4 {
    font-family: none; } }

.u-focal-point-18-5 {
  font-family: "object-fit: cover; object-position: 75% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-5 {
    font-family: none; } }

.u-focal-point-18-6 {
  font-family: "object-fit: cover; object-position: 75% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-6 {
    font-family: none; } }

.u-focal-point-18-7 {
  font-family: "object-fit: cover; object-position: 75% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-7 {
    font-family: none; } }

.u-focal-point-18-8 {
  font-family: "object-fit: cover; object-position: 75% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-8 {
    font-family: none; } }

.u-focal-point-18-9 {
  font-family: "object-fit: cover; object-position: 75% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-9 {
    font-family: none; } }

.u-focal-point-18-10 {
  font-family: "object-fit: cover; object-position: 75% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-10 {
    font-family: none; } }

.u-focal-point-18-11 {
  font-family: "object-fit: cover; object-position: 75% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-11 {
    font-family: none; } }

.u-focal-point-18-12 {
  font-family: "object-fit: cover; object-position: 75% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-12 {
    font-family: none; } }

.u-focal-point-18-13 {
  font-family: "object-fit: cover; object-position: 75% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-13 {
    font-family: none; } }

.u-focal-point-18-14 {
  font-family: "object-fit: cover; object-position: 75% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-14 {
    font-family: none; } }

.u-focal-point-18-15 {
  font-family: "object-fit: cover; object-position: 75% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-15 {
    font-family: none; } }

.u-focal-point-18-16 {
  font-family: "object-fit: cover; object-position: 75% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-16 {
    font-family: none; } }

.u-focal-point-18-17 {
  font-family: "object-fit: cover; object-position: 75% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-17 {
    font-family: none; } }

.u-focal-point-18-18 {
  font-family: "object-fit: cover; object-position: 75% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-18 {
    font-family: none; } }

.u-focal-point-18-19 {
  font-family: "object-fit: cover; object-position: 75% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-19 {
    font-family: none; } }

.u-focal-point-18-20 {
  font-family: "object-fit: cover; object-position: 75% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-20 {
    font-family: none; } }

.u-focal-point-18-21 {
  font-family: "object-fit: cover; object-position: 75% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-21 {
    font-family: none; } }

.u-focal-point-18-22 {
  font-family: "object-fit: cover; object-position: 75% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-22 {
    font-family: none; } }

.u-focal-point-18-23 {
  font-family: "object-fit: cover; object-position: 75% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-23 {
    font-family: none; } }

.u-focal-point-18-24 {
  font-family: "object-fit: cover; object-position: 75% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-18-24 {
    font-family: none; } }

.u-focal-point-19-0 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-0 {
    font-family: none; } }

.u-focal-point-19-1 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-1 {
    font-family: none; } }

.u-focal-point-19-2 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-2 {
    font-family: none; } }

.u-focal-point-19-3 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-3 {
    font-family: none; } }

.u-focal-point-19-4 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-4 {
    font-family: none; } }

.u-focal-point-19-5 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-5 {
    font-family: none; } }

.u-focal-point-19-6 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-6 {
    font-family: none; } }

.u-focal-point-19-7 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-7 {
    font-family: none; } }

.u-focal-point-19-8 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-8 {
    font-family: none; } }

.u-focal-point-19-9 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-9 {
    font-family: none; } }

.u-focal-point-19-10 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-10 {
    font-family: none; } }

.u-focal-point-19-11 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-11 {
    font-family: none; } }

.u-focal-point-19-12 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-12 {
    font-family: none; } }

.u-focal-point-19-13 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-13 {
    font-family: none; } }

.u-focal-point-19-14 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-14 {
    font-family: none; } }

.u-focal-point-19-15 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-15 {
    font-family: none; } }

.u-focal-point-19-16 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-16 {
    font-family: none; } }

.u-focal-point-19-17 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-17 {
    font-family: none; } }

.u-focal-point-19-18 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-18 {
    font-family: none; } }

.u-focal-point-19-19 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-19 {
    font-family: none; } }

.u-focal-point-19-20 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-20 {
    font-family: none; } }

.u-focal-point-19-21 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-21 {
    font-family: none; } }

.u-focal-point-19-22 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-22 {
    font-family: none; } }

.u-focal-point-19-23 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-23 {
    font-family: none; } }

.u-focal-point-19-24 {
  font-family: "object-fit: cover; object-position: 79.1666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-19-24 {
    font-family: none; } }

.u-focal-point-20-0 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-0 {
    font-family: none; } }

.u-focal-point-20-1 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-1 {
    font-family: none; } }

.u-focal-point-20-2 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-2 {
    font-family: none; } }

.u-focal-point-20-3 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-3 {
    font-family: none; } }

.u-focal-point-20-4 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-4 {
    font-family: none; } }

.u-focal-point-20-5 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-5 {
    font-family: none; } }

.u-focal-point-20-6 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-6 {
    font-family: none; } }

.u-focal-point-20-7 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-7 {
    font-family: none; } }

.u-focal-point-20-8 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-8 {
    font-family: none; } }

.u-focal-point-20-9 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-9 {
    font-family: none; } }

.u-focal-point-20-10 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-10 {
    font-family: none; } }

.u-focal-point-20-11 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-11 {
    font-family: none; } }

.u-focal-point-20-12 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-12 {
    font-family: none; } }

.u-focal-point-20-13 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-13 {
    font-family: none; } }

.u-focal-point-20-14 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-14 {
    font-family: none; } }

.u-focal-point-20-15 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-15 {
    font-family: none; } }

.u-focal-point-20-16 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-16 {
    font-family: none; } }

.u-focal-point-20-17 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-17 {
    font-family: none; } }

.u-focal-point-20-18 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-18 {
    font-family: none; } }

.u-focal-point-20-19 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-19 {
    font-family: none; } }

.u-focal-point-20-20 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-20 {
    font-family: none; } }

.u-focal-point-20-21 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-21 {
    font-family: none; } }

.u-focal-point-20-22 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-22 {
    font-family: none; } }

.u-focal-point-20-23 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-23 {
    font-family: none; } }

.u-focal-point-20-24 {
  font-family: "object-fit: cover; object-position: 83.3333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-20-24 {
    font-family: none; } }

.u-focal-point-21-0 {
  font-family: "object-fit: cover; object-position: 87.5% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-0 {
    font-family: none; } }

.u-focal-point-21-1 {
  font-family: "object-fit: cover; object-position: 87.5% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-1 {
    font-family: none; } }

.u-focal-point-21-2 {
  font-family: "object-fit: cover; object-position: 87.5% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-2 {
    font-family: none; } }

.u-focal-point-21-3 {
  font-family: "object-fit: cover; object-position: 87.5% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-3 {
    font-family: none; } }

.u-focal-point-21-4 {
  font-family: "object-fit: cover; object-position: 87.5% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-4 {
    font-family: none; } }

.u-focal-point-21-5 {
  font-family: "object-fit: cover; object-position: 87.5% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-5 {
    font-family: none; } }

.u-focal-point-21-6 {
  font-family: "object-fit: cover; object-position: 87.5% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-6 {
    font-family: none; } }

.u-focal-point-21-7 {
  font-family: "object-fit: cover; object-position: 87.5% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-7 {
    font-family: none; } }

.u-focal-point-21-8 {
  font-family: "object-fit: cover; object-position: 87.5% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-8 {
    font-family: none; } }

.u-focal-point-21-9 {
  font-family: "object-fit: cover; object-position: 87.5% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-9 {
    font-family: none; } }

.u-focal-point-21-10 {
  font-family: "object-fit: cover; object-position: 87.5% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-10 {
    font-family: none; } }

.u-focal-point-21-11 {
  font-family: "object-fit: cover; object-position: 87.5% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-11 {
    font-family: none; } }

.u-focal-point-21-12 {
  font-family: "object-fit: cover; object-position: 87.5% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-12 {
    font-family: none; } }

.u-focal-point-21-13 {
  font-family: "object-fit: cover; object-position: 87.5% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-13 {
    font-family: none; } }

.u-focal-point-21-14 {
  font-family: "object-fit: cover; object-position: 87.5% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-14 {
    font-family: none; } }

.u-focal-point-21-15 {
  font-family: "object-fit: cover; object-position: 87.5% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-15 {
    font-family: none; } }

.u-focal-point-21-16 {
  font-family: "object-fit: cover; object-position: 87.5% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-16 {
    font-family: none; } }

.u-focal-point-21-17 {
  font-family: "object-fit: cover; object-position: 87.5% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-17 {
    font-family: none; } }

.u-focal-point-21-18 {
  font-family: "object-fit: cover; object-position: 87.5% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-18 {
    font-family: none; } }

.u-focal-point-21-19 {
  font-family: "object-fit: cover; object-position: 87.5% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-19 {
    font-family: none; } }

.u-focal-point-21-20 {
  font-family: "object-fit: cover; object-position: 87.5% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-20 {
    font-family: none; } }

.u-focal-point-21-21 {
  font-family: "object-fit: cover; object-position: 87.5% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-21 {
    font-family: none; } }

.u-focal-point-21-22 {
  font-family: "object-fit: cover; object-position: 87.5% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-22 {
    font-family: none; } }

.u-focal-point-21-23 {
  font-family: "object-fit: cover; object-position: 87.5% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-23 {
    font-family: none; } }

.u-focal-point-21-24 {
  font-family: "object-fit: cover; object-position: 87.5% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-21-24 {
    font-family: none; } }

.u-focal-point-22-0 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-0 {
    font-family: none; } }

.u-focal-point-22-1 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-1 {
    font-family: none; } }

.u-focal-point-22-2 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-2 {
    font-family: none; } }

.u-focal-point-22-3 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-3 {
    font-family: none; } }

.u-focal-point-22-4 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-4 {
    font-family: none; } }

.u-focal-point-22-5 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-5 {
    font-family: none; } }

.u-focal-point-22-6 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-6 {
    font-family: none; } }

.u-focal-point-22-7 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-7 {
    font-family: none; } }

.u-focal-point-22-8 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-8 {
    font-family: none; } }

.u-focal-point-22-9 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-9 {
    font-family: none; } }

.u-focal-point-22-10 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-10 {
    font-family: none; } }

.u-focal-point-22-11 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-11 {
    font-family: none; } }

.u-focal-point-22-12 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-12 {
    font-family: none; } }

.u-focal-point-22-13 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-13 {
    font-family: none; } }

.u-focal-point-22-14 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-14 {
    font-family: none; } }

.u-focal-point-22-15 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-15 {
    font-family: none; } }

.u-focal-point-22-16 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-16 {
    font-family: none; } }

.u-focal-point-22-17 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-17 {
    font-family: none; } }

.u-focal-point-22-18 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-18 {
    font-family: none; } }

.u-focal-point-22-19 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-19 {
    font-family: none; } }

.u-focal-point-22-20 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-20 {
    font-family: none; } }

.u-focal-point-22-21 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-21 {
    font-family: none; } }

.u-focal-point-22-22 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-22 {
    font-family: none; } }

.u-focal-point-22-23 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-23 {
    font-family: none; } }

.u-focal-point-22-24 {
  font-family: "object-fit: cover; object-position: 91.6666666667% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-22-24 {
    font-family: none; } }

.u-focal-point-23-0 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-0 {
    font-family: none; } }

.u-focal-point-23-1 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-1 {
    font-family: none; } }

.u-focal-point-23-2 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-2 {
    font-family: none; } }

.u-focal-point-23-3 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-3 {
    font-family: none; } }

.u-focal-point-23-4 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-4 {
    font-family: none; } }

.u-focal-point-23-5 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-5 {
    font-family: none; } }

.u-focal-point-23-6 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-6 {
    font-family: none; } }

.u-focal-point-23-7 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-7 {
    font-family: none; } }

.u-focal-point-23-8 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-8 {
    font-family: none; } }

.u-focal-point-23-9 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-9 {
    font-family: none; } }

.u-focal-point-23-10 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-10 {
    font-family: none; } }

.u-focal-point-23-11 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-11 {
    font-family: none; } }

.u-focal-point-23-12 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-12 {
    font-family: none; } }

.u-focal-point-23-13 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-13 {
    font-family: none; } }

.u-focal-point-23-14 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-14 {
    font-family: none; } }

.u-focal-point-23-15 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-15 {
    font-family: none; } }

.u-focal-point-23-16 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-16 {
    font-family: none; } }

.u-focal-point-23-17 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-17 {
    font-family: none; } }

.u-focal-point-23-18 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-18 {
    font-family: none; } }

.u-focal-point-23-19 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-19 {
    font-family: none; } }

.u-focal-point-23-20 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-20 {
    font-family: none; } }

.u-focal-point-23-21 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-21 {
    font-family: none; } }

.u-focal-point-23-22 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-22 {
    font-family: none; } }

.u-focal-point-23-23 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-23 {
    font-family: none; } }

.u-focal-point-23-24 {
  font-family: "object-fit: cover; object-position: 95.8333333333% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-23-24 {
    font-family: none; } }

.u-focal-point-24-0 {
  font-family: "object-fit: cover; object-position: 100% 0%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-0 {
    font-family: none; } }

.u-focal-point-24-1 {
  font-family: "object-fit: cover; object-position: 100% 4.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-1 {
    font-family: none; } }

.u-focal-point-24-2 {
  font-family: "object-fit: cover; object-position: 100% 8.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-2 {
    font-family: none; } }

.u-focal-point-24-3 {
  font-family: "object-fit: cover; object-position: 100% 12.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-3 {
    font-family: none; } }

.u-focal-point-24-4 {
  font-family: "object-fit: cover; object-position: 100% 16.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-4 {
    font-family: none; } }

.u-focal-point-24-5 {
  font-family: "object-fit: cover; object-position: 100% 20.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-5 {
    font-family: none; } }

.u-focal-point-24-6 {
  font-family: "object-fit: cover; object-position: 100% 25%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-6 {
    font-family: none; } }

.u-focal-point-24-7 {
  font-family: "object-fit: cover; object-position: 100% 29.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-7 {
    font-family: none; } }

.u-focal-point-24-8 {
  font-family: "object-fit: cover; object-position: 100% 33.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-8 {
    font-family: none; } }

.u-focal-point-24-9 {
  font-family: "object-fit: cover; object-position: 100% 37.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-9 {
    font-family: none; } }

.u-focal-point-24-10 {
  font-family: "object-fit: cover; object-position: 100% 41.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-10 {
    font-family: none; } }

.u-focal-point-24-11 {
  font-family: "object-fit: cover; object-position: 100% 45.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-11 {
    font-family: none; } }

.u-focal-point-24-12 {
  font-family: "object-fit: cover; object-position: 100% 50%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-12 {
    font-family: none; } }

.u-focal-point-24-13 {
  font-family: "object-fit: cover; object-position: 100% 54.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-13 {
    font-family: none; } }

.u-focal-point-24-14 {
  font-family: "object-fit: cover; object-position: 100% 58.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-14 {
    font-family: none; } }

.u-focal-point-24-15 {
  font-family: "object-fit: cover; object-position: 100% 62.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-15 {
    font-family: none; } }

.u-focal-point-24-16 {
  font-family: "object-fit: cover; object-position: 100% 66.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-16 {
    font-family: none; } }

.u-focal-point-24-17 {
  font-family: "object-fit: cover; object-position: 100% 70.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-17 {
    font-family: none; } }

.u-focal-point-24-18 {
  font-family: "object-fit: cover; object-position: 100% 75%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-18 {
    font-family: none; } }

.u-focal-point-24-19 {
  font-family: "object-fit: cover; object-position: 100% 79.1666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-19 {
    font-family: none; } }

.u-focal-point-24-20 {
  font-family: "object-fit: cover; object-position: 100% 83.3333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-20 {
    font-family: none; } }

.u-focal-point-24-21 {
  font-family: "object-fit: cover; object-position: 100% 87.5%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-21 {
    font-family: none; } }

.u-focal-point-24-22 {
  font-family: "object-fit: cover; object-position: 100% 91.6666666667%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-22 {
    font-family: none; } }

.u-focal-point-24-23 {
  font-family: "object-fit: cover; object-position: 100% 95.8333333333%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-23 {
    font-family: none; } }

.u-focal-point-24-24 {
  font-family: "object-fit: cover; object-position: 100% 100%"; }

@supports (object-fit: cover) {
  .u-focal-point-24-24 {
    font-family: none; } }

/* ==========================================================================
   OBJECTS / #LIST-BLOCK
   ========================================================================== */
/**
 * Masthead modifier of `o-list-block`.
 * Adds a consistent vertical rhythm to each list item (except the last).
 */
.mast-o-list-block > .o-list-block__item {
  margin-bottom: 20px; }
  .mast-o-list-block > .o-list-block__item:last-child {
    margin-bottom: 0; }

/* ==========================================================================
   COMPONENTS / #TILE
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Tile
 *
 * The base Tile component; providing the glass border and shadow.
 *
 * 1. Forces tile markers to sit above corresponding panels
 */
.c-tile {
  position: relative;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
  padding: 5px;
  margin-bottom: 20px;
  will-change: transform;
  z-index: 10;
  /* [1] */
  height: auto; }

/* Structure and Text
  ---------------------------------- */
/**
 * Tile Content
 *
 * The inner container of the tile provides the background gradient and extra
 * positioning for square tiles
 *
 * 1. Defensively clip overflowing text that can't be handled because of absolute
 *    positioning
 */
.c-tile__content {
  position: relative;
  overflow: hidden;
  /* [1] */ }

.c-tile__content > :last-child {
  margin-bottom: 0; }

/**
 * Tile Body & Caption - Shared Background structure
 *
 * All Tiles utilise a `.c-tile__body` to wrap the main content area.
 * Split Template Tiles utilise `.c-tile__body .c-tile__caption`.
 *
 * This allows us to use Pseudo Elements to build the Tile gradient background,
 * allowing for easy z-indexing and avoiding issues with nested content.
 */
.c-tile__body,
.c-tile__caption {
  /**
   * Tile Body & Caption - Default/Active Backgrounds
   *
   * Set up shared pseudo element styling
   */
  /**
   * Tile Body & Caption - Default Background
   *
   * Sets the default visible background for Tiles.
   * Sits below the body/caption to avoid hiding content.
   */
  /**
   * Tile Body & Caption - Active Background
   *
   * Hidden by default and triggered on `.c-tile__link` hover.
   * Sits between `::before` and body/caption.
   */ }

.c-tile__body::before, .c-tile__body::after,
.c-tile__caption::before,
.c-tile__caption::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  position: absolute;
  will-change: transform; }

.c-tile__body::before,
.c-tile__caption::before {
  z-index: -2; }

.c-tile__body::after,
.c-tile__caption::after {
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1; }

/**
 * Tile Body
 *
 * The body container for the tile; This should be applied to any content
 * which doesn't sit flush to the edge of the tile.
 */
.c-tile__body {
  height: 100%;
  padding: 10px;
  position: relative;
  width: 100%; }

.c-tile__body::before {
  background-color: #fff; }

.c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #e6e6ea;
  background-image: -webkit-linear-gradient(top, #fff 50%, #e6e6ea 100%);
  background-image: -moz-linear-gradient(top, #fff 50%, #e6e6ea 100%);
  background-image: -o-linear-gradient(top, #fff 50%, #e6e6ea 100%);
  background-image: linear-gradient(to bottom, #fff 50%, #e6e6ea 100%); }

.c-tile__body > :last-child {
  margin-bottom: 0; }

/**
 * Tile Caption
 *
 * Captions are needed for media tiles; they add a new background gradient and
 * take up the lower 50% of the tile.
 */
.c-tile__caption {
  position: absolute;
  bottom: 0;
  height: 45%;
  z-index: 20;
  text-align: left; }

.c-tile__caption::before {
  /*! autoprefixer: off */
  background-color: #fff;
  background-image: -webkit-linear-gradient(top, #f2f2f5 0%, #fff 100%);
  background-image: -moz-linear-gradient(top, #f2f2f5 0%, #fff 100%);
  background-image: -o-linear-gradient(top, #f2f2f5 0%, #fff 100%);
  background-image: linear-gradient(to bottom, #f2f2f5 0%, #fff 100%); }

.c-tile__caption::after {
  /*! autoprefixer: off */
  background-color: #fff;
  background-image: -webkit-linear-gradient(top, #cdccd4 0%, #fff 100%);
  background-image: -moz-linear-gradient(top, #cdccd4 0%, #fff 100%);
  background-image: -o-linear-gradient(top, #cdccd4 0%, #fff 100%);
  background-image: linear-gradient(to bottom, #cdccd4 0%, #fff 100%); }

/**
 * Tile Overlay
 *
 * Overlays are needed for full tiles, overlapping the tile content to take up
 * the lower side of the tile.
 */
.c-tile__overlay {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 1em;
  right: 1em;
  height: 20%;
  z-index: 20; }

.c-tile__overlay--large {
  height: 25%; }

/**
 * Tile Title
 *
 * Normal heading classes e.g. `c-heading-alpha` are more useful in flexible
 * tiles, but square tiles need more specific and scalable headings in order to
 * prevent overflow.
 */
.c-tile__title {
  position: relative;
  font-size: 28px;
  line-height: 1.3; }

@media (min-width: 46.25em) and (max-width: 61.24em) {
  .c-tile__title {
    font-size: 2.8vw; } }

/* Media
  ---------------------------------- */
/**
 * Tile Media
 *
 * Container for tile media which takes the top 55% of the tile when used.
 * This usually (but not always) contains a .c-tile-poster.
 *
 * Media and caption pairs should only be used in conjunction with the
 * `c-tile--square` modifier
 */
.c-tile__media {
  position: relative;
  overflow: hidden;
  display: block;
  height: 55.5%; }

/**
 * Tile Poster
 *
 * A poster is a full bleed image which scales when the linked tile is hovered.
 *
 * 1. Prevent IE9 adding height attributes for asynchronously rendered images.
 */
.c-tile__poster {
  height: auto;
  /* [1] */
  transition: transform 1s ease;
  will-change: transform; }

/**
 * Tile Channel
 *
 * A channel logo that sits above the bottom-left of the poster, unaffected by
 * the scale animation.
 */
.c-tile__channel {
  bottom: 10px;
  height: 20px;
  left: 10px;
  width: auto;
  position: absolute;
  z-index: 10; }

/**
 * Tile Sponsor
 *
 * A dedicated area to display the sponsor brand of a show or channel.
 * It should sit adjacent to the `c-tile__link`, linking off to a separate page.
 *
 * Note: Don't remove the brand name and rely on the image within the
 *       "Sponsored by ×" text.
 *       Use `<span class="u-hide-visually">×</span>` to hide the brand name.
 */
.c-tile__sponsor {
  font-size: 12px;
  color: inherit;
  bottom: 10px;
  height: 20px;
  left: 10px;
  right: 10px;
  width: auto;
  position: absolute;
  z-index: 20;
  outline: none; }

/**
 * Tile Sponsor Image
 *
 * Icon/Logo of the sponsor brand, used purely for decoration.
 * Should be applied directly to the `<img>` within `.o-flag__img`.
 */
.c-tile__sponsor-img {
  height: 20px; }

/* Interaction
  ---------------------------------- */
/**
 * Tile Link
 *
 * Tiles can have links, just wrap the `.c-tile__content` with a
 * `a.c-tile__link` or `button.c-tile__link` node.
 *
 * Outline is set to "none" to utilise the `.has-focus` state on `c-tile`.
 *
 * 1. Reset `.c-tile__link` styling on <button> elements allowing more
 *    semantic usage.
 */
.c-tile__link {
  display: block;
  width: 100%;
  /* [1] */
  color: inherit;
  background-color: transparent;
  /* [1] */
  border: 0;
  /* [1] */
  outline: none;
  transition: color 0.5s ease, box-shadow 0.25s ease;
  position: relative;
  height: 100%;
  cursor: pointer;
  /**
   * Tile Link - Drop Shadow
   *
   * A pseudo-element is used to contain the hover box-shadow transition, set to
   * be invisible by default.
   * The `opacity` is then animated for smooth performance [1].
   *
   * 1. http://tobiasahlin.com/blog/how-to-animate-box-shadow/
   */
  /**
   * All default hover interaction for the Tile is handled via `.c-tile__link`.
   */
  /**
   * Apply `:hover` / `:focus` text underline only to the Tile's Title.
   */ }

.c-tile__link::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  content: "";
  position: absolute;
  box-shadow: 0 15px 20px -8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform-origin: bottom;
  transition: opacity 0.5s ease;
  will-change: transform; }

.c-tile__link:hover {
  /**
   * Show the Tile Link's Drop Shadow
   */
  /**
   * Show the active Body / Caption gradient
   */
  /**
   * Scale the Tile's Poster
   */ }

.c-tile__link:hover::before {
  opacity: 1; }

.c-tile__link:hover .c-tile__body::after,
.c-tile__link:hover .c-tile__caption::after {
  opacity: 1; }

.c-tile__link:hover .c-tile__poster {
  /*! autoprefixer: off */
  -ms-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05); }

.c-tile__link:hover, .c-tile__link:focus {
  text-decoration: none; }

.c-tile__link:hover .c-tile__title, .c-tile__link:focus .c-tile__title {
  text-decoration: underline; }

/**
 * Tile Shine
 *
 * Tile shine to be applied to a .c-shine component to give the correct
 * positioning when used on a Tile.
 *
 * The shine hover effect can then be applied by using `.c-shine-context`
 * alongside `.c-tile__link`.
 *
 * 1. As `.c-tile__link` sits inside a relative `.c-tile__content` by default,
 *    we have to ensure *both* top and bottom Tile paddings are counted.
 */
.c-tile__shine {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 30; }

.c-tile__shine--top {
  top: -25px;
  /* [1] */ }

.c-tile__shine--bottom {
  bottom: -25px;
  /* [1] */ }

/* States
  =========================================== */
/**
 * Keyboard Focus
 *
 * Should be applied to `.c-tile` on keyboard focus for Accessibility.
 */
.c-tile.has-focus {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75); }

/**
 * Selected
 *
 * Should be applied to `.c-tile` when used to trigger the opening of a
 * corresponding `.c-panel`.
 */
.c-tile.is-selected {
  /**
   * Arrow markers to signify panel relationship.
   *
   * 1. Positions the marker between element and panel
   * 2. Need to take off an extra pixel here to allow for browser rendering/
   *    rounding quirks.
   * 3. Rotate 45deg to allow it to mask the panel gradient and look like a
   *    notch in the panel (webkit placed after to prevent render quirk)
   * 4. Box-shadow that matches the panel background color to smooth the
   *    shadow transition
   * 5. Inset box-shadow that is offset to be visible only on the top edges
   */
  margin-bottom: 20px;
  position: relative;
  z-index: 10; }

.c-tile.is-selected::before, .c-tile.is-selected::after {
  display: block;
  content: "";
  position: absolute;
  /* [1] */
  bottom: -32px;
  /* [1, 2] */
  left: 50%;
  /* [1] */
  width: 22px;
  height: 22px;
  margin-left: -11px;
  /* [1] */
  -ms-transform: rotate(45deg);
  /* [3] */
  transform: rotate(45deg);
  /* [3] */
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  /* [3] */ }

.c-tile.is-selected::before {
  box-shadow: 5px 5px 8px #fff;
  /* [4] */ }

.c-tile.is-selected::after {
  background-color: #fff;
  box-shadow: inset 11px 11px 11px -11px #9f9f9f;
  /* [5] */ }

/**
 * Selected (Dark Themed Panels)
 *
 * Identical to above for `.c-panel--dark`
 */
.c-tile--dark.is-selected {
  /**
   * Arrow markers to signify panel relationship.
   *
   * 1. Positions the marker between element and panel
   * 2. Need to take off an extra pixel here to allow for browser rendering/
   *    rounding quirks.
   * 3. Rotate 45deg to allow it to mask the panel gradient and look like a
   *    notch in the panel (webkit placed after to prevent render quirk)
   * 4. Box-shadow that matches the panel background color to smooth the
   *    shadow transition
   * 5. Inset box-shadow that is offset to be visible only on the top edges
   */
  margin-bottom: 20px;
  position: relative;
  z-index: 10; }

.c-tile--dark.is-selected::before, .c-tile--dark.is-selected::after {
  display: block;
  content: "";
  position: absolute;
  /* [1] */
  bottom: -32px;
  /* [1, 2] */
  left: 50%;
  /* [1] */
  width: 22px;
  height: 22px;
  margin-left: -11px;
  /* [1] */
  -ms-transform: rotate(45deg);
  /* [3] */
  transform: rotate(45deg);
  /* [3] */
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  /* [3] */ }

.c-tile--dark.is-selected::before {
  box-shadow: 5px 5px 8px #222;
  /* [4] */ }

.c-tile--dark.is-selected::after {
  background-color: #222;
  box-shadow: inset 11px 11px 11px -11px #000;
  /* [5] */ }

/* Modifiers
  =========================================== */
/**
 * Square Tiles
 *
 * Forces a Tile to keep a square ratio.
 */
.c-tile--square {
  height: 0;
  padding-top: 100%;
  padding-bottom: 0;
  /**
   * 1. As `.c-tile__content` is now absolute, we can reduce the offset to both
   *    borders instead of paddings
   */ }

.c-tile--square .c-tile__content {
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  position: absolute; }

.c-tile--square .c-tile__link,
.c-tile--square .c-tile__link::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute; }

.c-tile--square .c-tile__shine--top {
  top: -20px;
  /* [1] */ }

.c-tile--square .c-tile__shine--bottom {
  bottom: -20px;
  /* [1] */ }

/**
 * Full Tiles
 *
 * Designed for Tiles that highlight a product, with the media set to fill
 * the background to compliment transparent PNG images.
 *
 * Text should then `overlay` the content.
 */
.c-tile--full {
  /**
   * Stretch image to fit full height on full tiles
   */
  /**
   * Align to center on full tiles
   */ }

.c-tile--full .c-tile__body {
  position: absolute;
  height: 100%;
  top: 0; }

.c-tile--full .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #e6e6ea;
  background-image: -webkit-linear-gradient(top, #fff 50%, #e6e6ea 100%);
  background-image: -moz-linear-gradient(top, #fff 50%, #e6e6ea 100%);
  background-image: -o-linear-gradient(top, #fff 50%, #e6e6ea 100%);
  background-image: linear-gradient(to bottom, #fff 50%, #e6e6ea 100%); }

.c-tile--full .c-tile__media {
  height: auto;
  z-index: 20;
  position: relative; }

.c-tile--full .c-tile__poster {
  display: block;
  margin: 0 auto; }

/**
 * Collapsible Tiles
 *
 * Collapses split tiles at medium size, placing image and caption side by side.
 * Most of the code below resets changes to the structure by `.c-tile--square`.
 *
 * Please note: Only "Split Template" Tiles can be collapsed.
 */
@media (max-width: 46.24em) {
  .c-tile--collapsible {
    height: auto;
    padding: 5px;
    /**
     * Display media and caption side by side.
     */
    /**
     * Caption positioned absolutely to prevent text overflowing media height.
     */ }
  .c-tile--collapsible .c-tile__link {
    position: relative;
    /* stylelint-disable-next-line max-nesting-depth */ }
  .c-tile--collapsible .c-tile__link::before {
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px; }
  .c-tile--collapsible .c-tile__content {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: relative;
    display: block;
    width: 100%; }
  .c-tile--collapsible .c-tile__caption,
  .c-tile--collapsible .c-tile__media {
    display: inline-block;
    vertical-align: top; }
  .c-tile--collapsible .c-tile__caption {
    position: absolute;
    width: 65%;
    height: 100%;
    overflow: hidden; }
  .c-tile--collapsible .c-tile__media {
    position: relative;
    width: 35%; }
  .c-tile--collapsible .c-tile__title {
    /*! autoprefixer: off */
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 28px;
    line-height: 1.3; } }

/**
 * Themed Tiles
 *
 * For each brand gradient in `$tile-themes`, generate a Tile Theme class
 * e.g. `.c-tile--sky-1`
 */
.c-tile--sky-1 .c-tile__link:hover,
.c-tile--sky-1 .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-1 .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #079ef8;
  background-image: -webkit-linear-gradient(top, #0080df 0%, #079ef8 100%);
  background-image: -moz-linear-gradient(top, #0080df 0%, #079ef8 100%);
  background-image: -o-linear-gradient(top, #0080df 0%, #079ef8 100%);
  background-image: linear-gradient(to bottom, #0080df 0%, #079ef8 100%); }

.c-tile--sky-account .c-tile__link:hover,
.c-tile--sky-account .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-account .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #197bc9;
  background-image: -webkit-linear-gradient(top, #135fa0 0%, #197bc9 100%);
  background-image: -moz-linear-gradient(top, #135fa0 0%, #197bc9 100%);
  background-image: -o-linear-gradient(top, #135fa0 0%, #197bc9 100%);
  background-image: linear-gradient(to bottom, #135fa0 0%, #197bc9 100%); }

.c-tile--sky-atlantic .c-tile__link:hover,
.c-tile--sky-atlantic .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-atlantic .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #079ef8;
  background-image: -webkit-linear-gradient(top, #003a7f 0%, #079ef8 100%);
  background-image: -moz-linear-gradient(top, #003a7f 0%, #079ef8 100%);
  background-image: -o-linear-gradient(top, #003a7f 0%, #079ef8 100%);
  background-image: linear-gradient(to bottom, #003a7f 0%, #079ef8 100%); }

.c-tile--sky-arts .c-tile__link:hover,
.c-tile--sky-arts .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-arts .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #fd5366;
  background-image: -webkit-linear-gradient(top, #fd004c 0%, #fd5366 100%);
  background-image: -moz-linear-gradient(top, #fd004c 0%, #fd5366 100%);
  background-image: -o-linear-gradient(top, #fd004c 0%, #fd5366 100%);
  background-image: linear-gradient(to bottom, #fd004c 0%, #fd5366 100%); }

.c-tile--sky-box-sets .c-tile__link:hover,
.c-tile--sky-box-sets .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-box-sets .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #80082c;
  background-image: -webkit-linear-gradient(top, #5c0f39 0%, #80082c 100%);
  background-image: -moz-linear-gradient(top, #5c0f39 0%, #80082c 100%);
  background-image: -o-linear-gradient(top, #5c0f39 0%, #80082c 100%);
  background-image: linear-gradient(to bottom, #5c0f39 0%, #80082c 100%); }

.c-tile--sky-cinema .c-tile__link:hover,
.c-tile--sky-cinema .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-cinema .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #cb0033;
  background-image: -webkit-linear-gradient(top, #903 0%, #cb0033 100%);
  background-image: -moz-linear-gradient(top, #903 0%, #cb0033 100%);
  background-image: -o-linear-gradient(top, #903 0%, #cb0033 100%);
  background-image: linear-gradient(to bottom, #903 0%, #cb0033 100%); }

.c-tile--sky-kids .c-tile__link:hover,
.c-tile--sky-kids .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-kids .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #6626a1;
  background-image: -webkit-linear-gradient(top, #4c0080 0%, #6626a1 100%);
  background-image: -moz-linear-gradient(top, #4c0080 0%, #6626a1 100%);
  background-image: -o-linear-gradient(top, #4c0080 0%, #6626a1 100%);
  background-image: linear-gradient(to bottom, #4c0080 0%, #6626a1 100%); }

.c-tile--sky-living .c-tile__link:hover,
.c-tile--sky-living .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-living .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #67a0b5;
  background-image: -webkit-linear-gradient(top, #68879c 0%, #67a0b5 100%);
  background-image: -moz-linear-gradient(top, #68879c 0%, #67a0b5 100%);
  background-image: -o-linear-gradient(top, #68879c 0%, #67a0b5 100%);
  background-image: linear-gradient(to bottom, #68879c 0%, #67a0b5 100%); }

.c-tile--sky-witness .c-tile__link:hover,
.c-tile--sky-witness .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-witness .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #262626;
  background-image: -webkit-linear-gradient(top, #000 0%, #262626 100%);
  background-image: -moz-linear-gradient(top, #000 0%, #262626 100%);
  background-image: -o-linear-gradient(top, #000 0%, #262626 100%);
  background-image: linear-gradient(to bottom, #000 0%, #262626 100%); }

.c-tile--sky-news .c-tile__link:hover,
.c-tile--sky-news .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-news .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #122d74;
  background-image: -webkit-linear-gradient(top, #041957 0%, #122d74 100%);
  background-image: -moz-linear-gradient(top, #041957 0%, #122d74 100%);
  background-image: -o-linear-gradient(top, #041957 0%, #122d74 100%);
  background-image: linear-gradient(to bottom, #041957 0%, #122d74 100%); }

.c-tile--sky-sports .c-tile__link:hover,
.c-tile--sky-sports .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-sports .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #122476;
  background-image: -webkit-linear-gradient(top, #021158 0%, #122476 100%);
  background-image: -moz-linear-gradient(top, #021158 0%, #122476 100%);
  background-image: -o-linear-gradient(top, #021158 0%, #122476 100%);
  background-image: linear-gradient(to bottom, #021158 0%, #122476 100%); }

.c-tile--sky-store .c-tile__link:hover,
.c-tile--sky-store .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-store .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #073fa0;
  background-image: -webkit-linear-gradient(top, #003268 0%, #073fa0 100%);
  background-image: -moz-linear-gradient(top, #003268 0%, #073fa0 100%);
  background-image: -o-linear-gradient(top, #003268 0%, #073fa0 100%);
  background-image: linear-gradient(to bottom, #003268 0%, #073fa0 100%); }

.c-tile--ultimate-on-demand .c-tile__link:hover,
.c-tile--ultimate-on-demand .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--ultimate-on-demand .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #3c7191;
  background-image: -webkit-linear-gradient(top, #000514 0%, #133e73 50%, #3c7191 100%);
  background-image: -moz-linear-gradient(top, #000514 0%, #133e73 50%, #3c7191 100%);
  background-image: -o-linear-gradient(top, #000514 0%, #133e73 50%, #3c7191 100%);
  background-image: linear-gradient(to bottom, #000514 0%, #133e73 50%, #3c7191 100%); }

.c-tile--sky-mobile .c-tile__link:hover,
.c-tile--sky-mobile .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--sky-mobile .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #ff6400;
  background-image: -webkit-linear-gradient(top, #ff00a5 0%, #ff6400 100%);
  background-image: -moz-linear-gradient(top, #ff00a5 0%, #ff6400 100%);
  background-image: -o-linear-gradient(top, #ff00a5 0%, #ff6400 100%);
  background-image: linear-gradient(to bottom, #ff00a5 0%, #ff6400 100%); }

.c-tile--pick .c-tile__link:hover,
.c-tile--pick .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--pick .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #763175;
  background-image: -webkit-linear-gradient(top, #361740 0%, #763175 100%);
  background-image: -moz-linear-gradient(top, #361740 0%, #763175 100%);
  background-image: -o-linear-gradient(top, #361740 0%, #763175 100%);
  background-image: linear-gradient(to bottom, #361740 0%, #763175 100%); }

.c-tile--challenge .c-tile__link:hover,
.c-tile--challenge .c-tile__link:hover + .c-tile__sponsor {
  color: #fff; }

.c-tile--challenge .c-tile__body::after {
  /*! autoprefixer: off */
  background-color: #ff5200;
  background-image: -webkit-linear-gradient(top, #ff5200 0%, #ff5200 100%);
  background-image: -moz-linear-gradient(top, #ff5200 0%, #ff5200 100%);
  background-image: -o-linear-gradient(top, #ff5200 0%, #ff5200 100%);
  background-image: linear-gradient(to bottom, #ff5200 0%, #ff5200 100%); }

/* ==========================================================================
   COMPONENTS / #TILE-FLUID
   ========================================================================== */
/**
 * Fluid tiles are designed to scale proportionally, this means the tile's
 * content scales in relation to its width.
 *
 * To achieve this we utilise viewport width units (vw) which allow us to scale
 * the tile relative to the browser, the downside being that we loose the
 * ability to accurately set exact font-sizes.
 *
 *
 * Fluid base breakpoint
 * ==============================================
 *
 * The fluid base breakpoint is the breakpoint used to base our proportional
 * scaling on. At this breakpoint our base font-size for tiles will be the vw
 * equivalent of our $global-font-size (20px).
 *
 */
/* Tile Fluid base font size
 * ==============================================
 *
 * This calculates the vw equivalent of the $global-font-size at our specified
 * $tile-fluid-base-breakpoint value. It uses the following logic:
 *
 *  static font size / viewport width * 100vw
 *
 * This means that at our target browser width we will know that our fluid-base-
 * font-size is set to the vw equivalent of 20px (or what ever our global font
 * size is). Given our mobile first approach it makes sense this should be set
 * to our smallest breakpoint, this means we can be sure of the font-size at
 * this resolution.
 *
 */
/* Tile Fluid max width
 * ==============================================
 *
 * To prevent the tiles scaling infinitely we can set a maximum size, by default
 * this is matched to .o-container (1200px).
 *
 */
/**
 * Now we have the fluid-base-font-size calculated we can apply this to the
 * `c-tile` via a modifier `--fluid`.
 */
.c-tile--fluid {
  font-size: 4.2857142857vw;
  /**
   * Now that our fluid tiles are set using the vw based font-size we can
   * automate scaling of content using em units which are relative to the tile
   * font-size. This removes the need to set bespoke vw sizes on all content.

   * Set generic fluid values for the tile:
   * 1. Convert the standard value for tile padding to em so it scales
   *    proportionally.
   */
  /**
   * Set generic fluid tile title values:
   * 1. Convert our heading charlie (36px) to an em value.
   * 2. Set margin bottom in em relative to the elements font-size (36px)
   */ }

.c-tile--fluid .c-tile__body {
  line-height: 1.2em;
  padding: 0.5555555556em;
  /* [1] */ }

.c-tile--fluid .c-tile__title {
  font-size: 1.5555555556em;
  /* [1] */
  line-height: 1.25em;
  margin-bottom: 0.1785714286em;
  /* [2] */ }

/* ==============================================
 * Tile Fluid Container
 * ==============================================
 */
/**
 * Tile Fluid constrain ratio
 * ==============================================
 * Once the browser goes beyond our standard container width (1200px) we want
 * the the fluid tiles to stop scaling so they maintain proportional to the tile
 * rather than the browser.
 *
 * To achieve this we need to find the px value which is equivalent to our vw
 * fluid font-size at 1200px. To do this we we can divide the container maximum
 * width by our fluid base breakpoint size.
 *
 */
/**
 * This gives us the ratio between these two sizes. Now if we multiply our
 * global font size (20px) by this ratio we have the exact font-size of the
 * fluid tiles at 1200px.
 */
@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile--fluid {
    font-size: 51.4285714286px; } }

/* ==============================================
 * Tile Fluid Scaling
 * ==============================================
 *
 * Fluid tiles work based on browser width so when used in combination with the
 * toolkit grid we need to use modifiers to adjust the base font-size
 * accordingly. If we are using 1/2 width grid items then we can apply a
 * modifier to the reduce the fluid-base-font-size by half, maintaining the
 * tiles proportions.
 *
 * So:
 * .c-tile-fluid-scale-1/2         - Scales the fluid base font by 1/2
 * .c-tile-fluid-scale-1/3@medium  - Scales by 1/3 at the medium breakpoint and up
 * .c-tile-fluid-scale-1/1@large   - Resets scale full at the large breakpoint and up
 *
 * The tile-fluid-scales() mixin will generate these classes for each scale and
 * breakpoint provided.
 *
 */
/**
 * Create the fluid scale classes when no breakpoint is specified
 */
/**
 * Loop through the number of columns for each denominator of our fractions.
 */
/**
 * Begin creating a numerator for our fraction up until we hit the
 * denominator.
 */
/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-1\/1 .c-tile--fluid {
  font-size: 4.2857142857vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/1 .c-tile--fluid {
    font-size: 51.4285714286px; } }

/**
 * Begin creating a numerator for our fraction up until we hit the
 * denominator.
 */
/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-1\/2 .c-tile--fluid {
  font-size: 2.1428571429vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/2 .c-tile--fluid {
    font-size: 25.7142857143px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-2\/2 .c-tile--fluid {
  font-size: 4.2857142857vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/2 .c-tile--fluid {
    font-size: 51.4285714286px; } }

/**
 * Begin creating a numerator for our fraction up until we hit the
 * denominator.
 */
/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-1\/3 .c-tile--fluid {
  font-size: 1.4285714286vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/3 .c-tile--fluid {
    font-size: 17.1428571429px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-2\/3 .c-tile--fluid {
  font-size: 2.8571428571vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/3 .c-tile--fluid {
    font-size: 34.2857142857px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-3\/3 .c-tile--fluid {
  font-size: 4.2857142857vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/3 .c-tile--fluid {
    font-size: 51.4285714286px; } }

/**
 * Begin creating a numerator for our fraction up until we hit the
 * denominator.
 */
/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-1\/4 .c-tile--fluid {
  font-size: 1.0714285714vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/4 .c-tile--fluid {
    font-size: 12.8571428571px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-2\/4 .c-tile--fluid {
  font-size: 2.1428571429vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/4 .c-tile--fluid {
    font-size: 25.7142857143px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-3\/4 .c-tile--fluid {
  font-size: 3.2142857143vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/4 .c-tile--fluid {
    font-size: 38.5714285714px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-4\/4 .c-tile--fluid {
  font-size: 4.2857142857vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/4 .c-tile--fluid {
    font-size: 51.4285714286px; } }

/**
 * Begin creating a numerator for our fraction up until we hit the
 * denominator.
 */
/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-1\/5 .c-tile--fluid {
  font-size: 0.8571428571vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/5 .c-tile--fluid {
    font-size: 10.2857142857px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-2\/5 .c-tile--fluid {
  font-size: 1.7142857143vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/5 .c-tile--fluid {
    font-size: 20.5714285714px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-3\/5 .c-tile--fluid {
  font-size: 2.5714285714vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/5 .c-tile--fluid {
    font-size: 30.8571428571px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-4\/5 .c-tile--fluid {
  font-size: 3.4285714286vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/5 .c-tile--fluid {
    font-size: 41.1428571429px; } }

/**
 * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
 */
.c-tile-fluid-scale-5\/5 .c-tile--fluid {
  font-size: 4.2857142857vw;
  /**
   * For tiles wrapped in the container we set a fixed px font-size to
   * prevent scaling.
   */
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable */ }

@media (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-5\/5 .c-tile--fluid {
    font-size: 51.4285714286px; } }

/**
 * Create the fluid scale classes when a breakpoint is specified
 */
@media (min-width: 26.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  .c-tile-fluid-scale-1\/1\@small .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ }
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */ }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@small .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-1\/2\@small .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@small .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-2\/2\@small .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@small .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-1\/3\@small .c-tile--fluid {
    font-size: 1.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@small .c-tile--fluid {
    font-size: 17.1428571429px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-2\/3\@small .c-tile--fluid {
    font-size: 2.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@small .c-tile--fluid {
    font-size: 34.2857142857px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-3\/3\@small .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@small .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-1\/4\@small .c-tile--fluid {
    font-size: 1.0714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@small .c-tile--fluid {
    font-size: 12.8571428571px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-2\/4\@small .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@small .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-3\/4\@small .c-tile--fluid {
    font-size: 3.2142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@small .c-tile--fluid {
    font-size: 38.5714285714px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-4\/4\@small .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@small .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-1\/5\@small .c-tile--fluid {
    font-size: 0.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@small .c-tile--fluid {
    font-size: 10.2857142857px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-2\/5\@small .c-tile--fluid {
    font-size: 1.7142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@small .c-tile--fluid {
    font-size: 20.5714285714px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-3\/5\@small .c-tile--fluid {
    font-size: 2.5714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@small .c-tile--fluid {
    font-size: 30.8571428571px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-4\/5\@small .c-tile--fluid {
    font-size: 3.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@small .c-tile--fluid {
    font-size: 41.1428571429px; } }

@media (min-width: 26.25em) {
  .c-tile-fluid-scale-5\/5\@small .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 26.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@small .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 46.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  .c-tile-fluid-scale-1\/1\@medium .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ }
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */ }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@medium .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-1\/2\@medium .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@medium .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-2\/2\@medium .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@medium .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-1\/3\@medium .c-tile--fluid {
    font-size: 1.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@medium .c-tile--fluid {
    font-size: 17.1428571429px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-2\/3\@medium .c-tile--fluid {
    font-size: 2.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@medium .c-tile--fluid {
    font-size: 34.2857142857px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-3\/3\@medium .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@medium .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-1\/4\@medium .c-tile--fluid {
    font-size: 1.0714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@medium .c-tile--fluid {
    font-size: 12.8571428571px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-2\/4\@medium .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@medium .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-3\/4\@medium .c-tile--fluid {
    font-size: 3.2142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@medium .c-tile--fluid {
    font-size: 38.5714285714px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-4\/4\@medium .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@medium .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-1\/5\@medium .c-tile--fluid {
    font-size: 0.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@medium .c-tile--fluid {
    font-size: 10.2857142857px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-2\/5\@medium .c-tile--fluid {
    font-size: 1.7142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@medium .c-tile--fluid {
    font-size: 20.5714285714px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-3\/5\@medium .c-tile--fluid {
    font-size: 2.5714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@medium .c-tile--fluid {
    font-size: 30.8571428571px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-4\/5\@medium .c-tile--fluid {
    font-size: 3.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@medium .c-tile--fluid {
    font-size: 41.1428571429px; } }

@media (min-width: 46.25em) {
  .c-tile-fluid-scale-5\/5\@medium .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 46.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@medium .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 61.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  .c-tile-fluid-scale-1\/1\@large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ }
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */ }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-1\/2\@large .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@large .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-2\/2\@large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-1\/3\@large .c-tile--fluid {
    font-size: 1.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@large .c-tile--fluid {
    font-size: 17.1428571429px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-2\/3\@large .c-tile--fluid {
    font-size: 2.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@large .c-tile--fluid {
    font-size: 34.2857142857px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-3\/3\@large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-1\/4\@large .c-tile--fluid {
    font-size: 1.0714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@large .c-tile--fluid {
    font-size: 12.8571428571px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-2\/4\@large .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@large .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-3\/4\@large .c-tile--fluid {
    font-size: 3.2142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@large .c-tile--fluid {
    font-size: 38.5714285714px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-4\/4\@large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-1\/5\@large .c-tile--fluid {
    font-size: 0.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@large .c-tile--fluid {
    font-size: 10.2857142857px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-2\/5\@large .c-tile--fluid {
    font-size: 1.7142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@large .c-tile--fluid {
    font-size: 20.5714285714px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-3\/5\@large .c-tile--fluid {
    font-size: 2.5714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@large .c-tile--fluid {
    font-size: 30.8571428571px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-4\/5\@large .c-tile--fluid {
    font-size: 3.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@large .c-tile--fluid {
    font-size: 41.1428571429px; } }

@media (min-width: 61.25em) {
  .c-tile-fluid-scale-5\/5\@large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 61.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 81.25em) {
  /**
   * Loop through the number of columns for each denominator of our fractions.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  .c-tile-fluid-scale-1\/1\@x-large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ }
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Begin creating a numerator for our fraction up until we hit the
   * denominator.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */
  /**
   * Build a class in the format `.c-tile-fluid-scale-3/4[@<breakpoint>]`.
   */ }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/1\@x-large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-1\/2\@x-large .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/2\@x-large .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-2\/2\@x-large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/2\@x-large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-1\/3\@x-large .c-tile--fluid {
    font-size: 1.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/3\@x-large .c-tile--fluid {
    font-size: 17.1428571429px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-2\/3\@x-large .c-tile--fluid {
    font-size: 2.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/3\@x-large .c-tile--fluid {
    font-size: 34.2857142857px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-3\/3\@x-large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/3\@x-large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-1\/4\@x-large .c-tile--fluid {
    font-size: 1.0714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/4\@x-large .c-tile--fluid {
    font-size: 12.8571428571px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-2\/4\@x-large .c-tile--fluid {
    font-size: 2.1428571429vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/4\@x-large .c-tile--fluid {
    font-size: 25.7142857143px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-3\/4\@x-large .c-tile--fluid {
    font-size: 3.2142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/4\@x-large .c-tile--fluid {
    font-size: 38.5714285714px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-4\/4\@x-large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/4\@x-large .c-tile--fluid {
    font-size: 51.4285714286px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-1\/5\@x-large .c-tile--fluid {
    font-size: 0.8571428571vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-1\/5\@x-large .c-tile--fluid {
    font-size: 10.2857142857px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-2\/5\@x-large .c-tile--fluid {
    font-size: 1.7142857143vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-2\/5\@x-large .c-tile--fluid {
    font-size: 20.5714285714px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-3\/5\@x-large .c-tile--fluid {
    font-size: 2.5714285714vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-3\/5\@x-large .c-tile--fluid {
    font-size: 30.8571428571px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-4\/5\@x-large .c-tile--fluid {
    font-size: 3.4285714286vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-4\/5\@x-large .c-tile--fluid {
    font-size: 41.1428571429px; } }

@media (min-width: 81.25em) {
  .c-tile-fluid-scale-5\/5\@x-large .c-tile--fluid {
    font-size: 4.2857142857vw;
    /**
     * For tiles wrapped in the container we set a fixed px font-size to
     * prevent scaling.
     */
    /* stylelint-disable max-nesting-depth */
    /* stylelint-enable */ } }

@media (min-width: 81.25em) and (min-width: 75em) {
  .c-tile-fluid-container .c-tile-fluid-scale-5\/5\@x-large .c-tile--fluid {
    font-size: 51.4285714286px; } }

/* Modifiers
  =========================================== */
/**
 * Collapsible Fluid Tiles
 *
 * Collapsible Fluid Tiles are overridden to the correct size on medium screens.
 */
@media (max-width: 46.24em) {
  .c-tile--fluid.c-tile--collapsible {
    font-size: 2.8571428571vw; } }

/* ==========================================================================
   COMPONENTS / #SHINE
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Shine
 *
 * Base container, positioning and behaviour
 */
.c-shine {
  overflow: hidden;
  pointer-events: none;
  display: block;
  height: 45px;
  width: 100%;
  z-index: 100; }

/**
 * Shine Rail
 *
 * The moving part of the shine. We start with the shine transformed *away* from
 * it's context, and move it to it's natural position on hover.
 */
.c-shine__rail {
  /*! autoprefixer: off */
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: 0.5s ease-out;
  will-change: transform;
  position: relative;
  height: 100%;
  overflow: hidden;
  /**
   * Reverse modifier for shines to move LTR rather than RTL
   */
  /**
   * Shine Graphics
   *
   * Pseudo elements to contain the shine graphics generated by CSS.
   */
  /**
   * Shine Graphics: Diffraction Spike
   */
  /**
   * Shine Graphics: Orb
   */ }

.c-shine--rev .c-shine__rail {
  -ms-transform: translateX(100%);
  transform: translateX(100%); }

.c-shine__rail::before, .c-shine__rail::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat; }

.c-shine__rail::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.15) 38%, rgba(255, 255, 255, 0) 50%);
  background-size: 300px 16px; }

.c-shine__rail::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0) 50%);
  background-size: 60px 28px; }

/**
 * Shine Context
 *
 * Applied to the parent node in which the shine is contained, animating shine
 * rails on hover.
 */
.c-shine-context {
  /*! autoprefixer: off */ }

.c-shine-context .c-shine__rail {
  opacity: 0; }

.c-shine-context:hover .c-shine__rail {
  opacity: 1;
  -ms-transform: translateX(25%);
  transform: translateX(25%); }

.c-shine-context:hover .c-shine--rev .c-shine__rail {
  -ms-transform: translateX(-25%);
  transform: translateX(-25%); }

/* ==========================================================================
   COMPONENTS / #DIVIDER
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Divider
 *
 * Prominent horizontal (and vertical) rules between other elements.
 *
 * The default Divider and it's `--top` modifier are intended for use on
 * horizontal rules.
 * e.g. `<hr class="c-divider">`
 *
 * With `--left` and `--right` modifiers intended to wrap content.
 * (The default divider and `--top` modifier will also work in this manner)
 * e.g. `<div class="c-divider c-divider--right">Some content</div>`
 *
 * 1. Set a transparent border on the relevant edge to prevent element collapse.
 * 2. Reduce the `margin-bottom` by the same width as the divider in order to
 *    keep on our baseline grid.
 */
.c-divider {
  position: relative;
  border-width: 0 0 1px 0;
  /* 1 */
  border-style: solid;
  border-color: transparent;
  margin-bottom: 19px;
  /* 2 */
  /**
   * Divider - Gradient Border
   */
  /**
   * Divider - Shadow
   */ }

.c-divider::before, .c-divider::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%; }

.c-divider::before {
  /*! autoprefixer: off */
  background: #c0c0c0;
  background: -webkit-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to right, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  bottom: 0;
  height: 1px; }

.c-divider::after {
  /*! autoprefixer: off */
  background: -webkit-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -moz-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -ms-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -o-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: radial-gradient(at 50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  top: 100%;
  height: 10px; }

/* Modifiers
  ============================================ */
/* Directions
  ---------------------------------- */
/**
 * Loop to generate our suite of modifiers for each divider direction:
 *
 *   .c-divider--right {}
 *   .c-divider--bottom {}
 *   .c-divider--left {}
 */
.c-divider--top {
  border-width: 1px 0 0 0;
  /**
   * Divider gradient border.
   *
   * 1. Attach the border to the appropriate edge.
   */
  /**
   * Divider shadow.
   *
   * 1. Flow the shadow over the appropriate edge.
   */ }

.c-divider--top::before {
  /*! autoprefixer: off */
  background: #c0c0c0;
  background: -webkit-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to right, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  bottom: 100%; }

.c-divider--top::after {
  /*! autoprefixer: off */
  background: -webkit-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -moz-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -ms-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -o-radial-gradient(50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: radial-gradient(at 50% 100%, rgba(74, 74, 74, 0.15), transparent 40%);
  top: -11px; }

.c-divider--right {
  border-width: 0 1px 1px 0;
  margin-bottom: 0;
  /**
   * Divider gradient border.
   *
   * 1. Attach the border to the appropriate edge.
   */
  /**
   * Divider shadow.
   *
   * 1. Flow the shadow over the appropriate edge.
   */ }

.c-divider--right::before {
  /*! autoprefixer: off */
  background: #c0c0c0;
  background: -webkit-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to bottom, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  top: 0;
  width: 1px;
  height: 100%;
  right: 0;
  /* 1 */ }

.c-divider--right::after {
  /*! autoprefixer: off */
  background: -webkit-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -moz-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -ms-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -o-radial-gradient(0 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: radial-gradient(farthest-corner at 0 50%, rgba(74, 74, 74, 0.15), transparent 40%);
  top: 0;
  height: 100%;
  width: 10px;
  right: -10px;
  /* 1 */ }

.c-divider--left {
  border-width: 0 0 1px 1px;
  margin-bottom: 0;
  /**
   * Divider gradient border.
   *
   * 1. Attach the border to the appropriate edge.
   */
  /**
   * Divider shadow.
   *
   * 1. Flow the shadow over the appropriate edge.
   */ }

.c-divider--left::before {
  /*! autoprefixer: off */
  background: #c0c0c0;
  background: -webkit-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(top, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to bottom, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  top: 0;
  width: 1px;
  height: 100%;
  left: 0;
  /* 1 */ }

.c-divider--left::after {
  /*! autoprefixer: off */
  background: -webkit-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -moz-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -ms-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -o-radial-gradient(100% 50%, farthest-corner, rgba(74, 74, 74, 0.15), transparent 40%);
  background: radial-gradient(farthest-corner at 100% 50%, rgba(74, 74, 74, 0.15), transparent 40%);
  top: 0;
  height: 100%;
  width: 10px;
  left: -10px;
  /* 1 */ }

/**
 * Larger gaps underneath dividers.
 */
.c-divider--large {
  margin-bottom: 39px; }

/* Subsection
  ---------------------------------- */
/**
 * Applying the `--sub` modifier to any divider will remove the shadow by
 * resetting the pseudo-element.
 */
.c-divider--sub::after {
  content: normal; }

/**
 * Additional alignment modifiers that are only applicable to `--sub`.
 */
.c-divider--sub.c-divider--align-left::before {
  background: #c0c0c0;
  background: -webkit-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(left, #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to right, #c0c0c0, rgba(192, 192, 192, 0)); }

.c-divider--sub.c-divider--align-right::before {
  background: #c0c0c0;
  background: -webkit-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(right, #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to left, #c0c0c0, rgba(192, 192, 192, 0)); }

/* ==========================================================================
   OBJECTS / #LIST-BLOCK
   ========================================================================== */
/**
 * Masthead modifier of `o-list-block`.
 * Adds a consistent vertical rhythm to each list item (except the last).
 */
.mast-o-list-block > .o-list-block__item {
  margin-bottom: 20px; }

.mast-o-list-block > .o-list-block__item:last-child {
  margin-bottom: 0; }

/* ==========================================================================
   COMPONENTS / #PRIMARY-NAV
   ========================================================================== */
/* Primary Naviation
  ---------------------------------- */
/**
 * Nav Primary
 *
 * The default top-level container for our primary navigation
 */
.mast-c-nav-primary {
  text-align: center; }

@media (min-width: 59.0625em) {
  .mast-c-nav-primary {
    text-align: left; } }

/**
 * Nav Primary - List
 *
 * Applied directly to our `<ul>` of menu items.
 */
.mast-c-nav-primary__list {
  font-size: 25px;
  line-height: 1.24;
  position: relative;
  margin-left: 0;
  list-style-type: none;
  border-width: 0 0 1px 0;
  /* 1 */
  border-style: solid;
  border-color: transparent;
  margin-bottom: 39px;
  /* 2 */
  /**
   * Nav Primary - List (Divider)
   *
   * Cosmetic divider to split out menu items from actions on mobile.
   *
   * 1. Shared pseudo structural styling.
   * 2. Set-up the divider's gradient.
   * 3. Set-up the divider's shadow.
   * 4. Hide divider on desktop.
   */ }

.mast-c-nav-primary__list::before, .mast-c-nav-primary__list::after {
  /* [1] */
  content: "";
  position: absolute;
  display: block;
  width: 100%; }

.mast-c-nav-primary__list::before {
  /*! autoprefixer: off */
  background: #c0c0c0;
  background: -webkit-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -moz-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -ms-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: -o-linear-gradient(left, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  background: linear-gradient(to right, rgba(192, 192, 192, 0), #c0c0c0, rgba(192, 192, 192, 0));
  /* [2] */
  bottom: 0;
  height: 1px; }

.mast-c-nav-primary__list::after {
  /*! autoprefixer: off */
  background: -webkit-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -moz-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -ms-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: -o-radial-gradient(50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  background: radial-gradient(at 50% 0%, rgba(74, 74, 74, 0.15), transparent 40%);
  /* [3] */
  top: 100%;
  height: 10px; }

@media (min-width: 59.0625em) {
  .mast-c-nav-primary__list {
    font-size: 20px;
    line-height: 1.24;
    margin-bottom: 10px; }
  .mast-c-nav-primary__list::before, .mast-c-nav-primary__list::after {
    /* [4] */
    content: normal; } }

@media (min-width: 69.125em) {
  .mast-c-nav-primary__list {
    font-size: 22px;
    line-height: 1.24; } }

/**
 * Nav Primary - Item
 *
 * Applied directly to our individual `<li>` menu items.
 */
.mast-c-nav-primary__item {
  display: block;
  margin-bottom: 20px; }

.mast-c-nav-primary__item:last-child {
  margin-bottom: 40px; }

@media (min-width: 59.0625em) {
  .mast-c-nav-primary__item {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 20px; }
  .mast-c-nav-primary__item:last-child {
    margin-bottom: 0;
    margin-right: 0; } }

/* Header Overlay
  ---------------------------------- */
/**
 * Header Overlay
 *
 * The "whitewash" overlay that contains our toggled-menu on mobile.
 */
.mast-c-header-overlay {
  z-index: 250;
  visibility: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  /**
   * Header Overlay - Pseudo Background
   *
   * Sets a psuedo element overlay background color, allowing us to animate
   * specific areas at different times.
   */
  /**
   * Header Overlay - Pseudo Shadow
   *
   * Sets a psuedo element overlay shadow, allowing us to gracefully fade any
   * content that scrolls underneath the bar.
   *
   * 1. Offset by 1px to prevent sub-pixel rendering leaving a small gap.
   */
  /**
   * Reset positioning and visibility on desktop.
   */ }

.mast-c-header-overlay::before {
  content: "";
  display: block;
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  visibility: hidden; }

.mast-c-header-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  /* [1] */
  box-shadow: 0 0 10px 10px #fff;
  z-index: 1;
  opacity: 0;
  visibility: hidden; }

@media (min-width: 59.0625em) {
  .mast-c-header-overlay {
    position: relative;
    height: auto;
    opacity: 1;
    visibility: visible;
    /**
     * Remove our pseudo-elements on desktop.
     */ }
  .mast-c-header-overlay::after, .mast-c-header-overlay::before {
    content: normal; } }

/**
 * Header Overlay - Inner
 *
 * To avoid the iOS `position: fixed;` bug, we need to wrap our inner overlay
 * content in an extra `<div>` with some extra scroll properties.
 *
 * 1. Extra top padding required to offset the header height.
 * 2. Set a min-height off the full viewport height to allow for full overlay
 *    baskets when the overlay is disabled.
 */
@media (max-width: 59.0525em) {
  .mast-c-header-overlay__inner {
    padding: 75px 20px 40px 20px;
    /* [1] */
    width: 100%;
    z-index: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
    visibility: hidden; } }

/**
 * Header Overlay - Content
 *
 * Generic "hide on mobile" for *each* area of content we want to hide until the
 * overlay is triggered.
 */
@media (max-width: 59.0525em) {
  .mast-c-header-overlay__content {
    opacity: 0;
    visibility: hidden; } }

/* ==========================================================================
   COMPONENTS / #SECONDARY-NAV
   ========================================================================== */
/* Secondary Naviation
  ---------------------------------- */
/**
 * Nav Secondary
 *
 * The default top-level container for our secondary navigation, which appears
 * below our primary.
 */
.mast-c-nav-secondary {
  position: relative;
  width: 100%;
  padding: 0 0 10px 0;
  overflow: hidden;
  /* [1] */
  z-index: 0;
  background: #fff;
  max-height: 34px; }

@media (min-width: 59.0625em) {
  .mast-c-nav-secondary {
    padding: 0;
    margin-bottom: 10px; } }

/**
 * Nav Secondary - Arrow
 *
 * Arrow `<button>`s used to navigate users across the scrollable menu items.
 */
.mast-c-nav-secondary__arrow {
  background-color: rgba(255, 255, 255, 0);
  background-image: -webkit-linear-gradient(left, white 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-linear-gradient(left, white 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(left, white 60%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, white 60%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  border: none;
  z-index: 2;
  outline: none;
  cursor: pointer;
  fill: #4a4a4a;
  padding: 0 20px 0 10px;
  margin: 0;
  height: 24px; }

@media (min-width: 59.0625em) {
  .mast-c-nav-secondary__arrow {
    top: 1px;
    padding-left: 0;
    height: 20px; } }

.mast-c-nav-secondary__arrow--prev {
  left: 0; }

.mast-c-nav-secondary__arrow--next {
  right: 0;
  transform: rotate(180deg); }

/**
 * Nav Secondary, Nav Tertiary - List
 *
 * Applied directly to our `<ul>` of menu items.
 *
 * 1. Allow for horizontal scrolling, whilst hiding the scrollbar.
 */
.mast-c-nav-secondary__list {
  font-size: 16px;
  font-size: 0.8888888889rem;
  line-height: 1.5;
  position: relative;
  white-space: nowrap;
  /* [1] */
  overflow-x: auto;
  /* [1] */
  overflow-y: hidden;
  /* [1] */
  margin-left: 0;
  margin-bottom: -40px;
  /* [1] */
  padding: 0 0 40px 10px;
  /* [1] */ }

@media (min-width: 59.0625em) {
  .mast-c-nav-secondary__list {
    padding-left: 0; } }

.mast-c-nav-secondary__list .mast-c-nav-secondary__item--hidden {
  /* Hiding elements completely overrides any matching property declarations */
  display: none !important; }

.mast-c-nav-secondary__contents {
  width: min-content;
  float: left; }

.mast-c-nav-tertiary__list {
  width: auto;
  display: inline-block;
  margin-left: 0;
  margin-bottom: -40px;
  /* [1] */
  padding: 0; }

.mast-c-header.js .mast-c-nav-secondary.is-hidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; }

.mast-c-header.no-js .mast-c-nav-tertiary__list {
  /* Hiding elements completely overrides any matching property declarations */
  display: none !important; }

/* ==========================================================================
   COMPONENTS / #HEADER
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Header
 *
 * Top-level container for the Masthead's "Header".
 */
.mast-c-header {
  display: block;
  width: 100%;
  position: relative;
  padding-top: 55px;
  z-index: 250;
  font-family: Sky Text, Helvetica, Arial, sans-serif;
  transform: translate3d(0, 0, 0);
  background-color: #fff;
  /**
   * To avoid "flash" removal of our box-shadow on mobile when the overlay is
   * triggered, we use a pseudo-element to contain it.
   *
   * 1. Protect the background color when the header is set as 100vh on toggle.
   * 2. Reset the pseudo element and use box-shadow on desktop.
   */ }

.mast-c-header::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  left: 0;
  padding-top: 55px;
  background-color: #fff;
  /* [1] */
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); }

@media (min-width: 59.0625em) {
  .mast-c-header {
    padding-top: 15px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    /* [2] */ }
  .mast-c-header::before {
    content: normal;
    /* [2] */ } }

/**
 * Header - Container
 *
 * Inner container, with similar behaviour to `o-container` from mobile-up.
 */
@media (min-width: 59.0625em) {
  .mast-c-header__container {
    max-width: 1200px;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
    position: relative; } }

/**
 * Header - Bar (Mobile)
 *
 * The "bar" on which the top-level items sit for Mobile devices.
 * Note: Doubled-up specificity to prevent layout modifier affecting padding.
 */
.mast-c-header__bar {
  width: auto; }

@media (max-width: 59.0525em) {
  .mast-c-header__bar.mast-c-header__bar {
    position: absolute;
    padding: 10px 10px;
    top: 0;
    left: 0;
    height: 55px;
    width: 100%;
    z-index: 1;
    background-color: transparent; } }

/**
 * Header - Nav
 *
 * Container for our primary and secondary Navigation.
 *
 * 1. Overlay Navigation items over the header bar for basket to be top level.
 * 2. On desktop, offset the layout item by the width of the brand logo
 *    and gutter.
 */
.mast-c-header__nav {
  position: relative;
  height: auto;
  z-index: 2;
  /* [1] */ }

@media (min-width: 59.0625em) {
  .mast-c-header__nav {
    width: auto;
    padding-top: 10px;
    height: auto; } }

/**
 * Header - Toggle
 *
 * Toggle `<button>` to trigger the menu overlay on mobile.
 */
.mast-c-header__toggle {
  vertical-align: middle;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  border-radius: 0.25em;
  padding: 0;
  margin: 0;
  visibility: visible; }

/**
 * Header - Icon
 *
 * The icon which sits inside our Header Toggle Button.
 * Note: Animation is applied in `components/header-animation`.
 */
.mast-c-header-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: #4a4a4a; }

.mast-c-header-icon .mast-c-header-icon__path {
  height: 3px;
  border-bottom-left-radius: 2px;
  border-top-right-radius: 2px;
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: currentColor; }

/**
 * Header - Link Skip
 *
 * Position our skip links directly below the brand logo.
 * Visually-hidden skip links for our impaired users.
 * These links only appear on focus, and should be used to help users to skip
 * through content quickly.
 *
 * 1. Duplicate styles provided by `@include hide-visually()` without
 *    `!important` declarations.
 *    Note: Convert back to a mixin if/when this feature is available via
 *          sky-toolkit-core.
 */
.mast-c-header__link-skip {
  font-size: 16px;
  font-size: 0.8888888889rem;
  left: 20px;
  bottom: 10px;
  position: absolute;
  display: inline-block;
  color: #4a4a4a;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  /* [1] */
  clip: auto;
  /* [1] */
  height: 1px;
  /* [1] */
  margin: -1px;
  /* [1] */
  overflow: hidden;
  /* [1] */
  padding: 0;
  /* [1] */
  width: 1px;
  /* [1] */ }

.mast-c-header__link-skip:focus {
  outline: none;
  clip: auto;
  height: auto;
  margin: auto;
  overflow: visible;
  width: auto;
  display: inline-block;
  background-color: #fff;
  z-index: 251; }

.mast-c-header__link-skip:focus::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 0.25em;
  z-index: -1; }

/**
 * Header - Logo
 *
 * The Sky brand logo, a basic background-image container.
 */
.mast-c-header__logo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: block;
  margin: 0 auto;
  height: 35px;
  visibility: visible; }

@media (min-width: 59.0625em) {
  .mast-c-header__logo {
    background-position: left center;
    width: auto;
    height: 50px;
    margin-bottom: 15px; } }

.mast-c-header__logo:focus {
  outline: none; }

.mast-c-header__logo.has-focus {
  text-decoration: none; }

.mast-c-header__logo.has-focus::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  content: "";
  position: absolute;
  border-radius: 0.25em; }

.mast-c-header__without-logo {
  padding-bottom: 15px; }

@media (min-width: 59.0625em) {
  .mast-c-header__without-logo {
    margin-left: -40px; } }

/* States
  ============================================ */
/**
 * Extend the pseudo-shadow positioning to fit the secondary navigation.
 */
.mast-c-header.has-secondary::before {
  padding-top: 89px; }

/* ==========================================================================
   COMPONENTS / #FOOTER
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Footer
 */
.mast-c-footer {
  margin-top: 200px;
  padding-top: 20px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
  font-family: Sky Text, Helvetica, Arial, sans-serif; }

@media (min-width: 46.25em) {
  .mast-c-footer {
    padding-top: 10px; } }

/**
 * Footer - Container
 *
 * To be applied alongside the container object.
 */
.mast-c-footer__container {
  position: relative; }

/**
 * Footer - Logo
 *
 * Simple dimensions for our logo image.
 */
.mast-c-footer__logo {
  position: relative;
  width: 48px;
  height: 30px; }

.mast-c-footer__logo:focus {
  outline: none; }

.mast-c-footer__logo.has-focus {
  text-decoration: none; }

.mast-c-footer__logo.has-focus::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  content: "";
  position: absolute;
  border-radius: 0.25em; }

/**
 * Footer - Logo Link
 *
 * Simple link wrapper for our logo image.
 */
.mast-c-footer__logo-link {
  position: relative; }

.mast-c-footer__logo-link:focus {
  outline: none; }

.mast-c-footer__logo-link.has-focus {
  text-decoration: none; }

.mast-c-footer__logo-link.has-focus::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  content: "";
  position: absolute;
  border-radius: 0.25em; }

/**
 * Footer - Text
 *
 * Consistent font-sizing for our Footer's text elements.
 */
.mast-c-footer__text {
  font-size: 14px;
  font-size: 0.7777777778rem;
  line-height: 1.5; }

/* toolkit-core Modifiers
  ============================================ */
/**
 * Layout for our Footer items.
 * 1. Prevent text being aligned right after `o-layout--reverse`
 * 2. Widen the grid gutter
 * 3. Offset by the country switch width on desktop.
 */
/* [.o-layout] */
.mast-c-footer__layout {
  text-align: left;
  /* [1] */
  margin-left: -80px;
  /* [2] */ }

.mast-c-footer__layout > .o-layout__item {
  margin-bottom: 10px;
  padding-left: 80px;
  /* [2] */ }

@media (min-width: 46.25em) {
  .mast-c-footer__layout {
    padding-right: 20px;
    /* [3] */ } }

/**
 * Layout for our Footer List of links.
 */
/* [.o-layout] */
.mast-c-footer__layout-list > .o-layout__item {
  margin-bottom: 10px; }

@media (min-width: 46.25em) {
  .mast-c-footer__layout-list > .o-layout__item {
    margin-bottom: 0; } }

/* ==========================================================================
   COMPONENTS / #HEADER-ANIMATION
   ========================================================================== */
/* States
  ============================================ */
/**
 * Header - Animating
 *
 * To prevent our animations/transitions occuring on load, we toggle the
 * animation class at the same time as toggling.
 *
 * Essentially this class acts as our "Exit" animation.
 *
 * 1. Make overall background color of the header transparent so we can fade in
 *    the white background
 */
@media (max-width: 59.0525em) {
  .mast-c-header.is-animating {
    /* Structural and Cosmetic Changes
      ---------------------------------- */
    background-color: transparent;
    /* [1] */
    /**
     * Header Overlay
     *
     * Give overlay min full-height so user can scroll, leaving space at the top
     * for header bar
     */
    /* Transitions
      ---------------------------------- */
    /**
     * Header Icon Path Transitions
     */
    /**
     * Header Shared Transitions
     *
     * Share transitions between all key elements for consistency.
     */ }
  .mast-c-header.is-animating .mast-c-header__bar {
    z-index: 251; }
  .mast-c-header.is-animating .mast-c-header-overlay {
    visibility: visible; }
  .mast-c-header.is-animating .mast-c-header-overlay::before {
    height: 100vh; }
  .mast-c-header.is-animating .mast-c-header-icon__path {
    transform-origin: 0 50%;
    transition-property: transform, opacity;
    transition-duration: 500ms;
    transition-timing-function: ease; }
  .mast-c-header.is-animating .mast-c-header-icon:nth-child(2) {
    transition-duration: 1000ms; }
  .mast-c-header.is-animating .mast-c-header-overlay::before,
  .mast-c-header.is-animating .mast-c-header-overlay::after,
  .mast-c-header.is-animating .mast-c-header-overlay__content {
    transition: opacity 500ms ease, visibility 500ms ease; } }

/**
 * Header - Toggled
 *
 * The Masthead's "active" or "toggled" state (mobile).
 *
 * As well as containing toggled styles, it also acts as our "Entrance"
 * animation.
 *
 * 1. Prevent flickers of full width position fixed on iOS 10.
 */
@media (max-width: 59.0525em) {
  .mast-c-header.is-toggled {
    /* Structural and Cosmetic Changes
      ---------------------------------- */
    height: 100%;
    position: fixed;
    top: 0;
    -webkit-overflow-scrolling: touch;
    /* [1] */
    /**
     * Header Overlay
     *
     * Display the Header Overlay and its background/shadow pseudo-elements.
     */
    /**
     * Header Overlay Transition Delays
     *
     * Display the pseudo (`:before`) background before the rest of the overlay,
     * followed later by the header overlay shadow (`:after`) and content.
     */
    /**
     * Header Icon Path
     *
     * 1. Rotate the top and bottom paths to form a "×".
     * 2. Fade out the middle path.
     */ }
  .mast-c-header.is-toggled .mast-c-header__bar {
    position: fixed;
    background-color: #fff; }
  .mast-c-header.is-toggled .mast-c-header-overlay__inner {
    height: 100%;
    /* [2] */
    min-height: 100%;
    /* [2] */ }
  .mast-c-header.is-toggled .mast-c-header-overlay,
  .mast-c-header.is-toggled .mast-c-header-overlay::before,
  .mast-c-header.is-toggled .mast-c-header-overlay::after,
  .mast-c-header.is-toggled .mast-c-header-overlay__content,
  .mast-c-header.is-toggled .mast-c-header-overlay__inner {
    visibility: visible;
    opacity: 1; }
  .mast-c-header.is-toggled .mast-c-header-overlay::before {
    transition-delay: 0s; }
  .mast-c-header.is-toggled .mast-c-header-overlay::after,
  .mast-c-header.is-toggled .mast-c-header-overlay__content {
    transition-delay: 250ms; }
  .mast-c-header.is-toggled .mast-c-header-icon__path:first-child {
    transform: translateY(-50%) rotate(45deg);
    /* [1] */ }
  .mast-c-header.is-toggled .mast-c-header-icon__path:nth-child(2) {
    opacity: 0;
    transition: opacity 250ms ease;
    /* [2] */ }
  .mast-c-header.is-toggled .mast-c-header-icon__path:last-child {
    transform: translateY(50%) rotate(-45deg);
    /* [1] */ } }

/* ==========================================================================
   COMPONENTS / #LINKS
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Links
 *
 * Our default styling for links in the masthead.
 */
.mast-c-link {
  color: #4a4a4a;
  text-decoration: none;
  line-height: normal;
  position: relative;
  cursor: pointer; }

.mast-c-link:hover, .mast-c-link:focus {
  outline: none; }

.mast-c-link:focus {
  outline: none; }

.mast-c-link.has-focus {
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  border-radius: 0.25em; }

/* States
  ============================================ */
/**
 * To be toggled for the appropriate active section.
 */
.mast-c-link.is-active {
  font-weight: bold; }

/* Modifers
  ============================================ */
/**
 * Reduced `.has-focus` spread.
 */
.mast-c-link--reduced.has-focus:focus {
  outline: none; }

.mast-c-link--reduced.has-focus.has-focus {
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 0 2px 1px #73add8;
  border-radius: 0.25em; }

/**
 * Pseudo `.has-focus` styles.
 */
.mast-c-link--pseudo.has-focus {
  position: relative;
  box-shadow: none; }

.mast-c-link--pseudo.has-focus:focus {
  outline: none; }

.mast-c-link--pseudo.has-focus.has-focus {
  text-decoration: none; }

.mast-c-link--pseudo.has-focus.has-focus::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  content: "";
  position: absolute;
  border-radius: 0.25em; }

/* ==========================================================================
   COMPONENTS / #SVG
   ========================================================================== */
/* Base
  ============================================ */
/**
 * SVG
 *
 * Basic container for our SVG elements, which for secondary requires a defined
 * specific height.
 */
.mast-c-svg.mast-c-svg--secondary {
  height: 24px; }

@media (min-width: 59.0625em) {
  .mast-c-svg.mast-c-svg--secondary {
    height: 20px; } }

/* ==========================================================================
   UTILITIES / #HIDE
   ========================================================================== */
@media (min-width: 59.0625em) {
  .u-hide-completely\@masthead-mobile {
    /* Hiding elements completely overrides any matching property declarations */
    display: none !important; } }

@media (max-width: 59.0525em) {
  .u-hide-completely\@masthead-upto-mobile {
    /* Hiding elements completely overrides any matching property declarations */
    display: none !important; } }

@media (min-width: 59.0625em) {
  .u-hide-visually\@masthead-mobile {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important; } }

.mast-u-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

/* ==========================================================================
   UTILITIES / #WIDTHS
   ========================================================================== */
/**
 * Generate a suite of width classes, similar to sky-toolkit-core, that utilise
 * the masthead's breakpoint.
 */
@media (min-width: 59.0625em) {
  /**
   * Generate an auto width utility class at each of our breakpoints.
   */
  .u-width-auto\@masthead-mobile {
    width: auto !important; }
  .u-width-1\/1\@masthead-mobile {
    width: 100% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/1\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-1\/1\@masthead-mobile {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/2\@masthead-mobile {
    width: 50% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/2\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-1\/2\@masthead-mobile {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/2\@masthead-mobile {
    width: 100% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/2\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-2\/2\@masthead-mobile {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/3\@masthead-mobile {
    width: 33.3333333333% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/3\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 33.3333333333% !important; }
  .u-pull-1\/3\@masthead-mobile {
    position: relative;
    right: 33.3333333333% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/3\@masthead-mobile {
    width: 66.6666666667% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/3\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 66.6666666667% !important; }
  .u-pull-2\/3\@masthead-mobile {
    position: relative;
    right: 66.6666666667% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/3\@masthead-mobile {
    width: 100% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/3\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-3\/3\@masthead-mobile {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/4\@masthead-mobile {
    width: 25% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/4\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 25% !important; }
  .u-pull-1\/4\@masthead-mobile {
    position: relative;
    right: 25% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/4\@masthead-mobile {
    width: 50% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/4\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 50% !important; }
  .u-pull-2\/4\@masthead-mobile {
    position: relative;
    right: 50% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/4\@masthead-mobile {
    width: 75% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/4\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 75% !important; }
  .u-pull-3\/4\@masthead-mobile {
    position: relative;
    right: 75% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/4\@masthead-mobile {
    width: 100% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/4\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-4\/4\@masthead-mobile {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ }
  .u-width-1\/5\@masthead-mobile {
    width: 20% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-1\/5\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 20% !important; }
  .u-pull-1\/5\@masthead-mobile {
    position: relative;
    right: 20% !important;
    left: auto;
    /* [1] */ }
  .u-width-2\/5\@masthead-mobile {
    width: 40% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-2\/5\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 40% !important; }
  .u-pull-2\/5\@masthead-mobile {
    position: relative;
    right: 40% !important;
    left: auto;
    /* [1] */ }
  .u-width-3\/5\@masthead-mobile {
    width: 60% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-3\/5\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 60% !important; }
  .u-pull-3\/5\@masthead-mobile {
    position: relative;
    right: 60% !important;
    left: auto;
    /* [1] */ }
  .u-width-4\/5\@masthead-mobile {
    width: 80% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-4\/5\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 80% !important; }
  .u-pull-4\/5\@masthead-mobile {
    position: relative;
    right: 80% !important;
    left: auto;
    /* [1] */ }
  .u-width-5\/5\@masthead-mobile {
    width: 100% !important; }
  /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
  .u-push-5\/5\@masthead-mobile {
    position: relative;
    right: auto;
    /* [1] */
    left: 100% !important; }
  .u-pull-5\/5\@masthead-mobile {
    position: relative;
    right: 100% !important;
    left: auto;
    /* [1] */ } }

.mast-u-text-colour {
  color: #4a4a4a; }

.mast-u-no-underline-hover:hover {
  text-decoration: none; }

.mast-u-underline-hover:hover {
  text-decoration: underline; }

/* ==========================================================================
   UTILITIES / #HEIGHT-MAIN
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Should be applied on the app's `<main>` element.
 * Adds a minimum height to prevent unwanted whitespace beneath the footer.
 */
.mast-u-height-main {
  min-height: 66vh; }

@media (min-width: 46.25em) {
  .mast-u-height-main {
    /* stylelint-disable-next-line declaration-no-important */
    min-height: calc(100vh - 330px) !important; } }

/* Modifiers
  ============================================ */
/**
 * Should be applied on the app's `<main>` element when the secondary navigation
 * is present.
 */
.mast-u-height-main--secondary {
  min-height: 64vh; }

@media (min-width: 46.25em) {
  .mast-u-height-main--secondary {
    /* stylelint-disable-next-line declaration-no-important */
    min-height: calc(100vh - 352px) !important; } }

/* ==========================================================================
   COMPONENTS / #FOOTER
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Footer
 */
.mast-c-footer {
  margin-top: 200px;
  padding-top: 20px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
  font-family: Sky Text, Helvetica, Arial, sans-serif; }

@media (min-width: 46.25em) {
  .mast-c-footer {
    padding-top: 10px; } }

/**
 * Footer - Container
 *
 * To be applied alongside the container object.
 */
.mast-c-footer__container {
  position: relative; }

/**
 * Footer - Logo
 *
 * Simple dimensions for our logo image.
 */
.mast-c-footer__logo {
  position: relative;
  width: 48px;
  height: 30px; }

.mast-c-footer__logo:focus {
  outline: none; }

.mast-c-footer__logo.has-focus {
  text-decoration: none; }

.mast-c-footer__logo.has-focus::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  content: "";
  position: absolute;
  border-radius: 0.25em; }

/**
 * Footer - Logo Link
 *
 * Simple link wrapper for our logo image.
 */
.mast-c-footer__logo-link {
  position: relative; }

.mast-c-footer__logo-link:focus {
  outline: none; }

.mast-c-footer__logo-link.has-focus {
  text-decoration: none; }

.mast-c-footer__logo-link.has-focus::before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 10px 2px rgba(115, 173, 216, 0.75);
  content: "";
  position: absolute;
  border-radius: 0.25em; }

/**
 * Footer - Text
 *
 * Consistent font-sizing for our Footer's text elements.
 */
.mast-c-footer__text {
  font-size: 14px;
  font-size: 0.7777777778rem;
  line-height: 1.5; }

/* toolkit-core Modifiers
  ============================================ */
/**
 * Layout for our Footer items.
 * 1. Prevent text being aligned right after `o-layout--reverse`
 * 2. Widen the grid gutter
 * 3. Offset by the country switch width on desktop.
 */
/* [.o-layout] */
.mast-c-footer__layout {
  text-align: left;
  /* [1] */
  margin-left: -80px;
  /* [2] */ }

.mast-c-footer__layout > .o-layout__item {
  margin-bottom: 10px;
  padding-left: 80px;
  /* [2] */ }

@media (min-width: 46.25em) {
  .mast-c-footer__layout {
    padding-right: 20px;
    /* [3] */ } }

/**
 * Layout for our Footer List of links.
 */
/* [.o-layout] */
.mast-c-footer__layout-list > .o-layout__item {
  margin-bottom: 10px; }

@media (min-width: 46.25em) {
  .mast-c-footer__layout-list > .o-layout__item {
    margin-bottom: 0; } }

/* ==========================================================================
   COMPONENTS / #HERO
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Hero
 *
 * The Hero component provides a dominant piece of media to a page.
 *
 * 1. Allows for absolute positioning of borders and content.
 * 2. Default height for stretched content, min-height for scaled/fixed content.
 */
.c-hero {
  position: relative;
  /* [1] */
  height: 60vh;
  /* [2] */
  min-height: 20em;
  /* [2] */
  color: #fff;
  background-position: center;
  background-size: cover;
  /**
   * Hero (Top & Bottom Border)
   *
   * Translucent top and bottom borders for the Hero.
   *
   * As we cannot set a border property over video, borders are implemented
   * using pseudo-elements.
   */
  /**
   * Hero (Top Border)
   */
  /**
   * Hero (Bottom Border)
   */ }
  .c-hero::before, .c-hero::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    height: 5px;
    width: 100%;
    background: rgba(255, 255, 255, 0.3); }
  .c-hero::before {
    top: 0; }
  .c-hero::after {
    bottom: 0; }

/**
 * Hero Caption
 *
 * The caption overlays at the bottom of a Hero, providing space for additional
 * content such as titles or logos.
 */
.c-hero__caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px 0;
  text-shadow: 0 0 25px rgba(0, 0, 0, 0.25), 1px 1px 1px rgba(0, 0, 0, 0.5); }

/**
 * Hero Link
 *
 * Hero link inherits the Hero `color` to override anchor element styles.
 */
.c-hero__link {
  color: inherit; }

/**
 * Hero Shine
 *
 * To be applied directly to a `.c-shine` component, setting correct positioning
 * when used on a Hero.
 */
.c-hero__shine {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10; }

.c-hero__shine--top {
  top: -20px; }

.c-hero__shine--bottom {
  bottom: -20px; }

/**
 * Hero Video
 *
 * Hero video needs to be set to `display: block` to avoid spacing issues.
 */
.c-hero__video {
  width: 100%;
  height: 100%;
  display: block; }

/* Modifiers
  ============================================ */
/**
 * Hero - Borderless Top
 *
 * Hide the Hero's top border.
 */
.c-hero--borderless-top::before {
  background: transparent; }

/**
 * Hero - Borderless Bottom
 *
 * Hide the Hero's bottom border.
 */
.c-hero--borderless-bottom::after {
  background: transparent; }

/**
 * Hero - Cover
 *
 * Make the Hero cover all available screenspace
 */
.c-hero--cover {
  height: 100vh; }

/**
 * Hero - Fit to Content
 *
 * Make the Hero automatically fit to its content height.
 * N.B. This should be used for videos.
 */
.c-hero--fit-content {
  height: auto;
  min-height: 0; }

/**
 * Hero - Overlap
 *
 * Make any other content below the Hero overlap upwards.
 */
.c-hero--overlap {
  margin-bottom: -10vh;
  /**
   * Shift caption upwards to compensate for overlap.
   */ }
  .c-hero--overlap .c-hero__caption {
    bottom: 10vh; }

/* ==========================================================================
   COMPONENTS / #SHINE
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Shine
 *
 * Base container, positioning and behaviour
 */
.c-shine {
  overflow: hidden;
  pointer-events: none;
  display: block;
  height: 45px;
  width: 100%;
  z-index: 100; }

/**
 * Shine Rail
 *
 * The moving part of the shine. We start with the shine transformed *away* from
 * it's context, and move it to it's natural position on hover.
 */
.c-shine__rail {
  /*! autoprefixer: off */
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: 0.5s ease-out;
  will-change: transform;
  position: relative;
  height: 100%;
  overflow: hidden;
  /**
   * Reverse modifier for shines to move LTR rather than RTL
   */
  /**
   * Shine Graphics
   *
   * Pseudo elements to contain the shine graphics generated by CSS.
   */
  /**
   * Shine Graphics: Diffraction Spike
   */
  /**
   * Shine Graphics: Orb
   */ }
  .c-shine--rev .c-shine__rail {
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
  .c-shine__rail::before, .c-shine__rail::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat; }
  .c-shine__rail::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.15) 38%, rgba(255, 255, 255, 0) 50%);
    background-size: 300px 16px; }
  .c-shine__rail::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0) 50%);
    background-size: 60px 28px; }

/**
 * Shine Context
 *
 * Applied to the parent node in which the shine is contained, animating shine
 * rails on hover.
 */
.c-shine-context {
  /*! autoprefixer: off */ }
  .c-shine-context .c-shine__rail {
    opacity: 0; }
  .c-shine-context:hover .c-shine__rail {
    opacity: 1;
    -ms-transform: translateX(25%);
    transform: translateX(25%); }
  .c-shine-context:hover .c-shine--rev .c-shine__rail {
    -ms-transform: translateX(-25%);
    transform: translateX(-25%); }

/* ==========================================================================
   COMPONENTS / #TYPOGRAPHY
   ========================================================================== */
/**
 * In order to divorce our semantic decisions from our stylistic ones, we only
 * define opinionated typographical styles against classes, NOT against
 * typographic HTML elements.
 *
 * https://csswizardry.com/2016/02/managing-typography-on-large-apps/
 *
 * Using the properties defined in toolkit-core/settings/typography,
 * the loop below will generate us a suite of mobile-first responsive
 * typographical component classes:
 *
 *   Heading-level Typography
 *   ---------------------------------
 *   .c-heading-alpha
 *   .c-heading-bravo
 *   .c-heading-charlie
 *   .c-heading-delta
 *
 *   Text-level Typography
 *   ---------------------------------
 *   .c-text-lead
 *   .c-text-body
 *   .c-text-smallprint
 */
.c-heading-alpha {
  font-size: 36px;
  font-size: 2rem;
  line-height: 1.16; }
  @media (min-width: 46.25em) {
    .c-heading-alpha {
      font-size: 50px;
      font-size: 2.77778rem;
      line-height: 1.12; } }

.c-heading-bravo {
  font-size: 29px;
  font-size: 1.61111rem;
  line-height: 1.2; }
  @media (min-width: 46.25em) {
    .c-heading-bravo {
      font-size: 40px;
      font-size: 2.22222rem;
      line-height: 1.15; } }

.c-heading-charlie {
  font-size: 25px;
  font-size: 1.38889rem;
  line-height: 1.24; }
  @media (min-width: 46.25em) {
    .c-heading-charlie {
      font-size: 34px;
      font-size: 1.88889rem;
      line-height: 1.18; } }

.c-heading-delta {
  font-size: 20px;
  font-size: 1.11111rem;
  line-height: 1.3; }
  @media (min-width: 46.25em) {
    .c-heading-delta {
      font-size: 28px;
      font-size: 1.55556rem;
      line-height: 1.21; } }

.c-text-lead {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44; }
  @media (min-width: 46.25em) {
    .c-text-lead {
      font-size: 22px;
      font-size: 1.22222rem;
      line-height: 1.36; } }

.c-text-body {
  font-size: 16px;
  font-size: 0.88889rem;
  line-height: 1.5; }
  @media (min-width: 46.25em) {
    .c-text-body {
      font-size: 18px;
      font-size: 1rem;
      line-height: 1.44; } }

.c-text-smallprint {
  font-size: 12px;
  font-size: 0.66667rem;
  line-height: 1.5; }
  @media (min-width: 46.25em) {
    .c-text-smallprint {
      font-size: 12px;
      font-size: 0.66667rem;
      line-height: 1.5; } }

.c-footer {
  font-size: 14px;
  font-size: 0.77778rem;
  line-height: 1.5; }
  @media (min-width: 46.25em) {
    .c-footer {
      font-size: 14px;
      font-size: 0.77778rem;
      line-height: 1.5; } }

.has-overlap.has-overlap {
  padding-bottom: 48px;
  margin-bottom: -48px; }

/* ==========================================================================
   COMPONENTS / #BUTTONS
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Button
 *
 * 1. Allows styling of box model properties.
 * 2. Reset browser styles.
 * 3. Subtract border-width from the padding so buttons don't grow if the
 *    border-width is modified.
 * 4. Tidy alignment for when the button size needs to be modified.
 * 5. Remove anchor text-decoration (necessary when styling `a`s as buttons).
 * 6. Base transparent border for modifiers to alter.
 * 7. Force all button-styled elements to appear clickable.
 */
.c-btn {
  padding-top: 0;
  padding-bottom: 0;
  height: 2.22em;
  line-height: 2.22em;
  display: inline-block;
  /* [1] */
  margin: 0;
  /* [2] */
  padding-left: 19px;
  /* [3] */
  padding-right: 19px;
  /* [3] */
  vertical-align: middle;
  /* [4] */
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  /* [5] */
  border: 1px solid transparent;
  /* [6] */
  border-radius: 0.25em;
  transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
  /* [7] */
  /**
   * Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
   */ }
  .c-btn:hover, .c-btn:active, .c-btn:focus {
    text-decoration: none;
    /* [8] */
    outline: none; }
  .c-btn::-moz-focus-inner {
    border: 0;
    padding: 0; }

/**
 * Button Icon
 *
 * This enables an icon to be placed to the **left** of a button's text. The
 * icon's colour will be inherited from the component's `color` attribute unless
 * the icon has an explicit `fill` property set.
 *
 * Note: To avoid spacing issues, do *not* add an extra space character between
 *       your button text and image tag.
 *
 * 1. Offset icon from the text baseline to be centered within
      the component.
 * 2. Icons must always conform to a set width and height.
 * 3. Icon should inherit it's fill from the component's text colour.
 */
.c-btn__icon {
  position: relative;
  /* [1] */
  top: 10px;
  /* [1] */
  margin-right: 10px;
  width: 20px;
  /* [2] */
  height: 20px;
  /* [2] */
  line-height: inherit;
  /* [1] */
  vertical-align: top;
  /* [1] */
  fill: currentColor;
  /* [3] */ }

/**
 * Button Icon - Right
 *
 * This enables an icon to be placed to the **right** side of a button's text.
 */
.c-btn__icon--right {
  margin-left: 10px;
  margin-right: 0; }

/* Modifiers (Cosmetic)
   =========================================== */
/**
 * For buttons that identify as the primary action.
 */
.c-btn--primary {
  color: #fff;
  background-color: #0073c5;
  border-color: #0073c5; }
  .c-btn--primary:hover, .c-btn--primary:active {
    background-color: #73add8;
    border-color: #73add8; }
  .c-btn--primary:focus {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75); }

/**
 * For regular buttons or buttons that identify as a secondary actions.
 */
.c-btn--secondary {
  color: #0073c5;
  background-color: transparent;
  border-color: #0073c5; }
  .c-btn--secondary:hover, .c-btn--secondary:active {
    color: #fff;
    background-color: #73add8;
    border-color: #73add8; }
  .c-btn--secondary:focus {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75); }

/**
 * For regular buttons or buttons that identify as a secondary actions.
 * e.g. buttons on a dark panel
 */
.c-btn--secondary-invert {
  color: #fff;
  background-color: transparent;
  border-color: #fff; }
  .c-btn--secondary-invert:hover, .c-btn--secondary-invert:active {
    color: #4a4a4a;
    background-color: #fff;
    border-color: #fff; }
  .c-btn--secondary-invert:focus {
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 15px 3px rgba(255, 255, 255, 0.75); }

/* States
   =========================================== */
/**
 * For buttons whose state is toggled.
 */
.c-btn.is-disabled, .c-btn.is-disabled:hover, .c-btn.is-disabled:active, .c-btn.is-disabled:focus {
  color: #fff;
  background-color: #c0c0c0;
  border-color: #c0c0c0;
  cursor: not-allowed; }

/**
 * For buttons whose state is toggled when a related form or field contains
 * an error or multiple errors.
 */
.c-btn.is-error, .c-btn.is-error:hover, .c-btn.is-error:active, .c-btn.is-error:focus,
.is-error .c-btn,
.is-error .c-btn:hover,
.is-error .c-btn:active,
.is-error .c-btn:focus {
  color: #fff;
  background-color: #ff2744;
  border-color: #ff2744;
  cursor: not-allowed; }

/**
 * For inputs used as a select action (`.c-select`).
 * This should be applied as a BEM Mix [A] alongside `.c-select__btn`.
 * e.g. `<span class="c-btn  c-btn--select  c-select__btn">Select</span>`
 *
 * A. https://en.bem.info/forum/4/
 *
 * 1. This should be the same value as the icon width used in _select.scss
 */
.c-btn--select {
  padding-left: 40px;
  /* [1] */
  padding-right: 40px;
  /* [1] */
  color: #0073c5;
  background-color: transparent;
  border: none;
  transition: all 0.25s ease; }

/* Modifiers (Sizing)
   =========================================== */
/**
 * For buttons that need to display full-width.
 */
.c-btn--full {
  display: block;
  width: 100%; }

/**
 * For buttons that need to display full-width on small devices only.
 */
@media (max-width: 46.24em) {
  .c-btn--full\@small {
    display: block;
    width: 100%; } }

.c-btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
  font-size: 30px; }

.c-btn.is-loading {
  cursor: not-allowed;
  position: relative; }

.c-btn-text--hide {
  visibility: hidden; }

.c-text__white {
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3); }
  .c-text__white .c-tile__overlay {
    text-align: left; }

button.c-tile__link {
  padding: 0px; }

/* ==========================================================================
   COMPONENTS / #IMAGE-CAROUSEL
   ========================================================================== */
.c-carousel__image-container {
  height: 60vh;
  display: flex;
  flex-direction: row;
  color: #FFFFFF; }

.c-carousel__image {
  width: 100%;
  height: 60vh;
  object-fit: cover; }

.c-carousel__button {
  fill: #FFFFFF;
  background: transparent;
  border: transparent;
  cursor: pointer; }

.c-carousel__text-container {
  text-shadow: 0 0 25px rgba(0, 0, 0, 0.25), 1px 1px 1px rgba(0, 0, 0, 0.5);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.paging-dot {
  background: #FFFFFF !important;
  width: 10px !important;
  height: 10px !important; }

/* ==========================================================================
   COMPONENTS / #STATISTICS-COLLECTION
   ========================================================================== */
.c-statistic__container {
  background-color: white; }

.c-statistic-heading {
  font-size: 2.5em; }
  @media (min-width: 61.25em) {
    .c-statistic-heading {
      font-size: 4em; } }

.c-statistic-gradient__yellowToOrange {
  /*! autoprefixer: off */
  /* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  color: #4a4a4a;
  background-image: -webkit-linear-gradient(left, #ffeb00 0%, #ff6400 100%);
  background-size: 100%;
  /* stylelint-enable */ }

.c-statistic-gradient__orangeToPink {
  /*! autoprefixer: off */
  /* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  color: #4a4a4a;
  background-image: -webkit-linear-gradient(left, #ff6400 0%, #ff00a5 100%);
  background-size: 100%;
  /* stylelint-enable */ }

.c-statistic-gradient__pinkToPurple {
  /*! autoprefixer: off */
  /* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  color: #4a4a4a;
  background-image: -webkit-linear-gradient(left, #ff00a5 0%, #6e00ff 100%);
  background-size: 100%;
  /* stylelint-enable */ }

.c-statistic-gradient__purpleToBlue {
  /*! autoprefixer: off */
  /* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  color: #4a4a4a;
  background-image: -webkit-linear-gradient(left, #6e00ff 0%, #00ffdc 100%);
  background-size: 100%;
  /* stylelint-enable */ }

.c-gradient-text {
  /*! autoprefixer: off */
  /* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  color: #4a4a4a;
  background-image: -webkit-linear-gradient(left, #f08300 0%, #e3000f 30%, #a72879 60%, #0644a1 100%);
  background-size: 100%;
  /* stylelint-enable */ }