/*! normalize.css v8.0.1 | 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 iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  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
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

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

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 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;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[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 Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/**
 * Global: normalize
 * Combines normalize.css and some custome itp normalizations
 */

/**
 * A very simple reset that sits on top of Normalize.css.
 */
blockquote,
body,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
ol,
p,
pre,
ul {
  padding: 0;
  margin: 0;
}

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

/**
 * Remove default table spacing.
 */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/**
 * Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 * on fieldsets.
 */
fieldset {
  min-width: 0;
  border: 0;
}
/**
 * Default animation custom properties
 */
:root {
  --animationDurationPrimary: .1s;
  --animationDurationSecondary: .2s;
  --animationDurationTertiary: .3s;
  --animationEasingPrimary:
    cubic-bezier(
      .25,
      .1,
      .25,
      1
    ); /* Ease in - out */

  --animationEasingSecondary:
    cubic-bezier(
      .68,
      -.55,
      .265,
      1.55
    ); /* Bounce */
}
/**
 * Default breakpoint custom properties and media queries
 */
@custom-media --bp1 (min-width: 20rem);
@custom-media --bp2 (min-width: 30rem);
@custom-media --bp3 (min-width: 42.5rem);
@custom-media --bp4 (min-width: 60rem);
@custom-media --bp5 (min-width: 71.25rem);

:root {
  --bp1: calc(320 / 16 * 1rem);
  --bp2: calc(480 / 16 * 1rem);
  --bp3: calc(680 / 16 * 1rem);
  --bp4: calc(960 / 16 * 1rem);
  --bp5: calc(1140 / 16 * 1rem);
}
/**
 * Default UI custom properties
 */
:root {
  --borderStyle: solid;
  --borderWidth: 1px;
  --radius: 5px;
}
/**
 * Default typography custom properties
 */
