@charset "UTF-8";
/* ==========================================================================
   TOOLKIT-CORE
   ========================================================================== */
/**
 * CONTENTS
 *
 * SETTINGS
 * All..................Because our Settings layer doesn't actually produce any
 *                      CSS, we can safely glob all of the files into one import
 *                      without risk of bloating our compiled stylesheet.
 *                      This also allows us to easily recycle all of our
 *                      project-level settings into other Sass file/projects.
 *                      e.g. `@import "sky-toolkit-core/tools";`
 *                      Please see `settings/_all.scss` for a full table of
 *                      contents.
 *
 * TOOLS
 * All..................Because our Tools layer doesn't actually produce any
 *                      CSS, we can safely glob all of the files into one import
 *                      without risk of bloating our compiled stylesheet.
 *                      This also allows us to easily recycle all of our
 *                      project-level settings into other Sass file/projects.
 *                      e.g. `@import "sky-toolkit-core/tools";`
 *                      Please see `tools/_all.scss` for a full table of
 *                      contents.
 *
 * GENERIC
 * Font-face............Our @font-face definitions for custom fonts.
 * Box-sizing...........Better default box-model.
 * Normalize.css........Normalise differences across different browsers.
 * Reset................Simple reset to complement Normalize.css: set everything
 *                      to zero.
 * Overflow.............Prevent horizontal scrolling by default.
 * Vertical Rhythm......Define common vertical spacing across all block-level
 *                      elements in one go.
 * Keyframes............Our @keyframe definitions for animations.
 *
 * ELEMENTS
 * Page.................Set up our HTML and/or BODY elements.
 * Typography...........Simple typographical elements (e.g. H1-H6).
 * Forms................Very, very basic (reset-like) form element styles.
 * Links................Default styles for simple hyperlinks.
 * Tables...............Baseline styling to TABLE elements.
 * Images...............Sensible defaults for IMG elements.
 *
 * OBJECTS
 * Supercell............Third-party grid/layout system.
 * Container............Page-level wrappers and containers.
 * Layout...............Grid-like layout mechanism for arranging components.
 *                      Complemented by our width utility classes in order to
 *                      create fluid and responsive page layouts.
 * Flag.................Places any image-like content next to any text-like
 *                      content, with flexibility on vertical alignment.
 * Media Object.........Abstraction for placing image- and text-like content
 *                      side by side.
 * Tables...............Slightly more opinionated and structural styles for
 *                      TABLE elements.
 * List-bare............Strip obvious list styling (bullet points, indents) from
 *                      list elements.
 * List-block...........Remove list-like styling and force list items to be
 *                      blocks or stacked content.
 * List-inline..........Force a list of items to all sit side-by-side.
 *
 * UTILITIES
 * Breakout.............Utility class to breakout of a parent element's
                        `max-width`.
 * Clearfix.............Utility class for applying a clearfix to an element.
 * Hide.................Helper classes for hiding content in different ways.
 * Typography...........A suite of helper classes for manipulating typographical
 *                      elements (alignment, size, etc.).
 * Spacing..............A suite of helper classes for consistent margins and
 *                      paddings.
 * Widths...............A rather complex file which will generate a series of
 *                      utilities for (responsively) setting the width of an
 *                      element. Creates classes like `.u-1/2` (make something
 *                      50% width) or `.u-2/3@large` (make something 66.666%
 *                      width but only on large screens). Most commonly used in
 *                      conjunction with our layout system.
 * Vertical-Align.......A helper utility allowing an element to be vertically
                        aligned within its parent container.
 * ie9..................Various fixes to bugs in IE9.
 * Debug................Enabling debugging mode will point out various errors
 *                      and mistakes in our HTML.
 * Fill.................Utility classes to position an element within its parent.
 * Overflow.............Utility classes to control element overflow.
 */
/* ==========================================================================
   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("//www.sky.com/assets/fonts/sky-regular.woff") format("woff");
}
@font-face {
  font-family: "Sky Text";
  src: url("//www.sky.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;
}

/* ==========================================================================
   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;
  overflow: visible;
}

/**
 * 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 overriden 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: #fff;
  background-image: -webkit-linear-gradient(left, #f2f2f5 0%, #fff 50%, #f2f2f5 100%);
  background-image: -moz-linear-gradient(left, #f2f2f5 0%, #fff 50%, #f2f2f5 100%);
  background-image: -o-linear-gradient(left, #f2f2f5 0%, #fff 50%, #f2f2f5 100%);
  background-image: linear-gradient(to right, #f2f2f5 0%, #fff 50%, #f2f2f5 100%);
  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] */
}
@media (min-width: 46.25em) {
  html {
    background-color: #fff;
    background-image: -webkit-linear-gradient(left, #c9c7d1 0%, #e5e5ea 6%, #fefefe 20%, #fefefe 80%, #e5e5ea 94%, #c9c7d1 100%);
    background-image: -moz-linear-gradient(left, #c9c7d1 0%, #e5e5ea 6%, #fefefe 20%, #fefefe 80%, #e5e5ea 94%, #c9c7d1 100%);
    background-image: -o-linear-gradient(left, #c9c7d1 0%, #e5e5ea 6%, #fefefe 20%, #fefefe 80%, #e5e5ea 94%, #c9c7d1 100%);
    background-image: linear-gradient(to right, #c9c7d1 0%, #e5e5ea 6%, #fefefe 20%, #fefefe 80%, #e5e5ea 94%, #c9c7d1 100%);
  }
}

/* ==========================================================================
   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.
 */
fieldset {
  border: none;
}

legend {
  /* Hiding elements visually overrides any matching property declarations */
  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;
}

.o-container--narrow-container {
  max-width: 800px;
/*  padding-left: 0;
  padding-right: 0; */
}
/* ==========================================================================
   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 {
  /* Hiding elements visually overrides any matching property declarations */
  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 {
    /* Hiding elements visually overrides any matching property declarations */
    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 {
    /* Hiding elements visually overrides any matching property declarations */
    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 {
    /* Hiding elements visually overrides any matching property declarations */
    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 {
    /* Hiding elements visually overrides any matching property declarations */
    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. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding-all {}
 */
/* Spacing utilities will override any matching property declarations */
.u-padding-all {
  padding: 20px !important;
}

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

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

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

.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-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-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-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-none {
  padding-left: 0 !important;
}

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

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

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

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

.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-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-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-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-none {
  margin-left: 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] */
}

@media (min-width: 18em) {
  /**
   * Fix for overlay panel on home page lead article.
   */
  .u-width-auto\@small {
    width: auto !important;
  }

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

@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] */
  }
}
@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] */
  }
}
@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] */
  }
}
@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] */
  }
}
/* ==========================================================================
   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;
}

/* ==========================================================================
   TOOLKIT-UI
   ========================================================================== */
/* ==========================================================================
   COMPONENTS / #ACCORDION
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Accordion
 *
 * Accordions are useful for grouping content whilst saving screen space.
 *
 * 1. Allows styling of box-model properties and absolute potitioning of child/
 *    pseudo-elements.
 * 2. Sets outer border and "curved" edges.
 */
.c-accordion {
  display: block;
  /* [1] */
  position: relative;
  /* [1] */
  border: 1px solid #c0c0c0;
  /* [2] */
  border-radius: 0.25em;
  /* [2] */
}

/**
 * Accordion Section
 *
 * Accordion sections wrap the label and content into a single container.
 * A bottom border is used to indicate a break between each section.
 */
.c-accordion__section {
  border-bottom: 1px solid #c0c0c0;
  /*
   * Bottom border is hidden on the final section to avoid a "doubled" border
   * appearance with `.c-accordion`.
   */
}
.c-accordion__section:last-child {
  border-bottom-width: 0;
}

/**
 * Accordion Label
 *
 * Accordion labels provide context on the group and also toggles content.
 *
 * 1. Set the label's font properties.
 * 2. Allows styling of box-model properties and absolute potitioning of child/
 *    pseudo-elements.
 * 3. Overwrite default link styles.
 * 4. Overwrite browser interaction styles to hide outline and show pointer.
 */
.c-accordion__label {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  /* [1] */
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 26px;
  padding-left: 19px;
  padding-right: 58px;
  display: block;
  /* [2] */
  position: relative;
  /* [2] */
  font-weight: bold;
  /* [1] */
  color: #4a4a4a;
  /* [3] */
  outline: 0;
  /* [4] */
  cursor: pointer;
  /* [4] */
  /**
   * Accordion Label - Indicator
   *
   * Accordion icons provide an extra form of 'toggle' indication.
   *
   * 1. Allows for absolute positioning from the top and right of the label.
   * 2. Sets the icon size.
   * 3. Sets background-image to the icon as Base64.
   * 4. Prevents the pseudo-element partially blocking the label's click events.
   * 5. Sets a starting position for the icon's movement.
   *    translateY is required to align the absolute icon to 50% of the height.
   *    translateZ is required to prevent pixel jumps in webkit browsers.
   * 6. Animates the transform property on transition.
   */
}
.c-accordion__label:hover, .c-accordion__label:focus {
  text-decoration: underline;
}
.c-accordion__label::after {
  /*! autoprefixer: off */
  content: "";
  position: absolute;
  /* [1] */
  top: 50%;
  /* [1] */
  right: 19px;
  /* [1] */
  width: 20px;
  /* [2] */
  height: 20px;
  /* [2] */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAjCAMAAAAT1/wYAAAAdVBMVEUAAABKSkpKSkpLS0tQUFBdXV1KSkpQUFBVVVVKSkpKSkpMTExQUFBPT09LS0tKSkpLS0tLS0tKSkpKSkpLS0tMTExMTExMTExKSkpKSkpLS0tLS0tMTExLS0tMTExLS0tKSkpLS0tKSkpKSkpMTExLS0tKSkrnsYtxAAAAJnRSTlMA5vneFwbUEQzz6zAkG+7Z0My8V1AsKCDCsamiQTs1xrZ7bl1KR017H3MAAAEmSURBVEjHpZTpkoIwEAY/DAIKaLi8ULzz/o+4aGZrateVYdz+laTopioJAKjLGB8RlzV6Ls4V8Ud+4dwFqFyPDfV+aB9mBeMeRKHaj56igXVc0PvOIl340TLX+PnSW4sUQkH2+8Lcz8x6rL823pinft5wQec3IFaBXwmyMX72/fQKEAqCL68y8rsyQ+vNsN+QbzJhZ16Q9zvns3kHn3g+eDu6d34n3LkwGi50M/5uhguzA/7gIPhCQfKJ2FJhj1/sybex/J/iwqtfkC8XJneAuU/Yl0iOVLjx2o38Y4IRJBsq1CBq8jfkKwo6nwslFSr0VOSX5OsKOp+ZnpzneqXBaQoV0637wZZ8fYF9dWHH/o59fYF9faH1fsu+lvbp4x+cg+CMQb4AGyJC1Gj68gAAAAAASUVORK5CYII=");
  /* [3] */
  background-repeat: no-repeat;
  /* [3] */
  background-size: contain;
  /* [3] */
  background-position: center center;
  /* [3] */
  pointer-events: none;
  /* [4] */
  -ms-transform: translateY(-50%) rotate(0);
  /* [5] */
  transform: translateY(-50%) rotate(0);
  /* [5] */
  transition: transform 0.5s ease;
  /* [6] */
}

/**
 * Accordion Content
 *
 * The content for an accordion section, which is displayed on toggle.
 *
 * 1. Allows styling of box-model properties and absolute potitioning of child/
 *    pseudo-elements.
 * 2. Allows for the content to be completely hidden when toggled off.
 * 3. Animates the opacity and height properties on transition.
 */
.c-accordion__content {
  display: block;
  /* [1] */
  position: relative;
  /* [1] */
  margin: 0;
  /* [2] */
  overflow: hidden;
  /* [2] */
  opacity: 0;
  /* [2] */
  height: 0;
  /* [2] */
  transition: opacity 0.5s ease, height 0.5s ease;
  /* [3] */
}

/**
 * Accordion Inner
 *
 * Any padding must be set on `.c-accordion__inner` to allow
 * `.c-accordion__inner` to collapse completely when toggled.
 */
.c-accordion__inner {
  padding: 19px;
}

/* States
  ============================================ */
/**
 * For Accordion Sections whose state is toggled.
 * Sets full opacity with `height: auto;` fallback.
 */
