@charset "UTF-8";
/**
 * section: M2DM
 * title: M2DM
 *
 * description:
 *   This is our M2DM collection of components.
 */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * section: M2DM/developer
 * title: Developer
 *
 * description: This section contains Radius configuration, settings and variables which are used across the library.
 */
/**
  * Change the origin of the font file so we can have different character-set for different countries
  * "SelfmadeSans-Black" for English with "ABCDEFGHIJKLMNOPQRSTUVWXYZ,.-' "
  * "SelfmadeSans-Black-Dutch" with the set "ABCDEFGHIJKLMNOPQRSTUVWXYZ,.-'ÀÁÂÄÈÉÊËÌÍÎÏÒÓÔÖÙÚÛÜÝŸ"
  * "SelfmadeSans-Black-German" with the set "ABCDEFGHIJKLMNOPQRSTUVWXYZ,.-'ÄÖÜß"
 **/
/**
 * section: M2DM/developer/dependencies
 * title: Dependencies
 *
 * description: Collection of external dependencies used across the library.
 */
/**
 * section: M2DM/developer/dependencies/breakpoints
 * title: Breakpoints
 *
 * description: |
 *   Use this mixin for dealing with breakpoints / responsive behaviour.
 *
 * variants:
 *   - mobile-small
 *   - mobile-medium
 *   - mobile-large
 *   - tablet-small
 *   - tablet-medium
 *   - tablet-large
 *   - desktop-small
 *   - desktop-medium
 *   - desktop-large
 *   - desktop-x-large
 *
 * layout: globals/scss/init/dependencies/breakpoints/breakpoints
 */
/** List of custom breakpoints.
 * This will override the default breakpoints defined in the rs-breakpoints package.
 */
/**
 * section: M2DM/developer/dependencies/grid-system
 * title: Grids / columns
 *
 * abstractLink: acadd5f8-8a55-4243-bc32-b32c3db62240
 *
 * layout: globals/scss/init/dependencies/grid-system/overview
 */
.col-s-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.col-s-wrapper > * {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: table-cell;
  vertical-align: top;
}
.col-s-1 {
  width: 1%;
}
.col-s-2 {
  width: 1.618%;
}
.col-s-3 {
  width: 2.617924%;
}
.col-s-4 {
  width: 4.235801032%;
}
.col-s-5 {
  width: 6.8535260698%;
}
.col-s-6 {
  width: 11.0890051809%;
}
.col-s-7 {
  width: 17.9420103827%;
}
.col-s-8 {
  width: 29.0301727992%;
}
.col-s-9 {
  width: 46.9708195891%;
}
.col-s-10 {
  width: 75.9987860952%;
}
@media only screen and (min-width: 480px) {
  .col-m-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .col-m-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell;
    vertical-align: top;
  }
  .col-m-1 {
    width: 1%;
  }
  .col-m-2 {
    width: 1.618%;
  }
  .col-m-3 {
    width: 2.617924%;
  }
  .col-m-4 {
    width: 4.235801032%;
  }
  .col-m-5 {
    width: 6.8535260698%;
  }
  .col-m-6 {
    width: 11.0890051809%;
  }
  .col-m-7 {
    width: 17.9420103827%;
  }
  .col-m-8 {
    width: 29.0301727992%;
  }
  .col-m-9 {
    width: 46.9708195891%;
  }
  .col-m-10 {
    width: 75.9987860952%;
  }
}
@media only screen and (min-width: 800px) {
  .col-l-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .col-l-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell;
    vertical-align: top;
  }
  .col-l-1 {
    width: 1%;
  }
  .col-l-2 {
    width: 1.618%;
  }
  .col-l-3 {
    width: 2.617924%;
  }
  .col-l-4 {
    width: 4.235801032%;
  }
  .col-l-5 {
    width: 6.8535260698%;
  }
  .col-l-6 {
    width: 11.0890051809%;
  }
  .col-l-7 {
    width: 17.9420103827%;
  }
  .col-l-8 {
    width: 29.0301727992%;
  }
  .col-l-9 {
    width: 46.9708195891%;
  }
  .col-l-10 {
    width: 75.9987860952%;
  }
}
@media only screen and (min-width: 1200px) {
  .col-xl-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .col-xl-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell;
    vertical-align: top;
  }
  .col-xl-1 {
    width: 1%;
  }
  .col-xl-2 {
    width: 1.618%;
  }
  .col-xl-3 {
    width: 2.617924%;
  }
  .col-xl-4 {
    width: 4.235801032%;
  }
  .col-xl-5 {
    width: 6.8535260698%;
  }
  .col-xl-6 {
    width: 11.0890051809%;
  }
  .col-xl-7 {
    width: 17.9420103827%;
  }
  .col-xl-8 {
    width: 29.0301727992%;
  }
  .col-xl-9 {
    width: 46.9708195891%;
  }
  .col-xl-10 {
    width: 75.9987860952%;
  }
}

/**
 * section: M2DM/developer/functions
 * title: Helper functions
 *
 * description: Collection of helper functions used across the library.
 */
/**
 * section: M2DM/developer/functions/get-config
 * title: get-config
 *
 * description: |
 *   In order to avoid repetition and ensure consistency of basic rules, Radius comes with a configuration map which defines global settings, for instance the `baseline` or the agreed tshirt sizing rules. The configuration map itself lives in `init/config.scss` but you can extract the settings using this method.
 *
 * parameters: |
 *
 *   $key: the id of the setting
 *   $index: the index of the item, if setting contains a list
 *
 * sassUsage: |
 *
 *   get-config(baseline)
 *   get-config(tshirt-scale, 1)
 *
 */
/**
 * section: M2DM/developer/functions/get-remaining-columns-width
 * title: get-remaining-columns-width
 *
 * description: |
 *    Calculates and returns the total width of remaining columns.
 *
 * parameters: |
 *    $cols: Columns, e.g. "2 1 1"
 *    $excluded-column: The column to be excluded from the calculation
 *
 * sassUsage: |
 *    get-remaining-columns-width($cols, $excluded-column)
 *    get-remaining-columns-width(2 1 1, 3) //returns the combined width of all columns excluding third
 *
 */
/**
* section: M2DM/developer/functions/get-var
* title: get-var
*
* description: |
*    This method extracts the value of a key inside a map, by also making sure that an error message is returned when the key entered does not exist (`map-get()` only returns `null` when the key is not found).<br>
*
*
* sassUsage: |
*
*    get-var($colors, $color-name)
*
*/
/**
 * section: M2DM/developer/functions/str-split
 * title: Split string using a delimiter.
 *
 * description: |
 *   Returns a list of substrings.
 *
 *   ```
 *   str-split($string, $delimiter)
 *   //str-split('/some-path?query', '?') -> ('/some-path', '?query')
 *   ```
 */
/**
 * section: M2DM/developer/functions/svg-icon
 * title: svg-icon
 *
 * description: |
 *   Returns the svg corresponding to the icon name parameter.
 *
 *
 *   ### List of icons:
 *     - `tick`
 *
 *
 * sassUsage: |
 *
 *   svg-icon($icon-name)
 *
 */
/**
 * section: M2DM/developer/mixins
 * title: Mixins
 *
 * description: |
 *   Collection of mixins used across the library.
 */
/**
* section: M2DM/developer/mixins/get-single-column-width
* title: get-single-column-width
*
* description: |
*    This mixin extracts the width of the nth index corresponding to the column parameter as a percentage relative to the other columns.
*
*
* sassUsage: |
*
*    get-single-column-width(1 7 1)
*
*
*/
/**
 * section: M2DM/rules/colors
 * title: Colors
 *
 * layout: globals/scss/rules/colors
 *
 * purpose: Use to ensure brand consistency.
 *
 * description: |
 *   A palette of functional colors used to convey a message or highlight actions. Basic color names are used as key names (purple, green, blue, etc.) with various lighter shades as array elements. Above the base colour there will be a contrast colour which will be usually used as background for elements containing white text. Below the base colour there is a scale of lighter shades which is using a naming convension based on t-shirt sizing, starting from `light` and scaling down different levels of lightness depending on the base colour. Options for the lighter shades are: `light`, `x-light`, `2x-light`, `3x-light`, `4x-light` etc.<br>
 *
 * colors:
 *   - white:
 *     - colors__sample--white: get-color(white)
 *   - black:
 *     - colors__sample--black: get-color(black)
 *   - purple:
 *     - colors__sample--purple-contrast: get-color(purple, contrast)
 *     - colors__sample--purple-base: get-color(purple, base)
 *     - colors__sample--purple-light: get-color(purple, light)
 *     - colors__sample--purple-x-light: get-color(purple, x-light)
 *     - colors__sample--purple-2x-light: get-color(purple, 2x-light)
 *     - colors__sample--purple-3x-light: get-color(purple, 3x-light)
 *   - orange:
 *     - colors__sample--orange-contrast: get-color(orange, contrast)
 *     - colors__sample--orange-base: get-color(orange, base)
 *     - colors__sample--orange-light: get-color(orange, light)
 *     - colors__sample--orange-x-light: get-color(orange, x-light)
 *     - colors__sample--orange-2x-light: get-color(orange, 2x-light)
 *     - colors__sample--orange-3x-light: get-color(orange, 3x-light)
 *   - green:
 *     - colors__sample--green-contrast: get-color(green, contrast)
 *     - colors__sample--green-base: get-color(green, base)
 *     - colors__sample--green-light: get-color(green, light)
 *     - colors__sample--green-x-light: get-color(green, x-light)
 *     - colors__sample--green-2x-light: get-color(green, 2x-light)
 *     - colors__sample--green-3x-light: get-color(green, 3x-light)
 *   - red:
 *     - colors__sample--red-contrast: get-color(red, contrast)
 *     - colors__sample--red-base: get-color(red, base)
 *     - colors__sample--red-light: get-color(red, light)
 *     - colors__sample--red-x-light: get-color(red, x-light)
 *     - colors__sample--red-2x-light: get-color(red, 2x-light)
 *     - colors__sample--red-3x-light: get-color(red, 3x-light)
 *   - yellow:
 *     - colors__sample--yellow-contrast: get-color(yellow, contrast)
 *     - colors__sample--yellow-base: get-color(yellow, base)
 *     - colors__sample--yellow-light: get-color(yellow, light)
 *     - colors__sample--yellow-x-light: get-color(yellow, x-light)
 *     - colors__sample--yellow-2x-light: get-color(yellow, 2x-light)
 *     - colors__sample--yellow-3x-light: get-color(yellow, 3x-light)
 *   - blue:
 *     - colors__sample--blue-contrast: get-color(blue, contrast)
 *     - colors__sample--blue-base: get-color(blue, base)
 *     - colors__sample--blue-light: get-color(blue, light)
 *     - colors__sample--blue-x-light: get-color(blue, x-light)
 *     - colors__sample--blue-2x-light: get-color(blue, 2x-light)
 *     - colors__sample--blue-3x-light: get-color(blue, 3x-light)
 *   - grey:
 *     - colors__sample--grey-contrast: get-color(grey, contrast)
 *     - colors__sample--grey-base: get-color(grey, base)
 *     - colors__sample--grey-light: get-color(grey, light)
 *     - colors__sample--grey-x-light: get-color(grey, x-light)
 *     - colors__sample--grey-2x-light: get-color(grey, 2x-light)
 *     - colors__sample--grey-3x-light: get-color(grey, 3x-light)
 *     - colors__sample--grey-4x-light: get-color(grey, 4x-light)
 *
 * sassUsage: |
 *   get-color(purple)
 *   // if the base shade is requested the 2nd parameter should not be defined, as it is set to `base` by default
 *   get-color(purple, light)
 *   // the 2nd parameter defines the shade of the color - it is an optional parameter (please see above)
 */
/**
 * section: M2DM/rules/functions
 * title: Functions
 */
/**
* section: M2DM/rules/functions/get-color
* title: get-color
*
* description: |
*    This function returns one of the predefined shades of functional colours defined in `rules/colors`; it makes use of `get-var()` function which lives in `init/functions` to retrieve the key values of the colours map.<br>
*
* parameters: |
*    $color-name: one of the functional colours
*    $color-variant: variant of the functional colour
*
* sassUsage: |
*
*    get-color(purple)
*    get-color(purple, x-light)
*
*/
/**
 * section: M2DM/developer/functions/tshirt-to-index
 * title: tshirt-to-index
 *
 * description: |
 *   Converts tshirt size to a list index based on the tshirt scale defined in `init/config.scss`.
 *
 * parameters: |
 *
 *   $size
 *   : tshirt size as defined in `init/config.scss`
 *
 *
 * sassUsage: |
 *
 *   tshirt-to-index(small) // => 2
 *
 *
 */
/**
 * section: M2DM/rules/functions/vspace
 * title: vspace
 *
 * description: |
 *   Returns one of the predefined vertical spacing units which should be used on the vertical margins of components.
 *
 * parameters: |
 *
 *   $size: tshirt size  // as defined in `init/config.scss`
 *
 * sassUsage: |
 *
 *   margin-bottom: vspace(x-small);
 *   padding-bottom: vspace(medium);
 *
 * markup: globals/scss/rules/functions/vspace
 */
/**
 * section: M2DM/developer/utility-classes
 * title: Utility classes
 *
 * purpose: Use to help reduce duplication of repeated styles.
 *
 * description: Helpful, single responsibility classes for adding particular behavior and styling to your elements. These classes must use the `!important` rule to fix specificity issues.
 */
/**
 * section: M2DM/developer/utility-classes/alignment
 * title: Alignment
 *
 * description: |
 *   Modify an element with one of the utility classes to assist with alignment issues:
 *      - `u-text-center`: updates the text alignment of an element to center
 *      - `u-text-right`: updates the text alignment of an element to right
 *      - `u-block-center`: updates the horizontal alignment of a block element to center
 *      - `u-valign-center`: use this class on the container to align items in the middle of the cross axis (top to bottom). This class applies to the parent vertically centers items using Flexbox and the `align-items` property (N.B. Flexbox is not supported in IE9 and below).
 *      - `u-float-left`: floats the element left
 *      - `u-float-right`: floats the element right
 *      - `u-clear-both`: clears float for both sides
 *
 * layout: globals/scss/init/utility-classes/alignment
 */
.u-block-center {
  margin-right: auto !important;
  margin-left: auto !important;
}

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

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

.u-valign-center {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.u-float-left {
  float: left !important;
}

.u-float-right {
  float: right !important;
}

.u-clear-both::after {
  display: table;
  clear: both !important;
  content: "";
}

.u-clear-button-styles {
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none;
  border: 0;
}

/**
 * section: M2DM/developer/utility-classes/modifiers
 * title: Modifiers
 *
 * description: |
 *    Modify an element with one of the utility classes:
 *      - `u-whitespace-nowrap`: this class suppresses line breaks (text wrapping)
 *      - `u-text-uppercase`: this class transforms text to uppercase
 *      - `u-color-white`: this class transforms the colour of a component to white when sitting on dark backgrounds
 *      - `u-color-inherit`: this class inherits the colour from the closest parent that defines a colour
 *      - `u-text-attention`: this class to draw attention to text content through styling with a heavier font weight
 *
 * markup: globals/scss/init/utility-classes/modifiers
 */
.u-text-uppercase {
  text-transform: uppercase !important;
}

.u-color-white {
  color: rgb(255, 255, 255) !important;
}

.u-color-inherit {
  color: inherit !important;
}

.u-whitespace-nowrap {
  white-space: nowrap !important;
}

.u-text-attention {
  font-weight: bold !important;
}

/**
 * section: M2DM/developer/utility-classes/themes
 * title: Themes
 *
 * description: |
 *    Modify an element with one of the below theme utility classes to update the background colour of a section using colours defined in our colour palette (see: `rules/colors`):
 *
 * modifiers:
 *   u-theme-default: get-color(white)
 *   u-theme-contrast: get-color(grey, 4x-light)
 *   u-theme-accent: get-color(orange, 2x-light)
 *   u-theme-action: get-color(blue, 2x-light)
 *   u-theme-brand: get-color(purple)
 *   u-theme-brand-light: get-color(purple, 3x-light)
 *   u-theme-impact: get-color(grey, contrast)
 *   u-theme-green: get-color(green, 2x-light)
 *
 * markup: globals/scss/init/utility-classes/themes
 */
.u-theme-default {
  background-color: rgb(255, 255, 255) !important;
}

.u-theme-contrast {
  background-color: rgb(247, 248, 254) !important;
}

.u-theme-accent {
  background-color: rgb(255, 242, 236) !important;
}

.u-theme-action {
  background-color: rgb(238, 249, 255) !important;
}

.u-theme-brand {
  background-color: rgb(143, 68, 138) !important;
}

.u-theme-brand-light {
  background-color: rgb(249, 241, 250) !important;
}

.u-theme-impact {
  background-color: rgb(38, 40, 56) !important;
}

.u-theme-green {
  background-color: rgb(234, 255, 245) !important;
}

/**
 * section: M2DM/developer/utility-classes/spacing
 * title: Spacing
 *
 * description: |
 *   Utility class helpers to adjust vertical spacing.
 *   
 *   These spacing utility classes are for convenience in laying out components within a page in beside or within other components.
 *   
 *   Classes prefixed with `.u-m` are for adding margins, whereas classes prefixed with `.u-p` are for adding padding.
 *   
 *   Directions available for the spacing classes are top and bottom. The vertical shortcut (`v`) adds padding to the top **and** bottom - to apply padding between sections. 
 *   
 *   Note: these are not to be used to adjust the spacing within individual components - as the default margins and padding have already been set, these are designed for use between individual components to add a comfortable amount of spacing.
 *   
 *   | Letter  | Description |
 *   | :------ |:----------- |
 *   | `p`     | `padding`   |
 *   | `m`     | `margin`    |
 *   | ------- | ----------- |
 *   | `v`    | vertical     |
 *   | `b`    | bottom       | 
 *   
 *   | Variant    | Units(rem) |
 *   | :--------- |:---------  |
 *   | `none`     | 0          |
 *   | `x-small`  | 0.5        |
 *   | `small`    | 1          |
 *   | `medium`   | 1.5        |
 *   | `large`    | 2          |
 *   | `x-large`  | 2.5        |
 *   | `2x-large` | 3          |
 *   | `3x-large` | 3.5        |
 *   | `4x-large` | 4          |
 *   | `5x-large` | 5          |
 *   
 *   N.B. for our 2 largest vertical spacing utility classes - `u-pv-4x-large` and `u-pv-5x-large` the padding is reduced by 2rem in both directions on smaller screens (480px and below)
 *   
 * layout: globals/scss/init/utility-classes/spacing
 */
.u-mb-none {
  margin-bottom: 0 !important;
}

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

.u-mb-x-small {
  margin-bottom: 0.5rem !important;
}

.u-pv-x-small {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.u-mb-small {
  margin-bottom: 1rem !important;
}

.u-pv-small {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.u-mb-medium {
  margin-bottom: 1.5rem !important;
}

.u-pv-medium {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.u-mb-large {
  margin-bottom: 2rem !important;
}

.u-pv-large {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.u-mb-x-large {
  margin-bottom: 2.5rem !important;
}

.u-pv-x-large {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.u-mb-2x-large {
  margin-bottom: 3rem !important;
}

.u-pv-2x-large {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.u-mb-3x-large {
  margin-bottom: 3.5rem !important;
}

.u-pv-3x-large {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

.u-mb-4x-large {
  margin-bottom: 4rem !important;
}

.u-pv-4x-large {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media only screen and (max-width: 639px) {
  .u-pv-4x-large {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}
.u-mb-5x-large {
  margin-bottom: 5rem !important;
}

.u-pv-5x-large {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

@media only screen and (max-width: 639px) {
  .u-pv-5x-large {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}
.u-add-gutters {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media only screen and (min-width: 480px) {
  .u-add-gutters-responsive {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/**
 * section: M2DM/developer/utility-classes/fit-content
 * title: Fit content
 *
 * description: |
 *    The dimensions of an inline element is dictated by its content; sometimes, when larger than the ones of the container they live in, these dimensions can break the bounderies of their parent container.
 *    - `u-fit` - Binds an inline element dimensions to the content area it fits in, making it resize alonside its parent container.
 *
 *
 * layout: globals/scss/init/utility-classes/fit-content
 */
.u-fit {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: auto;
  max-width: 100%;
}

/**
 * section: M2DM/developer/utility-classes/horizontal-children
 * title: Horizontal children
 *
 * description: Makes children horizontal with spacing inbetween each child
 *
 * markup: globals/scss/init/utility-classes/horizontal-children
 */
.u-horizontal-children {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
}
.u-horizontal-children > *:not(:last-child) {
  margin-right: 1rem !important;
}

/**
 * section: M2DM/developer/utility-classes/responsive-image
 * title: Responsive image
 *
 * abstractLink: 6957da64-3d48-4513-8fa8-9b4f39160cfb
 *
 * description: |
 *    Helper class that allows for the simple treatment of images across multiple devices and resolutions.
 *  
 *    The class should be used directly on an `img` element.
 *  
 *    There are 3 types of image/illustrations based on the maximum width they're allowed to reach at different breakpoints (the breakpoints have been agreed on by the design team):
 *      - `u-responsive-img-small`
 *      - `u-responsive-img-medium`
 *      - `u-responsive-img-large`
 *
 *
 * layout: globals/scss/init/utility-classes/responsive-image
 */
.u-responsive-img-small, .u-responsive-img-medium, .u-responsive-img-large {
  display: block;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.u-responsive-img-large {
  max-width: 18rem;
}

.u-responsive-img-medium {
  max-width: 11rem;
}

.u-responsive-img-small {
  max-width: 5.5rem;
}

@media only screen and (min-width: 640px) {
  .u-responsive-img-large {
    max-width: 23rem;
  }
  .u-responsive-img-medium {
    max-width: 14rem;
  }
  .u-responsive-img-small {
    max-width: 7rem;
  }
}
@font-face {
  font-family: "Amasis";
  font-style: normal;
  font-weight: 400;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.ttf") format("truetype");
}
@font-face {
  font-family: "Amasis";
  font-style: normal;
  font-weight: normal;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd.ttf") format("truetype");
}
@font-face {
  font-family: "Amasis";
  font-style: normal;
  font-weight: 700;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.ttf") format("truetype");
}
@font-face {
  font-family: "Amasis";
  font-style: normal;
  font-weight: bold;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/amasis/AmasisMTStd-bold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: bold;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/roboto/Roboto-bold.ttf") format("truetype");
}
@font-face {
  font-family: "Selfmade-Sans";
  font-style: normal;
  font-weight: bold;
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/selfmade-sans/SelfmadeSans-Black.eot");
  src: url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/selfmade-sans/SelfmadeSans-Black.eot?#iefix") format("embedded-opentype"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/selfmade-sans/SelfmadeSans-Black.woff2") format("woff2"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/selfmade-sans/SelfmadeSans-Black.woff") format("woff"), url("https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/fonts/selfmade-sans/SelfmadeSans-Black.ttf") format("truetype");
}
html {
  font-size: 16px;
  line-height: 1.5;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /**
   * section: M2DM/rules/typography/responsive
   * title: Responsive typography rules
   *
   * description: |
   *  Responsive typography allows us to scale the font proportionally to the available screen width. Also, because we declare all component dimensions in rem units and/or percentages, the UI elements will scale along with the font. This means that we can partially mitigate the "stripiness" issue on large screens where main content has a max-width and is surrounded by large full bleed stripes of background colour, and we make sure the text remains comfortably legible.
   *
   *  The current formula has been derived by taking two common screen resolutions, finding a good font size for those and finding the equation of a line connecting the two using the slope-intercept formula.
   *
   *  So, given the points:
   *    - for 1280px => 16px
   *    - for 1920px => 20px
   *
   *  we can find the slope of the curve:
   *  ```
   *  slope = (20 - 16) / (1920 - 1280)
   *  slope =  1/160
   *  ```
   *
   *  From this, we can find the intercept:
   *  ```
   *  intercept = 16 - (1280 * (1/160))
   *  intercept = 8
   *  ```
   *
   *  Therefore giving us an equation for screen sizes greater than 1280px:
   *  ```
   *  font-size = screen-width / 160 + 8
   *  ```
   *
   *  In CSS, `screen-width` can be substituted with `100vh` therefore giving us our responsive typography formula.
   *
   *  QED
   */
}
@media only screen and (min-width: 1280px) {
  html {
    font-size: calc(0.625vw + 8px);
  }
}

html,
body {
  height: 100%;
  min-height: 100%;
}

*,
*::after,
*::before {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  font-family: "Roboto", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgb(66, 69, 84);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: rgb(0, 155, 222);
  text-decoration: none;
}

sup {
  top: 0.5rem;
  font-size: 60%;
  vertical-align: text-top;
}

/**
 * section: M2DM/rules
 * title: Rules
 *
 * description: |
 *   Rules (much like atoms in Atomic design) represent the indivisible building blocks of components, things like typography, vertical spacing or colours.
 */
/**
 * section: M2DM/rules/functions
 * title: Functions
 */
/**
* section: M2DM/rules/functions/get-color
* title: get-color
*
* description: |
*    This function returns one of the predefined shades of functional colours defined in `rules/colors`; it makes use of `get-var()` function which lives in `init/functions` to retrieve the key values of the colours map.<br>
*
* parameters: |
*    $color-name: one of the functional colours
*    $color-variant: variant of the functional colour
*
* sassUsage: |
*
*    get-color(purple)
*    get-color(purple, x-light)
*
*/
/**
 * section: M2DM/developer/functions/tshirt-to-index
 * title: tshirt-to-index
 *
 * description: |
 *   Converts tshirt size to a list index based on the tshirt scale defined in `init/config.scss`.
 *
 * parameters: |
 *
 *   $size
 *   : tshirt size as defined in `init/config.scss`
 *
 *
 * sassUsage: |
 *
 *   tshirt-to-index(small) // => 2
 *
 *
 */
/**
 * section: M2DM/rules/functions/vspace
 * title: vspace
 *
 * description: |
 *   Returns one of the predefined vertical spacing units which should be used on the vertical margins of components.
 *
 * parameters: |
 *
 *   $size: tshirt size  // as defined in `init/config.scss`
 *
 * sassUsage: |
 *
 *   margin-bottom: vspace(x-small);
 *   padding-bottom: vspace(medium);
 *
 * markup: globals/scss/rules/functions/vspace
 */
/**
 * section: M2DM/rules/typography
 * title: Typography
 *
 * description: |
 *  Roboto is our typeface for body copy, used in regular and bold weights for standard paragraph-size text and below, as well as all buttons.
 *  Amasis MT regular and bold. This is our main typeface for headings, sub headings and call out copy on all brand work.
 *  Selfmade-Sans is available on black weight only and is used for leading headlines in our main brand work. This is our main brand font and represents the thousands of small business owners we help and the investors who support them. Each letter is made out of a fingerprint pattern.
 *  
 *  Roboto fallback is Arial
 *  Amasis fallback is Georgia
 *  Selfmade-Sans fallback is Impact
 *
 */
/**
 * section: M2DM/rules/typography/font
 * title: Fonts
 *
 * description: |
 *   Funding Circle uses a font scaling method called the ditonic golden ratio.<br>
 *   In order to make sure you are using the correct font size, you can send a note (parameter) to a mixin called `font()`
 *
 *   The `font()` mixin also will automatically adjust the `line-height` to the correct value (the `line-height` is the first multiple of the get-const(config, baseline)).
 *
 *   If you want to disable the `line-height`, set the 2nd parameter to `false`.
 *
 *   Options for font size (t-shirt sizing):
 *   `x-small, small, medium, large, x-large, 2x-large, 3x-large, 4x-large, 5x-large, 6x-large`
 *
 * 
 *   E.g. of usage:
 *   ```
 *   .example-element {
 *     @include font(x-large, [$line-height: true/false]);
 *   }
 *   ```
 *
 * modifiers:
 *   font-size-x-small - font-size .625rem, line-height 1rem : '@include font(x-small);'
 *   font-size-small - font-size .8125rem, line-height 1rem : '@include font(small);'
 *   font-size-medium - font-size 1rem, line-height 1.5rem : '@include font(medium);'
 *   font-size-large - font-size 1.25rem, line-height 1.5rem : '@include font(large);'
 *   font-size-x-large - font-size 1.625rem, line-height 2rem : '@include font(x-large);'
 *   font-size-2x-large - font-size 2.0625rem, line-height 2.5rem : '@include font(2x-large);'
 *   font-size-3x-large - font-size 2.625rem, line-height 3rem : '@include font(3x-large);'
 *   font-size-4x-large - font-size 3.3125rem, line-height 3.5rem : '@include font(4x-large);'
 *   font-size-5x-large - font-size 4.25rem, line-height 4.5rem : '@include font(5x-large);'
 *   font-size-6x-large - font-size 5.375rem, line-height 5.5rem : '@include font(6x-large);'
 * 
 * markup: globals/scss/rules/typography/mixins/font
 */
/**
 * section: M2DM/rules/typography/brand-heading
 * title: Brand Heading
 *
 * activateComponent: radius-component-brand-heading
 *
 * abstractLink: 92fbb39b-8689-4eca-9bc8-c9a544d911ae
 *
 * description: |
 *  Styled header with brand (self made) font and colored with brand color. Can take an accent if 
 *  configured to do so. Can be both left or center aligned according to configuration.
 *   
 *  ### Element
 *     - `brand-heading`: header with brand font and brand color (purple). Adjusts in size with viewport.
 *     There is a specific modifier for the brand-hero brand-heading--hero which is responsible for the color and adding a new size for larger breakpoints. There is also a modifier class brand-heading--small for use in long German words, which is responsible for amending the font-size across different breakpoints.
 *      
 *     
 *  ### Variations:
 *     - `text-block__heading-bar--brand`: Puts an accent below the header
 *     - `text-block--center`: If on an ancestor element of header el, header text and any accent will be centered.
 *     - `brand-heading--hero`: for using within the brand hero
 *     - `brand-heading--small`: for using within the brand hero, with long words.
 *     - `u-color-white`: modifier added to change text color from default on a dark background.  
 *
 * markup: globals/scss/rules/typography/headings/brand-heading
 *
*/
/**
* section: M2DM/rules/typography/paragraph headings
* title: Paragraph Headings
*
* activateComponent: radius-component-paragraph-heading
*
* abstractLink: 92fbb39b-8689-4eca-9bc8-c9a544d911ae
*
* purpose: Use to identify new topics within a section.
*
* description: |
*   Paragraph headings have 3 variants: `--large`, `--medium` and `--small` responsible for controlling the font size. They use `Amasis MT` as their typeface, except the `--small` variant which uses `Roboto` for clarity purposes.
*
* markup: globals/scss/rules/typography/headings/paragraph-heading
*
*/
/**
* section: M2DM/rules/typography/section headings
* title: Section Headings
*
* activateComponent: radius-component-section-heading
*
* abstractLink: 92fbb39b-8689-4eca-9bc8-c9a544d911ae
*
* purpose: Use to identify a new section within the page.
*
* description: |
*   The main typeface for section headings is `Amasis MT`. Section headings have 3 variants: `--large`, `--medium` and `--small` responsible for controlling the font size. The `--large` variant is used to convey singular, bold brand messages, while the `--medium` variant is used to accomodate more content when there's more information to convey.
*   
*   
* markup: globals/scss/rules/typography/headings/section-heading
*/
/**
* section: M2DM/rules/typography/label
* title: Label
*
* activateComponent: radius-component-label
*
* purpose: Use to describe or contextualise the content that it is placed with.
*
* description: |
*   The '--small' variant is described by uppercased text in `small` font size; often used to entitle regular size content.
*   
*   The `--accent` variant draws attention by uppercasing the text and changing its colour to `accent-orange`; it is usually used in the context of the `feature` or `bullet` list components.
*
* markup: globals/scss/rules/typography/label/example
*/
/**
* section: M2DM/rules/typography/lead-paragraph
* title: Lead Paragraph
*
* activateComponent: radius-component-lead-paragraph
*
* description: |
*   Lead paragraph for screamer and other sections with a standalone block of text
* 
* modifiers:
*   lead-paragraph--large: Use to display more prominent lead paragraph.
*
* markup: globals/scss/rules/typography/lead-paragraph/example
*/
/**
* section: M2DM/rules/typography/stat
* title: Stat
*
* activateComponent: radius-component-stat
*
* abstractLink: 72d8cac6-6c1e-4cc6-a8c9-6a0659f7414a
*
* purpose: Use to display or highlight numerical data.
*
* markup: globals/scss/rules/typography/stat/example
*/
/**
 * section: M2DM/icons
 * title: Icons
 *
 * description: |
 *  Collection of symbols used to represent an object visually or to convey a particular message. Icons are consolidated into a single, external sprite to avoid multiple requests.
 *
 *
 *  ### Icon prep
 *  Take individual SVG icons provided by design (ensure they have converted strokes to outlines before exporting, or if you are exporting from the Sketch file ensure that you do this).
 *
 *  All icons should be on a transparent background. Apart from two-colour icons which should have the solid background colour set to `#75227D`.
 *
 *  Add icons to the correct folder `src/m2dm/assets/icons` and name the icon according to the following guidelines:
 *
 *  #### Naming conventions
 *  Follow the naming system to ensure consistency: [name]-[direction?]-[outline/solid?] e.g. minus, minus-circle-outline, minus-circle-solid or arrow-left (those marked with `?` are optional).
 *
 *
 *  ### HTML Usage
 *  In order to use our SVG icons, we need place them in the HTML. This means that we cannot use them in CSS background images or in pseudo elments like `::before`.
 *
 *  The name of the icon will be used as the fragment identifier when we reference it from our markup using the `<svg>` and `<use>` elements:
 *   ```
 *   <svg class="svg-icon">
 *      <use xlink:href="/radius-asset-path/icons/svg-sprite.svg#icon-name"></use>
 *   </svg>
 *   ```
 *
 *  `#icon-name` is the fragment identifier used to reference the id from the `<symbol>` element in the sprite. In the example above the #icon-name fragment identifier tells the browser to use the symbol with the ID of the same name from the `svg-sprite.svg`.
 *
 *
 *  ### Accessibility
 *  In cases where you don't want screen readers to try reading the icon out add `aria-hidden="true"` - this might be true if there is already relevant text in context and any cases where the icon is used only for decoration and/or doesn't add any signficant or additional value:
 *   ```
 *   <svg class="svg-icon" aria-hidden="true">
 *      Close
 *      <use xlink:href="/radius-asset-path/icons/svg-sprite.svg#cross-circle-outline"></use>
 *   </svg>
 *   ```
 *
 *  In cases with a link or a button whose only content is an icon use `aria-label` on the `<a>` or `<button>` element:
 *   ```
 *   <a href="#" aria-label="close">
 *      <svg class="svg-icon">
 *        <use xlink:href="/radius-asset-path/icons/svg-sprite.svg#cross-circle-outline"></use>
 *      </svg>
 *   </a>
 *   ```
 *
 *  When using SVGs outside interactive elements, like buttons and links (where `aria-label` might not be read by some screen readers), you can use the `<title>` element with a unique `id` and combine with `aria-labelledby="title-id"`:
 *   ```
 *   <svg class="svg-icon" role="img" aria-labelledby="close">
 *      <title id="close">Close modal window</title>
 *      <use xlink:href="/radius-asset-path/icons/svg-sprite.svg#cross-circle-outline"></use>
 *   </svg>
 *   ```
 *
 *  As accessibility text can change depending on context and also language - alt text should live in the same place that the icon is inserted. As such `<title>` elements are removed from the sprite as part of the sprite build process. (Also screen readers often ignore `<title>` elements from sprites). For example, a cross icon can mean close but also be used as an icon for an error notification.
 *
 *
 *  ### Visual Usage
 *  Our icons often coexist with text, so they inherit the text color and flow with the text by default.
 *
 *  Add the `.svg-icon` class to all svg icons and any modifier classes needed to change the default color and/or size.
 *
 *  #### Sizing
 *  Most icons occupy a square artboard of 24px and are set to a default size of 1rem using the `svg-icon` class as our default font size is 1rem. Icons can also be resized using the size modifier classes listed below.
 *
 *  #### Alignment
 *  Both the `svg` and any adjacent sibling element, e.g. accompanying text, are vertically aligned to the middle of the parent element's middle.
 *
 *  #### Single colour icons
 *  Default colour is `get-color(grey)`, inherited from the default colour set on the `<body>` element. Icon colour can be updated using the colour modifier classes listed below.
 *
 *  #### Two tone/colour icons
 *
 *  _Adding two tone/colour icons to Radius_<br>
 *  If you want to add a two-tone icon, set the solid background colour of icon to `#75227D`.<br><br>
 *
 *  _Using two tone/colour icons in Radius_ <br>
 *  There are a number of predefined modifier classes that can be used to set two different colours on the icon e.g. `svg-icon--solid` (see the modifiers section below to see the preset options available). Example using predefined classes:
 *
 *   ```
 *   <svg class="svg-icon svg-icon--solid-error">
 *      <use xlink:href="/radius-asset-path/icons/svg-sprite.svg#cross-circle-solid"></use>
 *   </svg>
 *   ```
 *
 *  To use two-tone icons that are not predefined use the `set-two-icon-colors` mixin (the 1st argument passed to this mixin sets the solid background color of the icon, the 2nd argument sets the color of the inner icon). Example using the mixin: `set-two-icon-colors(get-color(orange), get-color(blue));` <br><br>
 *
 *  _How two-tone icons are created_ <br>
 *  During the build process `#75227D` is replaced by `currentColor`. By setting the fill attribute of the primary (solid, background) colour of the icon to `currentColor` it will inherit whatever value is held by the `color` property. We can then set a secondary color for the inner icon, by stripping out the fill attribute during the build process and using the `fill` property to declare a different colour in CSS. CSS is used to declare both a fill and color on the SVG element (for a shortcut use the `set-two-icon-colors` mixin).
 *
 *
 *  #### Modifiers for size:
 *   `svg-icon--xsmall` - changes icon size to 0.625rem (10px)<br>
 *   `svg-icon--small` - changes icon size to 0.8125rem (13px)<br>
 *   `svg-icon--large` - changes icon size to 1.5rem (24px)<br>
 *   `svg-icon--x-large` - changes icon size to 2rem (32px)<br>
 *   `svg-icon--2x-large` - changes icon size to 2.5rem (40px)<br>
 *   `svg-icon--3x-large` - changes icon size to 3rem (48px)<br>
 *   `svg-icon--4x-large` - changes icon size to 3.5rem (56px)<br>
 *   `svg-icon--5x-large` - changes icon size to 4.25rem (68px)<br><br>
 *
 *  #### Modifiers for color:
 *   `svg-icon--accent` - changes icon color to the contrast orange from our color palette<br>
 *   `svg-icon--action` - changes icon color to the default blue from our color palette<br>
 *   `svg-icon--disabled` - changes icon color to the x-light grey from our color palette<br>
 *   `svg-icon--inverse` - changes icon color to the white - for use on a dark background<br>
 *   `svg-icon--error` - changes icon color to default red from our color palette<br>
 *   `svg-icon--success` - changes icon color to default green from our color palette<br>
 *   `svg-icon--caution` - changes icon color to the contrast yellow from our color palette<br><br>
 *
 *   `svg-icon--solid` - for icons with two different colors, sets the background fill color of the solid SVG icons to our default text grey and the inner icon path fill to white, using the default values set by the `set-two-icon-colors` mixin<br>
 *   `svg-icon--solid-action` - for icons with a solid (action) blue fill for the background and a white inner icon<br>
 *   `svg-icon--solid-neutral` - for icons with a light grey fill for the background and a white inner icon e.g. commonly used for the info icon<br>
 *   `svg-icon--solid-error` - for icons with a solid (error) red fill for the background and a white inner icon<br>
 *   `svg-icon--solid-success` - for icons with a solid (success) green fill for the background and a white inner icon<br>
 *   `svg-icon--solid-caution` - for icons with a solid (caution) contrast yellow fill for the background and a white inner icon<br><br>
 *
 *   `svg-icon--cutout` - for use with solid icons that have a transparent core (inner icon) ie. the inner icon will show the colour from the background component or section that the icon lives in. Pair this class with one of the colour modifier classes (`svg-icon--action`) to change the main solid colour of the icon. **N.B.** This should only be used with solid icons.
 *
 *
 *  ### Support and polyfills
 *  Currently no versions of IE (and some older versions of WebKit browsers) supports the `use` syntax with external SVG sprite sheets (ie. file paths in `use xlink:href=""`), so we use [svgxuse](https://github.com/Keyamoon/svgxuse) - a JS polyfill - as a workaround for IE. (However, you can reference symbols from an external file in Edge). We recommend this polyfill for referencing external SVGs in `<use>` elements. It works by detecting failed external refs and loading the referenced file via AJAX, injecting the sprite into the page itself and updating the xlink:href attribute to point to this resource instead.
 *  svgxuse polyfill usage instructions can be found [here](https://github.com/Keyamoon/svgxuse#usage)
 *
 *
 * layout: globals/scss/rules/iconography/example
 *
 * markup: globals/scss/rules/iconography/example-markup
 */
.svg-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  overflow: hidden;
  vertical-align: middle;
}

.svg-icon + * {
  vertical-align: middle;
}

.svg-icon--xsmall {
  width: 0.625rem;
  height: 0.625rem;
}

.svg-icon--small {
  width: 0.8125rem;
  height: 0.8125rem;
}

.svg-icon--large {
  width: 1.5rem;
  height: 1.5rem;
}

.svg-icon--x-large {
  width: 2rem;
  height: 2rem;
}

.svg-icon--2x-large {
  width: 2.5rem;
  height: 2.5rem;
}

.svg-icon--3x-large {
  width: 3rem;
  height: 3rem;
}

.svg-icon--4x-large {
  width: 3.5rem;
  height: 3.5rem;
}

.svg-icon--5x-large {
  width: 4.25rem;
  height: 4.25rem;
}

.svg-icon--accent {
  color: rgb(252, 78, 30);
}

.svg-icon--action {
  color: rgb(0, 155, 222);
}

.svg-icon--disabled {
  color: rgb(147, 150, 167);
}

.svg-icon--inverse {
  color: rgb(255, 255, 255);
}

.svg-icon--error {
  color: rgb(232, 32, 55);
}

.svg-icon--success {
  color: rgb(52, 181, 118);
}

.svg-icon--caution {
  color: rgb(255, 205, 0);
}

.svg-icon--cutout {
  fill: transparent;
}

.svg-icon--solid {
  color: rgb(66, 69, 84);
  fill: rgb(255, 255, 255);
}

.svg-icon--solid-neutral {
  color: rgb(147, 150, 167);
  fill: rgb(255, 255, 255);
}

.svg-icon--solid-error {
  color: rgb(232, 32, 55);
  fill: rgb(255, 255, 255);
}

.svg-icon--solid-success {
  color: rgb(52, 181, 118);
  fill: rgb(255, 255, 255);
}

.svg-icon--solid-action {
  color: rgb(0, 155, 222);
  fill: rgb(255, 255, 255);
}

.svg-icon--solid-caution {
  color: rgb(255, 205, 0);
  fill: rgb(255, 255, 255);
}

/**
 * section: M2DM/rules/colors
 * title: Colors
 *
 * layout: globals/scss/rules/colors
 *
 * purpose: Use to ensure brand consistency.
 *
 * description: |
 *   A palette of functional colors used to convey a message or highlight actions. Basic color names are used as key names (purple, green, blue, etc.) with various lighter shades as array elements. Above the base colour there will be a contrast colour which will be usually used as background for elements containing white text. Below the base colour there is a scale of lighter shades which is using a naming convension based on t-shirt sizing, starting from `light` and scaling down different levels of lightness depending on the base colour. Options for the lighter shades are: `light`, `x-light`, `2x-light`, `3x-light`, `4x-light` etc.<br>
 *
 * colors:
 *   - white:
 *     - colors__sample--white: get-color(white)
 *   - black:
 *     - colors__sample--black: get-color(black)
 *   - purple:
 *     - colors__sample--purple-contrast: get-color(purple, contrast)
 *     - colors__sample--purple-base: get-color(purple, base)
 *     - colors__sample--purple-light: get-color(purple, light)
 *     - colors__sample--purple-x-light: get-color(purple, x-light)
 *     - colors__sample--purple-2x-light: get-color(purple, 2x-light)
 *     - colors__sample--purple-3x-light: get-color(purple, 3x-light)
 *   - orange:
 *     - colors__sample--orange-contrast: get-color(orange, contrast)
 *     - colors__sample--orange-base: get-color(orange, base)
 *     - colors__sample--orange-light: get-color(orange, light)
 *     - colors__sample--orange-x-light: get-color(orange, x-light)
 *     - colors__sample--orange-2x-light: get-color(orange, 2x-light)
 *     - colors__sample--orange-3x-light: get-color(orange, 3x-light)
 *   - green:
 *     - colors__sample--green-contrast: get-color(green, contrast)
 *     - colors__sample--green-base: get-color(green, base)
 *     - colors__sample--green-light: get-color(green, light)
 *     - colors__sample--green-x-light: get-color(green, x-light)
 *     - colors__sample--green-2x-light: get-color(green, 2x-light)
 *     - colors__sample--green-3x-light: get-color(green, 3x-light)
 *   - red:
 *     - colors__sample--red-contrast: get-color(red, contrast)
 *     - colors__sample--red-base: get-color(red, base)
 *     - colors__sample--red-light: get-color(red, light)
 *     - colors__sample--red-x-light: get-color(red, x-light)
 *     - colors__sample--red-2x-light: get-color(red, 2x-light)
 *     - colors__sample--red-3x-light: get-color(red, 3x-light)
 *   - yellow:
 *     - colors__sample--yellow-contrast: get-color(yellow, contrast)
 *     - colors__sample--yellow-base: get-color(yellow, base)
 *     - colors__sample--yellow-light: get-color(yellow, light)
 *     - colors__sample--yellow-x-light: get-color(yellow, x-light)
 *     - colors__sample--yellow-2x-light: get-color(yellow, 2x-light)
 *     - colors__sample--yellow-3x-light: get-color(yellow, 3x-light)
 *   - blue:
 *     - colors__sample--blue-contrast: get-color(blue, contrast)
 *     - colors__sample--blue-base: get-color(blue, base)
 *     - colors__sample--blue-light: get-color(blue, light)
 *     - colors__sample--blue-x-light: get-color(blue, x-light)
 *     - colors__sample--blue-2x-light: get-color(blue, 2x-light)
 *     - colors__sample--blue-3x-light: get-color(blue, 3x-light)
 *   - grey:
 *     - colors__sample--grey-contrast: get-color(grey, contrast)
 *     - colors__sample--grey-base: get-color(grey, base)
 *     - colors__sample--grey-light: get-color(grey, light)
 *     - colors__sample--grey-x-light: get-color(grey, x-light)
 *     - colors__sample--grey-2x-light: get-color(grey, 2x-light)
 *     - colors__sample--grey-3x-light: get-color(grey, 3x-light)
 *     - colors__sample--grey-4x-light: get-color(grey, 4x-light)
 *
 * sassUsage: |
 *   get-color(purple)
 *   // if the base shade is requested the 2nd parameter should not be defined, as it is set to `base` by default
 *   get-color(purple, light)
 *   // the 2nd parameter defines the shade of the color - it is an optional parameter (please see above)
 */
/**
 * section: M2DM/rules/add-gutters
 * title: Gutters
 *
 * purpose: Use to add standard or custom gutters.
 *
 * description: |
 *   The Funding Circle grid system doesn't specify gutters between the columns; columns sit right up against each other. However, in order to accommodate the elements and provide breathing room for text, a padding will be defined when needed (not all columns will have padding by default).<br><br>
 *
 *   The standard value of this padding is 1.5rem(1.5 times our base font size). While 1.5rem is the default padding, this may be adjusted as needed for content with high contrast in text sizes (usually with very large headings that need more breathing room).<br><br>
 *   This mixin will be adding a padding left and right on the element. Because the 'page' grid will create a starting pad of 1 rem on both sides at the smallest web width(320px), the additional gutter will be removed for this breakpoint.
 *
 * sassUsage: |
 *   @include add-gutters
 *   // no parameters specified, the standard 1.5rem gutters will be applied
 *   @include add-gutters(4.5rem, 3rem)
 *   // custom values for left(4.5rem) and right(3rem) padding
 *
 */
/**
 * section: M2DM/rules/z-index
 * title: Z-index
 *
 * purpose: Use to stack elements in a certain order on the page.
 *
 * description: |
 *   Sass mixin used to set the z-index property.
 *   
 *   The implementation makes use of the `get-z-index` defined in `rules/functions` which calculates the z-index of an element depending on the layer and level of depth at which that element lives.
 *   
 *   A page can be split into multiple layers of elements that need to stack in a certain order. All the children of a certain layer can also be stacked within the layer they live in. So, each layer present on the page can have multiple depth levels depending on how many stacking children it needs to accomodate.
 *   
 *   All these layers can be grouped into a map in the order they need to stack on a page, from the lowest to highest. In case of the `get-z-index` function the map contains the following layers: `content`, `page-notif`(in-page notifications), `nav`, `modal` and `takeover`. Following the logic above, the `takeover` layer will be the topmost on the page. Each of these layers can have up to 9 levels of depth (from 0 to 9).
 *
 * parameters: |
 *   $layer: the page layer as defined in $_z-layers map;
 *   
 *   $depth-level: the level of depth at which the element needs to sit within the layer. optional parameter; if not set, defaults to `null`;
 *   
 *   $position: the position of the element (e.g. `absolute`, `relative` etc.). optional parameter; if not set, the position property will not be defined;
 *
 * sassUsage: |
 *   @include z-index(page-notif); // z-index: 20
 *   
 *   @include z-index(page-notif, 2); // z-index: 22
 *   
 *   @include z-index(page-notif, 2, absolute); // z-index: 22, position: absolute
 */
/**
 * section: M2DM/layout-patterns
 * title: Layout patterns
 *
 * purpose: Use to compose complex components with a skeleton.
 *
 * description: |
 *   They could represent something like the simple 1-7-1 application of the grid system or sections with predefined padding.
*/
/**
  * section: M2DM/layout-patterns/columns
  * title: Columns
  *
  * description: |
  *   For more fine tuned layouts, you can use the mixin and generate more complex layouts between custom breakpoints. This can be used together with `breakpoints()` mixin as it just generates the widths. Use this  mixin whenever you need to split an element in multiple columns; each individual column being filled with content. The columns will live inside our page grid (more here: `layout-patterns/page-grid`).
  *
  *   The mixin has to be applied on the wrapper of the columns. Adding a comma in the list will generate a new row.
  *
  * sassUsage: |
  *
  *    // columns mixin adds default padding to each column
  *    @include create-columns(3 2 1);
  *    // columns-with-no-padding mixin does not add default padding to each column
  *    @include columns-with-no-padding(3 2 1);
  *
  *
  * markup: layout-patterns/columns
*/
/**
 * section: M2DM/layout-patterns/page-grid
 * title: Page grid
 *
 * description: |
 *   The page grid principle is based on splitting the content into a 1:7:1 grid (1:5:1 for screens widths of 1920px and above) by setting left and right margin to a floating column which holds the content. The margins are dependent on the "width" of the column itself following the golden ratio proportions (more here: `dependencies/grid`).<br><br>
 *
 *   To ensure an element follows the 'page' grid, an utility class needs to be added (see below). If an element needs to fill the screen, that means it needs to break out of the grid, therefore the class is not needed.<br><br>
 *
 *   The utility class makes use of the `golden-ratio-padding` mixin. The mixin is called with 3 parameters, first one representing the column width proportion related to the full width, next two setting the left, respectively the right margin (as proportions).<br><br>
 *
 *   For the 'page' grid purposes these parameters are set to `(7,1,1)` for all screen widths up to 1920px and then `(5,1,1)` above this breakpoint.<br><br>
 *
 *   If you don't want to apply the 1:7:1 grid on smaller screens, use `.u-page-grid-responsive` instead.
 *
 * markup: globals/scss/layout-patterns/page-grid/page-grid
 */
.u-page-grid {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .u-page-grid {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

.u-page-grid-responsive {
  width: auto;
  margin-right: 0;
  margin-left: 0;
}
@media only screen and (min-width: 480px) {
  .u-page-grid-responsive {
    width: 89.970920877%;
    margin-left: 5.0145395615%;
    margin-right: 5.0144395615%;
  }
}
@media only screen and (min-width: 1920px) {
  .u-page-grid-responsive {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

/**
  * section: M2DM/layout-patterns/columns
  * title: Columns
  *
  * purpose: Use to split an element into multiple non-empty columns.
  *
  * description: |
  *   For more fine tuned layouts, you can use the mixin and generate more complex layouts between custom breakpoints. This can be used together with `breakpoints()` mixin as it just generates the widths. The columns will live inside our page grid (more here: `layout-patterns/page-grid`).
  *
  *   The mixin has to be applied on the wrapper of the columns. Adding a comma in the list will generate a new row.
  *
  * sassUsage: |
  *
  *    // columns mixin adds default padding to each column
  *    @include create-columns(3 2 1);
  *    // columns-with-no-padding mixin does not add default padding to each column
  *    @include columns-with-no-padding(3 2 1);
  *
  *
  * markup: globals/scss/layout-patterns/columns/columns
*/
/**
  * section: M2DM/layout-patterns/container-with-aside
  * title: Container with Aside
  *
  * abstractLink: 51f8cc05-c692-4e91-b9a9-c32da32ec7bf
  *
  * description: |
  *
  *  This is a layout component for displaying a small related component beside (that is to the right of) a larger one.<br><br>
  *  
  *  On smaller screens the components will stack.<br><br>
  *
  *  The main panel will always be white. To change the color of the aside panel from its default orange you need to add a theme modifier class to the component element. e.g. u-theme-brand
  *
  * markup: globals/scss/layout-patterns/container-with-aside/aside
*/
.container-with-aside {
  background: rgb(255, 242, 236);
}

.container-with-aside__main {
  background: rgb(255, 255, 255);
}

@media only screen and (min-width: 800px) {
  .container-with-aside {
    position: relative;
    padding: 2.5rem 0;
  }
  .container-with-aside::before {
    position: absolute;
    top: 2.5rem;
    bottom: 2.5rem;
    left: 0;
    display: inline-block;
    width: 50%;
    background: rgb(255, 255, 255);
    content: "";
  }
  .container-with-aside__columns {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }
  .no-flexbox .container-with-aside__columns:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .container-with-aside__columns > * {
    float: left;
  }
  .container-with-aside__columns > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .container-with-aside__columns > :nth-child(1) {
    clear: left;
  }
  .container-with-aside__columns > :nth-child(2) {
    width: 38.1969970206%;
  }
  .container-with-aside__columns > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media only screen and (min-width: 800px) and (min-width: 480px) {
  .container-with-aside__columns {
    width: 89.970920877%;
    margin-left: 5.0145395615%;
    margin-right: 5.0144395615%;
  }
}
@media only screen and (min-width: 800px) and (min-width: 1920px) {
  .container-with-aside__columns {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}
@media only screen and (min-width: 800px) {
  .container-with-aside__main {
    position: relative;
  }
}
@media only screen and (min-width: 800px) {
  .container-with-aside__aside {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (max-width: 799px) {
  .container-with-aside__main > :first-child,
.container-with-aside__aside > :first-child {
    width: 89.970920877%;
    margin-left: 5.0145395615%;
    margin-right: 5.0144395615%;
  }
  .container-with-aside__aside {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 480px) {
  .container-with-aside__main-content {
    padding-right: 1.5rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 480px) {
  .container-with-aside__aside-content {
    padding-right: 0;
    padding-left: 1.5rem;
  }
}
.container-with-aside--full-height {
  padding-top: 0;
  padding-bottom: 0;
}
.container-with-aside--full-height::before {
  top: 0;
  bottom: 0;
}

/**
  * section: M2DM/layout-patterns/equal-columns
  * title: Equal columns
  *
  * description: |
  *    This grid splits the content into equal width columns. Each column will have a standard `1.5rem` padding on left and right which will be removed on mobile.
  *
  * modifiers:
  *   u-equal-columns: lays out children in two columns for tablets and above
  *   u-equal-columns-extended: same as the above but adds 3rd column for desktop devices
  *   u-equal-columns-horizontal: lays all children in one row in equally spaced columns for tablets and above
  *
  * markup: globals/scss/layout-patterns/equal-columns/equal-columns
*/
@media only screen and (min-width: 640px) {
  .u-equal-columns,
.u-equal-columns-extended {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .u-equal-columns > *,
.u-equal-columns-extended > * {
    width: calc(50% - 1.5rem);
  }
}

@media only screen and (min-width: 1024px) {
  .u-equal-columns-extended > * {
    width: calc(33.3333333333% - 2rem);
  }
}

@media only screen and (min-width: 640px) {
  .u-equal-columns-horizontal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
  .u-equal-columns-horizontal > * {
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
  }
  .no-flexbox .u-equal-columns-horizontal {
    display: table;
    table-layout: fixed;
  }
  .no-flexbox .u-equal-columns-horizontal > * {
    display: table-cell;
    width: 1%;
  }
  .u-equal-columns-horizontal > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/**
  * section: M2DM/layout-patterns/equal-grid
  * title: Equal grid
  *
  * description: |
  *    This layout patterns allows for an equal grid list of items. Spanning from a minimum of 200px to 1fr of however many can fit.
  *
  *    The plan for this layout pattern is to have variations as you need larger sized blocks.
  *
  *    When CSS Grid is not supported this falls back to using an inline-block based styling.
  *
  * markup: globals/scss/layout-patterns/equal-grid/example
*/
.u-equal-grid > * {
  display: inline-block;
}
@supports (display: grid) {
  .u-equal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 1rem;
    grid-auto-rows: 1fr;
  }
  .u-equal-grid > * {
    display: block;
  }
}

/**
 * section: M2DM/layout-patterns/full-page
 * title: Page main
 *
 * description: |
 *   The page main pattern sticks the footer to the bottom of the page until the content pushes it off screen.
 *
 * markup: globals/scss/layout-patterns/full-page/example
 */
.full-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

.full-page__content {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/**
 * section: M2DM/layout-patterns/grid-141
 * title: Grid 1-4-1
 *
 * description: |
 *   This grid splits the content into a 1:4:1 grid - setting the left and right margins of a floating column that holds the content. The margins are dependent on the "width" of the column itself following the golden ratio proportions (more here: `dependencies/grid`).<br>
 *
 *   This is applied to make the content "narrower" in width and should sit inside an `u-page-grid` layout (see: `layout-patterns/page-grid`).<br>
 *
 *   To ensure an element follows the 'page' grid, an utility class needs to be added (see below).<br>
 *
 *   The utility class makes use of the `golden-ratio-padding` mixin. The mixin is called with 3 parameters, first one representing the column width proportion related to the full width, next two setting the left, respectively the right margin (as proportions).<br>
 *
 *   For the 'inner' grid purposes these parameters are set to `(4,1,1)`.<br>
 *
 *   This is not applied on small screens where the content goes back to full width.
 *
 * markup: globals/scss/layout-patterns/grid-141/grid-141
 */
@media only screen and (min-width: 640px) {
  .u-grid-141 {
    width: 67.9271357483%;
    margin-left: 16.0364321259%;
    margin-right: 16.0363321259%;
  }
}

/**
 * section: M2DM/layout-patterns/grid-2-1
 * title: Grid 2-1
 *
 * description: |
 *   The grid 2-1 is a layout pattern which defines a 2-1 grid with spacing in-between.
 *
 * markup: globals/scss/layout-patterns/grid-2-1/example
*/
@media only screen and (min-width: 480px) {
  .u-grid-2-1 {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .u-grid-2-1:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .u-grid-2-1 > * {
    float: left;
  }
  .u-grid-2-1 > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .u-grid-2-1 > :nth-child(1) {
    clear: left;
  }
  .u-grid-2-1 > :nth-child(2) {
    width: 38.1969970206%;
  }
  .u-grid-2-1 > :nth-child(1) {
    padding-right: 1rem;
  }
}
@media only screen and (max-width: 479px) {
  .u-grid-2-1 > :nth-child(1) {
    margin-bottom: 1rem;
  }
}

/**
 * section: M2DM/layout-patterns/predefined-grid-classes
 * title: Predefined grid classes
 *
 * purpose: Use to build organic layouts with predefined grid classes for fast prototyping.
 *
 * description: |
 *
 *   To get started you need to add the wrapper class `.col-[s/m/l/xl]-wrapper` to make your inner divs into columns and have proper alignment and padding between them (only one class is needed, so if you use `.col-s-wrapper` the others are not required). If you only add `.col-xl-wrapper`, it means that it will create your grid system only starting from extra large devices onwards.<br><br>
 *
 *   Inside the wrapper class specify the desired proportion of the column with classes `.col-[s/m/l/xl]-[1-8]` (e.g. `.col-m-3` will apply a proportion of 3 on the column from medium screen onwards). The approach is mobile-first, where the small columns will be applied across all resolutions unless another class for a bigger breakpoint is applied. <br><br>
 *
 *   The available proportions are between 1 and 8 (1 is the smallest proportion, 8 is the biggest). Each column proportion is dependent on the siblings proportions. For example, two elements with class `.col-s-1` will display two *equal* columns.<br><br>
 *
 *   The predefined grid classes are split into 4 categories:<br>
 *
 *     - `[.col]-s-[proportion]` : small device width &lt; 480px
 *     - `[.col]-m-[proportion]` : medium device width &gt;= 480px
 *     - `[.col]-l-[proportion]` : large device width &gt;= 800px
 *     - `[.col]-xl-[proportion]` : extra large device width &gt;= 1200px
 *
 * markup: globals/scss/layout-patterns/predefined-grid-classes/predefined-grid-classes
 */
.col-s-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.col-s-wrapper > * {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: table-cell;
  vertical-align: top;
}
.col-s-1 {
  width: 1%;
}
.col-s-2 {
  width: 1.618%;
}
.col-s-3 {
  width: 2.617924%;
}
.col-s-4 {
  width: 4.235801032%;
}
.col-s-5 {
  width: 6.8535260698%;
}
.col-s-6 {
  width: 11.0890051809%;
}
.col-s-7 {
  width: 17.9420103827%;
}
.col-s-8 {
  width: 29.0301727992%;
}
.col-s-9 {
  width: 46.9708195891%;
}
.col-s-10 {
  width: 75.9987860952%;
}
@media only screen and (min-width: 480px) {
  .col-m-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .col-m-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell;
    vertical-align: top;
  }
  .col-m-1 {
    width: 1%;
  }
  .col-m-2 {
    width: 1.618%;
  }
  .col-m-3 {
    width: 2.617924%;
  }
  .col-m-4 {
    width: 4.235801032%;
  }
  .col-m-5 {
    width: 6.8535260698%;
  }
  .col-m-6 {
    width: 11.0890051809%;
  }
  .col-m-7 {
    width: 17.9420103827%;
  }
  .col-m-8 {
    width: 29.0301727992%;
  }
  .col-m-9 {
    width: 46.9708195891%;
  }
  .col-m-10 {
    width: 75.9987860952%;
  }
}
@media only screen and (min-width: 800px) {
  .col-l-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .col-l-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell;
    vertical-align: top;
  }
  .col-l-1 {
    width: 1%;
  }
  .col-l-2 {
    width: 1.618%;
  }
  .col-l-3 {
    width: 2.617924%;
  }
  .col-l-4 {
    width: 4.235801032%;
  }
  .col-l-5 {
    width: 6.8535260698%;
  }
  .col-l-6 {
    width: 11.0890051809%;
  }
  .col-l-7 {
    width: 17.9420103827%;
  }
  .col-l-8 {
    width: 29.0301727992%;
  }
  .col-l-9 {
    width: 46.9708195891%;
  }
  .col-l-10 {
    width: 75.9987860952%;
  }
}
@media only screen and (min-width: 1200px) {
  .col-xl-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .col-xl-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell;
    vertical-align: top;
  }
  .col-xl-1 {
    width: 1%;
  }
  .col-xl-2 {
    width: 1.618%;
  }
  .col-xl-3 {
    width: 2.617924%;
  }
  .col-xl-4 {
    width: 4.235801032%;
  }
  .col-xl-5 {
    width: 6.8535260698%;
  }
  .col-xl-6 {
    width: 11.0890051809%;
  }
  .col-xl-7 {
    width: 17.9420103827%;
  }
  .col-xl-8 {
    width: 29.0301727992%;
  }
  .col-xl-9 {
    width: 46.9708195891%;
  }
  .col-xl-10 {
    width: 75.9987860952%;
  }
}

/**
 * section: M2DM/layout-patterns/pull-column
 * title: Pull column
 *
 * activateComponent: radius-component-pull-column
 *
 * purpose: Use to create a balanced and clearer layout for pairing types of content that have different visual weights.
 *
 * description: |
 *   This layout pattern is for the cases when we have two equal columns that behave differently:
 *   * One of them follows the page grid
 *   * The content within the other column will fill all of the available space, sitting outside the page grid and "pulling" the content within this column to the left or right edge of the viewport<br><br>
 *
 *   The component requires a `pull-column--left` or `pull-column--right` modifier, depending on which one is the one that pulls the content. The order of `pull-column__content` and `pull-column__pulled` depends on which modifier is applied.
 *
 *   This is not applied on small screens where the content goes back to stacked rows.
 *
 *
 *   ## variations:
 *     - `pull-column--reorder-items`: re-order items on a mobile device
 *     - `pull-column--pulled-background`: pulls background but does not remove gutters
 *
 * markup: globals/scss/layout-patterns/pull-column/pull-column
 */
/**
 * section: M2DM/components
 * title: Components
 *
 * description: |
 *   Components are collections of rules applied to an element in a given context to satisfy a purpose.
 */
/**
 * section: M2DM/components/accordion
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-accordion--accordion))
 *
 * title: Accordion
 *
 * activateComponent: radius-component-accordion
 * jsModule: accordion
 *
 * abstractLink: 252ebb43-ebe7-4cc6-b37c-a681f7415658
 *
 * purpose: Use to display large amounts of information in a scannable way, for example on an FAQ page.
 *
 * description: |
 *   ### Environment specific behaviour:
 *   When JavaScript is not available the hidden content in the accordion will become visible.
 *
 *   ### Data attributes:
 *   - `[data-js-accordion]`: This attribute should be added to the accordion wrapper.
 *   - `[data-js-accordion-item]`: This attribute should be added to each accordion item underneath the accordion wrapper.
 *   - `[data-js-accordion-trigger]`: This attribute should be added to the element that triggers the opening of the accordion content.
 *
 * markup: components/accordion/example
 */
/**
 * section: M2DM/components/breadcrumb
 * title: Breadcrumb
 *
 * activateComponent: radius-component-breadcrumb
 *
 * purpose: Help users identify their location within the hierarchy of pages.
 *
 * description: |
 *   This component should be constructed using an `ol` as the order of the items contained matters.
 *   
 *   The separators are automatically generated for each item in the breadcrumb component except the last one.
 *   
 *   __Note__ In order to provide a good user experience, the breadcrumb item that represents the __current location__ of the user should not be clickable. (i.e. the list item should not contain a link).
 *
 *   ### Class modifiers:
 *   - `breadcrumb__list-item--current` - added on the item that represents the current location of the user; responsible for making the text bold.
 *   
 *   ### Accessibility
 *   A `role="navigation"` attribute should be added at the list level in order to identify it as navigational landmark for screen readers.
 *   When multiple navigation landmarks are on the page, add a `aria-label="label"` to the list of items in the breadcrumb.
 *
 * markup: components/breadcrumb/example
 */
/**
 * section: M2DM/components/card
 * title: Card
 *
 * activateComponent: radius-component-card
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-card--simple))
 *
 * abstractLink: 756c017a-f4fa-4f97-b110-536bf430b6af
 *
 * purpose: To group related content together and provide an at a glance overview of the content they lead to.
 *
 * description: |
 *   A card is avaliable in two variants - Fixed and Flexible
 *
 *   ### Fixed
 *   This card will have fixed padding of 16px all around and is designed to be used where multiple cards are next to each other in a grid configuration — See Card Ticker as an example.
 *
 *   ### Flexible
 *   This card relies on the gird layout within. By default it has a sigle column layout, but can be expanded to pretty much any configuration required.
 *
 *   Adding the `card__item--actionable` modifier to the `card__item` will make it actionable. This denotes an action can be perfomed on this element
 *
 * markup: components/card/example
 */
/**
 * section: M2DM/components/card-ticker
 * title: Card Ticker
 *
 * activateComponent: radius-component-card-ticker
 * jsModule: card-ticker
 * jsFunction: cardTicker
 *
 * purpose: Use to deliver the concept of activity on a given task; its content establishes a number of baselines with the clear objective of reassuring the user on the presented activity.
 *
 * description: |
 *   This component will be paired with a label component that will introduce the content presented.
 *   
 *   The contents of the cards are generated dynamically from a text file that is fetched across the network. ([Read more about the Javascript functionality](/M2DM/components/card-ticker/javascript/)).
 *   
 *   **N.B.** Flexbox and CSS animations are not supported in IE9 and below, so this component will not be displayed.
 *
 *   ### Data attributes:
 *   - `[data-js-card-ticker]`: This attribute identifies the wrapper that holds the card-ticker carousel;
 *   - `[data-js-card-ticker-carousel]`: This attribute identifies the card-ticker carousel;
 *   - `[data-js-card-ticker-item]`: This attribute identifies an item within the card-ticker carousel;
 *   - `[data-js-card-ticker-source]`: TThis attribute creates a connection between the component and its source of data.
 *
 * markup: components/card-ticker/example
 */
/**
 * section: M2DM/components/case-study
 * title: Case study
 *
 * activateComponent: radius-component-case-study
 *
 * abstractLink: cd87b942-cd43-4357-a1d8-86fdeb30a31c
 *
 * purpose: Display a case study of a customer in order to convey trust in Funding Circle through businesses' positive experiences.
 *
 * description: |
 *
 *   This component should include a large background image and some content in a box. The content box can include any other component. Typically, it may include a quote from a customer or information about their experiences with Funding Circle.
 *
 *   To specifiy the background image and the colour of the background and content box, you must use the `case-study-customisation` mixin.
 *
 *   ### Modifiers
 *
 *   There are 6 modifiers, but you must only use 3 at a time. You must choose one each for the X-axis, Y-axis, and sizing.
 *
 *   #### X-axis
 *
 *   `case-study--left` - make the content box sit on the left
 *
 *   `case-study--right` - make the content box sit on the right
 *
 *   #### Y-axis
 *
 *   `case-study--middle` - make the content box sit in the middle vertically
 *
 *   `case-study--bottom` - make the content box sit slightly below the image
 *
 *   #### Sizing
 *
 *   `case-study--small` - makes the component work in half width containers
 *
 *   `case-study--large` - makes the component work in full width containers
 *    <br />
 *    <br />
 *
 *   The parameters for `case-study-customisation` are:<br />
 *
 *   1) Path to the folder containing background images or empty string if you don't want to pass an image through this mixin (images within the
 *   folder should be named l.jpg and s.jpg)<br />
 *
 *   2) Background color of the content block<br />
 *
 *   3) Background color of the overflow (should be the same color as the
 *   content below it). Only required for `--bottom` variants.<br />
 *
 *   <br />
 *   <br />
 *
 *   ## Note
 *   If you're coming here because you recently upgraded to Radius 8.x.x and the case study in your project is now broken please look at the new
 *   markup for the case study component. In prior versions of Radius the background image was added to a `:before` pseudo element. In the 8.0.0
 *   release the Case Study no longer adds the background image to a pseudo element, but requires you add a div with  `.case-study__image" as the
 *   first child of the case-study component.
 *
 *   <br />
 *   <br />
 *
 * sassUsage: |
 *
 *   @include radius-component-case-study;
 *
 *   .case-study {
 *      @include case-study-customisation("img/case-study", #3D5A99, #FAEBD7);
 *   }
 *
 * markup: components/case-study/example
 *
 */
/**
 * section: M2DM/components/controls
 * title: Controls
 *
 * abstractLink: d78f0396-a867-406b-b24d-9ae6fa27c155
 *
 * purpose: Use to communicate the in-page action that will occur after user interaction.
 *
 * description: |
 *   They do not work as navigation i.e does not take you to a different page (CTA should be used instead)
 *   <br><br>
 *   They can be used to request information from the server but not to write new data
 *   <br><br>
 *   Actions should happen without a page refresh
 *   <br><br>
 *   Can open native browser modals/finder windows
 *
 */
/**
 * section: M2DM/components/controls/control-button
 * title: Control button
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-controls-control-button--basic))
 *
 *
 * activateComponent: radius-component-control-button
 *
 * abstractLink: d78f0396-a867-406b-b24d-9ae6fa27c155
 *
 * purpose: Use to perform utility tasks for the user.
 *
 * description: |
 *   Similar to the secondary CTA but with smaller font, padding and an increased radius.
 *
 *   ### Context
 *   The control button is a base component and can be used within larger components and layouts.
 *
 *   ### Behaviour
 *   The control button inherits its colours from the secondary button. It has 5 states.
 *
 *   ### Variants
 *   - `control-button--inverse`: For cases when the button will sit on dark backgrounds.
 *   - `control-button--enlarged`: Use to enlarge the clickable area of a button or link.
 *   - `control-button--icon-only`: Use to just display icon.
 *   - `control-button--info`: Use to indicate that there is info that needs to be displayed. To be used alongside text.
 *   - `control-button--processing`: Use to show operation is happening. To be used alongside text.
 *   - `control-button--success`: Use to indicate that a status has become successful. To be used alongside text.
 *   - `control-button--error`: Use to indicate that a something has failed. To be used alongside text.
 *
 *
 * layout: components/controls/scss/control-button/example
 *
 * markup: components/controls/scss/control-button/example-markup
 */
/**
 * section: M2DM/components/controls/control-icon
 * title: Control icon
 *
 * activateComponent: radius-component-control-icon
 *
 *
 * description: |
 *   Use when a button consists of solely an icon.
 *
 *   ### Context
 *   The icon button is a component and can be used within larger components and layouts.
 *
 *
 * markup: components/controls/scss/control-icon/example
 */
/**
 * section: M2DM/components/cookie-statement
 * title: Cookie Statement
 *
 * activateComponent: radius-component-cookie-statement
 * jsModule: cookie-statement
 * jsFunction: cookieStatement
 *
 * abstractLink: 59d127c9-d1dd-41e7-951c-7f7c15af049d
 *
 * purpose: Use to notify first-time users about our cookies policy and allow the option to read more about this policy as per the current EU "Cookie Law" requirements.
 *
 * description: |
 *   Cookie statement is designed to be used as a stand alone section, that appears fixed at the bottom of the viewport and remains fixed to the bottom of the viewport as the user scrolls. 
 *   
 *   Until users provide consent by selecting the 'Accept and dismiss` CTA.
 *
 *   The javascript is triggered by the addition of the attribute [data-js-cookie-statement].
 *   In order to deal with different countries (folders) on the same domain we need to add the attribute [data-js-cookie-statement-path="/"] in order to separate cookies for different folders on the same URL.
 *
 * markup: components/cookie-statement/cookie-statement
 *
 */
/**
 * section: M2DM/components/cta
 * title: CTA
 *
 * activateComponent: radius-component-cta
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-cta--page))
 *
 * abstractLink: 5184a641-a695-4376-bacc-426a206f5a7a
 *
 * purpose: Use to signify that the user needs to take an action.
 *
 * description: |
 *   Can be used in any context but when pairing a primary CTA with a secondary action, use a text link for the secondary action.
 *   For disabled buttons, simply add the `disabled` attribute.
 *
 *   ### variations:
 *     - `cta-secondary--inverse`: For cases when the button will sit on dark backgrounds.
 *     - `cta--block`: Purpose is to create a perception that the button is related to the other elements that are grouped with it by creating a sense of continuation and symmetry. The block button does this by filling the full width of it’s container on small screens to visually align with other elements that also fill the container’s full width. A requirement for the cta block is to be wrapped in a block container.
 *     - `cta--minor`: reduces the size of the cta
 *     - `cta-primary--process`: Variation of primary button that should be used when the action of the button is not instant (e.g. waiting for the response from the server when posting a form). For the processing state to be active, the button requires the `is-processing` class. When the processing state is active, the text of the button will be replaced with the content of the `data-process-text` attribute. Works with both regular and `cta--minor` variation.
 *
 *
 * layout: components/cta/example
 *
 * markup: components/cta/example-markup
 *
 */
/**
 * section: M2DM/components/cta/layout-patterns
 * title: CTA combo
 *
 * activateComponent: radius-component-cta-combo
 *
 * purpose: Use to pair a primary CTA with a secondary action within a predefined layout pattern.
 *
 * description: |
 *   You must use a text link for the secondary action when pairing with a primary CTA.
 *
 * markup: components/cta/scss/layout-patterns/cta-combo
 */
/**
 * section: M2DM/components/divider
 * title: Divider
 *
 * activateComponent: radius-component-divider
 *
 * purpose: Use to divide content when other visual cues are not used to do so.
 *
 * description: |
 *  
 *   Adds an `hr` tag that is a 1px high light-grey line. Can be used in conjunction with vertical spacing classes for extra effect.
 *
 * markup: components/divider/example
 *
 */
/**
 * section: M2DM/components/dropdown
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-dropdown--dropdown))
 *
 * title: Dropdown
 *
 * activateComponent: radius-component-dropdown
 *
 * abstractLink: 97651dc3-42e3-491a-b266-4bdcc85e7c0a
 *
 * purpose: Use to summon options that are related to a single theme or concept that would be too numerous to list in view all at once.
 *
 * description: |
 *   It consists of a clickable toggle and a hidden dropdown window which holds the additional content. Clicking the toggle element(the one visible on the page) will make the dropdown window appear.
 *
 *   In some contexts, the dropdown component contains an icon in front of each option. In this case the component requires the modifier class: `dropdown--with-icons` responsible for maintaing the space consistent between the icon and the dropdown option.
 *
 *   The component makes use of the toggler functionality which can be found here: `globals/js/toggle`.
 *
 *   ### Environment specific behaviour:
 *   When JavaScript is not available the hidden content in the dropdown window will not be visible.
 *
 *   ### Data attributes:
 *   - `[data-js-toggle]`: This attribute should be added to the dropdown wrapper.
 *   - `[data-js-toggle-switch]`: This attribute should be added to the element responsible for toggling the dropdown window display.
 *
 * markup: components/dropdown/example
 */
/**
 * section: M2DM/components/feature-list
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/featurelist--basic))
 *
 * title: Feature list
 *
 * activateComponent: radius-component-feature-list
 *
 * abstractLink: 07dcd6b8-6334-4af8-a4e3-6caf6f9771a9
 *
 *
 * purpose: Use to highlight and sell our features to prospects in a scannable and easy to digest manner.
 *
 * description: |
 *  This component fills all the space available and will wrap to form columns in tighter spaces.
 *  <br><br>
 *  To use the feature list inside the <em>Hero Sidekick</em>, add the class `hero-sidekick__content-grid` on the Feature List `ul` tag. A maximum of 5 items are allowed in the Feature List when combining with the Hero Sidekick.
 *  <br><br>
 * modifiers:
 *   feature-list--green: This class should be applied on the <ul> with the `.feature-list` class to modify the colour of the feature list item ticks to green.
 *
 * layout: components/feature-list/layout
 *
 * markup:
 *   - name: Default
 *     partial: components/feature-list/examples/standard
 *   - name: Modifier classes
 *     partial: components/feature-list/examples/modifiers
 *   - name: Hero Sidekick Example with TrustPilot
 *     partial: components/feature-list/examples/sidekick-trustpilot
 *   - name: Hero Sidekick Example Simple
 *     partial: components/feature-list/examples/sidekick
 *
 */
/**
 * section: M2DM/components/footer
 * title: Footer
 *
 * activateComponent: radius-component-footer
 *
 * abstractLink: 2f7fff8f-e78a-4640-9649-4d754d90178a
 *
 * purpose: Use to hold page closing information.
 *
 * description: |
 *  Depending on the type of the page, you can chose one of the following component variants:
 *   - standard footer, with mini sitemap, social links and legal section
 *   - footer with no legal section
 *   - minimal footer with no mini sitemap, social links or legal section
 *   
 *   See the examples below for usage.
 *
 *
 * layout: components/footer/layout
 *
 * markup:
 *   - name: Standard footer
 *     partial: components/footer/examples/standard
 *   - name: Footer with no legal bit
 *     partial: components/footer/examples/no-legal
 *   - name: Minimal footer for maximum conversion
 *     partial: components/footer/examples/minimal
 *
 */
/**
 * section: M2DM/components/forms
 * title: Forms
 *
 * abstractLink: 4d81f086-67b5-41f2-a973-6e8ff47f91cf
 *
 * description: |
 *   Form components are used for capturing and submitting user data.
 */
.form-radio, .form-checkbox {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 2rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
}
.form-radio input, .form-checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0;
}

.form-radio__icon, .form-checkbox__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: rgb(249, 253, 255);
  border: 1px solid rgb(0, 155, 222);
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  -webkit-transition-property: border, background, -webkit-box-shadow;
  transition-property: border, background, -webkit-box-shadow;
  -o-transition-property: border, box-shadow, background;
  transition-property: border, box-shadow, background;
  transition-property: border, box-shadow, background, -webkit-box-shadow;
}

.form-radio__input:focus + .form-radio__icon:not(:hover), .form-checkbox__input:focus + .form-checkbox__icon:not(:hover) {
  border-color: rgb(0, 155, 222);
  -webkit-box-shadow: 0 0 0 4px rgb(188, 229, 248);
          box-shadow: 0 0 0 4px rgb(188, 229, 248);
  -webkit-tap-highlight-color: transparent;
}

.form-radio:hover .form-radio__icon, .form-checkbox:hover .form-checkbox__icon {
  background: rgb(249, 253, 255);
  border-color: rgb(0, 155, 222);
  -webkit-box-shadow: 0 0 0 4px rgb(201, 203, 217);
          box-shadow: 0 0 0 4px rgb(201, 203, 217);
  -webkit-tap-highlight-color: transparent;
}

.form-radio__icon::before, .form-radio__input:checked + .form-radio__icon::before, .form-checkbox__icon::before, .form-checkbox__input:checked + .form-checkbox__icon::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 200ms ease;
  transition: -webkit-transform 200ms ease;
  -o-transition: transform 200ms ease;
  transition: transform 200ms ease;
  transition: transform 200ms ease, -webkit-transform 200ms ease;
}

.is-error .form-radio, .is-error .form-checkbox {
  color: rgb(232, 32, 55);
}

.is-error .form-radio:hover .form-radio__icon, .is-error .form-radio__input:focus + .form-radio__icon:not(:hover), .is-error .form-radio__icon, .is-error .form-checkbox:hover .form-checkbox__icon, .is-error .form-checkbox__input:focus + .form-checkbox__icon:not(:hover), .is-error .form-checkbox__icon {
  background-color: rgb(255, 255, 255);
  border-color: rgb(232, 32, 55);
}

/**
 * section: M2DM/components/forms/atoms
 * title: Atoms
 *
 * purpose: Use to create form elements with basic components.
 *
 * description: |
 *   They should not be used on their own. They must be used only coupled with other form atoms inside a `form-element` component.
 */
/**
 * section: M2DM/components/forms/atoms/form-element
 * title: Form element
 *
 * activateComponent: radius-component-form-element
 *
 * purpose: Use to structure a form element from a shell component.
 *
 * description: |
 *   This element should manage the validation of the elements in it. The inputs from inside the `.form-element__elements` should set the state class (`is-error` or `is-success`) to this element and all children should react accordingly.<br><br>
 *
 *   The shell component is a wrapper comprised of:
 *   - a label container for the label
 *   - the form element container for the form element that the user can interact with (*e.g.* an input, a collection of inputs)
 *   - a status container for the status message relating to the form element (error/success/warning messages, other statuses related to the input element, etc.).<br><br>
 *
 * markup: components/forms/atoms/form-element/markup
 *
 * reactDescription: |
 *   To generate this component, wrap your form elements inside of the React component FormElement. This removes the need for repeated code.
 *
 * reactUsage: components/forms/react/examples/form-element
 *
 * reactProps: |
 *  - `label`: string (or renderable node) (optional)
 *  - `status`: string (or renderable node) (optional)
 *  - `success`: boolean (optional) (default false)
 *  - `error`: boolean (optional) (default false)
 *  - `children`: any renderable node (required)
 */
/**
 * section: M2DM/components/forms/atoms/form-input
 * title: Form input
 *
 * activateComponent: radius-component-form-input
 *
 * warningContent: Must not be used on its own. Should be coupled with other form atoms inside a `form-element` component.
 *
 * purpose: Use to enable users to provide information.
 *
 * description: |
 *   The information can be provided through a range of different types of input fields (*e.g* checkboxes, date, email etc.).<br><br>
 *
 *   Depending on the value of its `type` attribute, the functionality of the input can change considerably.<br><br>
 *
 *   The input usually consists of an icon that represents a visual indication of the type of action that needs to be performed. In general, the icon has usually a decorative purpose but it can also be used as a control allowing the user to interact with the input. In this case, the variant class `form-input__icon--control` needs to be added on the `.form-input__icon` element.
 *
 * markup: components/forms/atoms/form-input/layout
 */
/**
 * section: M2DM/components/forms/atoms/form-label
 * title: Form label
 *
 * activateComponent: radius-component-form-label
 *
 * warningContent: Must not be used on its own. Should be coupled with other form atoms inside a `form-element` component.
 *
 * purpose: Use to provide information to the user about the element it introduces.
 *
 * description: |
 *   A labelable form-related element with an ID matching the value of the label's `for` attribute is called a labelled control for this label element.<br><br>
 *   It is **always important** to provide labels for controls, to inform the user about the control's purpose; and explicitly associate the label with its control (*e.g.* using the `for` attribute) to improve accessibility for screen readers in form mode.<br><br>
 *
 * markup: components/forms/atoms/form-label/markup
 */
/**
 * section: M2DM/components/forms/atoms/form-field-status
 * title: Form field status
 *
 * activateComponent: radius-component-form-field-status
 *
 * warningContent: Must not be used on its own. Should be coupled with other form atoms inside a `form-element` component.
 *
 * purpose: Use to indicate the status of the form field it is paired with.
 *
 * description: |
 *   The status of a form field refers to a validation state or a summary of field contents.<br><br>
 *   This is hidden by default. Should be displayed when an error occurs. It's only visible if the wrapping form element has the `is-error` class.
 *
 * markup: components/forms/atoms/form-field-status/markup
 */
/**
 * section: M2DM/components/forms/atoms/form-select
 * title: Form select
 *
 * activateComponent: radius-component-form-select
 *
 * warningContent: Must not be used on its own. Should be coupled with other form atoms inside a `form-element` component.
 *
 * purpose: Use to provide the user with a menu of pre-defined options.
 *
 * description: |
 *   It should be used when a single selection is required from a large number of possible options.
 *
 * markup: components/forms/atoms/form-select/markup
 */
/**
 * section: M2DM/components/forms/form-checkbox
 * title: Checkbox
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-forms-checkbox--basic))
 *
 * activateComponent: radius-component-form-checkbox
 *
 * abstractLink: d78f0396-a867-406b-b24d-9ae6fa27c155
 *
 * purpose: Use to allow users to choose between two different states by turning an option on or off.
 *
 * description: |
 *   A checkbox is not mutually exclusive. Multiple checkboxes can be used when the choices are obvious.
 *
 *   ### Context
 *   The checkbox is a base component and can be used within larger components and layouts.
 *
 *   ### Behaviour
 *   The control button inherits its colours from the secondary button. It has 5 states. Make it clear with words when users can select one or multiple options. The label should be included in the hit radius of the buttons
 *
 *   ### Modifiers
 *   * `form-checkbox--loud` - add this class if you want the checkbox and label to be more visible. This modifier also requires the label to be wrapped inside a span with class `form-checkbox__label` (see example)
 *
 * layout: components/forms/checkbox/example
 *
 * markup: components/forms/checkbox/example-markup
 */
/**
 * section: M2DM/components/forms/input
 * title: Input
 *
 * activateComponent:
 *   - radius-component-form-input
 *   - radius-component-form-element
 *   - radius-component-form-field-status
 *   - radius-component-form-label
 *
 * purpose: Use to collect data from users and confirm the validity, formatting or completeness of the data that they enter.
 *
 * description: |
 *   The input component is composed of:
 *   <ul>
 *      <li>A **label** that introduces what data is required to be entered by the user. The label is accompanied by visual helpers (icons) that are hidden by default. The icons become visible when the validation (positive/negative) of the labeled control occurs.</li>
 *      <li>An **input** field that may or may not include placeholder text to provide guidance on the type or formatting of data that is to be entered (the input can be of different types, *e.g.* email, password, checkbox, number etc.)</li>
 *      <li>A **field status** that indicates when there is a change in the field's status such as validation errors.</li>
 *   </ul>
 *
 *
 *   ### Input validation:
 *   The input components inside `.form-element__elements` set the state class **is-error** or **is-success** on the form element (e.g. `.form-element`) and all children should react accordingly.
 *
 * modifiers:
 *   is-error: The class should be applied on the `.form-element` element if the input has an error. This status class is part of the negative validation and it is responsible for changing the visibility of the `field status` and changing the appearance of the whole `input` field and *label*.
 *   is-success: The class should be applied on the `.form-element` element if the input is valid. This status class is part of the positive validation signaling that the information provided fulfilled field's requirements. It is responsible for changing the visibility of the icons that accompanies the *input* field.
 *   disabled: This a standard html attribute for an input field. When disabled is added ot an input field it disallows the user from editing the field and adds custom styles to indicate that the field can not be edited.
 *
 * markup: components/forms/input/markup
 *
 */
/**
 * section: M2DM/components/forms/radio
 * title: Radio
 *
 * activateComponent: radius-component-form-radio
 *
 * purpose: Use to select a single option from a list.
 *
 * description: |
 *   ### Context
 *   The Radio button is a base component and can be used within larger components and layouts.
 *
 *   ### Behaviour
 *   The radio button inherits its colours from the secondary button. It has 5 states. For more than two options, radio buttons should be stacked. The label should be included in the hit radius of the buttons
 *
 * layout: components/forms/radio/example
 *
 * markup: components/forms/radio/example-markup
 *
 * reactDescription: |
 *   To generate this component, place the relevant information of your Radio inside of the prop options listed below.
 *
 * reactUsage: components/forms/react/examples/radio
 *
 * reactProps: |
 *   - `name`: string (required)
 *   - `id`: string (required)
 *   - `label`: string (or renderable node) (required)
 *   - `value`: string (or renderable node) (required)
 *   - `onChange`: function (optional) (called with event)
 *   - `checked`: boolean (optional)
 *   - `stylised`: boolean (optional) (default false)
 *
 */
/**
 * section: M2DM/components/forms/search
 * title: Search input
 *
 * activateComponent:
 *   - radius-component-form-element;
 *   - radius-component-form-field-status;
 *   - radius-component-form-input;
 *   - radius-component-form-label;
 *   - radius-component-form-search
 *   - radius-component-label;
 *   - radius-component-paragraph-heading;
 *
 * description: |
 *   Use search input for dynamically searching
 *
 * reactUsage: components/forms/react/examples/search
 *
 * reactProps: |
 *  - `inputValue`: string (optional)
 *  - `items`: array of objects { id, heading, description } (optional)
 *  - `label`: string (optional)
 *  - `onChange`: function (optional - gets passed an input change event when an item is selected)
 *  - `onInputValueChange`: function (optional - gets passed an input change event as the user types)
 *  - `selectedItem`: object of { heading, description } (optional)
 *
 */
/**
 * section: M2DM/components/forms/stylised-radio
 * title: Stylised Radio
 *
 * activateComponent: radius-component-form-stylised-radio
 *
 * purpose: To use when a user can make a single attribute choice. or single option from a list.
 *
 * description: |
 *   ### Context
 *     The Radio button is a base component and can be used within larger components and layouts.
 *
 *   ### Behaviour
 *     The radio button inherits its colours from the secondary buttom. It has 5 states. 
 *     The label should be included in the hit radius of the buttons
 *
 * modifiers:
 *   form-stylised-radio--small: display smaller and more fittable version of stylised radio.
 *
 * markup: components/forms/stylised-radio/example
 */
/**
 * section: M2DM/components/header
 * title: Header
 *
 * activateComponent: radius-component-header
 * jsModule: header
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-header--minimal))
 *
 * abstractLink: dcaec04e-53b0-4b0f-bd98-6314c0370a39
 *
 * purpose: Use to easily explore and switch between top-level pages in a single interaction.
 *
 * description: |
 *   Header containing 3 levels of navigation and an overlay that holds additional navigation links.<br><br>
 *   1) `.header__upper` - contains the geo locator, contact number (and opening times in some regions), and sign in link on larger screens. On smaller screens this section contains the logo, call us icon and copy and a sign in link.<br>
 *
 *   2) `.header__primary` - contains the logo on larger screen sizes (the logo is removed on smaller screens), a primary nav bar that has horizontal scrolling enabled and a menu icon, which opens the header overlay on click. The content in the overlay is contained within the `header-overlay__window`.<br>
 *
 *   3) `.header__secondary` - contains the current page title, as well as a secondary nav bar that has horizontal scrolling enabled<br><br>
 *
 *   ### Class modifiers
 *   - `is-current` - state class used to indicate the current page the user is on.<br>
 *   - `header__nav-link--is-cta` - use on links that are call to actions e.g. check your eligibility.<br>
 *   - `header__border` - optional class and is only needed when the secondary nav in it's default form (not required on the inverse version of the secondary nav).<br>
 *   - `header-overlay__window--extended` - allows more than 4 columns to be accommodated inside the main area of the overlay.<br>
 * 
 *   ### Dependencies
 *   This component requires the transitionsSupported module to be included:</br />
 *   `import transitionsSupported` from `radius/dist/m2dm/js/transitions-supported`;
 *
 * markup: components/header/example-header
 */
/**
 * section: M2DM/components/header/header-secondary
 * title: Standard secondary navigation
 *
 * activateComponent: radius-component-header-overlay
 *
 * description: |
 *    The secondary navigation is optional and contains the current page title, as well as a secondary navigation bar that has horizontal scrolling enabled, so ensure all navigation can be accessed on smaller screens<br><br>
 *    There are 2 variants of the secondary nav:<br>
 *    1) default/standard for use on neutral/light grey background (see example below) - which sits within the normal flow of the page (visible in default header example below)<br>
 *    2) an inverse state for use on a dark background or image [see example](/M2DM/components/header/header-secondary-inverse/).
 *
 * layout: components/header/layout-secondary-nav
 * markup-secondary: components/header/example-secondary
 */
/**
 * section: M2DM/components/header/header-secondary-inverse
 * title: Inverse secondary navigation
 *
 * activateComponent: radius-component-header-overlay
 *
 * description: |
 *    The secondary navigation is optional and contains the current page title, as well as a secondary navigation bar that has horizontal scrolling enabled, so ensure all navigation can be accessed on smaller screens.<br><br>
 *    See below for an example of the inverse version of the secondary navigation - for use over a dark solid background or darker image.<br><br>
 *    To  use this apply the `header__secondary--inverse` class to the secondary header navbar (see example markup below). This should be combined with the `header__secondary--fold-over` class, which takes the secondary nav out of the normal page flow and positions it over the content below.
 *
 * layout: components/header/layout-secondary-nav
 * markup-secondary-inverse: components/header/example-secondary
 */
/**
 * section: M2DM/components/header/header-minimal
 * title: Minimal
 *
 * description: |
 *   The purpose of the minimal header is to minimise distractions by removing unnecessary links and content and focuses the user on the critcal path to conversion. It contains 2 levels of navigation only and only critical links.<br>
 *
 * markup: components/header/example-minimal
 */
/**
 * section: M2DM/components/hero
 * title: Heroes
 *
 * activateComponent: radius-component-hero
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-hero--functional))
 *
 * abstractLink: 89fc7dcd-567d-42d7-9e2a-cc4e913f6e50
 *
 * purpose: Use to set context for a page through a headline introducing the content.
 *
 * description: |
 *  This component often contains a text block component and CTAs. The only difference between the FUNCTIONAL HERO and the BRAND HERO is the Title (different font, size and colour).
 *   <br><br>
 *   When this components is called a certain necessary layout is created. The hero needs to spread across the whole viewport width, but the content inside will be contained within the page grid (see: `layout-patterns/page grid`). The content's layout pattern will follow a 4:1 grid on mobile and a 2:1 on desktop following the golden ratio proportions. For desktop, the content will also be padded with the standard 1.5rem gutter on the left and right side.
 *   <br><br>
 *   This component should always be used in conjunction with the `hero-customisation` mixin for setting the background image and colour. First parameter of this mixin is the relative path to the folder containing all the different versions of the background image; the images should be saved as follows: _portrait-s.jpg_, _portrait-l.jpg_, _landscape-s.jpg_, _landscape-l.jpg_ (from small resolutions to large ones and the screen ratio; check example for info on how each variant should differ).
 *   <br><br>
 *   To load different character-set fonts for other languages, define "$radius-config-brand-font-file" before the radius is loaded on "/m2dm/sass/init/_config.scss".
 *   <br><br>
 *   The `hero__caption` element is optional.
 *
 * sassUsage: |
 *
 *   @include radius-component-hero;
 *
 *   .hero {
 *      @include hero-customisation(images);
 *   }
 *
 * markup: components/hero/scss/example
 *
 */
/**
 * section: M2DM/components/hero/brand
 * title: Brand Hero
 *
 * purpose: Use to set a context for the page and land the brand proposition clearly.
 *
 * description: |
 *   This component contains brand heading, copy text and CTAs following the same layout as the functional hero, the only difference being the usage of the Selfmade Sans font.
 *
 * markup: components/hero/scss/brand-example
 *
 */
/**
 * section: M2DM/components/hero/functional
 * title: Functional Hero
 *
 * purpose: Use to set context for the page through a headline introducing the content.
 *
 * description: |
 *   This component contains section heading, copy text and CTAs following the same layout as the brand hero, the only difference being the usage of the Amasis font for the heading.
 *
 * markup: components/hero/scss/functional-example
 *
 */
/**
 * section: M2DM/components/hero/editorial
 * title: Editorial Hero
 *
 * purpose: Use to set context for content focussed pages.
 *
 * description: |
 *    The titles of these pages are usually longer and require more detail to describe their content and demonstrate relevance to the user. The pages focus more on content than conversion, such as articles, tips and tricks or guides.
 *
 *
 * sassUsage: |
 *
 *   @include radius-component-hero;
 *
 *   .hero--editorial {
 *      @include hero-editorial-customisation("img/hero", #333d65);
 *   }
 *
 *
 * markup: components/hero/scss/editorial-example
 *
 */
/**
 * section: M2DM/components/hero/sidekick
 * title: Hero sidekick
 *
 * activateComponent: radius-component-hero-sidekick
 *
 * purpose: Use to display content which complements the hero or needs to be above the fold.
 *
 * description: |
 *   The hero is paired with the sidekick, which is a bar that sits below the component and is slightly inset.
 *
 *   On mobile, there is no inset and the sidekick just takes up the full width and sits below the hero, like any other element.
 *
 *   ### To use it:
 *   - Add the sidekick markup as per the example below. Note it is a separate `section`, rather than a child within the hero section (HTML only)
 *   - Give the hero itself a modifier class of `hero--with-sidekick` (this will increase bottom padding of the hero so the sidekick doesn't overlap any hero content)
 *   - Use the `hero-sidekick-customisation` mixin to declare the sidekick background colour, and the background underneath the sidekick (should be the same background colour of the next section on the page)
 *
 *   ## Alternate version
 *
 *   An alternative version of the sidekick is also available by adding the modifier class `hero-sidekick--alt` to the sidekick element.
 *   This version differs from the main one in that it actually overlaps the following element.
 *   The reason for this alt version is so as to be able to overlap following elements that have background images.
 *   The second argument to the customisation mixin will be ignored for this version of the sidekick.
 *   The one constraint with the alt version of the sidekick is that it needs to contain as its first and only child a `div` element (There are no restrictions on the content of this element).
 *
 * sassUsage: |
 *
 *   @include radius-component-hero-sidekick;
 *
 *   .hero-sidekick {
 *       @include hero-sidekick-customisation(get-color(purple), get-color(yellow, light));
 *   }
 *
 *
 * layout: components/hero/scss/sidekick/example
 * markup: components/hero/scss/sidekick/example-markup
 *
 *
 */
/**
 * section: M2DM/components/hero/two-column-hero
 * title: Two Column Hero
 *
 * activateComponent: radius-component-two-column-hero
 *
 * description: |
 *  This component often contains a text block component and CTAs in the left side contend and an image in the right side of the component. Although there is no styling for the interior content of this component so you can style as needed.
 *  <br><br>
 *  <strong>PRO TIP:</strong> create your own BEM classes for the styling of interior content so as to not overwrite any current or future styles that may be added to this component.
 *  <strong>AVOID</strong> using the two-column-hero in your own custom classes.
 *   <br><br>
 *   When this components is called a certain necessary layout is created. The hero needs to spread across the whole viewport width, but the content inside will be contained within the page grid (see: `layout-patterns/page grid`). The content's layout pattern will follow a 4:1 grid on mobile and a 2:1 on desktop following the golden ratio proportions. For desktop, the content will also be padded with the standard 1.5rem gutter on the left and right side.
 *   <br><br>
 *   This component should always be used in conjunction with the `two-col-hero-customisation` mixin for setting the background image and colour. First parameter of this mixin is the relative path to the folder containing all the different versions of the background image; the image should be saved as two-col-hero.jpg_
 *   <br><br>
 *   To load different character-set fonts for other languages, define "$radius-config-brand-font-file" before the radius is loaded on "/m2dm/sass/init/_config.scss".
 *   <br><br>
 *
 *   ## Modifiers
 *   - To vertically center your items inside the container use the class `.two-column-hero--v-centered` on the element with the class `.two-column-hero__container`
 *
 * sassUsage: |
 *
 *   @include radius-component-two-col-hero;
 *
 *   .two-column-hero {
 *      @include two-col-hero-customisation(images);
 *   }
 *
 * markup: components/hero/scss/two-column-hero/example
 *
 */
/**
 * section: M2DM/components/meet-the-team
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-meettheteam--meet-the-team))
 *
 * title: Meet the Team
 *
 * activateComponent: meet-the-team
 *
 * purpose: Use to convey trust and security to the user about a given project / company and provide an overview of the people behind the scenes.
 *
 * description: |
 *  Consists of a list of team members and a detail panel.
 *
 *  The list of team members are arranged in a grid whose column span varies with the width of the viewport (ranging from 5 columns on large devices to 3 on medium sized screens and 2 on small devices).
 *  
 *  The detail panel just handles the layout and is expected to be inserted into a modal window.
 *  
 *  **This component is very closely aligned to the profile component and modal component.** The profile component is expected to fill in the grid and provide a bunch of faces, names, and job titles, and the modal is used to display the detail panel for each team member.
 *
 *
 * layout: components/meet-the-team/example
 *
 * markup: components/meet-the-team/example-markup
 *
 */
/**
 * section: M2DM/components/modal
 * title: Modal
 *
 * activateComponent: radius-component-modal
 * jsModule: modal
 * jsModuleParameters: '{ animationsOn: transitionsSupported }'
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-modal--basic))
 *
 * abstractLink: 2a42359c-68a4-40ce-8e6e-9ae7244a1fe4
 *
 * purpose: Use to serve additional content in an overlay above all other content.
 *
 * description: |
 *
 *   Only one modal can be displayed at a time.<br><br>
 *
 *   On mobile screens the modal takes up the entire screen width and height. On larger screens, the modal takes up the centre of the page, and displays an overlay over the rest of the content.<br><br>
 *
 *   ### How to use
 *
 *   1. Copy the markup from the example. The modal can live anywhere in the DOM.
 *   1. Add what you wish to display inside the `.modal__content` div.
 *   1. Replace the ID of the modal to something unique. I.e. NOT `dialog-1`
 *   1. Add the button to the page where needed. Ensure the `data-js-modal-open` attribute matches the ID you gave the modal.
 *
 *   ### How it works
 *
 *   This component is based on the [a11y-dialog](https://github.com/edenspiekermann/a11y-dialog) project, which is designed with accessibility in mind, since modals are especially problematic for screen readers.
 *
 *   The display of the modal is handled by the aria-hidden attribute. When this is set to true, the display property is set to none. The a11y-dialog library toggles only the aria-hidden attribute.
 *
 *   The `js/index.js` file exports a method which finds all the modals (elements with `data-js-modal` attributes), moves them in the DOM to sit just before the closing body tag, and activates them with a method from the a11y-dialog library
 *
 *   It moves the modals to sit just before the closing body tag, because the a11y-dialog library applies aria-hidden=true to every _sibling_ element of the modal. We want everything but the modal to be aria-hidden, so moving modals to just before the closing body tag makes everything else a sibling. If you want to disable that, you can pass the "no-move" value to the `data-js-modal` attribute.
 *
 *   The `data-js-content` attribute is not mandatory; whenever the modal contains an iframe element, you should pass the `video` value to this attribute which will allow interaction with the Youtube API for manipulating the player element within the modal.(**Note:** You'll also have to load the IFrame Player API Javascript code by inserting the following script: ```<script src="https://www.youtube.com/iframe_api"></script>```)
 *
 *   ### Data attributes:
 *   - `[data-js-modal]`: This attribute should be added on the modal wrapper;
 *   - `[data-js-modal-open]`: This attribute should be added on the button that will open the modal;
 *   - `[data-js-modal-close]`: This attribute should be added on the button that will close the modal;
 *   - `[data-js-content]`: This attribute should be added on the modal wrapper; it's used to identify the type of content held in the modal.
 *
 *   ### Compatibility
 *   This component uses HTMLElement.prototype.closest. So please make sure to use polyfill.io when using this component, as support for this method is provided in the default feature set.
 *
 *   ### Dependencies
 *   This component requires the `transitionsSupported` module to be included: </br />
 *   `import transitionsSupported` from `radius/dist/m2dm/js/transitions-supported`;
 *
 * markup: components/modal/example
 * youtubeApi: true
 *
 */
/**
 * section: M2DM/components/notice
 * title: Notice
 *
 * activateComponent: radius-component-notice
 *
 * abstractLink: 4502b62c-19ea-4415-9178-4f4a669cd9b4
 *
 * purpose: Use to communicate change, provide feedback as a result of a user’s action or to convey information regarding a potential action.
 *
 * description: |
 *    This component should clearly and succinctly convey the main message, and if applicable, guide the user on the consequence or the best action the user can take next, but without overtaking the page or disrupting the user from performing actions on the page.<br><br>
 *    They can be either static, dismissable or automatically removed after a fixed period of time.<br><br>
 *    Notice bars are not “sticky”, so as the user scrolls down, it may disappear out of view. Both static and animated bars will load with the page, so they should show immediately once the page is loaded.<br><br>
 *    <strong>N.B</strong> when all variants of this notice component have been built it will be used instead of the current notification component, which is a candidate component that will be deprecated over time in favour of the notice.<br><br>
 *
 *    <strong>Status variations</strong> (see subcategories for usage examples and descriptions):
*     All status modifier classes are added to the parent notice component `notice notice--<status-modifier>`.
 *    <ul>
 *      <li>Default (general information)</li>
 *      <li>Success - use this to convey something was successfully completed or changed to the user. Usually success and confirmations are straight-forward, so they should be one-line, short and sweet.</li>
 *      <li>Error/failure - use this to convey something was unsuccessful, and requires immediate attention or action. Choose static or temporary animated appropriately based on use case. Try not to have vague copy like “Something went wrong”, but rather informational and actionable copy.</li>
 *      <li>Attention/warning - use this to convey to the user that there is an issue that requires attention, such as a warning or note, that might not require immediate action.</li>
 *      <li>Action - use this to convey to the user that an action is required. This variant can contain [CTAs](/M2DM/components/cta/) to induce users to take certain actions, such as navigation. CTA's can live inline in the copy as a text link, or below the notification copy as a primary CTA or CTA combo.</li>
 *    </ul>
 *
 *    <strong>Layout and size variations</strong><br><br>
 *    All modifier classes are added to the parent notice component `notice notice--<modifier>`.
 *    <ul>
 *      <li>Default - spans full width of the parent container</li>
 *      <li>Compact - width determined by the content of the notice, rather than the width of the parent element. For notices that require less prominance/attention. Often used to highlight the result of a user action e.g. uploading a document, saving progress in an application or loss of connection.</li>
 *      <li>Small - the small modifier class can be added with any icon to give it a smaller appearance. The icon, title, and text will all display at a smaller font size than the rest of the icons (uses the `font(small)` mixin)</li>
 *      <li>Spacious - the spacious modifier class can be added to notice components without an icon that require additional whitespace around the copy for a more spacious feel.</li>
 *    </ul>
 *
 *    To avoid “alert fatigue” (where user starts ignoring alerts and notifications because they see it frequently), please only use a notification bar when it requires user’s attention or action on something.<br><br>
 *    <strong>N.B.</strong> When all variants have been built - this component will replace the notification component that is a currently a candidate component and the notification component will be deprecated.
 *
 * layout: components/notice/example-layout
 *
 * markup: components/notice/notice
 * markup-icon: components/notice/notice-icon
 * markup-title: components/notice/notice-title
 * markup-title-icon: components/notice/notice-title-icon
 * markup-cta: components/notice/notice-cta
 */
/**
 * section: M2DM/components/notification
 * title: Notification
 *
 * activateComponent: radius-component-notification
 *
 * warningContent: This component is a **candidate component** and before being reused it needs to be agreed by the design team.
 *
 * purpose: Use to communicate an alert or a status change to the user without overtaking the page or disrupting the user from performing actions on the page.
 *
 * description: |
 *    <strong>N.B.</strong> This is a candidate component and will soon be replaced by the Notice component, once all of the variants have been created for the Notice. As this candidate component will soon be deprecated, please use the [Notice component](/M2DM/components/notice/) instead, where possible.
 *    It should clearly and succinctly convey the main message, and if applicable, guide the user on the consequence or the best action the user can take next.<br><br>
 *    Notification bars are not “sticky”, so as the user scrolls down, it may disappear out of view. Both static and animated bars will load with the page, so they should show immediately once the page is loaded.<br><br>
 *    Notification bars always live at the top of the page, right under the navigation bar. They can either be:
 *    <ul>
 *      <li>a <strong>static bar</strong> that stays on the page until a condition/status has changed, or</li>
 *      <li>a <strong>temporary animated bar</strong> that shows for 10 seconds, and then slides up to disappear. Add a [data-js-notification-collapse] on the block element to make the notification collapsable.</li>
 *    </ul>
 *    <br><br>
 *    Status variations (see subcategories for usage examples and descriptions):
 *    <ul>
 *      <li>Success</li>
 *      <li>Error/failure</li>
 *      <li>Attention</li>
 *      <li>Information</li>
 *    </ul>
 *
 *    To avoid “alert fatigue” (where user starts ignoring alerts and notifications because they see it frequently), please only use a notification bar when it requires user’s attention or action on something.
 *
 * markup: components/notification/example
 */
/**
 * section: M2DM/components/notification/information
 * title: Information
 *
 * description: |
 *    Use this to inform the user of something that is not urgent and doesn’t require any action. This is usually a system-wide notification about their account. Choose static or temporary animated appropriately based on use case.
 *
 * markup: components/notification/example-information
 */
/**
 * section: M2DM/components/notification/attention
 * title: Attention
 *
 * description: |
 *    Use this to convey there is an issue that requires attention, but maybe not immediate action. Choose static or temporary animated appropriately based on use case.
 *
 * markup: components/notification/example-attention
 */
/**
 * section: M2DM/components/notification/success
 * title: Success
 *
 * description: |
 *    Use this to convey something was successfully completed or changed to the user. This should be a temporary animation that shows for 10 seconds and goes away. Usually success and confirmations are straight-forward, so they should be one-line, short and sweet.
 *
 * markup: components/notification/example-success
 */
/**
 * section: M2DM/components/notification/error
 * title: Error
 *
 * description: |
 *    Use this to convey something was unsuccessful, and requires immediate attention or action. Choose static or temporary animated appropriately based on use case. Try not to have vague copy like “Something went wrong”, but rather informational and actionable copy.
 *
 * markup: components/notification/example-error
 */
/**
 * section: M2DM/components/page-closer
 * title: Page Closer
 *
 * activateComponent: radius-component-page-closer
 *
 * abstractLink: 67589617-cb07-41e0-b798-b58accc4bfcd
 *
 * purpose: Use to provide a final set of prompts to the user if they haven't taken any other action on the page.
 *
 * description: |
 *
 *   This component sits just before the footer. It should provide links to popular pages or articles, and give the user contact information so that they may easily follow up on any queries they have.<br><br>
 *
 *   There are two variants. The first is a 3 column layout, the other is a 4 column layout. An article component can sit in the last column of either variant (the article component itself is not built yet).
 *
 * layout: components/page-closer/example
 *
 * markup: components/page-closer/example-markup
 */
/**
 * section: M2DM/components/process-diagram
 * title: Process diagrams
 *
 * abstractLink: 0ef69164-c5c8-491b-8d3a-f470cae0cb72
 *
 * purpose: Use to communicate a sequence of steps and highlight the benefits of a process to the user.
 *
 */
/**
 * section: M2DM/components/process-diagram/process-diagram
 * title: Process diagram
 *
 * activateComponent: radius-component-process-diagram
 *
 * abstractLink: 0ef69164-c5c8-491b-8d3a-f470cae0cb72
 *
 * description: |
 *   It does not highlight individual, disconnected benefits like a feature list but rather helps describe the user's journey and show the process as a whole.
 *
 *   The default status is the vertical alignement of the numbers, with a `--responsive` variant allowing for the content to flow responsively on the page with the numbers horizontally aligned.<br><br>
 *
 *   **Warning**: if a browser does not support rem units, the content might be obscured.
 *
 * markup: components/process-diagram/scss/process-diagram/example
 */
/**
 * section: M2DM/components/process-diagram/process-steps
 * title: Process steps
 *
 * activateComponent: radius-component-process-steps
 *
 * purpose: Provide the user with context for their place in a multi-step process. Show completion progress, current location and remaining steps.
 *
 * description: |
 *   Each one of the process step components is made up of process step items. These are the element with the attached class name of `process-steps__item`.
 *   To change the state of one of these components you can use state classes. These items have multiple options as displayed below in the example and markup and list:
 *     - *NO CLASS* : this is the default state of the step item. This displays the yet to be complete and not active class.
 *     - `is-active` : this state will be the current step the user is on.
 *     - `is-complete` : this state exists for previous steps that have been completed.
 *
 * markup: components/process-diagram/scss/process-steps/example
 */
/**
 * section: M2DM/components/process-diagram/loud-process-diagram
 * title: Loud process diagram
 *
 * activateComponent: radius-component-loud-process-diagram
 *
 * abstractLink: 0ef69164-c5c8-491b-8d3a-f470cae0cb72
 *
 * description: |
 *   It does not highlight individual, disconnected benefits like a feature list but rather helps describe the user's journey and show the process as a whole.
 *
 * markup: components/process-diagram/scss/loud-process-diagram/example
 */
/**
 * section: M2DM/components/profile
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-profile--default-story))
 *
 * title: Profile
 *
 * activateComponent: radius-component-profile
 *
 * purpose: Use to provide a visual representation of a person or an object with associated information.
 *
 * description: |
 *   
 *   Display a picture element (typically of someone's face), alongside two text elements that sit on top of each other. Example usage of the text is that one line features a phone number, and the other line features a prompt to call for help.
 *   
 *   If using a phone number, make sure you change the phone number in the `href` attribute too, so that it dials the correct number when clicked.
 *   
 *   ## Variants
 *
 *   ### Default
 *   The default layout is "horizontal" with the picture sitting on the same row as the text. It is responsive and moves to the "vertical" layout (detailed below) if there isn't enough space.
 *
 *   ### Vertical
 *   This makes the picture always sit on the row above the text. It is not responsive and always uses this format.
 *
 *   ### Team
 *   This makes the picture sit on the row above the text, and centers the content. It is used in the grid of the Meet the Team component.
 *
 * markup: components/profile/example
 *
 */
/**
 * section: M2DM/components/progress
 * title: Progress
 *
 * activateComponent: radius-component-progress
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-progress--simple))
 *
 * purpose: Use to display the progress of a task or to represent advancement towards a total.
 *
 * description: |
 *   ### Context:
 *     This component can sit within other components, it runs full width of the space it occupies.
 * 
 *   ### Behaviour:
 *     - The speed of progress is determined by the task.
 *     - The indicator should always fill from 0% to 100%, in instances where progress has been made off view, the active progress should be animated from left to right.
 * 
 *   ### Elements:
 *     - `.progress`: This is the main element in which indicates the length of the progress to complete.
 *       - `.is-complete`: This is the state class which indicates when the progress bar is complete. This is to be applied to any ancestor of the `.progress` element or the `.progress` element itself.
 *     - `.progress__activity`: This is the element which represents the current progress of the activity. This is where you apply an inline width (`style="width: 50%;"`) to represent the progress.
 * 
 *   ### Use the input to test the progress bar:
 *     <input type="number" value="50" min="0" max="100" data-js-progress-percentage/>%
 *
 * markup: components/progress/scss/example
 */
/**
 * section: M2DM/components/quote
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-quote--Simple))
 * title: Quote
 *
 * activateComponent: radius-component-quote
 *
 * purpose: Use to cite words said by a person or organisation.
 *
 * description: |
 *   Can include a citation (i.e. the quote's author), but this is optional.
 *
 *   There are three class modifiers that can be used. And one further modifier which is set by the page language.
 *
 *   ### Class Modifiers
 *
 *   `quote--trustpilot-author`: For when the quote is sourced from TrustPilot. Makes the author text green.
 *
 *   `quote--large`: Larger, bold font.
 *
 *   `quote--shrink`: On smaller screens, the text gets smaller and switches to the default font.
 *
 *   ### Locale modifier
 *
 *   If the page language is set to `de`, different quote marks are used due to the way the German language works.
 *
 *   When this component is used, it is assumed the correct lang attribute is set on the page.
 *
 *   To observe the difference, use the below select box to switch the lang attribute on the html tag and see the examples change.
 *
 *   <select class="html-lang-input">
 *    <option value="en">en</option>
 *    <option value="de">de</option>
 *   </select>
 *
 * layout: components/quote/example
 *
 * markup: components/quote/example-markup
 */
/**
 * section: M2DM/components/screamer
 * title: Screamer
 *
 * activateComponent: radius-component-screamer
 *
 * abstractLink: be099061-cd98-472b-af9a-8e58d76e39a6
 *
 * purpose: Use to suggest actions a user should take and the reasons behind these actions.
 *
 * description: |
 *   This component includes a body of text with a large font and a customised content on the right (often a CTA button, a stat component). On smaller screens the two columns stack.
 *
 *   ### Variations
 *   
 *   **Default** `.screamer`
 *   
 *   Aligns the text to the left always
 *   
 *   **Center aligned** `.screamer .screamer--centered`
 *   
 *   Center aligns the text and content always (except for .screamer__message on desktop where the text is left aligned)
 *
 * layout: components/screamer/scss/example
 * 
 * markup: components/screamer/scss/example-markup
 */
/**
 * section: M2DM/components/statistics
 * title: Statistics
 *
 * activateComponent: radius-component-statistics
 *
 * purpose: Use to represent quantitative information through rectangle bars.
 *
 * description: |
 *  Groups can contain one or more bars.<br><br>
 *  Size of bars is determined by height and width  declarations in style attribute.<br><br>
 *  Labels are defined in HTML in attributes and text. See HTML example for configuration details.
 *  
 *  ### Classes and Attributes:
 *   - `.bar-graph`: On component root element
 *   - `.bar-graph__group[data-label]`: A group of bars. data-label specifies the label for the bar 
 *   - `.bar-graph__item.bar-graph__item--green`: A bar. The modifier specifies color of bar
 *
 * layout: components/statistics/example
 * 
 * markup: components/statistics/example-markup
 */
/**
 * section: M2DM/components/step-card
 * title: Step card
 *
 * activateComponent: radius-component-step-card
 * jsModule: step-card
 * jsFunction: stepCard
 *
 * purpose: Use to break a long user flow into a sequence of logical steps.
 *
 * description: |
 *   The step card is a pattern built for forms with multiple consecutive parts but also has a static modifier to be used without its javascript counterpart.<br><br>
 *
 *   ### Modifier:
 *   `step-card--grey` - if there is only one card per page, then this modifier should be applied.
 *
 *   ### Elements:
 *     - `step-card`: The main element. This element has the option of two classes:
 *       - `is-collapsed`: which shows the `step-card__collapse` element and hides the `step-card__content`
 *       - `is-inactive`: which shows the `step-card__inactive` element and hides the `step-card__content`
 *     - `step-card__content`: The meat of the content. This element wraps the general content where other components will be placed.
 *     - `step-card__collapse`: Contains the summarised content.
 *     - `step-card__inactive`: Contains the inactive content.
 *
 * markup: components/step-card/example
 */
/**
 * section: M2DM/components/tabs
 * title: Tabs
 *
 * activateComponent: radius-component-tabs
 * jsModule: tabs
 *
 * abstractLink: 2f11850b-4d82-4b4c-9145-f8e4b45bb85e
 *
 * purpose: Use tabs to make it easy to explore and switch between different views.
 *
 * description: |
 *   A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
 *   
 *   Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.
 *   
 *   The default layout for the tabs is horizontal across all screen sizes and is designed to be used with a small number of groups of content (typically 3 or less).
 *
 * modifiers:
 *   tabs--vertical: This variant should be used when a large number of content groups is needed (more than 3). This variant will fallback to the horizontal layout on mobile to make better use of available space
 *
 * markup: components/tabs/markup
 */
/**
 * section: M2DM/components/text-block
 * title: Text block
 *
 * activateComponent: radius-component-text-block
 *
 * abstractLink: e9847b2d-69e1-49a9-b0df-333acee75116
 *
 * purpose: Use to educate readers on a certain subject such as brand story, product information and USPs.
 *
 * description: |
 *   Modifiers for large, medium, small and xsmall variants are responsible for combining different typographic elements depending on the type of message to be conveyed.<br>
 *   
 *   The `large` and `medium` variants incorporate section headings, while the `small` and `xsmall` variants make use of paragraph headings. More details about headings can be found in the typography section (see: `rules/typography/headings`).<br>
 *   
 *   In the context of the `--large` variant, the heading is followed by an `accent bar` which is meant to draw users attention. Two variants of the `accent bar` exists dependent of the font used (these variants are: `--brand` and `--primary`).<br>
 *   
 *   When used on dark backgrounds, an utility class needs to be added which will change the text block color to `white` (see: `developer/utility classes/modifiers`).
 *   
 *   |                      | Heading  | Accent bar | Lead paragraph | Paragraph |
 *   | -------------------- |:--------:|:----------:|:--------------:|:---------:|
 *   | `text-block--large`  | required | required   | required       | optional  |
 *   | `text-block--medium` | optional | N/A        | optional       | optional  |
 *   | `text-block--small`  | optional | N/A        | N/A            | required  |
 *   | `text-block--xsmall` | optional | N/A        | N/A            | required  |
 *   
 *   
 *   ### Modifiers |
 *   `text-block--center`: use when you need a center aligned text block
 *
 * layout: components/text-block/example
 *
 * markup: components/text-block/example-markup
 */
/**
 * section: M2DM/components/totaliser
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-totaliser))
 *
 * title: Totaliser
 *
 * activateComponent: radius-component-totaliser
 *
 * purpose: To show the user's placement to an end financial goal.
 *
 * description: |
 *   The totaliser can display 2 numbers - Start figure and goal figure. The symbols can show dynamic progress by typing into the length overwrite field.
 *   
 *   ### Context:
 *     The Totaliser component is a compound component containing, label, paragraph heading, and progress sub components.
 *   
 *   ### Behaviour:
 *     The Totaliser component inherits the behaviour from its sub components.
 *   
 *   ### States:
 *     - `NO_STATE`: use when no activity has occured.
 *     - `.is-started`: use when activity is in progress but not complete.
 *     - `.is-complete`: use when activity is complete.
 *
 * markup: components/totaliser/scss/example
 */
/**
 * section: M2DM/components/trust/trust-bar
 * title: Trust bar
 *
 * activateComponent: radius-component-trust-bar
 *
 * purpose: Use to convey 3rd party endorsements.
 *
 * description: |
 *   This component displays a set of logos of 3rd party companies or organisations that have endorsed or recommended Funding Circle.<br><br>
 *
 *   It displays a different number of logos depending on the screen size. There shouldn't be more than max 6 "trust-bar__item" elements. Any more will be hidden. Each item may link to an article or blog post on the 3rd party organisation's website.<br><br>
 *
 *   It has a transparent background as it may sit in a section with a background colour that should show through.
 *
 * markup: components/trust-bar/example
 */
/**
 * section: M2DM/components/trust
 * title: Trust components
 *
 * purpose: Use to convey trust.
 *
 * description: |
 *   Trust components convey trust by offering social proof (by citing either customers or press statements) or by including details of the various partnerships.
 */
/**
 * section: M2DM/components/trust/trust-block
 * title: Trust block
 *
 * activateComponent: radius-component-trust-block
 *
 * abstractLink: 58e554e6-7f11-4cc3-aedc-ed14c4cf1228
 *
 * purpose: Use to build trust by including details of the various partnerships.
 *
 * description: |
 *   This component may often include a variation of the `text block` or a `quote` combined with a logo image or a Trustpilot widget. It's responsible for setting up the layout while being flexible in terms of content.<br><br>
 *
 *   _When living beside other components_ in a 1:1 grid (equal columns) the section housing the copy stacks above the section housing the logo or Trustpilot widget across all screen sizes.<br><br>
 *
 *   _When living by itself_, the trust block will spread across the full width of the screen. In this case, the section housing the logo or the Trustpilot widget will live on the left side of the container being followed by the section housing the copy (on the right side). For generating more complex layouts between custom breakpoints the component makes use of the `get-columns-width` function (which is part of the `rs-golden-ratio-grid` project imported in Radius as node module dependency). In this user case, the component will require the usage of the modifier class: `.trust-block--full-width` to ensure the layout is applied.<br><br>
 *
 *   The HTML markup should follow the order in which elements will appear on the page for each case which will result in a natural flow of the elements on the page.
 *
 * layout: components/trust-block/example
 *
 * markup: components/trust-block/example-markup
 */
/**
 * section: M2DM/components/trust/trustpilot
 * title: Trustpilot
 *
 * activateComponent: radius-component-trustpilot
 * jsModule: trustpilot
 * jsFunction: trustpilot().start
 *
 * purpose: Use to increase credibility and trust based on the visual representation of the Trustpilot logo, rating and reviews.
 *
 * description: |
 *   When paired with Trustpilot quotes, this component offers an opportunity to demonstrate social proof and support claims about our products and service.<br><br>
 *
 *   The TrustPilot component can be used as a standalone section. It can also be paired with other content or contained within other components, eg. it can be paired with a heading or contained within the Hero or Trust block, but it cannot contain any other content. It can live in the context of the `Third Party Block` or inside the `Hero` component.<br><br>
 *
 *   ### Usage

 *   Ensure the component contains the data attribute `data-js-trustpilot-api`.<br><br>
 *
 *   ### API
 *
 *   This component fetches data from the Trustpilot API in order to show the current star rating, trustscore, and number of reviews. To reduce API calls, it stores the API data in localStorage, and only refreshes from the API after one day.<br><br>
 *
 *   ### Variants
 *
 *   `.trustpilot--small` - makes it a bit smaller <br>
 *   `.trustpilot--inverse` - for use on dark background. **make sure you use the inverse trustpilot logo too**<br><br>
 *   `.trustpilot--centered` - centers the content of the component<br><br>
 *
 *   ### Other
 *
 *   The element will automatically be hidden, if the number of stars on Trustpilot is 3 or less. This is so if there is a dramatic drop in the Trustpilot score, at least it won't be advertised on the website.<br><br>
 *
 *   ### Logo
 *
 *   The link for the logo is optional - please remove hyperlink from the example markup if not required.<br><br>
 *
 *   ### Dynamic elements
 *
 *   To use the information returned from the API, there are 4 dynamic elements that can be used. These are span tags with data attributes on them. When the trustpilot script runs, these tags will be found and replaced with the correct data.
 *
 *   - `<span data-js-trustpilot-headline-rating data-content-4stars="Great" data-content-5stars="Excellent"></span>` - Displays a word which reflects the current star rating. The word displayed must be provided as a data attribute
 *   - `<span data-js-trustpilot-stars></span>` - Displays images of stars. This element will be filled with either 4 or 5 image tags, depending on the current star rating.
 *   - `<span data-js-trustpilot-trustscore></span>` - Displays the current trustscore
 *   - `<span data-js-trustpilot-review-count></span>` - Displays the current number of reviews written
 *
 * layout: components/trustpilot/example
 *
 * markup: components/trustpilot/example-markup
 */
/**
 * section: M2DM/components/uploader
 * title: Uploader
 *
 * activateComponent: radius-component-uploader
 *
 * abstractLink: 1d293c07-a19b-44fd-ab61-39e181f15d8d
 *
 * purpose: To allow users to easily upload, manage and remove files.
 *
 * description: |
 *   ### This component depends upon the ```radius-component-card``` as the uploader lives inside of the card.
 *
 * markup: components/uploader/example
 */
/**
 * section: M2DM/components/video-block
 * title: Video block
 *
 * activateComponent: radius-component-video-block
 * jsModule: video-block
 * jsFunction: videoBlock
 *
 * purpose: Use to communicate complex information visually through a video.
 *
 * description: |
 *   This component provides a YouTube video block that can be used anywhere on a page.
 *
 *   ### How to use
 *   1. Copy the `video-block` markup from the example.
 *   1. Change the video URL and make sure `enablejsapi=1` param is added.
 *   1. Add `data-js-video-block-container="{video-name}"` to a chosen ancestor element - the video block will fill this container when activated.
 *   1. Make sure all `data-js` attributes use the same video name. You don't need a value on `data-js-video-block-player`.
 *   
 *   ### Good to know
 *   - `position: relative` will be added to the marked container if its position is static.
 *   - The video player always maintains a 16:9 aspect ratio while the video-block covers the entire container providing letterboxing.
 *   - The video starts playing automatically when it becomes visible and pauses when it's hidden.
 *   - This component does not need the YouTube Iframe API for it to work.
 *   - You can make the video always visible by adding a `video-block--visible` class on the video block element. The `data-js-video-block-trigger` elements are optional.
 *   - You can have as many video blocks on one page as you want, provided they use different names.
 *
 * markup: components/video-block/example
 */
/**
 * section: M2DM/components/confetti-banner
 * title: Confetti Banner
 *
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-confetti-banner--simple))
 *
 */
/**
 * section: M2DM/components/icon
 * activateComponent: radius-component-icon
 * warningContent: The React documentation for this component can be read from Storybook (link [here](/storybook/?path=/story/components-icon--accent))
 *                                                                                      
 * title: Icon
 *
 * description: |
 *  To see more documentation about Icons please visit <a href="/M2DM/icons">Icons</a>
 *
*/
@media only screen and (max-width: 639px) {
  .page-documentation {
    padding-bottom: 2.5rem;
  }
}
.page-documentation .content__subcategories {
  list-style: none;
}

@media only screen and (min-width: 640px) {
  .root-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.content {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
  overflow: auto;
}

.content__code-block {
  max-height: 25rem;
  padding: 1.5rem;
  overflow: scroll;
  background-color: rgb(255, 250, 248);
  resize: vertical;
}

.content__component-example {
  margin-bottom: 1.5rem;
}

.content__section--tab {
  padding: 0 1.5rem;
}

.component-variant {
  padding: 1rem 1.5rem;
  margin: 0 0 2rem;
  border: 1px solid rgb(239, 240, 245);
  border-radius: 3px;
}

.component-variant__title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.component-variant__description {
  margin-bottom: 1rem;
  color: rgb(66, 69, 84);
}

.component-variant__content {
  position: relative;
  padding: 1rem 0;
}

.component-variant__customisation--inverse {
  display: inline-block;
  padding: 1rem;
  background-color: rgb(66, 69, 84);
}

.hero--homepage {
  background-image: url("img/hero-homepage/s.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 640px) {
  .hero--homepage {
    background-image: url("img/hero-homepage/m.jpg");
  }
}
@media only screen and (min-width: 980px) {
  .hero--homepage {
    background-image: url("img/hero-homepage/l.jpg");
  }
}
@media only screen and (max-width: 979px) {
  .hero--homepage {
    text-align: center;
  }
}

.homepage-description {
  max-width: 50rem;
}
.homepage-description h2 {
  font-size: 2.0625rem;
}

@media only screen and (min-width: 640px) {
  .homepage-features {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .homepage-features:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .homepage-features > * {
    float: left;
  }
  .homepage-features > :nth-child(1) {
    width: 33.3333333333%;
  }
  .no-flexbox .homepage-features > :nth-child(1) {
    clear: left;
  }
  .homepage-features > :nth-child(2) {
    width: 33.3333333333%;
  }
  .homepage-features > :nth-child(3) {
    width: 33.3332333333%;
  }
  .homepage-features > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.homepage-features > * {
  margin-bottom: 1rem;
}

.homepage-features img {
  display: block;
  max-width: 40%;
  margin: 0 auto 1rem;
}

.u-section-separator {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.styleguide-footer {
  font-size: 0.8125rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgb(66, 69, 84);
  text-align: center;
  background: rgb(239, 240, 245);
}

.styleguide-footer a {
  margin: 0 1rem;
  color: inherit;
}

.gsc-control-cse.gsc-control-cse {
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 0;
}

.gsc-input-box.gsc-input-box {
  height: auto;
  border: 0;
}

.gsc-search-button.gsc-search-button {
  width: auto;
  height: 2rem;
  margin: 0;
}

.gsc-search-box .gsc-input {
  vertical-align: top;
}

.sidebar {
  z-index: 2;
  padding: 1rem;
  overflow: auto;
  background: rgb(255, 255, 255);
  border-right: 1px solid rgb(201, 203, 217);
}
@media only screen and (max-width: 639px) {
  .sidebar {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 640px) {
  .sidebar {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 100%;
  }
}

.sidebar__toggle-button {
  z-index: 10;
  display: none;
  width: 100%;
  padding: 0.5rem 1rem;
  margin: 0;
  text-align: left;
  background: rgb(143, 68, 138);
  border-top-width: 2px;
  border-radius: 0;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  -webkit-transition-property: color, background;
  -o-transition-property: color, background;
  transition-property: color, background;
}
.sidebar__toggle-button:hover, .sidebar__toggle-button:focus {
  text-decoration: none;
  background: rgb(117, 34, 125);
}

@media only screen and (min-width: 640px) {
  .sidebar__breadcrumb {
    display: none;
  }
}

@media only screen and (max-width: 639px) {
  .sidebar__nav {
    display: none;
  }
}

@media only screen and (max-width: 639px) {
  .is-sidebar-active {
    height: 100%;
    overflow: hidden;
  }
  .is-sidebar-active .sidebar {
    height: 100%;
    padding: 3rem 1rem 1rem;
  }
  .is-sidebar-active .sidebar__nav {
    display: block;
  }
  .is-sidebar-active .sidebar__toggle-button {
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  }
}

.sidebar-nav,
.sidebar-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav a {
  position: relative;
  display: block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: rgb(115, 116, 128);
  -webkit-transition: color 200ms ease;
  -o-transition: color 200ms ease;
  transition: color 200ms ease;
}
.sidebar-nav a::before {
  position: absolute;
  top: 0;
  left: -8px;
  z-index: 0;
  width: 0;
  height: 100%;
  background: rgb(255, 107, 0);
  content: "";
  -webkit-transition: width 200ms ease;
  -o-transition: width 200ms ease;
  transition: width 200ms ease;
}
.sidebar-nav a:hover, .sidebar-nav a:focus, .sidebar-nav a.is-active {
  color: rgb(38, 40, 56);
  text-decoration: none;
}
.sidebar-nav a:hover::before, .sidebar-nav a:focus::before, .sidebar-nav a.is-active::before {
  width: 0.2rem;
}

.sidebar-nav--level-0 > li > a {
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.75rem;
  color: rgb(38, 40, 56);
  text-transform: uppercase;
  border-left: 0.25rem solid rgb(38, 40, 56);
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.sidebar-nav--level-0 > li > a::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto 0;
  border: 0 solid rgb(38, 40, 56);
  content: "";
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.sidebar-nav--level-0 > li > a:hover {
  padding-left: 1.25rem;
}
.sidebar-nav--level-0 > li > a:hover::before {
  display: none;
}

.sidebar-nav--level-1 > li {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.sidebar-nav--level-1 > li:not(:last-child) {
  margin-bottom: 0.5rem;
}

.sidebar-nav--level-1 > li > a {
  font-weight: bold;
  color: rgb(38, 40, 56);
  text-transform: uppercase;
}

.sidebar-nav--level-2 ul {
  padding-left: 0.5rem;
}

.sidebar-nav--level-2 .sidebar-nav {
  display: none;
  border-left: 1px solid rgb(38, 40, 56);
}

.sidebar-nav__item {
  position: relative;
}

.sidebar-nav__item.is-open > .sidebar-nav {
  display: block;
}

.sidebar-nav__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 2rem;
  height: 2rem;
  padding: 0;
  line-height: 2rem;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.sidebar-nav__minus {
  display: none;
}

.sidebar-nav__item.is-open > .sidebar-nav__toggle .sidebar-nav__minus {
  display: inline-block;
}

.sidebar-nav__item.is-open > .sidebar-nav__toggle .sidebar-nav__plus {
  display: none;
}

.sidebar-nav--level-0 > .sidebar-nav__item > .sidebar-nav__toggle,
.sidebar-nav--level-1 > .sidebar-nav__item > .sidebar-nav__toggle {
  display: none;
}

.font-size-x-small {
  font-size: 0.625rem;
  line-height: 1rem;
}

.font-size-small {
  font-size: 0.8125rem;
  line-height: 1rem;
}

.font-size-medium {
  font-size: 1rem;
  line-height: 1.5rem;
}

.font-size-large {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.font-size-x-large {
  font-size: 1.625rem;
  line-height: 2rem;
}

.font-size-2x-large {
  font-size: 2.0625rem;
  line-height: 2.5rem;
}

.font-size-3x-large {
  font-size: 2.625rem;
  line-height: 3rem;
}

.font-size-4x-large {
  font-size: 3.3125rem;
  line-height: 3.5rem;
}

.font-size-5x-large {
  font-size: 4.25rem;
  line-height: 4.5rem;
}

.font-size-6x-large {
  font-size: 5.375rem;
  line-height: 5.5rem;
}

.hero:not(.hero--editorial) {
  background-color: rgb(66, 69, 84);
  background-image: url("img/hero/landscape-s.jpg");
}
@media only screen and (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .hero:not(.hero--editorial) {
    background-image: url("img/hero/portrait-s.jpg");
  }
}
@media only screen and (max-aspect-ratio: 1/1) and (min-width: 480px) {
  .hero:not(.hero--editorial) {
    background-image: url("img/hero/portrait-l.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 799px) {
  .hero:not(.hero--editorial) {
    background-image: url("img/hero/landscape-s.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 800px) {
  .hero:not(.hero--editorial) {
    background-image: url("img/hero/landscape-l.jpg");
  }
}

.hero--editorial .hero__background {
  background-color: rgb(66, 69, 84);
  background-image: url("img/hero/landscape-s.jpg");
}
@media only screen and (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .hero--editorial .hero__background {
    background-image: url("img/hero/portrait-s.jpg");
  }
}
@media only screen and (max-aspect-ratio: 1/1) and (min-width: 480px) {
  .hero--editorial .hero__background {
    background-image: url("img/hero/portrait-l.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 799px) {
  .hero--editorial .hero__background {
    background-image: url("img/hero/landscape-s.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 800px) {
  .hero--editorial .hero__background {
    background-image: url("img/hero/landscape-l.jpg");
  }
}
.hero--editorial .hero__content {
  background: #333d65;
}

.hero-sidekick .hero-sidekick__content {
  background: rgb(143, 68, 138);
}
.hero-sidekick::after {
  background: rgb(251, 243, 141);
}

.two-column-hero {
  background-color: rgb(66, 69, 84);
  background-image: url("img/two-column-hero/landscape-s.jpg");
}
@media only screen and (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .two-column-hero {
    background-image: url("img/two-column-hero/portrait-s.jpg");
  }
}
@media only screen and (max-aspect-ratio: 1/1) and (min-width: 480px) {
  .two-column-hero {
    background-image: url("img/two-column-hero/portrait-l.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 799px) {
  .two-column-hero {
    background-image: url("img/two-column-hero/landscape-s.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 800px) {
  .two-column-hero {
    background-image: url("img/two-column-hero/landscape-l.jpg");
  }
}

.case-study--docs {
  background-color: rgb(143, 68, 138);
  background-color: #faebd7;
}
.case-study--docs .case-study__image {
  background-image: url("img/case-study/de/borrower/s.jpg");
}
@media only screen and (min-width: 480px) {
  .case-study--docs .case-study__image {
    background-image: url("img/case-study/de/borrower/l.jpg");
  }
}
.case-study--docs .case-study__content {
  background: #3d5a99;
}

.small-case-study {
  background-color: rgb(143, 68, 138);
  background-color: #faebd7;
}
.small-case-study .case-study__image {
  background-image: url("img/case-study/de/about-us/s.jpg");
}
@media only screen and (min-width: 480px) {
  .small-case-study .case-study__image {
    background-image: url("img/case-study/de/about-us/l.jpg");
  }
}
.small-case-study .case-study__content {
  background: #3d5a99;
}

.component-variant__grid {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.no-flexbox .component-variant__grid:after {
  display: block;
  width: 100%;
  clear: both;
  content: "";
}
.no-flexbox .component-variant__grid > * {
  float: left;
}
.component-variant__grid > :nth-child(1) {
  width: 50%;
}
.no-flexbox .component-variant__grid > :nth-child(1) {
  clear: left;
}
.component-variant__grid > :nth-child(2) {
  width: 49.9999%;
}
.component-variant__grid > * {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.trust-block__media .placeholder-component::after {
  content: "Media -moz-element goes here";
  content: "Media element goes here";
}

.placeholder-component.placeholder-component--variation::after {
  content: "Random component goes here";
}

.step-card__content .placeholder-component {
  height: 25rem;
}

.step-card__collapse .placeholder-component {
  height: 5rem;
}

.step-card__inactive .placeholder-component {
  height: 2.5rem;
}

.copyable-code {
  position: relative;
  padding: 4rem 1.5rem 3rem;
  overflow: hidden;
}
.copyable-code [data-language] {
  display: block;
  height: auto;
  max-height: 18rem;
  overflow-y: auto;
}
.copyable-code:hover .copyable-code__actions {
  opacity: 1;
}

.copyable-code__actions {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
@media (hover: none) {
  .copyable-code__actions {
    opacity: 1;
  }
}

.code-actions__cta.cta-primary {
  background-color: rgb(252, 78, 30);
  border-color: rgb(252, 78, 30);
}

.breakpoint-examples {
  padding: 0;
  margin: 0;
  margin-bottom: 1rem;
  list-style: none;
}

.breakpoint-examples__item {
  font-size: 1rem;
  line-height: 1.5rem;
  display: table-row;
  font-weight: bold;
  text-align: right;
}

.breakpoint-examples__item::after {
  display: table-cell;
  padding-left: 1rem;
  font-family: monospace;
  font-weight: normal;
  text-align: left;
}

.breakpoint-examples__item--mobile-small::after {
  content: "320px";
}

.breakpoint-examples__item--mobile-medium::after {
  content: "480px";
}

.breakpoint-examples__item--mobile-large::after {
  content: "640px";
}

.breakpoint-examples__item--tablet-small::after {
  content: "768px";
}

.breakpoint-examples__item--tablet-medium::after {
  content: "800px";
}

.breakpoint-examples__item--tablet-large::after {
  content: "980px";
}

.breakpoint-examples__item--desktop-small::after {
  content: "1024px";
}

.breakpoint-examples__item--desktop-medium::after {
  content: "1200px";
}

.breakpoint-examples__item--desktop-large::after {
  content: "1400px";
}

.breakpoint-examples__item--desktop-x-large::after {
  content: "1920px";
}

.colors__sample--white {
  background: rgb(255, 255, 255);
}

.colors__sample--black {
  background: rgb(0, 0, 0);
}

.colors__sample--purple-contrast {
  background: rgb(117, 34, 125);
}

.colors__sample--purple-base {
  background: rgb(143, 68, 138);
}

.colors__sample--purple-light {
  background: rgb(169, 91, 166);
}

.colors__sample--purple-x-light {
  background: rgb(214, 166, 219);
}

.colors__sample--purple-2x-light {
  background: rgb(232, 201, 235);
}

.colors__sample--purple-3x-light {
  background: rgb(249, 241, 250);
}

.colors__sample--orange-contrast {
  background: rgb(252, 78, 30);
}

.colors__sample--orange-base {
  background: rgb(255, 107, 0);
}

.colors__sample--orange-light {
  background: rgb(254, 162, 116);
}

.colors__sample--orange-x-light {
  background: rgb(255, 210, 188);
}

.colors__sample--orange-2x-light {
  background: rgb(255, 242, 236);
}

.colors__sample--orange-3x-light {
  background: rgb(255, 250, 248);
}

.colors__sample--green-contrast {
  background: rgb(15, 136, 77);
}

.colors__sample--green-base {
  background: rgb(52, 181, 118);
}

.colors__sample--green-light {
  background: rgb(112, 216, 166);
}

.colors__sample--green-x-light {
  background: rgb(181, 237, 210);
}

.colors__sample--green-2x-light {
  background: rgb(234, 255, 245);
}

.colors__sample--green-3x-light {
  background: rgb(249, 255, 252);
}

.colors__sample--red-contrast {
  background: rgb(206, 16, 37);
}

.colors__sample--red-base {
  background: rgb(232, 32, 55);
}

.colors__sample--red-light {
  background: rgb(255, 133, 146);
}

.colors__sample--red-x-light {
  background: rgb(255, 194, 201);
}

.colors__sample--red-2x-light {
  background: rgb(255, 242, 244);
}

.colors__sample--red-3x-light {
  background: rgb(255, 250, 251);
}

.colors__sample--yellow-contrast {
  background: rgb(255, 205, 0);
}

.colors__sample--yellow-base {
  background: rgb(253, 225, 50);
}

.colors__sample--yellow-light {
  background: rgb(251, 243, 141);
}

.colors__sample--yellow-x-light {
  background: rgb(255, 251, 194);
}

.colors__sample--yellow-2x-light {
  background: rgb(255, 254, 240);
}

.colors__sample--yellow-3x-light {
  background: rgb(255, 255, 250);
}

.colors__sample--blue-contrast {
  background: rgb(2, 141, 208);
}

.colors__sample--blue-base {
  background: rgb(0, 155, 222);
}

.colors__sample--blue-light {
  background: rgb(111, 197, 238);
}

.colors__sample--blue-x-light {
  background: rgb(188, 229, 248);
}

.colors__sample--blue-2x-light {
  background: rgb(238, 249, 255);
}

.colors__sample--blue-3x-light {
  background: rgb(249, 253, 255);
}

.colors__sample--grey-contrast {
  background: rgb(38, 40, 56);
}

.colors__sample--grey-base {
  background: rgb(66, 69, 84);
}

.colors__sample--grey-light {
  background: rgb(115, 116, 128);
}

.colors__sample--grey-x-light {
  background: rgb(147, 150, 167);
}

.colors__sample--grey-2x-light {
  background: rgb(201, 203, 217);
}

.colors__sample--grey-3x-light {
  background: rgb(239, 240, 245);
}

.colors__sample--grey-4x-light {
  background: rgb(247, 248, 254);
}

@media only screen and (min-width: 980px) {
  .colors {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
}

.colors__item-title {
  text-transform: capitalize;
}

.colors__item {
  margin-bottom: 2rem;
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid;
}

.colors__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.colors__color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.colors__sample {
  width: 100%;
  height: 3rem;
  max-width: 3rem;
  margin-right: 1rem;
}

.columns-example {
  text-align: center;
  border: 1px solid rgb(0, 0, 0);
}

.columns-example > * {
  border: 1px solid rgb(143, 68, 138);
}

.columns-example__content {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.no-flexbox .columns-example__content:after {
  display: block;
  width: 100%;
  clear: both;
  content: "";
}
.no-flexbox .columns-example__content > * {
  float: left;
}
.columns-example__content > :nth-child(1) {
  width: 49.9992742446%;
}
.no-flexbox .columns-example__content > :nth-child(1) {
  clear: left;
}
.columns-example__content > :nth-child(2) {
  width: 30.9019000276%;
}
.columns-example__content > :nth-child(3) {
  width: 19.0987257278%;
}
.columns-example__content > :nth-child(1) {
  width: 72.3598395102%;
}
.no-flexbox .columns-example__content > :nth-child(1) {
  clear: left;
}
.columns-example__content > :nth-child(2) {
  width: 27.6400604898%;
}
.columns-example__content > :nth-child(1) {
  width: 44.7204814085%;
}
.no-flexbox .columns-example__content > :nth-child(1) {
  clear: left;
}
.columns-example__content > :nth-child(2) {
  width: 10.557738919%;
}
.columns-example__content > :nth-child(3) {
  width: 17.0824215709%;
}
.columns-example__content > :nth-child(4) {
  width: 27.6392581017%;
}
.columns-example__content > * {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.columns-example__item {
  border: 1px solid rgb(254, 162, 116);
}

.parent-container {
  width: 16rem;
  height: 20rem;
  text-align: center;
  background-color: rgb(255, 210, 188);
}
.parent-container::before {
  display: block;
  padding: 0.5rem 0;
  font-family: monospace;
  color: rgb(115, 116, 128);
  content: attr(class);
}

.form-element--documentation {
  position: relative;
  padding: 1.5rem 1rem;
  background-color: rgb(255, 210, 188);
  border: 1px dashed rgb(147, 150, 167);
}
.form-element--documentation::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 0.25rem 0.5rem;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(147, 150, 167);
  border-radius: 0.5rem;
  content: "Form -moz-element wrapper";
  content: "Form element wrapper";
  -webkit-transform: translateY(-50%) translateX(1rem);
      -ms-transform: translateY(-50%) translateX(1rem);
          transform: translateY(-50%) translateX(1rem);
}

.form-element--documentation > * {
  display: block;
  padding: 0.5rem;
  background-color: rgb(255, 255, 255);
  border: 1px dashed rgb(147, 150, 167);
  opacity: 0.7;
}
.form-element--documentation > *:not(:last-child) {
  margin-bottom: 1rem;
}

.content__component-example .full-page > :first-child {
  padding: 1.5rem;
  text-align: center;
  border: 1px dotted rgb(0, 0, 0);
  border-collapse: collapse;
}

.grid-example {
  height: 8rem;
  text-align: center;
  background-color: rgb(255, 210, 188);
}

.grid-example__column {
  vertical-align: middle;
  background-color: rgb(255, 255, 255);
  border: 1px dashed rgb(147, 150, 167);
  opacity: 0.7;
}
.grid-example__column::before {
  font-size: 1.625rem;
  line-height: 2rem;
  margin: auto;
  content: attr(data-unit);
}

.grid-example .grid-example__column {
  padding: 0;
}

.grid-example__column.grid-example__column--padded {
  padding: 1rem;
}

.grid-example--symmetric {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.grid-example--symmetric .grid-example__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  width: 8.33%;
}

.grid-example--symmetric [data-unit="4"] {
  width: 33.32%;
}

.grid-example--symmetric [data-unit="7"] {
  width: 58.33%;
}

.hero-sidekick--no-overlap {
  margin-top: 0 !important;
}

.icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
}

.icon__title-copy {
  font-size: 0.8125rem;
  line-height: 1rem;
}

.icons__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 7rem;
  padding: 1rem;
  margin: 0.5rem;
  background: rgb(239, 240, 245);
}

.icon--modifiers .icons__item {
  width: 9rem;
}

.icons__item > .svg-icon {
  margin: auto auto 0;
}

@media only screen and (min-width: 800px) {
  .foo__content {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .foo__content:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .foo__content > * {
    float: left;
  }
  .foo__content > :nth-child(1) {
    width: 30.9019000276%;
  }
  .no-flexbox .foo__content > :nth-child(1) {
    clear: left;
  }
  .foo__content > :nth-child(2) {
    width: 49.9992742446%;
  }
  .foo__content > :nth-child(3) {
    width: 19.0987257278%;
  }
  .foo__content > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.page-grid-examples {
  text-align: center;
  background-color: rgb(255, 210, 188);
}

.page-grid-examples > * {
  background-color: rgb(255, 255, 255);
  border: 1px dashed rgb(147, 150, 167);
  opacity: 0.7;
}

.placeholder-component {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 7rem;
  color: rgb(147, 150, 167);
  text-align: center;
  background-color: rgb(255, 255, 255);
  border: 2px dashed;
  opacity: 0.7;
}
.placeholder-component::after {
  text-transform: uppercase;
  content: "Content goes here";
}

.u-static {
  position: static !important;
}

.pull-column-examples {
  position: relative;
  text-align: center;
}
.pull-column-examples .pull-column {
  background-color: rgb(255, 210, 188);
}
.pull-column-examples .pull-column__content,
.pull-column-examples .pull-column__pulled {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgb(255, 242, 236);
}
.pull-column-examples .pull-column__pulled {
  background: rgb(254, 162, 116);
}
.pull-column-examples .pull-column__pulled .example-content,
.pull-column-examples .pull-column__content .example-content {
  width: 100%;
  padding: 1.5rem;
  border: 1px dotted rgb(0, 0, 0);
}
.pull-column-examples .u-page-grid {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  border-right: 1px dotted rgb(0, 0, 0);
  border-left: 1px dotted rgb(0, 0, 0);
}

.scroll-to {
  margin-top: 50vh;
  margin-bottom: 50vh;
}

.spacing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.spacing__item,
.spacing [class*=u-p] {
  margin: 1rem;
  text-align: center;
  background-color: rgb(255, 210, 188);
}

.spacing__item [class*=u-m] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgb(255, 255, 255);
  opacity: 0.7;
}

.spacing__item [class*=u-m],
.spacing [class*=u-p] {
  position: relative;
  width: 12rem;
  height: 12rem;
  border: 1px dashed rgb(147, 150, 167);
}

.spacing__item [class*=u-m]::before,
.spacing [class*=u-p]::before {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  content: "";
  opacity: 0.7;
}

.spacing__item [class*=u-m]::after,
.spacing [class*=u-p]::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  font-family: monospace, monospace;
  font-size: 1rem;
  color: rgb(115, 116, 128);
  text-align: center;
  content: "." attr(class);
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}

.vspace--6x-large, .vspace--5x-large, .vspace--4x-large, .vspace--3x-large, .vspace--2x-large, .vspace--x-large, .vspace--large, .vspace--medium, .vspace--small, .vspace--x-small {
  width: 1em;
  border: 1px dashed rgb(52, 181, 118);
}

.vspace--x-small {
  height: 1rem;
}
.vspace--x-small::after {
  font-size: 0.625rem;
  display: block;
  content: "1rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--small {
  height: 1.5rem;
}
.vspace--small::after {
  font-size: 0.625rem;
  display: block;
  content: "1.5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--medium {
  height: 2rem;
}
.vspace--medium::after {
  font-size: 0.625rem;
  display: block;
  content: "2rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--large {
  height: 2.5rem;
}
.vspace--large::after {
  font-size: 0.625rem;
  display: block;
  content: "2.5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--x-large {
  height: 3.5rem;
}
.vspace--x-large::after {
  font-size: 0.625rem;
  display: block;
  content: "3.5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--2x-large {
  height: 5rem;
}
.vspace--2x-large::after {
  font-size: 0.625rem;
  display: block;
  content: "5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--3x-large {
  height: 7.5rem;
}
.vspace--3x-large::after {
  font-size: 0.625rem;
  display: block;
  content: "7.5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--4x-large {
  height: 7.5rem;
}
.vspace--4x-large::after {
  font-size: 0.625rem;
  display: block;
  content: "7.5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--5x-large {
  height: 7.5rem;
}
.vspace--5x-large::after {
  font-size: 0.625rem;
  display: block;
  content: "7.5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace--6x-large {
  height: 7.5rem;
}
.vspace--6x-large::after {
  font-size: 0.625rem;
  display: block;
  content: "7.5rem";
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace-example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.vspace-example__code {
  margin-top: 1rem;
  white-space: nowrap;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.vspace-example__item {
  width: 1rem;
  margin-right: 1rem;
}

/**
 * section: M2DM/pages
 * title: Demo pages
 *
 * description:
 *   Examples of components interacting with each other
 */
/**
 * section: M2DM/pages/homepage
 * title: Homepage
 *
 * description: Homepage
 *
 * layout: pages/homepage/index
 * fullPage: true
 */
.case-study_homepage-uk {
  background-color: rgb(143, 68, 138);
  background-color: rgb(247, 248, 254);
}
.case-study_homepage-uk .case-study__image {
  background-image: url("img/case-study/s.jpg");
}
@media only screen and (min-width: 480px) {
  .case-study_homepage-uk .case-study__image {
    background-image: url("img/case-study/l.jpg");
  }
}
.case-study_homepage-uk .case-study__content {
  background: #3d5a99;
}

.case-study_homepage-uk-2 {
  background-color: rgb(143, 68, 138);
  background-color: #fff2ec;
}
.case-study_homepage-uk-2 .case-study__image {
  background-image: url("img/case-study/s.jpg");
}
@media only screen and (min-width: 480px) {
  .case-study_homepage-uk-2 .case-study__image {
    background-image: url("img/case-study/l.jpg");
  }
}
.case-study_homepage-uk-2 .case-study__content {
  background: rgb(247, 248, 254);
}

.two-column-hero-wave {
  background-color: rgb(66, 69, 84);
  background-image: url("img/two-column-hero/landscape-s.jpg");
}
@media only screen and (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .two-column-hero-wave {
    background-image: url("img/two-column-hero/portrait-s.jpg");
  }
}
@media only screen and (max-aspect-ratio: 1/1) and (min-width: 480px) {
  .two-column-hero-wave {
    background-image: url("img/two-column-hero/portrait-l.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 799px) {
  .two-column-hero-wave {
    background-image: url("img/two-column-hero/landscape-s.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 800px) {
  .two-column-hero-wave {
    background-image: url("img/two-column-hero/landscape-l.jpg");
  }
}

/**
 * section: M2DM/pages/integration
 * title: Integration page
 *
 * description: Integration page
 *
 * layout: pages/integration/index
 *
 * fullPage: true
 * youtubeApi: true
 */
.hero {
  background-color: rgb(66, 69, 84);
  background-image: url("img/hero/landscape-s.jpg");
}
@media only screen and (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .hero {
    background-image: url("img/hero/portrait-s.jpg");
  }
}
@media only screen and (max-aspect-ratio: 1/1) and (min-width: 480px) {
  .hero {
    background-image: url("img/hero/portrait-l.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-width: 799px) {
  .hero {
    background-image: url("img/hero/landscape-s.jpg");
  }
}
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 800px) {
  .hero {
    background-image: url("img/hero/landscape-l.jpg");
  }
}

.case-study-1 {
  background-color: rgb(143, 68, 138);
  background-color: rgb(255, 255, 255);
}
.case-study-1 .case-study__image {
  background-image: url("img/case-study/s.jpg");
}
@media only screen and (min-width: 480px) {
  .case-study-1 .case-study__image {
    background-image: url("img/case-study/l.jpg");
  }
}
.case-study-1 .case-study__content {
  background: #3d5a99;
}

.case-study-2 {
  background-color: rgb(143, 68, 138);
  background-color: #f7f8fe;
}
.case-study-2 .case-study__image {
  background-image: url("img/case-study/s.jpg");
}
@media only screen and (min-width: 480px) {
  .case-study-2 .case-study__image {
    background-image: url("img/case-study/l.jpg");
  }
}
.case-study-2 .case-study__content {
  background: green;
}

@media only screen and (min-width: 640px) {
  .u-2-cols {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .u-2-cols:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .u-2-cols > * {
    float: left;
  }
  .u-2-cols > :nth-child(1) {
    width: 50%;
  }
  .no-flexbox .u-2-cols > :nth-child(1) {
    clear: left;
  }
  .u-2-cols > :nth-child(2) {
    width: 49.9999%;
  }
}

/**
 * section: M2DM/pages/case-study
 * title: Case Study
 *
 * description: Case Study
 *
 * layout: pages/case-study/index
 * fullPage: true
 */
.case-study--full-image {
  background-color: rgb(143, 68, 138);
  background-color: #faebd7;
}
.case-study--full-image .case-study__image {
  background-image: url("./img/case-study/de/borrower/s.jpg");
}
@media only screen and (min-width: 480px) {
  .case-study--full-image .case-study__image {
    background-image: url("./img/case-study/de/borrower/l.jpg");
  }
}
.case-study--full-image .case-study__content {
  background: #3d5a99;
}

.small-case-study {
  background-color: rgb(143, 68, 138);
  background-color: #faebd7;
}
.small-case-study .case-study__image {
  background-image: url("img/case-study/de/about-us/s.jpg");
}
@media only screen and (min-width: 480px) {
  .small-case-study .case-study__image {
    background-image: url("img/case-study/de/about-us/l.jpg");
  }
}
.small-case-study .case-study__content {
  background: #3d5a99;
}

.case-study--full-no-image {
  background-color: rgb(143, 68, 138);
  background-color: #faebd7;
}
.case-study--full-no-image .case-study__content {
  background: #3d5a99;
}

.table-container {
  position: relative;
}
.table-container::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: -webkit-gradient(linear, right top, left top, from(rgba(201, 203, 217, 0.4)), color-stop(1.5rem, transparent));
  background: -o-linear-gradient(right, rgba(201, 203, 217, 0.4), transparent 1.5rem);
  background: linear-gradient(to left, rgba(201, 203, 217, 0.4), transparent 1.5rem);
  content: "";
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.table-container.v-shadow::after {
  opacity: 1;
  visibility: visible;
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.data-table__body .data-table__row {
  border-bottom: 1px solid rgb(239, 240, 245);
}

.data-table--hoverable .data-table__body .data-table__row:hover {
  background-color: rgba(247, 248, 254, 0.5);
}

.data-table__cell,
.data-table__header {
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1.5rem;
  font-weight: normal;
  color: rgb(0, 0, 0);
}

.data-table__header {
  background-color: rgb(247, 248, 254);
}
.data-table__header:first-child {
  border-radius: 8px 0 0 8px;
}
.data-table__header:last-child {
  border-radius: 0 8px 8px 0;
}
.data-table__header:not(:last-child) {
  border-right: 1px solid rgb(239, 240, 245);
}

.data-table__cell--bold {
  font-weight: bold;
}

.data-table__cell-content {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.data-table__cell-content .svg-icon {
  margin-right: 1rem;
}

.accordion-item {
  position: relative;
  border-bottom: 1px solid rgb(201, 203, 217);
}
.accordion-item:first-child {
  border-top: 1px solid rgb(201, 203, 217);
}

.accordion-item__title {
  font-size: 1.25rem;
  line-height: 1.5rem;
  width: 100%;
  padding: 1.5rem 1.5rem 1.5rem 0;
  margin: 0;
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
  color: rgb(66, 69, 84);
  text-align: left;
  cursor: pointer;
  background-color: transparent;
  border: 0;
}

.accordion-item__icon {
  position: absolute;
  top: 1.5rem;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: rgb(2, 141, 208);
  pointer-events: none;
  border: 1px solid rgb(2, 141, 208);
  border-radius: 50%;
}
.accordion-item__icon::before, .accordion-item__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgb(2, 141, 208);
  border-radius: 1px;
  content: "";
}
.accordion-item__icon::before {
  width: 0.625rem;
  height: 0.125rem;
  margin-top: calc(0.125rem / -2);
  margin-left: calc(0.625rem / -2);
}
.accordion-item__icon::after {
  width: 0.125rem;
  height: 0.625rem;
  margin-top: calc(0.625rem / -2);
  margin-left: calc(0.125rem / -2);
}

.accordion-item.is-active .accordion-item__icon::after {
  height: 0;
  margin-top: 0;
}

.accordion-item__content {
  font-size: 1rem;
  line-height: 1.5rem;
  display: none;
  margin-bottom: 1.5rem;
}

.accordion-item.is-active .accordion-item__title {
  margin-bottom: 0.5rem;
}

.accordion-item.is-active .accordion-item__content {
  display: block;
}

.breadcrumb__list {
  font-size: 0.8125rem;
  line-height: 1rem;
  display: table;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin: 0;
  color: rgb(115, 116, 128);
  list-style-type: none;
}
@media only screen and (max-width: 479px) {
  .breadcrumb__list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.breadcrumb__list-item {
  display: table-cell;
}

.breadcrumb__list-item--current {
  font-weight: bold;
}

.breadcrumb__list-item:not(:last-child)::after {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 0.8ex;
  height: 0.8ex;
  margin: 0 0.5rem;
  vertical-align: middle;
  border-right: 1px solid rgb(147, 150, 167);
  border-bottom: 1px solid rgb(147, 150, 167);
  content: "";
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.breadcrumb__list-link {
  color: inherit;
  cursor: pointer;
}

@media only screen and (max-width: 639px) {
  .calculator__donut {
    display: none;
  }
}

.donut__number {
  font-size: 1.625rem;
  line-height: 2rem;
  text-anchor: middle;
  font-family: "amasis", georgia, serif;
  font-weight: bold;
}

.donut__label {
  text-anchor: middle;
  font-weight: bold;
  color: rgb(66, 69, 84);
}

.is-error .calculator__numeric-input {
  outline: rgb(232, 32, 55);
  -webkit-box-shadow: 0 0 0 1px rgb(232, 32, 55);
          box-shadow: 0 0 0 1px rgb(232, 32, 55);
}

.loan-amount-input {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
}

.calculator__range-container {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
}

.calculator__numeric-input {
  font-size: 1.625rem;
  line-height: 2rem;
  height: 3.125rem;
  max-width: 11.5rem;
  padding: 0 0.5rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  font-family: "Amasis", Georgia, serif;
  color: rgb(0, 155, 222);
  border: 1px solid rgb(201, 203, 217);
}
@media only screen and (min-width: 800px) {
  .calculator__numeric-input {
    font-size: 2.0625rem;
    line-height: 2.5rem;
    margin-bottom: 0;
  }
}

.calculator__input-warning {
  display: none;
}
@media only screen and (min-width: 640px) and (max-width: 799px) {
  .calculator__input-warning {
    margin-bottom: 1rem;
  }
}
.calculator__input-warning.is-error {
  display: block;
}

.calculator__result-list {
  padding: 0 1rem;
  list-style-type: none;
}

.calculator__result {
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  line-height: 1.1875rem;
}
@media only screen and (min-width: 640px) {
  .calculator__result {
    margin-bottom: 1.5rem;
  }
}

.calculator__result-dots::before {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  content: "";
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}
@media only screen and (max-width: 767px) {
  .calculator__result-dots::before {
    display: none;
  }
}

.calculator__result-loan .calculator__result-dots::before {
  background: rgb(52, 181, 118);
}

.calculator__result-origination .calculator__result-dots::before {
  background: rgb(112, 216, 166);
}

.calculator__result-interest .calculator__result-dots::before {
  background: rgb(181, 237, 210);
}

.calculator__result-dots {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .calculator__result-dots {
    margin-right: 0.5rem;
  }
}

@media only screen and (min-width: 640px) {
  .calculator .calculator__button--mobile {
    display: none;
  }
}

.calculator__monthly-payments-amount {
  font-size: 2.0625rem;
  line-height: 2.5rem;
  text-anchor: middle;
  font-family: "Amasis", Georgia, serif;
  font-weight: bold;
}
@media only screen and (min-width: 640px) {
  .calculator__monthly-payments-amount {
    display: none;
  }
}

.calculator__monthly-paymentsi-label {
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: "Roboto", Arial, sans-serif;
}

.calculator__show-hide-label {
  color: rgb(147, 150, 167);
  cursor: pointer;
}
@media only screen and (min-width: 640px) {
  .calculator__show-hide-label {
    display: none;
  }
}

.calculator .calculator__button--desktop {
  width: 100%;
}
@media only screen and (max-width: 639px) {
  .calculator .calculator__button--desktop {
    display: none;
  }
}

.calculator__range-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
  height: 3.125rem;
  padding-bottom: 0;
}

.calculator__range-input {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.calculator__range-input:focus {
  outline: none;
}

.calculator__range-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.625rem;
  cursor: pointer;
  background: rgb(111, 197, 238);
  border-radius: 2.6px;
}

.calculator__range-input::-webkit-slider-thumb {
  width: 1.625rem;
  height: 1.625rem;
  margin-top: -0.5rem;
  cursor: pointer;
  background: rgb(2, 141, 208);
  border-radius: 50%;
  -webkit-appearance: none;
          appearance: none;
}

.calculator__range-input::-moz-range-track {
  width: 100%;
  height: 0.625rem;
  cursor: pointer;
  background: rgb(111, 197, 238);
  border-radius: 2.6px;
}

.calculator__range-input::-moz-range-thumb {
  width: 1.625rem;
  height: 1.625rem;
  margin-top: -0.5rem;
  cursor: pointer;
  background: rgb(2, 141, 208);
  border-radius: 50%;
  -moz-appearance: none;
       appearance: none;
}

.calculator__range-input::-ms-track {
  width: 100%;
  height: 0.625rem;
  color: transparent;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-radius: 2.6px;
}

.calculator__range-input::-ms-fill-lower {
  background: rgb(111, 197, 238);
  border-radius: 5.2px;
}

.calculator__range-input::-ms-fill-upper {
  background: rgb(111, 197, 238);
  border-radius: 5.2px;
}

.calculator__range-input::-ms-thumb {
  width: 1.625rem;
  height: 1.625rem;
  margin-top: -0.5rem;
  cursor: pointer;
  background: rgb(2, 141, 208);
  border-radius: 50%;
  appearance: none;
}

.calculator__range-input:focus::-ms-fill-lower {
  background: rgb(111, 197, 238);
}

.calculator__range-input:focus::-ms-fill-upper {
  background: rgb(111, 197, 238);
}

.calculator__slider-labels {
  font-size: 0.8125rem;
  line-height: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-family: "Roboto", Arial, sans-serif;
  color: rgb(115, 116, 128);
}

.calculator__terms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media only screen and (min-width: 980px) {
  .calculator__terms {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

.calculator__term--1 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
}
@media only screen and (min-width: 980px) {
  .calculator__term--1 {
    -ms-grid-column: 1;
  }
}

.calculator__term--2 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
}
@media only screen and (min-width: 980px) {
  .calculator__term--2 {
    -ms-grid-column: 2;
  }
}

.calculator__term--3 {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
}
@media only screen and (min-width: 980px) {
  .calculator__term--3 {
    -ms-grid-column: 3;
  }
}

.calculator__term--4 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  -ms-grid-row: 2;
}
@media only screen and (min-width: 980px) {
  .calculator__term--4 {
    -ms-grid-column: 4;
  }
}

.calculator__term--5 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-row: 2;
}
@media only screen and (min-width: 980px) {
  .calculator__term--5 {
    -ms-grid-column: 5;
  }
}

.calculator__term--6 {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  -ms-grid-row: 2;
}
@media only screen and (min-width: 980px) {
  .calculator__term--6 {
    -ms-grid-column: 6;
  }
}

.calculator__term--7 {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  -ms-grid-row: 3;
}
@media only screen and (min-width: 980px) {
  .calculator__term--7 {
    -ms-grid-column: 7;
  }
}

.calculator__term--8 {
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  -ms-grid-row: 3;
}
@media only screen and (min-width: 980px) {
  .calculator__term--8 {
    -ms-grid-column: 8;
  }
}

.calculator__term--9 {
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  -ms-grid-row: 3;
}
@media only screen and (min-width: 980px) {
  .calculator__term--9 {
    -ms-grid-column: 9;
  }
}

.calculator__term {
  margin: 0.5rem 0.5rem 0.5rem 0;
}
.calculator__term:first-of-type, .calculator__term:nth-child(4) {
  margin-left: 0;
}
.calculator__term:last-of-type, .calculator__term:nth-child(3) {
  margin-right: 0;
}
@media only screen and (min-width: 980px) {
  .calculator__term {
    margin: 0.5rem 0.5rem 0.5rem 0;
  }
  .calculator__term:first-of-type {
    margin-left: 0;
  }
  .calculator__term:nth-child(3) {
    margin-right: 0.5rem;
  }
  .calculator__term:nth-child(4) {
    margin-left: 0.5rem;
  }
  .calculator__term:last-of-type {
    margin-right: 0;
  }
}

.is-hidden-on-mobile {
  display: none;
}
@media only screen and (min-width: 640px) {
  .is-hidden-on-mobile {
    display: block;
  }
}

.calculator {
  display: grid;
  font-family: "Roboto", Arial, sans-serif;
}
@media only screen and (min-width: 640px) {
  .calculator {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .calculator:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .calculator > * {
    float: left;
  }
  .calculator > :nth-child(1) {
    width: 50%;
  }
  .no-flexbox .calculator > :nth-child(1) {
    clear: left;
  }
  .calculator > :nth-child(2) {
    width: 49.9999%;
  }
  .calculator > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .calculator {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .calculator:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .calculator > * {
    float: left;
  }
  .calculator > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .calculator > :nth-child(1) {
    clear: left;
  }
  .calculator > :nth-child(2) {
    width: 38.1969970206%;
  }
  .calculator > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.calculator__loan-amount-label {
  font-size: 1rem;
  line-height: 1.5rem;
}

.calculator__loan-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 640px) {
  .calculator__loan-options {
    padding-right: 3rem;
    margin-bottom: 0;
    border-right: 1px solid rgb(147, 150, 167);
  }
}

.calculator__outputs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 3rem;
  text-align: center;
}
@media only screen and (max-width: 639px) {
  .calculator__outputs {
    grid-row: -1;
    padding: 2rem 0 0;
    margin-bottom: 1rem;
    background-color: rgb(247, 248, 254);
  }
}

.calculator__blurb {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: auto;
  color: rgb(115, 116, 128);
}

@media only screen and (min-width: 768px) {
  .card__grid-1-1 {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .no-flexbox .card__grid-1-1:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .card__grid-1-1 > * {
    float: left;
  }
  .card__grid-1-1 > :nth-child(1) {
    width: 50%;
  }
  .no-flexbox .card__grid-1-1 > :nth-child(1) {
    clear: left;
  }
  .card__grid-1-1 > :nth-child(2) {
    width: 49.9999%;
  }
}

.card__grid-1-1 > * {
  padding: 1.5rem;
}
@media only screen and (max-width: 767px) {
  .card__grid-1-1 > *:not(:first-child) {
    padding-top: 0;
  }
}

@media only screen and (min-width: 800px) {
  .card__grid-2-1 {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .no-flexbox .card__grid-2-1:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .card__grid-2-1 > * {
    float: left;
  }
  .card__grid-2-1 > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .card__grid-2-1 > :nth-child(1) {
    clear: left;
  }
  .card__grid-2-1 > :nth-child(2) {
    width: 38.1969970206%;
  }
}

.card__grid-2-1 > * {
  padding: 1.5rem;
}
@media only screen and (max-width: 799px) {
  .card__grid-2-1 > *:not(:first-child) {
    padding-top: 0;
  }
}

@media only screen and (min-width: 800px) {
  .card__grid-1-3 {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .no-flexbox .card__grid-1-3:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .card__grid-1-3 > * {
    float: left;
  }
  .card__grid-1-3 > :nth-child(1) {
    width: 27.6401604898%;
  }
  .no-flexbox .card__grid-1-3 > :nth-child(1) {
    clear: left;
  }
  .card__grid-1-3 > :nth-child(2) {
    width: 72.3597395102%;
  }
}

.card__grid-1-3 > * {
  padding: 1.5rem;
}
@media only screen and (max-width: 799px) {
  .card__grid-1-3 > *:not(:first-child) {
    padding-top: 0;
  }
}

.card.card--emphasis {
  background: rgb(249, 253, 255);
}

.card.card--emphasis,
.card.card--emphasis .card__header,
.card.card--emphasis .card__action {
  border-color: rgb(0, 155, 222);
}

.card.card--success {
  background: rgb(249, 255, 252);
}

.card.card--success,
.card.card--success .card__header,
.card.card--success .card__action {
  border-color: rgb(52, 181, 118);
}

.card {
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px 0 rgb(201, 203, 217);
          box-shadow: 0 1px 1px 0 rgb(201, 203, 217);
}

.card > * {
  border: 1px solid rgb(201, 203, 217);
  border-radius: 0.25rem;
}
.card > *:not(:first-child) {
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.card > *:not(:last-child) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card__item--actionable {
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transition-property: background-color, border-color;
  -o-transition-property: background-color, border-color;
  transition-property: background-color, border-color;
}
.card__item--actionable:hover {
  background-color: rgb(249, 253, 255);
  border-color: rgb(0, 155, 222);
}

.card__header,
.card__content,
.card__action {
  padding: 1rem;
}

.card__header {
  font-weight: bold;
}

.card--flexible .card__header {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.card--flexible .card__content,
.card--flexible .card__action {
  padding: 1.5rem;
}

@media only screen and (min-width: 800px) {
  .card__grid-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.card-ticker {
  overflow: hidden;
}

.card-ticker__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .card-ticker__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

@media only screen and (min-width: 640px) {
  .card-ticker .card-ticker__label {
    margin-left: 16.0364321259%;
  }
}

.card-ticker__carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 1rem 0;
  margin: 0;
  -webkit-animation: cardTickerItemShift 4.5s cubic-bezier(0.45, 2, 0.56, 0.52) infinite;
          animation: cardTickerItemShift 4.5s cubic-bezier(0.45, 2, 0.56, 0.52) infinite;
}

.card-ticker__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 13rem;
          flex: 0 0 13rem;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(201, 203, 217);
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px 0 rgb(201, 203, 217);
          box-shadow: 0 1px 1px 0 rgb(201, 203, 217);
}

.card-ticker__item-content {
  margin: 1rem;
}

.no-flexbox .card-ticker {
  display: none;
}

@-webkit-keyframes cardTickerItemShift {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 100% {
    -webkit-transform: translateX(-14.5rem);
            transform: translateX(-14.5rem);
  }
}

@keyframes cardTickerItemShift {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 100% {
    -webkit-transform: translateX(-14.5rem);
            transform: translateX(-14.5rem);
  }
}
.case-study {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.case-study .case-study__image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  background-position: center 15%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
}

.case-study__inner {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.case-study__content {
  position: relative;
  padding-top: 2rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
}

/*
 * --large
 */
@media only screen and (min-width: 480px) {
  .case-study--large {
    min-height: 70vh;
  }
}
@media only screen and (max-width: 479px) {
  .case-study--large {
    padding: 0;
  }
}

@media only screen and (min-width: 480px) and (max-width: 1919px) {
  .case-study--large .case-study__inner {
    width: 89.970920877%;
    margin-left: 5.0145395615%;
    margin-right: 5.0144395615%;
  }
}
@media only screen and (min-width: 1920px) {
  .case-study--large .case-study__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

/*
 * .--small
 */
.case-study--small {
  min-height: 27.34375vw;
}
@media only screen and (max-width: 799px) {
  .case-study--small {
    padding: 0;
  }
}

@media only screen and (min-width: 800px) and (max-width: 1919px) {
  .case-study--small .case-study__inner {
    width: 89.970920877%;
    margin-left: 5.0145395615%;
    margin-right: 5.0144395615%;
  }
}
@media only screen and (min-width: 1920px) {
  .case-study--small .case-study__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

.case-study--small .case-study__content {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/*
 * --middle
 */
.case-study--middle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/*
 * --middle.--large
 */
@media only screen and (max-width: 479px) {
  .case-study--middle.case-study--large .case-study__image {
    height: 12.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .case-study--middle.case-study--large .case-study__content {
    width: 100%;
    margin-top: 10rem;
  }
}

/*
 * --middle.--small
 */
@media only screen and (max-width: 799px) {
  .case-study--middle.case-study--small .case-study__image {
    height: 12.5rem;
  }
}

@media only screen and (max-width: 799px) {
  .case-study--middle.case-study--small .case-study__content {
    width: 100%;
    margin-top: 10rem;
    margin-left: 0;
  }
}

/*
 * --left
 */
@media only screen and (min-width: 480px) {
  .case-study--left .case-study__content {
    width: 50%;
    margin-right: 49.9999%;
  }
}
@media only screen and (min-width: 800px) {
  .case-study--left .case-study__content {
    width: 38.1970970206%;
    margin-right: 61.8028029794%;
  }
}

/*
 * --right
 */
@media only screen and (min-width: 480px) {
  .case-study--right .case-study__content {
    width: 50%;
    margin-left: 49.9999%;
  }
}
@media only screen and (min-width: 800px) {
  .case-study--right .case-study__content {
    width: 38.1970970206%;
    margin-left: 61.8028029794%;
  }
}

/*
 * --bottom
 */
.case-study--bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

/*
 * --bottom.--left
 */
@media only screen and (max-width: 479px) {
  .case-study--bottom.case-study--left .case-study__content {
    width: 87.2668659769%;
    margin-right: 12.7330340231%;
  }
}

/*
 * --bottom.--right
 */
@media only screen and (max-width: 479px) {
  .case-study--bottom.case-study--right .case-study__content {
    width: 87.2668659769%;
    margin-left: 12.7330340231%;
  }
}

/*
 * --bottom.--large
 */
@media only screen and (max-width: 479px) {
  .case-study--bottom.case-study--large .case-study__image {
    height: 17.5rem;
  }
}
@media only screen and (min-width: 480px) {
  .case-study--bottom.case-study--large .case-study__image {
    height: calc(100% - 2.5rem);
  }
}

@media only screen and (min-width: 480px) {
  .case-study--bottom.case-study--large .case-study__content {
    bottom: -2rem;
  }
}
@media only screen and (max-width: 479px) {
  .case-study--bottom.case-study--large .case-study__content {
    min-height: 7.5rem;
    margin-top: 10rem;
  }
}

/*
 * --bottom.--small
 */
@media only screen and (max-width: 799px) {
  .case-study--small.case-study--bottom .case-study__image {
    height: 14rem;
  }
}
@media only screen and (min-width: 800px) {
  .case-study--small.case-study--bottom .case-study__image {
    height: calc(100% - 1.5rem);
  }
}

@media only screen and (min-width: 800px) {
  .case-study--small.case-study--bottom .case-study__content {
    bottom: -2rem;
  }
}
@media only screen and (max-width: 799px) {
  .case-study--small.case-study--bottom .case-study__content {
    min-height: 1.5rem;
    margin-top: 12.5rem;
  }
}

/*
 * .--small.--left
 */
@media only screen and (min-width: 800px) {
  .case-study--small.case-study--left .case-study__content {
    width: 61.8029029794%;
    margin-right: 38.1969970206%;
  }
}

/*
 * .--small.--right
 */
@media only screen and (min-width: 800px) {
  .case-study--small.case-study--right .case-study__content {
    width: 61.8029029794%;
    margin-left: 38.1969970206%;
  }
}

/*
 * .--small.--bottom.--left
 */
@media only screen and (max-width: 799px) {
  .case-study--small.case-study--bottom.case-study--left .case-study__content {
    width: 87.2668659769%;
    margin-right: 12.7330340231%;
  }
}

/*
 * .--small.--bottom.--right
 */
@media only screen and (max-width: 799px) {
  .case-study--small.case-study--bottom.case-study--right .case-study__content {
    width: 87.2668659769%;
    margin-left: 12.7330340231%;
  }
}

.confetti-banner {
  padding: 2.5rem 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 0)), to(rgb(255, 255, 255))), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU1NSIgaGVpZ2h0PSI1NDIiIHZpZXdCb3g9IjAgMCAxNTU1IDU0MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjQjVFREQyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMjc5LjIwNCAxMDMuOTAzbC4wMDItLjAxOGguMDAzYTEuMzcgMS4zNyAwIDAxMS41MzUtMS4xNTZsLjI3Mi4wNThjMTEuMDMxIDIuMjMyIDE4Ljc5IDEyLjMgMTguMTA4IDIzLjU1MmwtLjAwMi4wMTNjMCAuMDMtLjAwNi4wNDQtLjAxLjA3NGExLjM3NSAxLjM3NSAwIDAxLTEuNTQgMS4xOTZjLS4wMjEtLjAwMy0uMDQtLjAxLS4wNTktLjAxNGwtMTkuNTYtMi41di0uMDAyaC0uMDAzYTEuMzg0IDEuMzg0IDAgMDEtMS4xOTktMS41MzhoLS4wMDNsMi40NTItMTkuNjM0YzAtLjAwNi0uMDAyLS4wMS0uMDAxLS4wMTYgMC0uMDA2LjAwNC0uMDEuMDA1LS4wMTVNNDEzLjg2MyA0OTguN2wuMDA0LS4wMTguMDAzLjAwMWMuMi0uNzE5LjkzNy0xLjE0IDEuNjY0LS45NTJsLjI2Mi4wOTJjMTAuNjUzIDMuNjA4IDE3LjA5MiAxNC41NzQgMTUuMDIxIDI1LjY0NGwtLjAwMy4wMTJjLS4wMDQuMDMtLjAxLjA0NC0uMDE4LjA3M2ExLjM3IDEuMzcgMCAwMS0xLjY3NS45OWMtLjAyLS4wMDUtLjAzOC0uMDE1LS4wNTYtLjAybC0xOS4wNy00Ljk1NC4wMDEtLjAwM2gtLjAwM2ExLjM4NyAxLjM4NyAwIDAxLS45OTctMS42NzZoLS4wMDNsNC44NjItMTkuMTU5di0uMDE2bC4wMDgtLjAxNE04MzkuODcyIDQ3NS4xNWwuMDA2LS4wMTdoLjAwM2ExLjM1OSAxLjM1OSAwIDAxMS43NjctLjczM2wuMjQ4LjEyNGMxMC4xMDUgNC45MjQgMTUuMTIzIDE2LjYxMyAxMS42OTcgMjcuMzNsLS4wMDUuMDEzYy0uMDA4LjAyOS0uMDE2LjA0Mi0uMDI3LjA3YTEuMzY1IDEuMzY1IDAgMDEtMS43ODIuNzdjLS4wMi0uMDA3LS4wMzYtLjAyLS4wNTQtLjAyN2wtMTguMjc1LTcuMzIxdi0uMDAybC0uMDAzLS4wMDFhMS4zOSAxLjM5IDAgMDEtLjc4LTEuNzg5aC0uMDAybDcuMTk1LTE4LjM4OGMuMDAyLS4wMDUuMDAxLS4wMTEuMDAzLS4wMTYuMDAyLS4wMDUuMDA3LS4wMDguMDA5LS4wMTNNOTE2Ljg0OSAyNDEuMDMzbC4wMDgtLjAxNS4wMDMuMDAxYTEuMzU1IDEuMzU1IDAgMDExLjg0Mi0uNTA2bC4yMy4xNTVjOS40IDYuMTU4IDEyLjkxNiAxOC4zODYgOC4xODcgMjguNTg3bC0uMDA2LjAxMWMtLjAxMi4wMjgtLjAyMS4wNC0uMDM2LjA2NmExLjM2IDEuMzYgMCAwMS0xLjg2MS41NGMtLjAyLS4wMS0uMDMzLS4wMjQtLjA1LS4wMzRsLTE3LjE5Ny05LjU2NS4wMDItLjAwM2gtLjAwM2ExLjM5MiAxLjM5MiAwIDAxLS41NS0xLjg3M2wtLjAwMy0uMDAyIDkuNDE5LTE3LjMzNGMuMDAyLS4wMDUuMDAyLS4wMS4wMDUtLjAxNS4wMDItLjAwNS4wMDctLjAwOC4wMS0uMDEzTTQ0MS42MDMgNjguODdsLjAxLS4wMTUuMDAzLjAwMWExLjM1MiAxLjM1MiAwIDAxMS44ODktLjI3bC4yMS4xODJjOC41NDcgNy4yOTIgMTAuNTA2IDE5Ljg2NiA0LjU0NiAyOS4zOTJsLS4wMDguMDFjLS4wMTUuMDI2LS4wMjYuMDM3LS4wNDMuMDYxYTEuMzU4IDEuMzU4IDAgMDEtMS45MTMuMzAyYy0uMDE3LS4wMTMtLjAzLS4wMjgtLjA0NS0uMDRMNDMwLjQwMSA4Ni44NGwuMDAxLS4wMDJoLS4wMDNhMS4zOTMgMS4zOTMgMCAwMS0uMzEtMS45MjhsLS4wMDMtLjAwMiAxMS40OTktMTYuMDEzYy4wMDMtLjAwNS4wMDMtLjAxLjAwNy0uMDE1bC4wMTEtLjAxTTE1NDYuNTY5IDQ2OS4wNDhsLjAxMi0uMDEzLjAwMi4wMDJhMS4zNSAxLjM1IDAgMDExLjkwNy0uMDNsLjE4NS4yMDdjNy41NjUgOC4zMDcgNy45MzYgMjEuMDI5LjgzNCAyOS43MzFsLS4wMDkuMDFjLS4wMTguMDIzLS4wMy4wMzItLjA1LjA1NGExLjM1NyAxLjM1NyAwIDAxLTEuOTM1LjA2Yy0uMDE1LS4wMTUtLjAyNi0uMDMyLS4wNC0uMDQ2bC0xNC4yNjItMTMuNTUyLjAwMS0uMDAxLS4wMDItLjAwMmExLjM5NCAxLjM5NCAwIDAxLS4wNjgtMS45NWwtLjAwMi0uMDAzIDEzLjQwNi0xNC40NDRjLjAwMy0uMDA0LjAwNC0uMDEuMDA4LS4wMTMuMDA0LS4wMDQuMDEtLjAwNi4wMTMtLjAxTTEyNzAuMDQ2IDQ1LjkyNmwuMDE0LS4wMTIuMDAxLjAwM2ExLjM1MSAxLjM1MSAwIDAxMS44OTYuMjA4bC4xNTguMjNjNi40NjcgOS4xOTEgNS4yNDQgMjEuODU5LTIuODkyIDI5LjZsLS4wMS4wMWMtLjAyLjAyLS4wMzQuMDI4LS4wNTcuMDQ3YTEuMzU3IDEuMzU3IDAgMDEtMS45MjctLjE4NGMtLjAxMy0uMDE3LS4wMjEtLjAzNS0uMDMzLS4wNWwtMTIuNDU3LTE1LjIzNi4wMDItLjAwMi0uMDAzLS4wMDJhMS4zOTQgMS4zOTQgMCAwMS4xNzctMS45NDRsLS4wMDItLjAwMiAxNS4xMDktMTIuNjQ2Yy4wMDQtLjAwNC4wMDYtLjAxLjAxLS4wMTNsLjAxNC0uMDA3TTM4NC4wMjUgMzQxLjE5bC4wMTUtLjAwOS4wMDEuMDAzYTEuMzUzIDEuMzUzIDAgMDExLjg1Ny40NDVsLjEyOC4yNDdjNS4yNzEgOS45MzMgMi40NzMgMjIuMzQ2LTYuNTcyIDI5LjAwNGwtLjAxMS4wMDdjLS4wMjMuMDE4LS4wMzcuMDI0LS4wNjMuMDQtLjYzOS40MS0xLjQ4NS4yMi0xLjg5LS40MjUtLjAxMS0uMDE4LS4wMTctLjAzNy0uMDI3LS4wNTRsLTEwLjQ2Mi0xNi42ODIuMDAyLS4wMDEtLjAwMy0uMDAyYTEuMzkzIDEuMzkzIDAgMDEuNDItMS45MDdsLS4wMDItLjAwMiAxNi41OC0xMC42NDZjLjAwNS0uMDAzLjAwNy0uMDA4LjAxMi0uMDExLjAwNC0uMDAzLjAxLS4wMDMuMDE1LS4wMDZNMTMxMS4zODcgMzUyLjE0bC4wMTctLjAwN3YuMDAyYTEuMzU3IDEuMzU3IDAgMDExLjc4OS42NzZsLjA5Ni4yNjJjMy45OTYgMTAuNTE4LS4zMzIgMjIuNDgxLTEwLjE0NyAyNy45NDdsLS4wMTIuMDA1Yy0uMDI1LjAxNi0uMDQuMDItLjA2Ny4wMzJhMS4zNjIgMS4zNjIgMCAwMS0xLjgyNC0uNjU5Yy0uMDEtLjAyLS4wMTMtLjA0LS4wMi0uMDU3bC04LjMxLTE3Ljg2OS4wMDItLjAwMS0uMDAyLS4wMDJhMS4zOTEgMS4zOTEgMCAwMS42NTQtMS44NGwtLjAwMS0uMDAyIDE3Ljc5Ny04LjQ3M2MuMDA1LS4wMDIuMDA4LS4wMDcuMDEzLS4wMS4wMDUtLjAwMi4wMS0uMDAxLjAxNS0uMDA0TTI1Ni43MTIgNDE3LjUxOGwuMDE3LS4wMDZ2LjAwM2ExLjM2MSAxLjM2MSAwIDAxMS42OTMuODk3bC4wNjMuMjcxYzIuNjYgMTAuOTQzLTMuMTMgMjIuMjY3LTEzLjU2MSAyNi40NWwtLjAxMy4wMDRjLS4wMjcuMDEyLS4wNDIuMDE0LS4wNy4wMjNhMS4zNjcgMS4zNjcgMCAwMS0xLjczMS0uODg1Yy0uMDA3LS4wMi0uMDA3LS4wNC0uMDEzLS4wNTlsLTYuMDMtMTguNzguMDAyLS4wMDEtLjAwMi0uMDAzYTEuMzg5IDEuMzg5IDAgMDEuODc5LTEuNzQybC0uMDAxLS4wMDMgMTguNzM3LTYuMTZjLjAwNSAwIC4wMDktLjAwNS4wMTQtLjAwNy4wMDUtLjAwMi4wMSAwIC4wMTYtLjAwMk00MzQuNDY2IDQ1Ni4wMTNsLjAxOC0uMDAzdi4wMDNhMS4zNjcgMS4zNjcgMCAwMTEuNTcgMS4xMDRsLjAzLjI3N2MxLjI4MyAxMS4xOTgtNS44NzcgMjEuNzA0LTE2Ljc2MiAyNC41MzVsLS4wMTMuMDAyYy0uMDI4LjAwOS0uMDQzLjAwOS0uMDczLjAxNWExLjM3MiAxLjM3MiAwIDAxLTEuNjEtMS4wOThjLS4wMDMtLjAyMS0uMDAxLS4wNDEtLjAwNC0uMDZsLTMuNjU5LTE5LjQwNGguMDAzbC0uMDAxLS4wMDRhMS4zODUgMS4zODUgMCAwMTEuMDg5LTEuNjE3di0uMDAzbDE5LjM4Mi0zLjc0Yy4wMDUtLjAwMi4wMDktLjAwNi4wMTQtLjAwN2guMDE2TTEyOTguMzQgNjQuMTIzaC4wMTl2LjAwMmExLjM3MyAxLjM3MyAwIDAxMS40MjMgMS4yOTZsLS4wMDYuMjc5Yy0uMTE0IDExLjI4LTguNTMxIDIwLjgwMi0xOS42OTUgMjIuMjMzaC0uMDE0Yy0uMDI5LjAwNS0uMDQ0LjAwMy0uMDc0LjAwNWExLjM3OSAxLjM3OSAwIDAxLTEuNDYzLTEuMjk0YzAtLjAyMS4wMDMtLjA0LjAwMy0uMDZsLTEuMjI3LTE5LjczaC4wMDJ2LS4wMDNhMS4zODIgMS4zODIgMCAwMTEuMjgzLTEuNDY3di0uMDAzbDE5LjcxOS0xLjI1NmMuMDA1IDAgLjAxLS4wMDMuMDE1LS4wMDQuMDA1IDAgLjAxLjAwMy4wMTYuMDAyTTkyLjgxMyAxMDkuMDRsLjAxOS4wMDJ2LjAwM2ExLjM3OSAxLjM3OSAwIDAxMS4yNTEgMS40NjdsLS4wNC4yNzZjLTEuNTEyIDExLjE4NC0xMS4wNSAxOS41Ny0yMi4zMTIgMTkuNTczbC0uMDEzLS4wMDFjLS4wMy4wMDEtLjA0NC0uMDAzLS4wNzQtLjAwNWExLjM4NSAxLjM4NSAwIDAxLTEuMjkyLTEuNDdjLjAwMS0uMDIxLjAwOC0uMDQuMDEtLjA2bDEuMjI3LTE5Ljc0MmguMDAzdi0uMDAzYTEuMzc4IDEuMzc4IDAgMDExLjQ1NS0xLjI5NHYtLjAwM2wxOS43MzUgMS4yNTZjLjAwNiAwIC4wMS0uMDAzLjAxNi0uMDAyLjAwNSAwIC4wMS4wMDMuMDE1LjAwNE0zNDUuMzc3IDY5LjgyOGwuMDE4LjAwNC0uMDAxLjAwM2MuNzMuMTU3IDEuMi44NzMgMS4wNiAxLjYxNGwtLjA3NC4yN2MtMi44ODYgMTAuOTA3LTEzLjM4NSAxOC4wMi0yNC41NTUgMTYuNTk2bC0uMDEzLS4wMDNjLS4wMy0uMDAyLS4wNDQtLjAwOC0uMDc0LS4wMTRhMS4zOSAxLjM5IDAgMDEtMS4wOTktMS42MjJjLjAwNC0uMDIyLjAxMy0uMDQuMDE4LS4wNThsMy42NjQtMTkuNDM4aC4wMDJ2LS4wMDJhMS4zNzQgMS4zNzQgMCAwMTEuNjA1LTEuMXYtLjAwM2wxOS40MTggMy43NDdoLjAxNmwuMDE1LjAwNk02MDAuNzU4IDI1OS42MDJsLjAxOC4wMDYtLjAwMS4wMDNhMS4zODggMS4zODggMCAwMS44NSAxLjczNmwtLjEwNi4yNThjLTQuMjE2IDEwLjQ2Mi0xNS41MSAxNi4xOTUtMjYuNDEgMTMuMzY4bC0uMDEyLS4wMDVjLS4wMy0uMDA2LS4wNDMtLjAxMy0uMDcxLS4wMjNhMS4zOTQgMS4zOTQgMCAwMS0uODg5LTEuNzVjLjAwNy0uMDIuMDE4LS4wMzcuMDI1LS4wNTVsNi4wNDYtMTguODNoLjAwM3YtLjAwMmExLjM3IDEuMzcgMCAwMTEuNzI3LS44OWwuMDAxLS4wMDIgMTguNzkgNi4xNzZjLjAwNS4wMDIuMDEgMCAuMDE1LjAwMi4wMDYuMDAyLjAxLjAwNy4wMTQuMDA4TTU1Ni40NTYgMjg1LjM4NmwuMDE2LjAwOC0uMDAxLjAwMmMuNjY3LjMzNi45NDUgMS4xNDguNjI3IDEuODMybC0uMTM4LjI0MmMtNS40ODIgOS44NTQtMTcuMzkzIDE0LjExOS0yNy44NDggOS45MzdsLS4wMTItLjAwNmMtLjAyOC0uMDEtLjA0LS4wMi0uMDY4LS4wMzJhMS4zOTcgMS4zOTcgMCAwMS0uNjYzLTEuODVjLjAxLS4wMTkuMDIyLS4wMzQuMDMxLS4wNTFsOC4zMzktMTcuOTMuMDAyLjAwMXYtLjAwM2ExLjM2NiAxLjM2NiAwIDAxMS44MjQtLjY2NGwuMDAxLS4wMDMgMTcuODYxIDguNTAzYy4wMDUuMDAzLjAxLjAwMi4wMTYuMDA0LjAwNS4wMDMuMDA4LjAwOC4wMTMuMDFNNDYuOTE3IDQ0MC43MzVsLjAxNS4wMS0uMDAyLjAwMmMuNjIuNDE3Ljc5NCAxLjI1OS4zOTQgMS44OTdsLS4xNjcuMjIzYy02LjY2NSA5LjA5MS0xOS4wMDcgMTEuODI1LTI4Ljg1MyA2LjM1N2wtLjAxMS0uMDA3Yy0uMDI2LS4wMTMtLjAzOC0uMDI0LS4wNjMtLjA0YTEuNCAxLjQgMCAwMS0uNDI3LTEuOTJjLjAxMi0uMDE4LjAyNy0uMDMxLjAzNy0uMDQ3bDEwLjUwNS0xNi43NDhoLjAwMmwuMDAxLS4wMDJhMS4zNjMgMS4zNjMgMCAwMTEuODkxLS40M2wuMDAyLS4wMDMgMTYuNjUgMTAuNjkxYy4wMDQuMDAzLjAxLjAwMy4wMTQuMDA2LjAwNS4wMDMuMDA3LjAwOC4wMTIuMDFNMzAuNzY0IDI3MC45NDRsLjAxNC4wMTEtLjAwMi4wMDNjLjU2Mi40OTIuNjMgMS4zNDguMTU0IDEuOTMybC0uMTk0LjJjLTcuNzQ2IDguMTg1LTIwLjMyOCA5LjM0Ny0yOS40MSAyLjY4MmwtLjAxLS4wMDhjLS4wMjQtLjAxNy0uMDM0LS4wMjktLjA1Ny0uMDQ4YTEuNDAxIDEuNDAxIDAgMDEtLjE4My0xLjk1OGMuMDEzLS4wMTcuMDMtLjAyOC4wNDMtLjA0M2wxMi41MS0xNS4zMDIuMDAyLjAwMi4wMDItLjAwM2ExLjM2MiAxLjM2MiAwIDAxMS45MjktLjE4OWwuMDAyLS4wMDIgMTUuMTc2IDEyLjcwMmMuMDA0LjAwNC4wMS4wMDUuMDE0LjAwOC4wMDQuMDA0LjAwNi4wMS4wMS4wMTNNNDg5LjkzNSA0NTAuNDczbC4wMTIuMDEzLS4wMDIuMDAyYTEuMzk2IDEuMzk2IDAgMDEtLjA5IDEuOTM2bC0uMjE3LjE3NWMtOC43MDcgNy4xNDgtMjEuMzM1IDYuNzIxLTI5LjUxLTEuMDMybC0uMDEtLjAxYy0uMDIyLS4wMi0uMDMtLjAzMy0uMDUtLjA1NWExLjQwMiAxLjQwMiAwIDAxLjA2My0xLjk2NmMuMDE1LS4wMTQuMDMzLS4wMjQuMDQ4LS4wMzdsMTQuMzI1LTEzLjYxLjAwMi4wMDEuMDAyLS4wMDJhMS4zNjEgMS4zNjEgMCAwMTEuOTM3LjA1NGwuMDAyLS4wMDIgMTMuNDY2IDE0LjUxYy4wMDQuMDA0LjAxLjAwNS4wMTMuMDA5LjAwNC4wMDQuMDA1LjAxLjAwOS4wMTRNNzYyLjI2NiAzODcuNjFsLjAxLjAxNS0uMDAyLjAwMmExLjM5NSAxLjM5NSAwIDAxLS4zMzEgMS45MWwtLjIzNy4xNDVjLTkuNTM2IDUuOTk3LTIyLjAxMyAzLjk4Ny0yOS4xNTYtNC43M2wtLjAwOC0uMDExYy0uMDItLjAyMy0uMDI2LS4wMzctLjA0My0uMDYxYTEuNCAxLjQgMCAwMS4zMDgtMS45NDJjLjAxNy0uMDEzLjAzNi0uMDIuMDUyLS4wM2wxNS45MTgtMTEuNzAyLjAwMS4wMDIuMDAyLS4wMDJhMS4zNjIgMS4zNjIgMCAwMTEuOTE2LjI5N2wuMDAyLS4wMDEgMTEuNTUgMTYuMDgzYy4wMDIuMDA0LjAwOC4wMDcuMDEuMDExLjAwNC4wMDQuMDA0LjAxLjAwOC4wMTVNMzk3Ljc4OSA1Ni43MzVsLjAwOC4wMTYtLjAwMi4wMDJhMS4zOTMgMS4zOTMgMCAwMS0uNTY3IDEuODUybC0uMjU0LjExNGMtMTAuMjEzIDQuNzQ3LTIyLjM0NyAxLjE4NC0yOC4zNDktOC4zNTlsLS4wMDYtLjAxMWMtLjAxNy0uMDI1LS4wMjEtLjA0LS4wMzYtLjA2NmExLjM5OSAxLjM5OSAwIDAxLjU0OS0xLjg4N2MuMDE5LS4wMS4wMzgtLjAxNS4wNTUtLjAyNGwxNy4yNjEtOS42LjAwMi4wMDEuMDAyLS4wMDJjLjY2NS0uMzcgMS41LS4xMyAxLjg2NC41MzZsLjAwMy0uMDAxIDkuNDU1IDE3LjQwMmMuMDAyLjAwNS4wMDcuMDA3LjAxLjAxMnMuMDAyLjAxLjAwNS4wMTVNNjAuMTc3IDUwNy4xOTNsLjAwNi4wMTdoLS4wMDNhMS4zOSAxLjM5IDAgMDEtLjc5MyAxLjc2NWwtLjI2Ni4wODJjLTEwLjczIDMuNDItMjIuMzMzLTEuNjQzLTI3LjEwMS0xMS44NjJsLS4wMDUtLjAxMmMtLjAxNC0uMDI3LS4wMTYtLjA0Mi0uMDI3LS4wN2ExLjM5NiAxLjM5NiAwIDAxLjc4LTEuODAyYy4wMi0uMDA4LjA0LS4wMS4wNTctLjAxN2wxOC4zMzItNy4zNDN2LjAwMmwuMDAzLS4wMDFhMS4zNjcgMS4zNjcgMCAwMTEuNzg0Ljc2NmguMDAzbDcuMjE4IDE4LjQ0NmMuMDAyLjAwNS4wMDcuMDA4LjAwOS4wMTMuMDAyLjAwNSAwIC4wMS4wMDMuMDE2TTUxOC40NDcgNTIzLjk3M2wuMDA0LjAxNy0uMDAzLjAwMWExLjM4NiAxLjM4NiAwIDAxLTEuMDA3IDEuNjVsLS4yNzQuMDQ3Yy0xMS4wNzcgMi4wMzQtMjEuOTY1LTQuNDUyLTI1LjQyOS0xNS4xODdsLS4wMDMtLjAxM2MtLjAxLS4wMjgtLjAxMS0uMDQzLS4wMTgtLjA3MmExLjM5MiAxLjM5MiAwIDAxLjk5Ny0xLjY4OGMuMDIxLS4wMDYuMDQxLS4wMDUuMDYtLjAxbDE5LjExLTQuOTY0LjAwMS4wMDIuMDAzLS4wMDFhMS4zNzEgMS4zNzEgMCAwMTEuNjc2Ljk4NWguMDAybDQuODczIDE5LjIwMmMuMDAxLjAwNi4wMDYuMDEuMDA3LjAxNXYuMDE2TTcyNS4xOSAyNjguMTQ0bC4wMDIuMDE4aC0uMDAzYTEuMzgxIDEuMzgxIDAgMDEtMS4yMDQgMS41MDlsLS4yNzguMDEyYy0xMS4yNDcuNjE0LTIxLjI1LTcuMTk2LTIzLjM1Ni0xOC4yOGwtLjAwMS0uMDE0Yy0uMDA3LS4wMjktLjAwNi0uMDQ0LS4wMS0uMDc0YTEuMzg3IDEuMzg3IDAgMDExLjItMS41NDhjLjAyMi0uMDAzLjA0MiAwIC4wNi0uMDAybDE5LjU4NS0yLjUwM3YuMDAzbC4wMDMtLjAwMWExLjM3NiAxLjM3NiAwIDAxMS41NCAxLjE5bC4wMDQtLjAwMSAyLjQ1NCAxOS42NmMwIC4wMDUuMDA0LjAxLjAwNS4wMTUgMCAuMDA2LS4wMDIuMDEgMCAuMDE2TTU5OS4xNSAzMjkuODYxdi4wMThoLS4wMDNhMS4zNzYgMS4zNzYgMCAwMS0xLjM4MSAxLjM0M2wtLjI3OC0uMDIzYy0xMS4yMzQtLjgxNi0yMC4xOS05LjgzLTIwLjkwNy0yMS4wOXYtLjAxM2MtLjAwMy0uMDMgMC0uMDQ0IDAtLjA3NCAwLS43NjQuNjE4LTEuMzgzIDEuMzgyLTEuMzgzLjAyMSAwIC4wNC4wMDUuMDYuMDA2aDE5Ljc0di4wMDJoLjAwM2ExLjM4IDEuMzggMCAwMTEuMzggMS4zNzVoLjAwNHYxOS44MDhsLjAwMy4wMTVjMCAuMDA2LS4wMDMuMDEtLjAwMy4wMTZNMTE2Mi4xNjEgNjcuNzNsLS4wMDIuMDE5aC0uMDAzYTEuMzcgMS4zNyAwIDAxLTEuNTM1IDEuMTU2bC0uMjcyLS4wNThjLTExLjAzMi0yLjIzMi0xOC43OS0xMi4zMDEtMTguMTA4LTIzLjU1MmwuMDAyLS4wMTRjMC0uMDMuMDA1LS4wNDQuMDEtLjA3NGExLjM3NSAxLjM3NSAwIDAxMS41NC0xLjE5NWMuMDIxLjAwMi4wNC4wMS4wNTkuMDEzbDE5LjU2IDIuNXYuMDAzaC4wMDNjLjc1NC4wOTYgMS4yOS43ODMgMS4xOTggMS41MzdoLjAwM2wtMi40NTEgMTkuNjM1YzAgLjAwNS4wMDIuMDEuMDAxLjAxNiAwIC4wMDUtLjAwNC4wMS0uMDA1LjAxNU05MTkuODg2IDEwOC4wMzlsLS4wMDUuMDE3aC0uMDAzYTEuMzY0IDEuMzY0IDAgMDEtMS42NjQuOTUybC0uMjYyLS4wOTJjLTEwLjY1Mi0zLjYwOS0xNy4wOTItMTQuNTc0LTE1LjAyMS0yNS42NDRsLjAwMy0uMDEyYy4wMDQtLjAzLjAxMS0uMDQ0LjAxOC0uMDczYTEuMzcgMS4zNyAwIDAxMS42NzUtLjk5Yy4wMi4wMDUuMDM4LjAxNS4wNTcuMDJsMTkuMDY4IDQuOTU0di4wMDJoLjAwM2MuNzM1LjE5MiAxLjE4MS45NDEuOTk3IDEuNjc3aC4wMDNsLTQuODYyIDE5LjE1OXYuMDE2Yy0uMDAyLjAwNS0uMDA2LjAwOS0uMDA3LjAxNE0xMzcyLjc0NiA0NjIuODEybC0uMDA2LjAxNmgtLjAwM2ExLjM1OSAxLjM1OSAwIDAxLTEuNzY3LjczNGwtLjI0OC0uMTI1Yy0xMC4xMDUtNC45MjQtMTUuMTIzLTE2LjYxMy0xMS42OTctMjcuMzNsLjAwNS0uMDEzYy4wMDgtLjAyOS4wMTYtLjA0MS4wMjctLjA3YTEuMzY1IDEuMzY1IDAgMDExLjc4Mi0uNzdjLjAyLjAwOC4wMzYuMDIuMDU0LjAyN2wxOC4yNzUgNy4zMjF2LjAwM2guMDAzYTEuMzkgMS4zOSAwIDAxLjc3OSAxLjc4OWguMDAzbC03LjE5NSAxOC4zODhjLS4wMDIuMDA1LS4wMDEuMDExLS4wMDMuMDE2LS4wMDIuMDA1LS4wMDcuMDA5LS4wMDkuMDE0TTE4OS42NTcgOTYuMjExbC0uMDA4LjAxNi0uMDAzLS4wMDJjLS4zNy42NDctMS4xODYuODctMS44NDIuNTA2bC0uMjMtLjE1NGMtOS40LTYuMTU4LTEyLjkxNi0xOC4zODctOC4xODctMjguNTg3bC4wMDYtLjAxMmMuMDEyLS4wMjcuMDIyLS4wMzkuMDM2LS4wNjVhMS4zNiAxLjM2IDAgMDExLjg2MS0uNTRjLjAyLjAxLjAzMy4wMjQuMDUuMDM0bDE3LjE5NyA5LjU2NS0uMDAxLjAwMmguMDAzYy42NjMuMzcuOTA5IDEuMjA3LjU1IDEuODc0bC4wMDIuMDAxLTkuNDE5IDE3LjMzNS0uMDA0LjAxNWMtLjAwMy4wMDQtLjAwOC4wMDctLjAxLjAxMk01OS45MjggNDA1LjM4bC0uMDEuMDE1LS4wMDMtLjAwMWExLjM1MiAxLjM1MiAwIDAxLTEuODkuMjdsLS4yMDktLjE4MmMtOC41NDctNy4yOTItMTAuNTA3LTE5Ljg2Ni00LjU0Ni0yOS4zOTJsLjAwOC0uMDFjLjAxNC0uMDI2LjAyNi0uMDM3LjA0My0uMDYxYTEuMzU4IDEuMzU4IDAgMDExLjkxMy0uMzAyYy4wMTcuMDEzLjAzLjAyOC4wNDUuMDRMNzEuMTMgMzg3LjQxbC0uMDAxLjAwMmguMDAyYy42MTEuNDUuNzUgMS4zMTIuMzEyIDEuOTI4bC4wMDIuMDAyLTExLjUgMTYuMDEzLS4wMDYuMDE1LS4wMTEuMDFNMzA0Ljg3IDQ3MS45MjRsLS4wMTMuMDEzLS4wMDItLjAwMmExLjM1IDEuMzUgMCAwMS0xLjkwNy4wM2wtLjE4NS0uMjA2Yy03LjU2NS04LjMwOC03LjkzNi0yMS4wMy0uODM0LTI5LjczMmwuMDEtLjAxYy4wMTctLjAyMy4wMy0uMDMyLjA1LS4wNTRhMS4zNTcgMS4zNTcgMCAwMTEuOTM0LS4wNmMuMDE2LjAxNS4wMjYuMDMzLjA0LjA0NmwxNC4yNjMgMTMuNTUyLS4wMDIuMDAyLjAwMy4wMDFjLjU1LjUyMy41OCAxLjM5NS4wNjcgMS45NTFsLjAwMi4wMDItMTMuNDA1IDE0LjQ0NGMtLjAwNC4wMDQtLjAwNS4wMS0uMDA4LjAxMy0uMDA0LjAwNC0uMDEuMDA2LS4wMTMuMDFNOTA2LjQ1NCAxNjAuMzM1bC0uMDE0LjAxMi0uMDAxLS4wMDJhMS4zNTEgMS4zNTEgMCAwMS0xLjg5Ny0uMjFsLS4xNTctLjIyOGMtNi40NjctOS4xOTItNS4yNDQtMjEuODYgMi44OTEtMjkuNjAybC4wMS0uMDA4Yy4wMjEtLjAyMS4wMzUtLjAyOC4wNTgtLjA0OGExLjM1NyAxLjM1NyAwIDAxMS45MjYuMTg0Yy4wMTQuMDE3LjAyMi4wMzUuMDM0LjA1bDEyLjQ1NyAxNS4yMzYtLjAwMi4wMDIuMDAzLjAwMmMuNDguNTg3LjQwMSAxLjQ1Ny0uMTc3IDEuOTQ0bC4wMDIuMDAyLTE1LjEwOSAxMi42NDZjLS4wMDQuMDA0LS4wMDYuMDEtLjAxLjAxM2wtLjAxNC4wMDdNMTE2Ny45MzYgMzAuNjgxbC0uMDE1LjAxLS4wMDItLjAwMmExLjM1MyAxLjM1MyAwIDAxLTEuODU2LS40NDZsLS4xMjgtLjI0N2MtNS4yNzEtOS45MzItMi40NzMtMjIuMzQ2IDYuNTcyLTI5LjAwM2wuMDEtLjAwN2MuMDI0LS4wMTkuMDM4LS4wMjQuMDYzLS4wNGExLjM1OSAxLjM1OSAwIDAxMS44OS40MjRjLjAxMi4wMTguMDE3LjAzOC4wMjcuMDU0bDEwLjQ2MyAxNi42ODItLjAwMi4wMDEuMDAyLjAwMmExLjM5MyAxLjM5MyAwIDAxLS40MTggMS45MDdsLjAwMS4wMDItMTYuNTggMTAuNjQ3Yy0uMDA1LjAwMy0uMDA4LjAwOC0uMDEyLjAxLS4wMDUuMDA0LS4wMS4wMDQtLjAxNS4wMDZNMTI1My4zOCA1MzcuNjQzbC0uMDE2LjAwOC0uMDAxLS4wMDNhMS4zNTcgMS4zNTcgMCAwMS0xLjc4OC0uNjc2bC0uMDk2LS4yNjFjLTMuOTk3LTEwLjUxOS4zMzItMjIuNDgyIDEwLjE0Ny0yNy45NDdsLjAxMi0uMDA2Yy4wMjUtLjAxNi4wNC0uMDIuMDY3LS4wMzJhMS4zNjIgMS4zNjIgMCAwMTEuODI0LjY2Yy4wMS4wMTkuMDEyLjAzOS4wMi4wNTdsOC4zMSAxNy44NjgtLjAwMi4wMDEuMDAyLjAwM2MuMzIuNjg5LjAyOCAxLjUxMS0uNjU0IDEuODM4bC4wMDEuMDAzLTE3Ljc5NyA4LjQ3M2MtLjAwNS4wMDMtLjAwOC4wMDgtLjAxMy4wMWwtLjAxNS4wMDRNNzU2LjQ5IDE5OC4yNTRsLS4wMTcuMDA2LS4wMDEtLjAwM2ExLjM2MSAxLjM2MSAwIDAxLTEuNjkzLS44OTdsLS4wNjMtLjI3MWMtMi42Ni0xMC45NDIgMy4xMy0yMi4yNjYgMTMuNTYyLTI2LjQ1bC4wMTMtLjAwNGMuMDI3LS4wMTIuMDQyLS4wMTQuMDctLjAyM2ExLjM2NyAxLjM2NyAwIDAxMS43My44ODVjLjAwNy4wMi4wMDguMDQuMDEzLjA2bDYuMDMxIDE4Ljc4aC0uMDAybC4wMDEuMDAzYTEuMzg4IDEuMzg4IDAgMDEtLjg3OCAxLjc0MnYuMDAzbC0xOC43MzcgNi4xNmMtLjAwNS4wMDEtLjAwOC4wMDUtLjAxMy4wMDctLjAwNi4wMDItLjAxMSAwLS4wMTYuMDAyTTU5OC4zIDQ2Ni44OTJsLS4wMTkuMDA0di0uMDAzYTEuMzY3IDEuMzY3IDAgMDEtMS41Ny0xLjEwNGwtLjAzLS4yNzhjLTEuMjgyLTExLjE5NyA1Ljg3OC0yMS43MDMgMTYuNzYyLTI0LjUzNGwuMDEzLS4wMDNjLjAyOS0uMDA4LjA0NC0uMDA4LjA3My0uMDE0YTEuMzcyIDEuMzcyIDAgMDExLjYxIDEuMDk3Yy4wMDQuMDIyLjAwMi4wNDIuMDA1LjA2bDMuNjU4IDE5LjQwNWgtLjAwMnYuMDAzYTEuMzg1IDEuMzg1IDAgMDEtMS4wODkgMS42MThsLjAwMS4wMDMtMTkuMzgyIDMuNzQtLjAxNS4wMDZoLS4wMTZNMTQzNC45NzcgNDUzLjc4OGgtLjAxOHYtLjAwMmExLjM3MyAxLjM3MyAwIDAxLTEuNDIzLTEuMjk2bC4wMDYtLjI3OWMuMTE0LTExLjI4IDguNTMxLTIwLjgwMiAxOS42OTUtMjIuMjMybC4wMTQtLjAwMWMuMDI5LS4wMDUuMDQ0LS4wMDMuMDc0LS4wMDUuNzYtLjA0OCAxLjQxNS41MyAxLjQ2MyAxLjI5NC4wMDEuMDIxLS4wMDMuMDQxLS4wMDMuMDZsMS4yMjcgMTkuNzNoLS4wMDJ2LjAwM2ExLjM4MiAxLjM4MiAwIDAxLTEuMjgyIDEuNDY4di4wMDNsLTE5LjcyIDEuMjU1Yy0uMDA1IDAtLjAxLjAwMy0uMDE1LjAwNC0uMDA1IDAtLjAxLS4wMDMtLjAxNi0uMDAyTTg1NS42NzcgMjI5LjcxbC0uMDE4LS4wMDJ2LS4wMDNhMS4zNzkgMS4zNzkgMCAwMS0xLjI1Mi0xLjQ2N2wuMDQtLjI3NmMxLjUxMi0xMS4xODQgMTEuMDUtMTkuNTcgMjIuMzEyLTE5LjU3M2wuMDEzLjAwMWMuMDMtLjAwMS4wNDUuMDAzLjA3NS4wMDUuNzYuMDQ4IDEuMzM5LjcwNiAxLjI5MSAxLjQ3LS4wMDEuMDIxLS4wMDguMDQtLjAxLjA2bC0xLjIyNyAxOS43NDJoLS4wMDJ2LjAwM2ExLjM3OCAxLjM3OCAwIDAxLTEuNDU2IDEuMjk0di4wMDNsLTE5LjczNS0xLjI1NmMtLjAwNSAwLS4wMS4wMDMtLjAxNi4wMDItLjAwNSAwLS4wMS0uMDAzLS4wMTUtLjAwNE05OTUuODk2IDE0My45NmwtLjAxOC0uMDAzdi0uMDAzYTEuMzg0IDEuMzg0IDAgMDEtMS4wNi0xLjYxNGwuMDc1LS4yN2MyLjg4NS0xMC45MDcgMTMuMzg0LTE4LjAyIDI0LjU1NS0xNi41OTZsLjAxMy4wMDNjLjAzLjAwMi4wNDQuMDA4LjA3My4wMTRhMS4zOSAxLjM5IDAgMDExLjEgMS42MjJjLS4wMDUuMDIxLS4wMTQuMDQtLjAxOC4wNThsLTMuNjY0IDE5LjQzN2gtLjAwM3YuMDAzYTEuMzc0IDEuMzc0IDAgMDEtMS42MDQgMS4xdi4wMDNsLTE5LjQxOC0zLjc0OGgtLjAxNmMtLjAwNiAwLS4wMS0uMDA0LS4wMTUtLjAwNk00MTguNDYzIDE2NC45NjRsLS4wMTctLjAwNXYtLjAwM2ExLjM4OCAxLjM4OCAwIDAxLS44NS0xLjczN2wuMTA3LS4yNTdjNC4yMTUtMTAuNDYyIDE1LjUwOS0xNi4xOTUgMjYuNDA5LTEzLjM2OGwuMDEzLjAwNGMuMDI5LjAwNy4wNDIuMDE0LjA3LjAyNGExLjM5NCAxLjM5NCAwIDAxLjg4OSAxLjc0OWMtLjAwNy4wMi0uMDE4LjAzNy0uMDI0LjA1NmwtNi4wNDcgMTguODMtLjAwMi0uMDAxdi4wMDNhMS4zNyAxLjM3IDAgMDEtMS43MjguODlsLS4wMDEuMDAyLTE4Ljc5LTYuMTc3Yy0uMDA1LS4wMDItLjAxIDAtLjAxNS0uMDAybC0uMDE0LS4wMDhNMTQ3Ny4wNzggMzI3LjM3NWwtLjAxNy0uMDA3LjAwMS0uMDAzYTEuMzkyIDEuMzkyIDAgMDEtLjYyNy0xLjgzMWwuMTM4LS4yNDNjNS40ODItOS44NTQgMTcuMzkzLTE0LjExOSAyNy44NDgtOS45MzZsLjAxMi4wMDVjLjAyOC4wMS4wNC4wMi4wNjguMDMyLjY4OS4zMjguOTg2IDEuMTU1LjY2MyAxLjg1LS4wMS4wMTktLjAyMi4wMzQtLjAzMS4wNTFsLTguMzM5IDE3LjkzaC0uMDAydi4wMDJhMS4zNjYgMS4zNjYgMCAwMS0xLjgyNC42NjVsLS4wMDEuMDAyLTE3Ljg2MS04LjUwM2MtLjAwNS0uMDAzLS4wMS0uMDAyLS4wMTYtLjAwNGwtLjAxMi0uMDFNMTA4NS4xNzMgMzY0LjczN2wtLjAxNS0uMDEuMDAxLS4wMDJhMS4zOTQgMS4zOTQgMCAwMS0uMzkzLTEuODk3bC4xNjctLjIyM2M2LjY2NC05LjA5MSAxOS4wMDctMTEuODI1IDI4Ljg1My02LjM1N2wuMDEuMDA3Yy4wMjcuMDE0LjAzOC4wMjQuMDY0LjA0YTEuNCAxLjQgMCAwMS40MjYgMS45MmMtLjAxMS4wMTgtLjAyNi4wMzEtLjAzNy4wNDdsLTEwLjUwNCAxNi43NDktLjAwMi0uMDAyLS4wMDIuMDAzYTEuMzYzIDEuMzYzIDAgMDEtMS44OS40M2wtLjAwMi4wMDMtMTYuNjUtMTAuNjljLS4wMDQtLjAwNC0uMDEtLjAwNC0uMDE0LS4wMDctLjAwNS0uMDAzLS4wMDctLjAwOC0uMDEyLS4wMU02NDguMzQ2IDQyLjIxMmwtLjAxMy0uMDEyLjAwMi0uMDAyYTEuMzk2IDEuMzk2IDAgMDEtLjE1NC0xLjkzMmwuMTk0LS4yYzcuNzQ1LTguMTg2IDIwLjMyOC05LjM0OCAyOS40MDktMi42ODNsLjAxLjAwOWMuMDI1LjAxNi4wMzQuMDI4LjA1Ny4wNDguNTg2LjQ5LjY2OCAxLjM2NS4xODQgMS45NTgtLjAxNC4wMTctLjAzLjAyOC0uMDQzLjA0M2wtMTIuNTExIDE1LjMwMS0uMDAyLS4wMDEtLjAwMS4wMDJhMS4zNjIgMS4zNjIgMCAwMS0xLjkzLjE5bC0uMDAxLjAwMi0xNS4xNzYtMTIuNzAzYy0uMDA1LS4wMDMtLjAxLS4wMDQtLjAxNC0uMDA4LS4wMDUtLjAwMy0uMDA2LS4wMDktLjAxLS4wMTJNMzcyLjc3NSA0NjAuMzg5bC0uMDEyLS4wMTQuMDAyLS4wMDJhMS4zOTYgMS4zOTYgMCAwMS4wOS0xLjkzNmwuMjE3LS4xNzVjOC43MDgtNy4xNDggMjEuMzM1LTYuNzIgMjkuNTEgMS4wMzJsLjAxLjAxYy4wMjIuMDIuMDMuMDMzLjA1LjA1NS41Mi41Ni40OTIgMS40MzktLjA2MyAxLjk2Ni0uMDE1LjAxNS0uMDMzLjAyNC0uMDQ3LjAzN2wtMTQuMzI2IDEzLjYxaC0uMDAybC0uMDAxLjAwMmMtLjU1My41MjQtMS40Mi41LTEuOTM4LS4wNTVsLS4wMDIuMDAyLTEzLjQ2Ni0xNC41MWMtLjAwNC0uMDAzLS4wMS0uMDA1LS4wMTMtLjAwOS0uMDA0LS4wMDQtLjAwNS0uMDEtLjAwOS0uMDEzTTExMTQuNzU3IDUwNi42OWwtLjAxMS0uMDE1LjAwMi0uMDAyYTEuMzk1IDEuMzk1IDAgMDEuMzMxLTEuOTFsLjIzOC0uMTQ1YzkuNTM1LTUuOTk3IDIyLjAxMi0zLjk4NyAyOS4xNTUgNC43M2wuMDA4LjAxMWMuMDIuMDIzLjAyNi4wMzcuMDQ0LjA2MWExLjQgMS40IDAgMDEtLjMwOSAxLjk0MmMtLjAxNy4wMTMtLjAzNi4wMi0uMDUyLjAzbC0xNS45MTggMTEuNzAyLS4wMDEtLjAwMi0uMDAyLjAwMmExLjM2MiAxLjM2MiAwIDAxLTEuOTE2LS4yOTdsLS4wMDIuMDAxLTExLjU1LTE2LjA4M2MtLjAwMi0uMDA0LS4wMDgtLjAwNy0uMDEtLjAxMS0uMDA0LS4wMDQtLjAwNC0uMDEtLjAwNy0uMDE1TTg2MC43MTQgMjg1LjAyNmwtLjAwOS0uMDE2LjAwMy0uMDAyYTEuMzkzIDEuMzkzIDAgMDEuNTY2LTEuODUxbC4yNTQtLjExNWMxMC4yMTMtNC43NDcgMjIuMzQ4LTEuMTg0IDI4LjM0OSA4LjM1OWwuMDA2LjAxMWMuMDE3LjAyNS4wMjIuMDQuMDM2LjA2Ni4zNjUuNjcxLjEyIDEuNTE1LS41NDggMS44ODctLjAyLjAxLS4wMzkuMDE1LS4wNTYuMDI0bC0xNy4yNiA5LjYtLjAwMi0uMDAxLS4wMDIuMDAyYy0uNjY2LjM3LTEuNS4xMy0xLjg2NS0uNTM2bC0uMDAyLjAwMS05LjQ1NS0xNy40MDJjLS4wMDMtLjAwNS0uMDA4LS4wMDctLjAxLS4wMTItLjAwMy0uMDA1LS4wMDMtLjAxLS4wMDUtLjAxNU0yODMuMzM4IDE0NC43MTNsLS4wMDYtLjAxNy4wMDMtLjAwMWExLjM5IDEuMzkgMCAwMS43OTMtMS43NjVsLjI2Ni0uMDgyYzEwLjczLTMuNDE5IDIyLjMzMiAxLjY0NCAyNy4xMDEgMTEuODYzbC4wMDUuMDEyYy4wMTQuMDI2LjAxNi4wNDIuMDI3LjA3YTEuMzk2IDEuMzk2IDAgMDEtLjc4IDEuODAxYy0uMDIuMDA5LS4wNC4wMS0uMDU4LjAxN2wtMTguMzMxIDcuMzQzdi0uMDAybC0uMDA0LjAwMmExLjM2NyAxLjM2NyAwIDAxLTEuNzgzLS43NjdsLS4wMDMuMDAyLTcuMjE4LTE4LjQ0N2MtLjAwMi0uMDA1LS4wMDctLjAwOC0uMDA5LS4wMTMtLjAwMi0uMDA2IDAtLjAxMS0uMDAzLS4wMTZNNzIxLjk5NyAzMTEuNjFsLS4wMDUtLjAxN2guMDAzYTEuMzg2IDEuMzg2IDAgMDExLjAwNy0xLjY1bC4yNzQtLjA0OGMxMS4wNzctMi4wMzQgMjEuOTY1IDQuNDUyIDI1LjQzIDE1LjE4N2wuMDAzLjAxM2MuMDEuMDI4LjAxLjA0My4wMTguMDczYTEuMzkyIDEuMzkyIDAgMDEtLjk5OCAxLjY4OGMtLjAyLjAwNS0uMDQuMDA1LS4wNi4wMWwtMTkuMTEgNC45NjN2LS4wMDJsLS4wMDMuMDAxYTEuMzcxIDEuMzcxIDAgMDEtMS42NzYtLjk4NWgtLjAwM2wtNC44NzMtMTkuMjAyYy0uMDAxLS4wMDUtLjAwNS0uMDEtLjAwNi0uMDE0LS4wMDItLjAwNiAwLS4wMTEtLjAwMS0uMDE2TTI1MS44OTQgMjY2LjMyOGwtLjAwMy0uMDE4aC4wMDNhMS4zODEgMS4zODEgMCAwMTEuMjA0LTEuNTA4bC4yNzktLjAxM2MxMS4yNDYtLjYxNCAyMS4yNDkgNy4xOTcgMjMuMzU1IDE4LjI4MWwuMDAyLjAxM2MuMDA2LjAzLjAwNS4wNDUuMDEuMDc1YTEuMzg3IDEuMzg3IDAgMDEtMS4yIDEuNTQ3Yy0uMDIyLjAwMy0uMDQyIDAtLjA2MS4wMDJsLTE5LjU4NCAyLjUwM3YtLjAwM2wtLjAwMy4wMDFhMS4zNzYgMS4zNzYgMCAwMS0xLjU0LTEuMTlsLS4wMDQuMDAxLTIuNDU0LTE5LjY2Yy0uMDAxLS4wMDUtLjAwNS0uMDEtLjAwNS0uMDE1di0uMDE2TTU0LjM3NyA1MjAuNzc4di0uMDE4aC4wMDNhMS4zNzYgMS4zNzYgMCAwMTEuMzgyLTEuMzQzbC4yNzcuMDIzYzExLjIzNC44MTYgMjAuMTkgOS44MyAyMC45MDcgMjEuMDl2LjAxMmMuMDA0LjAzIDAgLjA0NSAwIC4wNzUgMCAuNzY0LS42MTcgMS4zODMtMS4zODEgMS4zODMtLjAyMiAwLS4wNDEtLjAwNS0uMDYtLjAwNmgtMTkuNzR2LS4wMDJoLS4wMDNhMS4zOCAxLjM4IDAgMDEtMS4zODItMS4zNzVoLS4wMDNWNTIwLjgxYzAtLjAwNS0uMDAzLS4wMS0uMDAzLS4wMTZsLjAwMy0uMDE1Ii8+PC9nPjwvc3ZnPg==);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgb(255, 255, 255) 100%), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU1NSIgaGVpZ2h0PSI1NDIiIHZpZXdCb3g9IjAgMCAxNTU1IDU0MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjQjVFREQyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMjc5LjIwNCAxMDMuOTAzbC4wMDItLjAxOGguMDAzYTEuMzcgMS4zNyAwIDAxMS41MzUtMS4xNTZsLjI3Mi4wNThjMTEuMDMxIDIuMjMyIDE4Ljc5IDEyLjMgMTguMTA4IDIzLjU1MmwtLjAwMi4wMTNjMCAuMDMtLjAwNi4wNDQtLjAxLjA3NGExLjM3NSAxLjM3NSAwIDAxLTEuNTQgMS4xOTZjLS4wMjEtLjAwMy0uMDQtLjAxLS4wNTktLjAxNGwtMTkuNTYtMi41di0uMDAyaC0uMDAzYTEuMzg0IDEuMzg0IDAgMDEtMS4xOTktMS41MzhoLS4wMDNsMi40NTItMTkuNjM0YzAtLjAwNi0uMDAyLS4wMS0uMDAxLS4wMTYgMC0uMDA2LjAwNC0uMDEuMDA1LS4wMTVNNDEzLjg2MyA0OTguN2wuMDA0LS4wMTguMDAzLjAwMWMuMi0uNzE5LjkzNy0xLjE0IDEuNjY0LS45NTJsLjI2Mi4wOTJjMTAuNjUzIDMuNjA4IDE3LjA5MiAxNC41NzQgMTUuMDIxIDI1LjY0NGwtLjAwMy4wMTJjLS4wMDQuMDMtLjAxLjA0NC0uMDE4LjA3M2ExLjM3IDEuMzcgMCAwMS0xLjY3NS45OWMtLjAyLS4wMDUtLjAzOC0uMDE1LS4wNTYtLjAybC0xOS4wNy00Ljk1NC4wMDEtLjAwM2gtLjAwM2ExLjM4NyAxLjM4NyAwIDAxLS45OTctMS42NzZoLS4wMDNsNC44NjItMTkuMTU5di0uMDE2bC4wMDgtLjAxNE04MzkuODcyIDQ3NS4xNWwuMDA2LS4wMTdoLjAwM2ExLjM1OSAxLjM1OSAwIDAxMS43NjctLjczM2wuMjQ4LjEyNGMxMC4xMDUgNC45MjQgMTUuMTIzIDE2LjYxMyAxMS42OTcgMjcuMzNsLS4wMDUuMDEzYy0uMDA4LjAyOS0uMDE2LjA0Mi0uMDI3LjA3YTEuMzY1IDEuMzY1IDAgMDEtMS43ODIuNzdjLS4wMi0uMDA3LS4wMzYtLjAyLS4wNTQtLjAyN2wtMTguMjc1LTcuMzIxdi0uMDAybC0uMDAzLS4wMDFhMS4zOSAxLjM5IDAgMDEtLjc4LTEuNzg5aC0uMDAybDcuMTk1LTE4LjM4OGMuMDAyLS4wMDUuMDAxLS4wMTEuMDAzLS4wMTYuMDAyLS4wMDUuMDA3LS4wMDguMDA5LS4wMTNNOTE2Ljg0OSAyNDEuMDMzbC4wMDgtLjAxNS4wMDMuMDAxYTEuMzU1IDEuMzU1IDAgMDExLjg0Mi0uNTA2bC4yMy4xNTVjOS40IDYuMTU4IDEyLjkxNiAxOC4zODYgOC4xODcgMjguNTg3bC0uMDA2LjAxMWMtLjAxMi4wMjgtLjAyMS4wNC0uMDM2LjA2NmExLjM2IDEuMzYgMCAwMS0xLjg2MS41NGMtLjAyLS4wMS0uMDMzLS4wMjQtLjA1LS4wMzRsLTE3LjE5Ny05LjU2NS4wMDItLjAwM2gtLjAwM2ExLjM5MiAxLjM5MiAwIDAxLS41NS0xLjg3M2wtLjAwMy0uMDAyIDkuNDE5LTE3LjMzNGMuMDAyLS4wMDUuMDAyLS4wMS4wMDUtLjAxNS4wMDItLjAwNS4wMDctLjAwOC4wMS0uMDEzTTQ0MS42MDMgNjguODdsLjAxLS4wMTUuMDAzLjAwMWExLjM1MiAxLjM1MiAwIDAxMS44ODktLjI3bC4yMS4xODJjOC41NDcgNy4yOTIgMTAuNTA2IDE5Ljg2NiA0LjU0NiAyOS4zOTJsLS4wMDguMDFjLS4wMTUuMDI2LS4wMjYuMDM3LS4wNDMuMDYxYTEuMzU4IDEuMzU4IDAgMDEtMS45MTMuMzAyYy0uMDE3LS4wMTMtLjAzLS4wMjgtLjA0NS0uMDRMNDMwLjQwMSA4Ni44NGwuMDAxLS4wMDJoLS4wMDNhMS4zOTMgMS4zOTMgMCAwMS0uMzEtMS45MjhsLS4wMDMtLjAwMiAxMS40OTktMTYuMDEzYy4wMDMtLjAwNS4wMDMtLjAxLjAwNy0uMDE1bC4wMTEtLjAxTTE1NDYuNTY5IDQ2OS4wNDhsLjAxMi0uMDEzLjAwMi4wMDJhMS4zNSAxLjM1IDAgMDExLjkwNy0uMDNsLjE4NS4yMDdjNy41NjUgOC4zMDcgNy45MzYgMjEuMDI5LjgzNCAyOS43MzFsLS4wMDkuMDFjLS4wMTguMDIzLS4wMy4wMzItLjA1LjA1NGExLjM1NyAxLjM1NyAwIDAxLTEuOTM1LjA2Yy0uMDE1LS4wMTUtLjAyNi0uMDMyLS4wNC0uMDQ2bC0xNC4yNjItMTMuNTUyLjAwMS0uMDAxLS4wMDItLjAwMmExLjM5NCAxLjM5NCAwIDAxLS4wNjgtMS45NWwtLjAwMi0uMDAzIDEzLjQwNi0xNC40NDRjLjAwMy0uMDA0LjAwNC0uMDEuMDA4LS4wMTMuMDA0LS4wMDQuMDEtLjAwNi4wMTMtLjAxTTEyNzAuMDQ2IDQ1LjkyNmwuMDE0LS4wMTIuMDAxLjAwM2ExLjM1MSAxLjM1MSAwIDAxMS44OTYuMjA4bC4xNTguMjNjNi40NjcgOS4xOTEgNS4yNDQgMjEuODU5LTIuODkyIDI5LjZsLS4wMS4wMWMtLjAyLjAyLS4wMzQuMDI4LS4wNTcuMDQ3YTEuMzU3IDEuMzU3IDAgMDEtMS45MjctLjE4NGMtLjAxMy0uMDE3LS4wMjEtLjAzNS0uMDMzLS4wNWwtMTIuNDU3LTE1LjIzNi4wMDItLjAwMi0uMDAzLS4wMDJhMS4zOTQgMS4zOTQgMCAwMS4xNzctMS45NDRsLS4wMDItLjAwMiAxNS4xMDktMTIuNjQ2Yy4wMDQtLjAwNC4wMDYtLjAxLjAxLS4wMTNsLjAxNC0uMDA3TTM4NC4wMjUgMzQxLjE5bC4wMTUtLjAwOS4wMDEuMDAzYTEuMzUzIDEuMzUzIDAgMDExLjg1Ny40NDVsLjEyOC4yNDdjNS4yNzEgOS45MzMgMi40NzMgMjIuMzQ2LTYuNTcyIDI5LjAwNGwtLjAxMS4wMDdjLS4wMjMuMDE4LS4wMzcuMDI0LS4wNjMuMDQtLjYzOS40MS0xLjQ4NS4yMi0xLjg5LS40MjUtLjAxMS0uMDE4LS4wMTctLjAzNy0uMDI3LS4wNTRsLTEwLjQ2Mi0xNi42ODIuMDAyLS4wMDEtLjAwMy0uMDAyYTEuMzkzIDEuMzkzIDAgMDEuNDItMS45MDdsLS4wMDItLjAwMiAxNi41OC0xMC42NDZjLjAwNS0uMDAzLjAwNy0uMDA4LjAxMi0uMDExLjAwNC0uMDAzLjAxLS4wMDMuMDE1LS4wMDZNMTMxMS4zODcgMzUyLjE0bC4wMTctLjAwN3YuMDAyYTEuMzU3IDEuMzU3IDAgMDExLjc4OS42NzZsLjA5Ni4yNjJjMy45OTYgMTAuNTE4LS4zMzIgMjIuNDgxLTEwLjE0NyAyNy45NDdsLS4wMTIuMDA1Yy0uMDI1LjAxNi0uMDQuMDItLjA2Ny4wMzJhMS4zNjIgMS4zNjIgMCAwMS0xLjgyNC0uNjU5Yy0uMDEtLjAyLS4wMTMtLjA0LS4wMi0uMDU3bC04LjMxLTE3Ljg2OS4wMDItLjAwMS0uMDAyLS4wMDJhMS4zOTEgMS4zOTEgMCAwMS42NTQtMS44NGwtLjAwMS0uMDAyIDE3Ljc5Ny04LjQ3M2MuMDA1LS4wMDIuMDA4LS4wMDcuMDEzLS4wMS4wMDUtLjAwMi4wMS0uMDAxLjAxNS0uMDA0TTI1Ni43MTIgNDE3LjUxOGwuMDE3LS4wMDZ2LjAwM2ExLjM2MSAxLjM2MSAwIDAxMS42OTMuODk3bC4wNjMuMjcxYzIuNjYgMTAuOTQzLTMuMTMgMjIuMjY3LTEzLjU2MSAyNi40NWwtLjAxMy4wMDRjLS4wMjcuMDEyLS4wNDIuMDE0LS4wNy4wMjNhMS4zNjcgMS4zNjcgMCAwMS0xLjczMS0uODg1Yy0uMDA3LS4wMi0uMDA3LS4wNC0uMDEzLS4wNTlsLTYuMDMtMTguNzguMDAyLS4wMDEtLjAwMi0uMDAzYTEuMzg5IDEuMzg5IDAgMDEuODc5LTEuNzQybC0uMDAxLS4wMDMgMTguNzM3LTYuMTZjLjAwNSAwIC4wMDktLjAwNS4wMTQtLjAwNy4wMDUtLjAwMi4wMSAwIC4wMTYtLjAwMk00MzQuNDY2IDQ1Ni4wMTNsLjAxOC0uMDAzdi4wMDNhMS4zNjcgMS4zNjcgMCAwMTEuNTcgMS4xMDRsLjAzLjI3N2MxLjI4MyAxMS4xOTgtNS44NzcgMjEuNzA0LTE2Ljc2MiAyNC41MzVsLS4wMTMuMDAyYy0uMDI4LjAwOS0uMDQzLjAwOS0uMDczLjAxNWExLjM3MiAxLjM3MiAwIDAxLTEuNjEtMS4wOThjLS4wMDMtLjAyMS0uMDAxLS4wNDEtLjAwNC0uMDZsLTMuNjU5LTE5LjQwNGguMDAzbC0uMDAxLS4wMDRhMS4zODUgMS4zODUgMCAwMTEuMDg5LTEuNjE3di0uMDAzbDE5LjM4Mi0zLjc0Yy4wMDUtLjAwMi4wMDktLjAwNi4wMTQtLjAwN2guMDE2TTEyOTguMzQgNjQuMTIzaC4wMTl2LjAwMmExLjM3MyAxLjM3MyAwIDAxMS40MjMgMS4yOTZsLS4wMDYuMjc5Yy0uMTE0IDExLjI4LTguNTMxIDIwLjgwMi0xOS42OTUgMjIuMjMzaC0uMDE0Yy0uMDI5LjAwNS0uMDQ0LjAwMy0uMDc0LjAwNWExLjM3OSAxLjM3OSAwIDAxLTEuNDYzLTEuMjk0YzAtLjAyMS4wMDMtLjA0LjAwMy0uMDZsLTEuMjI3LTE5LjczaC4wMDJ2LS4wMDNhMS4zODIgMS4zODIgMCAwMTEuMjgzLTEuNDY3di0uMDAzbDE5LjcxOS0xLjI1NmMuMDA1IDAgLjAxLS4wMDMuMDE1LS4wMDQuMDA1IDAgLjAxLjAwMy4wMTYuMDAyTTkyLjgxMyAxMDkuMDRsLjAxOS4wMDJ2LjAwM2ExLjM3OSAxLjM3OSAwIDAxMS4yNTEgMS40NjdsLS4wNC4yNzZjLTEuNTEyIDExLjE4NC0xMS4wNSAxOS41Ny0yMi4zMTIgMTkuNTczbC0uMDEzLS4wMDFjLS4wMy4wMDEtLjA0NC0uMDAzLS4wNzQtLjAwNWExLjM4NSAxLjM4NSAwIDAxLTEuMjkyLTEuNDdjLjAwMS0uMDIxLjAwOC0uMDQuMDEtLjA2bDEuMjI3LTE5Ljc0MmguMDAzdi0uMDAzYTEuMzc4IDEuMzc4IDAgMDExLjQ1NS0xLjI5NHYtLjAwM2wxOS43MzUgMS4yNTZjLjAwNiAwIC4wMS0uMDAzLjAxNi0uMDAyLjAwNSAwIC4wMS4wMDMuMDE1LjAwNE0zNDUuMzc3IDY5LjgyOGwuMDE4LjAwNC0uMDAxLjAwM2MuNzMuMTU3IDEuMi44NzMgMS4wNiAxLjYxNGwtLjA3NC4yN2MtMi44ODYgMTAuOTA3LTEzLjM4NSAxOC4wMi0yNC41NTUgMTYuNTk2bC0uMDEzLS4wMDNjLS4wMy0uMDAyLS4wNDQtLjAwOC0uMDc0LS4wMTRhMS4zOSAxLjM5IDAgMDEtMS4wOTktMS42MjJjLjAwNC0uMDIyLjAxMy0uMDQuMDE4LS4wNThsMy42NjQtMTkuNDM4aC4wMDJ2LS4wMDJhMS4zNzQgMS4zNzQgMCAwMTEuNjA1LTEuMXYtLjAwM2wxOS40MTggMy43NDdoLjAxNmwuMDE1LjAwNk02MDAuNzU4IDI1OS42MDJsLjAxOC4wMDYtLjAwMS4wMDNhMS4zODggMS4zODggMCAwMS44NSAxLjczNmwtLjEwNi4yNThjLTQuMjE2IDEwLjQ2Mi0xNS41MSAxNi4xOTUtMjYuNDEgMTMuMzY4bC0uMDEyLS4wMDVjLS4wMy0uMDA2LS4wNDMtLjAxMy0uMDcxLS4wMjNhMS4zOTQgMS4zOTQgMCAwMS0uODg5LTEuNzVjLjAwNy0uMDIuMDE4LS4wMzcuMDI1LS4wNTVsNi4wNDYtMTguODNoLjAwM3YtLjAwMmExLjM3IDEuMzcgMCAwMTEuNzI3LS44OWwuMDAxLS4wMDIgMTguNzkgNi4xNzZjLjAwNS4wMDIuMDEgMCAuMDE1LjAwMi4wMDYuMDAyLjAxLjAwNy4wMTQuMDA4TTU1Ni40NTYgMjg1LjM4NmwuMDE2LjAwOC0uMDAxLjAwMmMuNjY3LjMzNi45NDUgMS4xNDguNjI3IDEuODMybC0uMTM4LjI0MmMtNS40ODIgOS44NTQtMTcuMzkzIDE0LjExOS0yNy44NDggOS45MzdsLS4wMTItLjAwNmMtLjAyOC0uMDEtLjA0LS4wMi0uMDY4LS4wMzJhMS4zOTcgMS4zOTcgMCAwMS0uNjYzLTEuODVjLjAxLS4wMTkuMDIyLS4wMzQuMDMxLS4wNTFsOC4zMzktMTcuOTMuMDAyLjAwMXYtLjAwM2ExLjM2NiAxLjM2NiAwIDAxMS44MjQtLjY2NGwuMDAxLS4wMDMgMTcuODYxIDguNTAzYy4wMDUuMDAzLjAxLjAwMi4wMTYuMDA0LjAwNS4wMDMuMDA4LjAwOC4wMTMuMDFNNDYuOTE3IDQ0MC43MzVsLjAxNS4wMS0uMDAyLjAwMmMuNjIuNDE3Ljc5NCAxLjI1OS4zOTQgMS44OTdsLS4xNjcuMjIzYy02LjY2NSA5LjA5MS0xOS4wMDcgMTEuODI1LTI4Ljg1MyA2LjM1N2wtLjAxMS0uMDA3Yy0uMDI2LS4wMTMtLjAzOC0uMDI0LS4wNjMtLjA0YTEuNCAxLjQgMCAwMS0uNDI3LTEuOTJjLjAxMi0uMDE4LjAyNy0uMDMxLjAzNy0uMDQ3bDEwLjUwNS0xNi43NDhoLjAwMmwuMDAxLS4wMDJhMS4zNjMgMS4zNjMgMCAwMTEuODkxLS40M2wuMDAyLS4wMDMgMTYuNjUgMTAuNjkxYy4wMDQuMDAzLjAxLjAwMy4wMTQuMDA2LjAwNS4wMDMuMDA3LjAwOC4wMTIuMDFNMzAuNzY0IDI3MC45NDRsLjAxNC4wMTEtLjAwMi4wMDNjLjU2Mi40OTIuNjMgMS4zNDguMTU0IDEuOTMybC0uMTk0LjJjLTcuNzQ2IDguMTg1LTIwLjMyOCA5LjM0Ny0yOS40MSAyLjY4MmwtLjAxLS4wMDhjLS4wMjQtLjAxNy0uMDM0LS4wMjktLjA1Ny0uMDQ4YTEuNDAxIDEuNDAxIDAgMDEtLjE4My0xLjk1OGMuMDEzLS4wMTcuMDMtLjAyOC4wNDMtLjA0M2wxMi41MS0xNS4zMDIuMDAyLjAwMi4wMDItLjAwM2ExLjM2MiAxLjM2MiAwIDAxMS45MjktLjE4OWwuMDAyLS4wMDIgMTUuMTc2IDEyLjcwMmMuMDA0LjAwNC4wMS4wMDUuMDE0LjAwOC4wMDQuMDA0LjAwNi4wMS4wMS4wMTNNNDg5LjkzNSA0NTAuNDczbC4wMTIuMDEzLS4wMDIuMDAyYTEuMzk2IDEuMzk2IDAgMDEtLjA5IDEuOTM2bC0uMjE3LjE3NWMtOC43MDcgNy4xNDgtMjEuMzM1IDYuNzIxLTI5LjUxLTEuMDMybC0uMDEtLjAxYy0uMDIyLS4wMi0uMDMtLjAzMy0uMDUtLjA1NWExLjQwMiAxLjQwMiAwIDAxLjA2My0xLjk2NmMuMDE1LS4wMTQuMDMzLS4wMjQuMDQ4LS4wMzdsMTQuMzI1LTEzLjYxLjAwMi4wMDEuMDAyLS4wMDJhMS4zNjEgMS4zNjEgMCAwMTEuOTM3LjA1NGwuMDAyLS4wMDIgMTMuNDY2IDE0LjUxYy4wMDQuMDA0LjAxLjAwNS4wMTMuMDA5LjAwNC4wMDQuMDA1LjAxLjAwOS4wMTRNNzYyLjI2NiAzODcuNjFsLjAxLjAxNS0uMDAyLjAwMmExLjM5NSAxLjM5NSAwIDAxLS4zMzEgMS45MWwtLjIzNy4xNDVjLTkuNTM2IDUuOTk3LTIyLjAxMyAzLjk4Ny0yOS4xNTYtNC43M2wtLjAwOC0uMDExYy0uMDItLjAyMy0uMDI2LS4wMzctLjA0My0uMDYxYTEuNCAxLjQgMCAwMS4zMDgtMS45NDJjLjAxNy0uMDEzLjAzNi0uMDIuMDUyLS4wM2wxNS45MTgtMTEuNzAyLjAwMS4wMDIuMDAyLS4wMDJhMS4zNjIgMS4zNjIgMCAwMTEuOTE2LjI5N2wuMDAyLS4wMDEgMTEuNTUgMTYuMDgzYy4wMDIuMDA0LjAwOC4wMDcuMDEuMDExLjAwNC4wMDQuMDA0LjAxLjAwOC4wMTVNMzk3Ljc4OSA1Ni43MzVsLjAwOC4wMTYtLjAwMi4wMDJhMS4zOTMgMS4zOTMgMCAwMS0uNTY3IDEuODUybC0uMjU0LjExNGMtMTAuMjEzIDQuNzQ3LTIyLjM0NyAxLjE4NC0yOC4zNDktOC4zNTlsLS4wMDYtLjAxMWMtLjAxNy0uMDI1LS4wMjEtLjA0LS4wMzYtLjA2NmExLjM5OSAxLjM5OSAwIDAxLjU0OS0xLjg4N2MuMDE5LS4wMS4wMzgtLjAxNS4wNTUtLjAyNGwxNy4yNjEtOS42LjAwMi4wMDEuMDAyLS4wMDJjLjY2NS0uMzcgMS41LS4xMyAxLjg2NC41MzZsLjAwMy0uMDAxIDkuNDU1IDE3LjQwMmMuMDAyLjAwNS4wMDcuMDA3LjAxLjAxMnMuMDAyLjAxLjAwNS4wMTVNNjAuMTc3IDUwNy4xOTNsLjAwNi4wMTdoLS4wMDNhMS4zOSAxLjM5IDAgMDEtLjc5MyAxLjc2NWwtLjI2Ni4wODJjLTEwLjczIDMuNDItMjIuMzMzLTEuNjQzLTI3LjEwMS0xMS44NjJsLS4wMDUtLjAxMmMtLjAxNC0uMDI3LS4wMTYtLjA0Mi0uMDI3LS4wN2ExLjM5NiAxLjM5NiAwIDAxLjc4LTEuODAyYy4wMi0uMDA4LjA0LS4wMS4wNTctLjAxN2wxOC4zMzItNy4zNDN2LjAwMmwuMDAzLS4wMDFhMS4zNjcgMS4zNjcgMCAwMTEuNzg0Ljc2NmguMDAzbDcuMjE4IDE4LjQ0NmMuMDAyLjAwNS4wMDcuMDA4LjAwOS4wMTMuMDAyLjAwNSAwIC4wMS4wMDMuMDE2TTUxOC40NDcgNTIzLjk3M2wuMDA0LjAxNy0uMDAzLjAwMWExLjM4NiAxLjM4NiAwIDAxLTEuMDA3IDEuNjVsLS4yNzQuMDQ3Yy0xMS4wNzcgMi4wMzQtMjEuOTY1LTQuNDUyLTI1LjQyOS0xNS4xODdsLS4wMDMtLjAxM2MtLjAxLS4wMjgtLjAxMS0uMDQzLS4wMTgtLjA3MmExLjM5MiAxLjM5MiAwIDAxLjk5Ny0xLjY4OGMuMDIxLS4wMDYuMDQxLS4wMDUuMDYtLjAxbDE5LjExLTQuOTY0LjAwMS4wMDIuMDAzLS4wMDFhMS4zNzEgMS4zNzEgMCAwMTEuNjc2Ljk4NWguMDAybDQuODczIDE5LjIwMmMuMDAxLjAwNi4wMDYuMDEuMDA3LjAxNXYuMDE2TTcyNS4xOSAyNjguMTQ0bC4wMDIuMDE4aC0uMDAzYTEuMzgxIDEuMzgxIDAgMDEtMS4yMDQgMS41MDlsLS4yNzguMDEyYy0xMS4yNDcuNjE0LTIxLjI1LTcuMTk2LTIzLjM1Ni0xOC4yOGwtLjAwMS0uMDE0Yy0uMDA3LS4wMjktLjAwNi0uMDQ0LS4wMS0uMDc0YTEuMzg3IDEuMzg3IDAgMDExLjItMS41NDhjLjAyMi0uMDAzLjA0MiAwIC4wNi0uMDAybDE5LjU4NS0yLjUwM3YuMDAzbC4wMDMtLjAwMWExLjM3NiAxLjM3NiAwIDAxMS41NCAxLjE5bC4wMDQtLjAwMSAyLjQ1NCAxOS42NmMwIC4wMDUuMDA0LjAxLjAwNS4wMTUgMCAuMDA2LS4wMDIuMDEgMCAuMDE2TTU5OS4xNSAzMjkuODYxdi4wMThoLS4wMDNhMS4zNzYgMS4zNzYgMCAwMS0xLjM4MSAxLjM0M2wtLjI3OC0uMDIzYy0xMS4yMzQtLjgxNi0yMC4xOS05LjgzLTIwLjkwNy0yMS4wOXYtLjAxM2MtLjAwMy0uMDMgMC0uMDQ0IDAtLjA3NCAwLS43NjQuNjE4LTEuMzgzIDEuMzgyLTEuMzgzLjAyMSAwIC4wNC4wMDUuMDYuMDA2aDE5Ljc0di4wMDJoLjAwM2ExLjM4IDEuMzggMCAwMTEuMzggMS4zNzVoLjAwNHYxOS44MDhsLjAwMy4wMTVjMCAuMDA2LS4wMDMuMDEtLjAwMy4wMTZNMTE2Mi4xNjEgNjcuNzNsLS4wMDIuMDE5aC0uMDAzYTEuMzcgMS4zNyAwIDAxLTEuNTM1IDEuMTU2bC0uMjcyLS4wNThjLTExLjAzMi0yLjIzMi0xOC43OS0xMi4zMDEtMTguMTA4LTIzLjU1MmwuMDAyLS4wMTRjMC0uMDMuMDA1LS4wNDQuMDEtLjA3NGExLjM3NSAxLjM3NSAwIDAxMS41NC0xLjE5NWMuMDIxLjAwMi4wNC4wMS4wNTkuMDEzbDE5LjU2IDIuNXYuMDAzaC4wMDNjLjc1NC4wOTYgMS4yOS43ODMgMS4xOTggMS41MzdoLjAwM2wtMi40NTEgMTkuNjM1YzAgLjAwNS4wMDIuMDEuMDAxLjAxNiAwIC4wMDUtLjAwNC4wMS0uMDA1LjAxNU05MTkuODg2IDEwOC4wMzlsLS4wMDUuMDE3aC0uMDAzYTEuMzY0IDEuMzY0IDAgMDEtMS42NjQuOTUybC0uMjYyLS4wOTJjLTEwLjY1Mi0zLjYwOS0xNy4wOTItMTQuNTc0LTE1LjAyMS0yNS42NDRsLjAwMy0uMDEyYy4wMDQtLjAzLjAxMS0uMDQ0LjAxOC0uMDczYTEuMzcgMS4zNyAwIDAxMS42NzUtLjk5Yy4wMi4wMDUuMDM4LjAxNS4wNTcuMDJsMTkuMDY4IDQuOTU0di4wMDJoLjAwM2MuNzM1LjE5MiAxLjE4MS45NDEuOTk3IDEuNjc3aC4wMDNsLTQuODYyIDE5LjE1OXYuMDE2Yy0uMDAyLjAwNS0uMDA2LjAwOS0uMDA3LjAxNE0xMzcyLjc0NiA0NjIuODEybC0uMDA2LjAxNmgtLjAwM2ExLjM1OSAxLjM1OSAwIDAxLTEuNzY3LjczNGwtLjI0OC0uMTI1Yy0xMC4xMDUtNC45MjQtMTUuMTIzLTE2LjYxMy0xMS42OTctMjcuMzNsLjAwNS0uMDEzYy4wMDgtLjAyOS4wMTYtLjA0MS4wMjctLjA3YTEuMzY1IDEuMzY1IDAgMDExLjc4Mi0uNzdjLjAyLjAwOC4wMzYuMDIuMDU0LjAyN2wxOC4yNzUgNy4zMjF2LjAwM2guMDAzYTEuMzkgMS4zOSAwIDAxLjc3OSAxLjc4OWguMDAzbC03LjE5NSAxOC4zODhjLS4wMDIuMDA1LS4wMDEuMDExLS4wMDMuMDE2LS4wMDIuMDA1LS4wMDcuMDA5LS4wMDkuMDE0TTE4OS42NTcgOTYuMjExbC0uMDA4LjAxNi0uMDAzLS4wMDJjLS4zNy42NDctMS4xODYuODctMS44NDIuNTA2bC0uMjMtLjE1NGMtOS40LTYuMTU4LTEyLjkxNi0xOC4zODctOC4xODctMjguNTg3bC4wMDYtLjAxMmMuMDEyLS4wMjcuMDIyLS4wMzkuMDM2LS4wNjVhMS4zNiAxLjM2IDAgMDExLjg2MS0uNTRjLjAyLjAxLjAzMy4wMjQuMDUuMDM0bDE3LjE5NyA5LjU2NS0uMDAxLjAwMmguMDAzYy42NjMuMzcuOTA5IDEuMjA3LjU1IDEuODc0bC4wMDIuMDAxLTkuNDE5IDE3LjMzNS0uMDA0LjAxNWMtLjAwMy4wMDQtLjAwOC4wMDctLjAxLjAxMk01OS45MjggNDA1LjM4bC0uMDEuMDE1LS4wMDMtLjAwMWExLjM1MiAxLjM1MiAwIDAxLTEuODkuMjdsLS4yMDktLjE4MmMtOC41NDctNy4yOTItMTAuNTA3LTE5Ljg2Ni00LjU0Ni0yOS4zOTJsLjAwOC0uMDFjLjAxNC0uMDI2LjAyNi0uMDM3LjA0My0uMDYxYTEuMzU4IDEuMzU4IDAgMDExLjkxMy0uMzAyYy4wMTcuMDEzLjAzLjAyOC4wNDUuMDRMNzEuMTMgMzg3LjQxbC0uMDAxLjAwMmguMDAyYy42MTEuNDUuNzUgMS4zMTIuMzEyIDEuOTI4bC4wMDIuMDAyLTExLjUgMTYuMDEzLS4wMDYuMDE1LS4wMTEuMDFNMzA0Ljg3IDQ3MS45MjRsLS4wMTMuMDEzLS4wMDItLjAwMmExLjM1IDEuMzUgMCAwMS0xLjkwNy4wM2wtLjE4NS0uMjA2Yy03LjU2NS04LjMwOC03LjkzNi0yMS4wMy0uODM0LTI5LjczMmwuMDEtLjAxYy4wMTctLjAyMy4wMy0uMDMyLjA1LS4wNTRhMS4zNTcgMS4zNTcgMCAwMTEuOTM0LS4wNmMuMDE2LjAxNS4wMjYuMDMzLjA0LjA0NmwxNC4yNjMgMTMuNTUyLS4wMDIuMDAyLjAwMy4wMDFjLjU1LjUyMy41OCAxLjM5NS4wNjcgMS45NTFsLjAwMi4wMDItMTMuNDA1IDE0LjQ0NGMtLjAwNC4wMDQtLjAwNS4wMS0uMDA4LjAxMy0uMDA0LjAwNC0uMDEuMDA2LS4wMTMuMDFNOTA2LjQ1NCAxNjAuMzM1bC0uMDE0LjAxMi0uMDAxLS4wMDJhMS4zNTEgMS4zNTEgMCAwMS0xLjg5Ny0uMjFsLS4xNTctLjIyOGMtNi40NjctOS4xOTItNS4yNDQtMjEuODYgMi44OTEtMjkuNjAybC4wMS0uMDA4Yy4wMjEtLjAyMS4wMzUtLjAyOC4wNTgtLjA0OGExLjM1NyAxLjM1NyAwIDAxMS45MjYuMTg0Yy4wMTQuMDE3LjAyMi4wMzUuMDM0LjA1bDEyLjQ1NyAxNS4yMzYtLjAwMi4wMDIuMDAzLjAwMmMuNDguNTg3LjQwMSAxLjQ1Ny0uMTc3IDEuOTQ0bC4wMDIuMDAyLTE1LjEwOSAxMi42NDZjLS4wMDQuMDA0LS4wMDYuMDEtLjAxLjAxM2wtLjAxNC4wMDdNMTE2Ny45MzYgMzAuNjgxbC0uMDE1LjAxLS4wMDItLjAwMmExLjM1MyAxLjM1MyAwIDAxLTEuODU2LS40NDZsLS4xMjgtLjI0N2MtNS4yNzEtOS45MzItMi40NzMtMjIuMzQ2IDYuNTcyLTI5LjAwM2wuMDEtLjAwN2MuMDI0LS4wMTkuMDM4LS4wMjQuMDYzLS4wNGExLjM1OSAxLjM1OSAwIDAxMS44OS40MjRjLjAxMi4wMTguMDE3LjAzOC4wMjcuMDU0bDEwLjQ2MyAxNi42ODItLjAwMi4wMDEuMDAyLjAwMmExLjM5MyAxLjM5MyAwIDAxLS40MTggMS45MDdsLjAwMS4wMDItMTYuNTggMTAuNjQ3Yy0uMDA1LjAwMy0uMDA4LjAwOC0uMDEyLjAxLS4wMDUuMDA0LS4wMS4wMDQtLjAxNS4wMDZNMTI1My4zOCA1MzcuNjQzbC0uMDE2LjAwOC0uMDAxLS4wMDNhMS4zNTcgMS4zNTcgMCAwMS0xLjc4OC0uNjc2bC0uMDk2LS4yNjFjLTMuOTk3LTEwLjUxOS4zMzItMjIuNDgyIDEwLjE0Ny0yNy45NDdsLjAxMi0uMDA2Yy4wMjUtLjAxNi4wNC0uMDIuMDY3LS4wMzJhMS4zNjIgMS4zNjIgMCAwMTEuODI0LjY2Yy4wMS4wMTkuMDEyLjAzOS4wMi4wNTdsOC4zMSAxNy44NjgtLjAwMi4wMDEuMDAyLjAwM2MuMzIuNjg5LjAyOCAxLjUxMS0uNjU0IDEuODM4bC4wMDEuMDAzLTE3Ljc5NyA4LjQ3M2MtLjAwNS4wMDMtLjAwOC4wMDgtLjAxMy4wMWwtLjAxNS4wMDRNNzU2LjQ5IDE5OC4yNTRsLS4wMTcuMDA2LS4wMDEtLjAwM2ExLjM2MSAxLjM2MSAwIDAxLTEuNjkzLS44OTdsLS4wNjMtLjI3MWMtMi42Ni0xMC45NDIgMy4xMy0yMi4yNjYgMTMuNTYyLTI2LjQ1bC4wMTMtLjAwNGMuMDI3LS4wMTIuMDQyLS4wMTQuMDctLjAyM2ExLjM2NyAxLjM2NyAwIDAxMS43My44ODVjLjAwNy4wMi4wMDguMDQuMDEzLjA2bDYuMDMxIDE4Ljc4aC0uMDAybC4wMDEuMDAzYTEuMzg4IDEuMzg4IDAgMDEtLjg3OCAxLjc0MnYuMDAzbC0xOC43MzcgNi4xNmMtLjAwNS4wMDEtLjAwOC4wMDUtLjAxMy4wMDctLjAwNi4wMDItLjAxMSAwLS4wMTYuMDAyTTU5OC4zIDQ2Ni44OTJsLS4wMTkuMDA0di0uMDAzYTEuMzY3IDEuMzY3IDAgMDEtMS41Ny0xLjEwNGwtLjAzLS4yNzhjLTEuMjgyLTExLjE5NyA1Ljg3OC0yMS43MDMgMTYuNzYyLTI0LjUzNGwuMDEzLS4wMDNjLjAyOS0uMDA4LjA0NC0uMDA4LjA3My0uMDE0YTEuMzcyIDEuMzcyIDAgMDExLjYxIDEuMDk3Yy4wMDQuMDIyLjAwMi4wNDIuMDA1LjA2bDMuNjU4IDE5LjQwNWgtLjAwMnYuMDAzYTEuMzg1IDEuMzg1IDAgMDEtMS4wODkgMS42MThsLjAwMS4wMDMtMTkuMzgyIDMuNzQtLjAxNS4wMDZoLS4wMTZNMTQzNC45NzcgNDUzLjc4OGgtLjAxOHYtLjAwMmExLjM3MyAxLjM3MyAwIDAxLTEuNDIzLTEuMjk2bC4wMDYtLjI3OWMuMTE0LTExLjI4IDguNTMxLTIwLjgwMiAxOS42OTUtMjIuMjMybC4wMTQtLjAwMWMuMDI5LS4wMDUuMDQ0LS4wMDMuMDc0LS4wMDUuNzYtLjA0OCAxLjQxNS41MyAxLjQ2MyAxLjI5NC4wMDEuMDIxLS4wMDMuMDQxLS4wMDMuMDZsMS4yMjcgMTkuNzNoLS4wMDJ2LjAwM2ExLjM4MiAxLjM4MiAwIDAxLTEuMjgyIDEuNDY4di4wMDNsLTE5LjcyIDEuMjU1Yy0uMDA1IDAtLjAxLjAwMy0uMDE1LjAwNC0uMDA1IDAtLjAxLS4wMDMtLjAxNi0uMDAyTTg1NS42NzcgMjI5LjcxbC0uMDE4LS4wMDJ2LS4wMDNhMS4zNzkgMS4zNzkgMCAwMS0xLjI1Mi0xLjQ2N2wuMDQtLjI3NmMxLjUxMi0xMS4xODQgMTEuMDUtMTkuNTcgMjIuMzEyLTE5LjU3M2wuMDEzLjAwMWMuMDMtLjAwMS4wNDUuMDAzLjA3NS4wMDUuNzYuMDQ4IDEuMzM5LjcwNiAxLjI5MSAxLjQ3LS4wMDEuMDIxLS4wMDguMDQtLjAxLjA2bC0xLjIyNyAxOS43NDJoLS4wMDJ2LjAwM2ExLjM3OCAxLjM3OCAwIDAxLTEuNDU2IDEuMjk0di4wMDNsLTE5LjczNS0xLjI1NmMtLjAwNSAwLS4wMS4wMDMtLjAxNi4wMDItLjAwNSAwLS4wMS0uMDAzLS4wMTUtLjAwNE05OTUuODk2IDE0My45NmwtLjAxOC0uMDAzdi0uMDAzYTEuMzg0IDEuMzg0IDAgMDEtMS4wNi0xLjYxNGwuMDc1LS4yN2MyLjg4NS0xMC45MDcgMTMuMzg0LTE4LjAyIDI0LjU1NS0xNi41OTZsLjAxMy4wMDNjLjAzLjAwMi4wNDQuMDA4LjA3My4wMTRhMS4zOSAxLjM5IDAgMDExLjEgMS42MjJjLS4wMDUuMDIxLS4wMTQuMDQtLjAxOC4wNThsLTMuNjY0IDE5LjQzN2gtLjAwM3YuMDAzYTEuMzc0IDEuMzc0IDAgMDEtMS42MDQgMS4xdi4wMDNsLTE5LjQxOC0zLjc0OGgtLjAxNmMtLjAwNiAwLS4wMS0uMDA0LS4wMTUtLjAwNk00MTguNDYzIDE2NC45NjRsLS4wMTctLjAwNXYtLjAwM2ExLjM4OCAxLjM4OCAwIDAxLS44NS0xLjczN2wuMTA3LS4yNTdjNC4yMTUtMTAuNDYyIDE1LjUwOS0xNi4xOTUgMjYuNDA5LTEzLjM2OGwuMDEzLjAwNGMuMDI5LjAwNy4wNDIuMDE0LjA3LjAyNGExLjM5NCAxLjM5NCAwIDAxLjg4OSAxLjc0OWMtLjAwNy4wMi0uMDE4LjAzNy0uMDI0LjA1NmwtNi4wNDcgMTguODMtLjAwMi0uMDAxdi4wMDNhMS4zNyAxLjM3IDAgMDEtMS43MjguODlsLS4wMDEuMDAyLTE4Ljc5LTYuMTc3Yy0uMDA1LS4wMDItLjAxIDAtLjAxNS0uMDAybC0uMDE0LS4wMDhNMTQ3Ny4wNzggMzI3LjM3NWwtLjAxNy0uMDA3LjAwMS0uMDAzYTEuMzkyIDEuMzkyIDAgMDEtLjYyNy0xLjgzMWwuMTM4LS4yNDNjNS40ODItOS44NTQgMTcuMzkzLTE0LjExOSAyNy44NDgtOS45MzZsLjAxMi4wMDVjLjAyOC4wMS4wNC4wMi4wNjguMDMyLjY4OS4zMjguOTg2IDEuMTU1LjY2MyAxLjg1LS4wMS4wMTktLjAyMi4wMzQtLjAzMS4wNTFsLTguMzM5IDE3LjkzaC0uMDAydi4wMDJhMS4zNjYgMS4zNjYgMCAwMS0xLjgyNC42NjVsLS4wMDEuMDAyLTE3Ljg2MS04LjUwM2MtLjAwNS0uMDAzLS4wMS0uMDAyLS4wMTYtLjAwNGwtLjAxMi0uMDFNMTA4NS4xNzMgMzY0LjczN2wtLjAxNS0uMDEuMDAxLS4wMDJhMS4zOTQgMS4zOTQgMCAwMS0uMzkzLTEuODk3bC4xNjctLjIyM2M2LjY2NC05LjA5MSAxOS4wMDctMTEuODI1IDI4Ljg1My02LjM1N2wuMDEuMDA3Yy4wMjcuMDE0LjAzOC4wMjQuMDY0LjA0YTEuNCAxLjQgMCAwMS40MjYgMS45MmMtLjAxMS4wMTgtLjAyNi4wMzEtLjAzNy4wNDdsLTEwLjUwNCAxNi43NDktLjAwMi0uMDAyLS4wMDIuMDAzYTEuMzYzIDEuMzYzIDAgMDEtMS44OS40M2wtLjAwMi4wMDMtMTYuNjUtMTAuNjljLS4wMDQtLjAwNC0uMDEtLjAwNC0uMDE0LS4wMDctLjAwNS0uMDAzLS4wMDctLjAwOC0uMDEyLS4wMU02NDguMzQ2IDQyLjIxMmwtLjAxMy0uMDEyLjAwMi0uMDAyYTEuMzk2IDEuMzk2IDAgMDEtLjE1NC0xLjkzMmwuMTk0LS4yYzcuNzQ1LTguMTg2IDIwLjMyOC05LjM0OCAyOS40MDktMi42ODNsLjAxLjAwOWMuMDI1LjAxNi4wMzQuMDI4LjA1Ny4wNDguNTg2LjQ5LjY2OCAxLjM2NS4xODQgMS45NTgtLjAxNC4wMTctLjAzLjAyOC0uMDQzLjA0M2wtMTIuNTExIDE1LjMwMS0uMDAyLS4wMDEtLjAwMS4wMDJhMS4zNjIgMS4zNjIgMCAwMS0xLjkzLjE5bC0uMDAxLjAwMi0xNS4xNzYtMTIuNzAzYy0uMDA1LS4wMDMtLjAxLS4wMDQtLjAxNC0uMDA4LS4wMDUtLjAwMy0uMDA2LS4wMDktLjAxLS4wMTJNMzcyLjc3NSA0NjAuMzg5bC0uMDEyLS4wMTQuMDAyLS4wMDJhMS4zOTYgMS4zOTYgMCAwMS4wOS0xLjkzNmwuMjE3LS4xNzVjOC43MDgtNy4xNDggMjEuMzM1LTYuNzIgMjkuNTEgMS4wMzJsLjAxLjAxYy4wMjIuMDIuMDMuMDMzLjA1LjA1NS41Mi41Ni40OTIgMS40MzktLjA2MyAxLjk2Ni0uMDE1LjAxNS0uMDMzLjAyNC0uMDQ3LjAzN2wtMTQuMzI2IDEzLjYxaC0uMDAybC0uMDAxLjAwMmMtLjU1My41MjQtMS40Mi41LTEuOTM4LS4wNTVsLS4wMDIuMDAyLTEzLjQ2Ni0xNC41MWMtLjAwNC0uMDAzLS4wMS0uMDA1LS4wMTMtLjAwOS0uMDA0LS4wMDQtLjAwNS0uMDEtLjAwOS0uMDEzTTExMTQuNzU3IDUwNi42OWwtLjAxMS0uMDE1LjAwMi0uMDAyYTEuMzk1IDEuMzk1IDAgMDEuMzMxLTEuOTFsLjIzOC0uMTQ1YzkuNTM1LTUuOTk3IDIyLjAxMi0zLjk4NyAyOS4xNTUgNC43M2wuMDA4LjAxMWMuMDIuMDIzLjAyNi4wMzcuMDQ0LjA2MWExLjQgMS40IDAgMDEtLjMwOSAxLjk0MmMtLjAxNy4wMTMtLjAzNi4wMi0uMDUyLjAzbC0xNS45MTggMTEuNzAyLS4wMDEtLjAwMi0uMDAyLjAwMmExLjM2MiAxLjM2MiAwIDAxLTEuOTE2LS4yOTdsLS4wMDIuMDAxLTExLjU1LTE2LjA4M2MtLjAwMi0uMDA0LS4wMDgtLjAwNy0uMDEtLjAxMS0uMDA0LS4wMDQtLjAwNC0uMDEtLjAwNy0uMDE1TTg2MC43MTQgMjg1LjAyNmwtLjAwOS0uMDE2LjAwMy0uMDAyYTEuMzkzIDEuMzkzIDAgMDEuNTY2LTEuODUxbC4yNTQtLjExNWMxMC4yMTMtNC43NDcgMjIuMzQ4LTEuMTg0IDI4LjM0OSA4LjM1OWwuMDA2LjAxMWMuMDE3LjAyNS4wMjIuMDQuMDM2LjA2Ni4zNjUuNjcxLjEyIDEuNTE1LS41NDggMS44ODctLjAyLjAxLS4wMzkuMDE1LS4wNTYuMDI0bC0xNy4yNiA5LjYtLjAwMi0uMDAxLS4wMDIuMDAyYy0uNjY2LjM3LTEuNS4xMy0xLjg2NS0uNTM2bC0uMDAyLjAwMS05LjQ1NS0xNy40MDJjLS4wMDMtLjAwNS0uMDA4LS4wMDctLjAxLS4wMTItLjAwMy0uMDA1LS4wMDMtLjAxLS4wMDUtLjAxNU0yODMuMzM4IDE0NC43MTNsLS4wMDYtLjAxNy4wMDMtLjAwMWExLjM5IDEuMzkgMCAwMS43OTMtMS43NjVsLjI2Ni0uMDgyYzEwLjczLTMuNDE5IDIyLjMzMiAxLjY0NCAyNy4xMDEgMTEuODYzbC4wMDUuMDEyYy4wMTQuMDI2LjAxNi4wNDIuMDI3LjA3YTEuMzk2IDEuMzk2IDAgMDEtLjc4IDEuODAxYy0uMDIuMDA5LS4wNC4wMS0uMDU4LjAxN2wtMTguMzMxIDcuMzQzdi0uMDAybC0uMDA0LjAwMmExLjM2NyAxLjM2NyAwIDAxLTEuNzgzLS43NjdsLS4wMDMuMDAyLTcuMjE4LTE4LjQ0N2MtLjAwMi0uMDA1LS4wMDctLjAwOC0uMDA5LS4wMTMtLjAwMi0uMDA2IDAtLjAxMS0uMDAzLS4wMTZNNzIxLjk5NyAzMTEuNjFsLS4wMDUtLjAxN2guMDAzYTEuMzg2IDEuMzg2IDAgMDExLjAwNy0xLjY1bC4yNzQtLjA0OGMxMS4wNzctMi4wMzQgMjEuOTY1IDQuNDUyIDI1LjQzIDE1LjE4N2wuMDAzLjAxM2MuMDEuMDI4LjAxLjA0My4wMTguMDczYTEuMzkyIDEuMzkyIDAgMDEtLjk5OCAxLjY4OGMtLjAyLjAwNS0uMDQuMDA1LS4wNi4wMWwtMTkuMTEgNC45NjN2LS4wMDJsLS4wMDMuMDAxYTEuMzcxIDEuMzcxIDAgMDEtMS42NzYtLjk4NWgtLjAwM2wtNC44NzMtMTkuMjAyYy0uMDAxLS4wMDUtLjAwNS0uMDEtLjAwNi0uMDE0LS4wMDItLjAwNiAwLS4wMTEtLjAwMS0uMDE2TTI1MS44OTQgMjY2LjMyOGwtLjAwMy0uMDE4aC4wMDNhMS4zODEgMS4zODEgMCAwMTEuMjA0LTEuNTA4bC4yNzktLjAxM2MxMS4yNDYtLjYxNCAyMS4yNDkgNy4xOTcgMjMuMzU1IDE4LjI4MWwuMDAyLjAxM2MuMDA2LjAzLjAwNS4wNDUuMDEuMDc1YTEuMzg3IDEuMzg3IDAgMDEtMS4yIDEuNTQ3Yy0uMDIyLjAwMy0uMDQyIDAtLjA2MS4wMDJsLTE5LjU4NCAyLjUwM3YtLjAwM2wtLjAwMy4wMDFhMS4zNzYgMS4zNzYgMCAwMS0xLjU0LTEuMTlsLS4wMDQuMDAxLTIuNDU0LTE5LjY2Yy0uMDAxLS4wMDUtLjAwNS0uMDEtLjAwNS0uMDE1di0uMDE2TTU0LjM3NyA1MjAuNzc4di0uMDE4aC4wMDNhMS4zNzYgMS4zNzYgMCAwMTEuMzgyLTEuMzQzbC4yNzcuMDIzYzExLjIzNC44MTYgMjAuMTkgOS44MyAyMC45MDcgMjEuMDl2LjAxMmMuMDA0LjAzIDAgLjA0NSAwIC4wNzUgMCAuNzY0LS42MTcgMS4zODMtMS4zODEgMS4zODMtLjAyMiAwLS4wNDEtLjAwNS0uMDYtLjAwNmgtMTkuNzR2LS4wMDJoLS4wMDNhMS4zOCAxLjM4IDAgMDEtMS4zODItMS4zNzVoLS4wMDNWNTIwLjgxYzAtLjAwNS0uMDAzLS4wMS0uMDAzLS4wMTZsLjAwMy0uMDE1Ii8+PC9nPjwvc3ZnPg==);
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgb(255, 255, 255) 100%), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU1NSIgaGVpZ2h0PSI1NDIiIHZpZXdCb3g9IjAgMCAxNTU1IDU0MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjQjVFREQyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMjc5LjIwNCAxMDMuOTAzbC4wMDItLjAxOGguMDAzYTEuMzcgMS4zNyAwIDAxMS41MzUtMS4xNTZsLjI3Mi4wNThjMTEuMDMxIDIuMjMyIDE4Ljc5IDEyLjMgMTguMTA4IDIzLjU1MmwtLjAwMi4wMTNjMCAuMDMtLjAwNi4wNDQtLjAxLjA3NGExLjM3NSAxLjM3NSAwIDAxLTEuNTQgMS4xOTZjLS4wMjEtLjAwMy0uMDQtLjAxLS4wNTktLjAxNGwtMTkuNTYtMi41di0uMDAyaC0uMDAzYTEuMzg0IDEuMzg0IDAgMDEtMS4xOTktMS41MzhoLS4wMDNsMi40NTItMTkuNjM0YzAtLjAwNi0uMDAyLS4wMS0uMDAxLS4wMTYgMC0uMDA2LjAwNC0uMDEuMDA1LS4wMTVNNDEzLjg2MyA0OTguN2wuMDA0LS4wMTguMDAzLjAwMWMuMi0uNzE5LjkzNy0xLjE0IDEuNjY0LS45NTJsLjI2Mi4wOTJjMTAuNjUzIDMuNjA4IDE3LjA5MiAxNC41NzQgMTUuMDIxIDI1LjY0NGwtLjAwMy4wMTJjLS4wMDQuMDMtLjAxLjA0NC0uMDE4LjA3M2ExLjM3IDEuMzcgMCAwMS0xLjY3NS45OWMtLjAyLS4wMDUtLjAzOC0uMDE1LS4wNTYtLjAybC0xOS4wNy00Ljk1NC4wMDEtLjAwM2gtLjAwM2ExLjM4NyAxLjM4NyAwIDAxLS45OTctMS42NzZoLS4wMDNsNC44NjItMTkuMTU5di0uMDE2bC4wMDgtLjAxNE04MzkuODcyIDQ3NS4xNWwuMDA2LS4wMTdoLjAwM2ExLjM1OSAxLjM1OSAwIDAxMS43NjctLjczM2wuMjQ4LjEyNGMxMC4xMDUgNC45MjQgMTUuMTIzIDE2LjYxMyAxMS42OTcgMjcuMzNsLS4wMDUuMDEzYy0uMDA4LjAyOS0uMDE2LjA0Mi0uMDI3LjA3YTEuMzY1IDEuMzY1IDAgMDEtMS43ODIuNzdjLS4wMi0uMDA3LS4wMzYtLjAyLS4wNTQtLjAyN2wtMTguMjc1LTcuMzIxdi0uMDAybC0uMDAzLS4wMDFhMS4zOSAxLjM5IDAgMDEtLjc4LTEuNzg5aC0uMDAybDcuMTk1LTE4LjM4OGMuMDAyLS4wMDUuMDAxLS4wMTEuMDAzLS4wMTYuMDAyLS4wMDUuMDA3LS4wMDguMDA5LS4wMTNNOTE2Ljg0OSAyNDEuMDMzbC4wMDgtLjAxNS4wMDMuMDAxYTEuMzU1IDEuMzU1IDAgMDExLjg0Mi0uNTA2bC4yMy4xNTVjOS40IDYuMTU4IDEyLjkxNiAxOC4zODYgOC4xODcgMjguNTg3bC0uMDA2LjAxMWMtLjAxMi4wMjgtLjAyMS4wNC0uMDM2LjA2NmExLjM2IDEuMzYgMCAwMS0xLjg2MS41NGMtLjAyLS4wMS0uMDMzLS4wMjQtLjA1LS4wMzRsLTE3LjE5Ny05LjU2NS4wMDItLjAwM2gtLjAwM2ExLjM5MiAxLjM5MiAwIDAxLS41NS0xLjg3M2wtLjAwMy0uMDAyIDkuNDE5LTE3LjMzNGMuMDAyLS4wMDUuMDAyLS4wMS4wMDUtLjAxNS4wMDItLjAwNS4wMDctLjAwOC4wMS0uMDEzTTQ0MS42MDMgNjguODdsLjAxLS4wMTUuMDAzLjAwMWExLjM1MiAxLjM1MiAwIDAxMS44ODktLjI3bC4yMS4xODJjOC41NDcgNy4yOTIgMTAuNTA2IDE5Ljg2NiA0LjU0NiAyOS4zOTJsLS4wMDguMDFjLS4wMTUuMDI2LS4wMjYuMDM3LS4wNDMuMDYxYTEuMzU4IDEuMzU4IDAgMDEtMS45MTMuMzAyYy0uMDE3LS4wMTMtLjAzLS4wMjgtLjA0NS0uMDRMNDMwLjQwMSA4Ni44NGwuMDAxLS4wMDJoLS4wMDNhMS4zOTMgMS4zOTMgMCAwMS0uMzEtMS45MjhsLS4wMDMtLjAwMiAxMS40OTktMTYuMDEzYy4wMDMtLjAwNS4wMDMtLjAxLjAwNy0uMDE1bC4wMTEtLjAxTTE1NDYuNTY5IDQ2OS4wNDhsLjAxMi0uMDEzLjAwMi4wMDJhMS4zNSAxLjM1IDAgMDExLjkwNy0uMDNsLjE4NS4yMDdjNy41NjUgOC4zMDcgNy45MzYgMjEuMDI5LjgzNCAyOS43MzFsLS4wMDkuMDFjLS4wMTguMDIzLS4wMy4wMzItLjA1LjA1NGExLjM1NyAxLjM1NyAwIDAxLTEuOTM1LjA2Yy0uMDE1LS4wMTUtLjAyNi0uMDMyLS4wNC0uMDQ2bC0xNC4yNjItMTMuNTUyLjAwMS0uMDAxLS4wMDItLjAwMmExLjM5NCAxLjM5NCAwIDAxLS4wNjgtMS45NWwtLjAwMi0uMDAzIDEzLjQwNi0xNC40NDRjLjAwMy0uMDA0LjAwNC0uMDEuMDA4LS4wMTMuMDA0LS4wMDQuMDEtLjAwNi4wMTMtLjAxTTEyNzAuMDQ2IDQ1LjkyNmwuMDE0LS4wMTIuMDAxLjAwM2ExLjM1MSAxLjM1MSAwIDAxMS44OTYuMjA4bC4xNTguMjNjNi40NjcgOS4xOTEgNS4yNDQgMjEuODU5LTIuODkyIDI5LjZsLS4wMS4wMWMtLjAyLjAyLS4wMzQuMDI4LS4wNTcuMDQ3YTEuMzU3IDEuMzU3IDAgMDEtMS45MjctLjE4NGMtLjAxMy0uMDE3LS4wMjEtLjAzNS0uMDMzLS4wNWwtMTIuNDU3LTE1LjIzNi4wMDItLjAwMi0uMDAzLS4wMDJhMS4zOTQgMS4zOTQgMCAwMS4xNzctMS45NDRsLS4wMDItLjAwMiAxNS4xMDktMTIuNjQ2Yy4wMDQtLjAwNC4wMDYtLjAxLjAxLS4wMTNsLjAxNC0uMDA3TTM4NC4wMjUgMzQxLjE5bC4wMTUtLjAwOS4wMDEuMDAzYTEuMzUzIDEuMzUzIDAgMDExLjg1Ny40NDVsLjEyOC4yNDdjNS4yNzEgOS45MzMgMi40NzMgMjIuMzQ2LTYuNTcyIDI5LjAwNGwtLjAxMS4wMDdjLS4wMjMuMDE4LS4wMzcuMDI0LS4wNjMuMDQtLjYzOS40MS0xLjQ4NS4yMi0xLjg5LS40MjUtLjAxMS0uMDE4LS4wMTctLjAzNy0uMDI3LS4wNTRsLTEwLjQ2Mi0xNi42ODIuMDAyLS4wMDEtLjAwMy0uMDAyYTEuMzkzIDEuMzkzIDAgMDEuNDItMS45MDdsLS4wMDItLjAwMiAxNi41OC0xMC42NDZjLjAwNS0uMDAzLjAwNy0uMDA4LjAxMi0uMDExLjAwNC0uMDAzLjAxLS4wMDMuMDE1LS4wMDZNMTMxMS4zODcgMzUyLjE0bC4wMTctLjAwN3YuMDAyYTEuMzU3IDEuMzU3IDAgMDExLjc4OS42NzZsLjA5Ni4yNjJjMy45OTYgMTAuNTE4LS4zMzIgMjIuNDgxLTEwLjE0NyAyNy45NDdsLS4wMTIuMDA1Yy0uMDI1LjAxNi0uMDQuMDItLjA2Ny4wMzJhMS4zNjIgMS4zNjIgMCAwMS0xLjgyNC0uNjU5Yy0uMDEtLjAyLS4wMTMtLjA0LS4wMi0uMDU3bC04LjMxLTE3Ljg2OS4wMDItLjAwMS0uMDAyLS4wMDJhMS4zOTEgMS4zOTEgMCAwMS42NTQtMS44NGwtLjAwMS0uMDAyIDE3Ljc5Ny04LjQ3M2MuMDA1LS4wMDIuMDA4LS4wMDcuMDEzLS4wMS4wMDUtLjAwMi4wMS0uMDAxLjAxNS0uMDA0TTI1Ni43MTIgNDE3LjUxOGwuMDE3LS4wMDZ2LjAwM2ExLjM2MSAxLjM2MSAwIDAxMS42OTMuODk3bC4wNjMuMjcxYzIuNjYgMTAuOTQzLTMuMTMgMjIuMjY3LTEzLjU2MSAyNi40NWwtLjAxMy4wMDRjLS4wMjcuMDEyLS4wNDIuMDE0LS4wNy4wMjNhMS4zNjcgMS4zNjcgMCAwMS0xLjczMS0uODg1Yy0uMDA3LS4wMi0uMDA3LS4wNC0uMDEzLS4wNTlsLTYuMDMtMTguNzguMDAyLS4wMDEtLjAwMi0uMDAzYTEuMzg5IDEuMzg5IDAgMDEuODc5LTEuNzQybC0uMDAxLS4wMDMgMTguNzM3LTYuMTZjLjAwNSAwIC4wMDktLjAwNS4wMTQtLjAwNy4wMDUtLjAwMi4wMSAwIC4wMTYtLjAwMk00MzQuNDY2IDQ1Ni4wMTNsLjAxOC0uMDAzdi4wMDNhMS4zNjcgMS4zNjcgMCAwMTEuNTcgMS4xMDRsLjAzLjI3N2MxLjI4MyAxMS4xOTgtNS44NzcgMjEuNzA0LTE2Ljc2MiAyNC41MzVsLS4wMTMuMDAyYy0uMDI4LjAwOS0uMDQzLjAwOS0uMDczLjAxNWExLjM3MiAxLjM3MiAwIDAxLTEuNjEtMS4wOThjLS4wMDMtLjAyMS0uMDAxLS4wNDEtLjAwNC0uMDZsLTMuNjU5LTE5LjQwNGguMDAzbC0uMDAxLS4wMDRhMS4zODUgMS4zODUgMCAwMTEuMDg5LTEuNjE3di0uMDAzbDE5LjM4Mi0zLjc0Yy4wMDUtLjAwMi4wMDktLjAwNi4wMTQtLjAwN2guMDE2TTEyOTguMzQgNjQuMTIzaC4wMTl2LjAwMmExLjM3MyAxLjM3MyAwIDAxMS40MjMgMS4yOTZsLS4wMDYuMjc5Yy0uMTE0IDExLjI4LTguNTMxIDIwLjgwMi0xOS42OTUgMjIuMjMzaC0uMDE0Yy0uMDI5LjAwNS0uMDQ0LjAwMy0uMDc0LjAwNWExLjM3OSAxLjM3OSAwIDAxLTEuNDYzLTEuMjk0YzAtLjAyMS4wMDMtLjA0LjAwMy0uMDZsLTEuMjI3LTE5LjczaC4wMDJ2LS4wMDNhMS4zODIgMS4zODIgMCAwMTEuMjgzLTEuNDY3di0uMDAzbDE5LjcxOS0xLjI1NmMuMDA1IDAgLjAxLS4wMDMuMDE1LS4wMDQuMDA1IDAgLjAxLjAwMy4wMTYuMDAyTTkyLjgxMyAxMDkuMDRsLjAxOS4wMDJ2LjAwM2ExLjM3OSAxLjM3OSAwIDAxMS4yNTEgMS40NjdsLS4wNC4yNzZjLTEuNTEyIDExLjE4NC0xMS4wNSAxOS41Ny0yMi4zMTIgMTkuNTczbC0uMDEzLS4wMDFjLS4wMy4wMDEtLjA0NC0uMDAzLS4wNzQtLjAwNWExLjM4NSAxLjM4NSAwIDAxLTEuMjkyLTEuNDdjLjAwMS0uMDIxLjAwOC0uMDQuMDEtLjA2bDEuMjI3LTE5Ljc0MmguMDAzdi0uMDAzYTEuMzc4IDEuMzc4IDAgMDExLjQ1NS0xLjI5NHYtLjAwM2wxOS43MzUgMS4yNTZjLjAwNiAwIC4wMS0uMDAzLjAxNi0uMDAyLjAwNSAwIC4wMS4wMDMuMDE1LjAwNE0zNDUuMzc3IDY5LjgyOGwuMDE4LjAwNC0uMDAxLjAwM2MuNzMuMTU3IDEuMi44NzMgMS4wNiAxLjYxNGwtLjA3NC4yN2MtMi44ODYgMTAuOTA3LTEzLjM4NSAxOC4wMi0yNC41NTUgMTYuNTk2bC0uMDEzLS4wMDNjLS4wMy0uMDAyLS4wNDQtLjAwOC0uMDc0LS4wMTRhMS4zOSAxLjM5IDAgMDEtMS4wOTktMS42MjJjLjAwNC0uMDIyLjAxMy0uMDQuMDE4LS4wNThsMy42NjQtMTkuNDM4aC4wMDJ2LS4wMDJhMS4zNzQgMS4zNzQgMCAwMTEuNjA1LTEuMXYtLjAwM2wxOS40MTggMy43NDdoLjAxNmwuMDE1LjAwNk02MDAuNzU4IDI1OS42MDJsLjAxOC4wMDYtLjAwMS4wMDNhMS4zODggMS4zODggMCAwMS44NSAxLjczNmwtLjEwNi4yNThjLTQuMjE2IDEwLjQ2Mi0xNS41MSAxNi4xOTUtMjYuNDEgMTMuMzY4bC0uMDEyLS4wMDVjLS4wMy0uMDA2LS4wNDMtLjAxMy0uMDcxLS4wMjNhMS4zOTQgMS4zOTQgMCAwMS0uODg5LTEuNzVjLjAwNy0uMDIuMDE4LS4wMzcuMDI1LS4wNTVsNi4wNDYtMTguODNoLjAwM3YtLjAwMmExLjM3IDEuMzcgMCAwMTEuNzI3LS44OWwuMDAxLS4wMDIgMTguNzkgNi4xNzZjLjAwNS4wMDIuMDEgMCAuMDE1LjAwMi4wMDYuMDAyLjAxLjAwNy4wMTQuMDA4TTU1Ni40NTYgMjg1LjM4NmwuMDE2LjAwOC0uMDAxLjAwMmMuNjY3LjMzNi45NDUgMS4xNDguNjI3IDEuODMybC0uMTM4LjI0MmMtNS40ODIgOS44NTQtMTcuMzkzIDE0LjExOS0yNy44NDggOS45MzdsLS4wMTItLjAwNmMtLjAyOC0uMDEtLjA0LS4wMi0uMDY4LS4wMzJhMS4zOTcgMS4zOTcgMCAwMS0uNjYzLTEuODVjLjAxLS4wMTkuMDIyLS4wMzQuMDMxLS4wNTFsOC4zMzktMTcuOTMuMDAyLjAwMXYtLjAwM2ExLjM2NiAxLjM2NiAwIDAxMS44MjQtLjY2NGwuMDAxLS4wMDMgMTcuODYxIDguNTAzYy4wMDUuMDAzLjAxLjAwMi4wMTYuMDA0LjAwNS4wMDMuMDA4LjAwOC4wMTMuMDFNNDYuOTE3IDQ0MC43MzVsLjAxNS4wMS0uMDAyLjAwMmMuNjIuNDE3Ljc5NCAxLjI1OS4zOTQgMS44OTdsLS4xNjcuMjIzYy02LjY2NSA5LjA5MS0xOS4wMDcgMTEuODI1LTI4Ljg1MyA2LjM1N2wtLjAxMS0uMDA3Yy0uMDI2LS4wMTMtLjAzOC0uMDI0LS4wNjMtLjA0YTEuNCAxLjQgMCAwMS0uNDI3LTEuOTJjLjAxMi0uMDE4LjAyNy0uMDMxLjAzNy0uMDQ3bDEwLjUwNS0xNi43NDhoLjAwMmwuMDAxLS4wMDJhMS4zNjMgMS4zNjMgMCAwMTEuODkxLS40M2wuMDAyLS4wMDMgMTYuNjUgMTAuNjkxYy4wMDQuMDAzLjAxLjAwMy4wMTQuMDA2LjAwNS4wMDMuMDA3LjAwOC4wMTIuMDFNMzAuNzY0IDI3MC45NDRsLjAxNC4wMTEtLjAwMi4wMDNjLjU2Mi40OTIuNjMgMS4zNDguMTU0IDEuOTMybC0uMTk0LjJjLTcuNzQ2IDguMTg1LTIwLjMyOCA5LjM0Ny0yOS40MSAyLjY4MmwtLjAxLS4wMDhjLS4wMjQtLjAxNy0uMDM0LS4wMjktLjA1Ny0uMDQ4YTEuNDAxIDEuNDAxIDAgMDEtLjE4My0xLjk1OGMuMDEzLS4wMTcuMDMtLjAyOC4wNDMtLjA0M2wxMi41MS0xNS4zMDIuMDAyLjAwMi4wMDItLjAwM2ExLjM2MiAxLjM2MiAwIDAxMS45MjktLjE4OWwuMDAyLS4wMDIgMTUuMTc2IDEyLjcwMmMuMDA0LjAwNC4wMS4wMDUuMDE0LjAwOC4wMDQuMDA0LjAwNi4wMS4wMS4wMTNNNDg5LjkzNSA0NTAuNDczbC4wMTIuMDEzLS4wMDIuMDAyYTEuMzk2IDEuMzk2IDAgMDEtLjA5IDEuOTM2bC0uMjE3LjE3NWMtOC43MDcgNy4xNDgtMjEuMzM1IDYuNzIxLTI5LjUxLTEuMDMybC0uMDEtLjAxYy0uMDIyLS4wMi0uMDMtLjAzMy0uMDUtLjA1NWExLjQwMiAxLjQwMiAwIDAxLjA2My0xLjk2NmMuMDE1LS4wMTQuMDMzLS4wMjQuMDQ4LS4wMzdsMTQuMzI1LTEzLjYxLjAwMi4wMDEuMDAyLS4wMDJhMS4zNjEgMS4zNjEgMCAwMTEuOTM3LjA1NGwuMDAyLS4wMDIgMTMuNDY2IDE0LjUxYy4wMDQuMDA0LjAxLjAwNS4wMTMuMDA5LjAwNC4wMDQuMDA1LjAxLjAwOS4wMTRNNzYyLjI2NiAzODcuNjFsLjAxLjAxNS0uMDAyLjAwMmExLjM5NSAxLjM5NSAwIDAxLS4zMzEgMS45MWwtLjIzNy4xNDVjLTkuNTM2IDUuOTk3LTIyLjAxMyAzLjk4Ny0yOS4xNTYtNC43M2wtLjAwOC0uMDExYy0uMDItLjAyMy0uMDI2LS4wMzctLjA0My0uMDYxYTEuNCAxLjQgMCAwMS4zMDgtMS45NDJjLjAxNy0uMDEzLjAzNi0uMDIuMDUyLS4wM2wxNS45MTgtMTEuNzAyLjAwMS4wMDIuMDAyLS4wMDJhMS4zNjIgMS4zNjIgMCAwMTEuOTE2LjI5N2wuMDAyLS4wMDEgMTEuNTUgMTYuMDgzYy4wMDIuMDA0LjAwOC4wMDcuMDEuMDExLjAwNC4wMDQuMDA0LjAxLjAwOC4wMTVNMzk3Ljc4OSA1Ni43MzVsLjAwOC4wMTYtLjAwMi4wMDJhMS4zOTMgMS4zOTMgMCAwMS0uNTY3IDEuODUybC0uMjU0LjExNGMtMTAuMjEzIDQuNzQ3LTIyLjM0NyAxLjE4NC0yOC4zNDktOC4zNTlsLS4wMDYtLjAxMWMtLjAxNy0uMDI1LS4wMjEtLjA0LS4wMzYtLjA2NmExLjM5OSAxLjM5OSAwIDAxLjU0OS0xLjg4N2MuMDE5LS4wMS4wMzgtLjAxNS4wNTUtLjAyNGwxNy4yNjEtOS42LjAwMi4wMDEuMDAyLS4wMDJjLjY2NS0uMzcgMS41LS4xMyAxLjg2NC41MzZsLjAwMy0uMDAxIDkuNDU1IDE3LjQwMmMuMDAyLjAwNS4wMDcuMDA3LjAxLjAxMnMuMDAyLjAxLjAwNS4wMTVNNjAuMTc3IDUwNy4xOTNsLjAwNi4wMTdoLS4wMDNhMS4zOSAxLjM5IDAgMDEtLjc5MyAxLjc2NWwtLjI2Ni4wODJjLTEwLjczIDMuNDItMjIuMzMzLTEuNjQzLTI3LjEwMS0xMS44NjJsLS4wMDUtLjAxMmMtLjAxNC0uMDI3LS4wMTYtLjA0Mi0uMDI3LS4wN2ExLjM5NiAxLjM5NiAwIDAxLjc4LTEuODAyYy4wMi0uMDA4LjA0LS4wMS4wNTctLjAxN2wxOC4zMzItNy4zNDN2LjAwMmwuMDAzLS4wMDFhMS4zNjcgMS4zNjcgMCAwMTEuNzg0Ljc2NmguMDAzbDcuMjE4IDE4LjQ0NmMuMDAyLjAwNS4wMDcuMDA4LjAwOS4wMTMuMDAyLjAwNSAwIC4wMS4wMDMuMDE2TTUxOC40NDcgNTIzLjk3M2wuMDA0LjAxNy0uMDAzLjAwMWExLjM4NiAxLjM4NiAwIDAxLTEuMDA3IDEuNjVsLS4yNzQuMDQ3Yy0xMS4wNzcgMi4wMzQtMjEuOTY1LTQuNDUyLTI1LjQyOS0xNS4xODdsLS4wMDMtLjAxM2MtLjAxLS4wMjgtLjAxMS0uMDQzLS4wMTgtLjA3MmExLjM5MiAxLjM5MiAwIDAxLjk5Ny0xLjY4OGMuMDIxLS4wMDYuMDQxLS4wMDUuMDYtLjAxbDE5LjExLTQuOTY0LjAwMS4wMDIuMDAzLS4wMDFhMS4zNzEgMS4zNzEgMCAwMTEuNjc2Ljk4NWguMDAybDQuODczIDE5LjIwMmMuMDAxLjAwNi4wMDYuMDEuMDA3LjAxNXYuMDE2TTcyNS4xOSAyNjguMTQ0bC4wMDIuMDE4aC0uMDAzYTEuMzgxIDEuMzgxIDAgMDEtMS4yMDQgMS41MDlsLS4yNzguMDEyYy0xMS4yNDcuNjE0LTIxLjI1LTcuMTk2LTIzLjM1Ni0xOC4yOGwtLjAwMS0uMDE0Yy0uMDA3LS4wMjktLjAwNi0uMDQ0LS4wMS0uMDc0YTEuMzg3IDEuMzg3IDAgMDExLjItMS41NDhjLjAyMi0uMDAzLjA0MiAwIC4wNi0uMDAybDE5LjU4NS0yLjUwM3YuMDAzbC4wMDMtLjAwMWExLjM3NiAxLjM3NiAwIDAxMS41NCAxLjE5bC4wMDQtLjAwMSAyLjQ1NCAxOS42NmMwIC4wMDUuMDA0LjAxLjAwNS4wMTUgMCAuMDA2LS4wMDIuMDEgMCAuMDE2TTU5OS4xNSAzMjkuODYxdi4wMThoLS4wMDNhMS4zNzYgMS4zNzYgMCAwMS0xLjM4MSAxLjM0M2wtLjI3OC0uMDIzYy0xMS4yMzQtLjgxNi0yMC4xOS05LjgzLTIwLjkwNy0yMS4wOXYtLjAxM2MtLjAwMy0uMDMgMC0uMDQ0IDAtLjA3NCAwLS43NjQuNjE4LTEuMzgzIDEuMzgyLTEuMzgzLjAyMSAwIC4wNC4wMDUuMDYuMDA2aDE5Ljc0di4wMDJoLjAwM2ExLjM4IDEuMzggMCAwMTEuMzggMS4zNzVoLjAwNHYxOS44MDhsLjAwMy4wMTVjMCAuMDA2LS4wMDMuMDEtLjAwMy4wMTZNMTE2Mi4xNjEgNjcuNzNsLS4wMDIuMDE5aC0uMDAzYTEuMzcgMS4zNyAwIDAxLTEuNTM1IDEuMTU2bC0uMjcyLS4wNThjLTExLjAzMi0yLjIzMi0xOC43OS0xMi4zMDEtMTguMTA4LTIzLjU1MmwuMDAyLS4wMTRjMC0uMDMuMDA1LS4wNDQuMDEtLjA3NGExLjM3NSAxLjM3NSAwIDAxMS41NC0xLjE5NWMuMDIxLjAwMi4wNC4wMS4wNTkuMDEzbDE5LjU2IDIuNXYuMDAzaC4wMDNjLjc1NC4wOTYgMS4yOS43ODMgMS4xOTggMS41MzdoLjAwM2wtMi40NTEgMTkuNjM1YzAgLjAwNS4wMDIuMDEuMDAxLjAxNiAwIC4wMDUtLjAwNC4wMS0uMDA1LjAxNU05MTkuODg2IDEwOC4wMzlsLS4wMDUuMDE3aC0uMDAzYTEuMzY0IDEuMzY0IDAgMDEtMS42NjQuOTUybC0uMjYyLS4wOTJjLTEwLjY1Mi0zLjYwOS0xNy4wOTItMTQuNTc0LTE1LjAyMS0yNS42NDRsLjAwMy0uMDEyYy4wMDQtLjAzLjAxMS0uMDQ0LjAxOC0uMDczYTEuMzcgMS4zNyAwIDAxMS42NzUtLjk5Yy4wMi4wMDUuMDM4LjAxNS4wNTcuMDJsMTkuMDY4IDQuOTU0di4wMDJoLjAwM2MuNzM1LjE5MiAxLjE4MS45NDEuOTk3IDEuNjc3aC4wMDNsLTQuODYyIDE5LjE1OXYuMDE2Yy0uMDAyLjAwNS0uMDA2LjAwOS0uMDA3LjAxNE0xMzcyLjc0NiA0NjIuODEybC0uMDA2LjAxNmgtLjAwM2ExLjM1OSAxLjM1OSAwIDAxLTEuNzY3LjczNGwtLjI0OC0uMTI1Yy0xMC4xMDUtNC45MjQtMTUuMTIzLTE2LjYxMy0xMS42OTctMjcuMzNsLjAwNS0uMDEzYy4wMDgtLjAyOS4wMTYtLjA0MS4wMjctLjA3YTEuMzY1IDEuMzY1IDAgMDExLjc4Mi0uNzdjLjAyLjAwOC4wMzYuMDIuMDU0LjAyN2wxOC4yNzUgNy4zMjF2LjAwM2guMDAzYTEuMzkgMS4zOSAwIDAxLjc3OSAxLjc4OWguMDAzbC03LjE5NSAxOC4zODhjLS4wMDIuMDA1LS4wMDEuMDExLS4wMDMuMDE2LS4wMDIuMDA1LS4wMDcuMDA5LS4wMDkuMDE0TTE4OS42NTcgOTYuMjExbC0uMDA4LjAxNi0uMDAzLS4wMDJjLS4zNy42NDctMS4xODYuODctMS44NDIuNTA2bC0uMjMtLjE1NGMtOS40LTYuMTU4LTEyLjkxNi0xOC4zODctOC4xODctMjguNTg3bC4wMDYtLjAxMmMuMDEyLS4wMjcuMDIyLS4wMzkuMDM2LS4wNjVhMS4zNiAxLjM2IDAgMDExLjg2MS0uNTRjLjAyLjAxLjAzMy4wMjQuMDUuMDM0bDE3LjE5NyA5LjU2NS0uMDAxLjAwMmguMDAzYy42NjMuMzcuOTA5IDEuMjA3LjU1IDEuODc0bC4wMDIuMDAxLTkuNDE5IDE3LjMzNS0uMDA0LjAxNWMtLjAwMy4wMDQtLjAwOC4wMDctLjAxLjAxMk01OS45MjggNDA1LjM4bC0uMDEuMDE1LS4wMDMtLjAwMWExLjM1MiAxLjM1MiAwIDAxLTEuODkuMjdsLS4yMDktLjE4MmMtOC41NDctNy4yOTItMTAuNTA3LTE5Ljg2Ni00LjU0Ni0yOS4zOTJsLjAwOC0uMDFjLjAxNC0uMDI2LjAyNi0uMDM3LjA0My0uMDYxYTEuMzU4IDEuMzU4IDAgMDExLjkxMy0uMzAyYy4wMTcuMDEzLjAzLjAyOC4wNDUuMDRMNzEuMTMgMzg3LjQxbC0uMDAxLjAwMmguMDAyYy42MTEuNDUuNzUgMS4zMTIuMzEyIDEuOTI4bC4wMDIuMDAyLTExLjUgMTYuMDEzLS4wMDYuMDE1LS4wMTEuMDFNMzA0Ljg3IDQ3MS45MjRsLS4wMTMuMDEzLS4wMDItLjAwMmExLjM1IDEuMzUgMCAwMS0xLjkwNy4wM2wtLjE4NS0uMjA2Yy03LjU2NS04LjMwOC03LjkzNi0yMS4wMy0uODM0LTI5LjczMmwuMDEtLjAxYy4wMTctLjAyMy4wMy0uMDMyLjA1LS4wNTRhMS4zNTcgMS4zNTcgMCAwMTEuOTM0LS4wNmMuMDE2LjAxNS4wMjYuMDMzLjA0LjA0NmwxNC4yNjMgMTMuNTUyLS4wMDIuMDAyLjAwMy4wMDFjLjU1LjUyMy41OCAxLjM5NS4wNjcgMS45NTFsLjAwMi4wMDItMTMuNDA1IDE0LjQ0NGMtLjAwNC4wMDQtLjAwNS4wMS0uMDA4LjAxMy0uMDA0LjAwNC0uMDEuMDA2LS4wMTMuMDFNOTA2LjQ1NCAxNjAuMzM1bC0uMDE0LjAxMi0uMDAxLS4wMDJhMS4zNTEgMS4zNTEgMCAwMS0xLjg5Ny0uMjFsLS4xNTctLjIyOGMtNi40NjctOS4xOTItNS4yNDQtMjEuODYgMi44OTEtMjkuNjAybC4wMS0uMDA4Yy4wMjEtLjAyMS4wMzUtLjAyOC4wNTgtLjA0OGExLjM1NyAxLjM1NyAwIDAxMS45MjYuMTg0Yy4wMTQuMDE3LjAyMi4wMzUuMDM0LjA1bDEyLjQ1NyAxNS4yMzYtLjAwMi4wMDIuMDAzLjAwMmMuNDguNTg3LjQwMSAxLjQ1Ny0uMTc3IDEuOTQ0bC4wMDIuMDAyLTE1LjEwOSAxMi42NDZjLS4wMDQuMDA0LS4wMDYuMDEtLjAxLjAxM2wtLjAxNC4wMDdNMTE2Ny45MzYgMzAuNjgxbC0uMDE1LjAxLS4wMDItLjAwMmExLjM1MyAxLjM1MyAwIDAxLTEuODU2LS40NDZsLS4xMjgtLjI0N2MtNS4yNzEtOS45MzItMi40NzMtMjIuMzQ2IDYuNTcyLTI5LjAwM2wuMDEtLjAwN2MuMDI0LS4wMTkuMDM4LS4wMjQuMDYzLS4wNGExLjM1OSAxLjM1OSAwIDAxMS44OS40MjRjLjAxMi4wMTguMDE3LjAzOC4wMjcuMDU0bDEwLjQ2MyAxNi42ODItLjAwMi4wMDEuMDAyLjAwMmExLjM5MyAxLjM5MyAwIDAxLS40MTggMS45MDdsLjAwMS4wMDItMTYuNTggMTAuNjQ3Yy0uMDA1LjAwMy0uMDA4LjAwOC0uMDEyLjAxLS4wMDUuMDA0LS4wMS4wMDQtLjAxNS4wMDZNMTI1My4zOCA1MzcuNjQzbC0uMDE2LjAwOC0uMDAxLS4wMDNhMS4zNTcgMS4zNTcgMCAwMS0xLjc4OC0uNjc2bC0uMDk2LS4yNjFjLTMuOTk3LTEwLjUxOS4zMzItMjIuNDgyIDEwLjE0Ny0yNy45NDdsLjAxMi0uMDA2Yy4wMjUtLjAxNi4wNC0uMDIuMDY3LS4wMzJhMS4zNjIgMS4zNjIgMCAwMTEuODI0LjY2Yy4wMS4wMTkuMDEyLjAzOS4wMi4wNTdsOC4zMSAxNy44NjgtLjAwMi4wMDEuMDAyLjAwM2MuMzIuNjg5LjAyOCAxLjUxMS0uNjU0IDEuODM4bC4wMDEuMDAzLTE3Ljc5NyA4LjQ3M2MtLjAwNS4wMDMtLjAwOC4wMDgtLjAxMy4wMWwtLjAxNS4wMDRNNzU2LjQ5IDE5OC4yNTRsLS4wMTcuMDA2LS4wMDEtLjAwM2ExLjM2MSAxLjM2MSAwIDAxLTEuNjkzLS44OTdsLS4wNjMtLjI3MWMtMi42Ni0xMC45NDIgMy4xMy0yMi4yNjYgMTMuNTYyLTI2LjQ1bC4wMTMtLjAwNGMuMDI3LS4wMTIuMDQyLS4wMTQuMDctLjAyM2ExLjM2NyAxLjM2NyAwIDAxMS43My44ODVjLjAwNy4wMi4wMDguMDQuMDEzLjA2bDYuMDMxIDE4Ljc4aC0uMDAybC4wMDEuMDAzYTEuMzg4IDEuMzg4IDAgMDEtLjg3OCAxLjc0MnYuMDAzbC0xOC43MzcgNi4xNmMtLjAwNS4wMDEtLjAwOC4wMDUtLjAxMy4wMDctLjAwNi4wMDItLjAxMSAwLS4wMTYuMDAyTTU5OC4zIDQ2Ni44OTJsLS4wMTkuMDA0di0uMDAzYTEuMzY3IDEuMzY3IDAgMDEtMS41Ny0xLjEwNGwtLjAzLS4yNzhjLTEuMjgyLTExLjE5NyA1Ljg3OC0yMS43MDMgMTYuNzYyLTI0LjUzNGwuMDEzLS4wMDNjLjAyOS0uMDA4LjA0NC0uMDA4LjA3My0uMDE0YTEuMzcyIDEuMzcyIDAgMDExLjYxIDEuMDk3Yy4wMDQuMDIyLjAwMi4wNDIuMDA1LjA2bDMuNjU4IDE5LjQwNWgtLjAwMnYuMDAzYTEuMzg1IDEuMzg1IDAgMDEtMS4wODkgMS42MThsLjAwMS4wMDMtMTkuMzgyIDMuNzQtLjAxNS4wMDZoLS4wMTZNMTQzNC45NzcgNDUzLjc4OGgtLjAxOHYtLjAwMmExLjM3MyAxLjM3MyAwIDAxLTEuNDIzLTEuMjk2bC4wMDYtLjI3OWMuMTE0LTExLjI4IDguNTMxLTIwLjgwMiAxOS42OTUtMjIuMjMybC4wMTQtLjAwMWMuMDI5LS4wMDUuMDQ0LS4wMDMuMDc0LS4wMDUuNzYtLjA0OCAxLjQxNS41MyAxLjQ2MyAxLjI5NC4wMDEuMDIxLS4wMDMuMDQxLS4wMDMuMDZsMS4yMjcgMTkuNzNoLS4wMDJ2LjAwM2ExLjM4MiAxLjM4MiAwIDAxLTEuMjgyIDEuNDY4di4wMDNsLTE5LjcyIDEuMjU1Yy0uMDA1IDAtLjAxLjAwMy0uMDE1LjAwNC0uMDA1IDAtLjAxLS4wMDMtLjAxNi0uMDAyTTg1NS42NzcgMjI5LjcxbC0uMDE4LS4wMDJ2LS4wMDNhMS4zNzkgMS4zNzkgMCAwMS0xLjI1Mi0xLjQ2N2wuMDQtLjI3NmMxLjUxMi0xMS4xODQgMTEuMDUtMTkuNTcgMjIuMzEyLTE5LjU3M2wuMDEzLjAwMWMuMDMtLjAwMS4wNDUuMDAzLjA3NS4wMDUuNzYuMDQ4IDEuMzM5LjcwNiAxLjI5MSAxLjQ3LS4wMDEuMDIxLS4wMDguMDQtLjAxLjA2bC0xLjIyNyAxOS43NDJoLS4wMDJ2LjAwM2ExLjM3OCAxLjM3OCAwIDAxLTEuNDU2IDEuMjk0di4wMDNsLTE5LjczNS0xLjI1NmMtLjAwNSAwLS4wMS4wMDMtLjAxNi4wMDItLjAwNSAwLS4wMS0uMDAzLS4wMTUtLjAwNE05OTUuODk2IDE0My45NmwtLjAxOC0uMDAzdi0uMDAzYTEuMzg0IDEuMzg0IDAgMDEtMS4wNi0xLjYxNGwuMDc1LS4yN2MyLjg4NS0xMC45MDcgMTMuMzg0LTE4LjAyIDI0LjU1NS0xNi41OTZsLjAxMy4wMDNjLjAzLjAwMi4wNDQuMDA4LjA3My4wMTRhMS4zOSAxLjM5IDAgMDExLjEgMS42MjJjLS4wMDUuMDIxLS4wMTQuMDQtLjAxOC4wNThsLTMuNjY0IDE5LjQzN2gtLjAwM3YuMDAzYTEuMzc0IDEuMzc0IDAgMDEtMS42MDQgMS4xdi4wMDNsLTE5LjQxOC0zLjc0OGgtLjAxNmMtLjAwNiAwLS4wMS0uMDA0LS4wMTUtLjAwNk00MTguNDYzIDE2NC45NjRsLS4wMTctLjAwNXYtLjAwM2ExLjM4OCAxLjM4OCAwIDAxLS44NS0xLjczN2wuMTA3LS4yNTdjNC4yMTUtMTAuNDYyIDE1LjUwOS0xNi4xOTUgMjYuNDA5LTEzLjM2OGwuMDEzLjAwNGMuMDI5LjAwNy4wNDIuMDE0LjA3LjAyNGExLjM5NCAxLjM5NCAwIDAxLjg4OSAxLjc0OWMtLjAwNy4wMi0uMDE4LjAzNy0uMDI0LjA1NmwtNi4wNDcgMTguODMtLjAwMi0uMDAxdi4wMDNhMS4zNyAxLjM3IDAgMDEtMS43MjguODlsLS4wMDEuMDAyLTE4Ljc5LTYuMTc3Yy0uMDA1LS4wMDItLjAxIDAtLjAxNS0uMDAybC0uMDE0LS4wMDhNMTQ3Ny4wNzggMzI3LjM3NWwtLjAxNy0uMDA3LjAwMS0uMDAzYTEuMzkyIDEuMzkyIDAgMDEtLjYyNy0xLjgzMWwuMTM4LS4yNDNjNS40ODItOS44NTQgMTcuMzkzLTE0LjExOSAyNy44NDgtOS45MzZsLjAxMi4wMDVjLjAyOC4wMS4wNC4wMi4wNjguMDMyLjY4OS4zMjguOTg2IDEuMTU1LjY2MyAxLjg1LS4wMS4wMTktLjAyMi4wMzQtLjAzMS4wNTFsLTguMzM5IDE3LjkzaC0uMDAydi4wMDJhMS4zNjYgMS4zNjYgMCAwMS0xLjgyNC42NjVsLS4wMDEuMDAyLTE3Ljg2MS04LjUwM2MtLjAwNS0uMDAzLS4wMS0uMDAyLS4wMTYtLjAwNGwtLjAxMi0uMDFNMTA4NS4xNzMgMzY0LjczN2wtLjAxNS0uMDEuMDAxLS4wMDJhMS4zOTQgMS4zOTQgMCAwMS0uMzkzLTEuODk3bC4xNjctLjIyM2M2LjY2NC05LjA5MSAxOS4wMDctMTEuODI1IDI4Ljg1My02LjM1N2wuMDEuMDA3Yy4wMjcuMDE0LjAzOC4wMjQuMDY0LjA0YTEuNCAxLjQgMCAwMS40MjYgMS45MmMtLjAxMS4wMTgtLjAyNi4wMzEtLjAzNy4wNDdsLTEwLjUwNCAxNi43NDktLjAwMi0uMDAyLS4wMDIuMDAzYTEuMzYzIDEuMzYzIDAgMDEtMS44OS40M2wtLjAwMi4wMDMtMTYuNjUtMTAuNjljLS4wMDQtLjAwNC0uMDEtLjAwNC0uMDE0LS4wMDctLjAwNS0uMDAzLS4wMDctLjAwOC0uMDEyLS4wMU02NDguMzQ2IDQyLjIxMmwtLjAxMy0uMDEyLjAwMi0uMDAyYTEuMzk2IDEuMzk2IDAgMDEtLjE1NC0xLjkzMmwuMTk0LS4yYzcuNzQ1LTguMTg2IDIwLjMyOC05LjM0OCAyOS40MDktMi42ODNsLjAxLjAwOWMuMDI1LjAxNi4wMzQuMDI4LjA1Ny4wNDguNTg2LjQ5LjY2OCAxLjM2NS4xODQgMS45NTgtLjAxNC4wMTctLjAzLjAyOC0uMDQzLjA0M2wtMTIuNTExIDE1LjMwMS0uMDAyLS4wMDEtLjAwMS4wMDJhMS4zNjIgMS4zNjIgMCAwMS0xLjkzLjE5bC0uMDAxLjAwMi0xNS4xNzYtMTIuNzAzYy0uMDA1LS4wMDMtLjAxLS4wMDQtLjAxNC0uMDA4LS4wMDUtLjAwMy0uMDA2LS4wMDktLjAxLS4wMTJNMzcyLjc3NSA0NjAuMzg5bC0uMDEyLS4wMTQuMDAyLS4wMDJhMS4zOTYgMS4zOTYgMCAwMS4wOS0xLjkzNmwuMjE3LS4xNzVjOC43MDgtNy4xNDggMjEuMzM1LTYuNzIgMjkuNTEgMS4wMzJsLjAxLjAxYy4wMjIuMDIuMDMuMDMzLjA1LjA1NS41Mi41Ni40OTIgMS40MzktLjA2MyAxLjk2Ni0uMDE1LjAxNS0uMDMzLjAyNC0uMDQ3LjAzN2wtMTQuMzI2IDEzLjYxaC0uMDAybC0uMDAxLjAwMmMtLjU1My41MjQtMS40Mi41LTEuOTM4LS4wNTVsLS4wMDIuMDAyLTEzLjQ2Ni0xNC41MWMtLjAwNC0uMDAzLS4wMS0uMDA1LS4wMTMtLjAwOS0uMDA0LS4wMDQtLjAwNS0uMDEtLjAwOS0uMDEzTTExMTQuNzU3IDUwNi42OWwtLjAxMS0uMDE1LjAwMi0uMDAyYTEuMzk1IDEuMzk1IDAgMDEuMzMxLTEuOTFsLjIzOC0uMTQ1YzkuNTM1LTUuOTk3IDIyLjAxMi0zLjk4NyAyOS4xNTUgNC43M2wuMDA4LjAxMWMuMDIuMDIzLjAyNi4wMzcuMDQ0LjA2MWExLjQgMS40IDAgMDEtLjMwOSAxLjk0MmMtLjAxNy4wMTMtLjAzNi4wMi0uMDUyLjAzbC0xNS45MTggMTEuNzAyLS4wMDEtLjAwMi0uMDAyLjAwMmExLjM2MiAxLjM2MiAwIDAxLTEuOTE2LS4yOTdsLS4wMDIuMDAxLTExLjU1LTE2LjA4M2MtLjAwMi0uMDA0LS4wMDgtLjAwNy0uMDEtLjAxMS0uMDA0LS4wMDQtLjAwNC0uMDEtLjAwNy0uMDE1TTg2MC43MTQgMjg1LjAyNmwtLjAwOS0uMDE2LjAwMy0uMDAyYTEuMzkzIDEuMzkzIDAgMDEuNTY2LTEuODUxbC4yNTQtLjExNWMxMC4yMTMtNC43NDcgMjIuMzQ4LTEuMTg0IDI4LjM0OSA4LjM1OWwuMDA2LjAxMWMuMDE3LjAyNS4wMjIuMDQuMDM2LjA2Ni4zNjUuNjcxLjEyIDEuNTE1LS41NDggMS44ODctLjAyLjAxLS4wMzkuMDE1LS4wNTYuMDI0bC0xNy4yNiA5LjYtLjAwMi0uMDAxLS4wMDIuMDAyYy0uNjY2LjM3LTEuNS4xMy0xLjg2NS0uNTM2bC0uMDAyLjAwMS05LjQ1NS0xNy40MDJjLS4wMDMtLjAwNS0uMDA4LS4wMDctLjAxLS4wMTItLjAwMy0uMDA1LS4wMDMtLjAxLS4wMDUtLjAxNU0yODMuMzM4IDE0NC43MTNsLS4wMDYtLjAxNy4wMDMtLjAwMWExLjM5IDEuMzkgMCAwMS43OTMtMS43NjVsLjI2Ni0uMDgyYzEwLjczLTMuNDE5IDIyLjMzMiAxLjY0NCAyNy4xMDEgMTEuODYzbC4wMDUuMDEyYy4wMTQuMDI2LjAxNi4wNDIuMDI3LjA3YTEuMzk2IDEuMzk2IDAgMDEtLjc4IDEuODAxYy0uMDIuMDA5LS4wNC4wMS0uMDU4LjAxN2wtMTguMzMxIDcuMzQzdi0uMDAybC0uMDA0LjAwMmExLjM2NyAxLjM2NyAwIDAxLTEuNzgzLS43NjdsLS4wMDMuMDAyLTcuMjE4LTE4LjQ0N2MtLjAwMi0uMDA1LS4wMDctLjAwOC0uMDA5LS4wMTMtLjAwMi0uMDA2IDAtLjAxMS0uMDAzLS4wMTZNNzIxLjk5NyAzMTEuNjFsLS4wMDUtLjAxN2guMDAzYTEuMzg2IDEuMzg2IDAgMDExLjAwNy0xLjY1bC4yNzQtLjA0OGMxMS4wNzctMi4wMzQgMjEuOTY1IDQuNDUyIDI1LjQzIDE1LjE4N2wuMDAzLjAxM2MuMDEuMDI4LjAxLjA0My4wMTguMDczYTEuMzkyIDEuMzkyIDAgMDEtLjk5OCAxLjY4OGMtLjAyLjAwNS0uMDQuMDA1LS4wNi4wMWwtMTkuMTEgNC45NjN2LS4wMDJsLS4wMDMuMDAxYTEuMzcxIDEuMzcxIDAgMDEtMS42NzYtLjk4NWgtLjAwM2wtNC44NzMtMTkuMjAyYy0uMDAxLS4wMDUtLjAwNS0uMDEtLjAwNi0uMDE0LS4wMDItLjAwNiAwLS4wMTEtLjAwMS0uMDE2TTI1MS44OTQgMjY2LjMyOGwtLjAwMy0uMDE4aC4wMDNhMS4zODEgMS4zODEgMCAwMTEuMjA0LTEuNTA4bC4yNzktLjAxM2MxMS4yNDYtLjYxNCAyMS4yNDkgNy4xOTcgMjMuMzU1IDE4LjI4MWwuMDAyLjAxM2MuMDA2LjAzLjAwNS4wNDUuMDEuMDc1YTEuMzg3IDEuMzg3IDAgMDEtMS4yIDEuNTQ3Yy0uMDIyLjAwMy0uMDQyIDAtLjA2MS4wMDJsLTE5LjU4NCAyLjUwM3YtLjAwM2wtLjAwMy4wMDFhMS4zNzYgMS4zNzYgMCAwMS0xLjU0LTEuMTlsLS4wMDQuMDAxLTIuNDU0LTE5LjY2Yy0uMDAxLS4wMDUtLjAwNS0uMDEtLjAwNS0uMDE1di0uMDE2TTU0LjM3NyA1MjAuNzc4di0uMDE4aC4wMDNhMS4zNzYgMS4zNzYgMCAwMTEuMzgyLTEuMzQzbC4yNzcuMDIzYzExLjIzNC44MTYgMjAuMTkgOS44MyAyMC45MDcgMjEuMDl2LjAxMmMuMDA0LjAzIDAgLjA0NSAwIC4wNzUgMCAuNzY0LS42MTcgMS4zODMtMS4zODEgMS4zODMtLjAyMiAwLS4wNDEtLjAwNS0uMDYtLjAwNmgtMTkuNzR2LS4wMDJoLS4wMDNhMS4zOCAxLjM4IDAgMDEtMS4zODItMS4zNzVoLS4wMDNWNTIwLjgxYzAtLjAwNS0uMDAzLS4wMS0uMDAzLS4wMTZsLjAwMy0uMDE1Ii8+PC9nPjwvc3ZnPg==);
  background-position: center center;
  background-size: cover;
}

.cookie-statement {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: rgb(255, 255, 255);
  background-color: rgb(38, 40, 56);
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.cookie-statement.is-enabled {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.cookie-statement__wrapper {
  font-size: 0.8125rem;
  line-height: 1rem;
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 1920px) {
  .cookie-statement__wrapper {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

.cookie-statement__grid {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .cookie-statement__grid {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

.cookie-statement__wrapper > * {
  display: inline-block;
}

.cookie-statement__content {
  padding-right: 1rem;
}

@-webkit-keyframes ctaIconRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes ctaIconRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.cta-secondary--inverse, .cta-secondary, .cta-primary {
  display: inline-block;
  padding: calc((3rem - 1.25rem) / 2) 1.5rem;
  padding: calc(calc((3rem - 1.25rem) / 2) - 1px) 1.5rem;
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.5rem;
  -webkit-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
.cta-secondary--inverse:hover, .cta-secondary:hover, .cta-primary:hover, .cta-secondary--inverse:focus, .cta-secondary:focus, .cta-primary:focus {
  outline: none;
}
.cta-secondary--inverse:active, .cta-secondary:active, .cta-primary:active {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.cta--medium {
  padding: calc((2.5rem - 1rem) / 2) 2rem;
  padding: calc(calc((2.5rem - 1rem) / 2) - 1px) 2rem;
  font-size: 1rem;
}

.cta--minor {
  padding: calc((2rem - 1rem) / 2) 0.5rem;
  padding: calc(calc((2rem - 1rem) / 2) - 1px) 0.5rem;
  font-size: 1rem;
}

.cta-primary {
  color: rgb(255, 255, 255);
  background-color: rgb(2, 141, 208);
  border-color: rgb(2, 141, 208);
}
.cta-primary:hover {
  color: white;
  background-color: rgb(0, 155, 222);
  border-color: rgb(0, 155, 222);
}
.cta-primary:focus {
  border-color: rgb(238, 249, 255);
  -webkit-box-shadow: 0 0 0 5px rgb(255, 210, 188);
          box-shadow: 0 0 0 5px rgb(255, 210, 188);
}

.cta-primary[disabled] {
  cursor: not-allowed;
  background-color: rgb(188, 229, 248);
  border-color: rgb(188, 229, 248);
}
.cta-primary[disabled]:hover, .cta-primary[disabled]:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.cta-primary--process {
  position: relative;
}

.cta-primary--process.is-processing {
  padding-left: 3rem;
  color: rgb(115, 116, 128);
  background: rgb(247, 248, 254);
  border: 1px solid rgb(201, 203, 217);
}

.cta-primary--process.cta--minor.is-processing {
  padding-left: 1.75rem;
}

.cta-primary--process .cta-primary__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(1.5rem / 2);
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: auto;
  margin-bottom: auto;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
          animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.cta-primary--process.cta--minor .cta-primary__icon {
  left: 0.5rem;
  width: 1rem;
  height: 1rem;
}

.cta-primary--process.is-processing .cta-primary__icon {
  display: inline-block;
  -webkit-animation-name: ctaIconRotate;
          animation-name: ctaIconRotate;
}

.cta-primary--process::after {
  display: none;
  content: attr(data-process-text);
}

.cta-primary--process.is-processing span {
  display: none;
}

.cta-primary--process.is-processing::after {
  display: inline-block;
}

.cta-secondary {
  color: rgb(2, 141, 208);
  background-color: transparent;
  border-color: rgb(2, 141, 208);
}
.cta-secondary:hover, .cta-secondary:focus {
  color: rgb(252, 78, 30);
  border-color: rgb(252, 78, 30);
}
.cta-secondary:active {
  color: rgb(38, 40, 56);
  border-color: rgb(252, 78, 30);
}

.cta-secondary--inverse {
  color: rgb(255, 255, 255);
  background-color: transparent;
}
.cta-secondary--inverse:hover, .cta-secondary--inverse:focus {
  color: rgb(252, 78, 30);
  border-color: rgb(252, 78, 30);
}
.cta-secondary--inverse:active {
  color: rgb(255, 255, 255);
  border-color: rgb(252, 78, 30);
}

.cta-secondary[disabled],
.cta-secondary--inverse[disabled] {
  pointer-events: none;
  opacity: 0.7;
}

.cta-secondary[disabled] {
  color: #5c5c5c;
  border-color: #5c5c5c;
}

.cta-secondary--inverse[disabled] {
  color: #f2f2f2;
  border-color: #f2f2f2;
}

.cta-link--inverse, .cta-link {
  display: inline-block;
  padding: 0.5rem;
  margin: -0.5rem;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}
.cta-link--inverse::after, .cta-link::after {
  display: block;
  height: 0.125rem;
  content: "";
}
.cta-link--inverse:hover, .cta-link:hover, .cta-link--inverse:focus, .cta-link:focus {
  color: rgb(252, 78, 30);
  outline: none;
  -webkit-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
.cta-link--inverse:hover::after, .cta-link:hover::after, .cta-link--inverse:focus::after, .cta-link:focus::after {
  background-color: rgb(252, 78, 30);
}
.cta-link--inverse:active, .cta-link:active {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.cta-link {
  color: inherit;
  cursor: pointer;
}
.cta-link::after {
  background-color: rgb(2, 141, 208);
}
.cta-link:active {
  color: rgb(38, 40, 56);
}

.cta-link--inverse {
  color: rgb(255, 255, 255);
}
.cta-link--inverse::after {
  background-color: rgb(2, 141, 208);
}
.cta-link--inverse:active {
  color: rgb(255, 255, 255);
}

.cta--block {
  display: block;
  width: 100%;
  min-width: 10rem;
}
@media only screen and (min-width: 480px) {
  .cta--block {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

.cta--full-width {
  width: 100%;
}

.divider {
  width: 100%;
  height: 1px;
  padding: 0;
  margin: 0;
  background: rgb(201, 203, 217);
  border: 0;
}

.dropdown {
  position: relative;
  max-width: 18rem;
}

.dropdown__selected-item {
  position: relative;
  margin-right: 0.5rem;
  cursor: pointer;
}
.dropdown__selected-item::after {
  position: absolute;
  z-index: 32;
  top: 100%;
  right: calc((1.5rem + 1px) * -1);
  display: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: calc(
    1.235rem / 2 - 1px
  );
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgb(201, 203, 217);
  border-left: 1px solid rgb(201, 203, 217);
  border-top-left-radius: 6px;
  content: "";
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.dropdown__selected-item .menu-tooltip {
  position: absolute;
  z-index: 32;
  top: 100%;
  right: calc((1.5rem + 1px) * -1);
  display: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: calc(
    1.235rem / 2 - 1px
  );
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgb(201, 203, 217);
  border-left: 1px solid rgb(201, 203, 217);
  border-top-left-radius: 6px;
  content: "";
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  right: calc((1.5rem - 2px) * -1);
  display: block;
}

.dropdown__selected-option {
  line-height: 1;
  white-space: nowrap;
}
.dropdown__selected-option:focus {
  outline: none;
}

.dropdown__selected-option > * {
  vertical-align: middle;
}

.dropdown__menu {
  position: absolute;
  z-index: 31;
  top: 100%;
  left: 0;
  display: none;
  width: 18rem;
  padding: 1rem 0;
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: left;
  list-style: none;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(201, 203, 217);
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dropdown__menu.react_component {
  display: block;
}

.dropdown__menu > *:not(:last-child) {
  margin-bottom: 0.5rem;
}

.dropdown__menu-item {
  font-size: 1rem;
  line-height: 1.5rem;
  display: block;
  padding-left: 1rem;
  color: rgb(115, 116, 128);
  cursor: pointer;
}
.dropdown__menu-item:hover {
  color: rgb(252, 78, 30);
}
.dropdown__menu-item:focus {
  padding-left: calc(1rem - 2px);
  color: rgb(38, 40, 56);
  border-left: 2px solid rgb(252, 78, 30);
}

.dropdown__menu-item > * {
  vertical-align: middle;
}

.dropdown.is-active .dropdown__menu {
  display: block;
}
.dropdown.is-active .dropdown__selected-item::after {
  display: block;
}

.dropdown--with-icons .dropdown__icon {
  margin-right: 0.5rem;
}

.feature-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.feature-list__item {
  padding-left: 2rem;
  margin-bottom: 1rem;
  background-image: url("data:image/svg+xml;base64,ICA8c3ZnIHZpZXdCb3g9IjAgMCAxOSAxNSIgd2lkdGg9IjE5IiBoZWlnaHQ9IjE1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yIDYuMTY4TDcuNTI1IDEyIDE3IDIiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlPSIjRkY2QjAwIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K");
  background-position: left 0.25rem;
  background-repeat: no-repeat;
  background-size: 1.1875rem 0.9375rem;
}

.feature-list--green .feature-list__item {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M2.282 6.232L0 8.574 6.93 16.5 18 3.842 15.718 1.5 6.931 11.548z'/%3E%3C/defs%3E%3Cuse fill='%2334b576' fill-rule='nonzero' xlink:href='%23a'/%3E%3C/svg%3E");
}

.footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: rgb(201, 203, 217);
  background-color: rgb(38, 40, 56);
}

.footer__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .footer__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

@media only screen and (min-width: 1200px) {
  .footer__row-1 {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .footer__row-1:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .footer__row-1 > * {
    float: left;
  }
  .footer__row-1 > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .footer__row-1 > :nth-child(1) {
    clear: left;
  }
  .footer__row-1 > :nth-child(2) {
    width: 38.1969970206%;
  }
}

@media only screen and (max-width: 767px) {
  .footer__row-2 {
    text-align: center;
  }
}
@media only screen and (min-width: 768px) {
  .footer__row-2 {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .footer__row-2:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .footer__row-2 > * {
    float: left;
  }
  .footer__row-2 > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .footer__row-2 > :nth-child(1) {
    clear: left;
  }
  .footer__row-2 > :nth-child(2) {
    width: 38.1969970206%;
  }
  .footer__row-2 > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.footer__nav-lists {
  word-wrap: break-word;
}
@media only screen and (min-width: 768px) {
  .footer__nav-lists {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .footer__nav-lists:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .footer__nav-lists > * {
    float: left;
  }
  .footer__nav-lists > :nth-child(1) {
    width: 33.3333333333%;
  }
  .no-flexbox .footer__nav-lists > :nth-child(1) {
    clear: left;
  }
  .footer__nav-lists > :nth-child(2) {
    width: 33.3333333333%;
  }
  .footer__nav-lists > :nth-child(3) {
    width: 33.3332333333%;
  }
  .footer__nav-lists > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media only screen and (max-width: 1199px) {
  .footer__nav-lists {
    margin-bottom: 2rem;
  }
  .footer__nav-lists::after {
    display: block;
    width: 100%;
    height: 0.0625rem;
    background-color: rgb(147, 150, 167);
    content: "";
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .footer__nav-lists::after {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
}

.footer__nav-lists > * {
  padding-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .footer__nav-lists > * {
    padding-bottom: 3rem;
  }
}

.footer__list {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.footer__list,
.footer__list-heading {
  font-size: 1rem;
  line-height: 1.5;
}

.footer__list-heading {
  margin-bottom: 0;
  font-weight: bold;
  color: rgb(255, 255, 255);
}

.footer__list--inline {
  padding-bottom: 2rem;
  margin-left: -0.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__list--inline {
    padding-bottom: 1rem;
  }
}

.footer__list--inline > * {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.footer__links a {
  color: inherit;
}
.footer__links a:hover, .footer__links a:focus, .footer__links a:active {
  color: rgb(252, 78, 30);
}

.footer__copy-legal,
.footer__copyright {
  font-size: 0.8125rem;
  margin-bottom: 0;
  color: rgb(147, 150, 167);
}

.footer__copy-legal {
  padding-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .footer__copy-legal {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    text-align: justify;
  }
}

@media only screen and (max-width: 767px) {
  .footer__copyright {
    padding-bottom: 1rem;
  }
}

.footer__list--social > * {
  display: inline-block;
}
.footer__list--social > *:not(:first-child) {
  padding-left: 0.5rem;
}

@media only screen and (min-width: 768px) {
  .footer__list--social {
    text-align: right;
  }
}

.header-overlay-open {
  overflow: hidden !important;
}

.header {
  font-size: 0.8125rem;
  position: relative;
  z-index: 30;
  line-height: 1.5;
}
@media only screen and (min-width: 480px) {
  .header {
    font-size: 1rem;
  }
}

.header__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .header__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

.header__upper,
.header__navbar,
.header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (min-width: 480px) {
  .header__navbar {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
}

.header__nav {
  margin-left: auto;
}

.header__primary .header__nav,
.header__secondary {
  overflow: hidden;
}

.header__upper {
  width: 100%;
  min-height: 3rem;
  background: rgb(255, 255, 255);
}
@media only screen and (max-width: 479px) {
  .header__upper {
    border-bottom: 1px solid rgb(201, 203, 217);
  }
}
@media only screen and (min-width: 480px) {
  .header__upper {
    min-height: 2rem;
    color: rgb(201, 203, 217);
    background-color: rgb(38, 40, 56);
  }
}

.header__border,
.header__navbar--secondary {
  border-bottom: 1px solid rgb(201, 203, 217);
}

.header__secondary {
  color: rgb(115, 116, 128);
}
@media only screen and (max-width: 479px) {
  .header__secondary {
    display: none;
  }
}

.header__secondary--fold-over {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}

.header__nav--controls {
  font-size: 0.8125rem;
  line-height: 1rem;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.header__nav--controls .header__nav-item {
  padding: 0.5rem;
}
.header__nav--controls .header__nav-item:last-child {
  padding-right: 0;
}

.header__nav-link {
  display: inline;
  padding: 0;
  background: none;
  border: 0;
}
.header__nav-link:not(:first-child) {
  margin-left: 1rem;
}

.header__primary .header__nav-link,
.header__secondary .header__nav-link {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media only screen and (max-width: 479px) {
  .header__primary .header__nav-link {
    line-height: 2;
  }
}
@media only screen and (min-width: 480px) {
  .header__primary .header__nav-link {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.header__primary .header__nav--scrollable {
  padding-right: 1rem;
}

.header__nav-link,
.header__secondary .header__nav-link,
.header__nav-item .header__nav-link {
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.header__nav-link:hover,
.header__secondary .header__nav-link:hover,
.header__nav-item .header__nav-link:hover {
  color: rgb(252, 78, 30);
}

.header__secondary .header__nav-link {
  font-size: 0.8125rem;
  line-height: 2;
}

@media only screen and (min-width: 480px) {
  .header__nav-item--compact {
    display: none;
  }
}

@media only screen and (max-width: 479px) {
  .header__nav-item--comfortable {
    display: none;
  }
}

.header__nav-item--comfortable > *,
.header__nav-item--compact > *,
.header__nav-link > * {
  vertical-align: middle;
}

.header__nav--scrollable {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.header__nav--scrollable::-webkit-scrollbar {
  display: none;
}

.header__logo {
  display: block;
  width: 6.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.header__logo img {
  display: block;
  width: 100%;
  padding-right: 0.5rem;
  vertical-align: middle;
}

.header__logo--compact {
  width: 5rem;
}

@media only screen and (min-width: 480px) {
  .header__logo--compact,
.header__logo--compact img {
    display: none;
  }
}

.header__logo--comfortable,
.header__logo--comfortable img {
  min-width: 6.25rem;
}
@media only screen and (max-width: 479px) {
  .header__logo--comfortable,
.header__logo--comfortable img {
    display: none;
  }
}

.header__page-title {
  padding-right: 1rem;
  font-weight: bold;
  white-space: nowrap;
}

.header__menu-icon::before,
.header__navbar--secondary::after {
  position: absolute;
  display: none;
  width: 1rem;
  height: 100%;
  pointer-events: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.15)), color-stop(60%, rgba(255, 255, 255, 0.95)));
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.95) 60%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.95) 60%);
  content: "";
}

.header__menu-icon {
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
}
.header__menu-icon::before {
  left: -1rem;
}
@media only screen and (max-width: 799px) {
  .header__menu-icon::before {
    display: block;
  }
}

.header__navbar--secondary {
  position: relative;
}
.header__navbar--secondary::after {
  right: 0;
}
@media only screen and (max-width: 799px) {
  .header__navbar--secondary::after {
    display: block;
  }
}

.header__nav-link.is-current {
  -webkit-box-shadow: inset 0 -0.125rem 0 rgb(255, 107, 0);
          box-shadow: inset 0 -0.125rem 0 rgb(255, 107, 0);
}
.header__nav-link.is-current:hover {
  -webkit-box-shadow: inset 0 -0.125rem 0 rgb(252, 78, 30);
          box-shadow: inset 0 -0.125rem 0 rgb(252, 78, 30);
}

.header__secondary .header__nav-link.is-current {
  font-weight: bold;
}

.header__nav-link--is-cta::after {
  display: block;
  height: 0.125rem;
  margin-top: -0.125rem;
  background-color: rgb(2, 141, 208);
  content: "";
}
.header__nav-link--is-cta:hover::after {
  background-color: rgb(252, 78, 30);
}

.header__secondary--inverse .header__navbar--secondary::after {
  display: none;
}
.header__secondary--inverse .header__page-title,
.header__secondary--inverse .header__nav-link:not(:hover) {
  color: rgb(255, 255, 255);
}
.header__secondary--inverse .header__navbar--secondary {
  border-color: rgb(255, 255, 255);
}
.header__secondary--inverse .header__nav-link.is-current {
  -webkit-box-shadow: inset 0 -0.125rem 0 rgb(255, 255, 255);
          box-shadow: inset 0 -0.125rem 0 rgb(255, 255, 255);
}
.header__secondary--inverse .header__nav-link.is-current:hover {
  -webkit-box-shadow: inset 0 -0.125rem 0 rgb(252, 78, 30);
          box-shadow: inset 0 -0.125rem 0 rgb(252, 78, 30);
}

.header-overlay {
  z-index: 43;
  position: fixed;
  top: 3rem;
  bottom: 0;
  left: 0;
  width: 100%;
}
@media only screen and (min-width: 480px) {
  .header-overlay {
    top: 2rem;
  }
}

.header.is-active .header__upper {
  position: fixed;
  z-index: 45;
  top: 0;
  left: 0;
}

.no-flexbox .header::after,
.no-flexbox .header__navbar::after {
  display: block;
  width: 100%;
  clear: both;
  content: "";
}
.no-flexbox .header__page-title,
.no-flexbox .header__logo {
  float: left;
}
.no-flexbox .header__nav {
  float: right;
}
.no-flexbox .header__navbar {
  width: 100%;
}
.no-flexbox .header__primary .header__nav {
  display: table;
}
.no-flexbox .header__nav > * {
  display: table-cell;
}
.no-flexbox .header__navbar--secondary .header__nav-link {
  display: inline-block;
  margin-left: 1rem;
}
.no-flexbox .header__page-title,
.no-flexbox .header__nav--scrollable {
  vertical-align: middle;
}

.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  fill: currentColor;
}

.icon--small {
  width: 0.8125rem;
  height: 0.8125rem;
}

.no-flexbox .hero {
  position: relative;
}
.no-flexbox .hero__content {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hero:not(.hero--editorial),
.hero__background {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero:not(.hero--editorial) > :first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hero:not(.hero--editorial) > :first-child,
.hero__background {
  min-height: 60vh;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media screen and (min-aspect-ratio: 1/1) {
  .hero:not(.hero--editorial) > :first-child,
.hero__background {
    min-height: 80vh;
  }
}
@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9) {
  .hero:not(.hero--editorial) > :first-child,
.hero__background {
    min-height: 55vw;
  }
}
@media screen and (min-aspect-ratio: 16/9) and (max-aspect-ratio: 21/9) {
  .hero:not(.hero--editorial) > :first-child,
.hero__background {
    min-height: 40vw;
  }
}
@media screen and (min-aspect-ratio: 21/9) {
  .hero:not(.hero--editorial) > :first-child,
.hero__background {
    min-height: 33vw;
  }
}

.hero__caption {
  font-size: 0.8125rem;
  line-height: 1rem;
  position: absolute;
  bottom: 0;
  padding: 0.5rem 0;
}
@media only screen and (min-width: 480px) {
  .hero__caption {
    right: 0;
    left: 0;
    text-align: center;
  }
}
@media only screen and (min-width: 1024px) {
  .hero__caption {
    padding: 1rem 0;
  }
}

.hero__content {
  width: 61.8029029794%;
  margin-right: 38.1969970206%;
}
@media only screen and (min-width: 480px) {
  .hero__content {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
@media screen and (max-aspect-ratio: 1/1) {
  .hero__content {
    width: 80.9007257173%;
    margin-right: 19.0991742827%;
  }
}

.hero__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .hero__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

.hero--with-sidekick .hero__caption {
  bottom: 3rem;
}

.hero--editorial {
  position: relative;
  display: block;
  margin-bottom: 5rem;
  background: none;
}
@media only screen and (max-width: 479px) {
  .hero--editorial {
    margin-bottom: auto;
  }
}
.hero--editorial .hero__content {
  position: absolute;
  bottom: -2.5rem;
  padding: 2rem;
}
@media only screen and (max-width: 479px) {
  .hero--editorial .hero__content {
    position: relative;
    bottom: auto;
    left: 0;
    padding: 1rem;
    margin-top: -10rem;
  }
}
.hero--editorial .hero__inner {
  width: auto;
  margin-right: 0;
  margin-left: 0;
}
@media only screen and (min-width: 480px) {
  .hero--editorial .hero__inner {
    width: 89.970920877%;
    margin-left: 5.0145395615%;
    margin-right: 5.0144395615%;
  }
}
@media only screen and (min-width: 1920px) {
  .hero--editorial .hero__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

@-webkit-keyframes icon-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes icon-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.svg-icon--processing {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: icon-rotate;
          animation-name: icon-rotate;
  -webkit-animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
          animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.meet-the-team {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.no-flexbox .meet-the-team::after {
  display: table;
  clear: both;
  content: "";
}

.meet-the-team__member {
  position: relative;
  padding: 1.5rem 1rem;
}

.no-flexbox .meet-the-team__member {
  float: left;
}

@media only screen and (max-width: 479px) {
  .meet-the-team__member {
    width: 50%;
  }
  .no-flexbox .meet-the-team__member:nth-child(2n+1) {
    clear: both;
  }
}
@media only screen and (min-width: 480px) and (max-width: 1199px) {
  .meet-the-team__member {
    width: 33.3333333333%;
  }
  .no-flexbox .meet-the-team__member:nth-child(3n+1) {
    clear: both;
  }
}
@media only screen and (min-width: 1200px) {
  .meet-the-team__member {
    width: 20%;
  }
  .no-flexbox .meet-the-team__member:nth-child(5n+1) {
    clear: both;
  }
}
.meet-the-team__detail {
  padding: 1rem;
}
@media only screen and (max-width: 639px) {
  .meet-the-team__detail .meet-the-team__detail-col:first-child {
    padding-bottom: 1rem;
  }
}
@media only screen and (min-width: 640px) {
  .meet-the-team__detail {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    padding: 2rem;
  }
  .no-flexbox .meet-the-team__detail:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .meet-the-team__detail > * {
    float: left;
  }
  .meet-the-team__detail > :nth-child(1) {
    width: 38.1970970206%;
  }
  .no-flexbox .meet-the-team__detail > :nth-child(1) {
    clear: left;
  }
  .meet-the-team__detail > :nth-child(2) {
    width: 61.8028029794%;
  }
  .meet-the-team__detail > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

body.modal-open {
  overflow: hidden;
}

.modal[aria-hidden=true] {
  display: none;
}

.modal {
  z-index: 40;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal__overlay {
  z-index: 41;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.modal__box {
  z-index: 42;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 4rem);
  max-width: 41rem;
  max-height: calc(100% - 4rem);
  min-height: 2rem;
  padding-bottom: 2rem;
  overflow-y: scroll;
  background: rgb(255, 255, 255);
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 639px) {
  .modal__box {
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
}

.modal__header {
  display: table;
  width: 100%;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  text-align: right;
}

.notice {
  overflow: hidden;
  background: rgb(247, 248, 254);
  border: 1px solid rgb(201, 203, 217);
  border-radius: 1.5rem;
}
.notice .notice__support-icon {
  color: rgb(147, 150, 167);
}

.notice__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
}

.notice__content .control-icon {
  margin-left: auto;
}

.notice__support-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.notice__support-icon,
.notice__support-icon + .notice__copy {
  margin-right: 0.5rem;
}

.notice__copy > * {
  margin: 0;
}

.notice__copy,
.notice__title {
  font-size: 1rem;
  line-height: 1.5rem;
}

.notice--compact,
.notice--compact .notice__content {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.notice--success {
  background: rgb(249, 255, 252);
  border-color: rgb(52, 181, 118);
}
.notice--success .notice__support-icon,
.notice--success .notice__title {
  color: rgb(52, 181, 118);
}

.notice--error {
  background: rgb(255, 250, 251);
  border-color: rgb(232, 32, 55);
}
.notice--error .notice__support-icon,
.notice--error .notice__title {
  color: rgb(232, 32, 55);
}

.notice--action {
  background: rgb(249, 253, 255);
  border-color: rgb(0, 155, 222);
}
.notice--action .notice-title {
  color: rgb(0, 155, 222);
}

.notice--attention {
  background-color: rgb(255, 255, 250);
  border-color: rgb(253, 225, 50);
}

.no-flexbox .notice--compact {
  display: inline-block;
}

.notice--small .notice__copy,
.notice--small .notice__title {
  font-size: 0.8125rem;
  line-height: 1rem;
}
.notice--small .notice__support-icon {
  width: 1rem;
  height: 1rem;
}

.notice--spacious .notice__content {
  padding: 1rem 1.5rem;
}

.notification {
  overflow: hidden;
  background: rgb(251, 243, 141);
  opacity: 1;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  -webkit-transition-property: height, opacity;
  -o-transition-property: height, opacity;
  transition-property: height, opacity;
  will-change: height, opacity;
}
@media only screen and (max-width: 767px) {
  .notification {
    text-align: center;
  }
}
.notification.is-collapsed {
  height: 0 !important;
  opacity: 0;
}

.notification__content {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
  padding: 1rem 0;
}
@media only screen and (min-width: 1920px) {
  .notification__content {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}
@media only screen and (min-width: 768px) {
  .notification__content {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto;
  }
  .no-flexbox .notification__content:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .notification__content > * {
    float: left;
  }
  .notification__content > :nth-child(1) {
    width: 12.7331340231%;
  }
  .no-flexbox .notification__content > :nth-child(1) {
    clear: left;
  }
  .notification__content > :nth-child(2) {
    width: 87.2667659769%;
  }
}
@media only screen and (min-width: 1400px) {
  .notification__content {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    width: auto;
  }
  .no-flexbox .notification__content:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .notification__content > * {
    float: left;
  }
  .notification__content > :nth-child(1) {
    width: 5.2792706782%;
  }
  .no-flexbox .notification__content > :nth-child(1) {
    clear: left;
  }
  .notification__content > :nth-child(2) {
    width: 94.7206293218%;
  }
}

.notification__icon {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.notification__icon > * {
  display: block;
  width: 100%;
  max-width: 2.5rem;
  max-height: 2.5rem;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .notification__icon > * {
    margin-bottom: 0.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .notification__icon > * {
    max-width: 3.5rem;
  }
}

.notification__title {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin: 0;
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
}

.notification__copy {
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .notification__copy {
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .notification__actionable {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .notification__actionable-copy {
    padding-right: 1.5rem;
  }
}

.notification__actionable-cta {
  white-space: nowrap;
}

.notification--success {
  color: rgb(255, 255, 255);
  background: rgb(15, 136, 77);
}

.notification--error {
  color: rgb(255, 255, 255);
  background: rgb(232, 32, 55);
}

.page-closer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.page-closer__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .page-closer__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

@media only screen and (max-width: 1199px) {
  .page-closer__contact {
    padding-bottom: 2rem;
  }
  .page-closer__nav-suggestion {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgb(201, 203, 217);
  }
}
@media only screen and (min-width: 1200px) {
  .page-closer__grid {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .page-closer__grid:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .page-closer__grid > * {
    float: left;
  }
  .page-closer__grid > :nth-child(1) {
    width: 35.0368124729%;
  }
  .no-flexbox .page-closer__grid > :nth-child(1) {
    clear: left;
  }
  .page-closer__grid > :nth-child(2) {
    width: 21.6543958424%;
  }
  .page-closer__grid > :nth-child(3) {
    width: 21.6543958424%;
  }
  .page-closer__grid > :nth-child(4) {
    width: 21.6542958424%;
  }
  .page-closer__grid > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .page-closer__grid .page-closer__links {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    width: 64.9631875271%;
  }
  .no-flexbox .page-closer__grid .page-closer__links:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .page-closer__grid .page-closer__links > * {
    float: left;
  }
  .page-closer__grid .page-closer__links > :nth-child(1) {
    width: 33.3333333333%;
  }
  .no-flexbox .page-closer__grid .page-closer__links > :nth-child(1) {
    clear: left;
  }
  .page-closer__grid .page-closer__links > :nth-child(2) {
    width: 33.3333333333%;
  }
  .page-closer__grid .page-closer__links > :nth-child(3) {
    width: 33.3332333333%;
  }
  .page-closer__grid .page-closer__links > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media only screen and (min-width: 800px) {
  .page-closer--3-col .page-closer__grid {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .page-closer--3-col .page-closer__grid:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .page-closer--3-col .page-closer__grid > * {
    float: left;
  }
  .page-closer--3-col .page-closer__grid > :nth-child(1) {
    width: 44.7208402432%;
  }
  .no-flexbox .page-closer--3-col .page-closer__grid > :nth-child(1) {
    clear: left;
  }
  .page-closer--3-col .page-closer__grid > :nth-child(2) {
    width: 27.6395798784%;
  }
  .page-closer--3-col .page-closer__grid > :nth-child(3) {
    width: 27.6394798784%;
  }
  .page-closer--3-col .page-closer__grid > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .page-closer--3-col .page-closer__grid .page-closer__links {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    width: 55.2791597568%;
  }
  .no-flexbox .page-closer--3-col .page-closer__grid .page-closer__links:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .page-closer--3-col .page-closer__grid .page-closer__links > * {
    float: left;
  }
  .page-closer--3-col .page-closer__grid .page-closer__links > :nth-child(1) {
    width: 50%;
  }
  .no-flexbox .page-closer--3-col .page-closer__grid .page-closer__links > :nth-child(1) {
    clear: left;
  }
  .page-closer--3-col .page-closer__grid .page-closer__links > :nth-child(2) {
    width: 49.9999%;
  }
  .page-closer--3-col .page-closer__grid .page-closer__links > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .page-closer--3-col .page-closer__grid .page-closer__contact {
    padding-bottom: 0;
  }
  .page-closer--3-col .page-closer__grid .page-closer__nav-suggestion {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
  }
}
.page-closer__links {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.page-closer__links > *:last-child {
  padding-right: 0;
  padding-bottom: 0;
}
.page-closer__links > *:first-child {
  padding-left: 0;
}

.page-closer__nav-suggestion {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.page-closer__link--bottom {
  -ms-flex-item-align: baseline;
      align-self: baseline;
  margin-top: auto;
}

.no-flexbox .profile:not(.profile--vertical):not(.profile--team) .react-version-img,
.no-flexbox .profile:not(.profile--vertical):not(.profile--team) .profile__picture,
.no-flexbox .profile:not(.profile--vertical):not(.profile--team) .profile__text {
  float: left;
}
.no-flexbox .profile:not(.profile--vertical):not(.profile--team)::after {
  display: table;
  clear: both;
  content: "";
}

.profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.profile__picture {
  width: 4rem;
  height: 4rem;
  margin-right: 1rem;
}

.profile__picture img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4rem;
}

.react-version-img {
  display: block;
  width: 4rem;
  height: 4rem;
  margin-right: 1rem;
  border-radius: 4rem;
}

.profile__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.profile__text-heading {
  margin: 0;
  font-size: 1.625rem;
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
  line-height: 1.8rem;
  color: rgb(66, 69, 84);
  cursor: default;
}

.profile__text-copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: "Roboto", Arial, sans-serif;
  color: rgb(115, 116, 128);
}

.cta-link.profile__text-team-member-name {
  padding: 0;
  margin: 0;
  margin-bottom: 0.5rem;
  font-weight: bold;
  line-height: 1;
}

.profile--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.profile--team {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.profile--team .profile__picture,
.profile--team .react-version-img {
  margin-right: auto;
  margin-left: auto;
}

.profile--team .profile__text {
  display: block;
  text-align: center;
}

.progress {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  background: rgb(147, 150, 167);
  border-radius: 0.25rem;
}

.progress__activity {
  width: 0;
  height: 100%;
  max-width: 100%;
  background: rgb(117, 34, 125);
  -webkit-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
}

.progress--green .progress__activity {
  background: rgb(52, 181, 118);
}

.is-complete .progress__activity {
  width: 100%;
  background: rgb(52, 181, 118);
}

.progress-indicator {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: rgb(169, 91, 166);
  text-transform: uppercase;
  background-color: rgb(249, 241, 250);
  border-radius: 1rem;
}

.quote__content {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-family: "Amasis", Georgia ,serif;
}
.quote__content::before {
  display: inline-block;
  width: 0.5rem;
  margin-left: -0.5rem;
  content: "“";
}
.quote__content::after {
  content: "”";
}

.quote__author {
  font-size: 1rem;
  line-height: 1.5rem;
  font-style: normal;
  color: rgb(115, 116, 128);
}
.quote__author::before {
  padding-right: 0.3rem;
  content: "—";
}

html[lang=de] .quote__content::before {
  content: "„";
}
html[lang=de] .quote__content::after {
  content: "“";
}

.quote--large .quote__content {
  font-size: 1.625rem;
  line-height: 2rem;
  font-weight: bold;
}
.quote--large .quote__content::before {
  width: 0.9rem;
  margin-left: -0.9rem;
}

@media only screen and (max-width: 799px) {
  .quote--shrink .quote__content {
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: "Roboto", Arial, sans-serif;
  }
}

.quote--trustpilot-author .quote__author {
  color: #00b67a;
}

.screamer {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.screamer__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .screamer__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

@media only screen and (min-width: 768px) {
  .screamer__inner {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto;
  }
  .no-flexbox .screamer__inner:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .screamer__inner > * {
    float: left;
  }
  .screamer__inner > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .screamer__inner > :nth-child(1) {
    clear: left;
  }
  .screamer__inner > :nth-child(2) {
    width: 38.1969970206%;
  }
  .screamer__inner > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .screamer__action,
.screamer__hook {
    margin-top: 1.75rem;
  }
}
@media only screen and (min-width: 768px) {
  .screamer__action,
.screamer__hook {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.screamer--centered .screamer__action,
.screamer--centered .screamer__hook {
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .screamer--centered .screamer__message {
    text-align: center;
  }
}

.bar-graph {
  max-width: 35rem;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
@supports (display: flex) {
  @media only screen and (min-width: 768px) {
    .bar-graph {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      width: 100%;
      max-width: 100%;
      margin-bottom: 2rem;
      border-bottom: solid 1px rgb(201, 203, 217);
    }
  }
}

@supports (display: flex) {
  @media only screen and (min-width: 768px) {
    .bar-graph > * {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
    }
  }
}

.bar-graph__group {
  position: relative;
  padding: 0 0 0 3rem;
  margin: 0 0 1rem;
  list-style: none;
}
@supports (display: flex) {
  @media only screen and (min-width: 768px) {
    .bar-graph__group {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      min-height: 17rem;
      padding: 0 1.5rem;
      margin-bottom: 0;
    }
  }
}

.bar-graph__group::after {
  position: absolute;
  top: 0;
  left: 3rem;
  height: calc(100% + 1rem);
  border-right: solid 1px rgb(201, 203, 217);
  content: "";
}
@media only screen and (min-width: 768px) {
  .bar-graph__group::after {
    content: initial;
  }
}

.bar-graph > li:first-child .bar-graph__group::after {
  top: -1rem;
  height: calc(100% + 2rem);
}

.bar-graph__group::before {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  color: rgb(115, 116, 128);
  text-align: center;
  content: attr(data-label);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@supports (display: flex) {
  @media only screen and (min-width: 768px) {
    .bar-graph__group::before {
      top: 100%;
      right: 0;
      width: 100%;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      -webkit-transform: initial;
          -ms-transform: initial;
              transform: initial;
    }
  }
}

.bar-graph--contrast .bar-graph__group::before {
  color: rgba(255, 255, 255, 0.7);
}

.bar-graph__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  line-height: 1.5rem;
}
@supports (display: flex) {
  @media only screen and (min-width: 768px) {
    .bar-graph__item {
      min-width: 2.5rem;
    }
  }
}

.bar-graph__item span {
  display: block;
  max-height: 1.5rem;
  padding: 0 0 0 0.5rem;
  border-style: solid;
  border-width: 0 2px 0 0;
}
@supports (display: flex) {
  @media only screen and (min-width: 768px) {
    .bar-graph__item span {
      position: absolute;
      bottom: 0;
      left: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: 100% !important;
      max-height: 100%;
      padding: 0 0 0.25rem;
      border-width: 2px 0 0;
    }
  }
}

.no-flexbox .bar-graph__item span,
.bar-graph--contrast .bar-graph__item span {
  color: rgb(255, 255, 255);
}

.bar-graph__item--blue span {
  color: rgb(0, 155, 222);
  background: rgb(0, 155, 222);
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 155, 222, 0.05)), to(rgba(0, 155, 222, 0.4)));
  background: -o-linear-gradient(left, rgba(0, 155, 222, 0.05) 0%, rgba(0, 155, 222, 0.4) 100%);
  background: linear-gradient(to right, rgba(0, 155, 222, 0.05) 0%, rgba(0, 155, 222, 0.4) 100%);
  border-color: rgb(0, 155, 222);
}
@media only screen and (min-width: 768px) {
  @supports (display: flex) {
    .bar-graph__item--blue span {
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 155, 222, 0.4)), to(rgba(0, 155, 222, 0.05)));
      background: -o-linear-gradient(top, rgba(0, 155, 222, 0.4) 0%, rgba(0, 155, 222, 0.05) 100%);
      background: linear-gradient(to bottom, rgba(0, 155, 222, 0.4) 0%, rgba(0, 155, 222, 0.05) 100%);
    }
  }
}

.bar-graph__item--green span {
  color: rgb(52, 181, 118);
  background: rgb(52, 181, 118);
  background: -webkit-gradient(linear, left top, right top, from(rgba(52, 181, 118, 0.05)), to(rgba(52, 181, 118, 0.4)));
  background: -o-linear-gradient(left, rgba(52, 181, 118, 0.05) 0%, rgba(52, 181, 118, 0.4) 100%);
  background: linear-gradient(to right, rgba(52, 181, 118, 0.05) 0%, rgba(52, 181, 118, 0.4) 100%);
  border-color: rgb(52, 181, 118);
}
@media only screen and (min-width: 768px) {
  @supports (display: flex) {
    .bar-graph__item--green span {
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(52, 181, 118, 0.4)), to(rgba(52, 181, 118, 0.05)));
      background: -o-linear-gradient(top, rgba(52, 181, 118, 0.4) 0%, rgba(52, 181, 118, 0.05) 100%);
      background: linear-gradient(to bottom, rgba(52, 181, 118, 0.4) 0%, rgba(52, 181, 118, 0.05) 100%);
    }
  }
}

.step-card {
  position: relative;
  max-width: 47rem;
  margin: 0 auto 1rem;
  overflow: hidden;
  background: rgb(255, 255, 255);
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
          box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
  -webkit-transition: height 0.4s;
  -o-transition: height 0.4s;
  transition: height 0.4s;
}

.step-card--grey {
  background: rgb(239, 240, 245);
  border: 1px solid rgb(201, 203, 217);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.step-card.is-collapsed {
  background: rgb(247, 248, 254);
  border: 1px solid rgb(201, 203, 217);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.step-card.is-inactive {
  color: rgb(115, 116, 128);
  pointer-events: none;
  border: 1px solid rgb(239, 240, 245);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.step-card__content,
.step-card__collapse,
.step-card__inactive {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
  padding-top: 4rem;
  padding-bottom: 4rem;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
  will-change: opacity;
}
@media only screen and (min-width: 480px) {
  .step-card__content,
.step-card__collapse,
.step-card__inactive {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}
@media only screen and (min-width: 640px) {
  .step-card__content,
.step-card__collapse,
.step-card__inactive {
    width: 67.9271357483%;
    margin-left: 16.0364321259%;
    margin-right: 16.0363321259%;
  }
}

.step-card__collapse,
.step-card__inactive {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.step-card__collapse,
.step-card.is-collapsed .step-card__content {
  opacity: 0;
}

.step-card.is-collapsed .step-card__collapse {
  opacity: 1;
}

.step-card__collapse,
.step-card__inactive,
.step-card.is-collapsed .step-card__content,
.step-card.is-inactive .step-card__content {
  display: none;
}

.step-card.is-collapsed .step-card__collapse,
.step-card.is-inactive .step-card__inactive {
  display: block;
}

.step-card__support-icon {
  width: 5.0145395615%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding-top: 2rem;
}
.step-card__support-icon::after {
  display: block;
  width: 1.75rem;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxOXB4IiBoZWlnaHQ9IjE1cHgiIHZpZXdCb3g9IjAgMCAxOSAxNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TbGljZSAxPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0idGljayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2U9IiMzNEI1NzYiPiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iU2hhcGUiIHBvaW50cz0iMCA0LjE2OCA1LjUyNSAxMCAxNSAwIj48L3BvbHlsaW5lPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
}
@media only screen and (max-width: 479px) {
  .step-card__support-icon {
    display: none;
  }
}
@media only screen and (min-width: 480px) {
  .step-card__support-icon {
    width: 11.294934833%;
  }
}
@media only screen and (min-width: 640px) {
  .step-card__support-icon {
    width: 16.0364321259%;
  }
}

.tablist {
  display: none;
}

@supports (display: flex) {
  @media only screen and (min-width: 640px) {
    .has-js .tabs--vertical {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      width: 100%;
    }
    .no-flexbox .has-js .tabs--vertical:after {
      display: block;
      width: 100%;
      clear: both;
      content: "";
    }
    .no-flexbox .has-js .tabs--vertical > * {
      float: left;
    }
    .has-js .tabs--vertical > :nth-child(1) {
      width: 27.6401604898%;
    }
    .no-flexbox .has-js .tabs--vertical > :nth-child(1) {
      clear: left;
    }
    .has-js .tabs--vertical > :nth-child(2) {
      width: 72.3597395102%;
    }
    .has-js .tabs--vertical > * {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .has-js .tabs--vertical .tablist {
      position: relative;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      padding-top: 5rem;
      border-right: 1px solid rgb(201, 203, 217);
      border-bottom: 0;
    }
    .has-js .tabs--vertical .tablist__item:nth-child(n+2) {
      margin-left: 0;
    }
    .has-js .tabs--vertical .tablist__link.is-selected::before,
.has-js .tabs--vertical .tablist__link:hover::before {
      top: 0;
      left: -1.5rem;
      width: 3px;
      height: 1.5rem;
      margin-top: auto;
      margin-bottom: auto;
    }
  }
  .has-js .tablist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    list-style: none;
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(201, 203, 217);
  }
  .has-js .tablist__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .has-js .tablist__item:nth-child(n+2) {
    margin-left: 2rem;
  }
  .has-js .tablist__link {
    position: relative;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: rgb(115, 116, 128);
  }
  .has-js .tablist__link.is-selected, .has-js .tablist__link:hover {
    color: rgb(38, 40, 56);
    outline: none;
  }
  .has-js .tablist__link.is-selected::before, .has-js .tablist__link:hover::before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    background: rgb(255, 107, 0);
    content: "";
  }
  .has-js .tabpanels {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .has-js .tabpanels__item.is-hidden {
    display: none;
  }
  .has-js .tabpanels__item.is-selected {
    display: block;
  }
}
.text-block__heading-bar--brand::after, .text-block__heading-bar--primary::after {
  display: block;
  width: 3rem;
  height: 0.1875rem;
  background-color: rgb(255, 107, 0);
  content: "";
}

.text-block--center {
  text-align: center;
}

.text-block--center .text-block__heading-bar--primary::after,
.text-block--center .text-block__heading-bar--brand::after {
  margin-right: auto;
  margin-left: auto;
}

.text-block > *:last-child {
  margin-bottom: 0;
}

.text-block__heading-bar--primary::after {
  margin-top: 0.5rem;
}

.text-block__heading-bar--brand::after {
  margin-top: 0.75rem;
}

.text-block__lead-paragraph {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-family: "Amasis", Georgia ,serif;
  font-weight: normal;
}
@media only screen and (min-width: 640px) {
  .text-block__lead-paragraph {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

.text-block .text-block__paragraph {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-block--xsmall .text-block__paragraph {
  color: rgb(115, 116, 128);
}

.totaliser {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.totaliser.is-started .totaliser__progress-indicator:first-child {
  color: rgb(52, 181, 118);
}
.totaliser.is-started .totaliser__progress::before {
  background: rgb(52, 181, 118);
}

.totaliser.is-complete .totaliser__progress-indicator:first-child {
  color: rgb(52, 181, 118);
}
.totaliser.is-complete .totaliser__progress::before, .totaliser.is-complete .totaliser__progress::after {
  background: rgb(52, 181, 118);
}

.totaliser__progress {
  position: relative;
  margin-top: 1rem;
  overflow: visible;
  background: rgb(239, 240, 245);
  border-radius: 0;
}
.totaliser__progress::before, .totaliser__progress::after {
  position: absolute;
  bottom: 0;
  display: block;
  width: 0.125rem;
  height: 1.25rem;
  background: rgb(239, 240, 245);
  content: "";
}
.totaliser__progress::before {
  left: 0;
}
.totaliser__progress::after {
  right: 0;
}

.totaliser__progress > * {
  background: rgb(52, 181, 118);
}

.trust-bar {
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.trust-bar__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
}
@media only screen and (min-width: 1920px) {
  .trust-bar__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}

.trust-bar__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.trust-bar__content > :nth-child(1) {
  padding-left: 0;
}
@media only screen and (min-width: 640px) {
  .trust-bar__content {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

.trust-bar__item {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.trust-bar__item img {
  max-width: 100%;
  max-height: 4rem;
}

.no-flexbox .trust-bar__content {
  display: table;
  width: 100%;
}
.no-flexbox .trust-bar__item {
  display: table-cell;
  width: 1%;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .trust-bar__content > :nth-child(n+4) {
    display: none;
  }
  .trust-bar__content > :nth-child(3) {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .trust-bar__content > :nth-child(n+5) {
    display: none;
  }
  .trust-bar__content > :nth-child(4) {
    padding-right: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .trust-bar__content > :nth-child(n+7) {
    display: none;
  }
  .trust-bar__content > :nth-child(6) {
    padding-right: 0;
  }
}
.trust-block__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.trust-block__wrapper > * {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.trust-block--full-width .trust-block__wrapper {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 1920px) {
  .trust-block--full-width .trust-block__wrapper {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}
@media only screen and (min-width: 640px) {
  .trust-block--full-width .trust-block__wrapper {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    width: auto;
  }
  .no-flexbox .trust-block--full-width .trust-block__wrapper:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .trust-block--full-width .trust-block__wrapper > * {
    float: left;
  }
  .trust-block--full-width .trust-block__wrapper > :nth-child(1) {
    width: 27.6401604898%;
  }
  .no-flexbox .trust-block--full-width .trust-block__wrapper > :nth-child(1) {
    clear: left;
  }
  .trust-block--full-width .trust-block__wrapper > :nth-child(2) {
    width: 72.3597395102%;
  }
  .trust-block--full-width .trust-block__wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.trust-block--full-width .trust-block__media {
  text-align: center;
}
@media only screen and (max-width: 639px) {
  .trust-block--full-width .trust-block__media {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

@media only screen and (max-width: 639px) {
  .trust-block--full-width .trust-block__content {
    text-align: center;
  }
}

.trustpilot {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.trustpilot.is-visible {
  opacity: 1;
}

.trustpilot__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.trustpilot__star-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.5rem;
}

.trustpilot__star {
  width: 1.25rem;
  height: 1.25rem;
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: contain;
}

.trustpilot__star--whole {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M0 0h24v24H0z'/%3E%3Cpath fill='%2300B67A' fill-rule='nonzero' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 15.984L15.527 15 17 20l-5-4.016zm8-5.877h-6.119L12 4l-1.881 6.107H4l4.952 3.786L7.072 20l4.952-3.785 3.047-2.322L20 10.107z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
}

.trustpilot__star--half {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M0 0h24v24H0z'/%3E%3Cpath fill='%2300B67A' fill-rule='nonzero' d='M0 0h12v24H0z'/%3E%3Cpath fill='%23DCDCE6' fill-rule='nonzero' d='M12 0h12v24H12z'/%3E%3Cpath d='M12 15.984L15.527 15 17 20l-5-4.016zm8-5.877h-6.119L12 4l-1.881 6.107H4l4.952 3.786L7.072 20l4.952-3.785 3.047-2.322L20 10.107z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
}

.trustpilot__star:not(:last-child) {
  margin-right: 0.125rem;
}

.trustpilot__headline-rating {
  font-size: 1.625rem;
  line-height: 2rem;
  margin-right: 0.5rem;
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
  color: #00b67a;
}

.trustpilot__tp-logo {
  width: 6rem;
}

.trustpilot__reviews-summary {
  margin-bottom: 0;
}

.trustpilot__review-count {
  color: rgb(115, 116, 128);
}

.trustpilot__review-count--with-divider {
  position: relative;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
}
.trustpilot__review-count--with-divider::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 0.0625rem;
  height: 1rem;
  background: rgb(147, 150, 167);
  content: "";
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.trustpilot:not(.trustpilot--small) .trustpilot__reviews-summary + .trustpilot__tp-logo {
  width: 7rem;
}

.trustpilot--small .trustpilot__star-group {
  margin-bottom: 0.3rem;
}
.trustpilot--small .trustpilot__star {
  width: 1rem;
  height: 1rem;
}
.trustpilot--small .trustpilot__headline-rating {
  font-size: 1.25rem;
  line-height: 1.5rem;
}
.trustpilot--small .trustpilot__tp-logo {
  width: 5rem;
}
.trustpilot--small .trustpilot__review-count {
  text-transform: uppercase;
}
.trustpilot--small .trustpilot__reviews-summary,
.trustpilot--small .trustpilot__review-count {
  font-size: 0.8125rem;
  line-height: 1rem;
}

.trustpilot--inverse .trustpilot__reviews-summary,
.trustpilot--inverse .trustpilot__review-count {
  color: rgb(239, 240, 245);
}
.trustpilot--inverse .trustpilot__headline-rating {
  color: rgb(255, 255, 255);
}

.trustpilot--centered .trustpilot__row {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.trustpilot--centered .trustpilot__headline-rating,
.trustpilot--centered .trustpilot__star-group {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

.uploader__call {
  display: inline-block;
  margin: 0.5rem 0.625rem;
}

.uploader__file-types {
  display: inline-block;
  margin: 0.5rem 0.625rem;
  white-space: nowrap;
}

.uploader__file-types > *:not(:last-child) {
  margin-right: 1rem;
}

.uploader__list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.uploader__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 2rem;
}
.uploader__item:not(:last-child) {
  margin-bottom: 1rem;
}

.uploader__file {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-right: 0.5rem;
}

.uploader__file > svg {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.uploader__file-name {
  padding-left: 2.5rem;
}

.uploader__actions {
  float: right;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.progress-circle {
  width: 2rem;
  height: 2rem;
}

.progress-circle__track {
  stroke: rgb(239, 240, 245);
  fill: none;
}

.progress-circle__progress {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transition: stroke-dashoffset 300ms linear;
  -o-transition: stroke-dashoffset 300ms linear;
  transition: stroke-dashoffset 300ms linear;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  stroke: rgb(143, 68, 138);
  fill: none;
  stroke-linecap: round;
}

.video-block {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(38, 40, 56, 0.9);
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-out;
  -o-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
}

.video-block.is-transitioning {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.video-block.is-visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
  -webkit-transition: opacity 0.8s ease-in;
  -o-transition: opacity 0.8s ease-in;
  transition: opacity 0.8s ease-in;
}

.no-flexbox .video-block.is-transitioning,
.no-flexbox .video-block.is-visible {
  display: block;
}

.video-block__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.control-button {
  display: inline-block;
  padding: calc((2rem - 1rem) / 2) 1rem;
  padding: calc(calc((2rem - 1rem) / 2) - 1px) 1rem;
  font-size: 1rem;
  line-height: 1;
  color: rgb(2, 141, 208);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  border-color: currentColor;
  border-style: solid;
  border-width: 1px;
  border-radius: 2rem;
  border-radius: calc(2rem / 2 + 4px);
}
.control-button:hover, .control-button:focus, .control-button:active {
  outline: none;
}
.control-button:hover {
  color: rgb(252, 78, 30);
  -webkit-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
.control-button:focus {
  margin: -3px;
  border-color: rgb(214, 166, 219);
  border-width: 4px;
}
.control-button:active {
  color: rgb(38, 40, 56);
  border-color: rgb(252, 78, 30);
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.control-button.is-disabled, .control-button[disabled] {
  color: #5c5c5c;
  pointer-events: none;
  border-color: #5c5c5c;
  opacity: 0.7;
}

.control-button--inverse {
  color: rgb(255, 255, 255);
}

.control-button--enlarged {
  position: relative;
}
.control-button--enlarged::before {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  content: "";
}

.control-button--icon-only {
  width: 2rem;
  height: 2rem;
  padding: 0;
  text-align: center;
}
.control-button--icon-only:focus {
  margin: 0;
}

.control-button--info {
  color: rgb(115, 116, 128);
  pointer-events: none;
  background: rgb(247, 248, 254);
  border-color: rgb(201, 203, 217);
}

.control-button--success {
  color: rgb(52, 181, 118);
  pointer-events: none;
  background: rgb(249, 255, 252);
  border-color: rgb(52, 181, 118);
}

.control-button--error {
  color: rgb(232, 32, 55);
  pointer-events: none;
  background: rgb(255, 250, 251);
  border-color: rgb(232, 32, 55);
}

.control-button--icon {
  position: relative;
}
.control-button--icon::after {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  display: block;
  width: 1rem;
  text-align: center;
  content: "";
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.control-button--icon-before {
  padding-left: 2rem;
}
.control-button--icon-before::after {
  left: 0.75rem;
}

.control-button--icon-after {
  padding-right: 2rem;
}
.control-button--icon-after::after {
  right: 0.75rem;
}

.control-button--icon-close::after {
  margin-top: -3px;
  font-size: 1.7rem;
  font-weight: 100;
  content: "×";
}

.control-button--icon-play::after {
  font-size: 0.9rem;
  content: "▶";
}

.control-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
}
.control-icon:hover .svg-icon, .control-icon:focus .svg-icon, .control-icon:active .svg-icon {
  color: rgb(252, 78, 30);
  outline: none;
  -webkit-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.cta-combo {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.cta-combo--minor {
  font-size: 1rem;
  line-height: 1.5rem;
}

.cta-combo__primary {
  display: inline-block;
  margin-right: 0.5rem;
}

.cta-combo__secondary-wrap {
  display: inline-block;
  padding-top: 0.5rem;
  color: inherit;
}
.cta-combo__secondary-wrap .cta-combo__secondary {
  margin-left: 0;
}

.form-checkbox__icon {
  border-radius: 15%;
}
.form-checkbox__input:checked + .form-checkbox__icon::before {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.form-checkbox__icon::before {
  width: 80%;
  height: 80%;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYyICg5MTM5MCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+UGFnZSAxIENvcHkgMjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ29udHJvbC0vLWNoZWNrYm94LS8tUy0vLWZvY3VzLTotc2VsZWN0ZWQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yLjAwMDAwMCwgLTcuMDAwMDAwKSIgc3Ryb2tlPSIjMDI4REQwIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhZ2UtMS1Db3B5LTIiIHBvaW50cz0iMyAxMiA2IDE1IDEzIDgiPjwvcG9seWxpbmU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.form-checkbox--loud {
  padding: 0;
}

.form-checkbox--loud .form-checkbox__icon {
  top: 1rem;
  left: 1rem;
}

.form-checkbox--loud .form-checkbox__label {
  display: block;
  padding: 1rem;
  padding-bottom: calc(1rem - 1px);
  padding-left: 3rem;
  background: rgb(249, 253, 255);
  border: 1px solid rgb(147, 150, 167);
}

.form-checkbox--loud .form-checkbox__input:checked ~ .form-checkbox__label,
.form-checkbox--loud:hover .form-checkbox__label {
  background: rgb(255, 250, 248);
}

.password-field {
  position: relative;
}

.password-field__button {
  position: absolute;
  top: 41px;
  right: 15px;
  z-index: 1;
  background-color: rgb(255, 255, 255);
}
@media only screen and (min-width: 1400px) {
  .password-field__button {
    top: 42px;
  }
}
@media only screen and (min-width: 1920px) {
  .password-field__button {
    top: 48px;
  }
}

.form-radio__icon {
  border-radius: 50%;
}
.form-radio__input:checked + .form-radio__icon::before {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.form-radio__icon::before {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(0, 0, 0);
  border-radius: 50%;
}

.search-list {
  right: 0;
  left: 0;
  max-height: 10rem;
  padding: 0;
  margin: 0;
  overflow: auto;
  list-style-type: none;
  background: rgb(255, 255, 255);
  -webkit-box-shadow: 0 0 0 1px rgb(147, 150, 167);
          box-shadow: 0 0 0 1px rgb(147, 150, 167);
}

.search-list--hidden {
  display: none;
}

.search-list__item {
  padding: 0.75rem 1rem;
}

.search-list__item--selected {
  background: rgb(238, 249, 255);
}

.search-list__item--active {
  background: rgb(238, 249, 255);
}

.form-stylised-radio {
  position: relative;
  display: inline-block;
}

.form-stylised-radio input {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: -1;
}

.form-stylised-radio__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.5rem 1rem;
  text-align: center;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(201, 203, 217);
  border-radius: 3px;
}
.form-stylised-radio--small .form-stylised-radio__label {
  padding: 0.25rem;
}

.form-stylised-radio input:hover + .form-stylised-radio__label {
  -webkit-box-shadow: 0 0 0 0.25rem rgb(201, 203, 217);
          box-shadow: 0 0 0 0.25rem rgb(201, 203, 217);
}

.form-stylised-radio input:focus + .form-stylised-radio__label {
  -webkit-box-shadow: 0 0 0 0.25rem rgb(188, 229, 248);
          box-shadow: 0 0 0 0.25rem rgb(188, 229, 248);
}

.form-stylised-radio input:checked + .form-stylised-radio__label {
  background-color: rgb(238, 249, 255);
  border: 1px solid rgb(0, 155, 222);
  -webkit-box-shadow: 0 0.25rem 0 0 rgb(0, 155, 222);
          box-shadow: 0 0.25rem 0 0 rgb(0, 155, 222);
}

.form-stylised-radio input:focus:checked + .form-stylised-radio__label {
  -webkit-box-shadow: 0 0.25rem 0 0 rgb(0, 155, 222), 0 0 0 0.25rem rgb(188, 229, 248);
          box-shadow: 0 0.25rem 0 0 rgb(0, 155, 222), 0 0 0 0.25rem rgb(188, 229, 248);
}

.form-stylised-radio input:disabled + .form-stylised-radio__label {
  color: rgb(147, 150, 167);
  cursor: default;
  background: rgb(239, 240, 245);
  border: 1px solid rgb(201, 203, 217);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.header-overlay[aria-hidden=true] {
  display: none;
}

.header-overlay__window {
  font-size: 1rem;
  line-height: 1.5rem;
  z-index: 44;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: rgb(247, 248, 254);
}

.header-overlay__top-row {
  display: table;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media only screen and (min-width: 480px) {
  .header-overlay__top-row {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

.header-overlay__top-row,
.header-overlay__row:not(:last-child) {
  position: relative;
}
.header-overlay__top-row::after,
.header-overlay__row:not(:last-child)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background: rgb(201, 203, 217);
  content: "";
}
@media only screen and (min-width: 480px) {
  .header-overlay__top-row::after,
.header-overlay__row:not(:last-child)::after {
    right: 1.5rem;
    left: 1.5rem;
  }
}

.header-overlay__row {
  margin-top: 2.5rem;
}

.header-overlay__top-row-item {
  display: table-cell;
  vertical-align: middle;
}

@media only screen and (min-width: 480px) {
  .header-overlay__top-row-item--geo {
    display: none;
  }
}

@media only screen and (max-width: 479px) {
  .header-overlay__top-row-item--logo {
    display: none;
  }
}

.header__close-btn {
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(38, 40, 56);
  background-color: transparent;
  border: 0;
}
.header__close-btn::before {
  padding-right: 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
  content: "×";
}

.header-overlay__lists {
  width: 100%;
}

.header-overlay__lists > * {
  padding-bottom: 2.5rem;
}
@media only screen and (min-width: 480px) {
  .header-overlay__lists > * {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media only screen and (min-width: 980px) {
  .header-overlay--extended .header-overlay__lists--main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .header-overlay--extended .header-overlay__lists--main > * {
    -ms-flex-preferred-size: 33%;
        flex-basis: 33%;
  }
}

@media only screen and (min-width: 980px) {
  .header-overlay__lists--main {
    display: table;
    table-layout: fixed;
  }
}

.header-overlay__lists--main > * {
  vertical-align: top;
}
@media only screen and (min-width: 480px) and (max-width: 979px) {
  .header-overlay__lists--main > * {
    display: inline-block;
    width: 49%;
    width: calc(50% - 0.5em);
  }
}
@media only screen and (min-width: 980px) {
  .header-overlay__lists--main > * {
    display: table-cell;
    width: 1%;
  }
}

.header-overlay__context-link {
  font-size: 1.25rem;
  margin-bottom: 0;
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
  line-height: 1;
}

.header-overlay__context-details {
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(115, 116, 128);
}

.header-overlay__context-details,
.header-overlay__context-cta {
  margin-bottom: 1.5rem;
}

.header-overlay__list {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.header-overlay__list > * {
  margin-bottom: 1rem;
  line-height: 1;
}

.header-overlay__footer-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.header-overlay__footer-lists > * {
  width: 100%;
}
@media only screen and (min-width: 980px) {
  .header-overlay__footer-lists > * {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
  }
}

.no-flexbox .header-overlay__footer-lists {
  display: table;
  table-layout: fixed;
}
.no-flexbox .header-overlay__footer-lists > * {
  display: table-cell;
  width: 1%;
  vertical-align: top;
}

.header-overlay__list-link {
  font-size: 1rem;
  line-height: 1;
  color: rgb(66, 69, 84);
}

.header-overlay__list-link--bold {
  font-weight: bold;
}

@media only screen and (min-width: 480px) {
  .hero-sidekick {
    position: relative;
    margin-top: -2.5rem;
  }
  .hero-sidekick::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
  }
  .hero-sidekick--alt {
    z-index: 10;
    height: 0;
    margin-top: 0;
    overflow: visible;
  }
  .hero-sidekick--alt::after {
    content: none;
  }
  .hero-sidekick--alt > * {
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media only screen and (min-width: 640px) {
  .hero-sidekick__content-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media only screen and (min-width: 640px) and (max-width: 1199px) {
  .hero-sidekick__content-grid {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .hero-sidekick__content-grid > * {
    width: calc(33.3333333333% - 2rem);
  }
  .hero-sidekick__content-grid > :last-child:nth-child(odd) {
    margin-right: calc(33.3333333333% + 1rem);
  }
}
@media only screen and (min-width: 1200px) {
  .hero-sidekick__content-grid > * {
    width: calc(20% - 2.4rem);
  }
}

.hero-sidekick__content {
  width: auto;
  margin-right: 0;
  margin-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  padding-top: 1rem;
  background-color: rgb(143, 68, 138);
}
@media only screen and (min-width: 480px) {
  .hero-sidekick__content {
    width: 89.970920877%;
    margin-left: 5.0145395615%;
    margin-right: 5.0144395615%;
  }
}
@media only screen and (min-width: 1920px) {
  .hero-sidekick__content {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}
.hero-sidekick__content > * {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}
@media only screen and (min-width: 480px) {
  .hero-sidekick__content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media only screen and (min-width: 480px) {
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__column-primary,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__column-primary {
    width: 61.8029029794%;
  }
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__column-secondary,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__column-secondary {
    width: 38.1969970206%;
  }
}
@media only screen and (min-width: 640px) {
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__column-primary,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__column-primary {
    width: 66.6666666667%;
  }
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__column-secondary,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__column-secondary {
    width: 33.3333333333%;
  }
}
@media only screen and (min-width: 1024px) {
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__column-primary,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__column-primary {
    width: 72.3598395102%;
  }
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__column-secondary,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__column-secondary {
    width: 27.6400604898%;
  }
}
@media only screen and (min-width: 640px) {
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__content-grid > *,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__content-grid > * {
    width: calc(50% - 1.5rem);
  }
}
@media only screen and (min-width: 1024px) {
  .hero-sidekick__content > :nth-last-child(n+2).hero-sidekick__content-grid > *,
.hero-sidekick__content > :nth-last-child(n+2) ~ *.hero-sidekick__content-grid > * {
    width: calc(25% - 2.25rem);
  }
}

.two-column-hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.two-column-hero__inner {
  width: 89.970920877%;
  margin-left: 5.0145395615%;
  margin-right: 5.0144395615%;
  min-height: 33vh;
  padding-top: 2.5rem;
}
@media only screen and (min-width: 1920px) {
  .two-column-hero__inner {
    width: 77.4101303341%;
    margin-left: 11.294934833%;
    margin-right: 11.294834833%;
  }
}
@media only screen and (min-width: 768px) {
  .two-column-hero__inner {
    padding: 2.5rem 0;
  }
}

.two-column-hero__container {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.no-flexbox .two-column-hero__container:after {
  display: block;
  width: 100%;
  clear: both;
  content: "";
}
.no-flexbox .two-column-hero__container > * {
  float: left;
}
.two-column-hero__container > :nth-child(1) {
  width: 100%;
}
.no-flexbox .two-column-hero__container > :nth-child(1) {
  clear: left;
}
@media only screen and (min-width: 768px) {
  .two-column-hero__container {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    -webkit-box-orient: inherit;
    -webkit-box-direction: inherit;
        -ms-flex-direction: inherit;
            flex-direction: inherit;
  }
  .no-flexbox .two-column-hero__container:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .two-column-hero__container > * {
    float: left;
  }
  .two-column-hero__container > :nth-child(1) {
    width: 61.8029029794%;
  }
  .no-flexbox .two-column-hero__container > :nth-child(1) {
    clear: left;
  }
  .two-column-hero__container > :nth-child(2) {
    width: 38.1969970206%;
  }
}

.two-column-hero__content-left {
  padding-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .two-column-hero__content-left {
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  .two-column-hero__content-right {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

.two-column-hero--v-centered {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.loud-process-diagram {
  padding: 0 1rem;
  list-style-type: none;
  background-color: rgb(255, 255, 255);
  counter-reset: process-diagram;
}

.loud-process-diagram__item {
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(117, 34, 125)), color-stop(50%, rgb(201, 203, 217))) fixed;
  background: -o-linear-gradient(top, rgb(117, 34, 125) 50%, rgb(201, 203, 217) 50%) fixed;
  background: linear-gradient(to bottom, rgb(117, 34, 125) 50%, rgb(201, 203, 217) 50%) fixed;
  background-color: rgb(117, 34, 125);
  border-radius: 2rem;
}
@media only screen and (max-width: 979px) {
  .loud-process-diagram__item {
    background-image: none;
  }
}

.loud-process-diagram__content {
  min-height: 4rem;
  background-clip: padding-box;
  background-color: rgb(255, 255, 255);
  border: 0 solid transparent;
}

.loud-process-diagram__item:nth-child(odd) {
  margin-right: 1rem;
}

.loud-process-diagram__item:nth-child(even) {
  margin-left: 1rem;
}

.loud-process-diagram__item:nth-child(odd) .loud-process-diagram__content {
  padding-left: 2rem;
  margin-right: -2rem;
  border-left-width: 2px;
}

.loud-process-diagram__item:nth-child(even) .loud-process-diagram__content {
  padding-right: 2rem;
  margin-left: -2rem;
  border-right-width: 2px;
}

.loud-process-diagram__item:not(:last-child) .loud-process-diagram__content {
  padding-bottom: 3rem;
  border-bottom-width: 2px;
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

.loud-process-diagram__item:not(:first-child) .loud-process-diagram__content {
  padding-top: 3rem;
  margin-top: -2px;
  border-top-width: 2px;
  border-top-right-radius: 2rem;
  border-top-left-radius: 2rem;
}

.loud-process-diagram__item:first-child {
  border-top-left-radius: 0;
}

.loud-process-diagram__item:last-child::before {
  position: absolute;
  top: calc(3rem + (1.5rem / 2));
  bottom: 0;
  width: 3px;
  background-color: rgb(255, 255, 255);
  content: "";
}

.loud-process-diagram__item:nth-child(odd):last-child::before {
  left: 0;
}

.loud-process-diagram__item:nth-child(even):last-child::before {
  right: 0;
}

.loud-process-diagram__content::after,
.loud-process-diagram__content::before {
  font-size: 0.8125rem;
  position: absolute;
  top: 3rem;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 1px;
  font-weight: bold;
  line-height: calc(1.5rem - 4px);
  color: rgb(117, 34, 125);
  text-align: center;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
}

.loud-process-diagram__content::before {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(117, 34, 125)), color-stop(50%, rgb(201, 203, 217))) fixed;
  background: -o-linear-gradient(top, rgb(117, 34, 125) 50%, rgb(201, 203, 217) 50%) fixed;
  background: linear-gradient(to bottom, rgb(117, 34, 125) 50%, rgb(201, 203, 217) 50%) fixed;
  background-color: rgb(117, 34, 125);
  content: "";
}
@media only screen and (max-width: 979px) {
  .loud-process-diagram__content::before {
    background-image: none;
  }
}

.loud-process-diagram__content::after {
  background-clip: padding-box;
  border: 2px solid transparent;
  content: counter(process-diagram);
  counter-increment: process-diagram;
}

.loud-process-diagram__item:first-child .loud-process-diagram__content::before,
.loud-process-diagram__item:first-child .loud-process-diagram__content::after {
  top: 0;
}

.loud-process-diagram__item:nth-child(odd) .loud-process-diagram__content::before,
.loud-process-diagram__item:nth-child(odd) .loud-process-diagram__content::after {
  left: calc(1.5rem / -2);
}

.loud-process-diagram__item:nth-child(even) .loud-process-diagram__content::before,
.loud-process-diagram__item:nth-child(even) .loud-process-diagram__content::after {
  right: calc(1.5rem / -2);
}

.process-diagram {
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: process-diagram;
}

.process-diagram__container {
  position: relative;
  padding-right: 1rem;
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}

.process-diagram__container::before {
  font-size: 0.8125rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 1.5rem;
  margin: 0 auto;
  font-weight: bold;
  line-height: calc(1.5rem - 4px);
  color: rgb(117, 34, 125);
  text-align: center;
  background-color: rgb(255, 255, 255);
  border: 2px solid;
  border-radius: 50%;
  content: counter(process-diagram);
  counter-increment: process-diagram;
}

@supports (display: flex) {
  .process-diagram__container::after {
    position: absolute;
    z-index: 0;
    background-color: rgb(117, 34, 125);
    content: "";
  }
  .process-diagram__container:not(:last-child)::after {
    top: 1.5rem;
    left: calc(0.75rem - 1px);
    width: 2px;
    height: 100%;
  }
}
@media only screen and (min-width: 800px) {
  .process-diagram--responsive {
    display: table;
    width: 100%;
    margin-bottom: 1.5rem;
    table-layout: fixed;
  }
  .process-diagram--responsive .process-diagram__content {
    max-width: 16rem;
    margin: 0 auto;
    text-align: center;
  }
}
@supports (display: flex) {
  @media only screen and (min-width: 800px) {
    .process-diagram--responsive {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
  }
  @media only screen and (min-width: 1024px) {
    .process-diagram--responsive {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
    }
  }
}

@media only screen and (min-width: 800px) {
  .process-diagram--responsive .process-diagram__container::before {
    left: calc(50% - 0.75rem);
  }
}
@media only screen and (min-width: 800px) {
  .process-diagram--responsive .process-diagram__container {
    display: table-cell;
    width: 1%;
    padding-top: 2.5rem;
    padding-left: 1rem;
    margin-bottom: initial;
  }
}
@supports (display: flex) {
  @media only screen and (min-width: 800px) and (max-width: 1023px) {
    .process-diagram--responsive .process-diagram__container {
      width: 50%;
      padding-top: 0;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(even)::before {
      top: -0.75rem;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(odd)::before {
      top: auto;
      bottom: -0.75rem;
    }
    .process-diagram--responsive .process-diagram__container:nth-last-child(n+4), .process-diagram--responsive .process-diagram__container:nth-last-child(n+4) ~ .process-diagram__container {
      width: 40%;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(even) {
      left: 25%;
      padding-top: 1.5rem;
    }
    .process-diagram--responsive .process-diagram__container:nth-last-child(n+4) ~ :nth-child(even) {
      left: 20%;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(2) {
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(3) {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(n+4) {
      -webkit-box-ordinal-group: 5;
          -ms-flex-order: 4;
              order: 4;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(odd) {
      padding-bottom: 1.5rem;
    }
  }
  @media only screen and (min-width: 1024px) {
    .process-diagram--responsive .process-diagram__container {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      padding-top: 2.5rem;
    }
  }
  @media only screen and (min-width: 800px) and (max-width: 1023px) {
    .process-diagram--responsive .process-diagram__container:nth-child(even):not(:last-child)::after {
      top: -1px;
    }
    .process-diagram--responsive .process-diagram__container:nth-child(odd):not(:last-child)::after {
      top: inherit;
      bottom: -1px;
    }
  }
  @media only screen and (min-width: 800px) {
    .process-diagram--responsive .process-diagram__container:not(:last-child)::after {
      left: 50%;
      width: 50%;
      height: 2px;
    }
  }
  @media only screen and (min-width: 1024px) {
    .process-diagram--responsive .process-diagram__container:not(:last-child)::after {
      top: 0.75rem;
      width: 100%;
    }
  }
}

.process-steps {
  position: relative;
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
  table-layout: fixed;
  counter-reset: process-steps;
}
@supports (display: flex) {
  .process-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.process-steps::before {
  position: absolute;
  bottom: calc(1.5rem / 2);
  left: 0;
  display: none;
  width: 100%;
  height: 2px;
  background-color: rgb(147, 150, 167);
  content: "";
}
@supports (display: flex) {
  .process-steps::before {
    display: block;
  }
}

.process-steps__item {
  position: relative;
  display: table-cell;
  width: 1%;
  color: rgb(147, 150, 167);
  vertical-align: bottom;
}
@supports (display: flex) {
  .process-steps__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: end;
        align-content: flex-end;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: auto;
  }
}
.process-steps__item::after {
  font-size: 0.8125rem;
  position: relative;
  top: -2px;
  z-index: 1;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  font-weight: bold;
  line-height: calc(1.5rem - 4px);
  color: rgb(147, 150, 167);
  text-align: center;
  background-color: rgb(255, 255, 255);
  border: 2px solid;
  border-radius: 50%;
  content: counter(process-steps);
  counter-increment: process-steps;
}
.process-steps__item.is-complete::after {
  color: rgb(52, 181, 118);
}
.process-steps__item.is-active::after {
  color: rgb(117, 34, 125);
}
.process-steps__item.is-active .process-steps__content {
  font-weight: bold;
}

.process-steps__content {
  position: relative;
  width: 100%;
  padding-right: 0.5rem;
  padding-bottom: 1rem;
  padding-left: 0.5rem;
}
@media only screen and (min-width: 480px) {
  .process-steps__content {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
@media only screen and (min-width: 800px) {
  .process-steps__content {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
.process-steps__content::after {
  position: absolute;
  right: 50%;
  bottom: calc(1.5rem / (-2));
  z-index: 0;
  width: 100%;
  height: 2px;
  background-color: rgb(147, 150, 167);
  content: "";
}

.process-steps__item:first-child .process-steps__content::after {
  width: 50%;
}

.process-steps__item.is-complete .process-steps__content::after {
  background-color: rgb(52, 181, 118);
}

.process-steps__item.is-active .process-steps__content::after {
  background-color: rgb(117, 34, 125);
}

@media only screen and (min-width: 768px) {
  .pull-column {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
  }
  .no-flexbox .pull-column:after {
    display: block;
    width: 100%;
    clear: both;
    content: "";
  }
  .no-flexbox .pull-column > * {
    float: left;
  }
  .pull-column > :nth-child(1) {
    width: 50%;
  }
  .no-flexbox .pull-column > :nth-child(1) {
    clear: left;
  }
  .pull-column > :nth-child(2) {
    width: 49.9999%;
  }
}

.pull-column__content {
  padding-right: 5.0145395615vw;
  padding-left: 5.0145395615vw;
}

.pull-column__content,
.pull-column__pulled {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
}

@media only screen and (max-width: 767px) {
  .pull-column--left .pull-column__content,
.pull-column--right .pull-column__pulled {
    padding-bottom: 2.5rem;
  }
  .pull-column--pulled-background .pull-column__pulled {
    padding-right: 5.0145395615vw;
    padding-left: 5.0145395615vw;
  }
}
@media only screen and (min-width: 768px) {
  .pull-column--left .pull-column__content {
    padding-right: 1.5rem;
    padding-left: 5.0145395615vw;
    padding-left: calc(5.0145395615vw + 1.5rem);
  }
  .pull-column--left .pull-column__pulled {
    padding-left: 1.5rem;
  }
  .pull-column--pulled-background.pull-column--left .pull-column__pulled {
    padding-right: 5.0145395615vw;
  }
  .pull-column--right .pull-column__content {
    padding-right: 5.0145395615vw;
    padding-right: calc(5.0145395615vw + 1.5rem);
    padding-left: 1.5rem;
  }
  .pull-column--right .pull-column__pulled {
    padding-right: 1.5rem;
  }
  .pull-column--pulled-background.pull-column--right .pull-column__content {
    padding-left: 5.0145395615vw;
  }
}
@media only screen and (min-width: 1920px) {
  .pull-column--left .pull-column__content {
    padding-left: 11.294934833vw;
    padding-left: calc(11.294934833vw + 1.5rem);
  }
  .pull-column--pulled-background.pull-column--left .pull-column__pulled {
    padding-right: 11.294934833vw;
  }
  .pull-column--right .pull-column__content {
    padding-right: 11.294934833vw;
    padding-right: calc(11.294934833vw + 1.5rem);
  }
  .pull-column--pulled-background.pull-column--right .pull-column__content {
    padding-left: 11.294934833vw;
  }
}
@media only screen and (max-width: 767px) {
  .pull-column--reorder-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .pull-column--reorder-items.pull-column--left .pull-column__content, .pull-column--reorder-items.pull-column--right .pull-column__pulled {
    padding-bottom: 1rem;
  }
  .pull-column--reorder-items.pull-column--right .pull-column__content, .pull-column--reorder-items.pull-column--left .pull-column__pulled {
    padding-bottom: 2.5rem;
  }
}

.form-element {
  margin-bottom: 1.5rem;
}
.form-element.is-error .form-element__elements {
  margin-bottom: 0.25rem;
}

.form-field-status {
  position: relative;
  padding-left: 1.25rem;
}

.form-field-status__icon {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(25%);
      -ms-transform: translateY(25%);
          transform: translateY(25%);
}

.form-field-status__copy {
  font-size: 0.8125rem;
  line-height: 1rem;
}

::-webkit-input-placeholder {
  color: rgb(147, 150, 167);
}

::-moz-placeholder {
  color: rgb(147, 150, 167);
}

:-ms-input-placeholder {
  color: rgb(147, 150, 167);
}

::-ms-input-placeholder {
  color: rgb(147, 150, 167);
}

::placeholder {
  color: rgb(147, 150, 167);
}

.form-input {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.form-input__element {
  font-size: 1rem;
  line-height: 1.5rem;
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  color: rgb(66, 69, 84);
  background-color: rgb(255, 255, 255);
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 0 0 1px rgb(201, 203, 217);
          box-shadow: 0 0 0 1px rgb(201, 203, 217);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-input__element:hover {
  -webkit-box-shadow: 0 0 0 1px rgb(115, 116, 128), 0 0 0 3px rgb(239, 240, 245);
          box-shadow: 0 0 0 1px rgb(115, 116, 128), 0 0 0 3px rgb(239, 240, 245);
}
.form-input__element:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 1px rgb(66, 69, 84), 0 0 0 3px rgb(188, 229, 248);
          box-shadow: 0 0 0 1px rgb(66, 69, 84), 0 0 0 3px rgb(188, 229, 248);
}
.form-input__element:disabled {
  background-color: rgb(239, 240, 245);
}
.form-input__element:disabled:placeholder {
  color: rgb(201, 203, 217);
}
.form-input__element:-moz-read-only {
  cursor: default;
}
.form-input__element:read-only {
  cursor: default;
}

.is-error .form-input__element {
  outline: none;
  -webkit-box-shadow: 0 0 0 1px rgb(232, 32, 55);
          box-shadow: 0 0 0 1px rgb(232, 32, 55);
}

.form-input--icon .form-input__element {
  padding-right: 2.5rem;
}

.form-input__icon {
  position: absolute;
  top: 0;
  right: 0.75rem;
  height: 3rem;
  padding: 0;
  line-height: 3rem;
  color: rgb(147, 150, 167);
}
.form-input__icon:not(.form-input__icon--control) {
  pointer-events: none;
}

.form-input__unit {
  padding: 0.75rem 1rem;
  line-height: 1;
  color: rgb(115, 116, 128);
  white-space: nowrap;
  background-color: rgb(239, 240, 245);
  -webkit-box-shadow: 0 0 0 1px rgb(201, 203, 217);
          box-shadow: 0 0 0 1px rgb(201, 203, 217);
}

.form-label {
  display: block;
  margin: 0 0 0.5rem;
  color: rgb(115, 116, 128);
}

.form-label > * {
  vertical-align: middle;
}

.form-label__icon-error,
.form-label__icon-success {
  display: none;
}

.is-error .form-label {
  color: rgb(206, 16, 37);
}

.is-error .form-label__icon-error,
.is-success .form-label__icon-success {
  display: inline-block;
  margin-left: 0.25rem;
  -webkit-animation: fade 0.44s linear alternate;
          animation: fade 0.44s linear alternate;
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.is-error .form-label__icon-error {
  -webkit-animation: error 0.44s linear alternate;
          animation: error 0.44s linear alternate;
}
@-webkit-keyframes error {
  0% {
    -webkit-transform: translate(-10px, 0);
            transform: translate(-10px, 0);
  }
  36% {
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
  }
  64% {
    -webkit-transform: translate(-6px, 0);
            transform: translate(-6px, 0);
  }
  82% {
    -webkit-transform: translate(6px, 0);
            transform: translate(6px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes error {
  0% {
    -webkit-transform: translate(-10px, 0);
            transform: translate(-10px, 0);
  }
  36% {
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0);
  }
  64% {
    -webkit-transform: translate(-6px, 0);
            transform: translate(-6px, 0);
  }
  82% {
    -webkit-transform: translate(6px, 0);
            transform: translate(6px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.is-success .form-label__icon-success {
  -webkit-animation: success 0.44s linear alternate;
          animation: success 0.44s linear alternate;
}
@-webkit-keyframes success {
  0% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }
  36% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
  64% {
    -webkit-transform: translate(0, -6px);
            transform: translate(0, -6px);
  }
  82% {
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes success {
  0% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }
  36% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
  64% {
    -webkit-transform: translate(0, -6px);
            transform: translate(0, -6px);
  }
  82% {
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.form-select {
  position: relative;
  display: block;
  width: 100%;
}
.form-select .is-disabled::after {
  background-color: rgb(239, 240, 245);
}
.form-select::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 3.5rem;
  height: 100%;
  pointer-events: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(1rem, rgb(255, 255, 255)));
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 1rem);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 1rem);
  content: "";
}

.form-select__element {
  font-size: 1rem;
  line-height: 1.5rem;
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  color: rgb(66, 69, 84);
  background-color: rgb(255, 255, 255);
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 0 0 1px rgb(201, 203, 217);
          box-shadow: 0 0 0 1px rgb(201, 203, 217);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.form-select__element:hover {
  -webkit-box-shadow: 0 0 0 1px rgb(115, 116, 128), 0 0 0 3px rgb(239, 240, 245);
          box-shadow: 0 0 0 1px rgb(115, 116, 128), 0 0 0 3px rgb(239, 240, 245);
}
.form-select__element:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 1px rgb(66, 69, 84), 0 0 0 3px rgb(188, 229, 248);
          box-shadow: 0 0 0 1px rgb(66, 69, 84), 0 0 0 3px rgb(188, 229, 248);
}
.form-select__element:disabled {
  background-color: rgb(239, 240, 245);
}
.form-select__element:disabled:placeholder {
  color: rgb(201, 203, 217);
}

.is-error .form-select__element {
  outline: none;
  -webkit-box-shadow: 0 0 0 1px rgb(232, 32, 55);
          box-shadow: 0 0 0 1px rgb(232, 32, 55);
}

.form-select--icon .form-select__element {
  padding-right: 2.5rem;
}

.form-select__icon {
  position: absolute;
  top: 0;
  right: 0.75rem;
  z-index: 1;
  height: 3rem;
  line-height: 3rem;
  color: rgb(147, 150, 167);
  pointer-events: none;
}

.brand-heading {
  font-size: 2.625rem;
  font-family: "Selfmade-Sans", Impact, sans-serif;
  line-height: 0.9;
  color: rgb(117, 34, 125);
  text-transform: uppercase;
}
@media only screen and (min-width: 480px) {
  .brand-heading {
    font-size: 4.25rem;
  }
}

@media only screen and (min-width: 768px) {
  .brand-heading--hero {
    font-size: 5.375rem;
  }
}

.brand-heading--small {
  font-size: 2.0625rem;
}
@media only screen and (min-width: 480px) {
  .brand-heading--small {
    font-size: 3.3125rem;
  }
}
@media only screen and (min-width: 768px) {
  .brand-heading--small {
    font-size: 4.25rem;
  }
}

.paragraph-heading {
  margin-bottom: 0.5rem;
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
}

.paragraph-heading--large {
  font-size: 1.625rem;
  line-height: 2rem;
}

.paragraph-heading--medium {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.paragraph-heading--small {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0;
  font-family: "Roboto", Arial, sans-serif;
}

.section-heading {
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
  color: rgb(117, 34, 125);
}

.section-heading--large {
  font-size: 2.625rem;
  line-height: 3rem;
}
@media only screen and (min-width: 480px) {
  .section-heading--large {
    font-size: 3.3125rem;
    line-height: 3.5rem;
  }
}

.section-heading--medium {
  font-size: 2.0625rem;
  line-height: 2.5rem;
}
@media only screen and (min-width: 480px) {
  .section-heading--medium {
    font-size: 2.625rem;
    line-height: 3rem;
  }
}

.section-heading--small {
  font-size: 1.625rem;
  line-height: 2rem;
}
@media only screen and (min-width: 480px) {
  .section-heading--small {
    font-size: 2.0625rem;
    line-height: 2.5rem;
  }
}

.label {
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
  font-weight: normal;
  color: rgb(115, 116, 128);
}

.label--small,
.label--accent {
  text-transform: uppercase;
}

.label--small {
  font-size: 0.8125rem;
  line-height: 1rem;
}

.label--accent {
  color: rgb(252, 78, 30);
}

.lead-paragraph {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-bottom: 0;
  font-family: "Amasis", Georgia ,serif;
  font-weight: normal;
}

.lead-paragraph--large {
  font-size: 1.25rem;
  line-height: 1.5rem;
}
@media only screen and (min-width: 480px) {
  .lead-paragraph--large {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}

.stat {
  font-size: 2.0625rem;
  margin: 0;
  font-family: "Amasis", Georgia ,serif;
  font-weight: bold;
  line-height: 2rem;
  color: rgb(117, 34, 125);
}