:root {
  /**
   * Modular scale
   * Configure at https://www.modularscale.com
   */
  --ms-1:                   14; /* 0.875rem; */
  --ms-2:                   12; /* 0.75rem; */
  --ms-3:                   10; /* 0.625rem; */
  --ms0:                    16; /* 1rem; */
  --ms1:                    18; /* 1.125rem; */
  --ms2:                    20; /* 1.25rem; */
  --ms3:                    24; /* 1.5rem; */
  --ms4:                    28; /* 1.75rem; */
  --ms5:                    32; /* 2rem; */
  --ms6:                    36; /* 2.25rem; */
  --ms7:                    42; /* 2.625rem; */
  --ms8:                    48; /* 3rem; */
  --ms9:                    56; /* 3.5rem; */
  --ms10:                   64; /* 4rem; */
  --ms11:                   72; /* 4.5rem; */
  --ms12:                   96; /* 6rem; */

  /**
   * Font properties
   */
  --fontFamilyPrimary:    sans-serif;
  --fontFamilySecondary:  serif;
  --fontSizePrimary:      16;
  --fontWeightPrimary:    400;
  --fontWeightSecondary:  700;
  --fontWeightTertiary:   300;
  --lineHeightPrimary:    1.5;

  /**
   * The baseline unit is a global unit used to calculate
   * the perfect line-height based on the primary font-size and line-height.
   * In this case:
   * 16 x 1,5 = 24
   */
  --baselineUnit:          calc(var(--fontSizePrimary) * var(--lineHeightPrimary));

  /**
   * Typography
   */
  --h1FontFamily:                          var(--fontFamilyPrimary);
  --h1FontSizeBase:                        calc(var(--ms6) / var(--fontSizePrimary));
  --h1FontSize:                            calc(var(--h1FontSizeBase) * 1rem);
  --h1FontWeight:                          var(--fontWeightSecondary);
  --h1LineHeight:                          1.25;
  --h1MarginBottom:                        1rem;

  --h2FontFamily:                          var(--fontFamilyPrimary);
  --h2FontSizeBase:                        calc(var(--ms4) / var(--fontSizePrimary));
  --h2FontSize:                            calc(var(--h2FontSizeBase) * 1rem);
  --h2FontWeight:                          var(--fontWeightSecondary);
  --h2LineHeight:                          1.25;
  --h2MarginBottom:                        1rem;

  --h3FontFamily:                          var(--fontFamilyPrimary);
  --h3FontSizeBase:                        calc(var(--ms3) / var(--fontSizePrimary));
  --h3FontSize:                            calc(var(--h3FontSizeBase) * 1rem);
  --h3FontWeight:                          var(--fontWeightSecondary);
  --h3LineHeight:                          1.5;
  --h3MarginBottom:                        1rem;

  --h4FontFamily:                          var(--fontFamilyPrimary);
  --h4FontSizeBase:                        calc(var(--ms0) / var(--fontSizePrimary));
  --h4FontSize:                            calc(var(--h4FontSizeBase) * 1rem);
  --h4FontWeight:                          var(--fontWeightSecondary);
  --h4LineHeight:                          1.5;
  --h4MarginBottom:                        1rem;

  --h5FontFamily:                          var(--fontFamilyPrimary);
  --h5FontSizeBase:                        calc(var(--ms0) / var(--fontSizePrimary));
  --h5FontSize:                            calc(var(--h5FontSizeBase) * 1rem);
  --h5FontWeight:                          var(--fontWeightSecondary);
  --h5LineHeight:                          1.5;
  --h5MarginBottom:                        1rem;

  --h6FontFamily:                          var(--fontFamilyPrimary);
  --h6FontSizeBase:                        calc(var(--ms0) / var(--fontSizePrimary));
  --h6FontSize:                            calc(var(--h6FontSizeBase) * 1rem);
  --h6FontWeight:                          var(--fontWeightSecondary);
  --h6LineHeight:                          1.5;
  --h6MarginBottom:                        1rem;

  --baseIndent:                            2rem;
  --baseLineHeight:                        1.5;
  --baseMarginBottom:                      1rem;

  --blockquoteFontSizeBase:                calc(var(--ms2) / var(--fontSizePrimary));
  --blockquoteFontSize:                    calc(var(--blockquoteFontSizeBase) * 1rem);
  --blockquoteFontStyle:                   normal;
  --blockquoteLineHeight:                  1.25;
  --blockquoteMarginBottom:                1rem;

  --smallFontSize:                         calc(var(--ms-1) / var(--fontSizePrimary) * 1rem);
  --smallLineHeight:                       1;
  --smallMarginBottom:                     0;

  --horizontalRuleBorderColor:             var(--colorNeutral200);
  --horizontalRuleBorderStyle:             solid;
  --horizontalRuleBorderWidth:             1px 0 0;
  --horizontalRuleMarginBottom:            1rem;

  --linkColorFocus:                        var(--colorPrimary500);
  --linkColorHover:                        var(--colorPrimary500);
  --linkColorVisited:                      var(--colorPrimary);
  --linkColor:                             var(--colorPrimary);
  --linkDecorationHover:                   underline;
  --linkDecoration:                        underline;
  --linkFontWeight:                        bold;
  --linkOutlineFocus:                      thin dotted;
  --linkOutline:                           0;
  --linkTransition:                        none;
}
/**
 * Default page custom properties
 */
:root {
  --htmlBackgroundColor: var(--colorWhite);
  --htmlFontFamily: var(--fontFamilyPrimary);
  --htmlFontSize: var(--fontSizePrimary);
  --htmlFontWeight: var(--fontWeightPrimary);
  --htmlLineHeight: var(--lineHeightPrimary);
  --htmlOverflowY: scroll;
  --htmlBoxSizing: border-box;
  --htmlHeight: 100%;
  --bodyColor: var(--colorNeutral800);
  --bodySelectionBackgroundColor: var(--colorPrimary100);
  --bodySelectionColor: var(--colorPrimary800);
  --bodySelectionTextShadow: none;
}
/**
 * Default color custom properties
 */