.c-accordion__section.is-active {
  /**
   * Rotate indicator icon.
   */
}
.c-accordion__section.is-active .c-accordion__content {
  height: auto;
  opacity: 1;
}
.c-accordion__section.is-active .c-accordion__label::after {
  /*! autoprefixer: off */
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

/* ==========================================================================
   COMPONENTS / #BEZEL
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Bezel
 *
 * Provides a glass "bezel" border to the container of a media element.
 */
.c-bezel {
  display: inline-block;
  max-width: 100%;
  pointer-events: none;
  position: relative;
}
.c-bezel::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 5px solid rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   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 aligment for when the button size needs to be modified.
 * 5.  Set default button font-size.
 * 6.  Set default button font-weight.
 * 7.  Set default button text-alignment.
 * 8.  Remove anchor text-decoration (necessary when styling `a`s as buttons).
 * 9.  Base transparent border for modifers to alter.
 * 10. Set default button border-radius.
 * 11. Set default button transition (color, background-color, border-color and box-shadow)
 * 12. Force all button-styled elements to appear clickable.
 * 13. Remove browser outline styles.
 */
.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;
  /* [5] */
  font-weight: bold;
  /* [6] */
  text-align: center;
  /* [7] */
  text-decoration: none;
  /* [8] */
  border: 1px solid transparent;
  /* [9] */
  border-radius: 0.25em;
  /* [10] */
  transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  /* [11] */
  cursor: pointer;
  /* [12] */
  /**
   * 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;
  /* [13] */
}
.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%;
  }
}

/* ==========================================================================
   COMPONENTS / #CALENDAR
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Calendar Container
 *
 * 1. Recomended max-size for calendar, accounting for padding
 * 2. Provide spacing either side of the calendar that allows room for transformed navigation buttons
 */
.c-calendar-container {
  max-width: 380px;
  /* [1] */
  margin: 0 auto;
}
@media (min-width: 46.25em) {
  .c-calendar-container {
    padding: 0 22px;
    /* [2] */
  }
}

/**
 * Calendar
 *
 * 1. Postioning for navigation
 * 2. Align tablet columns so they have equal spacing on outer sides
 * 3. Anything smaller results in dates being obscured
 */
.c-calendar {
  position: relative;
  /* [1] */
  text-align: center;
  /* [2] */
  min-width: 290px;
  /* [3] */
}

/**
 * Calendar Navigation
 *
 * Button navigation for switching between calendar content.
 */
.c-calendar__nav {
  /*! autoprefixer: off */
  position: absolute;
  top: 0;
  width: 44px;
  height: 30px;
  padding: 0;
  z-index: 10;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  -webkit-transition: opacity 0.25s, transform 0.25s transform-origin 0.25s;
  transition: opacity 0.25s, transform 0.25s, transform-origin 0.25s;
  cursor: pointer;
}
.c-calendar__nav:hover, .c-calendar__nav:focus {
  outline: none;
  opacity: 0.5;
}

/**
 * Loop to generate modifiers for each nav direction:
 *
 *   .c-calendar__nav--right {}
 *   .c-calendar__nav--left {}
 *
 * 1. Position icon on outer side at small
 * 2. Position nav button so the middle of the icon overlaps the table edge
 */
.c-calendar__nav--next {
  /*! autoprefixer: off */
  right: 0;
  -webkit-transform-origin: right;
  transform-origin: right;
}
@media (max-width: 46.24em) {
  .c-calendar__nav--next {
    text-align: right;
    /* [1] */
  }
}
@media (min-width: 46.25em) {
  .c-calendar__nav--next {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    /* [2] */
  }
  .c-calendar__nav--next:hover, .c-calendar__nav--next:focus {
    -webkit-transform: scale(1.5) translateX(50%);
    transform: scale(1.5) translateX(50%);
  }
}

.c-calendar__nav--prev {
  /*! autoprefixer: off */
  left: 0;
  -webkit-transform-origin: left;
  transform-origin: left;
}
@media (max-width: 46.24em) {
  .c-calendar__nav--prev {
    text-align: left;
    /* [1] */
  }
}
@media (min-width: 46.25em) {
  .c-calendar__nav--prev {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* [2] */
  }
  .c-calendar__nav--prev:hover, .c-calendar__nav--prev:focus {
    -webkit-transform: scale(1.5) translateX(-50%);
    transform: scale(1.5) translateX(-50%);
  }
}

/**
 * Calendar Navigation - Icon
 *
 * Applied directly to the SVG icon element
 * 1. Cater for approach of using currentColor on SVGs in consuming apps.
 * 2. Retain backwards compatibility
 */
.c-calendar__nav-icon {
  width: 20px;
  height: 20px;
  color: #0073c5;
  /* [1] */
  fill: #0073c5;
  /* [2] */
}

/**
 * Calendar Feedback Footer
 *
 * Details about the currently selected date
 */
.c-calendar__feedback {
  margin: 5px 0 10px;
  padding-top: 10px;
  text-align: left;
  border-width: 1px 0;
  border-style: solid;
  border-color: #c0c0c0;
}

/**
 * Calendar Month
 *
 * 1. Postioning for navigation
 * 2. Align tablet columns so they have equal spacing on outer sides
 * 3. Anything smaller results in dates being obscured
 */
.c-calendar__month {
  margin-bottom: 0;
  table-layout: fixed;
}

/**
 * Calendar Title
 *
 * e.g. the month name
 */
.c-calendar__title {
  font-weight: normal;
  padding-bottom: 20px;
}

/**
 * Calendar Weekday
 *
 * Abbreviated table headers for days of the week.
 * Overrides normalize abbr[title]
 */
.c-calendar__weekday[title] {
  display: block;
  text-decoration: none;
  font-weight: normal;
  margin-bottom: 10px;
}

/**
 * Calendar Day
 *
 * 1. Half the height to give vertical alignment of text
 * 2. Box shadow helps smooth what can look like a pixelated border
 * 3. Animate the scaling hover effect
 * 4. Reset shadow as silky smooth on retina / HD Displays
 * 5. Reduced focus style shadow to prevent overlaps or cutoffs
 */
.c-calendar__day {
  /*! autoprefixer: off */
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-bottom: 10px;
  line-height: 19px;
  /* [1] */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: 1px solid #0073c5;
  box-shadow: inset 0 0 0 1px rgba(0, 115, 197, 0.2);
  /* [2] */
  color: #0073c5;
  -webkit-transition: background 0.25s, color 0.25s, transform 0.25s;
  transition: background 0.25s, color 0.25s, transform 0.25s;
  /* [3] */
  /* Box-shadow to smooth pixel border is hidden on high resolution displays */
  /* stylelint-disable indentation, media-feature-name-no-unknown */
  /* stylelint-enable */
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .c-calendar__day {
    box-shadow: none;
    /* [4] */
  }
}
.c-calendar__day:hover, .c-calendar__day:focus {
  background: #0073c5;
  color: #fff;
  outline: none;
  cursor: pointer;
}
.c-calendar__day:focus {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 3px 3px rgba(115, 173, 216, 0.75);
  /* [5] */
}
@media (min-width: 26.25em) {
  .c-calendar__day:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

/* States
  =========================================== */
.c-calendar__day.is-selected {
  background: #0073c5;
  color: #fff;
}

.c-calendar__day.is-disabled {
  /*! autoprefixer: off */
  color: #c0c0c0;
  background: none;
  border: none;
  box-shadow: none;
  -webkit-transform: none;
  transform: none;
  cursor: not-allowed;
}

/* ==========================================================================
   COMPONENTS / #CARD
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Card
 *
 * A simple interactive container, used primarily to display product options.
 */
.c-card {
  /*! autoprefixer: off */
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  z-index: 10;
  -ms-transform: none;
  transform: none;
  -ms-transform-style: none;
  transform-style: none;
  will-change: transform;
  background-color: #fff;
  border: 1px solid #eaeaea;
  transition: transform ease 0.25s;
  /**
   * Card Shadows
   *
   * To animate our shadows smoothly, we use pseudo elements.
   * The default shadow uses `::before`, with the active shadow using `::after`.
   * We then simply change the opacity to switch between them, utilising GPU
   * animation for a higher FPS.
   *
   * We keep this inside an `@supports`, as IE doesn't support `translateZ` and
   * causes visual defects.
   *
   * For more info, see: http://tobiasahlin.com/blog/how-to-animate-box-shadow/
   *
   * 1. As `transform` will reset the stacking context and prevent any use of
   *    `z-index`, we need to position the pseudo elements via `translateZ`.
   */
  /* Interaction
    -------------------------------- */
  /**
   * On `:hover` and `:focus`, we want to apply our card's active styles.
   *
   * In its active state, the card will offset upwards, subtly change
   * border-color and reveal the darker active shadow underneath.
   *
   * 1. Hide the default card shadow.
   * 2. Show the active card shadow.
   */
}
@supports (transform-style: preserve-3d) {
  .c-card {
    transform-style: preserve-3d;
    box-shadow: none;
    /**
     * Card Shadow (Default)
     */
    /**
     * Card Shadow (Active)
     *
     * 1. As we want our shadow to appear fixed when the card translates up, we
     *    need to counteract movement and offset our shadow position by the same
     *    amount.
     * 2. Hide the shadow pseudo element until the card is active.
     */
  }
  .c-card::before, .c-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateZ(-1em);
    /* [1] */
    transition: opacity ease 0.25s;
  }
  .c-card::before {
    right: 20px;
    left: 20px;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2);
    opacity: 1;
  }
  .c-card::after {
    right: 12px;
    left: 12px;
    box-shadow: 0 12px 18px 0 rgba(0, 0, 0, 0.25);
    /* [1] */
    opacity: 0;
    /* [2] */
  }
}
.c-card:hover, .c-card:focus {
  /*! autoprefixer: off */
  border-color: #dfdfdf;
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  outline: none;
}
.c-card:hover::before, .c-card:focus::before {
  opacity: 0;
  /* [1] */
}
.c-card:hover::after, .c-card:focus::after {
  opacity: 1;
  /* [2] */
}

/* States
  ============================================ */
/**
 * Keyboard Focus
 *
 * Should be applied to `.c-card` on keyboard focus for Accessibility.
 */
.c-card.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);
  /**
   * Remove Card Shadows to prevent overlap with `focus-styles()`.
   */
}
.c-card.has-focus::before, .c-card.has-focus::after {
  content: normal;
}

/* Modifiers
  ============================================ */
/**
 * Static cards
 *
 * An optional modifier to remove all hover and focus effects from the card
 *
 * 1. Show the default card shadow.
 * 2. Hide the active card shadow.
 */
.c-card--static {
  will-change: auto;
}
.c-card--static:hover, .c-card--static:focus {
  /*! autoprefixer: off */
  border-color: #eaeaea;
  -ms-transform: none;
  transform: none;
  -ms-transform-style: none;
  transform-style: none;
}
.c-card--static:hover::before, .c-card--static:focus::before {
  opacity: 1;
  /* [1] */
}
.c-card--static:hover::after, .c-card--static:focus::after {
  opacity: 0;
  /* [2] */
}

/* ==========================================================================
   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
  ============================================ */
/**
 * 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;
}

/* ==========================================================================
   COMPONENTS / #DROPDOWN
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Dropdown
 *
 * Dropdown menus are useful tools for navigation, but shouldn't be used for
 * form input purposes (see `c-form-select` for form use).
 *
 * 1. Allows styling of box model properties.
 * 2. Allows absolute positioning of child and pseudo-elements.
 */
.c-dropdown {
  display: inline-block;
  /* [1] */
  position: relative;
  /* [2] */
}

/**
 * Dropdown Toggle
 *
 * Provides context to the menu and acts as an input to toggle the item list.
 *
 * 1. Set font-size and line-height
 * 2. Displays the label stacked above its menu items.
 * 3. This wall of math automagically works out paddings and reserved space for
 *    the toggle indicator. Feel free to reverse engineer, but we’d recommend
 *    leaving it as is.
 * 4. Sets stacking order for the menu items to overlap above the label
 *    (essential for the shadow overlap fix)
 */