:root {
  /* Neutrals */
  --colorWhite: #fff;
  --colorBlack: #000;
  --colorNeutral100: #edf0f2;
  --colorNeutral200: #dfe5ea;
  --colorNeutral300: #aeb3bb;
  --colorNeutral400: #9399a4;
  --colorNeutral500: #77808d;
  --colorNeutral600: #5c6677;
  --colorNeutral700: #414d60;
  --colorNeutral800: #414d60;
  --colorNeutral900: #263349;

  /* Primaries */
  --colorPrimary: #009;
  --colorPrimary100: #d9e1f9;
  --colorPrimary200: #b9c4f0;
  --colorPrimary300: #99a7e7;
  --colorPrimary400: #798bdd;
  --colorPrimary500: #596ed4;
  --colorPrimary600: #3951cb;
  --colorPrimary700: #1e1fb7;
  --colorPrimary800: #009;
  --colorPrimary900: #000069;

  /* States */
  --colorError: #ff4136;
  --colorSuccess: #2ecc40;
  --colorNotice: #3951cb;
}
/**
 * Default form custom properties
 */
:root {
  --fieldsetBorder: 0;
  --fieldsetMarginBottom: 1rem;
  --labelFontSize: var(--smallFontSize);
  --labelLineHeight: var(--smallLineHeight);
  --labelMarginBottom: .25rem;
  --legendFontSize: var(--baseFontSize);
  --legendLineHeight: var(--baseLineHeight);
  --legendMarginBottom: 1rem;
  --placeholderColor: var(--colorNeutral500);
  --placeholderFontFamily: var(--fontFamilyPrimary);
  --placeholderFontStyle: italic;
}
/*
  Default grid properties
*/
:root {
  --gridMaxWidth: var(--bp5);
  --gridGutter: 1rem;
}
/**
 * Default spacing custom properties
 */
:root {
  --spacingBase: 1rem;
  --spacingLarge: 3rem;
}
/*
  Default video and embed properties
*/
:root {
  --mediaEmbedRatio: 62.5%;
  --mediaEmbedMarginBottom: 1rem;
}
/*
  Default frame properties
*/
:root {
  --frameLeftWidth: 17.1875rem; /* 275px */
  --frameRightWidth: 17.1875rem; /* 275px */
}

/**
 * Global: page
 * Default markup for page level elements
 */

/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  box-sizing: var(--htmlBoxSizing);
  min-height: var(--htmlHeight); /* [3] */
  overflow-y: var(--htmlOverflowY); /* [2] */
  font-family: var(--htmlFontFamily);
  font-size: calc(var(--htmlFontSize) / 16 * 100%); /* 1 */
  font-weight: var(--htmlFontWeight); /* 1 */
  line-height: var(--htmlLineHeight);
  background-color: var(--htmlBackgroundColor);
}

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

body {
  -webkit-font-smoothing: antialiased;
  color: var(--bodyColor);
}

::-moz-selection { /* stylelint-disable-line */
  color: var(--bodySelectionColor);
  text-shadow: var(--bodySelectionTextShadow);
  background-color: var(--bodySelectionBackgroundColor);
}

::selection {
  color: var(--bodySelectionColor);
  text-shadow: var(--bodySelectionTextShadow);
  background-color: var(--bodySelectionBackgroundColor);
}
/**
 * Global: typography
 * Default markup for typographic elements
 */
h1 {
  margin-bottom: var(--h1MarginBottom);
  font-family: var(--h1FontFamily);
  font-size: var(--h1FontSize);
  font-weight: var(--h1FontWeight);
  line-height: var(--h1LineHeight);
}

h2 {
  margin-bottom: var(--h2MarginBottom);
  font-family: var(--h2FontFamily);
  font-size: var(--h2FontSize);
  font-weight: var(--h2FontWeight);
  line-height: var(--h2LineHeight);
}

h3 {
  margin-bottom: var(--h3MarginBottom);
  font-family: var(--h3FontFamily);
  font-size: var(--h3FontSize);
  font-weight: var(--h3FontWeight);
  line-height: var(--h3LineHeight);
}

h4 {
  margin-bottom: var(--h4MarginBottom);
  font-family: var(--h4FontFamily);
  font-size: var(--h4FontSize);
  font-weight: var(--h4FontWeight);
  line-height: var(--h4LineHeight);
}

h5 {
  margin-bottom: var(--h5MarginBottom);
  font-family: var(--h5FontFamily);
  font-size: var(--h5FontSize);
  font-weight: var(--h5FontWeight);
  line-height: var(--h5LineHeight);
}

h6 {
  margin-bottom: var(--h6MarginBottom);
  font-family: var(--h6FontFamily);
  font-size: var(--h6FontSize);
  font-weight: var(--h6FontWeight);
  line-height: var(--h6LineHeight);
}

p,
ol,
ul,
dl,
table,
address {
  margin-bottom: var(--baseMarginBottom);
  font-size: var(--baseFontSize);
  line-height: var(--baseLineHeight);
}

ul,
ol,
blockquote {
  padding-left: var(--baseIndent);
}

li > ul,
li > ol {
  margin-bottom: 0;
}

blockquote {
  margin-bottom: var(--blockquoteMarginBottom);
  font-size: var(--blockquoteFontSize);
  font-style: var(--blockquoteFontStyle);
  line-height: var(--blockquoteLineHeight);
}

blockquote > p {
  font-size: inherit;
  line-height: inherit;
}

small {
  margin-bottom: var(--smallMarginBottom);
  font-size: var(--smallFontSize);
  line-height: var(--smallLineHeight);
}

hr {
  margin: 0 0 var(--horizontalRuleMarginBottom);
  clear: both;
  border-color: var(--horizontalRuleBorderColor);
  border-style: var(--horizontalRuleBorderStyle);
  border-width: var(--horizontalRuleBorderWidth);
}

a {
  font-weight: var(--linkFontWeight);
  color: var(--linkColor);
  text-decoration: var(--linkDecoration);
  transition: var(--linkTransition);
}

a:visited {
  color: var(--linkColorVisited);
}

a:hover {
  color: var(--linkColorHover);
  text-decoration: var(--linkDecorationHover);
}

a:focus {
  color: var(--linkColorFocus);
  outline: var(--linkOutlineFocus);
}

a:hover,
a:active {
  outline: var(--linkOutline);
}
/**
 * Global: image
 * Default markup for the image elements
 */

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

/**
 * If a `width` and/or `height` attribute has been explicitly defined, let’s
 * not make the image fluid.
 */
/* stylelint-disable */
img[width],
img[height] {
  /* stylelint-enable */
  max-width: none;
}
/**
 * Global: form
 * Default markup for the form elements
 */
fieldset {
  margin-bottom: var(--fieldsetMarginBottom);
  border: var(--fieldsetBorder);
}

legend,
label {
  display: block;
  width: 100%;
  cursor: pointer;
}

legend {
  margin-bottom: var(--legendMarginBottom);
  font-size: var(--legendFontSize);
  line-height: var(--legendLineHeight);
}

label {
  margin-bottom: var(--labelMarginBottom);
  font-size: var(--labelFontSize);
  line-height: var(--labelLineHeight);
}

textarea {
  height: auto;
  resize: none;
}

/* stylelint-disable */
[placeholder],
:-ms-input-placeholder,
::-moz-placeholder,
::-webkit-input-placeholder {
  /* stylelint-enable */
  font-family: var(--placeholderFontFamily);
  font-style: var(--placeholderFontStyle);
  color: var(--placeholderColor);
  text-overflow: ellipsis;
}

/* Firefox inner border fix */
/* stylelint-disable */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  /* stylelint-enable */
  padding: 0;
  border: 0;
}
/**
 * Global
 * Combines all global components
 */