.c-dropdown__toggle {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  /* [1] */
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 26px;
  display: block;
  /* [2] */
  position: relative;
  padding-left: 9px;
  padding-right: 39px;
  /* [3] */
  font-weight: bold;
  text-align: left;
  border: 1px solid #c0c0c0;
  border-radius: 0.25em;
  color: #4a4a4a;
  background-color: #fff;
  outline: 0;
  cursor: pointer;
  z-index: 10;
  /* [4] */
  transition: border 0.5s ease, border-radius 0.5s ease, box-shadow 0.5s ease;
  /**
   * Dropdown Toggle - Icon
   *
   * The Dropdown toggle uses an icon to indicate when the menu is open.
   * N.B. Temporary use of Base64 until a Sky SVG solution is realised.
   *
   * 3. Allows for positioning from the top and right of the dropdown.
   * 4. Set the icon size.
   * 5. Sets background-image to the icon as Base64.
   * 6. Prevents the pseudo-element partially blocking the label's click events.
   * 7. Sets a starting position for the icon's movement.
   *    translateZ is required to prevent pixel jumps in webkit browsers.
   * 8. Animates the transform property on transition.
   */
}
.c-dropdown__toggle:focus {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75);
}
.c-dropdown__toggle::after {
  /*! autoprefixer: off */
  content: "";
  /* [1] */
  position: absolute;
  /* [2] */
  top: 10px;
  /* [3] */
  right: 10px;
  /* [3] */
  width: 20px;
  /* [4] */
  height: 20px;
  /* [4] */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAjCAMAAAAT1/wYAAAAdVBMVEUAAABKSkpKSkpLS0tQUFBdXV1KSkpQUFBVVVVKSkpKSkpMTExQUFBPT09LS0tKSkpLS0tLS0tKSkpKSkpLS0tMTExMTExMTExKSkpKSkpLS0tLS0tMTExLS0tMTExLS0tKSkpLS0tKSkpKSkpMTExLS0tKSkrnsYtxAAAAJnRSTlMA5vneFwbUEQzz6zAkG+7Z0My8V1AsKCDCsamiQTs1xrZ7bl1KR017H3MAAAEmSURBVEjHpZTpkoIwEAY/DAIKaLi8ULzz/o+4aGZrateVYdz+laTopioJAKjLGB8RlzV6Ls4V8Ud+4dwFqFyPDfV+aB9mBeMeRKHaj56igXVc0PvOIl340TLX+PnSW4sUQkH2+8Lcz8x6rL823pinft5wQec3IFaBXwmyMX72/fQKEAqCL68y8rsyQ+vNsN+QbzJhZ16Q9zvns3kHn3g+eDu6d34n3LkwGi50M/5uhguzA/7gIPhCQfKJ2FJhj1/sybex/J/iwqtfkC8XJneAuU/Yl0iOVLjx2o38Y4IRJBsq1CBq8jfkKwo6nwslFSr0VOSX5OsKOp+ZnpzneqXBaQoV0637wZZ8fYF9dWHH/o59fYF9faH1fsu+lvbp4x+cg+CMQb4AGyJC1Gj68gAAAAAASUVORK5CYII=");
  /* [5] */
  background-repeat: no-repeat;
  /* [5] */
  background-size: contain;
  /* [5] */
  background-position: center center;
  /* [5] */
  pointer-events: none;
  /* [6] */
  -ms-transform: translateZ(0) rotate(0);
  /* [7] */
  transform: translateZ(0) rotate(0);
  /* [7] */
  transition: transform 0.5s ease;
  /* [8] */
}

/**
 * Dropdown List
 *
 * Contains menu items, appearing when the label is toggled.
 *
 * 1. Removes default list margins.
 * 2. Sets the list to be stacked above the the label.
 *    This is essential for the list's pseudo-element overlap fix.
 *    As this needs to sit above other areas of UI, it needs a high value.
 * 3. Sets a border-radius on the bottom of the list to compliment the
 *    label's appearance.
 * 4. Visually hides the dropdown list until toggled.
 * 5. Sets a base scaleY to animate.
 * 6. Sets the transform to animate from the top of the element.
 */
.c-dropdown__list {
  /*! autoprefixer: off */
  display: block;
  width: 100%;
  position: absolute;
  margin: 0;
  /* [1] */
  z-index: 50;
  /* [2] */
  list-style-type: none;
  /* [5] */
  background-color: #fff;
  border-radius: 0 0 0.25em 0.25em;
  /* [3] */
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  opacity: 0;
  /* [4] */
  -ms-transform: scaleY(0);
  /* [5] */
  transform: scaleY(0);
  /* [5] */
  -ms-transform-origin: top;
  /* [6] */
  transform-origin: top;
  /* [6] */
  visibility: hidden;
  /* [4] */
  transition: all 0.5s ease;
  /* [13] */
  /**
   * Dropdown Overlap Fix
   *
   * As the Dropdown toggle and list use similar box-shadows, there will
   * inevitably be overlap. To prevent this overlap, the Dropdown list uses a
   * pseudo-element with a matching background-color to cover the shadow.
   *
   * 1. Sets height and positioning to match and cover the shadow's blur radius.
   * 2. Matches the Dropdown label background to hide the shadow.
   */
}
.c-dropdown__list::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 8px;
  /* [1] */
  top: -8px;
  /* [1] */
  background-color: #fff;
  /* [2] */
}

/**
 * Dropdown Link
 *
 * Provides styling for individual menu items within the Dropdown list.
 *
 * 1. Overides default link color.
 * 2. As we use scaleY on the Dropdown list to toggle the menu, each item is
 *    scaled slightly larger at the start to counteract the Dropdown list scaleY
 *    and prevent a "squashed" appearance on toggle.
 * 3. Allows us to transition the link opacity slightly faster than the list.
 * 4. As we can't hide the overflow, a border-radius is set on the last-child.
 */
.c-dropdown__link {
  /*! autoprefixer: off */
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  display: block;
  width: 100%;
  padding: 5px 10px;
  color: #4a4a4a;
  /* [1] */
  -ms-transform: scaleY(2.5);
  /* [2] */
  transform: scaleY(2.5);
  /* [2] */
  opacity: 0;
  /* [3] */
  transition: transform 0.5s ease, opacity 0.25s ease;
  border: 0;
  background-color: #fff;
  text-align: left;
}
.c-dropdown__item:last-child .c-dropdown__link {
  border-radius: 0 0 0.25em 0.25em;
  /* [4] */
}
.c-dropdown__link:hover, .c-dropdown__link:focus {
  background-color: #f4f4f4;
  outline: 0;
  text-decoration: underline;
}
.c-dropdown__link:active {
  outline: 0;
}

/* States
  ============================================ */
/**
 * When a dropdown's state is toggled.
 */
.c-dropdown.is-open {
  /**
   * 1. Scales vertical axis to its full height to achieve 'slide' animation.
   * 2. Sets text to its correct height to animate upon.
   */
  /**
   * 1. Removes border-radius on bottom edge to overlap the dropdown list.
   * 2. Rotates icon indicator 180 degrees.
   */
}
.c-dropdown.is-open .c-dropdown__list {
  /*! autoprefixer: off */
  opacity: 1;
  -ms-transform: scaleY(1);
  /* [1] */
  transform: scaleY(1);
  /* [1] */
  visibility: visible;
}
.c-dropdown.is-open .c-dropdown__link {
  /*! autoprefixer: off */
  opacity: 1;
  -ms-transform: scaleY(1);
  /* [2] */
  transform: scaleY(1);
  /* [2] */
}
.c-dropdown.is-open .c-dropdown__toggle {
  border-color: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.25em 0.25em 0 0;
  /* [1] */
}
.c-dropdown.is-open .c-dropdown__toggle::after {
  /*! autoprefixer: off */
  -ms-transform: translateZ(0) rotate(180deg);
  /* [2] */
  transform: translateZ(0) rotate(180deg);
  /* [2] */
}

/* Modifiers
   =========================================== */
/**
 * For dropdowns that need to display full-width.
 */
.c-dropdown--full {
  display: block;
  width: 100%;
}
.c-dropdown--full .c-dropdown__toggle {
  width: 100%;
}

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

/* ==========================================================================
   COMPONENTS / #FORMS
   ========================================================================== */
/* Base
  ============================================ */
/* Form List
  ---------------------------------- */
/**
 * All form fields should be presented in a list so that
 *
 *   a) they are easier to navigate using a screenreader;
 *   b) if CSS fails to load for any reason, the user is still presented with a
 *      well-formatted list of fields.
 */
.c-form-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-form-list__item {
  display: block;
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 46.25em) {
  .c-form-list__item {
    width: 16em;
  }
}

/* For any inputs that need to be displayed full-width */
@media (min-width: 46.25em) {
  .c-form-list__item--full {
    width: 100%;
  }
}

/* Form Pair
  ---------------------------------- */
/**
 * Inline pairs of form labels and inputs should be wrapped in a form-pair.
 */
.c-form-pair {
  margin-bottom: 10px;
}
@media (min-width: 46.25em) {
  .c-form-pair {
    display: table;
  }
  .c-form-pair .c-form-pair__label,
  .c-form-pair .c-form-pair__input {
    display: table-cell;
    vertical-align: top;
  }
  .c-form-pair .c-form-pair__label {
    margin-right: 10px;
  }
}

/* Form Labels
  ---------------------------------- */
/**
 * All LABEL elements must also carry a class of `.c-form-label`. By applying
 * these styles to a class and not to the LABEL element directly, we are free
 * to reuse the same look-and-feel on spoofed LABEL elements. E.g. when we have
 * a ‘meta label’ covering a number of sub labels:
 *
 *   Gender
 *   • Male  • Female  • Rather not say
 *
 */
.c-form-label {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  display: inline-block;
  margin-bottom: 5px;
}

/* Form Text Inputs
  ---------------------------------- */
/**
 * All text-like form inputs require a class of `.c-form-input`: we do not use
 * selectors like `input[type="text"] {}`.
 *
 * 1. Fix for IE 10/11 removing vertical padding from inputs which was being ignored.
 * 2. Padding added via line-height/height to re-center text for all browsers (38px to account for border).
 */
.c-form-input {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  padding-top: 0;
  padding-bottom: 0;
  height: 2.22em;
  line-height: 2.22em;
  padding-left: 9px;
  padding-right: 9px;
  display: inline-block;
  margin-bottom: 10px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 0.25em;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  outline: 0;
  -webkit-appearance: none;
}
.c-form-input:focus {
  border-color: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  outline: none;
}

/**
 * For use on large text inputs such as textareas
 *
 * 1. As we no longer need to center our text, we can reset the line-height and
 *    use standard box-model padding.
 */
.c-form-input--long {
  height: 6em;
  padding: 10px;
  /* [1] */
  line-height: 1.44444;
  /* [1] */
}

/* Form Date Inputs
  ---------------------------------- */
/**
 * All date-like form inputs require a class of `.c-form-date`: we do not use
 * selectors like `input[type="date"] {}`.
 * Please note the date input is only supported on Edge, Chrome, Opera,
 * iOS Safari and Android. Other browsers will fallback to a text field.
 */
.c-form-date {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  padding-top: 0;
  padding-bottom: 0;
  height: 2.22em;
  line-height: 2.22em;
  padding-left: 9px;
  padding-right: 9px;
  display: inline-block;
  margin-bottom: 10px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 0.25em;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  outline: 0;
  /**
   * 1. Padding between forward slashes in the date format
   */
}
.c-form-date::-webkit-datetime-edit-month-field {
  padding: 2px;
  /* 1 */
}
.c-form-date::-webkit-datetime-edit-day-field {
  padding-right: 2px;
  /* 1 */
}
.c-form-date::-webkit-datetime-edit-year-field {
  padding-left: 2px;
  /* 1 */
}
.c-form-date:focus {
  border-color: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

/* Combination Inputs
  ---------------------------------- */
/**
 * Text and button combo pairs
 */
.c-form-combo {
  display: table;
  width: 100%;
}

.c-form-combo__cell {
  display: table-cell;
  width: 100%;
  vertical-align: top;
}

/**
 * Flatten out the borders between button and input field
 */
.c-form-combo__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

/*
 * 1. Brings combo button height in line with input height (38px to account for 2px border).
 */
.c-form-combo__btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  white-space: nowrap;
}

/**
 * Normalise height-affecting properties across both button and input
 * to insure consistent height
 */
.c-form-combo__btn,
.c-form-combo__input {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
}

/* Form Select Inputs
  ---------------------------------- */