/**
 * Frame
 *
 * Frame layout a.k.a Holy Grail Layout.
 * Frame allows you to create common design patterns like header, sidebars and footer.
 * https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
 *
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from
 *    letting these items shrink to smaller than their content's default
 *    minimum size. See http://bit.ly/1Mn35US for details.
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.

 */

/*
 * NOTE: This design pattern should be created with CSS Grid once our browsersupport drops IE11
 * https://alligator.io/css/css-grid-holy-grail-layout/
 */

.l-Frame {
  display: flex;
  flex-direction: column;
  height: 100%; /* 1, 3 */
}

.l-Frame__header,
.l-Frame__footer {
  flex: none; /* 2 */
}

.l-Frame__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.l-Frame__main {
  flex: 1;
  min-height: 100%;
  overflow-y: auto;
}

@media (--bp4) {
  .l-Frame__body {
    flex-direction: row;
  }

  .l-Frame__left {
    flex-basis: var(--frameLeftWidth);
    flex-grow: 0;
    width: var(--frameLeftWidth);
  }

  .l-Frame__right {
    flex-basis: var(--frameRightWidth);
    flex-grow: 0;
    width: var(--frameRightWidth);
  }
}
/**
 * Grid
 * Grid system, works together with Width utilities.
 */
.l-Container {
  max-width: var(--gridMaxWidth);
  margin-right: auto;
  margin-left: auto;
}

.l-Grid {
  display: flex;
  flex-flow: row wrap;
}

/**
 * Modifier: gutters
 */

.l-Grid--gutter {
  margin: 0 calc(var(--gridGutter) * -1);
}

.l-Grid--gutter > .l-Grid__item {
  padding: 0 var(--gridGutter);
}

/**
 * Modifier: allow cells to equal distribute width
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
 *    http://git.io/vllWx
 */

.l-Grid--fill > .l-Grid__item {
  flex: 1 1 0%; /* 1 */
}

/**
 * Modifier: allow children of cells to fill height
 */

.l-Grid--equalHeight > .l-Grid__item {
  display: flex;
}

/**
 * No explicit width by default. Rely on combining a cell with a dimension
 * utility or a component class that extends 'Grid'.
 *
 * 1. Set flex items to full width by default
 * 2. Fix issue where elements with overflow extend past the
 *    `.Grid > *` container - https://git.io/vw5oF
 */

.l-Grid__item {
  flex-basis: 100%; /* 1 */
  min-width: 0; /* 2 */
  min-height: 1px;
}
/*
    Layout: Media embed
    Responsive media embedding object, for use with iframes
*/

.l-MediaEmbed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: var(--mediaEmbedRatio);
  margin-bottom: var(--mediaEmbedMarginBottom);
  overflow: hidden;
}

.l-MediaEmbed > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/**
 * Row
 * Creates a horizontal row with padding
 */
.l-Row {
  padding: var(--spacingBase) var(--spacingBase) 0;
}

@media (--bp3) {
  .l-Row {
    padding-right: var(--spacingLarge);
    padding-left: var(--spacingLarge);
  }
}
/**
 * ITP Table
 * Responsive tables and table layout helpers
 */
.l-Table > thead {
  display: none; /* hide header on mobile */
}

.l-Table > tbody > tr > th { /* stylelint-disable-line */
  display: block;
  width: 100%;
}

.l-Table > tbody > tr > td { /* stylelint-disable-line */
  display: block; /* stack cells */
}

.l-Table::before {
  content: attr(headers) ": "; /* move header title contents next to cell content */
}

@media (--bp2) {
  .l-Table > thead {
    display: table-header-group; /* default table layout */
  }

  /* stylelint-disable */
  .l-Table > tbody > tr > td,
  .l-Table > tbody > tr > th {
    /* stylelint-enable */
    display: table-cell; /* default table layout */
  }

  .l-Table > tbody > tr > th { /* stylelint-disable-line */
    width: initial; /* reset back to initial width */
  }

  .l-Table > tbody > tr > td::before { /* stylelint-disable-line */
    display: none; /* hide header title contents */
  }
}