.c-form-select {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  display: inline-block;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 0.25em;
  position: relative;
  width: 100%;
  cursor: pointer;
  /**
   * Gradient to hide the overflow of long labels
   *
   * 1. Hidden by default, shown on browsers that support pointer-events using feature detection
   * 2. Stretch to full height on the right (taking into account border width)
   * 3. The gradient always starts before the select icon appears.
   */
  /**
   * Custom dropdown indicator icon
   */
}
.c-form-select::before {
  display: none;
  /* [1] */
  content: "";
  position: absolute;
  top: 1px;
  /* [2] */
  right: 1px;
  /* [2] */
  bottom: 1px;
  /* [2] */
  width: 60px;
  /* [3] */
  background: #fff;
  background: -ms-linear-gradient(right, white 60%, rgba(255, 255, 255, 0));
  background: linear-gradient(to left, white 60%, rgba(255, 255, 255, 0));
  border-radius: 0 0.25em 0.25em 0;
}
.c-form-select::after {
  /*! autoprefixer: off */
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAjCAMAAAAT1/wYAAAAdVBMVEUAAABKSkpKSkpLS0tQUFBdXV1KSkpQUFBVVVVKSkpKSkpMTExQUFBPT09LS0tKSkpLS0tLS0tKSkpKSkpLS0tMTExMTExMTExKSkpKSkpLS0tLS0tMTExLS0tMTExLS0tKSkpLS0tKSkpKSkpMTExLS0tKSkrnsYtxAAAAJnRSTlMA5vneFwbUEQzz6zAkG+7Z0My8V1AsKCDCsamiQTs1xrZ7bl1KR017H3MAAAEmSURBVEjHpZTpkoIwEAY/DAIKaLi8ULzz/o+4aGZrateVYdz+laTopioJAKjLGB8RlzV6Ls4V8Ud+4dwFqFyPDfV+aB9mBeMeRKHaj56igXVc0PvOIl340TLX+PnSW4sUQkH2+8Lcz8x6rL823pinft5wQec3IFaBXwmyMX72/fQKEAqCL68y8rsyQ+vNsN+QbzJhZ16Q9zvns3kHn3g+eDu6d34n3LkwGi50M/5uhguzA/7gIPhCQfKJ2FJhj1/sybex/J/iwqtfkC8XJneAuU/Yl0iOVLjx2o38Y4IRJBsq1CBq8jfkKwo6nwslFSr0VOSX5OsKOp+ZnpzneqXBaQoV0637wZZ8fYF9dWHH/o59fYF9faH1fsu+lvbp4x+cg+CMQb4AGyJC1Gj68gAAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.c-form-select__dropdown {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 26px;
  position: relative;
  z-index: 10;
  padding-right: 40px;
  padding-left: 10px;
  width: 100%;
  border: 1px solid #c0c0c0;
  border-radius: 0.25em;
  background-color: transparent;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  outline: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.c-form-select__dropdown::-ms-expand {
  display: none;
}

.c-form-select__dropdown:focus {
  border-color: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

/**
 * Displays the fade out gradient from .c-form-select::before above the <select>
 * input on browsers that support pointer-events (and feature detection).
 * This prevents the gradient from blocking clicks on browsers that don't support
 * pointer-events. (IE)
 */
@supports (pointer-events: none) {
  .c-form-select::before, .c-form-select::after {
    display: block;
    z-index: 10;
    pointer-events: none;
  }

  .c-form-select__dropdown {
    z-index: 0;
  }
}
/* Form Checkbox & Radio Inputs
  ---------------------------------- */
.c-form-checkbox {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 18px;
  cursor: pointer;
}

/**
 * For cases where checkboxes or radio buttons need to display inline.
 */
.c-form-checkbox--inline {
  width: auto;
  margin-right: 40px;
}

/**
 * Hide the default input visually to utilise keyboard functionality and allow
 * for custom input styles.
 */
.c-form-checkbox__input {
  /* Hiding elements visually overrides any matching property declarations */
  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;
}

.c-form-checkbox__caption {
  display: block;
  position: relative;
  margin-left: 2em;
}

.c-form-checkbox__caption::before {
  content: "";
  display: inline-block;
  position: relative;
  top: 3px;
  margin-left: -2em;
  margin-right: 1em;
  width: 1em;
  height: 1em;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  transition: border-color 0.25s ease;
}

.c-form-checkbox--radio .c-form-checkbox__caption::before {
  border-radius: 100%;
}

.c-form-checkbox__input:focus + .c-form-checkbox__caption::before {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75);
}

.c-form-checkbox__input:checked + .c-form-checkbox__caption::before {
  background-color: #0073c5;
  border-color: #0073c5;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.c-form-checkbox__input:checked + .c-form-checkbox__caption::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  margin-left: -2em;
  width: 1em;
  height: 1em;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAuCAYAAACYlx/0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQNJREFUeNrsmO0NgyAURRnBETpCR+kIbNQRHMERHKEjOEJHoGA0MaQJ+AWP++5L+GUCnmOExzVGWTnnej8GPzqjFH6tjyoJEfxao2b4uVTDwwtIwYfnhCc84QlPeMITnvCEJzzhCU941fAhHvLjpRX+sWRkoaxG+G80sVXzz2++vJMioeiGl1jIQsMvC05SJFQ56vykzz97QHEJVc/52hJENDm1JIjq8EpLENnelpIgure/W0ITF5u7JDR1q7taQpNX2qskNH2fPysBIsw4KgEqydkrATLGypUAneFlSsAOME9IwElvD0jAi653SIDO7VMScOEzJODDRxLGDfxb+jv/BBgAG1C+DbIBN9MAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border: solid 2px transparent;
}
.c-form-checkbox--radio .c-form-checkbox__input:checked + .c-form-checkbox__caption::after {
  content: normal;
}

/* Required Form Inputs
  ---------------------------------- */
/**
 * All required fields must have a styled piece of text present in their LABEL
 * element indicating that they are mandatory, e.g.:
 *
 *   <label for="f-name">
 *     Full name
 *     <abbr title="Required field" class="c-form-required">*</abbr>
 *   </label>
 *
 * 1. Double up the selector’s specificity in order to override some hangover
 *    from Normalize.css.
 *
 */
.c-form-required {
  color: #ff2744;
}
.c-form-required.c-form-required {
  /* [1] */
  border-bottom: none;
  text-decoration: none;
}

/* States
  =========================================== */
/**
 * Errors are handled by adding the .is-error class to the field's parent –
 * usually the .c-form-list__item.
 */
.is-error {
  color: #ff2744;
}

/**
 * Change form field styles
 */
.is-error .c-form-date, .c-form-date.is-error, .c-form-date:invalid:not(:required), .is-error
.c-form-input,
.c-form-input.is-error,
.c-form-input:invalid:not(:required), .is-error
.c-form-select__dropdown,
.c-form-select__dropdown.is-error,
.c-form-select__dropdown:invalid:not(:required) {
  border-color: #ff2744;
}
.is-error .c-form-date:focus, .c-form-date.is-error:focus, .c-form-date:invalid:not(:required):focus, .is-error
.c-form-input:focus,
.c-form-input.is-error:focus,
.c-form-input:invalid:not(:required):focus, .is-error
.c-form-select__dropdown:focus,
.c-form-select__dropdown.is-error:focus,
.c-form-select__dropdown:invalid:not(:required):focus {
  border-color: #fff;
  box-shadow: 0 0 8px 0 rgba(255, 39, 68, 0.75);
}

/**
 * Change checkbox/radio indicator border color
 */
.is-error .c-form-checkbox__caption::before, .c-form-checkbox__caption.is-error::before, .c-form-checkbox__caption:invalid:not(:required)::before {
  border-color: #ff2744;
}

/* ==========================================================================
   COMPONENTS / #KEYLINE
   ========================================================================== */
/* stylelint-disable declaration-block-semicolon-newline-after */
/* stylelint-enable */
/* Base
  ============================================ */
/**
 * Keyline
 *
 * Simple keyline component to provide horizontal rules between other elements.
 *
 * Recommended for use as `<hr class="c-keyline"/>`.
 *
 * 1. Reduce the `margin-bottom` by the same width as the keyline in order to
 *    keep on our baseline grid.
 */
.c-keyline {
  border: none;
  border-bottom: 1px solid #c0c0c0;
  margin-bottom: 19px;
  /* [1] */
}

/* Modifiers
  ============================================ */
/**
 * Heavier keylines.
 */
.c-keyline--thick {
  border-bottom-width: 2px;
  margin-bottom: 18px;
  /* [1] */
}

/**
 * Smaller gaps underneath keylines.
 */
.c-keyline--small {
  margin-bottom: 9px;
  /* [1] */
  /**
   * Adjust smaller gaps underneath thicker keylines.
   */
}
.c-keyline--small.c-keyline--thick {
  margin-bottom: 8px;
  /* [1] */
}

/* ==========================================================================
   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 aligment 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 modifers 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.
   *
   * 1.  Remove browser outline styles.
   */
}
.c-link-faux:hover {
  text-decoration: underline;
  /* [6] */
}
.c-link-faux:focus {
  outline: 0;
  /* [1] */
}
.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 / #LINKS
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Link
 *
 * Make a element look and act like an `<a:link>`. Recommended for `<button>s`
 * that need an alterntive display.
 *
 * 1. Reset browser styles.
 * 2. Force element to appear clickable.
 * 3. Match to a:link styling.
 */
.c-link {
  border: none;
  /* [1] */
  background: none;
  /* [1] */
  padding: 0;
  /* [1] */
  cursor: pointer;
  /* [2] */
  color: #0073c5;
  /* [3] */
}
.c-link:hover, .c-link:focus {
  text-decoration: underline;
  /* [3] */
}

/* Link Back
  ---------------------------------- */
/**
 * Link Back
 *
 * Adding icons to the beginning of any back links
 *
 * 1. c-link-back currently uses an inline Base64 png chevron icon.
 *    This will eventually be replaced by SVG.
 * 2. Brand-specific override.
 */
.c-link-back::before {
  content: "";
  display: inline-block;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAABACAMAAACnZz6fAAAAflBMVEUAAAAAjOkAc8YAdMYAecoAdMYAc8YAdMYAc8YAc8YAd8kAd8kAfswAc8YAdMYAdMYAdMYAc8YAdMYAdMcAdcgAd8gAdskAd8kAe8wAe9AAgtAAc8YAc8YAdMYAc8YAdcgAdccAdckAdcgAdMcAdMYAdMYAdMcAdMUAd8YAc8XwTFXoAAAAKXRSTlMABPrOG+3c6ePAMCQR1vXn4NJaUywoIBcUDQnxyLitTEE7NaahsntuR62QE84AAADlSURBVEjHjdbXEoIwEIVhFESlCEi3d837v6AzJl4e/uz1N0PJ5uwGk5WE8TYAsjDGvJkYU0+QZml+tdakdSTMNCmQpCtLqgFJ3kvSlUgiR+JIk9iblJ0kfW7JSpOhciRFUmiShZYsWyaNJOPBkoUHSTRZO3KTZOfI3oNcNTlastFk9icXTZ5MTpbMP0zOmtz9Sa3JA0nwMram8qFAwoaf5YremT+M/yGfBZ8p9wb3GPeqZ8/z3dE1AuK7zJnA2cIZxVnHmcnZqyvKMcN5FvBM4dnEM45nJc9cnt28A/Au4beT8G7zBQdzSZh10g/3AAAAAElFTkSuQmCC");
  /* [1] */
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: text-bottom;
  margin-right: 10px;
  width: 0.61111em;
  height: 1.11111em;
}

/**
 * Link Back (Invert)
 *
 * For back links used in dark areas of UI.
 */
.c-link-back--invert {
  color: #fff;
}
.c-link-back--invert::before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAABACAMAAACnZz6fAAAAh1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9qkf8RAAAALHRSTlMA++zi3QXm2dEnIxsUEQn49OnUzMNXUDAYAvC8trGpokE7NS4rHw17bl1KR26dH2oAAADvSURBVEjHpdbXDoJAEIVhVETsXVDsgJX3fz5Jdrw8+5Ow119C2Zk5E3hPEofbAEi3qqqXl+Q1qc/OQwpHqkyT4dKR9VSTyJFYk5GR1USTHpLSyCCVZBwaGSMJNUkHRkokvZEkkxWT2JFoKMnUyNJD1kYKSR5GurkmGyOJJDMjh3srkjmyuGlyRNL/k6smJ0fmDchXk7ORjyR7I52dJpfmxNP8TyZB5Mg7aGH4WXbgneHb6R/yXfCdcm1wjQGCWuWa595hxL3MM4FnC8+o5rOOZybPXkalJJwFnCmcTZxxnJWcuZzdvAPwLtFsJ+Hd5gc3bk6uPnGoHwAAAABJRU5ErkJggg==");
  /* [1] */
}

/* Link External
  ---------------------------------- */
/**
 * Adding icons to the end of any external links
 *
 * 1. c-link-external currently uses an inline Base64 png chevron icon.
 *    This will eventually be replaced by SVG.
 * 2. Brand-specific override.
 */
.c-link-external::after {
  content: "";
  display: inline-block;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAABACAMAAACnZz6fAAAAflBMVEUAAAAAjOkAc8YAdMYAecoAdMYAc8YAdMYAc8YAc8YAd8kAd8kAfswAc8YAdMYAdMYAdMYAc8YAdMYAdMcAdcgAd8gAdskAd8kAe8wAe9AAgtAAc8YAc8YAdMYAc8YAdcgAdccAdckAdcgAdMcAdMYAdMYAdMcAdMUAd8YAc8XwTFXoAAAAKXRSTlMABPrOG+3c6ePAMCQR1vXn4NJaUywoIBcUDQnxyLitTEE7NaahsntuR62QE84AAADlSURBVEjHpdbXDsIwDIXhQGnppHuxaVl5/xdEIuH2x1V8/UlVE8fHSqkq8GLF9dJa+4xqrf+iSH9r24BJPYtaAcoJDaVBYQKozxagogO0CSzaCFBAqCsMyhCFFvWAEovKgVAuQO3WIC8F1IiQb9BxBBRL0HQwKBKhPaCbCO0MOhG6/tBKgB6E3muDzoQuS9BMqLboLkIKqtKmngKUOxj4FvwYkXnlcoZ8F3yn3BvcY9yrLj0/CYhvyejylhskPFt4RvGs45npMnu7AgY9ZAFmCmeTS8ZxVnLmcnbzDsC7hONOItltPoBXSZjOoXJsAAAAAElFTkSuQmCC");
  /* [1] */
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: text-bottom;
  margin-left: 10px;
  width: 0.61111em;
  height: 1.11111em;
}

/* ==========================================================================
   COMPONENTS / #MODAL
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Modal Cover
 *
 * A container for the Modal which provides a semi-transparent backdrop
 * for the Modal and it's contents.
 *
 * 1. Fill the entire viewport.
 * 2. Ensure Modal is layered on top of the rest of the document.
 * 3. Force the browser to create a new layer and send rendering to the GPU.
 */
.c-modal-cover {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* [1] */
  position: fixed;
  /* [1] */
  z-index: 251;
  /* [2] */
  transform: translateZ(0);
  /* [3] */
  background-color: rgba(255, 255, 255, 0.75);
}

/**
 * Modal
 *
 * This is where the modal itself resides with a close button.
 *
 * 1. Fill entire viewport on Mobile only.
 * 2. Center the content at larger breakpoints.
 * 3. When content is larger than the viewport, allow for scrolling
 *    and a degree of margin around the Modal at larger breakpoints.
 */
.c-modal {
  position: fixed;
  /* [1] */
  top: 0;
  /* [1] */
  left: 0;
  /* [1] */
  height: 100%;
  /* [1] */
  width: 100%;
  /* [1] */
  background-color: #fff;
  border-radius: 0.25em;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  /* [3] */
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 46.25em) {
  .c-modal {
    left: 50%;
    /* [2] */
    top: 50%;
    /* [2] */
    height: auto;
    /* [2] */
    transform: translate(-50%, -50%);
    /* [2] */
    max-width: 30em;
    max-height: calc(100% - 20px);
    /* [3] */
  }
}

/**
 * Modal body
 *
 * This is where the content for your Modal resides, wrapping it in a
 * padded white area.
 *
 * 1. Increase padding on larger breakpoints. Reduced on the top
 *    to account for the close button being there.
 */
.c-modal__body {
  padding: 20px;
}
@media (min-width: 46.25em) {
  .c-modal__body {
    padding: 20px 40px 40px 40px;
    /* [1] */
  }
}

/**
 * Modal close button
 *
 * The button to close the Modal. This sits on the right side
 * of the Modal header.
 *
 * 1. Normalise the buttons spacing to visually mirror the overlay component.
 */
.c-modal__close {
  margin-top: 20px;
  /* [1] */
  margin-right: 20px;
  /* [1] */
}

/**
 * Modal close button icon
 *
 * The icon for the close button. This sits to the right of
 * the text.
 *
 * 1. Ensure the close button's icon is vertically centered
 *    to it's text.
 * 2. Just a tad spacing between the icon and the label.
 */
.c-modal__close-icon {
  vertical-align: middle;
  /* [1] */
  margin-left: 10px;
  /* [2] */
}

/* ==========================================================================
   COMPONENTS / #OVERLAY
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Overlay
 *
 * A container for displaying contextual content, usually triggered from a button or link.
 * The overlay fills the entire viewport, and the content within it is scrollable.
 *
 * 1.  Fill the entire viewport
 * 2.  Ensure overlay is layered on top of the rest of the document. The `5` value allows room to
 *     layer other elements higher within the overlay itself, while ensuring it's high enough to
 *     trump anything that needs to stay below.
 */
.c-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* [1] */
  position: fixed;
  /* [1] */
  background-color: #fff;
  z-index: 50;
  /* [2] */
}

/**
* The fixed header and footer of the overlay
*/
.c-overlay__header,
.c-overlay__footer {
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100%;
  background-color: #fff;
}

/**
 * Overlay Header
 *
 * The fixed header of the overlay, which sits at the top of the viewport. It typically contains
 * only a close button, but could be given extra children for some journeys.
 *
 * 1.  Fix the height so we can determine how much to pad the top of the content
 * 2.  Ensure overlay header remains above overlay content
 */
.c-overlay__header {
  top: 0;
  height: 60px;
  /* [1] */
  padding: 0 10px;
  text-align: right;
  z-index: 20;
  /* [2] */
}
@media (min-width: 46.25em) {
  .c-overlay__header {
    height: 80px;
    /* [1] */
    padding: 0 20px;
  }
}

/**
 * Overlay Footer
 *
 * The fixed footer of the overlay, which sits at the bottom of the viewport. It typically contains
 * a call to action button, but could also be given other children for some journeys.
 */
.c-overlay__footer {
  bottom: 0;
  padding: 10px;
  text-align: center;
}

/**
 * Overlay content
 *
 * The scrollable content area of the overlay, this is an open canvas to be filled with any content.
 *
 * 1.  Pad the top of the content to allow for the overlay header
 * 2.  Make the content scrollable if it overflows
 * 3.  Ensure overlay content remains under overlay content
 * 4.  Give inertial scrolling to scrollable content sitting within the overlay
 */
.c-overlay__content {
  padding-top: 60px;
  /* [1] */
  height: 100%;
  /* [2] */
  overflow-y: scroll;
  /* [2] */
  position: relative;
  z-index: 10;
  /* [3] */
  -webkit-overflow-scrolling: touch;
  /* [4] */
}
@media (min-width: 46.25em) {
  .c-overlay__content {
    padding-top: 80px;
    /* [1] */
  }
}

/**
 * Overlay close button
 *
 * The button to close the overlay. This usually sits at the right side of the overlay header, but
 * can be displayed to the left with the `c-overlay--close-left` modifier below.
 *
 * 1.  Just a tad spacing between the icon and the label
 * 2.  Vertically align the icon with the close button label
 */
.c-overlay__close-icon {
  margin-left: 10px;
  /* [1] */
  vertical-align: middle;
  /* [2] */
}

/**
 * Hide the close button label on smaller devices
 */
.c-overlay__close-label {
  vertical-align: middle;
  color: #4a4a4a;
}
@media (max-width: 26.24em) {
  .c-overlay__close-label {
    /* Hiding elements visually overrides any matching property declarations */
    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;
  }
}

/* Modifiers
  ============================================ */
/**
 * Optionally display the close button on the left. Used when extra children need to be added to
 * the right of the overlay header (e.g. baskets, continue button etc.)
 */
.c-overlay--close-left .c-overlay__header {
  text-align: left;
}
.c-overlay--close-left .c-overlay__close-icon {
  margin-left: 0;
  margin-right: 10px;
}

/* ==========================================================================
   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 right of panel
 * 2. Provide spacing for cross icon
 * 3. Inherit the font colour for light and dark panels.
 * 4. Offset cross icon to align with text
 */