/**
 * Equal-width table cells
 * `table-layout: fixed` forces all cells within a table to occupy the same
 * width as each other. This also has performance benefits: because the browser
 * does not need to (re)calculate cell dimensions based on content it discovers,
 * the table can be rendered very quickly. Further reading:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
 */
.l-Table--fixed {
  table-layout: fixed;
}
/**
 * Global
 * Combines all layout components
 */
/**
 * Flexbox utilities
 *
 * These utilities can be used manipulate the itpGrid
 *
 * Flexbox playground: https://codepen.io/enxaneta/full/adLPwv
 */

/**
 * Apply flex behaviour
 */

.u-Flex {
  display: flex;
}

@media (--bp1) {
  .u-Flex--bp1 {
    display: flex;
  }
}

@media (--bp2) {
  .u-Flex--bp2 {
    display: flex;
  }
}

@media (--bp3) {
  .u-Flex--bp3 {
    display: flex;
  }
}

@media (--bp4) {
  .u-Flex--bp4 {
    display: flex;
  }
}

@media (--bp5) {
  .u-Flex--bp5 {
    display: flex;
  }
}

/**
 * Wrapping
 */

.u-FlexWrap {
  flex-wrap: wrap;
}

.u-FlexNoWrap {
  flex-wrap: nowrap;
}

.u-FlexWrapReverse {
  flex-wrap: wrap-reverse;
}

/**
 * Directions
 */

.u-FlexRow {
  flex-direction: row;
}

.u-FlexRowReverse {
  flex-direction: row-reverse;
}

.u-FlexColumn {
  flex-direction: column;
}

.u-FlexColumnReverse {
  flex-direction: column-reverse;
}

/**
 * Align items vertically
 */

.u-FlexAlignItemsStart {
  align-items: flex-start;
}

.u-FlexAlignItemsEnd {
  align-items: flex-end;
}

.u-FlexAlignItemsCenter {
  align-items: center;
}

.u-FlexAlignItemsStretch {
  align-items: stretch;
}

.u-FlexAlignItemsBaseline {
  align-items: baseline;
}

/**
 * Align a single items vertically
 */

.u-FlexAlignSelfStart {
  align-self: start;
}

.u-FlexAlignSelfCenter {
  align-self: center;
}

.u-FlexAlignSelfEnd {
  align-self: end;
}

.u-FlexAlignSelfStretch {
  align-self: stretch;
}

.u-FlexAlignSelfBaseline {
  align-self: baseline;
}

/**
 * Align items horizontally
 */

.u-FlexJustifyStart {
  justify-content: flex-start;
}

.u-FlexJustifyEnd {
  justify-content: flex-end;
}

.u-FlexJustifyCenter {
  justify-content: center;
}

.u-FlexJustifySpaceAround {
  justify-content: space-around;
}

.u-FlexJustifySpaceBetween {
  justify-content: space-between;
}
.u-SpacingMt0 {
  margin-top: 0;
}

.u-SpacingMb0 {
  margin-bottom: 0;
}

.u-SpacingPt0 {
  padding-top: 0;
}

.u-SpacingPb0 {
  padding-bottom: 0;
}

.u-SpacingMt1 {
  margin-top: var(--spacingBase);
}

.u-SpacingMb1 {
  margin-bottom: var(--spacingBase);
}

.u-SpacingPt1 {
  padding-top: var(--spacingBase);
}

.u-SpacingPb1 {
  padding-bottom: var(--spacingBase);
}

.u-SpacingMt2 {
  margin-top: calc(var(--spacingBase) * 2);
}

.u-SpacingMb2 {
  margin-bottom: calc(var(--spacingBase) * 2);
}

.u-SpacingPt2 {
  padding-top: calc(var(--spacingBase) * 2);
}

.u-SpacingPb2 {
  padding-bottom: calc(var(--spacingBase) * 2);
}

.u-SpacingMt3 {
  margin-top: calc(var(--spacingBase) * 3);
}

.u-SpacingMb3 {
  margin-bottom: calc(var(--spacingBase) * 3);
}

.u-SpacingPt3 {
  padding-top: calc(var(--spacingBase) * 3);
}

.u-SpacingPb3 {
  padding-bottom: calc(var(--spacingBase) * 3);
}

.u-SpacingMt4 {
  margin-top: calc(var(--spacingBase) * 4);
}

.u-SpacingMb4 {
  margin-bottom: calc(var(--spacingBase) * 4);
}

.u-SpacingPt4 {
  padding-top: calc(var(--spacingBase) * 4);
}

.u-SpacingPb4 {
  padding-bottom: calc(var(--spacingBase) * 4);
}
/**
 * Sizing utilities
 *
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
 *
 * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
 *    http://git.io/vllMD
 */
/* stylelint-disable declaration-no-important */
.u-Width1of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 12) !important;
}

.u-Width1of10 {
  flex-basis: auto !important;
  width: 10% !important;
}

.u-Width1of8 {
  flex-basis: auto !important;
  width: 12.5% !important;
}

.u-Width1of6,
.u-Width2of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 6) !important;
}

.u-Width1of5,
.u-Width2of10 {
  flex-basis: auto !important;
  width: 20% !important;
}

.u-Width1of4,
.u-Width2of8,
.u-Width3of12 {
  flex-basis: auto !important;
  width: 25% !important;
}

.u-Width3of10 {
  flex-basis: auto !important;
  width: 30% !important;
}

.u-Width1of3,
.u-Width2of6,
.u-Width4of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 3) !important;
}

.u-Width3of8 {
  flex-basis: auto !important;
  width: 37.5% !important;
}

.u-Width2of5,
.u-Width4of10 {
  flex-basis: auto !important;
  width: 40% !important;
}

.u-Width5of12 {
  flex-basis: auto !important;
  width: calc(100% * 5 / 12) !important;
}

.u-Width1of2,
.u-Width2of4,
.u-Width3of6,
.u-Width4of8,
.u-Width5of10,
.u-Width6of12 {
  flex-basis: auto !important;
  width: 50% !important;
}

.u-Width7of12 {
  flex-basis: auto !important;
  width: calc(100% * 7 / 12) !important;
}

.u-Width3of5,
.u-Width6of10 {
  flex-basis: auto !important;
  width: 60% !important;
}

.u-Width5of8 {
  flex-basis: auto !important;
  width: 62.5% !important;
}

.u-Width2of3,
.u-Width4of6,
.u-Width8of12 {
  flex-basis: auto !important;
  width: calc(100% * 2 / 3) !important;
}

.u-Width7of10 {
  flex-basis: auto !important;
  width: 70% !important;
}

.u-Width3of4,
.u-Width6of8,
.u-Width9of12 {
  flex-basis: auto !important;
  width: 75% !important;
}

.u-Width4of5,
.u-Width8of10 {
  flex-basis: auto !important;
  width: 80% !important;
}

.u-Width5of6,
.u-Width10of12 {
  flex-basis: auto !important;
  width: calc(100% * 5 / 6) !important;
}

.u-Width7of8 {
  flex-basis: auto !important;
  width: 87.5% !important;
}

.u-Width9of10 {
  flex-basis: auto !important;
  width: 90% !important;
}

.u-Width11of12 {
  flex-basis: auto !important;
  width: calc(100% * 11 / 12) !important;
}