.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`.
 * e.g. `<button class="c-panel__toggle c-link">Select</button>`
 *
 * 1. Position the button in top right of panel
 * 2. Provide spacing for cross icon
 * 3. Inherit the font colour for light and dark panels.
 * 4. Offset cross icon to align with text
 */
.c-panel__toggle {
  right: 20px;
  /* [1] */
  padding-right: 1.5em;
  /* [2] */
  color: inherit;
  /* [3] */
}
.c-panel__toggle::after {
  display: inline-block;
  margin-left: 5px;
  position: absolute;
  /* [4] */
  top: 50%;
  /* [4] */
  transform: translateY(-50%);
  /* [4] */
  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-back--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;
}

/* ==========================================================================
   COMPONENTS / #PRICE
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Price Container
 *
 * Encapsulate the price when using adjoining items such as footnote
 *
 * 1. Context for absolutely positioned child items (footnote)
 * 2. Element needs to calculate line-height based on children
 *
 */
.c-price-container {
  position: relative;
  /* [1] */
  display: inline-block;
  /* [2] */
}

/**
 * Price Symbol
 *
 * The symbol is set as a sibling <sup> element.
 */
.c-price__symbol {
  margin-left: 5px;
}

/* Modifiers
  ============================================ */
/**
 * Striked Pricing
 *
 * 1. Removes the browser-default strikethrough decoration
 * 2. Apply offer color to sibling footnote marker symbol
 */
.c-price--strike {
  position: relative;
  text-decoration: none;
  /* [1] */
  /**
   * Striked Pricing: Pseudo Strike
   *
   * Renders a diagonal line through the text from bottom left to top right
   */
}
.c-price--strike::after {
  /*! autoprefixer: off */
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

/**
 * Offer Pricing
 *
 * Apply offer colors to relevent elements
 */
.c-price--offer {
  color: #f15a22;
}
.c-price--offer + .c-price__symbol {
  color: #f15a22;
}

/* ==========================================================================
   COMPONENT / #ROUNDEL
   ========================================================================== */
/* Base
   =========================================== */
/**
 * Roundel
 *
 * For inputs used as a radio button (`.c-roundel`) to allow the selection of a product variant.
 * The overall wrapper for the roundel component
 * Is rendered as a <label> element.
 */
.c-roundel {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

/**
 * Roundel Icon
 *
 * Roundel's can also make use of icons as well as colours and text based labels.
 * This class should be applied to the path of the SVG that you are using.
 *
 * 1. In order to ensure the icon is central to the Roundel, we set a vertical
 *    align property.
 * 2. There is an issue in Safari mobile where the default icon size was causing
 *    the component's height to extend to create more of an oval shape. The solution
 *    here is to set a consistent height/width value for mobile devices.
 */
.c-roundel__icon {
  /*! autoprefixer: off */
  fill: #0073c5;
  height: 20px;
  left: 0;
  width: 20px;
  position: relative;
  vertical-align: middle;
  /* [1] */
  /* [2] */
}
@media (min-width: 26.25em) {
  .c-roundel__icon {
    height: 25px;
    width: 25px;
  }
}

/**
 * Roundel Input
 *
 * The <input> radio element that is responsible for the selection
 *
 * 1. We use the hide-visually() mixin to hide the html input element from the user
 *    but the input remains functional when the user selects a roundel.
 * 2. Due to issues with 'janking' on the border, the blue highlight as set via a :before
 *    selector which allows greater flexibility when applying a transition to the opacity
 *    of the highlight.
 * 3. Override default styles for .c-roundel__label to indicate the selected state.
 */
.c-roundel__input {
  /* Hiding elements visually overrides any matching property declarations */
  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;
  /* [1] */
}
.c-roundel__input:checked + .c-roundel__option::before, .c-roundel__input:checked + .c-roundel__option::after {
  opacity: 1;
  /* [2] */
}
.c-roundel__input:checked + .c-roundel__option {
  /*! autoprefixer: off */
  transform: scale(1);
  /* [3] */
}
.c-roundel__input:checked + .c-roundel__option .c-roundel__label {
  font-weight: bold;
}
.c-roundel__input:focus + .c-roundel__option {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75);
}

/**
 * Roundel Option
 *
 * The component that the user interacts with
 *
 * 1. In order to offset the border we need to apply top and left properties.
 *    This is why we have -1px values for both.
 *
 * 2. As briefly covered earlier in the file we achieve the blue highlight with styles
 *    via the :before selector. This means we can deliver a smoother experience with
 *    transition of the highlight. By default opacity is always 0, this changes to 1
 *    when the user checks the roundel.
 *
 * 3. The ::after selector is required here as an alternative to a previous
 *    implementation of the border property against the base of the
 *    .c-roundel__option  component. This style handles the inner white border.
 */
.c-roundel__option {
  /*! autoprefixer: off */
  border: 1px solid #c0c0c0;
  border-radius: 50%;
  display: table;
  height: 40px;
  width: 40px;
  transform: scale(0.85);
  will-change: transform;
  transition: all 0.25s linear;
  /* [2] */
  /* [3] */
}
@media (min-width: 26.25em) {
  .c-roundel__option {
    height: 49px;
    width: 49px;
  }
}
.c-roundel__option:hover {
  transform: scale(1);
}
.c-roundel__option::before, .c-roundel__option::after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  left: -1px;
  /* [1] */
  top: -1px;
  opacity: 0;
  position: absolute;
  transition: opacity 0.25s linear;
}
@media (min-width: 26.25em) {
  .c-roundel__option::before, .c-roundel__option::after {
    height: 50px;
    width: 50px;
  }
}
.c-roundel__option::before {
  border: 3px solid #0073c5;
  z-index: 20;
}
.c-roundel__option::after {
  border: 6px solid #fff;
  z-index: 10;
}

/**
 * Roundel Label
 *
 * The label is to present a variant to the user.
 * For example, this could be a storage option e.g. 32GB or a colour.
 * The .c-roundel__label is a child of .c-roundel__option which sits within
 * the .c-roundel element (the main wrapper for an individual roundel).
 *
 * For example:
 * <div class="c-roundel">
 *   <input type="radio" class="c-roundel__input">
 *   <div class="c-roundel__option">
 *    <span class="c-roundel__label">32gb</span>
 *   </div>
 * </div>
 *
 *
 * 1. By default the background colour for .c-roundel__label is white. But if we are rendering a
 *    colour-picker, toolkit-react will set an inline style which equates to the provided colour.
 *
 * 2. Roundel Colour Selectors need to have their label styled differently to accomodate a quirk
 *    within Safari. We get around this issue by using absolute positioning rather than relative.
 */
.c-roundel__label {
  font-size: 12px;
  font-size: 0.66667rem;
  line-height: 1.5;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #fff;
  /* [1] */
  text-align: center;
  text-transform: uppercase;
  border: 4px solid transparent;
  transition: all 0.25s linear;
  height: 100%;
  width: 100%;
}
@media (min-width: 26.25em) {
  .c-roundel__label {
    font-size: 14px;
    font-size: 0.77778rem;
  }
}

/* [2] */
.c-roundel--color .c-roundel__label {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
 * Roundel Group
 *
 * The wrapper which sits above a collection of roundels. Use this wrapper component
 * when you wish to display multiple roundels. This prevents the application of
 * margin-right to a single roundel, which would not be necessary in this scenario.
 */
.c-roundel-group .c-roundel {
  margin-right: 5px;
}

/* ==========================================================================
   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 / #SPINNER
   ========================================================================== */
/* Spinner
  =========================================== */
/* Base
  ---------------------------------- */
/**
 * 1. Set the size of the spinner to whatever the font size is: much more terse.
 * 2. Defining the colour once and reusing it via `currentColor` is more terse.
 * 3. The border of the spinner should be 0.1× the size of the overall spinner.
 * 4. The spinner is just a ¾-complete circle that rotates.
 * 5. Kellum Method for hiding text: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
 */
.c-spinner {
  display: inline-block;
  width: 1em;
  /* [1] */
  height: 1em;
  /* [1] */
  font-size: 75px;
  /* [1] */
  color: #0072c9;
  /* [2] */
  border: 0.08em solid;
  /* [3] */
  border-color: transparent currentColor currentColor;
  /* [2][4] */
  vertical-align: middle;
  overflow: hidden;
  /* [5] */
  text-indent: 100%;
  /* [5] */
  border-radius: 100%;
  /* [4] */
  animation: spin 1s infinite linear;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;
}

/* States
  ---------------------------------- */
/**
 * The spinning indicator uses a stateful `.is-complete` class to provide a
 * default "completed" transition and state.
 * e.g. `<div class="c-spinner  is-complete"></div>`
 *
 * Using the transition defined in .c-spinner, this fades and shrinks the icon.
 */
.c-spinner.is-complete {
  opacity: 0;
  visibility: hidden;
}

/* Modifiers
  ---------------------------------- */
/**
 * Because we set the spinner’s borders using `currentColor`, we can change its
 * text and border colour just by altering `color`.
 *
 * The inversed spinning indicator can be used for darker-coloured UI where the
 * default brand color may not be suitable.
 */
.c-spinner--inverse {
  color: #fff;
}

/**
 * Beacuse we set the spinner’s dimensions in ems, we can change its size just
 * by altering `font-size`.
 *
 * For use in smaller pieces of UI where the default size is too large.
 */
.c-spinner--small {
  font-size: 60px;
}

/**
 * For use in larger pieces of UI where the default size is too small.
 */
.c-spinner--large {
  font-size: 90px;
}

/* Spinner Overlay
  =========================================== */
/* Base
  ---------------------------------- */
/**
 * The spinning overlay is used to cover any loadable content until complete.
 * Sample background modifiers are provided, but you should create your own
 * modifier to match appropriately.
 *
 * 1. Allows styling of box model properties and absolute positioning of
 *    pseudo-elements.
 * 2. Sets the indicator as visible to transition.
 * 3. Sets a very high z-index to ensure any content is covered.
 * 4. Transitions visibility on completion.
 */
.c-spinner-overlay {
  position: absolute;
  /* [1] */
  top: 0;
  /* [1] */
  right: 0;
  /* [1] */
  bottom: 0;
  /* [1] */
  left: 0;
  /* [1] */
  opacity: 1;
  /* [2] */
  visibility: visible;
  /* [2] */
  z-index: 100;
  /* [3] */
  transition: opacity 1s ease, visibility 1s ease;
  /* [4] */
  /**
   * Vertically and horizontally centers the indicator to the overlay
   */
}
.c-spinner-overlay > .c-spinner {
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  margin-top: -38px;
  margin-left: -38px;
}
.c-spinner-overlay > .c-spinner--small {
  margin-top: -30px;
  margin-left: -30px;
}
.c-spinner-overlay > .c-spinner--large {
  margin-top: -45px;
  margin-left: -45px;
}

/* States
  ---------------------------------- */
/**
 * The spinning overlay uses a stateful `.is-complete` class to provide a
 * default "completed" transition and state.
 * e.g. `<div class="c-spinner-overlay  is-complete"></div>`
 *
 * Using the transitions defined in .c-spinner-overlay and .c-spinner, this fades
 * the overlay slightly after the indicator has shrunk.
 */
.c-spinner-overlay.is-complete {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.5s;
}
.c-spinner-overlay.is-complete > .c-spinner {
  opacity: 0;
  visibility: hidden;
}

/**
 * The background of the overlay is intentionally simple to extend and modify.
 * If you need to provide a background that matches your web application, just
 * create your own additional class to set it.
 *
 * e.g. `c-spinner-overlay  someprefix-loader-overlay--somemodifier`
 */
/**
 * For overlaying light-coloured UI.
 */
.c-spinner-overlay--light {
  background-color: #eaeaea;
}

/**
 * For overlaying dark-coloured UI.
 */
.c-spinner-overlay--dark {
  background-color: #222;
}

/* ==========================================================================
   COMPONENTS / #SWITCH
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Switch
 *
 * 1. Otherwise the switches clickable area will span the entire block
 */
.c-switch {
  display: inline-block;
  /* [1] */
}

/**
 * Switch Input & Label
 *
 * 1. Visually hide the `input` element and the label text, but leave it acessible for screenreaders
 */
.c-switch__input,
.c-switch__label {
  /* Hiding elements visually overrides any matching property declarations */
  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;
  /* [1] */
}

/**
 * Switch Button
 *
 * 1. The switch is always twice as wide as the marker
 * 2. `content-box` allows us to align the marker inside the button border
 * 3. Using `color` allows us to use `currentColor` for borders and backgrounds and avoid repeated
 *    declarations
 * 4. Explicitly force coarse pointer devices to use non-hover colors in order to avoid sticky
 *    hover states on touch devices
 */
.c-switch__button {
  height: 22px;
  width: 44px;
  /* [1] */
  position: relative;
  border-radius: 1em;
  box-sizing: content-box;
  /* [2] */
  color: #9f9f9f;
  /* [3] */
  background-color: currentColor;
  border: 3px solid currentColor;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  /* the switch "marker" */
}
.c-switch__button:hover {
  color: #c0c0c0;
}
@media (pointer: coarse) {
  .c-switch__button:hover {
    color: #9f9f9f;
    /* [4] */
  }
}
.c-switch__button::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  height: 22px;
  width: 22px;
  border-radius: 100%;
  background-color: #fff;
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/**
 * The `checked` state of the switch
 * 1. Explicitly force coarse pointer devices to use non-hover colors in order to avoid sticky
 *    hover states on touch devices
 */
.c-switch__input:checked + .c-switch__button {
  color: #0073c5;
}
.c-switch__input:checked + .c-switch__button:hover {
  color: #73add8;
}
@media (pointer: coarse) {
  .c-switch__input:checked + .c-switch__button:hover {
    color: #0073c5;
    /* [1] */
  }
}
.c-switch__input:checked + .c-switch__button::before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

.c-switch__input:focus + .c-switch__button {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75);
}

/* ==========================================================================
   COMPONENTS / #TABLES
   ========================================================================== */
/* Base
   =========================================== */
.c-table-simple {
  border-collapse: collapse;
}

.c-table-simple__row {
  border-bottom: 1px solid #c0c0c0;
}

.c-table-simple__cell {
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

/* ==========================================================================
   COMPONENTS / #TABS
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Tabs
 *
 * Tabs are used for in-page navigation, switching between articles of content.
 *
 * Note: Appropriate containers are provided with the component, and should not
 *       be placed within `o-container`.
 *
 * 1. Compliment Toolkit's Vertical Rhythm.
 * 2. Align Header content to center.
 */
.c-tabs {
  display: block;
  position: relative;
  margin-bottom: 20px;
  /* [1] */
  text-align: center;
  /* [1] */
  color: #4a4a4a;
}

/* Header
  ---------------------------------- */
/**
 * Tabs Header
 *
 * A container for navigation, dividers and items.
 * It stretches to the full width of the screen.
 */
.c-tabs__header {
  display: inline-block;
  position: relative;
  width: 100%;
  margin: 0 auto 20px auto;
  /**
   * From `medium` screens upwards, sretch to the size of contents, but no
   * larger than the container.
   */
}
@media (min-width: 46.25em) {
  .c-tabs__header {
    padding: 0 20px;
    min-width: 70%;
    max-width: 1200px;
    width: auto;
  }
}

/**
 * Tabs Divider
 *
 * Tabs Dividers are a purely cosmetic feature of Tabs, visually separating
 * Tabs content and navigation from the rest of the page.
 *
 * They should be applied separately above and below `.c-tabs__nav` using the
 * appropriate modifiers provided.
 */
.c-tabs__divider {
  display: block;
  position: relative;
  height: 1px;
  width: 100%;
  margin: 0;
  /**
   * Tabs Divider - Gradient Border and Shadow
   *
   * Shared pseudo-element stucture.
   */
  /**
   * Tabs Divider - Gradient Border
   */
  /**
   * Tabs Divider - Shadow
   *
   * Shared height for top and bottom shadow.
   */
}
.c-tabs__divider::before, .c-tabs__divider::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
}
.c-tabs__divider::before {
  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));
  height: 1px;
  z-index: 10;
}
.c-tabs__divider::after {
  height: 15px;
  width: 130%;
  margin-left: -15%;
}

/**
 * Tabs Divider (Top)
 *
 * Modifier for use on the divider *above* `.c-tabs__nav`, providing gradient
 * border positioning and the appropriate shadow.
 */
.c-tabs__divider--top {
  /**
   * Tabs Divider (Top) - Gradient Border
   */
  /**
   * Tabs Divider (Top) - Shadow
   */
}
.c-tabs__divider--top::before {
  bottom: 0;
}
.c-tabs__divider--top::after {
  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%);
  bottom: 0;
}

/**
 * Tabs Divider (Bottom)
 *
 * Modifier for use on the divider *below* `.c-tabs__nav`, providing gradient
 * border positioning and the appropriate shadow.
 */
.c-tabs__divider--bottom {
  margin-top: -1px;
  /**
   * Tabs Divider (Bottom) - Gradient Border
   */
  /**
   * Tabs Divider (Bottom) - Shadow
   */
}
.c-tabs__divider--bottom::before {
  top: 0;
}
.c-tabs__divider--bottom::after {
  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: 0;
}

/**
 * Tabs Navigation
 *
 * A container for navigation, dividers and items.
 * It stretches to the full width of the header.
 *
 * 1. Hide overflow to prevent showing scrollbar on `c-tabs__list`.
 * 2. Extra padding to allow the divider to fade out gracefully.
 */
.c-tabs__nav {
  height: 100%;
  width: 100%;
  padding: 0;
  overflow: hidden;
  /* [1] */
}
@media (min-width: 46.25em) {
  .c-tabs__nav {
    padding: 0 20px;
    /* [2] */
  }
}

/**
 * Tabs List
 *
 * The list of Tabs Navigation items, displayed horizontally.
 *
 * 1. Extend the list at the bottom edge to hide the scrollbar.
 */
.c-tabs__list {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 0 -20px 0;
  /* [1] */
  padding-bottom: 20px;
  /* [1] */
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

/**
 * Tabs Item
 *
 * Individual list item of Tabs Navigation.
 */
.c-tabs__item {
  margin-right: 20px;
  padding: 5px 0 6px 0;
}
.c-tabs__item:first-child {
  margin-left: 20px;
}

/**
 * Tabs Link
 *
 * The "Tabs"; the key interaction for switching between Tabs Articles.
 * Can be used on `<a>` or `<button>`.
 */
.c-tabs__link {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  color: inherit;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  /**
   * Tabs Link - Indicator
   *
   * The underline / bottom-border indicator, displayed on hover and when a
   * Tabs Link is set to active.
   *
   * 1. Slightly extend the width of the indicator.
   */
  /**
   * Tabs Link - Indicator (Interaction)
   *
   * Remove default link styles and animate the border upwards.
   */
}
.c-tabs__link::after {
  content: "";
  position: absolute;
  display: block;
  left: -5px;
  /* [1] */
  right: -5px;
  /* [1] */
  bottom: -6px;
  height: 2px;
  z-index: 20;
  background-color: #4a4a4a;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.c-tabs__link:hover, .c-tabs__link:focus, .c-tabs__link.is-active {
  text-decoration: none;
  outline: none;
}
.c-tabs__link:hover::after, .c-tabs__link:focus::after, .c-tabs__link.is-active::after {
  transform: none;
  opacity: 1;
}

/* Content
  ---------------------------------- */
/**
 * Tabs Content
 *
 * A container for the articles and main content of Tabs.
 * It sits directly below the Tabs Header and stretches full width.
 *
 * 1. Reset text-alignment by `.c-tabs`.
 */
.c-tabs__content {
  display: block;
  position: relative;
  text-align: left;
  /* [1] */
  overflow: hidden;
}

/**
 * Tabs Article
 *
 * The individual articles of Tabs.
 * Each article is stacked on top of eachother until activated.
 */
.c-tabs__article {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/**
 * Tabs Body
 *
 * A container for the individual article inner-content. This is wrapped
 * separately to allow for complex transitions.
 */
.c-tabs__body {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s;
  transition-delay: 0s, 0.25s;
}

/* States
  ============================================ */
/**
 * Tabs Link (Active)
 *
 * When a Tab is activated, the `.is-active` class should be toggled.
 * Further cosmetics are implemented above with the main Tabs Link interaction.
 */
.c-tabs__link.is-active {
  font-weight: bold;
}

/**
 * Tabs Article (Active)
 *
 * When a Tab Link is activated, the `.is-active` class should be toggled on the
 * related article too.
 *
 * 1. Delay to prevent cross-fade of content.
 */
.c-tabs__article.is-active {
  position: relative;
  z-index: 10;
}
.c-tabs__article.is-active > .c-tabs__body {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.25s;
  /* [1] */
}

/* Modifiers
  ============================================ */
/**
 * Dark Tabs
 *
 * For Tabs that need to appear in dark areas of UI.
 * e.g. Within `c-panel--dark`.
 */
.c-tabs--dark {
  color: #fff;
}
.c-tabs--dark .c-tabs__divider {
  /* Reduce the intensity of divider shadows */
}
.c-tabs--dark .c-tabs__divider::before {
  background: #fff;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
}
.c-tabs--dark .c-tabs__divider::after {
  opacity: 0.25;
}
.c-tabs--dark .c-tabs__divider--top::after {
  background: -webkit-radial-gradient(50% 100%, #fff, transparent 40%);
  background: -moz-radial-gradient(50% 100%, #fff, transparent 40%);
  background: -ms-radial-gradient(50% 100%, #fff, transparent 40%);
  background: -o-radial-gradient(50% 100%, #fff, transparent 40%);
  background: radial-gradient(at 50% 100%, #fff, transparent 40%);
}
.c-tabs--dark .c-tabs__divider--bottom::after {
  background: -webkit-radial-gradient(50% 0%, #fff, transparent 40%);
  background: -moz-radial-gradient(50% 0%, #fff, transparent 40%);
  background: -ms-radial-gradient(50% 0%, #fff, transparent 40%);
  background: -o-radial-gradient(50% 0%, #fff, transparent 40%);
  background: radial-gradient(at 50% 0%, #fff, transparent 40%);
}
.c-tabs--dark .c-tabs__link::after {
  background-color: #fff;
}

/**
 * Full-Width Tabs
 *
 * By default, Tabs Header is kept inside a container to match `o-container`,
 * this modifier overrides the Tabs Header to stretch full-width.
 */
@media (min-width: 46.25em) {
  .c-tabs--full .c-tabs__header {
    display: block;
  }
}
@media (min-width: 46.25em) {
  .c-tabs--full .c-tabs__nav {
    padding: 0;
  }
}

/* ==========================================================================
   COMPONENTS / #TOOLTIP
   ========================================================================== */
/* Base
  =========================================== */
/**
 * Tooltip
 *
 * Tooltip wrapper to contain content and trigger. Uses `before` pseudo for
 * bubble marker, and `after` for page whitewash.
 *
 * 1. Allows full width positioning for small devices and correct alignment for
 *    medium devices.
 */
.c-tooltip {
  display: inline-block;
}
@media (min-width: 46.25em) {
  .c-tooltip {
    position: relative;
    /* [1] */
  }
}

.c-tooltip__content {
  display: none;
}

/* States
  =========================================== */
/**
 * `.is-active`
 * By default, Tooltips are triggered on click by toggling the `is-active`class.
 *
 * `c-tooltip--hover`
 * Tooltips can also be displayed on `:hover` of the trigger by applying the
 * `c-tooltip--hover` modifier to the component.
 */
.c-tooltip.is-active,
.c-tooltip--hover:hover {
  /**
   * Tooltip Trigger
   *
   * The trigger can be any element
   *
   * 1. Trigger is layered above whitewash
   */
  /**
   * Tooltip Indicator
   *
   * 1. Position marker centrally below trigger and above content
   * 2. Because marker is rotated, we need to double the size to give true size
   * 3. Marker needs it's own shadow with negative spread to only show on one side
   * 4. Subtle border to make marker more defined on white backgrounds
   */
  /**
   * Tooltip Content
   *
   * The bubble of content that appears when triggered
   *
   * 1. Layer above whitewash
   * 2. On mobile we need full width; we use left and right positioning to achieve
   * 3. Position left aligned beneath the trigger
   * 4. Take away the margin bottom on the last child, helps prevent unwanted paragraph
   *    margins
   */
}
.c-tooltip.is-active .c-tooltip__trigger,
.c-tooltip--hover:hover .c-tooltip__trigger {
  position: relative;
  z-index: 83;
  /* [1] */
}
.c-tooltip.is-active .c-tooltip__trigger::after,
.c-tooltip--hover:hover .c-tooltip__trigger::after {
  /*! autoprefixer: off */
  content: "";
  position: absolute;
  top: 100%;
  /* [1] */
  left: 50%;
  /* [1] */
  margin-left: -10px;
  /* [1] */
  width: 20px;
  /* [2] */
  height: 20px;
  /* [2] */
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #fff;
  box-shadow: -2px -2px 14px -10px #000;
  /* [3] */
  border-color: #eaeaea;
  /* [4] */
  border-style: solid;
  border-width: 1px 0 0 1px;
  /* [4] */
}
.c-tooltip.is-active .c-tooltip__content,
.c-tooltip--hover:hover .c-tooltip__content {
  font-size: 18px;
  font-size: 1rem;
  line-height: 1.44;
  display: block;
  position: absolute;
  z-index: 82;
  /* [1] */
  left: 20px;
  /* [2] */
  right: 20px;
  /* [2] */
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 0.25em;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}
@media (min-width: 46.25em) {
  .c-tooltip.is-active .c-tooltip__content,
  .c-tooltip--hover:hover .c-tooltip__content {
    top: 100%;
    /* [3] */
    left: 0;
    /* [3] */
    right: auto;
    /* [3] */
    width: 20em;
  }
}
.c-tooltip.is-active .c-tooltip__content :last-child,
.c-tooltip--hover:hover .c-tooltip__content :last-child {
  margin-bottom: 0;
  /* [4] */
}

/**
 * `.is-active` Whitewash
 *
 * 1. Whitewash sits above the document but below the tooltip content & trigger
 *    and only on click based tooltips
 */
.c-tooltip.is-active::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 81;
  /* [1] */
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
}

/**
 * `c-tooltip--hover` "Bridge"
 *
 * Transparent pseudo element to increase surface area from trigger to content.
 */
.c-tooltip--hover:hover .c-tooltip__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 10px;
  background-color: transparent;
}

/* Modifiers
  =========================================== */
/**
 * Right-aligned Tooltip
 *
 * Aligns the tooltip to the right. Used when the trigger is aligned to the
 * right of a page or container.
 *
 * 1. Double up the selector’s specificity in order to override the hover and
 *    active states for the Tooltip indicator and content.
 */
/* stylelint-disable max-nesting-depth */
.c-tooltip--right.c-tooltip--right {
  /* [1] */
}
@media (min-width: 46.25em) {
  .c-tooltip--right.c-tooltip--right .c-tooltip::after,
  .c-tooltip--right.c-tooltip--right .c-tooltip__content {
    left: auto;
    right: 0;
  }
}

/* stylelint-enable */
/* ==========================================================================
   COMPONENTS / #COSTING
   ========================================================================== */
/* Base
  ============================================ */
/**
 * Costing
 *
 * 1. We need to use non-standard font sizing at different breakpoints in order
 *    to align various blocks of text in this component
 */
.c-costing {
  font-size: 14px;
  font-size: 0.77778rem;
  /* [1] */
}
@media (min-width: 46.25em) {
  .c-costing {
    font-size: 16px;
    font-size: 0.88889rem;
    /* [1] */
  }
}

/**
 * Costing Price
 *
 * 1. We'll be positioning children relative to this element
 * 2. Non-standard line height to align various text nodes
 * 3. Fractional values (pence) display smaller than main values (pounds)
 * 4. Position fractional values to the top right of the price.
 *    Magic number for `top` value is unfortunate but necessary to align with
 *    line-height of parent
 */
.c-costing__price {
  font-size: 36px;
  font-size: 2rem;
  position: relative;
  /* [1] */
  line-height: 1;
  /* [2] */
}
@media (min-width: 46.25em) {
  .c-costing__price {
    font-size: 48px;
    font-size: 2.66667rem;
  }
}
.c-costing__price .c-price__fractional {
  font-size: 14px;
  font-size: 0.77778rem;
  /* [3] */
  position: absolute;
  /* [4] */
  top: 0.55em;
  /* [4] */
  left: 100%;
  /* [4] */
  margin-left: 5px;
  /* [4] */
}
@media (min-width: 46.25em) {
  .c-costing__price .c-price__fractional {
    font-size: 16px;
    font-size: 0.88889rem;
    /* [3] */
  }
}

/**
 * Costing Prefix & Suffix
 *
 * 1. Non-standard line height to reduce space between prefix and price
 * 2. Position suffix beside the price
 */
.c-costing__prefix {
  line-height: 1;
  /* [1] */
}

.c-costing__suffix {
  display: inline-block;
  /* [2] */
  vertical-align: baseline;
  /* [2] */
  margin: 0 5px;
  /* [2] */
}

/**
 * Costing Striked Price
 *
 * 1. Keep separate from price and/or suffix
 * 2. Non-standard line height to reduce space between prefix and price
 */
.c-costing__strike {
  margin-left: 5px;
  /* [1] */
  line-height: 1;
  /* [2] */
}

/* Modifiers
  ============================================ */
/**
 * Costing Offer
 */
.c-costing--offer {
  /**
   * Apply offer colors to relevent elements
   */
  /**
   * Striked prices on offers are displayed above the price, so need to be on a
   * new line while maintaining width for the strikethrough line.
   */
  /**
   * Offer amounts should be placed on own line
   */
}
.c-costing--offer .c-costing__price,
.c-costing--offer .c-price__symbol {
  color: #f15a22;
}
.c-costing--offer .c-costing__strike {
  margin-left: 0;
  display: table;
}
.c-costing--offer .c-costing__offer-amount {
  display: block;
}

/**
 * Costing Small
 */
.c-costing--small {
  /**
   *  1. On smaller costs, suffixes don't display beneath fractional values, so
   *     we realign line-height and create additonal spacing
   */
  /**
   * Fractional values don't need offsetting for smaller prices
   */
}
.c-costing--small .c-costing__price {
  font-size: 22px;
  font-size: 1.22222rem;
  font-weight: bold;
  line-height: 1.5;
  /* [1] */
}
@media (min-width: 46.25em) {
  .c-costing--small .c-costing__price {
    font-size: 28px;
    font-size: 1.55556rem;
  }
}
.c-costing--small .c-price__fractional {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
}

/**
 * Footnote Marker
 *
 * Various accommodations to the footnote symbol based on the costing modifers
 */
.c-costing__price--footnote {
  /**
   * The symbol itself is adjacent to the element with modifers, hence the use
   * of '+'
   * 1. Potential use of prefix text limits space above values
   * 2. Unset any bolding applied to parent item
   */
}
.c-costing__price--footnote + .c-price__symbol {
  top: -0.25em;
  /* [1] */
  font-weight: normal;
  /* [2] */
  position: absolute;
  left: 100%;
  /* [1] */
  /* Conditional Modifiers
    -------------------------------- */
  /**
   * @at-root and .c-costing__price--footnote + .c-price__symbol allow us to combine modifer selectors with
   * 'c-costing__price--footnote' and apply to 'c-price__symbol'
   */
  /**
   * Price has fraction
   *
   * Fractionals take the form of an absolutely positioned number set to two
   * decimal places - we account for their spacing by adjusting our left value
   * by 2 characters
   *
   * Compiles to:
   * .c-costing__price--fraction.c-costing__price--footnote + .c-price__symbol
   */
  /**
   * Small display
   *
   * No additional absolutely positioned elements when small so we reset
   * symbol back to the left
   *
   * Compiles to:
   * .c-costing__price--small.c-costing__price--footnote + .c-price__symbol
   */
}
.c-costing__price--fraction.c-costing__price--footnote + .c-price__symbol {
  left: calc(100% + 2ch);
  /* [1] */
}
.c-costing__price--small.c-costing__price--footnote + .c-price__symbol {
  left: 100%;
  /* As font size increases, symbol needs adjustment to realign with text */
  /* stylelint-disable-next-line max-nesting-depth */
}
@media (min-width: 61.25em) {
  .c-costing__price--small.c-costing__price--footnote + .c-price__symbol {
    top: 0;
    /* [4] */
  }
}

/* ==========================================================================
   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.
 * 3. Default text color, this should be customised with a modifier class.
 * 4. Hero images set via background-image should cover and center.
 */
.c-hero {
  position: relative;
  /* [1] */
  height: 60vh;
  /* [2] */
  min-height: 20em;
  /* [2] */
  color: #fff;
  /* [3] */
  background-position: center;
  /* [4] */
  background-size: cover;
  /* [4] */
  /**
   * 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 / #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
 */
.c-tile__content {
  position: relative;
  overflow: hidden;
}
.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 Elemtents 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 positionined 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-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%);
}

/* ==========================================================================
   COMPONENTS / #SELECT
   ========================================================================== */
/* Base
   =========================================== */
/**
 * Select
 *
 * 1. Allows styling of box model properties.
 * 2. Allows absolute positioning of child pseudo-elements.
 * 3. Prevent overlap of border-radius by border-width.
 */
.c-select {
  display: inline-block;
  /* [1] */
  position: relative;
  /* [2] */
  padding-left: 1px;
  /* [3] */
}

/**
 * Select Button
 *
 * For inputs used as a select action (`.c-select`).
 * This should be applied as a BEM Mix [A] alongside `.c-btn  .c-btn--select`.
 * e.g. `<span class="c-btn  c-btn--select  c-select__btn">Select</span>`
 *
 * 1. As the icon is being set as a background image, content can be left empty.
 * 2. Allows greater control of animation and movement.
 * 3. Set a fixed width for the icon container to fill.
 * 4. Fixes and fills to the right-hand side of `.c-select`.
 * 5. Sets the background colour behind the icon.
 * 6. Sets the background image to the icon, contained and centered.
 * 7. As the icon is being set as a background image, a transparent border
 *    provides a similar effect to padding.
 * 8. Add a border-radius to the right-hand side of the icon container.
 * 9. Transition the icon conatiner's movement along the x-axis. Set the start
 *    postition out of view, considering the border-width.
 */
.c-select__btn {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 26px;
  display: block;
  position: relative;
  border: 1px solid #0073c5;
  overflow: hidden;
}
.c-select__btn::after {
  /*! autoprefixer: off */
  content: "";
  /* [1] */
  position: absolute;
  /* [2] */
  width: 40px;
  /* [3] */
  top: 0;
  /* [4] */
  right: 0;
  /* [4] */
  bottom: 0;
  /* [4] */
  background-color: #73add8;
  /* [5] */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAM1BMVEX////w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7////C7fNeAAAAAXRSTlMAQObYZgAAAVBJREFUeNrt2MtOA0EMRNFAeDPTU///tUhZxJGQuKxcJtTdd+vI8sqnlFJKKaWU0l20pDXMAyKDR9qHeaQ1zCMdEzy7bpvm0TSPpnk0zaNpHk3zaJpH8fzoOeKJ5448K5544vk3nj2eeOKJJ55LWzzxxBNPPH/bsySDBx5P80jTPNKY/bk2wqPbpniqZg+D1OxhkJo9DFKzh0Fq9jBIBg+IHJ7qAFGXp1og6vCwyOCBvwweElnvCRuIOubDIoMHRA5P9Qmijv1hkcNTfYCow8Miw/6AyHvPfAdRh4dFDk/1RiL2GETgMYjAYxFtPZ5LryCC+TSJHJ7qBUTgaRI59qd61vfAYxCBxyCC/TGIYD4GkQye6sngAZHBgyL2GER+T3U2eEAEHoMIPH5ReVw9kscvKo9fVB6vCDxeUXn8ovL4ezB5+LZwSimllFJKKaVf9gXIMq5peLHXMwAAAABJRU5ErkJggg==");
  /* [6] */
  background-repeat: no-repeat;
  /* [6] */
  background-position: center;
  /* [6] */
  background-size: contain;
  /* [6] */
  border: solid 5px transparent;
  /* [7] */
  transition: transform 0.25s ease, background-color 0.25s ease;
  /* [9] */
  -ms-transform: translate(41px, 0);
  /* [9] */
  -webkit-transform: translate(41px, 0);
  /* [9] */
  transform: translate(41px, 0);
  /* [9] */
}

/**
 * Select Input
 *
 * Hides the checkbox input.
 */
.c-select__input {
  /* Hiding elements visually overrides any matching property declarations */
  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;
}
.c-select__input:focus + .c-select__btn {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 15px 3px rgba(115, 173, 216, 0.75);
}
.c-select__input:hover + .c-select__btn:not(.is-disabled) {
  border-color: #73add8;
}
.c-select__input:checked + .c-select__btn:not(.is-disabled) {
  border-color: #0073c5;
}
.c-select__input:checked + .c-select__btn:not(.is-disabled)::after {
  background-color: #0073c5;
}

/**
 * Positions the select indicator to be visible, reducing inner content padding
 * to fit.
 */
.c-select__btn:active:not(.is-disabled),
.c-select__btn:hover:not(.is-disabled),
.c-select__input:active + .c-select__btn:not(.is-disabled),
.c-select__input:checked + .c-select__btn:not(.is-disabled) {
  padding-left: 20px;
  padding-right: 60px;
}
.c-select__btn:active:not(.is-disabled)::after,
.c-select__btn:hover:not(.is-disabled)::after,
.c-select__input:active + .c-select__btn:not(.is-disabled)::after,
.c-select__input:checked + .c-select__btn:not(.is-disabled)::after {
  /*! autoprefixer: off */
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* States
   =========================================== */
/**
 * Selected state to display cancel icon on hover
 */
.c-select__input.is-selected + .c-select__btn::after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDQ0NEY0NzAyNUNCMTFFNkFFNDBGQkYwODMwQkUyRkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDQ0NEY0NzEyNUNCMTFFNkFFNDBGQkYwODMwQkUyRkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNDQ0RjQ2RTI1Q0IxMUU2QUU0MEZCRjA4MzBCRTJGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNDQ0RjQ2RjI1Q0IxMUU2QUU0MEZCRjA4MzBCRTJGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po+bp+sAAAVYSURBVHja7N3Pi1VlHMfxM49Cq4IskKhN0cKFDogLiSIIwkSjTTsTEfO67L/wHxAEx34MEbRuUwSBKLjRIBAHFBM3JQj+CKWFLcbp+zDPhdG86bnnec7zfb7f9wc+C+d6z8ycec33OXfuvecsrK2tdYTMm8AuIAAiACIAIgAiBEAEQARABECEAIgAiPgB9KL0B+lRdq2PbM64ra3SH6W7pJ+kj33FLlaVbdI3pJektzVNoDel5xOemAXpaSaRmnwgXZFekf4i/UN6Mq0Yg7KQ4eUci9Kfpa895ba48WNMoqqJv8SnpJuectsN6X7p1VoTaLf03Aw8TKL6maT9v2nG7W+lleOdGhNoR8Lz8nP8XyZRHTxL6Zf4Wbkv3SO9OBaguHb+Jn27x31ANF6OpWVrocd97qZjpctjLGHHe+JhOdONJ+YV6U/pUVrRCRQ/0U3pC3N+g0wifXg2Jk6g96QPSk2gxQF4mES68UyPbZdLLmG3MnyzINKJJ+ZRt/4H4WKArvQ90AJRU3jio7dvSh9EfyFdBZFvPEMAnU1f/BqI/OIZAqhLn+woiPziGQoIRM7x5AAEIsd4cgECkVM8OQGByCGe3IBA5AxPCUAgcoSnFCAQOcFTElApRBPw6MFTGlAJREsOEDWDZwxAIDKMZyxAIDKKZ0xAIDKIZ2xAIDKGpwYgEBnCUwsQiIzgqQnIOyITeGoD8orIDB4NgLwhMoVHCyAviMzh0QTIOiKTeLQBsorILB6NgKwhMo1HKyAriMzj0QyodUQu8GgH1CoiN3haANQaIld4WgHUCiJ3eFoCpB2RSzytAdKKyC2eFgFpQ+QaT6uAtCByj6dlQLURgccAoFqIwGMI0NiIwGMQ0FiIwGMYUGlE4Jm1ozJcL0xbjnTrl1HI8cOOO+d76QHw+AGUG1GumMNjbQkrtZyBxyEgTYjM4rEOSAMi03g8AKqJyDweL4BqIHKBxxOgMRG5weMN0BTRpCAiV3g8Aor5utAkcocnxuofEp8n30kPZt7eIW87MTjFE5/b+izzNg92Ds+oH5ziyfXE6GPTvHN4Rn1vgCaF8LhFFJzhWerKP8HqClEAD4gA9OxjnjHxuEIUHOA51dV7XZB5RAE8IAKQXjzmEQXw/G/i0xPfdlx50Q2gEu+eONxx+c6Z2QyemXjiD3k5/Xv6BGmOF+pPEU23xwQyOnmWn/g4FxI2CmjMN/2ByBigGu8YBZERQDXfbgyixgFpeK86iBoFpOlEB+4RBfAMfg2za0QBPFniFlEAT7a4RBTAAyLLgFo8M5grRAE8ILIIyMI5CV0gCuABkSVAFs+GahpRAA+ILADycB5mk4gCeEDUMiCPZ4A3hSiAB0QtAuLaE0YQBfCAqCVA4DGGKIAHRC0AAo9RRAE8INIMCDzGEQXwgEgjIPA4QRTAAyJNgMDjDFEAD4g0AAKPU0QBPCCqCQg8zhEF8IAoIfp8rjvPecE58OjIkS7PiT9jVqV7pGdKAwKPXUQr0sU+ky2Ah+VsQ7ZLt5U8BtoLHvOItpZcwl6SnpfuAI/J5eyh9HXpvVIT6IF0n/RP8KieRI/mvP/pPniGPAqLE+isdAt41E6iL3sOiGvSXdK/Sx4DTXM5TaL74FE7iSY9JtFt6ad98QwBFHNB+pH0DniaRvSX9OP0EL4bE9AU0bvS6zNuX01rMnh0IropfV96cd5PkOPJ1Lh27pSekP6z4eOXpB92/73qDdGB6Gr65V8ZsvF5D6Jn5dVu/Y9RUfbv/OzUHlj/mo5h7wzdaG5ARD+iCOfwPAfMACLZE9gFBEAEQARABECEAIgAiACIuMi/AgwAZOzDQjgUW1EAAAAASUVORK5CYII=");
}

/* Modifiers
   =========================================== */
/**
 * For selects that need to display full-width.
 */
.c-select--full {
  display: block;
  width: 100%;
}

/**
 * For selects that need to display full-width on small devices only.
 */
@media (max-width: 46.24em) {
  .c-select--full\@small-only {
    display: block;
    width: 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 overriden to the correct size on medium screens.
 */
@media (max-width: 46.24em) {
  .c-tile--fluid.c-tile--collapsible {
    font-size: 2.85714vw;
  }
}

/* ==========================================================================
   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;
  }
}

/*# sourceMappingURL=all.css.map */