@media (--bp1) {
  .u-Width1of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp1 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp1 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp1,
  .u-Width2of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp1,
  .u-Width2of10--bp1 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp1,
  .u-Width2of8--bp1,
  .u-Width3of12--bp1 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp1 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp1,
  .u-Width2of6--bp1,
  .u-Width4of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp1 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp1,
  .u-Width4of10--bp1 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp1,
  .u-Width2of4--bp1,
  .u-Width3of6--bp1,
  .u-Width4of8--bp1,
  .u-Width5of10--bp1,
  .u-Width6of12--bp1 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp1,
  .u-Width6of10--bp1 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp1 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp1,
  .u-Width4of6--bp1,
  .u-Width8of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp1 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp1,
  .u-Width6of8--bp1,
  .u-Width9of12--bp1 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp1,
  .u-Width8of10--bp1 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp1,
  .u-Width10of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp1 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp1 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp2) {
  .u-Width1of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp2 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp2 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp2,
  .u-Width2of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp2,
  .u-Width2of10--bp2 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp2,
  .u-Width2of8--bp2,
  .u-Width3of12--bp2 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp2 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp2,
  .u-Width2of6--bp2,
  .u-Width4of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp2 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp2,
  .u-Width4of10--bp2 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp2,
  .u-Width2of4--bp2,
  .u-Width3of6--bp2,
  .u-Width4of8--bp2,
  .u-Width5of10--bp2,
  .u-Width6of12--bp2 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp2,
  .u-Width6of10--bp2 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp2 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp2,
  .u-Width4of6--bp2,
  .u-Width8of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp2 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp2,
  .u-Width6of8--bp2,
  .u-Width9of12--bp2 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp2,
  .u-Width8of10--bp2 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp2,
  .u-Width10of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp2 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp2 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp3) {
  .u-Width1of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp3 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp3 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp3,
  .u-Width2of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp3,
  .u-Width2of10--bp3 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp3,
  .u-Width2of8--bp3,
  .u-Width3of12--bp3 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp3 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp3,
  .u-Width2of6--bp3,
  .u-Width4of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp3 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp3,
  .u-Width4of10--bp3 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp3,
  .u-Width2of4--bp3,
  .u-Width3of6--bp3,
  .u-Width4of8--bp3,
  .u-Width5of10--bp3,
  .u-Width6of12--bp3 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp3,
  .u-Width6of10--bp3 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp3 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp3,
  .u-Width4of6--bp3,
  .u-Width8of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp3 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp3,
  .u-Width6of8--bp3,
  .u-Width9of12--bp3 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp3,
  .u-Width8of10--bp3 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp3,
  .u-Width10of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp3 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp3 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp4) {
  .u-Width1of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp4 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp4 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp4,
  .u-Width2of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp4,
  .u-Width2of10--bp4 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp4,
  .u-Width2of8--bp4,
  .u-Width3of12--bp4 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp4 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp4,
  .u-Width2of6--bp4,
  .u-Width4of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp4 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp4,
  .u-Width4of10--bp4 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp4,
  .u-Width2of4--bp4,
  .u-Width3of6--bp4,
  .u-Width4of8--bp4,
  .u-Width5of10--bp4,
  .u-Width6of12--bp4 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp4,
  .u-Width6of10--bp4 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp4 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp4,
  .u-Width4of6--bp4,
  .u-Width8of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp4 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp4,
  .u-Width6of8--bp4,
  .u-Width9of12--bp4 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp4,
  .u-Width8of10--bp4 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp4,
  .u-Width10of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp4 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp4 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp5) {
  .u-Width1of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp5 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp5 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp5,
  .u-Width2of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp5,
  .u-Width2of10--bp5 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp5,
  .u-Width2of8--bp5,
  .u-Width3of12--bp5 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp5 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp5,
  .u-Width2of6--bp5,
  .u-Width4of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp5 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp5,
  .u-Width4of10--bp5 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp5,
  .u-Width2of4--bp5,
  .u-Width3of6--bp5,
  .u-Width4of8--bp5,
  .u-Width5of10--bp5,
  .u-Width6of12--bp5 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp5,
  .u-Width6of10--bp5 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp5 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp5,
  .u-Width4of6--bp5,
  .u-Width8of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp5 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp5,
  .u-Width6of8--bp5,
  .u-Width9of12--bp5 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp5,
  .u-Width8of10--bp5 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp5,
  .u-Width10of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp5 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp5 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
/* stylelint-enable declaration-no-important */
/**
 * Global
 * Combines all utilities
 */
/**
 * All
 * Combines all properties, global components, layout and utilities
 */