@charset "UTF-8";
:root {
  /* Tokens and variables */
  /* To get started, replace these example design tokens with your own, unique values. */
  /* Typography
// ========================================== */
  /* Start with the names and weights of your primary typeface: */
  --font-family: 'Nunito Sans', sans-serif;
  --font-weight-light: 300;
  --font-weight: 400;
  --font-weight-bold: 700;
  /* And the name and weights of your supporting typeface: */
  --font-family-alt: 'Nunito Sans', sans-serif;
  --font-weight-light-alt: 300;
  --font-weight-alt: 400;
  --font-weight-bold-alt: 900;
  /* Add values for your typographic hierarchy in em/rem units: */
  /* Very large sizes */
  --font-size-xxx-display: 18.488;
  --font-size-xx-display: 12.839;
  --font-size-x-display: 9.699;
  --font-size-display: 5.16;
  /* Large sizes */
  --font-size-xxxx-large: 2.986;
  --font-size-xxx-large: 2.488;
  --font-size-xx-large: 2.074;
  --font-size-x-large: 1.728;
  --font-size-large: 1.44;
  /* Regular sizes */
  --font-size-medium: 1.2;
  --font-size: 1;
  /* Small sizes */
  --font-size-small: 0.833;
  --font-size-x-small: 0.694;
  --font-size-xx-small: 0.579;
  /* Colour
// ========================================== */
  /* Add hex values to your colour palette,, starting with your primary colour.
   Each set of colours includes one base value, plus four tints, two dark and two light. */
  --color-primary: #0b76a1;
  --color-primary-dark: #023347;
  --color-primary-light: #00aeef;
  /* Accent colour: */
  --color-accent-yellow: #f0cc63;
  --color-accent-orange: #b8471a;
  --color-accent-red: #bf2e1b;
  --color-accent-green: #4a7637;
  --color-accent-green-light: #6eba4e;
  --color-dark-green: #6f9c37;
  /* Base colour: */
  --color-base: #000000;
  --color-base-dark: #2a303a;
  --color-base-darker: #1f2432;
  --color-base-light: #f3f6f8;
  --color-base-lighter: #fafafa;
  --color-base-lightest: #ffffff;
  /* And two pairs of colours for type, one to contrast against light backgrounds
   and another for dark backgrounds. */
  --color-text-default: #282828;
  --color-text-default-light: #3b3b3f;
  --color-text-alt: #676767;
  --color-text-inverse: #ffffff;
  --color-text-inverse-alt: #d8e1e9;
  /* Finally, add two colours for positive and negative messages. They’ll be used
   for backgrounds, borders and as text colours. */
  --color-negative: #1f2432;
  --color-negative-light: #2a303a;
  --color-positive: #c2d1d9;
  --color-positive-light: #f2f5f7;
  /* DESIGN TOKENS */
  /* Universal values that can be applied to any element, regardless of content or kind.
   Design tokens are distinct from variables for use with pre-processors such as LESS or SaSS.
   Replace these example design tokens with your own, unique values. */
  /* Brand colour
// ========================================== */
  --color-brand: #0b76a1;
  --color-brand-dark: #023347;
  --color-brand-darker: undefined;
  --color-border-brand: #0b76a1;
  --color-border-brand-dark: #023347;
  --color-border-brand-darker: undefined;
  --color-border-brand-light: #00aeef;
  --color-border-brand-lighter: undefined;
  --color-text-brand: #0b76a1;
  /* Background colours
// ========================================== */
  --color-background: #fff;
  --color-background-alt: #fafafa;
  --color-background-inverse: #0b76a1;
  --color-background-negative: #1f2432;
  --color-background-positive: #c2d1d9;
  --color-background-selection: #f9f8f7;
  --color-background-active: #eeebe8;
  /* Border colours
// ========================================== */
  --color-border: #e0dbda;
  --color-border-inverse: undefined;
  --color-border-negative: #1f2432;
  --color-border-positive: #c2d1d9;
  --color-border-separator: #e0dbda;
  --color-border-separator-inverse: undefined;
  /* Border radius
// ========================================== */
  --border-radius-x-small: 2px;
  --border-radius-small: 5px;
  --border-radius-medium: 1rem;
  --border-radius-large: 100rem;
  --border-radius-circle: 50%;
  /* Border widths
// ========================================== */
  --border-width-hairline: 1px;
  --border-width-thin: 2px;
  --border-width-thick: 3px;
  /* Alternative type colours
// ========================================== */
  --color-text-negative: #1f2432;
  --color-text-positive: #c2d1d9;
  /* Line heights
// ========================================== */
  --line-height-text: 1.5;
  --line-height-heading: 1.25;
  /* Spacing
// ========================================== */
  --max-width: 30rem;
  --spacing-xx-small: 0.125rem;
  --spacing-x-small: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing: 0.75rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-x-large: 2rem;
  --spacing-xx-large: 3rem;
  --spacing-xxx-large: 10rem;
  --spacing-xxxx-large: 20rem;
  /* Timing
// ========================================== */
  --duration-instantly: 0;
  --duration-immediately: 0.05s;
  --duration-quickly: 0.1s;
  --duration-promptly: 0.2s;
  --duration-slowly: 0.4s;
  /* VARIABLES */
  /* Can be applied to a specific kind of element, for example a button or an input.
   Replace these example variables with your own, unique values. */
  /* Buttons
// ========================================== */
  --line-height-button: 1.5;
  --line-height-button-small: 1.25;
  /* default */
  --color-background-button-default: #0b76a1;
  --color-background-button-default-active: #00aeef;
  --color-background-button-default-disabled: #f3f6f8;
  --color-background-button-default-focus: #00aeef;
  --color-background-button-default-hover: #00aeef;
  --color-border-button-default: #c2d1d9;
  --color-border-button-default-active: undefined;
  --color-border-button-default-disabled: #f3f6f8;
  --color-border-button-default-focus: undefined;
  --color-border-button-default-hover: undefined;
  --color-text-button-default: #ffffff;
  --color-text-button-default-active: #ffffff;
  --color-text-button-default-disabled: #676767;
  --color-text-button-default-focus: #ffffff;
  --color-text-button-default-hover: #ffffff;
  /* Alt - outlined button- */
  --color-background-button-alt: #ffffff;
  --color-background-button-alt-active: #ffffff;
  --color-background-button-alt-disabled: #ffffff;
  --color-background-button-alt-focus: #ffffff;
  --color-background-button-alt-hover: #ffffff;
  --color-border-button-alt: #0b76a1;
  --color-border-button-alt-active: #00aeef;
  --color-border-button-alt-disabled: #f3f6f8;
  --color-border-button-alt-focus: #00aeef;
  --color-border-button-alt-hover: #00aeef;
  --color-text-button-alt: #0b76a1;
  --color-text-button-alt-active: #00aeef;
  --color-text-button-alt-disabled: #ffffff;
  --color-text-button-alt-focus: #00aeef;
  --color-text-button-alt-hover: #00aeef;
  /* Messaging */
  --color-background-button-negative: #1f2432;
  --color-background-button-negative-hover: #e92948;
  --color-background-button-positive: #c2d1d9;
  --color-background-button-positive-hover: #72a433;
  --color-border-button-negative: #1f2432;
  --color-border-button-negative-hover: #e92948;
  --color-border-button-positive: #c2d1d9;
  --color-border-button-positive-hover: #72a433;
  --color-text-button-negative: #ffffff;
  --color-text-button-positive: #ffffff;
  /* Forms
// ==========================================  */
  --height-input: auto;
  --color-background-input: #f9f8f7;
  --color-background-input-active: #f0eeeb;
  --color-background-input-disabled: #f9f8f7;
  --color-background-input-focus: #f0eeeb;
  --color-background-input-negative: #f9f8f7;
  --color-background-input-positive: #f9f8f7;
  --color-background-input-hover: #f5f3f1;
  --color-border-input: #e0dbda;
  --color-border-input-active: #f0eeeb;
  --color-border-input-disabled: #e0dbda;
  --color-border-input-focus: #f0eeeb;
  --color-border-input-hover: #f5f3f1;
  --color-border-input-negative: #1f2432;
  --color-border-input-positive: #c2d1d9;
  --color-text-label: #282828;
  --color-text-input: #282828;
  --color-text-input-active: #282828;
  --color-text-input-disabled: #282828;
  --color-text-input-focus: #282828;
  --color-text-input-hover: #282828;
  --color-text-input-negative: #1f2432;
  --color-text-input-positive: #c2d1d9;
  --color-text-placeholder: #000000;
  --color-text-placeholder-inverse: #000000;
  --color-background-input-checkbox: #fff;
  --color-background-input-checkbox-disabled: #fff;
  --color-background-input-checkbox-selected: #fff;
  /* Links
// ========================================== */
  --color-text-link: #0b76a1;
  --color-text-link-active: #00aeef;
  --color-text-link-focus: #00aeef;
  --color-text-link-hover: #00aeef;
  --color-text-link-visited: #0b76a1;
  --color-text-link-inverse: #ffffff;
  --color-text-link-inverse-active: #ffffff;
  --color-text-link-inverse-focus: #ffffff;
  --color-text-link-inverse-hover: #ffffff;
  --color-text-link-inverse-visited: #ffffff;
  /* Regions
// ========================================== */
  --color-background-page-header: rgba(255, 255, 255, 0.9);
  --color-background-page-footer: #fff;
  /* Tables
// ========================================== */
  --color-background-row-hover: #eeebe8;
  --color-background-row-striped: #f9f8f7;
  /* Tabs
// ========================================== */
  --line-height-tab: 1.5;
  --color-border-tab: #e0dbda;
  --color-border-tab-selected: #e0dbda;
  --color-text-tab-label: #282828;
  --color-text-tab-label-active: #282828;
  --color-text-tab-label-disabled: #282828;
  --color-text-tab-label-focus: #282828;
  --color-text-tab-label-hover: #282828;
  --color-text-tab-label-selected: #282828;
  --box-shadow-menu: 0 1px 3px 0 rgba(0, 0, 0, 0.26),
    0 2px 11px 0 rgba(0, 0, 0, 0.08);
  --box-shadow-tile: 0 8px 17px 0 rgba(0, 0, 0, 0.12),
    0 6px 20px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-button: 0 1px 3px 0 rgba(0, 0, 0, 0.26),
    0 2px 11px 0 rgba(0, 0, 0, 0.08);
  --box-shadow-section: 0 2px 5px 0 rgba(0, 0, 0, 0.14),
    0 2px 10px 0 rgba(0, 0, 0, 0.16);
}

/* Variables */
/* Mixins */
a {
  text-decoration: underline;
  color: var(--color-text-link);
  font-weight: var(--font-weight-bold);
}

a:active {
  text-decoration: underline;
  color: var(--color-text-link-active);
}

a:visited {
  color: var(--color-text-link-visited);
}

a:hover {
  text-decoration: underline;
  color: var(--color-text-link-hover);
}

a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  text-decoration: underline;
  color: var(--color-text-link-focus);
}

/* Inverse:
CSS attribute selector targets any class containing inverse.*/
[class*='inverse'] a {
  color: var(--color-text-link-inverse);
}

[class*='inverse'] a:active {
  text-decoration: underline;
  color: var(--color-text-link-inverse-active);
}

[class*='inverse'] a:visited {
  color: var(--color-text-link-inverse-visited);
}

[class*='inverse'] a:hover {
  text-decoration: none;
  text-decoration: underline;
  color: var(--color-text-link-inverse-hover);
}

[class*='inverse'] a:focus {
  outline: thin dotted;
  text-decoration: underline;
  color: var(--color-text-link-inverse-focus);
}

/* Variables */
/* Mixins */
/* Applied to <div> */
.alert {
  margin-bottom: var(--spacing);
  padding: var(--spacing);
  background-color: var(--color-background);
  border-color: var(--color-border);
  border-style: solid;
  border-width: 0;
  border-radius: 0;
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size) * 1rem);
  color: var(--color-text-default);
}

@media screen and (min-width: 48em) {
  .alert {
    font-size: calc(
      (var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) *
        (100vw - 48em) / (64 - 48)
    );
  }
}

@media screen and (min-width: 64em) {
  .alert {
    font-size: calc(var(--font-size-medium) * 1rem);
  }
}

.alert__heading {
  color: inherit;
}

.alert__link {
  font-weight: var(--font-weight-bold);
}

/* Info. */
.alert--info {
  background-color: var(--color-background-selection);
}

/* Positive. */
.alert--positive {
  background-color: var(--color-positive-light);
  color: var(--color-supporting-darker);
}

/* Negative. */
.alert--negative {
  font-weight: var(--font-weight-bold);
  background-color: var(--color-background-negative);
  color: var(--color-text-inverse);
}

/* Warning. */
.alert--warning {
  background-color: var(--color-negative-light);
  color: var(--color-primary-dark);
}

/* Variables */
/* Mixins */
/* Applied to <ul> */
.breadcrumb {
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: var(--color-background-selection);
  border-radius: var(--border-radius-x-small);
}

.breadcrumb li {
  margin-left: 0;
  font-family: var(--font-family-alt);
}

/* Suggested markers:
https://dev.w3.org/html5/html-author/charref

\02AFD Double Solid Operator
\02ABC Double Succeeds
\02AAB Larger Than
\02AA2 Double Nested Greater Than
\02588 Full Block
\025B8 Right Pointing Small Triangle */
.breadcrumb li:before {
  margin-right: 0;
  padding: 0 var(--spacing);
  content: '|';
}

.breadcrumb li:first-child:before {
  padding: 0;
  content: '';
  display: none;
}

/* Variables */
/* Mixins */
/* Applied to <div> */
.card {
  position: relative;
  display: block;
  margin-bottom: var(--spacing);
  background-color: var(--color-background-selection);
  border-color: var(--color-border);
  border-style: solid;
  border-width: var(--border-width-hairline);
  border-radius: 0;
  font-family: var(--font-family-alt);
}

/* Card header. */
.card__header {
  margin-bottom: 0;
  padding: var(--spacing);
  background-color: var(--color-background-active);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  border-radius: inherit;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card__header:first-child {
  border-radius: 0;
  border-top-left-radius: inherit;
  border-top-left-radius: inherit;
}

/* Card footer. */
.card__footer {
  margin-bottom: 0;
  padding: var(--spacing);
  background-color: var(--color-background-active);
  border-top: var(--border-width-hairline) solid var(--color-border);
  border-radius: inherit;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  font-size: var(--font-size-x-small);
}

.card__footer:first-child {
  border-radius: 0;
  border-bottom-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* Inverse. */
.card--inverse {
  background-color: var(--color-background-inverse);
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse);
}

.card--inverse .card__title {
  color: var(--color-text-inverse);
}

/* Positive. */
.card--positive {
  background-color: var(--color-background-positive);
  border-color: var(--color-border-positive);
  color: var(--color-text-inverse);
}

.card--positive .card__title {
  color: var(--color-text-inverse);
}

/* Negative. */
.card--negative {
  background-color: var(--color-background-negative);
  border-color: var(--color-border-negative);
  color: var(--color-text-inverse);
}

.card--negative .card__title {
  color: var(--color-text-inverse);
}

/* Outline. */
.card--outline {
  background-color: var(--color-background);
  border-color: var(--color-primary);
}

.card__block {
  padding: var(--spacing);
}

.card__title {
  margin-bottom: var(--spacing);
}

.card__text:last-child {
  margin-bottom: 0;
}

.card__link {
  text-decoration: none;
}

/* Variables */
/* Mixins */
/* Applied to multiple elements */
.collapse.js:not(.expanded) {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  transition: max-height var(--duration-slowly),
    visibility var(--duration-slowly), margin var(--duration-slowly),
    opacity var(--duration-slowly);
  visibility: hidden;
}

.collapse.js.expanded {
  max-height: 50em;
  opacity: 1;
  visibility: visible;
}

/* Accordion. */
.accordion.js > * {
  overflow: hidden;
}

.accordion.js > *:not(.expanded) > *:not(.accordion__header) {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
}

.accordion.js > .expanded > *:not(.accordion__header) {
  max-height: 50em;
  opacity: 1;
  visibility: visible;
}

.accordion.js > * > h1 {
  cursor: pointer;
  visibility: visible;
}

.accordion.js > * > *:not(.accordion__header) {
  transition: max-height var(--duration-slowly),
    visibility var(--duration-slowly), margin var(--duration-slowly),
    opacity var(--duration-slowly);
}

/* Tabs. */
.tabs::before,
.tabs::after {
  display: table;
  content: '';
  clear: both;
}

.tabs .tab {
  list-style-type: none;
  display: inline;
}

.tabs .tab.active .tab-button {
  background-color: var(--color-background-selection);
  border-top-right-radius: var(--border-radius-small);
  border-top-left-radius: var(--border-radius-small);
  text-decoration: none;
  color: var(--color-text-default);
  outline: 0;
}

.tabs .tab.active .tab-content {
  display: block;
}

.tabs .tab-button {
  display: inline-block;
  padding: var(--spacing) var(--spacing-large);
  background-color: var(--color-background);
  font-family: var(--font-family-alt);
  color: var(--color-text-link);
  cursor: pointer;
}

.tabs .tab-content {
  display: none;
  float: left;
  width: 100%;
  padding: var(--spacing);
  background-color: var(--color-background-selection);
}

/* @font-face {
  font-family: "Univers LT Std 57 Condensed";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 57 Condensed"), url("../fonts/UniversLTStd-Cn.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 53 Extended";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 53 Extended"), url("../fonts/UniversLTStd-Ex.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 59 Ultra Condensed";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 59 Ultra Condensed"), url("../fonts/UniversLTStd-UltraCn.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 55 Roman";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 55 Roman"), url("../fonts/UniversLTStd.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 57 Condensed Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 57 Condensed Oblique"), url("../fonts/UniversLTStd-CnObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 53 Extended Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 53 Extended Oblique"), url("../fonts/UniversLTStd-ExObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 55 Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 55 Oblique"), url("../fonts/UniversLTStd-Obl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 39 Thin Ultra Condensed";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 39 Thin Ultra Condensed"), url("../fonts/UniversLTStd-ThinUltraCn.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 45 Light";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 45 Light"), url("../fonts/UniversLTStd-Light.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 47 Light Condensed";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 47 Light Condensed"), url("../fonts/UniversLTStd-LightCn.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 49 Light Ultra Condensed";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 49 Light Ultra Condensed"), url("../fonts/UniversLTStd-LightUltraCn.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 47 Light Condensed Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 47 Light Condensed Oblique"), url("../fonts/UniversLTStd-LightCnObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 45 Light Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 45 Light Oblique"), url("../fonts/UniversLTStd-LightObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 65 Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 65 Bold"), url("../fonts/UniversLTStd-Bold.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 67 Bold Condensed";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 67 Bold Condensed"), url("../fonts/UniversLTStd-BoldCn.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 63 Bold Extended";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 63 Bold Extended"), url("../fonts/UniversLTStd-BoldEx.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 67 Bold Condensed Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 67 Bold Condensed Oblique"), url("../fonts/UniversLTStd-BoldCnObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 63 Bold Extended Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 63 Bold Extended Oblique"), url("../fonts/UniversLTStd-BoldExObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 65 Bold Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 65 Bold Oblique"), url("../fonts/UniversLTStd-BoldObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 75 Black";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 75 Black"), url("../fonts/UniversLTStd-Black.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 73 Black Extended";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 73 Black Extended"), url("../fonts/UniversLTStd-BlackEx.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 73 Black Extended Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 73 Black Extended Oblique"), url("../fonts/UniversLTStd-BlackExObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 75 Black Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 75 Black Oblique"), url("../fonts/UniversLTStd-BlackObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 85 Extra Black";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 85 Extra Black"), url("../fonts/UniversLTStd-XBlack.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 93 Extra Black Extended";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 93 Extra Black Extended"), url("../fonts/UniversLTStd-XBlackEx.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 93 Extra Black Extended Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 93 Extra Black Extended Oblique"), url("../fonts/UniversLTStd-XBlackExObl.woff") format("woff");
}

@font-face {
  font-family: "Univers LT Std 85 Extra Black Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("Univers LT Std 85 Extra Black Oblique"), url("../fonts/UniversLTStd-XBlackObl.woff") format("woff");
} */

/* Variables */
/* Mixins */
/* Applied to <a>, <button> and <input> */
.btn,
.btn:visited {
  display: inline-block;
  padding: var(--spacing-medium);
  background-color: var(--color-background-button-default);
  border-width: var(--border-width-thin);
  border: none;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  color: var(--color-text-button-default);
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: all ease var(--duration-promptly);
}

.btn:active,
.btn:visited:active {
  background-color: var(--color-background-button-default-active);
  color: var(--color-text-button-default-active);
  box-shadow: var(--box-shadow-button);
  text-decoration: none;
}

.btn:focus,
.btn:visited:focus {
  background-color: var(--color-background-button-default-focus);
  color: var(--color-text-button-default-focus);
  box-shadow: var(--box-shadow-button);
  text-decoration: none;
}

.btn:hover,
.btn:visited:hover {
  background-color: var(--color-background-button-default-hover);
  color: var(--color-text-button-default-hover);
  box-shadow: var(--box-shadow-button);
  text-decoration: none;
}

/* Disabled. */
.btn--disabled {
  background-color: var(--color-background-button-default-disabled);
  border-color: var(--color-border-button-default-disabled);
  color: var(--color-text-button-default-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--disabled:active {
  background-color: var(--color-background-button-default-disabled);
  border-color: var(--color-border-button-default-disabled);
  color: var(--color-text-button-default-disabled);
}

.btn--disabled:focus {
  background-color: var(--color-background-button-default-disabled);
  border-color: var(--color-border-button-default-disabled);
  color: var(--color-text-button-default-disabled);
}

.btn--disabled:hover {
  background-color: var(--color-background-button-default-disabled);
  border-color: var(--color-border-button-default-disabled);
  color: var(--color-text-button-default-disabled);
}

/* Link. - outlined button - */
.btn--link {
  background-color: var(--color-background-button-alt);
  border-color: var(--color-border-button-alt);
  border: var(--border-width-hairline) solid;
  color: var(--color-text-button-alt);
  text-transform: capitalize;
}

.btn--link:active {
  background-color: var(--color-background-button-alt-hover);
  border-color: var(--color-border-button-alt-hover);
  color: var(--color-text-button-alt-hover);
}

.btn--link:focus {
  background-color: var(--color-background-button-alt-hover);
  border-color: var(--color-border-button-alt-hover);
  color: var(--color-text-button-alt-hover);
}

.btn--link:hover {
  background-color: var(--color-background-button-alt-hover);
  border-color: var(--color-border-button-alt-hover);
  color: var(--color-text-button-alt-hover);
}

.btn--link:visited {
  background-color: var(--color-background-button-alt);
  border-color: var(--color-border-button-alt);
  border: var(--border-width-hairline) solid;
  color: var(--color-text-button-alt);
}

.btn--link:visited:active,
.btn--link:visited:focus,
.btn--link:visited:hover {
  background-color: var(--color-background-button-alt-hover);
  border-color: var(--color-border-button-alt-hover);
  color: var(--color-text-button-alt-hover);
}

/* Small. */
.btn--sm {
  padding: var(--spacing-x-small) var(--spacing-medium);
  border-top-width: 1px;
  border-bottom-width: 1px;
  font-size: calc(var(--font-size-x-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .btn--sm {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .btn--sm {
    font-size: calc(var(--font-size-x-small) * 1rem);
  }
}

/* Large. */
.btn--lg {
  padding: var(--spacing-medium) var(--spacing-x-large);
}

/* Block. */
.btn--block {
  display: block;
  padding: var(--spacing-medium) var(--spacing-x-large);
  width: 100%;
}

.btn--block + .btn--block {
  margin-top: var(--spacing);
}

/* Group. */
.btn-group {
  display: flex;
}

.btn-group .btn {
  flex: 1;
}

.btn-group .btn:first-child {
  margin-right: var(--border-width-thin);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group .btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Variables */
/* Mixins */
@viewport {
  width: device-width;
}

html {
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  padding: 0;
  font-size: calc(var(--font-size-small) * 1rem);
  line-height: var(--line-height-text);
  background-color: transparent;
  color: var(--color-text-default);
  line-height: var(--line-height-text);
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  /* Fluid typography */
  font-size: calc(var(--font-size-small) * 1rem);
}

@media screen and (min-width: 48em) {
  body {
    font-size: calc(
      (var(--font-size-small) * 1rem) +
        (var(--font-size) - var(--font-size-small)) * (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  body {
    font-size: calc(var(--font-size) * 1rem);
  }
}

/* template: */
template {
  display: none !important;
}

/* Content editable */
@keyframes contenteditable {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(0, 0, 0, 0.05);
  }
  100% {
    background-color: transparent;
  }
}

[contenteditable]:hover {
  animation-name: contenteditable;
  animation-delay: var(--duration-immediately);
  animation-duration: 1s;
  animation-iteration-count: 1;
  cursor: vertical-text;
}

[contenteditable]:active,
[contenteditable]:focus {
  outline: none;
  background-color: transparent;
}

/* Selection. */
::-moz-selection {
  background-color: var(--color-background-selection);
  text-shadow: none;
}

::selection {
  background-color: var(--color-background-selection);
  text-shadow: none;
}

.container {
  max-width: 76.2em;
  margin-left: auto;
  margin-right: auto;
}

.contentContainer {
  max-width: 836px;
  padding: var(--spacing-medium);
  margin-left: auto;
  margin-right: auto;
}

section {
  margin-bottom: var(--spacing-large);
}

section.m-hamburgerMenu,
section.m-helpMenu,
section.o-educationSlider,
section.m-planSummaryCard,
section.m-loaderBar {
  margin-bottom: 0;
}

.overlayActiveDiv {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0.5;
  background-color: var(--color-base-dark);
  transition: background-color 0.5s ease;
  height: 100vh;
}

.overlayActive {
  overflow: hidden;
  height: 100vh;
}

.--shortBlueUnderline::before {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 3rem;
  height: 5px;
  background: var(--color-primary-light);
  border-left-width: 0;
  border-right-width: 0;
}

/* Variables */
/* Mixins */
hr {
  clear: both;
  display: block;
  margin: var(--spacing-large) 0;
  padding: 0;
  height: 1px;
  border: 0;
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

@media screen and (min-width: 48em) {
  hr {
    margin: var(--spacing-x-large) 0;
  }
}

@media screen and (min-width: 64em) {
  hr {
    margin: var(--spacing-xx-large) 0;
  }
}

/* Hairline. */
.hr--hairline {
  border-bottom-width: var(--border-width-hairline);
}

/* Thick. */
.hr--thick {
  border-bottom-width: var(--border-width-thick);
}

/* Variables */
/* Mixins */
/* =======================================================================
Inspired Style Guides
by @stuff_nonsense
==========================================================================

CONTENTS

PAGES
1     ............... Body
2     ............... Cover / home
3     ............... Table of contents / naviagtion
4     ............... Typeface
6     ............... Typeface comparion
7     ............... Icons

COMPONENTS
8     ............... Colour chips
9     ............... Horizonal rules
10    ............... Images
11    ............... Shapes
12    ............... Misc

ORGANISMS
13    ............... Header
14    ............... Footer
15    ............... Inverse

INSPIRED GUIDE LAYOUT
16    ............... Grid
17    ............... Notes overlay



BODY ===================================



COVER / HOME PAGE ===================================

Applied to <body> element:
CSS viewport width and height units fill viewport
Repeated SVG background image
Change CSS background-size
Change CSS background colours in inspired.config */
.ig-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100vw;
  min-height: 100vh;
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 90 150' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon fill='transparent' points='0.000508026824 0 45 0 0 25'></polygon><polygon fill='transparent' points='45 0 90 25 90 0'></polygon><polygon fill='%23fff' opacity='0.25' points='45 0 45 50 0 75 0 25'></polygon><polygon fill='%23000' opacity='0.15' points='45.2611199 0 45 50 90 75 90 25.1234508'></polygon><path fill='transparent' d='M45,50 L90,74.9995117 L45,100 L0,75 L45,50 Z'></path><polygon fill='%23000' opacity='0.15' points='0 75 45 100 45 150 0 125'></polygon><polygon fill='%23fff' opacity='0.25' points='90 74.9995117 45 99.9995117 45 150 90 125'></polygon><path fill='transparent' d='M0,125 L45,149.999512 L0,149.999512 L0,125 Z'></path><path fill='transparent' d='M45,150 L90,125 L90,150 C90,149.875488 45,150 45,150 Z'></path></svg>");
  background-size: 45px auto;
  background-position: 50% 50%;
  /* Allow the fixed ig-cover__background to be constrained by the viewport rather than ig-container */
  /* Hide header and footer on cover: */
}

.ig-cover .ig-container {
  position: static;
}

@media screen and (min-width: 48em) {
  .ig-cover {
    background-size: 90px auto;
  }
}

.ig-cover .ig-header__container,
.ig-cover .ig-footer,
.ig-cover .ig-contentinfo {
  display: none;
  opacity: 0;
  pointer-events: none;
}

/* Content area:
   Absolute positioned center.
   Flexbox vertically centers text. */
.ig-cover__contents {
  position: absolute;
  top: var(--spacing-large);
  right: var(--spacing-large);
  bottom: var(--spacing-large);
  left: var(--spacing-large);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-medium);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  text-align: center;
  /* Medium screen styles: */
  /* Large screen styles: */
  /* Fluid type from calc and vw units. */
}

.ig-cover__contents:focus {
  text-decoration: none;
  outline: none;
}

@media screen and (min-width: 48em) {
  .ig-cover__contents {
    /* Width and height from CSS viewport height units.
   Constrains maximum circle height and width.
   Border radius creates circle. */
    position: static;
    width: 82vh;
    height: 82vh;
    min-width: 200px;
    min-height: 200px;
    max-width: 640px;
    max-height: 640px;
    padding: 80px;
    border-radius: 50%;
    transform: scale(1);
    transition: all ease var(--duration-promptly);
  }
  .ig-cover__contents:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.025);
  }
}

@media screen and (min-width: 64em) {
  .ig-cover__contents {
    /* Constrains maximum circle height and width. */
    max-width: 768px;
    max-height: 768px;
  }
}

.ig-cover__contents h1,
.ig-cover__contents p {
  margin-bottom: 0;
  color: var(--color-base-darker);
}

.ig-cover__contents h1 {
  font-family: var(--font-family-alt);
  font-weight: var(--font-weight-bold);
  font-size: calc(var(--font-size-xxxx-large) * 1rem);
}

@media screen and (min-width: 37.5em) {
  .ig-cover__contents h1 {
    font-size: calc(
      (var(--font-size-xxxx-large) * 1rem) +
        (var(--font-size-display) - var(--font-size-xxxx-large)) *
        (100vw - 48em) / (26.5)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-cover__contents h1 {
    font-size: calc(var(--font-size-display) * 1rem);
  }
}

.ig-cover__contents p {
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-large) * 1rem);
}

@media screen and (min-width: 37.5em) {
  .ig-cover__contents p {
    font-size: calc(
      (var(--font-size-large) * 1rem) +
        (var(--font-size-xx-large) - var(--font-size-large)) * (100vw - 48em) /
        (26.5)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-cover__contents p {
    font-size: calc(var(--font-size-xx-large) * 1rem);
  }
}

.ig-cover__contents hr {
  margin: var(--spacing-large) var(--spacing-xx-large);
  border-bottom-color: var(--color-primary-light);
}

/* Inspired Guide promotional badge:
   Please keep it, although we won't know if you don't.
   Change path colours to match your palette. */
.ig-cover__promo {
  position: fixed;
  z-index: 3;
  left: 0;
  bottom: var(--spacing-large);
  padding: var(--spacing) var(--spacing) var(--spacing-small)
    var(--spacing-large);
  background-color: var(--color-primary);
  border-top-right-radius: var(--border-radius-x-small);
  border-bottom-right-radius: var(--border-radius-x-small);
}

.ig-cover__promo svg path {
  fill: var(--color-text-inverse);
}

.ig-cover__promo svg:hover path {
  fill: var(--color-primary-light);
}

/* TABLE OF CONTENTS PAGE / NAVIGATION OVERLAY =================================== */
/* Applied to <body> element: */
.ig-contents {
  box-sizing: border-box;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  overflow: scroll;
  opacity: 1;
  transition: opacity 0.25s ease;
  width: 100%;
  z-index: 4;
  /* Fluid type from calc and vw units. */
}

.ig-contents h1 {
  font-size: calc(var(--font-size) * 1rem);
  font-weight: var(--font-weight-bold);
}

@media screen and (min-width: 48em) {
  .ig-contents h1 {
    font-size: calc(
      (var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-contents h1 {
    font-size: calc(var(--font-size-medium) * 1rem);
  }
}

.ig-contents--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Applied to ordered list:
   Numbers generated from CSS counters. */
.ig-contents__table {
  margin: var(--spacing-xx-large) 0;
  padding: 0;
  counter-reset: toc-counter;
}

/* Numbers generated from CSS counters. */
.ig-table-of-contents__article {
  margin: 0 0 var(--spacing-large) 0;
  border-top: var(--border-width-thin) solid var(--color-border-inverse);
  counter-increment: toc-counter;
  /* Remove list markers generated by :before. */
  /* Position generated numbers. */
}

.ig-table-of-contents__article:before {
  content: '';
  display: none;
}

.ig-table-of-contents__article h3 {
  position: relative;
  margin: 0;
  padding: var(--spacing-small) 0 0 0;
  font-size: calc(var(--font-size) * 1rem);
  font-weight: var(--font-weight-bold);
}

@media screen and (min-width: 48em) {
  .ig-table-of-contents__article h3 {
    font-size: calc(
      (var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-table-of-contents__article h3 {
    font-size: calc(var(--font-size-medium) * 1rem);
  }
}

.ig-table-of-contents__article a,
.ig-table-of-contents__article a:visited {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--color-text-inverse);
}

.ig-table-of-contents__article a:hover {
  text-decoration: none;
}

.ig-table-of-contents__article:nth-of-type(odd) h3:before,
.ig-table-of-contents__article:nth-of-type(even) h3:before {
  content: counter(toc-counter);
  position: absolute;
  top: var(--spacing-small);
  right: 0;
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-large) * 1rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-primary);
}

@media screen and (min-width: 48em) {
  .ig-table-of-contents__article:nth-of-type(odd) h3:before,
  .ig-table-of-contents__article:nth-of-type(even) h3:before {
    font-size: calc(
      (var(--font-size-large) * 1rem) +
        (var(--font-size-x-large) - var(--font-size-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-table-of-contents__article:nth-of-type(odd) h3:before,
  .ig-table-of-contents__article:nth-of-type(even) h3:before {
    font-size: calc(var(--font-size-x-large) * 1rem);
  }
}

.ig-table-of-contents__article:hover h3:before {
  color: var(--color-supporting);
}

/* Medium screen styles:
   Introduce multiple columns from width and margin-left. */
@media screen and (min-width: 48em) {
  .ig-table-of-contents__article {
    margin: 0 0 var(--spacing-xx-large) 0;
  }
  .ig-table-of-contents__article h3 {
    width: 22%;
    padding: var(--spacing-x-small) 0 0 0;
  }
  .ig-table-of-contents__article:nth-of-type(odd) h3 {
    border-right: var(--border-width-thin) solid var(--color-border-inverse);
  }
  .ig-table-of-contents__article:nth-of-type(odd) h3:before {
    top: calc(var(--font-size-xx-large) * -1rem);
    left: 0;
  }
  .ig-table-of-contents__article:nth-of-type(even) h3 {
    margin-left: 52%;
    padding-left: var(--spacing-x-large);
    border-left: var(--border-width-thin) solid var(--color-border-inverse);
  }
  .ig-table-of-contents__article:nth-of-type(even) h3:before {
    top: calc(var(--font-size-xx-large) * -1rem);
    left: var(--spacing-x-large);
  }
}

/* TYPEFACE PAGE =================================== */
/* Type weight section. */
.ig-typeface-weight__typeface {
  font-size: calc(var(--font-size-xxxx-large) * 1rem);
  color: var(--color-primary-light);
}

@media screen and (min-width: 48em) {
  .ig-typeface-weight__typeface {
    font-size: calc(
      (var(--font-size-xxxx-large) * 1rem) +
        (var(--font-size-display) - var(--font-size-xxxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-typeface-weight__typeface {
    font-size: calc(var(--font-size-display) * 0.8rem);
  }
}

.ig-typeface-weight--light .ig-typeface-weight__typeface {
  font-weight: var(--font-weight-light);
  color: var(--color-primary-light);
}

.ig-typeface-weight--bold .ig-typeface-weight__typeface {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* Type transform section. */
.ig-typeface-transform {
  margin-bottom: var(--spacing-xx-large);
  padding-top: var(--spacing);
  border-top: var(--border-width-thick) solid var(--color-border-inverse);
}

.ig-transform-weight--light .ig-glyphs {
  font-weight: var(--font-weight-light);
}

.ig-transform-weight--bold .ig-glyphs {
  font-weight: var(--font-weight-bold);
}

.ig-typeface-uppercase .ig-glyphs {
  text-transform: uppercase;
}

/* Type style section. */
.ig-typeface-style {
  margin-bottom: var(--spacing-xx-large);
  padding-top: var(--spacing);
  border-top: var(--border-width-thick) solid var(--color-border-inverse);
}

.ig-typeface-style .ig-glyphs {
  font-style: italic;
}

.ig-typeface-style__italic .ig-glyphs {
  font-style: italic;
}

.ig-typeface-style__light .ig-glyphs {
  font-weight: var(--font-weight-light);
}

.ig-typeface-style__lightitalic .ig-glyphs {
  font-style: italic;
  font-weight: var(--font-weight-light);
}

.ig-typeface-style__bold .ig-glyphs {
  font-weight: var(--font-weight-bold);
}

.ig-typeface-style__bolditalic .ig-glyphs {
  font-style: italic;
  font-weight: var(--font-weight-bold);
}

/* COLOUR PAGE =================================== */
.ig-colour {
  display: block;
  position: relative;
  /* Add horizontal layout to figcaption elements. */
}

.ig-colour figcaption {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: calc(var(--font-size-x-small) * 1rem);
}

/* Style elements with class attributes including ig-colour__chip. */
[class*='ig-colour__chip'] {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing);
}

/* Colour chips in proportion to viewport heights. */
.ig-colour__chip--large {
  height: 30vh;
}

.ig-colour__chip--medium {
  height: 15vh;
}

.ig-colour__chip--small {
  height: 5vh;
}

.ig-colour__x-small {
  display: inline-block;
  margin-right: var(--spacing-small);
  width: 15px;
  height: 18px;
}

.ig-colour__hex {
  margin-right: var(--spacing-small);
  font-weight: var(--font-weight-bold);
}

.ig-colour--small {
  height: 5vh;
}

/* Primary colour chip. */
.ig-color--primary .ig-colour__chip--large,
.ig-color--primary .ig-colour__chip--medium,
.ig-color--primary .ig-colour__chip--small,
.ig-color--primary .ig-colour__x-small {
  background-color: var(--color-primary);
}

/* Primary-light chip. */
.ig-color--primary-light .ig-colour__chip--large,
.ig-color--primary-light .ig-colour__chip--medium {
  background-color: var(--color-primary);
}

.ig-color--primary-light .ig-colour--small:first-child,
.ig-color--primary-light figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-primary-light);
}

.ig-color--primary-light .ig-colour--small:last-child,
.ig-color--primary-light figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-primary-light);
}

/* Primary-dark chip. */
.ig-color--primary-dark .ig-colour__chip--large,
.ig-color--primary-dark .ig-colour__chip--medium {
  background-color: var(--color-primary);
}

.ig-color--primary-dark .ig-colour--small:first-child,
.ig-color--primary-dark figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-primary-dark);
}

.ig-color--primary-dark .ig-colour--small:last-child,
.ig-color--primary-dark figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-primary-dark);
}

/* Supporting chip. */
.ig-color--supporting .ig-colour__chip--large,
.ig-color--supporting .ig-colour__chip--medium,
.ig-color--supporting .ig-colour__chip--small,
.ig-color--supporting .ig-colour__x-small {
  background-color: var(--color-supporting);
}

/* Supporting-light chip. */
.ig-color--supporting-light .ig-colour__chip--large,
.ig-color--supporting-light .ig-colour__chip--medium {
  background-color: var(--color-supporting);
}

.ig-color--supporting-light .ig-colour--small:first-child,
.ig-color--supporting-light figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-supporting-lighter);
}

.ig-color--supporting-light .ig-colour--small:last-child,
.ig-color--supporting-light figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-supporting-light);
}

/* Supporting-dark chip. */
.ig-color--supporting-dark .ig-colour__chip--large,
.ig-color--supporting-dark .ig-colour__chip--medium {
  background-color: var(--color-supporting);
}

.ig-color--supporting-dark .ig-colour--small:first-child,
.ig-color--supporting-dark figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-supporting-dark);
}

.ig-color--supporting-dark .ig-colour--small:last-child,
.ig-color--supporting-dark figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-supporting-darker);
}

/* Accent chip. */
.ig-color--accent .ig-colour__chip--large,
.ig-color--accent .ig-colour__chip--medium,
.ig-color--accent .ig-colour__chip--small,
.ig-color--accent .ig-colour__x-small {
  background-color: var(--color-accent);
}

/* Accent-light chip */
.ig-color--accent-light .ig-colour__chip--large,
.ig-color--accent-light .ig-colour__chip--medium {
  background-color: var(--color-accent);
}

.ig-color--accent-light .ig-colour--small:first-child,
.ig-color--accent-light figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-accent-lighter);
}

.ig-color--accent-light .ig-colour--small:last-child,
.ig-color--accent-light figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-accent-light);
}

/* Accent-dark chip. */
.ig-color--accent-dark .ig-colour__chip--large,
.ig-color--accent-dark .ig-colour__chip--medium {
  background-color: var(--color-accent);
}

.ig-color--accent-dark .ig-colour--small:first-child,
.ig-color--accent-dark figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-accent-dark);
}

.ig-color--accent-dark .ig-colour--small:last-child,
.ig-color--accent-dark figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-accent-dark);
}

/* Base chip. */
.ig-color--base .ig-colour__chip--large,
.ig-color--base .ig-colour__chip--medium,
.ig-color--base .ig-colour__chip--small,
.ig-color--base .ig-colour__x-small {
  background-color: var(--color-base);
}

/* Base-light chip. */
.ig-color--base-light .ig-colour__chip--large,
.ig-color--base-light .ig-colour__chip--medium {
  background-color: var(--color-base);
}

.ig-color--base-light .ig-colour--small:first-child,
.ig-color--base-light figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-base-lighter);
}

.ig-color--base-light .ig-colour--small:last-child,
.ig-color--base-light figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-base-light);
}

/* Base-dark chip. */
.ig-color--base-dark .ig-colour__chip--large,
.ig-color--base-dark .ig-colour__chip--medium {
  background-color: var(--color-base);
}

.ig-color--base-dark .ig-colour--small:first-child,
.ig-color--base-dark figcaption:first-of-type .ig-colour__x-small {
  background-color: var(--color-base-dark);
}

.ig-color--base-dark .ig-colour--small:last-child,
.ig-color--base-dark figcaption:last-of-type .ig-colour__x-small {
  background-color: var(--color-base-darker);
}

/* Positive chip. */
.ig-color--positive .ig-colour__chip--small {
  background-color: var(--color-positive);
}

/* Negative chip. */
.ig-color--negative .ig-colour__chip--small {
  background-color: var(--color-negative);
}

/* COLOUR EXAMPLES ================================================ */
.ig-colour-examples {
  margin-bottom: var(--spacing);
}

.ig-colour-example {
  padding: var(--spacing-medium);
  text-align: center;
}

.ig-colour-example .ig-cases {
  font-weight: var(--font-weight-bold);
}

.ig-colour-example dd {
  margin-left: 0;
}

.ig-colour-example__values {
  font-family: var(--font-family-alt);
}

/* Default text colour. */
.ig-colour-example--text {
  background-color: var(--color-background);
  border: var(--border-width-thin) solid var(--color-border);
  color: var(--color-text-default);
}

/* Inverse text colour. */
.ig-colour-example--text-inverse {
  background-color: var(--color-background-inverse);
  border: var(--border-width-thin) solid var(--color-border);
  color: var(--color-text-inverse);
}

.ig-colour-example--text-inverse .ig-cases {
  font-family: var(--font-family-alt);
}

/* Large screen styles: */
@media screen and (min-width: 64em) {
  /* Add horizontal layout. */
  .ig-colour-examples {
    display: flex;
    align-items: flex-end;
    width: 100%;
  }
  /* Occupies equal amount of available space.
   Add horizontal layout. */
  .ig-colour-example {
    flex: 1;
    display: flex;
    align-items: flex-end;
  }
  /* Occupies equal amount of available space. */
  .ig-colour-example__values {
    flex: 1;
    align-self: flex-start;
    text-align: right;
  }
  /* Occupies equal amount of available space. */
  .ig-colour-example--text .ig-cases,
  .ig-colour-example--text-inverse .ig-cases {
    flex: 1;
    font-size: calc(var(--font-size-display) * 1rem);
  }
}

@media screen and (min-width: 64em) and (min-width: 48em) {
  .ig-colour-example--text .ig-cases,
  .ig-colour-example--text-inverse .ig-cases {
    font-size: calc(
      (var(--font-size-display) * 1rem) + (8 - var(--font-size-display)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) and (min-width: 64em) {
  .ig-colour-example--text .ig-cases,
  .ig-colour-example--text-inverse .ig-cases {
    font-size: 8rem;
  }
}

/* TYPE COMPARISON PAGE =================================== */
/* Compare large primary and supporting typefaces. */
.ig-comparison-highlight {
  display: flex;
  align-items: flex-end;
}

/* Compare primary typeface. */
.ig-comparison-highlight__primary {
  margin-right: var(--spacing-large);
}

.ig-comparison-highlight__primary .ig-comparison-highlight__example {
  font-size: calc(var(--font-size-xx-display) * 1rem);
  font-weight: var(--font-weight-bold);
  line-height: 100%;
  color: var(--color-base);
}

@media screen and (min-width: 48em) {
  .ig-comparison-highlight__primary .ig-comparison-highlight__example {
    font-size: calc(
      (var(--font-size-xx-display) * 1rem) +
        (var(--font-size-xxx-display) - var(--font-size-xx-display)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-comparison-highlight__primary .ig-comparison-highlight__example {
    font-size: calc(var(--font-size-xxx-display) * 1rem);
  }
}

/* Compare supporting typeface. */
.ig-comparison-highlight__supporting .ig-comparison-highlight__example {
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-xx-display) * 1rem);
  font-weight: var(--font-weight-bold);
  line-height: 100%;
  color: var(--color-primary);
}

@media screen and (min-width: 48em) {
  .ig-comparison-highlight__supporting .ig-comparison-highlight__example {
    font-size: calc(
      (var(--font-size-xx-display) * 1rem) +
        (var(--font-size-xxx-display) - var(--font-size-xx-display)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-comparison-highlight__supporting .ig-comparison-highlight__example {
    font-size: calc(var(--font-size-xxx-display) * 1rem);
  }
}

/* Style introduction to primary typeface. */
.ig-comparison--primary {
  font-family: var(--font-family);
}

.ig-comparison--primary .ig-comparison-typeface {
  font-family: var(--font-family);
  font-size: calc(var(--font-size-xxx-large) * 1rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-base-light);
}

@media screen and (min-width: 48em) {
  .ig-comparison--primary .ig-comparison-typeface {
    font-size: calc(
      (var(--font-size-xxx-large) * 1rem) +
        (var(--font-size-xxxx-large) - var(--font-size-xxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-comparison--primary .ig-comparison-typeface {
    font-size: calc(var(--font-size-xxxx-large) * 1rem);
  }
}

/* Style introduction to supporting typeface. */
.ig-comparison--supporting {
  font-family: var(--font-family-alt);
}

.ig-comparison--supporting h2 {
  font-family: var(--font-family);
}

.ig-comparison--supporting .ig-comparison-typeface {
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-xxx-large) * 1rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-base-light);
}

@media screen and (min-width: 48em) {
  .ig-comparison--supporting .ig-comparison-typeface {
    font-size: calc(
      (var(--font-size-xxx-large) * 1rem) +
        (var(--font-size-xxxx-large) - var(--font-size-xxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-comparison--supporting .ig-comparison-typeface {
    font-size: calc(var(--font-size-xxxx-large) * 1rem);
  }
}

/* Compare italic typeface. */
.ig-comparison-style--italic {
  font-style: italic;
  /* Large letters.
   Move up to compensate for baseline differences. */
}

.ig-comparison-style--italic .ig-cases {
  transform: translateY(calc(-1rem * (var(--font-size-x-display) / 8)));
  color: var(--color-text-alt);
  /* Medium screen styles:
   Adjust translate up to compensate for baseline difference. */
}

@media screen and (min-width: 48em) {
  .ig-comparison-style--italic .ig-cases {
    transform: translateY(calc(-1rem * (var(--font-size-x-display) / 3)));
  }
}

/* Compare bolditalic typeface. */
.ig-comparison-style--bolditalic {
  font-style: italic;
  font-weight: var(--font-weight-bold);
  /* Large letters.
   Move up to compensate for baseline differences. */
}

.ig-comparison-style--bolditalic .ig-cases {
  transform: translateY(calc(-1rem * (var(--font-size-x-display) / 8)));
  color: var(--color-text-alt);
  /* Medium screen styles:
   Adjust translate up to compensate for baseline difference. */
}

@media screen and (min-width: 64em) {
  .ig-comparison-style--bolditalic .ig-cases {
    transform: translateY(calc(-1rem * (var(--font-size-x-display) / 3)));
  }
}

.ig-comparison-weight--light {
  font-weight: var(--font-weight-light);
}

.ig-comparison-weight--bold {
  font-weight: var(--font-weight-bold);
}

/* ICONS PAGE ================================================ */
/* Icons available from Github: https://octicons.github.com
   Replace example icons with those from your design.
   Add horizontal layout. */
.ig-icons__line {
  display: flex;
  margin-bottom: var(--spacing-small);
}

/* Occupies equal amount of available space.
   Positioning context for positioned :after pseudo element. */
.ig-icons__item {
  flex: 1;
  position: relative;
  background-color: var(--color-background-selection);
  color: var(--color-text-default);
  /* Generate :after element.
   Padding top adjusts aspect ratio:
   100%/square, 56.25%/16:9, 75%/4:3, 66.66%/3:2. */
  /* Additional <div> to group content. */
  /* Limit maximum icon sizes on small screens. */
  /* Medium screen styles:
   Reset maximum icon sizes. */
}

.ig-icons__item path {
  fill: var(--color-accent-dark);
}

.ig-icons__item:not(:last-child) {
  margin-right: var(--spacing-small);
}

.ig-icons__item:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.ig-icons__item > div {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ig-icons__item svg {
  max-width: 40px;
  max-height: 40px;
}

@media screen and (min-width: 48em) {
  .ig-icons__item svg {
    max-width: 40%;
    max-height: none;
  }
}

/* Create checkerboard pattern. */
.ig-icons__block:last-of-type
  .ig-icons__line:first-of-type
  .ig-icons__item:nth-of-type(odd) {
  background-color: var(--color-accent-lighter);
}

.ig-icons__block:last-of-type
  .ig-icons__line:last-of-type
  .ig-icons__item:nth-of-type(even) {
  background-color: var(--color-accent-lighter);
}

.ig-icons__block:first-of-type
  .ig-icons__line:last-of-type
  .ig-icons__item:nth-of-type(even) {
  background-color: var(--color-accent-lighter);
}

.ig-icons__block:first-of-type
  .ig-icons__line:first-of-type
  .ig-icons__item:nth-of-type(odd) {
  background-color: var(--color-accent-lighter);
}

/* Add vertical layout. */
.ig-icons__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Medium screen styles: */
@media screen and (min-width: 64em) {
  /* Change layout from vertical to horizontal. */
  .ig-icons__figure {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: var(--spacing-xx-large);
    /* Occupies equal amount of available space. */
    /* Occupies equal amount of available space. */
  }
  .ig-icons__figure .ig-icons__hero {
    flex: 1;
    text-align: right;
  }
  .ig-icons__figure figcaption {
    flex: 1;
    margin-left: var(--spacing);
  }
}

/* Large screen styles:
   Re-order checkerboard pattern. */
@media screen and (min-width: 64em) {
  /* Reset background colours before applying re-ordered pattern. */
  .ig-icons__block:last-of-type
    .ig-icons__line:first-of-type
    .ig-icons__item:nth-of-type(odd),
  .ig-icons__block:last-of-type
    .ig-icons__line:last-of-type
    .ig-icons__item:nth-of-type(even),
  .ig-icons__block:first-of-type
    .ig-icons__line:last-of-type
    .ig-icons__item:nth-of-type(even),
  .ig-icons__block:first-of-type
    .ig-icons__line:first-of-type
    .ig-icons__item:nth-of-type(odd) {
    background-color: var(--color-background-selection);
  }
  .ig-icons__block:first-of-type
    .ig-icons__line:first-of-type
    .ig-icons__item:nth-of-type(even) {
    background-color: var(--color-accent-lighter);
  }
  .ig-icons__block:first-of-type
    .ig-icons__line:last-of-type
    .ig-icons__item:nth-of-type(odd) {
    background-color: var(--color-accent-lighter);
  }
  .ig-icons__block:last-of-type
    .ig-icons__line:first-of-type
    .ig-icons__item:nth-of-type(odd) {
    background-color: var(--color-accent-lighter);
  }
  .ig-icons__block:last-of-type
    .ig-icons__line:last-of-type
    .ig-icons__item:nth-of-type(even) {
    background-color: var(--color-accent-lighter);
  }
}

/* Hover state. */
.ig-icons__item:hover,
.ig-icons__item:nth-of-type(odd):hover,
.ig-icons__item:nth-of-type(even):hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  transition: all ease var(--duration-quickly);
}

.ig-icons__item:hover svg path,
.ig-icons__item:nth-of-type(odd):hover svg path,
.ig-icons__item:nth-of-type(even):hover svg path {
  fill: #fff;
}

.ig-icons__name {
  margin-bottom: 0;
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-x-small) * 1rem);
  text-align: center;
}

@media screen and (min-width: 48em) {
  .ig-icons__name {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-icons__name {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

.ig-icons__row + p {
  margin-top: var(--spacing);
}

/* Large screen styles: */
@media screen and (min-width: 64em) {
  /* Add horizontal layout. */
  .ig-icons__row {
    display: flex;
  }
  /* Occupies equal amount of available space. */
  .ig-icons__block {
    flex: 1;
  }
  .ig-icons__block:not(:last-child) {
    margin-right: var(--spacing-small);
  }
}

/* HR ================================================ */
/* Stylised horizontal divider.
   Add horizontal layout. */
.ig-hr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-xx-large) 0;
  /* Occupies equal amount of available space. */
}

.ig-hr hr {
  flex: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.ig-hr svg {
  margin: 0 var(--spacing);
}

.ig-hr a {
  background-color: var(--color-background);
  font-size: calc(var(--font-size-large) * 1rem);
  line-height: 1;
  padding: 0 1em;
}

/* IMAGES ================================================ */
/* Fill or stroke SVG paths. */
.ig-img--primary {
  fill: var(--color-primary);
}

.ig-img--supporting {
  fill: var(--color-supporting);
}

.ig-img--accent {
  fill: var(--color-accent-dark);
}

.ig-img--base {
  fill: var(--color-base-light);
}

.ig-img--white {
  fill: #fff;
}

/* SCALE ================================================ */
.ig-scales {
  margin-bottom: var(--spacing-large);
}

/* Add horizontal layout. */
.ig-scale {
  display: flex;
  align-items: center;
  padding: var(--spacing-small) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  /* Example type sizes */
}

.ig-scale:first-of-type {
  border-top: var(--border-width-hairline) solid var(--color-border);
}

.ig-scale:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.ig-scale:hover .ig-cases__lowercase {
  color: rgba(255, 255, 255, 0.75);
}

.ig-scale .font-size-x-small {
  font-size: calc(var(--font-size-xx-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-x-small {
    font-size: calc(
      (var(--font-size-xx-small) * 1rem) +
        (var(--font-size-x-small) - var(--font-size-xx-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-x-small {
    font-size: calc(var(--font-size-x-small) * 1rem);
  }
}

.ig-scale .font-size-small {
  font-size: calc(var(--font-size-x-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-small {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-small {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

.ig-scale .font-size-medium {
  font-size: calc(var(--font-size) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-medium {
    font-size: calc(
      (var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-medium {
    font-size: calc(var(--font-size-medium) * 1rem);
  }
}

.ig-scale .font-size-large {
  font-size: calc(var(--font-size-medium) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-large {
    font-size: calc(
      (var(--font-size-medium) * 1rem) +
        (var(--font-size-large) - var(--font-size-medium)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-large {
    font-size: calc(var(--font-size-large) * 1rem);
  }
}

.ig-scale .font-size-x-large {
  font-size: calc(var(--font-size-large) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-x-large {
    font-size: calc(
      (var(--font-size-large) * 1rem) +
        (var(--font-size-x-large) - var(--font-size-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-x-large {
    font-size: calc(var(--font-size-x-large) * 1rem);
  }
}

.ig-scale .font-size-xx-large {
  font-size: calc(var(--font-size-x-large) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-xx-large {
    font-size: calc(
      (var(--font-size-x-large) * 1rem) +
        (var(--font-size-xx-large) - var(--font-size-x-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-xx-large {
    font-size: calc(var(--font-size-xx-large) * 1rem);
  }
}

.ig-scale .font-size-xxx-large {
  font-size: calc(var(--font-size-xx-large) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-xxx-large {
    font-size: calc(
      (var(--font-size-xx-large) * 1rem) +
        (var(--font-size-xxx-large) - var(--font-size-xx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-xxx-large {
    font-size: calc(var(--font-size-xxx-large) * 1rem);
  }
}

.ig-scale .font-size-xxxx-large {
  font-size: calc(var(--font-size-xxx-large) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale .font-size-xxxx-large {
    font-size: calc(
      (var(--font-size-xxx-large) * 1rem) +
        (var(--font-size-xxxx-large) - var(--font-size-xxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale .font-size-xxxx-large {
    font-size: calc(var(--font-size-xxxx-large) * 1rem);
  }
}

.ig-scale__cases {
  display: flex;
  align-items: flex-end;
  flex: 2;
  padding-left: var(--spacing);
  line-height: 1;
}

.ig-scale__px,
.ig-scale__rem,
.ig-scale__name {
  flex: 1;
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-x-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-scale__px,
  .ig-scale__rem,
  .ig-scale__name {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-scale__px,
  .ig-scale__rem,
  .ig-scale__name {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

.ig-scale__name {
  font-weight: var(--font-weight-bold);
}

/* Large screen styles */
@media screen and (min-width: 64em) {
  /* Change layout from vertical to horizontal. */
  .ig-scales {
    display: flex;
  }
  /* Change layout from horizontal to vertical. */
  .ig-scale {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    border-width: 0;
  }
  .ig-scale:first-of-type {
    border-top-width: 0;
  }
}

/* SHAPES ================================================ */
.ig-shape--circle {
  float: left;
  -webkit-shape-outside: circle();
  shape-outside: circle();
  margin: var(--spacing);
  margin-left: 0;
}

/* MISC ================================================ */
/* Large, example button. */
.ig-btn {
  display: block;
  margin: var(--spacing-large) 0;
  padding: var(--spacing-large);
  border-width: var(--border-width-thick);
  border-radius: var(--border-radius-large);
  width: 100%;
  font-size: calc(var(--font-size-xx-large) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-btn {
    font-size: calc(
      (var(--font-size-xx-large) * 1rem) +
        (var(--font-size-xxx-large) - var(--font-size-xx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-btn {
    font-size: calc(var(--font-size-xxx-large) * 1rem);
  }
}

/* Large, display size type examples.
   Adjust letter-spacing to suit typefaces. */
.ig-cases {
  font-size: calc(var(--font-size-display) * 1rem);
  letter-spacing: -0.1em;
  line-height: 1;
}

@media screen and (min-width: 48em) {
  .ig-cases {
    font-size: calc(
      (var(--font-size-display) * 1rem) +
        (var(--font-size-x-display) - var(--font-size-display)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-cases {
    font-size: calc(var(--font-size-x-display) * 1rem);
  }
}

.ig-cases__lowercase {
  color: var(--color-text-alt);
}

.ig-context {
  margin-bottom: var(--spacing-xx-large);
  opacity: 0.25;
  transition: opacity ease var(--duration-slowly);
}

.ig-context:hover {
  opacity: 1;
}

/* Sets of glyphs. */
.ig-glyphs {
  font-size: calc(var(--font-size-medium) * 1rem);
  letter-spacing: 0.05em;
  white-space: pre-wrap;
  word-break: break-all;
  white-space: normal;
}

@media screen and (min-width: 48em) {
  .ig-glyphs {
    font-size: calc(
      (var(--font-size-medium) * 1rem) +
        (var(--font-size-large) - var(--font-size-medium)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-glyphs {
    font-size: calc(var(--font-size-large) * 1rem);
  }
}

/* Headings. */
.ig-page__heading {
  font-size: calc(var(--font-size-large) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-page__heading {
    font-size: calc(
      (var(--font-size-large) * 1rem) +
        (var(--font-size-x-large) - var(--font-size-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-page__heading {
    font-size: calc(var(--font-size-x-large) * 1rem);
  }
}

.ig-subhead {
  margin-bottom: var(--spacing-large);
  font-size: calc(var(--font-size-xxx-large) * 1rem);
  line-height: var(--line-height-heading);
  color: var(--color-accent-lighter);
}

@media screen and (min-width: 48em) {
  .ig-subhead {
    font-size: calc(
      (var(--font-size-xxx-large) * 1rem) +
        (var(--font-size-xxxx-large) - var(--font-size-xxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-subhead {
    font-size: calc(var(--font-size-xxxx-large) * 1rem);
  }
}

.ig-subhead b {
  color: var(--color-primary);
}

/* Labels. */
.ig-label {
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-label {
    font-size: calc(
      (var(--font-size-small) * 1rem) +
        (var(--font-size) - var(--font-size-small)) * (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-label {
    font-size: calc(var(--font-size) * 1rem);
  }
}

.ig-legend {
  margin-bottom: var(--spacing);
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-x-small) * 1rem);
  text-transform: uppercase;
}

@media screen and (min-width: 48em) {
  .ig-legend {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-legend {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

/* Add additional margin above elements. */
.ig-margin-top {
  margin-top: var(--spacing-xx-large);
}

/* Medium screen styles:
   Adjust depth of margin / white-space. */
@media screen and (min-width: 48em) {
  .ig-margin-top {
    margin-top: calc(var(--spacing-xx-large) * 2);
  }
}

/* Triggers design and code notes overlay. */
[title='Notes'] {
  appearance: none;
  background-color: transparent;
  border: none;
  color: var(--color-text-link);
  cursor: pointer;
  padding: 0;
  display: inline-block;
  margin-left: var(--spacing-small);
  font-size: calc(var(--font-size-medium) * 1rem);
  font-weight: var(--font-weight-bold);
}

@media screen and (min-width: 48em) {
  [title='Notes'] {
    font-size: calc(
      (var(--font-size-medium) * 1rem) +
        (var(--font-size-large) - var(--font-size-medium)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  [title='Notes'] {
    font-size: calc(var(--font-size-large) * 1rem);
  }
}

[title='Notes']:hover {
  color: var(--color-text-link-hover);
}

/* NUMERALS ================================== */
.ig-numerals-large {
  font-size: calc(var(--font-size-display) * 1rem);
  line-height: 1;
}

@media screen and (min-width: 48em) {
  .ig-numerals-large {
    font-size: calc(
      (var(--font-size-display) * 1rem) +
        (var(--font-size-x-display) - var(--font-size-display)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-numerals-large {
    font-size: calc(var(--font-size-x-display) * 1rem);
  }
}

.ig-numerals__symbol {
  font-size: calc(var(--font-size-xxxx-large) * 1rem);
  color: var(--color-text-alt);
}

@media screen and (min-width: 48em) {
  .ig-numerals__symbol {
    font-size: calc(
      (var(--font-size-xxxx-large) * 1rem) +
        (var(--font-size-display) - var(--font-size-xxxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-numerals__symbol {
    font-size: calc(var(--font-size-display) * 1rem);
  }
}

.ig-numerals {
  margin-bottom: var(--spacing-large);
  font-size: calc(var(--font-size-xxxx-large) * 1rem);
  letter-spacing: 0.05em;
  color: var(--color-text-alt);
}

@media screen and (min-width: 48em) {
  .ig-numerals {
    font-size: calc(
      (var(--font-size-xxxx-large) * 1rem) +
        (var(--font-size-display) - var(--font-size-xxxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-numerals {
    font-size: calc(var(--font-size-display) * 1rem);
  }
}

.ig-numerals-italic {
  font-style: italic;
}

.ig-numerals-supporting {
  font-family: var(--font-family-alt);
}

/* HEADER ================================== */
.ig-header {
  display: flex;
  flex-wrap: wrap;
  padding: var(--spacing-medium) 0;
}

@media only screen and (min-height: 30rem) {
  .ig-body {
    padding-top: 5.1875rem;
  }
  .ig-header__container {
    position: fixed;
    z-index: 2;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .ig-body--inverse .ig-header__container {
    background-color: var(--color-background-inverse);
  }
}

/* Logo:
   Replace with your own branding.
   Occupies equal amount of available space.
   Space distributed when elements above 50%. */
.ig-header__logo {
  flex: 1 0 50%;
  /* Fill SVG paths. */
}

.ig-header__logo svg path {
  fill: var(--color-brand);
}

.ig-header__logo svg:hover path {
  fill: var(--color-supporting);
}

/* Medium screen styles: */
@media screen and (min-width: 48em) {
  /* Reset width using flex-basis auto. */
  .ig-header__logo {
    flex-basis: auto;
  }
}

/* Menu:
   Occupies equal amount of available space.
   Space distributed when elements above 50%. */
.ig-header__menu {
  flex: 1 0 50%;
}

/* Medium screen styles: */
@media screen and (min-width: 48em) {
  /* Reset width using flex-basis auto. */
  .ig-header__menu {
    flex-basis: auto;
  }
}

/* Title:
   Initially occupies 100% available space.
   Placed third in the visual order. */
.ig-header__title {
  flex: 1 0 100%;
  order: 3;
  font-size: calc(var(--font-size) * 1rem);
}

@media screen and (min-width: 48em) {
  .ig-header__title {
    font-size: calc(
      (var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-header__title {
    font-size: calc(var(--font-size-medium) * 1rem);
  }
}

/* Medium screen styles: */
@media screen and (min-width: 48em) {
  /* Reset width using flex-basis auto.
   Unset previously defined order. */
  .ig-header__title {
    flex-basis: auto;
    order: unset;
    text-align: center;
  }
}

/* Menu */
.ig-menu {
  position: relative;
  float: right;
  transition: all var(--duration-promptly) ease-in-out;
}

.ig-menu:hover {
  cursor: pointer;
}

.ig-menu.is-active {
  transform: rotate(45deg);
}

.ig-menu:before {
  content: '';
  position: absolute;
  top: calc(50% - 22px);
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
  border: 5px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  transition: all var(--duration-promptly) ease-in-out;
}

.ig-menu.is-active:before {
  border: 4px solid var(--color-text-link);
}

.ig-menu .ig-menu__line {
  display: block;
  margin: 4px 0;
  width: 22px;
  height: 4px;
  background-color: var(--color-text-link);
  border-radius: 2px;
  transition: all var(--duration-promptly) ease-in-out;
}

.ig-menu:hover .ig-menu__line {
  background-color: var(--color-text-link-hover);
}

.ig-menu.is-active .ig-menu__line {
  width: 22px;
}

.ig-menu.is-active .ig-menu__line:nth-child(2) {
  opacity: 0;
}

.ig-menu.is-active .ig-menu__line:nth-child(1) {
  transform: translateY(13px);
}

.ig-menu.is-active .ig-menu__line:nth-child(3) {
  transform: translateY(-13px) rotate(90deg);
}

/* FOOTER =================================== */
/* Add horizontal layout. */
.ig-footer {
  display: flex;
  align-items: center;
  margin: var(--spacing-xx-large) 0 0;
  background-color: var(--color-background-page-footer);
  /* Occupies equal amount of available space. */
}

.ig-footer hr {
  flex: 1;
}

.ig-footer__number {
  margin-right: var(--spacing-large);
  font-size: calc(var(--font-size-xxx-large) * 1rem);
  font-style: italic;
  line-height: 1;
  color: var(--color-primary);
}

@media screen and (min-width: 48em) {
  .ig-footer__number {
    font-size: calc(
      (var(--font-size-xxx-large) * 1rem) +
        (var(--font-size-xxxx-large) - var(--font-size-xxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .ig-footer__number {
    font-size: calc(var(--font-size-xxxx-large) * 1rem);
  }
}

.ig-contentinfo {
  display: block;
  margin: var(--spacing-x-large) 0 var(--spacing-large);
  text-align: center;
}

/* INVERSE =================================== */
/* Isolated styled for elements on inverse backgrounds. */
.ig-container--inverse {
  padding: var(--spacing-xx-large) 0 0;
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.ig-body--inverse {
  min-height: 100vh;
  padding-bottom: var(--spacing-medium);
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.ig-body--inverse header {
  background-color: transparent;
}

.ig-body--inverse footer {
  background-color: transparent;
}

.ig-body--inverse header path {
  fill: var(--color-text-inverse);
}

.ig-body--inverse hr {
  border-color: var(--color-accent);
}

.ig-body--inverse .ig-colour__small {
  border-width: 0;
}

/* STYLE GUIDE GRID =================================== */
/* Even ratio, twelve column grid, simplified to six columns.
   Isolate from, or adjust to match production grid. */
.ig-container {
  margin: 0 var(--spacing-large);
  position: relative;
  box-sizing: border-box;
}

.ig-row {
  margin-bottom: var(--spacing-large);
}

.ig-row:before,
.ig-row:after {
  content: '';
  display: table;
}

.ig-row:after {
  clear: both;
}

.ig-row--margin {
  margin-top: var(--spacing-xx-large);
}

/* Medium screen styles:
   Adjust horizontal margins. */
@media screen and (min-width: 48em) {
  .ig-container {
    margin: 0 var(--spacing-x-large);
  }
}

/* Large screen styles:
   Adjust horizontal margins. */
@media screen and (min-width: 64em) {
  .ig-container {
    margin: 0 auto;
    padding: 0 var(--spacing-x-large);
    max-width: var(--max-width);
  }
  .ig-column,
  .ig-columns {
    float: left;
    width: 100%;
    margin-left: 4%;
  }
  .ig-column:first-child,
  .ig-columns:first-child {
    margin-left: 0;
  }
  .one.ig-column,
  .one.ig-columns {
    width: 4.66666666667%;
  }
  .two.ig-columns {
    width: 13.3333333333%;
  }
  .three.ig-columns {
    width: 22%;
  }
  .four.ig-columns {
    width: 30.6666666667%;
  }
  .five.ig-columns {
    width: 39.3333333333%;
  }
  .six.ig-columns {
    width: 48%;
  }
  .seven.ig-columns {
    width: 56.6666666667%;
  }
  .eight.ig-columns {
    width: 65.3333333333%;
  }
  .nine.ig-columns {
    width: 74%;
  }
  .ten.ig-columns {
    width: 82.6666666667%;
  }
  .eleven.ig-columns {
    width: 91.3333333333%;
  }
  .twelve.ig-columns {
    width: 100%;
    margin-left: 0;
  }
  .one-third.ig-column {
    width: 30.6666666667%;
  }
  .two-thirds.ig-column {
    width: 65.3333333333%;
  }
  .one-half.ig-column {
    width: 48%;
  }
  /* Offsets. */
  .offset-by-one.ig-column,
  .offset-by-one.ig-columns {
    margin-left: 8.66666666667%;
  }
  .offset-by-two.ig-column,
  .offset-by-two.ig-columns {
    margin-left: 17.3333333333%;
  }
  .offset-by-three.ig-column,
  .offset-by-three.ig-columns {
    margin-left: 26%;
  }
  .offset-by-four.ig-column,
  .offset-by-four.ig-columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-five.ig-column,
  .offset-by-five.ig-columns {
    margin-left: 43.3333333333%;
  }
  .offset-by-six.ig-column,
  .offset-by-six.ig-columns {
    margin-left: 52%;
  }
  .offset-by-seven.ig-column,
  .offset-by-seven.ig-columns {
    margin-left: 60.6666666667%;
  }
  .offset-by-eight.ig-column,
  .offset-by-eight.ig-columns {
    margin-left: 69.3333333333%;
  }
  .offset-by-nine.ig-column,
  .offset-by-nine.ig-columns {
    margin-left: 78%;
  }
  .offset-by-ten.ig-column,
  .offset-by-ten.ig-columns {
    margin-left: 86.6666666667%;
  }
  .offset-by-eleven.ig-column,
  .offset-by-eleven.ig-columns {
    margin-left: 95.3333333333%;
  }
  .offset-by-one-third.ig-column,
  .offset-by-one-third.ig-columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-two-thirds.ig-column,
  .offset-by-two-thirds.ig-columns {
    margin-left: 69.3333333333%;
  }
  .offset-by-one-half.ig-column,
  .offset-by-one-half.ig-columns {
    margin-left: 52%;
  }
}

/* Notes/HTML/CSS Overlay ================================== */
.ig-body--has-notes {
  overflow: hidden;
}

.ig-notes {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--color-background);
  border: var(--spacing-large) solid var(--color-primary);
  box-sizing: border-box;
  opacity: 1;
  overflow: auto;
  transition: opacity 0.25s ease;
}

@media screen and (min-width: 48em) {
  .ig-notes {
    border-width: var(--spacing-x-large);
  }
}

.ig-notes--hidden {
  opacity: 0;
  pointer-events: none;
}

.ig-close {
  position: relative;
  float: right;
  width: 32px;
  height: 32px;
  padding: 0;
  display: block;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.ig-close:focus {
  outline: thin dotted;
}

.ig-close:before,
.ig-close:after {
  content: ' ';
  position: absolute;
  left: 15px;
  height: 33px;
  width: 2px;
  background-color: var(--color-primary);
  transition: background-color ease var(--duration-quickly);
}

.ig-close:hover:before,
.ig-close:hover:after {
  background-color: var(--color-supporting);
}

.ig-close:before {
  transform: translateY(-50%) rotate(45deg);
}

.ig-close:after {
  transform: translateY(-50%) rotate(-45deg);
}

.ig-notes__nav {
  margin: var(--spacing-large) 0 var(--spacing-xx-large);
  padding-bottom: var(--spacing);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.ig-notes__nav a {
  margin: 0 var(--spacing-xx-large) 0 var(--spacing);
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-medium) * 1rem);
}

.ig-notes__data {
  display: none;
}

/* Variables */
/* Mixins */
img,
svg {
  max-width: 100%;
  border-width: 0;
}

img[width],
img[height] {
  max-width: none;
}

/* Figure. */
figure {
  display: inline-block;
  margin: 0;
  margin-bottom: var(--spacing);
}

figure img,
figure svg {
  margin-bottom: var(--spacing);
  line-height: 1;
}

figcaption {
  font-family: var(--font-family-alt);
}

/* Figure with caption above. */
.figure--above {
  display: flex;
  flex-direction: column-reverse;
}

.figure--above figcaption {
  margin-bottom: var(--spacing);
  font-size: calc(var(--font-size-medium) * 1rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

@media screen and (min-width: 48em) {
  .figure--above figcaption {
    font-size: calc(
      (var(--font-size-medium) * 1rem) +
        (var(--font-size-large) - var(--font-size-medium)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .figure--above figcaption {
    font-size: calc(var(--font-size-large) * 1rem);
  }
}

figcaption {
  font-family: var(--font-family-alt);
}

/* Figure with caption right. */
.figure--right {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.figure--right figcaption {
  margin-bottom: var(--spacing);
  flex: 1;
}

/* Variables */
/* Mixins */
.media {
  display: flex;
  align-items: flex-start;
  margin: var(--spacing-large) 0;
}

.media p:last-child,
.media p:only-child {
  margin-bottom: 0;
}

.media__object {
  margin-right: var(--spacing-large);
}

.media__body {
  flex: 1;
}

.media__heading {
  margin-top: 0;
  margin-bottom: var(--spacing);
}

/* Align items center. */
.media--center {
  align-items: center;
}

/* Reverse flex direction. */
.media--reverse {
  flex-direction: row-reverse;
}

.media--reverse .media__object {
  margin-right: 0;
  margin-left: var(--spacing-large);
}

/* Media organism within card. */
.card .media {
  margin: 0;
}

/* Variables */
/* Mixins */
/* Applied to <ol> */
.pagination {
  display: inline-block;
  padding-left: 0;
}

.pagination li {
  display: inline-block;
}

.pagination li:before {
  content: '';
  display: none;
}

.pagination a {
  position: relative;
  float: left;
  width: 2em;
  height: 2em;
  background-color: var(--color-background);
  border: var(--border-width-thin) solid var(--color-primary);
  border-radius: var(--border-radius-x-small);
  box-sizing: border-box;
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-small) * 1rem);
  line-height: 1.7;
  text-align: center;
  color: var(--color-primary);
  /* ARIA role instead of .active/current class. */
}

@media screen and (min-width: 48em) {
  .pagination a {
    font-size: calc(
      (var(--font-size-small) * 1rem) +
        (var(--font-size) - var(--font-size-small)) * (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .pagination a {
    font-size: calc(var(--font-size) * 1rem);
  }
}

.pagination a[aria-current='page'] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.pagination a:focus {
  background-color: var(--color-background);
  border-color: var(--color-base-lighter);
  color: var(--color-text-default);
}

.pagination a:hover {
  background-color: var(--color-background);
  border-color: var(--color-supporting);
  color: var(--color-text-default);
}

/* Large. */
.pagination--lg a {
  font-size: calc(var(--font-size) * 1rem);
}

@media screen and (min-width: 48em) {
  .pagination--lg a {
    font-size: calc(
      (var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .pagination--lg a {
    font-size: calc(var(--font-size-medium) * 1rem);
  }
}

/* Small. */
.pagination--sm a {
  font-size: calc(var(--font-size-x-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .pagination--sm a {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .pagination--sm a {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

/* Variables */
/* Mixins */
/* Applied to <ul> */
.nav-pills {
  list-style-type: none;
  margin: 0 0 var(--spacing) 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  /* ARIA role attribute selector instead of .active/current class. */
}

.nav-pills li {
  margin-left: 0;
}

.nav-pills li:not(:last-child) {
  margin-right: var(--spacing);
}

.nav-pills li:before {
  content: '';
  display: none;
}

.nav-pills a {
  display: block;
  padding: var(--spacing-small) var(--spacing);
  border-radius: var(--border-radius-x-small);
  font-family: var(--font-family-alt);
  font-size: calc(var(--font-size-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .nav-pills a {
    font-size: calc(
      (var(--font-size-small) * 1rem) +
        (var(--font-size) - var(--font-size-small)) * (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .nav-pills a {
    font-size: calc(var(--font-size) * 1rem);
  }
}

.nav-pills [aria-current='page'] {
  border-style: solid;
  border-color: var(--color-supporting);
  color: var(--color-text-default);
}

.nav-pills .disabled {
  color: var(--color-base);
  cursor: not-allowed;
}

/* Stacked pills. */
.nav--stacked {
  display: inline-block;
}

.nav--stacked li:not(:last-child) {
  margin-right: 0;
}

/* Variables */
/* Mixins */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Page */
  @page {
    margin: 2cm;
  }
  @page :right {
    @top-center {
      margin: 10pt 0 30pt 0;
      content: 'Inspired Guides https://inspired.guide';
      font-size: 9pt;
      color: #333;
    }
  }
  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }
  p {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  blockquote {
    border: 1px solid #999;
  }
  blockquote,
  img,
  pre,
  tr {
    page-break-inside: avoid;
  }
  /* Anchors */
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
  }
  abbr[title]:after {
    content: ' (' attr(title) ')';
  }
  /* Elements */
  img {
    max-width: 100% !important;
  }
  thead {
    display: table-header-group;
  }
  .btn {
    display: none;
  }
  /* Style Guides */
  .ig-header a[href]:after,
  .ig-footer a[href]:after {
    content: '';
    display: none;
  }
  .hidden-print {
    display: none;
  }
}

/* http://prismjs.com/download.html?themes=prism&languages=markup+css&plugins=toolbar+copy-to-clipboard */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*='language-'],
pre[class*='language-'] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*='language-'],
  pre[class*='language-'] {
    text-shadow: none;
  }
}

/* Code blocks */
pre[class*='language-'] {
  align-items: flex-start;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  padding: 0 var(--spacing-large) var(--spacing-large);
  margin: 0;
  overflow: auto;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #999;
}

.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}

.token.function {
  color: #dd4a68;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

pre.code-toolbar {
  position: relative;
}

pre.code-toolbar > .toolbar {
  align-self: flex-end;
  line-height: 1;
  position: sticky;
  top: 0;
  left: var(--spacing-large);
  width: 100%;
  text-align: right;
  z-index: 20;
  height: var(--spacing-x-large);
}

pre.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
  line-height: 1;
}

pre.code-toolbar > .toolbar a {
  cursor: pointer;
  display: block;
}

pre.code-toolbar > .toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
  color: var(--color-text-link);
  font-size: calc(var(--font-size) * 1rem);
  padding: 0.5em 1em;
  background: var(--color-background);
}

pre.code-toolbar > .toolbar a:hover,
pre.code-toolbar > .toolbar a:focus,
pre.code-toolbar > .toolbar button:hover,
pre.code-toolbar > .toolbar button:focus,
pre.code-toolbar > .toolbar span:hover,
pre.code-toolbar > .toolbar span:focus {
  color: var(--color-text-link-hover);
  text-decoration: none;
}

/* Variables */
/* Mixins */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: '';
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.85714%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

/* Variables */
/* Mixins */
/* Variables */
/* Mixins */
.table {
  margin-bottom: var(--spacing-medium);
  width: 100%;
  max-width: 100%;
  background-color: var(--color-background);
  border-collapse: collapse;
  font-family: var(--font-family-alt);
}

.table th,
.table td {
  padding: var(--spacing);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  vertical-align: bottom;
  border-top: var(--border-width-thin) solid var(--color-border);
  border-bottom: var(--border-width-thick) solid var(--color-border);
}

.table tbody th,
.table tbody td {
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

/* Bordered table. */
.table-bordered {
  border: var(--border-width-hairline) solid var(--color-border);
}

.table-bordered th,
.table-bordered td {
  border: var(--border-width-hairline) solid var(--color-border);
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: var(--border-width-thick);
}

/* Table with hover effect on rows. */
.table-hover tbody tr:hover th,
.table-hover tbody tr:hover td {
  background-color: var(--color-background-row-hover);
}

/* Inverse table. */
.table-inverse {
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.table-inverse thead th {
  border-top-color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent-dark);
}

.table-inverse tbody th,
.table-inverse tbody td {
  border-bottom-color: var(--color-accent-dark);
}

/* Small table. */
.table-sm {
  width: auto;
  font-size: calc(var(--font-size-x-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .table-sm {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .table-sm {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

.table-sm th,
.table-sm td {
  padding: var(--spacing-small);
}

/* Striped table. */
.table-striped thead th {
  border-bottom-width: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-background-row-striped);
}

.table-striped tbody th,
.table-striped tbody td {
  border-bottom-width: 0;
}

/* Inverse colour table header. */
.thead-inverse {
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

/* Variables */
/* Mixins */
@media screen and (min-width: 48em) {
  .type-columns {
    margin-bottom: var(--spacing-x-large);
    columns: 2;
    column-gap: var(--spacing-xx-large);
    column-rule: var(--border-width-thin) solid var(--color-border);
  }
}

/* Variables */
/* Mixins */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  margin-bottom: var(--spacing);
  line-height: var(--line-height-heading);
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

h1.--fontBoldCondensed,
h2.--fontBoldCondensed,
h3.--fontBoldCondensed,
h4.--fontBoldCondensed,
h5.--fontBoldCondensed,
h6.--fontBoldCondensed,
.h1.--fontBoldCondensed,
.h2.--fontBoldCondensed,
.h3.--fontBoldCondensed,
.h4.--fontBoldCondensed,
.h5.--fontBoldCondensed,
.h6.--fontBoldCondensed {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

h1,
.h1 {
  font-size: calc(var(--font-size-xxx-large) * 1rem);
}

@media screen and (min-width: 48em) {
  h1,
  .h1 {
    font-size: calc(
      (var(--font-size-xxx-large) * 1rem) +
        (var(--font-size-xxxx-large) - var(--font-size-xxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  h1,
  .h1 {
    font-size: calc(var(--font-size-xxxx-large) * 1rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-size-x-large) * 1rem);
}

@media screen and (min-width: 48em) {
  h2,
  .h2 {
    font-size: calc(
      (var(--font-size-xx-large) * 1rem) +
        (var(--font-size-xxx-large) - var(--font-size-xx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  h2,
  .h2 {
    font-size: calc(var(--font-size-xxx-large) * 1rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-size-x-large) * 1rem);
}

@media screen and (min-width: 48em) {
  h3,
  .h3 {
    font-size: calc(
      (var(--font-size-x-large) * 1rem) +
        (var(--font-size-xx-large) - var(--font-size-x-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  h3,
  .h3 {
    font-size: calc(var(--font-size-xx-large) * 1rem);
  }
}

h4,
.h4 {
  font-size: calc(var(--font-size-large) * 1rem);
}

@media screen and (min-width: 48em) {
  h4,
  .h4 {
    font-size: calc(
      (var(--font-size-large) * 1rem) +
        (var(--font-size-x-large) - var(--font-size-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  h4,
  .h4 {
    font-size: calc(var(--font-size-x-large) * 1rem);
  }
}

h5,
.h5 {
  font-size: calc(var(--font-size-medium) * 1rem);
}

@media screen and (min-width: 48em) {
  h5,
  .h5 {
    font-size: calc(
      (var(--font-size-medium) * 1rem) +
        (var(--font-size-large) - var(--font-size-medium)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  h5,
  .h5 {
    font-size: calc(var(--font-size-large) * 1rem);
  }
}

h6,
.h6 {
  font-size: calc(var(--font-size) * 1rem);
}

@media screen and (min-width: 48em) {
  h6,
  .h6 {
    font-size: calc(
      (var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  h6,
  .h6 {
    font-size: calc(var(--font-size-medium) * 1rem);
  }
}

/* Display. */
.display-1 {
  margin-bottom: var(--spacing-x-large);
  font-size: calc(var(--font-size-xxxx-large) * 1rem);
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

@media screen and (min-width: 48em) {
  .display-1 {
    font-size: calc(
      (var(--font-size-xxxx-large) * 1rem) +
        (var(--font-size-display) - var(--font-size-xxxx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .display-1 {
    font-size: calc(var(--font-size-display) * 1rem);
  }
}

.display-2 {
  font-size: calc(var(--font-size-display) * 1rem);
}

@media screen and (min-width: 48em) {
  .display-2 {
    font-size: calc(
      (var(--font-size-display) * 1rem) +
        (var(--font-size-x-display) - var(--font-size-display)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .display-2 {
    font-size: calc(var(--font-size-x-display) * 1rem);
  }
}

.display-3 {
  font-size: calc(var(--font-size-x-display) * 1rem);
}

@media screen and (min-width: 48em) {
  .display-3 {
    font-size: calc(
      (var(--font-size-x-display) * 1rem) +
        (var(--font-size-xx-display) - var(--font-size-x-display)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .display-3 {
    font-size: calc(var(--font-size-xx-display) * 1rem);
  }
}

.display-1 b,
.display-2 b,
.display-3 b {
  color: var(--color-brand);
}

/* Inline. */
.inline-headings {
  margin-bottom: var(--spacing-large);
}

.inline-headings__heading,
.inline-headings__paragraph {
  display: inline;
}

/* Variables */
/* Mixins */
/* Ordered.
   Numbers generated from CSS counters. */
ol {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  counter-reset: ol-counter;
}

ol li {
  counter-increment: ol-counter;
  margin-left: -1rem;
}

ol li:before {
  margin-right: var(--spacing-medium);
  content: counter(ol-counter);
  color: var(--color-text-default);
}

/* Unordered.
   Markers generated by CSS content. */
ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

ul li {
  position: relative;
  margin-left: var(--spacing-medium);
}

ul li:before {
  position: absolute;
  content: '\2022';
  color: #676767;
  left: -15px;
}

/* Nested. */
li > ul,
li > ol {
  margin: var(--spacing) 0 var(--spacing) var(--spacing);
  padding: 0;
}

/* Description/definition. */
dt {
  font-weight: var(--font-weight-bold);
}

/* Columns. */
.list--columns {
  margin-bottom: var(--spacing-x-large);
  columns: 2;
  column-gap: var(--spacing-xx-large);
}

/* Medium screen styles: */
@media screen and (min-width: 48em) {
  /* Increase number of columns. */
  .list--columns {
    columns: 3;
  }
}

/* Large screen styles: */
@media screen and (min-width: 64em) {
  /* Remove columns. */
  .list--columns {
    columns: 1;
  }
}

/* Footnotes. */
.list--footnotes li {
  margin-bottom: var(--spacing);
  font-size: calc(var(--font-size-x-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .list--footnotes li {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .list--footnotes li {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

/* Inline. */
.list--inline li {
  display: inline-block;
  font-family: var(--font-family-alt);
  /* Remove list markers generated by :before. */
}

.list--inline li:not(:last-child) {
  margin-right: var(--spacing-large);
}

.list--inline li:before {
  content: '';
  display: none;
}

/* Unstyled, no markers. */
.list--unstyled li {
  /* Remove list markers generated by :before. */
}

.list--unstyled li:before {
  content: '';
  display: none;
}

/* Variables */
/* Mixins */
address {
  margin-bottom: var(--spacing-medium);
  font-size: calc(var(--font-size-small) * 1rem);
  line-height: var(--line-height-text);
}

@media screen and (min-width: 48em) {
  address {
    font-size: calc(
      (var(--font-size-small) * 1rem) +
        (var(--font-size) - var(--font-size-small)) * (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  address {
    font-size: calc(var(--font-size) * 1rem);
  }
}

abbr[title] {
  border-bottom: var(--border-width-thin) dotted var(--color-border);
  cursor: help;
}

dfn {
  font-style: italic;
}

ins {
  background-color: var(--color-background-selection);
  color: var(--color-text-default);
  text-decoration: none;
}

mark {
  background-color: var(--color-background-selection);
  color: var(--color-text-default);
  font-style: italic;
  font-weight: var(--font-weight-bold);
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

small {
  display: inline-block;
  font-size: calc(var(--font-size-x-small) * 1rem);
  line-height: var(--line-height-text);
}

@media screen and (min-width: 48em) {
  small {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  small {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

/* Alignment */
.text--left {
  text-align: left;
}

.text--right {
  text-align: right;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
}

/* OpenType features
   https://helpx.adobe.com/typekit/using/open-type-syntax.html#lnum */
.type-frac-diagonal {
  font-variant-numeric: diagonal-fractions;
  font-feature-settings: 'frac' 1;
}

/* ligatures */
.type-ligs-standard {
  font-variant-ligatures: standard-ligatures;
  font-feature-settings: 'liga' 1;
}

.type-ligs-discretionary {
  font-variant-ligatures: discretionary-ligatures;
  font-feature-settings: 'dlig' 1;
}

/* numerals */
.type-nums-lining {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

.type-nums-oldstyle {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'onum' 1;
}

.type-nums-proportional {
  font-variant-numeric: proportional-nums;
  font-feature-settings: 'pnum' 1;
}

/* caps */
.type-small-caps {
  font-variant-caps: small-caps;
  font-feature-settings: 'smcp' 1;
}

/* swashes */
.type-swashes {
  font-feature-settings: 'swsh' 1;
}

/* All OpenType features */
.type-all {
  font-feature-settings: 'dlig' 1, 'onum' 1, 'swsh' 1;
}

.primary-typeface-weight--light {
  font-weight: var(--font-weight-light);
}

.primary-typeface-weight__normal {
  font-weight: var(--font-weight);
}

.primary-typeface-weight--bold {
  font-weight: var(--font-weight-bold);
}

.secondary-typeface-weight--normal {
  font-weight: var(--font-weight-alt);
}

.secondary-typeface-weight__bold {
  font-weight: var(--font-weight-bold-alt);
}

/* Variables */
/* Mixins */
p {
  margin-top: 0;
  margin-bottom: var(--spacing);
  font-size: calc(var(--font-size-small) * 1rem);
}

@media screen and (min-width: 48em) {
  p {
    font-size: calc(
      (var(--font-size-small) * 1rem) +
        (var(--font-size) - var(--font-size-small)) * (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  p {
    font-size: calc(var(--font-size) * 1rem);
  }
}

/* Secondary, smaller than default. */
.secondary {
  font-size: calc(var(--font-size-x-small) * 1rem);
}

@media screen and (min-width: 48em) {
  .secondary {
    font-size: calc(
      (var(--font-size-x-small) * 1rem) +
        (var(--font-size-small) - var(--font-size-x-small)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .secondary {
    font-size: calc(var(--font-size-small) * 1rem);
  }
}

/* Lede, larger than default. */
.lede {
  font-size: calc(var(--font-size-medium) * 1rem);
}

@media screen and (min-width: 48em) {
  .lede {
    font-size: calc(
      (var(--font-size-medium) * 1rem) +
        (var(--font-size-large) - var(--font-size-medium)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .lede {
    font-size: calc(var(--font-size-large) * 1rem);
  }
}

/* Standfirst, largest paragraph style. */
.standfirst {
  font-size: calc(var(--font-size-x-large) * 1rem);
}

@media screen and (min-width: 48em) {
  .standfirst {
    font-size: calc(
      (var(--font-size-x-large) * 1rem) +
        (var(--font-size-xx-large) - var(--font-size-x-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  .standfirst {
    font-size: calc(var(--font-size-xx-large) * 1rem);
  }
}

/* Initial cap/letter where supported. */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .initial-letter::first-letter {
    -webkit-initial-letter: 2;
    initial-letter: 2;
    font-weight: var(--font-weight-light);
    color: var(--color-base-light);
  }
}

sup {
  font-size: 0.4rem;
}

/* Variables */
/* Mixins */
blockquote {
  margin: var(--spacing-xx-large) 0;
  margin-left: 0;
  /* Larger than default. */
  /* Align text to right. */
}

blockquote p {
  padding-left: var(--spacing-large);
  border-left: var(--border-width-thick) solid var(--color-border);
  font-family: var(--font-family-alt);
  font-style: italic;
  font-size: calc(var(--font-size-x-large) * 1rem);
}

@media screen and (min-width: 48em) {
  blockquote p {
    font-size: calc(
      (var(--font-size-x-large) * 1rem) +
        (var(--font-size-xx-large) - var(--font-size-x-large)) * (100vw - 48em) /
        (16)
    );
  }
}

@media screen and (min-width: 64em) {
  blockquote p {
    font-size: calc(var(--font-size-xx-large) * 1rem);
  }
}

blockquote cite {
  display: block;
  margin-bottom: var(--spacing-medium);
}

blockquote.blockquote--large p {
  font-size: calc(var(--font-size-xx-large) * 1rem);
}

@media screen and (min-width: 48em) {
  blockquote.blockquote--large p {
    font-size: calc(
      (var(--font-size-xx-large) * 1rem) +
        (var(--font-size-xxx-large) - var(--font-size-xx-large)) *
        (100vw - 48em) / (16)
    );
  }
}

@media screen and (min-width: 64em) {
  blockquote.blockquote--large p {
    font-size: calc(var(--font-size-xxx-large) * 1rem);
  }
}

blockquote.blockquote--reverse {
  text-align: right;
}

blockquote.blockquote--reverse p {
  padding-right: var(--spacing-large);
  padding-left: 0;
  border-right: var(--border-width-thick) solid var(--color-border);
  border-left-width: 0;
}

.a-selectionTile__inner {
  padding-top: var(--spacing-x-large);
}

@media screen and (min-width: 37.5em) {
  .a-selectionTile__inner {
    text-align: center;
  }
}

.a-selectionTile__inner__tile {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .a-selectionTile__inner__tile {
    display: inline-block;
  }
}

.a-selectionTile__inner__tile--input {
  opacity: 0;
}

/* If checkbox is checked, blue background */
.a-selectionTile__inner__tile--input[type='radio']:checked + label {
  color: var(--color-base-lightest);
  background-color: var(--color-primary);
}

/* Add this */
.a-selectionTile__inner__tile--input[type='radio']:focus + label {
  color: var(--color-base-lightest);
  background-color: var(--color-primary);
}

.a-selectionTile__inner__tile--input:checked
  ~ .a-selectionTile__inner__tile--label {
  color: var(--color-base-lightest);
  background-color: var(--color-primary);
  box-shadow: none;
}

.a-selectionTile__inner__tile--input:checked
  ~ .a-selectionTile__inner__tile--label:before {
  display: block;
}

.a-selectionTile__inner__tile--input:checked
  ~ .a-selectionTile__inner__tile--label:after {
  display: block;
}

.a-selectionTile__inner__tile--input:checked
  ~ .a-selectionTile__inner__tile--label
  h5:before {
  display: block;
}

.a-selectionTile__inner__tile--label {
  position: relative;
  display: block;
  margin: 0 auto var(--spacing-xx-large);
  text-align: center;
  padding: var(--spacing-x-large) var(--spacing-medium) var(--spacing-medium);
  background-color: var(--color-base-lightest);
  color: var(--color-text-default-light);
  width: 256px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-tile);
}

@media screen and (min-width: 37.5em) {
  .a-selectionTile__inner__tile--label {
    display: inline-block;
    width: 220px;
    padding-top: var(--spacing-xx-large);
    padding-bottom: var(--spacing-xx-large);
    margin: 0 var(--spacing);
  }
}

.a-selectionTile__inner__tile--label:hover {
  color: var(--color-text-default);
  background-color: var(--color-base-light);
  text-decoration: none;
}

.a-selectionTile__inner__tile--label h5 {
  position: relative;
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-small);
  font-weight: var(--font-weight-bold);
}

.a-selectionTile__inner__tile--label h5:before {
  display: none;
  position: absolute;
  top: -69px;
  left: 80px;
  content: '';
  width: 64px;
  height: 64px;
  background-color: var(--color-base-lightest);
  border-radius: var(--border-radius-circle);
  z-index: 5;
}

@media screen and (min-width: 37.5em) {
  .a-selectionTile__inner__tile--label h5:before {
    top: -93px;
    left: 62px;
  }
}

@media screen and (min-width: 37.5em) {
  .a-selectionTile__inner__tile--label h5 {
    margin-top: var(--spacing-medium);
  }
}

.a-selectionTile__inner__tile--label:before {
  display: none;
  position: absolute;
  top: -25px;
  left: 100px;
  content: '';
  width: 48px;
  height: 48px;
  background-color: var(--color-base-lightest);
  border: 4px solid var(--color-accent-green-light);
  border-radius: var(--border-radius-circle);
  z-index: 6;
}

@media screen and (min-width: 37.5em) {
  .a-selectionTile__inner__tile--label:before {
    left: 82px;
  }
}

.a-selectionTile__inner__tile--label:after {
  display: none;
  position: absolute;
  top: -15px;
  left: 120px;
  content: '';
  width: 12px;
  height: 24px;
  background-color: var(--color-base-lightest);
  transform: rotate(45deg);
  border-bottom: 4px solid var(--color-accent-green-light);
  border-right: 4px solid var(--color-accent-green-light);
  z-index: 7;
}

@media screen and (min-width: 37.5em) {
  .a-selectionTile__inner__tile--label:after {
    left: 102px;
  }
}

.a-tile {
  display: inline-block;
  text-align: center;
  width: 200px;
  border: 2px solid var(--color-primary-light);
  border-radius: var(--border-radius-x-small);
}

.a-tile__inner {
  padding: var(--spacing-medium);
}

.a-tile__inner__image {
  margin-bottom: var(--spacing-small);
}

.a-tile__inner__heading {
  margin-bottom: var(--spacing-x-small);
}

.a-iconWithText__inner {
  display: flex;
  flex-direction: row;
}

.a-iconWithText__inner--details {
  margin-left: var(--spacing-medium);
}

.a-iconWithText__inner--details h4 {
  margin-bottom: var(--spacing-x-small);
}

.a-iconWithText__inner.--centerAligned {
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.a-iconWithText__inner.--centerAligned .a-iconWithText__inner--details {
  margin-left: 0;
}

.a-iconWithText__inner.--centerAligned .a-iconWithText__inner--icon {
  margin-bottom: var(--spacing-medium);
}

.--advantageTriangle:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 0;
  height: 0;
  border-top: 20px solid var(--color-accent-orange);
  border-right: 20px solid transparent;
  float: left;
  border-left: 20px solid var(--color-accent-orange);
  border-bottom: 20px solid transparent;
  border-top-left-radius: var(--border-radius-small);
}

.--advantageTriangle:after {
  position: absolute;
  font-size: 16px;
  top: 0;
  left: 3px;
  content: '\2605';
  color: var(--color-base-lightest);
}

.a-cornerRibbon {
  width: 150px;
  background: #c5673d;
  position: absolute;
  top: 25px;
  left: -40px;
  text-align: center;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: var(--color-base-lightest);
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.--forwardArrowsTriangle:before {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid var(--color-primary-light);
  float: left;
  border-left: 30px solid transparent;
  border-bottom: 30px solid var(--color-primary-light);
  border-bottom-right-radius: var(--border-radius-x-small);
}

.--forwardArrowsTriangle:after {
  position: absolute;
  bottom: 3px;
  right: 3px;
  content: url('../images/forward-arrows-icon.png');
}

.a-customCheckbox {
  position: relative;
  display: flex;
  border-radius: var(--border-radius-small);
  padding: var(--spacing-small);
  background-color: var(--color-accent-green-light);
}

.a-customCheckbox input {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  z-index: 2;
}

.a-customCheckbox input[checked] ~ .a-customCheckbox__checkmark,
.a-customCheckbox input:checked ~ .a-customCheckbox__checkmark,
.a-customCheckbox input[checked=''] ~ .a-customCheckbox__checkmark {
  background-color: var(--color-base-lightest);
  border: 2px solid var(--color-base-lightest);
}

.a-customCheckbox input[checked] ~ .a-customCheckbox__checkmark:after,
.a-customCheckbox input:checked ~ .a-customCheckbox__checkmark:after,
.a-customCheckbox input[checked=''] ~ .a-customCheckbox__checkmark:after {
  display: block;
}

.a-customCheckbox input[checked] ~ label,
.a-customCheckbox input:checked ~ label,
.a-customCheckbox input[checked=''] ~ label {
  font-weight: var(--font-weight-bold);
}

.a-customCheckbox input:not([checked]) ~ .a-customCheckbox__checkmark {
  background-color: var(--color-accent-green-light);
  border: 2px solid var(--color-base-lightest);
}

.a-customCheckbox input:not([checked]) ~ .a-customCheckbox__checkmark:after {
  display: none;
}

.a-customCheckbox .a-customCheckbox__checkmark {
  position: absolute;
  top: 8px;
  left: 8px;
  height: 14px;
  width: 14px;
  background-color: var(--color-accent-green-light);
  z-index: 1;
  border: 2px solid var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
  cursor: pointer;
}

@media screen and (min-width: 64em) {
  .a-customCheckbox .a-customCheckbox__checkmark {
    top: 12px;
  }
}

.a-customCheckbox .a-customCheckbox__checkmark:after {
  content: '';
  position: absolute;
  display: none;
  left: 4px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid var(--color-accent-green-light);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.a-customCheckbox label {
  color: var(--color-base-lightest);
  margin-left: var(--spacing-large);
  margin-top: 2px;
  cursor: pointer;
}

.a-medicareParts__inner > div {
  display: flex;
  flex-direction: column;
}

.a-medicareParts__inner > div:not(:last-of-type) {
  margin-bottom: var(--spacing-x-large);
}

@media screen and (min-width: 37.5em) {
  .a-medicareParts__inner > div {
    flex-direction: row;
  }
  .a-medicareParts__inner > div > div:first-of-type {
    width: 60%;
    margin-right: var(--spacing-medium);
  }
  .a-medicareParts__inner > div > div:last-of-type {
    width: 40%;
  }
}

.a-medicareParts__inner > div h4 {
  margin-bottom: var(--spacing-large);
}

.a-medicareParts__inner > div h5 {
  color: var(--color-text-default-light);
  margin-top: var(--spacing-large);
}

.a-medicareParts__inner > div p {
  color: var(--color-text-default-light);
}

.a-medicareParts__inner > div ul li {
  color: var(--color-text-alt);
}

.a-medicareParts__inner > div ul li:not(:last-of-type) {
  margin-bottom: var(--spacing-small);
}

.a-whatIsMedicare__inner h4,
.a-whatIsMedicare__inner ul {
  margin-bottom: var(--spacing-large);
}

.a-whatIsMedicare__inner h4 li,
.a-whatIsMedicare__inner ul li {
  color: var(--color-text-alt);
}

.a-whatIsMedicare__inner h4 li:not(:last-of-type),
.a-whatIsMedicare__inner ul li:not(:last-of-type) {
  margin-bottom: var(--spacing-small);
}

.a-whatIsMedicare__inner p {
  color: var(--color-text-default-light);
}

.a-whatIsMedicare__inner--description {
  margin-bottom: var(--spacing-x-large);
}

.a-whatIsMedicare__inner--whoIsEligible__link {
  text-align: center;
}

.a-whenToEnroll__inner--period {
  display: flex;
  flex-direction: row;
}

.a-whenToEnroll__inner--period:not(:last-of-type) {
  margin-bottom: var(--spacing-large);
}

.a-whenToEnroll__inner--period__tile {
  width: 30%;
  margin-right: var(--spacing-medium);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.a-whenToEnroll__inner--period__tile--inner {
  width: 114px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-small);
  border: 1px solid var(--color-text-inverse-alt);
  text-align: center;
  box-sizing: border-box;
  border-radius: var(--border-radius-medium);
}

@media screen and (min-width: 37.5em) {
  .a-whenToEnroll__inner--period__tile--inner {
    padding: var(--spacing-large);
    width: 154px;
    height: 132px;
  }
}

.a-whenToEnroll__inner--period__tile--inner h3 {
  margin-bottom: 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.a-whenToEnroll__inner--period__tile--inner p {
  text-transform: uppercase;
  margin-bottom: 0;
  color: var(--color-text-default-light);
}

.a-whenToEnroll__inner--period__content {
  align-self: center;
  width: 70%;
}

.a-whenToEnroll__inner--period__content p {
  color: var(--color-text-default-light);
}

.a-whenToEnroll__inner--period__content img {
  width: 14px;
}

.a-whenToEnroll__inner--period:nth-of-type(3)
  .a-whenToEnroll__inner--period__content
  h4 {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

.a-whenToEnroll__inner--period.--after65
  .a-whenToEnroll__inner--period__content
  h5 {
  margin-bottom: 0;
}

.m-accordion__inner--section__heading {
  position: relative;
  background-color: var(--color-base-lightest);
  border-bottom: 0;
  outline: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  color: var(--color-primary);
  cursor: pointer;
  padding: var(--spacing-medium);
  width: 100%;
  text-align: left;
  transition: 0.4s;
}

.m-accordion__inner--section__heading h6 {
  margin-bottom: 0;
}

.m-accordion__inner--section__heading.--active,
.m-accordion__inner--section__heading:hover {
  background-color: var(--color-base-lighter);
}

.m-accordion__inner--section__heading:after {
  position: absolute;
  content: '\2303';
  font-size: 1.5rem;
  color: var(--color-primary);
  top: 5px;
  right: 20px;
  transform: rotate(180deg);
  transition: 0.2s;
}

.m-accordion__inner--section__heading.--active:after {
  content: '\2303';
  top: 16px;
  transform: rotate(0);
  transition: 0.2s;
}

.m-accordion__inner--section__panel {
  color: var(--color-text-alt);
  background-color: var(--color-base-lighter);
  padding: 0 var(--spacing-medium);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.m-accordion__inner--section__panel p:first-of-type {
  margin-top: var(--spacing-medium);
}

.m-accordion__inner--section:not(:last-of-type)
  .m-accordion__inner--section__panel {
  border-bottom: 1px solid var(--color-text-inverse-alt);
}

.m-educationHeading__inner {
  color: var(--color-text-alt);
}

.m-educationHeading__inner--heading {
  position: relative;
  display: inline-block;
  color: var(--color-text-default);
}

.m-educationHeading__inner--heading.--shortBlueUnderline {
  padding-bottom: var(--spacing-small);
  margin-bottom: var(--spacing-large);
}

.m-educationHeading__inner--learnMore {
  margin-top: var(--spacing-large);
}

.m-estimatedOOP__inner {
  color: var(--color-text-alt);
}

.m-estimatedOOP__inner h3,
.m-estimatedOOP__inner h5 {
  color: var(--color-text-default);
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  margin-bottom: 0;
}

.m-estimatedOOP__inner--total {
  margin-bottom: var(--spacing-medium);
}

.m-estimatedOOP__inner--total * {
  display: inline-block;
}

.m-estimatedOOP__inner--total h6 {
  color: var(--color-text-default);
}

.m-estimatedOOP__inner--breakdown {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--spacing-medium);
}

.m-estimatedOOP__inner--breakdown > div {
  position: relative;
  flex: 1;
}

.m-estimatedOOP__inner--breakdown > div:not(:last-of-type) {
  margin-right: var(--spacing-large);
}

.m-estimatedOOP__inner--breakdown__premium:after {
  display: block;
  position: absolute;
  top: -10px;
  right: 0px;
  content: '\02D6';
  font-size: 32px;
  color: var(--color-primary-light);
}

.m-estimatedOOP__inner--breakdown__costs:after {
  display: block;
  position: absolute;
  top: -10px;
  right: 0px;
  content: '\003D';
  font-size: 26px;
  color: var(--color-primary-light);
}

.m-signInForm {
  background-color: var(--color-base-lightest);
  padding: var(--spacing-x-large) var(--spacing-x-large) var(--spacing-medium);
  max-width: var(--max-width);
  box-sizing: border-box;
  box-shadow: var(--box-shadow-tile);
  margin: 0 auto var(--spacing-x-large);
}

@media screen and (min-width: 48em) {
  .m-signInForm {
    padding-left: var(--spacing-xx-large);
    padding-right: var(--spacing-xx-large);
  }
}

.m-signInForm__inner__heading {
  color: var(--color-text-default-light);
  text-align: center;
  margin-bottom: var(--spacing-x-large);
}

.m-signInForm__inner__heading img {
  margin-bottom: var(--spacing-large);
}

.m-signInForm__inner__form {
  margin-bottom: var(--spacing-medium);
}

.m-signInForm__inner__form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.m-signInForm__inner__form legend {
  visibility: hidden;
  height: 0;
}

.m-signInForm__inner__form--inputs__input {
  background-color: var(--color-base-lightest);
  border: 1px solid var(--color-text-alt);
  border-radius: var(--border-radius-x-small);
  padding-left: 0.5rem;
  margin-bottom: var(--spacing-medium);
}

.m-signInForm__inner__form--inputs__input label {
  display: none;
}

.m-signInForm__inner__form--inputs__input input {
  height: 2rem;
  border: 0;
  width: 90%;
  outline: none;
  margin: 0 auto;
}

.m-signInForm__inner__form--inputs__input:last-of-type {
  background-color: var(--color-accent-orange);
  border: 1px solid var(--color-accent-orange);
  text-align: center;
  padding-left: 0;
}

.m-signInForm__inner__form--inputs__input:last-of-type input {
  border-radius: var(--border-radius-x-small);
  background-color: var(--color-accent-orange);
  background: var(--color-accent-orange);
  color: var(--color-base-lightest);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.m-signInForm__inner__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--spacing-large);
  margin-bottom: var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .m-signInForm__inner__links {
    flex-direction: row;
  }
}

.m-signInForm__inner__links--link {
  text-align: center;
  margin-bottom: var(--spacing-small);
}

.m-signInForm__inner__footnotes {
  text-align: center;
}

.m-pageHeading {
  max-width: var(--max-width);
  text-align: center;
  margin: 0 auto;
  padding: var(--spacing-medium);
}

@media screen and (min-width: 48em) {
  .m-pageHeading {
    padding: var(--spacing-xx-large);
  }
}

.m-pageHeading__image {
  margin-bottom: var(--spacing-large);
}

.m-pageHeading__header {
  margin-bottom: var(--spacing-large);
}

.m-pageHeading__boldHeader {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary-dark);
}

.m-pageHeading__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.m-pageHeading__link a {
  margin-right: var(--spacing-x-small);
}

.m-tileWithText__inner {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  padding: 0;
}

@media screen and (min-width: 37.5em) {
  .m-tileWithText__inner {
    flex-direction: row;
    padding: var(--spacing-medium) 0 0;
  }
}

.m-tileWithText__inner__tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-x-small);
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  padding: var(--spacing-medium) var(--spacing-large);
  text-decoration: none;
  box-shadow: var(--box-shadow-section);
  max-width: 280px;
  margin: 0 auto;
}
.m-ua-tileWithText__inner__tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-x-small);
  background-position: center;
  margin-bottom: var(--spacing-medium);
  background-image: url('../images/bg-image.png');
  max-width: 657px;
  height: 320px;
  background-repeat: no-repeat;
  padding: var(--spacing-medium) var(--spacing-large);
  text-decoration: none;
  box-shadow: var(--box-shadow-section);
  margin: 0 auto;
}

@media screen and (min-width: 37.5em) {
  .m-tileWithText__inner__tile {
    max-width: 240px;
    margin: 0 var(--spacing-large);
    padding: var(--spacing-x-large);
  }
}

.m-tileWithText__inner__tile:first-of-type {
  margin-bottom: var(--spacing-medium);
  background-image: url('../images/../images/tile-with-text-bg-1.png');
}

@media screen and (min-width: 37.5em) {
  .m-tileWithText__inner__tile:first-of-type {
    margin-bottom: 0;
  }
}

.m-tileWithText__inner__tile:last-of-type {
  background-image: url('../images/tile-with-text-bg-2.png');
}

.m-tileWithText__inner__tile:hover,
.m-tileWithText__inner__tile :active,
.m-tileWithText__inner__tile :focus,
.m-tileWithText__inner__tile :visited {
  text-decoration: none;
}

.m-tileWithText__inner__tile__content {
  display: flex;
  flex-direction: column;
  align-content: center;
}

.m-tileWithText__inner__tile__content--heading {
  color: var(--color-base-lightest);
  margin-bottom: var(--spacing-small);
}

.m-tileWithText__inner__tile__content--copy {
  color: var(--color-base-lightest);
}

.m-tileWithText a:focus,
.m-tileWithText a:active {
  text-decoration: none;
}

.m-detailList {
  margin-bottom: 0;
}

.m-detailList__items {
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
}

.m-detailList__items--item {
  text-align: center;
  padding: var(--spacing-small);
  border-bottom: 1px solid var(--color-text-inverse-alt);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item {
    padding: var(--spacing-medium);
  }
}

.m-detailList__items--item:before {
  content: '';
}

.m-detailList__items--item p {
  margin-bottom: var(--spacing-small);
}

.m-detailList__items--item p:first-of-type {
  margin-bottom: var(--spacing-small) !important;
}

.m-detailList__items--item p:last-of-type {
  margin-bottom: 0;
}

.m-detailList__items--item__heading {
  font-weight: var(--font-weight-bold);
}

.m-detailList__items--item__heading.--included {
  display: inline-block;
  position: relative;
}

.m-detailList__items--item__heading.--included:before {
  display: inline-block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -20px;
  background-color: var(--color-accent-green-light);
  border-radius: var(--border-radius-circle);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__heading.--included:before {
    top: 3px;
  }
}

.m-detailList__items--item__heading.--included:after {
  display: inline-block;
  position: absolute;
  top: 1px;
  left: -16px;
  content: '';
  width: 4px;
  height: 7px;
  background-color: var(--color-accent-green-light);
  transform: rotate(45deg);
  border-bottom: 2px solid var(--color-base-lightest);
  border-right: 2px solid var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__heading.--included:after {
    top: 4px;
  }
}

.m-detailList__items--item__heading.--notIncluded {
  display: inline-block;
  position: relative;
}

.m-detailList__items--item__heading.--notIncluded:before {
  display: inline-block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0;
  left: -20px;
  background-color: var(--color-accent-red);
  border-radius: var(--border-radius-circle);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__heading.--notIncluded:before {
    top: 3px;
  }
}

.m-detailList__items--item__heading.--notIncluded:after {
  display: inline-block;
  position: absolute;
  top: -3px;
  left: -17px;
  content: '\00D7';
  font-size: 15px;
  color: var(--color-base-lightest);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__heading.--notIncluded:after {
    top: -1px;
  }
}

.m-detailList__items--item__subHeading {
  color: var(--color-text-alt);
  font-size: 90%;
}

.m-detailList__items--item__copy {
  color: var(--color-text-default-light);
}

.m-detailList__items--item__subCopy {
  color: var(--color-text-alt);
}

.m-detailList__items--item__inOut--included {
  margin-bottom: var(--spacing-small);
}

.m-detailList__items--item__inOut--included li:before {
  content: '';
}

.m-detailList__items--item__inOut--included li p {
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-x-small);
  color: var(--color-text-default-light);
}

.m-detailList__items--item__inOut--included li p:before {
  display: inline-block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -23px;
  background-color: var(--color-accent-green-light);
  border-radius: var(--border-radius-circle);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__inOut--included li p:before {
    top: 3px;
  }
}

.m-detailList__items--item__inOut--included li p:after {
  display: inline-block;
  position: absolute;
  top: 1px;
  left: -19px;
  content: '';
  width: 4px;
  height: 7px;
  background-color: var(--color-accent-green-light);
  transform: rotate(45deg);
  border-bottom: 2px solid var(--color-base-lightest);
  border-right: 2px solid var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__inOut--included li p:after {
    top: 4px;
  }
}

.m-detailList__items--item__inOut--notincluded li:before {
  content: '';
}

.m-detailList__items--item__inOut--notincluded li p {
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-x-small);
  color: var(--color-text-default-light);
}

.m-detailList__items--item__inOut--notincluded li p:before {
  display: inline-block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -23px;
  background-color: var(--color-accent-red);
  border-radius: var(--border-radius-circle);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__inOut--notincluded li p:before {
    top: 3px;
  }
}

.m-detailList__items--item__inOut--notincluded li p:after {
  display: inline-block;
  position: absolute;
  top: -3px;
  left: -20px;
  content: '\00D7';
  font-size: 15px;
  color: var(--color-base-lightest);
}

@media screen and (min-width: 48em) {
  .m-detailList__items--item__inOut--notincluded li p:after {
    top: 0px;
  }
}

.m-toggleButton__inner--switcher {
  position: relative;
  display: block;
  max-width: 500px;
  margin: 0 auto;
  height: 46px;
  background: var(--color-base-lightest);
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--border-radius-x-small);
  box-shadow: var(--box-shadow-menu);
}

.m-toggleButton__inner--switcher__input {
  display: none;
}

.m-toggleButton__inner--switcher__input:checked
  + .m-toggleButton__inner--switcher__label {
  color: var(--color-base-lightest);
}

.m-toggleButton__inner--switcher__input--plan2:checked
  ~ .m-toggleButton__inner--switcher__toggle {
  left: 49.2%;
}

.m-toggleButton__inner--switcher__input:nth-of-type(1):checked
  ~ .m-toggleButton__inner--switcher__content
  section:nth-child(1) {
  display: block;
}

.m-toggleButton__inner--switcher__input:nth-of-type(2):checked
  ~ .m-toggleButton__inner--switcher__content
  section:nth-child(2) {
  display: block;
}

.m-toggleButton__inner--switcher__input:nth-of-type(3):checked
  ~ .m-toggleButton__inner--switcher__content
  section:nth-child(3) {
  display: block;
}

.m-toggleButton__inner--switcher__input:nth-of-type(4):checked
  ~ .m-toggleButton__inner--switcher__content
  section:nth-child(4) {
  display: block;
}

.m-toggleButton__inner--switcher__label {
  float: left;
  width: 50%;
  text-transform: capitalize;
  font-weight: var(--font-weight-bold);
  line-height: 45px;
  color: var(--color-primary-dark);
  text-align: center;
  cursor: pointer;
  position: inherit;
  z-index: 10;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.m-toggleButton__inner--switcher__toggle {
  position: absolute;
  float: left;
  height: 42px;
  width: 50%;
  font-size: 12px;
  line-height: 30px;
  cursor: pointer;
  background-color: var(--color-primary-dark);
  border-radius: var(--border-radius-x-small);
  left: 2px;
  top: 2px;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.m-toggleButton__inner--switcher__content {
  display: block;
  margin-top: 58px;
}

@media screen and (min-width: 37.5em) {
  .m-toggleButton__inner--switcher__content {
    margin-top: 100px;
  }
}

@media screen and (min-width: 48em) {
  .m-toggleButton__inner--switcher__content {
    width: 560px;
    position: relative;
    left: -6%;
  }
}

@media screen and (min-width: 76.2em) {
  .m-toggleButton__inner--switcher__content {
    width: 600px;
    left: -11%;
  }
}

.m-toggleButton__inner--switcher__content > section {
  display: none;
}

.m-planTabs__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--color-base-lighter);
}

.m-planTabs__inner--input {
  position: absolute;
  display: none;
}

.m-planTabs__inner--input:checked + .m-planTabs__inner--label {
  background-color: var(--color-base-lighter);
  border-bottom: 3px solid var(--color-primary-dark);
}

.m-planTabs__inner--input:checked
  + .m-planTabs__inner--label
  + .m-planTabs__inner--content {
  display: block;
}

.m-planTabs__inner--input:checked
  + .m-planTabs__inner--label
  + .m-planTabs__inner--content.--hidden {
  display: none;
}

.m-planTabs__inner--label {
  position: relative;
  box-sizing: border-box;
  width: 33.3%;
  margin: 0;
  padding: var(--spacing-medium) var(--spacing-small);
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
  border-bottom: 3px solid var(--color-text-inverse-alt);
  color: var(--color-text-alt);
  transition: background 0.1s, color 0.1s;
}

.m-planTabs__inner--label:hover {
  background-color: var(--color-base-lightest);
}

.m-planTabs__inner--label:active {
  background-color: var(--color-base-lighter);
  border-bottom: 3px solid var(--color-primary-dark);
}

.m-planTabs__inner--label p {
  margin-bottom: 0;
}

@media screen and (max-width: 30em) {
  .m-planTabs__inner--label p {
    font-size: 0.75rem;
  }
}

.m-planTabs__inner--content {
  width: 100%;
  display: none;
  padding: var(--spacing-large);
  background-color: var(--color-base-lighter);
  order: 99;
}

@media screen and (min-width: 37.5em) {
  .m-planTabs__inner--content {
    padding: var(--spacing-xx-large);
  }
}

.m-planTabs__inner--content__heading {
  margin-bottom: var(--spacing-x-small);
}

.m-planTabs__inner--content__amount {
  font-size: var(--font-size-small);
}

.m-planTabs__inner--content.--centerAligned {
  text-align: center;
}

.m-planTabs.--disabled {
  pointer-events: none;
  opacity: 0.5;
}

.m-planCoverage__inner {
  color: var(--color-text-alt);
}

.m-planCoverage__inner--heading {
  color: var(--color-text-default);
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

.m-planCoverage__inner--list li:not(:last-of-type) {
  margin-bottom: var(--spacing-small);
}

.m-iconCard {
  max-width: 655px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-base-lightest);
}

.m-iconCard__inner {
  display: flex;
  flex-direction: column;
  box-shadow: var(--box-shadow-section);
  padding: var(--spacing-medium) var(--spacing-large);
}

@media screen and (min-width: 37.5em) {
  .m-iconCard__inner {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-x-large);
  }
}

.m-iconCard__inner--content {
  margin-bottom: var(--spacing-large);
}

@media screen and (min-width: 37.5em) {
  .m-iconCard__inner--content {
    margin-bottom: 0;
  }
}

.m-iconCard__inner--content__heading {
  margin-bottom: var(--spacing-small);
}

.m-iconCard__inner--content__copy {
  color: var(--color-text-alt);
}

.m-iconCard__inner--content__copy:last-of-type {
  margin-bottom: 0;
}

@media screen and (min-width: 37.5em) {
  .m-iconCard__inner--content {
    width: 40%;
  }
}

@media screen and (min-width: 64em) {
  .m-iconCard__inner--content {
    width: 50%;
  }
}

.m-iconCard .a-iconWithText:first-of-type {
  margin-bottom: var(--spacing-small);
}

@media screen and (min-width: 37.5em) {
  .m-iconCard .a-iconWithText:first-of-type {
    margin-bottom: var(--spacing-large);
  }
}

@media screen and (min-width: 37.5em) {
  .m-iconCard .a-iconWithText {
    margin: 0 var(--spacing-medium);
  }
}

.m-iconList__inner--heading p {
  color: var(--color-text-alt);
}

.m-iconList__inner--content {
  display: flex;
  flex-direction: row;
  color: var(--color-text-alt);
  padding-bottom: var(--spacing-small);
  border-bottom: 1px solid var(--color-text-inverse-alt);
}

.m-iconList__inner--content__included {
  flex: 1;
  margin-right: var(--spacing-small);
}

@media screen and (min-width: 37.5em) {
  .m-iconList__inner--content__included {
    margin-right: var(--spacing-large);
  }
}

.m-iconList__inner--content__included li {
  position: relative;
  margin-left: var(--spacing-large);
}

.m-iconList__inner--content__included li:not(:last-of-type) {
  margin-bottom: var(--spacing-small);
}

.m-iconList__inner--content__included li:before {
  display: block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -23px;
  background-color: var(--color-accent-green-light);
  border-radius: var(--border-radius-circle);
}

.m-iconList__inner--content__included li:after {
  display: block;
  position: absolute;
  top: 1px;
  left: -19px;
  content: '';
  width: 4px;
  height: 7px;
  background-color: var(--color-accent-green-light);
  transform: rotate(45deg);
  border-bottom: 2px solid var(--color-base-lightest);
  border-right: 2px solid var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

.m-iconList__inner--content__notincluded {
  flex: 1;
}

.m-iconList__inner--content__notincluded li {
  position: relative;
  margin-left: var(--spacing-large);
}

.m-iconList__inner--content__notincluded li:not(:last-of-type) {
  margin-bottom: var(--spacing-small);
}

.m-iconList__inner--content__notincluded li:before {
  display: block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -23px;
  background-color: var(--color-accent-red);
  border-radius: var(--border-radius-circle);
}

.m-iconList__inner--content__notincluded li:after {
  display: block;
  position: absolute;
  top: -3px;
  left: -20px;
  content: '\00D7';
  font-size: 15px;
  color: var(--color-base-lightest);
}

.m-informationTable__inner {
  border-top: 1px solid var(--color-text-inverse-alt);
}

.m-informationTable__inner--row {
  display: flex;
  flex-direction: row;
}

.m-informationTable__inner--row > div {
  flex: 1;
  padding: var(--spacing-medium) var(--spacing-small);
  border-bottom: 1px solid var(--color-text-inverse-alt);
}

@media screen and (min-width: 37.5em) {
  .m-informationTable__inner--row > div {
    padding: var(--spacing-large);
  }
}

.m-informationTable__inner--row__title {
  background-color: var(--color-base-light);
  border-right: 1px solid var(--color-text-inverse-alt);
}

.m-informationTable__inner--row__title p {
  margin-bottom: 0;
}

.m-informationTable__inner--row__title p:first-of-type {
  color: var(--color-text-default-light);
}

.m-informationTable__inner--row__title p:nth-of-type(2) {
  color: var(--color-text-alt);
}

.m-informationTable__inner--row__content p {
  margin-bottom: 0;
}

.m-informationTable__inner--row__content p:first-of-type {
  font-weight: var(--font-weight-bold);
}

.m-informationTable__inner--row__content p:nth-of-type(2) {
  color: var(--color-text-alt);
}

.m-informationTable__inner--row__content .btn {
  text-transform: initial;
  margin-top: var(--spacing-small);
  padding: var(--spacing-small) var(--spacing-large);
}

@media screen and (max-width: 30em) {
  .m-informationTable__inner--row__content .btn {
    padding: var(--spacing-x-small) var(--spacing-small);
    font-size: 0.75rem;
  }
}

@media screen and (min-width: 64em) {
  .m-informationTable__inner--row__content .btn:nth-of-type(2) {
    margin-left: var(--spacing-small);
  }
}

.m-informationTable__inner--row__content--inOut {
  display: flex;
  flex-direction: column;
  color: var(--color-text-alt);
}

@media screen and (min-width: 30em) {
  .m-informationTable__inner--row__content--inOut {
    flex-direction: row;
  }
}

.m-informationTable__inner--row__content--inOut__included {
  flex: 1;
  margin-top: 0;
  margin-right: var(--spacing-small);
}

@media screen and (min-width: 30em) {
  .m-informationTable__inner--row__content--inOut__included {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 37.5em) {
  .m-informationTable__inner--row__content--inOut__included {
    margin-right: var(--spacing-large);
  }
}

.m-informationTable__inner--row__content--inOut__included li {
  position: relative;
  margin-left: var(--spacing-large);
}

.m-informationTable__inner--row__content--inOut__included
  li:not(:last-of-type) {
  margin-bottom: var(--spacing-small);
}

.m-informationTable__inner--row__content--inOut__included li:before {
  display: block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -23px;
  background-color: var(--color-accent-green-light);
  border-radius: var(--border-radius-circle);
}

.m-informationTable__inner--row__content--inOut__included li:after {
  display: block;
  position: absolute;
  top: 1px;
  left: -19px;
  content: '';
  width: 4px;
  height: 7px;
  background-color: var(--color-accent-green-light);
  transform: rotate(45deg);
  border-bottom: 2px solid var(--color-base-lightest);
  border-right: 2px solid var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

.m-informationTable__inner--row__content--inOut__notincluded {
  flex: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.m-informationTable__inner--row__content--inOut__notincluded li {
  position: relative;
  margin-left: var(--spacing-large);
}

.m-informationTable__inner--row__content--inOut__notincluded
  li:not(:last-of-type) {
  margin-bottom: var(--spacing-small);
}

.m-informationTable__inner--row__content--inOut__notincluded li:before {
  display: block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -23px;
  background-color: var(--color-accent-red);
  border-radius: var(--border-radius-circle);
}

.m-informationTable__inner--row__content--inOut__notincluded li:after {
  display: block;
  position: absolute;
  top: -3px;
  left: -20px;
  content: '\00D7';
  font-size: 15px;
  color: var(--color-base-lightest);
}

.m-informationBnner {
  box-shadow: var(--box-shadow-section);
}

.m-informationBnner__inner {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .m-informationBnner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-large);
  }
}

.m-informationBnner__inner--content .a-iconWithText__inner--details h4 {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

.m-informationBnner__inner--content .a-iconWithText__inner--details p {
  color: var(--color-text-alt);
}

@media screen and (min-width: 37.5em) {
  .m-informationBnner__inner--content .a-iconWithText__inner--details p {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 37.5em) {
  .m-informationBnner__inner--content .a-iconWithText {
    margin-bottom: 0;
  }
}

.m-informationBnner__inner--cta .btn {
  text-transform: initial;
}

@media screen and (max-width: 37.5em) {
  .m-informationBnner__inner--cta .btn {
    width: 100%;
  }
}

@media screen and (min-width: 37.5em) {
  .m-informationBnner__inner--cta .btn {
    padding: var(--spacing-small) var(--spacing-large);
  }
}

.m-imageWithAnimation {
  background-color: var(--color-base-light);
  text-align: center;
}

.m-imageWithAnimation__inner {
  max-width: 836px;
  padding: var(--spacing-medium) var(--spacing-medium) 0;
  margin-left: auto;
  margin-right: auto;
}

.m-imageWithAnimation__inner--heading {
  margin-top: var(--spacing-x-large);
}

.m-imageWithAnimation__inner--image {
  position: relative;
}

.m-imageWithAnimation__inner--image img {
  margin: var(--spacing-x-large) auto -7px;
}

@media screen and (min-width: 37.5em) {
  .m-imageWithAnimation__inner--image img {
    margin-top: var(--spacing-xx-large);
  }
}

.m-imageWithAnimation__inner--image:before {
  content: url(../images/cloud-1-small.png);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: animateCloud1 ease-in infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

@media screen and (min-width: 37.5em) {
  .m-imageWithAnimation__inner--image:before {
    content: url(../images/cloud-1.png);
  }
}

.m-imageWithAnimation__inner--image:after {
  content: url(../images/cloud-2-small.png);
  position: absolute;
  top: 25px;
  left: 0;
  opacity: 0;
  animation: animateCloud2 ease-in infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 7s;
  -moz-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}

@media screen and (min-width: 37.5em) {
  .m-imageWithAnimation__inner--image:after {
    content: url(../images/cloud-2.png);
    top: 45px;
  }
}

@-webkit-keyframes animateCloud1 {
  0% {
    opacity: 0;
    left: 10%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 70%;
  }
}

@-moz-keyframes animateCloud1 {
  0% {
    opacity: 0;
    left: 10%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 70%;
  }
}

@keyframes animateCloud1 {
  0% {
    opacity: 0;
    left: 10%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 70%;
  }
}

@-webkit-keyframes animateCloud2 {
  0% {
    opacity: 0;
    left: 10%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 70%;
  }
}

@-moz-keyframes animateCloud2 {
  0% {
    opacity: 0;
    left: 10%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 70%;
  }
}

@keyframes animateCloud2 {
  0% {
    opacity: 0;
    left: 10%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 70%;
  }
}

.m-planSummaryCard {
  background-color: var(--color-base-light);
  padding: var(--spacing-large) var(--spacing-large) var(--spacing-small);
  border-radius: var(--border-radius-x-small) var(--border-radius-x-small) 0 0;
  position: relative;
  overflow: hidden;
}

.m-planSummaryCard__close {
  position: absolute;
  display: none;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  background-color: var(--color-text-alt);
  border: none;
  border-radius: var(--border-radius-circle);
  cursor: pointer;
  opacity: 0.7;
}

.m-planSummaryCard__close:hover {
  opacity: 1;
}

.m-planSummaryCard__close:before,
.m-planSummaryCard__close:after {
  position: absolute;
  content: ' ';
  top: 4px;
  right: 8px;
  height: 10px;
  width: 2px;
  background-color: var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

.m-planSummaryCard__close:before {
  transform: rotate(45deg);
}

.m-planSummaryCard__close:after {
  transform: rotate(-45deg);
}

.m-planSummaryCard__inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: space-between;
}

.m-planSummaryCard__inner div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
}

.m-planSummaryCard__inner div:nth-child(3) {
  flex-basis: 100%;
  margin: var(--spacing-large) 0 var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .m-planSummaryCard__inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .m-planSummaryCard__inner > div {
    margin: var(--spacing-medium) 0;
  }
  .m-planSummaryCard__inner > div:first-of-type {
    margin-top: 0;
  }
}

.m-planSummaryCard__inner--content * {
  margin-bottom: 0;
}

.m-planSummaryCard__inner--content__type {
  color: var(--color-text-alt);
}

.m-planSummaryCard__inner--content__plan {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

.m-planSummaryCard__inner--amount {
  text-align: right;
}

@media screen and (min-width: 37.5em) {
  .m-planSummaryCard__inner--amount {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.m-planSummaryCard__inner--amount__sum {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  margin-bottom: var(--spacing-xx-small);
}

.m-planSummaryCard__inner--amount__description {
  color: var(--color-text-alt);
  margin-bottom: 0;
  font-size: 0.75rem;
}

.m-planSummaryCard__inner--cta {
  text-align: center;
}

.m-planSummaryCard__inner--cta a {
  width: 100%;
}

.m-planSummaryCard__inner--cta__summary {
  display: none;
}

.m-planSummaryCard.--recommendedPlan {
  background-color: var(--color-base-lightest);
}

/*
.m-planSummaryCard .a-cornerRibbon {
  display: none;
}
*/

.m-planSummaryCard.--cornerRibbon .a-cornerRibbon {
  display: block;
}

@media screen and (max-width: 37.5em) {
  .m-planSummaryCard.--cornerRibbon .m-planSummaryCard__inner--content {
    margin-left: 1rem;
    margin-right: -1rem;
  }
}

.--recommendedPlan .m-planSummaryCard {
  background-color: var(--color-base-lightest);
}

.--recommendedPlan .m-planSummaryCard__inner {
  margin-bottom: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
  border-bottom: 1px solid var(--color-text-inverse-alt);
}

.--recommendedPlan .m-planSummaryCard__inner--cta {
  display: none;
}

@media screen and (min-width: 37.5em) {
  .--recommendedPlan .m-planSummaryCard__inner {
    flex-direction: row;
  }
  .--recommendedPlan .m-planSummaryCard__inner > div:first-of-type {
    margin-top: var(--spacing-medium);
  }
  .--recommendedPlan .m-planSummaryCard__inner--content {
    text-align: left;
  }
  .--recommendedPlan .m-planSummaryCard__inner--amount {
    text-align: right;
  }
}

.--inPlanDetailColumn {
  background-color: var(--color-base-lightest);
  box-shadow: var(--box-shadow-tile);
  position: sticky;
  top: 0;
  margin-bottom: var(--spacing-medium) !important;
  z-index: 10;
}

.--inPlanDetailColumn .m-planSummaryCard__close {
  display: block;
}

.--inPlanDetailColumn .m-planSummaryCard__inner {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  text-align: center;
}

.--inPlanDetailColumn .m-planSummaryCard__inner > div {
  text-align: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.--inPlanDetailColumn .m-planSummaryCard__inner--amount {
  margin: var(--spacing-small) 0 0;
}

.--inPlanDetailColumn .m-planSummaryCard__inner--cta a {
  width: initial;
}

.--inPlanDetailColumn .m-planSummaryCard__inner--cta__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-medium);
}

.--inPlanDetailColumn .m-planSummaryCard__inner--cta__summary a {
  margin-left: var(--spacing-small);
}

.--inPlanDetailSection {
  background-color: var(--color-base-lightest);
  box-shadow: var(--box-shadow-section);
  position: relative;
}

@media screen and (min-width: 37.5em) {
  .--inPlanDetailSection {
    padding-bottom: var(--spacing-medium);
  }
}

.--inPlanDetailSection .m-planSummaryCard__inner {
  flex-direction: row;
  text-align: initial;
}

.--inPlanDetailSection .m-planSummaryCard__inner--content {
  flex-basis: 70%;
}

@media screen and (min-width: 37.5em) {
  .--inPlanDetailSection .m-planSummaryCard__inner--content {
    flex-basis: 50%;
  }
}

.--inPlanDetailSection .m-planSummaryCard__inner--content__summary {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-medium);
}

.--inPlanDetailSection .m-planSummaryCard__inner--content__summary a {
  margin-left: var(--spacing-small);
}

.--inPlanDetailSection .m-planSummaryCard__inner--amount {
  flex-basis: 30%;
  margin: 0;
}

@media screen and (min-width: 37.5em) {
  .--inPlanDetailSection .m-planSummaryCard__inner--amount {
    flex-basis: 50%;
    text-align: right;
  }
}

@media screen and (min-width: 37.5em) {
  .--inPlanDetailSection .m-planSummaryCard__inner--cta {
    flex-basis: 25% !important;
    position: absolute;
    top: 70px;
    right: 23px;
  }
}

@media screen and (min-width: 64em) {
  .--inPlanDetailSection .m-planSummaryCard__inner--cta {
    top: 80px;
  }
}

@media screen and (min-width: 37.5em) {
  .--inPlanDetailSection .m-planSummaryCard__inner--cta a {
    width: initial;
  }
}

.--inCompareBanner {
  border-radius: var(--border-radius-small);
}

@media screen and (max-width: 37.5em) {
  .--inCompareBanner {
    padding: var(--spacing-medium) var(--spacing-small) var(--spacing-x-small);
  }
  .--inCompareBanner.--advantageTriangle {
    padding: var(--spacing-large) var(--spacing-medium) var(--spacing-x-small);
  }
}

.--inCompareBanner .m-planSummaryCard__close {
  display: block;
}

.--inCompareBanner .m-planSummaryCard__inner {
  flex-direction: column;
}

.--inCompareBanner .m-planSummaryCard__inner div {
  width: 100%;
}

@media screen and (min-width: 37.5em) {
  .--inCompareBanner .m-planSummaryCard__inner--content {
    text-align: initial;
  }
}

.--inCompareBanner .m-planSummaryCard__inner--amount {
  align-self: flex-end;
}

@media screen and (min-width: 37.5em) {
  .--inCompareBanner .m-planSummaryCard__inner--amount {
    text-align: right;
    margin: 0;
  }
}

.--inCompareBanner .m-planSummaryCard__inner--amount__sum {
  margin-bottom: 0;
}

.m-hamburgerMenu {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 75%;
  background-color: var(--color-primary-dark);
  left: -100%;
  transition: 1s;
  z-index: 1000;
  box-shadow: var(--box-shadow-section);
}

@media screen and (min-width: 37.5em) {
  .m-hamburgerMenu {
    width: 50%;
  }
}

@media screen and (min-width: 64em) {
  .m-hamburgerMenu {
    width: 30%;
  }
}

@media screen and (min-width: 76.2em) {
  .m-hamburgerMenu {
    width: 20%;
  }
}

.m-hamburgerMenu__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0 var(--spacing-medium);
}

.m-hamburgerMenu__inner--close {
  background-color: var(--color-primary-dark);
  padding: var(--spacing-medium) 0;
  margin-bottom: var(--spacing-large);
  border-bottom: 1px solid var(--color-text-inverse-alt);
}

.m-hamburgerMenu__inner--close button {
  position: relative;
  border: 0;
  color: var(--color-base-lightest);
  background-color: var(--color-primary-dark);
  padding: var(--spacing-small) var(--spacing-small) var(--spacing-small)
    var(--spacing-large);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.m-hamburgerMenu__inner--close button:before,
.m-hamburgerMenu__inner--close button:after {
  position: absolute;
  content: ' ';
  top: 8px;
  left: 8px;
  height: 16px;
  width: 2px;
  background-color: var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

@media screen and (min-width: 64em) {
  .m-hamburgerMenu__inner--close button:before,
  .m-hamburgerMenu__inner--close button:after {
    top: 10px;
  }
}

.m-hamburgerMenu__inner--close button:before {
  transform: rotate(45deg);
}

.m-hamburgerMenu__inner--close button:after {
  transform: rotate(-45deg);
}

.m-hamburgerMenu__inner--content {
  overflow-y: auto;
}

.m-hamburgerMenu__inner--content__block {
  margin-bottom: var(--spacing-x-large);
  color: var(--color-base-lightest);
}

.m-hamburgerMenu__inner--content__block h4 {
  font-weight: var(--font-weight);
  margin-bottom: 0;
}

.m-hamburgerMenu__inner--content__block ul li {
  position: relative;
  margin-left: var(--spacing-x-large);
  font-weight: var(--font-weight-bold);
}

.m-hamburgerMenu__inner--content__block ul li:not(:last-of-type) {
  margin-bottom: var(--spacing-medium);
}

.m-hamburgerMenu__inner--content__block ul li:before {
  position: absolute;
  top: 0;
  left: -33px;
  content: url('../images/menu-item-logo.png');
}

.m-hamburgerMenu__inner--content__block ul li a {
  color: var(--color-base-lightest);
}

.m-hamburgerMenu__inner--content__block ul li a:hover,
.m-hamburgerMenu__inner--content__block ul li a:active,
.m-hamburgerMenu__inner--content__block ul li a:focus,
.m-hamburgerMenu__inner--content__block ul li a:visited {
  color: var(--color-base-lightest);
}

.m-hamburgerMenu__inner--exit {
  margin-top: auto;
  background-color: var(--color-primary-dark);
  padding: var(--spacing-medium) 0;
  border-top: 1px solid #04506e !important;
}

.m-hamburgerMenu__inner--exit button {
  position: relative;
  border: 0;
  color: var(--color-base-lightest);
  background-color: var(--color-primary-dark);
  padding: var(--spacing-small) var(--spacing-x-large) var(--spacing-small)
    var(--spacing-small);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}

.m-hamburgerMenu__inner--exit button:after {
  position: absolute;
  content: url('../images/exit-white-icon.png');
  top: 4px;
  right: 4px;
}

.m-hamburgerMenu.--expanded {
  left: 0;
  transition: 0.3s ease-out;
}

.m-helpMenu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -100%;
  width: 85%;
  background-color: var(--color-base-lightest);
  transition: 1s;
  z-index: 1000;
  box-shadow: var(--box-shadow-section);
}

@media screen and (min-width: 37.5em) {
  .m-helpMenu {
    width: 50%;
  }
}

@media screen and (min-width: 64em) {
  .m-helpMenu {
    width: 30%;
  }
}

@media screen and (min-width: 76.2em) {
  .m-helpMenu {
    width: 20%;
  }
}

.m-helpMenu__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.m-helpMenu__inner--close {
  position: sticky;
  top: 0;
  background-color: var(--color-primary-dark);
  padding: var(--spacing-medium);
  text-align: right;
}

.m-helpMenu__inner--close button {
  position: relative;
  border: 0;
  color: var(--color-base-lightest);
  background-color: var(--color-primary-dark);
  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small)
    var(--spacing-small);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.m-helpMenu__inner--close button:before,
.m-helpMenu__inner--close button:after {
  position: absolute;
  content: ' ';
  top: 8px;
  right: 8px;
  height: 16px;
  width: 2px;
  background-color: var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

@media screen and (min-width: 64em) {
  .m-helpMenu__inner--close button:before,
  .m-helpMenu__inner--close button:after {
    top: 10px;
  }
}

.m-helpMenu__inner--close button:before {
  transform: rotate(45deg);
}

.m-helpMenu__inner--close button:after {
  transform: rotate(-45deg);
}

.m-helpMenu__inner--content {
  padding: var(--spacing-large) var(--spacing-medium) 0;
  overflow-y: auto;
}

.m-helpMenu__inner--content__block {
  margin-bottom: var(--spacing-x-large);
  display: flex;
  flex-direction: row;
}

.m-helpMenu__inner--content__block--icon {
  flex: 1;
}

.m-helpMenu__inner--content__block--details {
  margin-left: var(--spacing-medium);
  flex: 3;
}

@media screen and (min-width: 37.5em) {
  .m-helpMenu__inner--content__block--details {
    margin-left: var(--spacing-small);
  }
}

.m-helpMenu__inner--legal {
  margin-top: auto;
  background-color: var(--color-base-lightest);
  padding: 0;
}

.m-helpMenu__inner--legal .m-accordion {
  margin-bottom: 0;
  border-top: 1px solid var(--color-text-inverse-alt);
}

.m-helpMenu__inner--legal .m-accordion__inner--section__heading:after {
  transform: rotate(0);
  top: 16px;
}

.m-helpMenu__inner--legal .m-accordion__inner--section__heading.--active:after {
  transform: rotate(180deg);
  top: 8px;
}

.m-helpMenu__inner--legal .m-accordion__inner--section__panel ul {
  padding-bottom: var(--spacing-small);
}

.m-helpMenu__inner--legal .m-accordion__inner--section__panel ul li {
  margin: 0 0 var(--spacing-small) var(--spacing-large);
  position: relative;
}

.m-helpMenu__inner--legal .m-accordion__inner--section__panel ul li:before {
  content: '';
}

.m-helpMenu__inner--legal
  .m-accordion__inner--section__panel
  ul
  li.--withExternalLinkIcon:before {
  content: url('../images/external-link-icon.png');
  position: absolute;
  left: -24px;
}

@media screen and (min-width: 64em) {
  .m-helpMenu__inner--legal
    .m-accordion__inner--section__panel
    ul
    li.--withExternalLinkIcon:before {
    top: 2px;
  }
}

.m-helpMenu__inner--legal
  .m-accordion__inner--section__panel
  ul
  li.--withDownloadIcon:before {
  content: url('../images/download-icon.png');
  position: absolute;
  left: -24px;
  top: 2px;
}

@media screen and (min-width: 64em) {
  .m-helpMenu__inner--legal
    .m-accordion__inner--section__panel
    ul
    li.--withDownloadIcon:before {
    top: 2px;
  }
}

.m-helpMenu.--expanded {
  right: 0;
  transition: 0.3s;
}

.m-loaderTiles__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media screen and (min-width: 37.5em) {
  .m-loaderTiles__inner {
    flex-direction: row;
  }
}

.m-loaderTiles__inner--tile {
  position: relative;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-tile);
  padding: var(--spacing-small) var(--spacing-medium);
  box-sizing: border-box;
  margin-bottom: var(--spacing-large);
  background-color: var(--color-base-lightest);
  z-index: 100;
  opacity: 0;
  animation: animateTile ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

@media screen and (min-width: 37.5em) {
  .m-loaderTiles__inner--tile {
    flex-direction: column;
    width: 200px;
    padding: 8% 5%;
  }
}

.m-loaderTiles__inner--tile__icon {
  position: relative;
  margin-right: var(--spacing-large);
  max-width: 70px;
}

@media screen and (min-width: 37.5em) {
  .m-loaderTiles__inner--tile__icon {
    margin-bottom: var(--spacing-large);
    margin-right: 0;
    max-width: initial;
  }
}

.m-loaderTiles__inner--tile__icon:before {
  display: block;
  position: absolute;
  content: '';
  background-color: var(--color-accent-green-light);
  border-radius: var(--border-radius-circle);
  width: 0;
  height: 0;
  top: 15px;
  right: 10px;
  animation: animateGreenCircle ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.m-loaderTiles__inner--tile__icon:after {
  display: block;
  position: absolute;
  content: '';
  background-color: var(--color-accent-green-light);
  transform: rotate(45deg);
  border-bottom: 3px solid var(--color-base-lightest);
  border-right: 3px solid var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
  width: 0;
  height: 0;
  animation: animateCheckMark ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.m-loaderTiles__inner--tile.--tileOne {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.m-loaderTiles__inner--tile.--tileOne > div:before {
  -webkit-animation-delay: 1.75s;
  -moz-animation-delay: 1.75s;
  animation-delay: 1.75s;
}

.m-loaderTiles__inner--tile.--tileOne > div:after {
  -webkit-animation-delay: 1.75s;
  -moz-animation-delay: 1.75s;
  animation-delay: 1.85s;
}

.m-loaderTiles__inner--tile.--tileTwo {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.m-loaderTiles__inner--tile.--tileTwo > div:before {
  -webkit-animation-delay: 2.75s;
  -moz-animation-delay: 2.75s;
  animation-delay: 2.75s;
}

.m-loaderTiles__inner--tile.--tileTwo > div:after {
  -webkit-animation-delay: 2.75s;
  -moz-animation-delay: 2.75s;
  animation-delay: 2.85s;
}

.m-loaderTiles__inner--tile.--tileThree {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.m-loaderTiles__inner--tile.--tileThree > div:before {
  -webkit-animation-delay: 3.75s;
  -moz-animation-delay: 3.75s;
  animation-delay: 3.75s;
}

.m-loaderTiles__inner--tile.--tileThree > div:after {
  -webkit-animation-delay: 3.75s;
  -moz-animation-delay: 3.75s;
  animation-delay: 3.85s;
}

.m-loaderTiles__inner--tile__heading {
  margin-bottom: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

@-webkit-keyframes animateTile {
  0% {
    opacity: 0;
    bottom: -200px;
  }
  80% {
    opacity: 0.8;
    bottom: 20px;
  }
  95% {
    opacity: 0.8;
    bottom: -10px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

@-moz-keyframes animateTile {
  0% {
    opacity: 0;
    bottom: -200px;
  }
  80% {
    opacity: 0.8;
    bottom: 20px;
  }
  95% {
    opacity: 0.8;
    bottom: -10px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

@keyframes animateTile {
  0% {
    opacity: 0;
    bottom: -200px;
  }
  80% {
    opacity: 0.8;
    bottom: 20px;
  }
  95% {
    opacity: 0.8;
    bottom: -10px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

@-webkit-keyframes animateGreenCircle {
  from {
    width: 0;
    height: 0;
    top: 15px;
    right: 10px;
  }
  to {
    width: 30px;
    height: 30px;
    top: 0;
    right: -6px;
  }
}

@-moz-keyframes animateGreenCircle {
  from {
    width: 0;
    height: 0;
    top: 15px;
    right: 10px;
  }
  to {
    width: 30px;
    height: 30px;
    top: 0;
    right: -6px;
  }
}

@keyframes animateGreenCircle {
  from {
    width: 0;
    height: 0;
    top: 15px;
    right: 10px;
  }
  to {
    width: 30px;
    height: 30px;
    top: 0;
    right: -6px;
  }
}

@-webkit-keyframes animateCheckMark {
  from {
    width: 0;
    height: 0;
    top: 15px;
    right: 10px;
  }
  to {
    top: 5px;
    right: 4px;
    width: 6px;
    height: 14px;
  }
}

@-moz-keyframes animateCheckMark {
  from {
    width: 0;
    height: 0;
    top: 15px;
    right: 10px;
  }
  to {
    top: 5px;
    right: 4px;
    width: 6px;
    height: 14px;
  }
}

@keyframes animateCheckMark {
  from {
    width: 0;
    height: 0;
    top: 15px;
    right: 10px;
  }
  to {
    top: 5px;
    right: 4px;
    width: 6px;
    height: 14px;
  }
}

.m-loaderBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}

.m-loaderBar__progress {
  width: 100%;
  background-color: var(--color-base-light);
}

.m-loaderBar__progress--bar {
  width: 0;
  height: 10px;
  background-color: var(--color-primary);
}

.m-navigationButtons {
  text-align: center;
  max-width: 836px;
  padding: 0 var(--spacing-medium) 0;
  margin: var(--spacing-xx-large) auto 0;
}

@media screen and (min-width: 64em) {
  .m-navigationButtons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.m-navigationButtons__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-x-large) 0 var(--spacing-xx-large);
  border-top: 1px solid var(--color-text-inverse-alt);
}

.m-navigationButtons__inner--button {
  display: none;
  width: 120px;
}

@media screen and (min-width: 37.5em) {
  .m-navigationButtons__inner--button {
    width: 150px;
  }
}

.m-navigationButtons__inner--button.--visible {
  display: block;
}

.m-textList__inner--heading {
  text-align: center;
  margin: 0 auto var(--spacing-large);
  max-width: var(--max-width);
}

.m-textList__inner--list li {
  margin-left: var(--spacing-large);
  position: relative;
  color: var(--color-text-alt);
}

.m-textList__inner--list li:before {
  position: absolute;
  left: -20px;
  color: var(--color-text-alt);
}

.m-textList__inner--list li span {
  font-weight: var(--font-weight-bold);
}

.o-compareBanner {
  /*  display: none;*/
  padding: var(--spacing-medium);
  margin-bottom: var(--spacing-x-large);
  border-radius: var(--border-radius-small);
  background-color: var(--color-base-lightest);
  box-shadow: var(--box-shadow-section);
}

@media screen and (min-width: 37.5em) {
  .o-compareBanner {
    padding: var(--spacing-medium) var(--spacing-large);
  }
}

@media screen and (min-width: 64em) {
  .o-compareBanner {
    padding: var(--spacing-large) var(--spacing-x-large);
  }
}

.o-compareBanner__inner {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 37.5em) {
  .o-compareBanner__inner {
    flex-direction: row;
    align-items: center;
  }
}

.o-compareBanner__inner--cta {
  width: 25%;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 37.5em) {
  .o-compareBanner__inner--cta {
    order: 2;
    width: 100%;
  }
}

.o-compareBanner__inner--cta .btn {
  width: 100%;
}

@media screen and (min-width: 37.5em) {
  .o-compareBanner__inner--cta .btn {
    margin-right: var(--spacing-medium);
  }
}

.o-compareBanner__inner--cards {
  width: 75%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

@media screen and (max-width: 37.5em) {
  .o-compareBanner__inner--cards {
    width: initial;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-bottom: var(--spacing-medium);
  }
}

.o-compareBanner__inner--cards__card {
  /*display: none;*/
  margin: 0 var(--spacing-small);
}

@media screen and (max-width: 37.5em) {
  .o-compareBanner__inner--cards__card {
    min-width: 180px;
    scroll-snap-align: start;
  }
}

.o-compareBanner__inner--cards__card.--visible {
  display: block;
}

.o-compareBanner.--visible {
  display: block;
}

.o-educationSlider {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -100%;
  width: 90%;
  background-color: var(--color-base-lightest);
  transition: 1s;
  z-index: 1000;
  box-shadow: var(--box-shadow-section);
}

@media screen and (min-width: 37.5em) {
  .o-educationSlider {
    width: 50%;
  }
}

@media screen and (min-width: 64em) {
  .o-educationSlider {
    width: 30%;
  }
}

.o-educationSlider__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.o-educationSlider__inner--close {
  position: sticky;
  top: 0;
  background-color: var(--color-primary-dark);
  padding: var(--spacing-medium);
  text-align: right;
}

.o-educationSlider__inner--close button {
  position: relative;
  border: 0;
  color: var(--color-base-lightest);
  background-color: var(--color-primary-dark);
  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small)
    var(--spacing-small);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.o-educationSlider__inner--close button:before,
.o-educationSlider__inner--close button:after {
  position: absolute;
  content: ' ';
  top: 8px;
  right: 8px;
  height: 16px;
  width: 2px;
  background-color: var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

@media screen and (min-width: 64em) {
  .o-educationSlider__inner--close button:before,
  .o-educationSlider__inner--close button:after {
    top: 10px;
  }
}

.o-educationSlider__inner--close button:before {
  transform: rotate(45deg);
}

.o-educationSlider__inner--close button:after {
  transform: rotate(-45deg);
}

.o-educationSlider__inner--content {
  padding: var(--spacing-large) var(--spacing-medium) 0;
  overflow-y: auto;
}

.o-educationSlider__inner--legal {
  margin-top: auto;
  background-color: var(--color-base-lightest);
  padding: 0 var(--spacing-medium) var(--spacing-medium);
}

.o-educationSlider__inner--legal p {
  margin-bottom: 0;
  padding-top: var(--spacing-medium);
  border-top: 1px solid var(--color-text-inverse-alt);
  color: var(--color-text-alt);
}

.o-educationSlider.--expanded {
  right: 0;
  transition: 0.3s;
}

.o-planCard {
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-section);
  margin-bottom: var(--spacing-x-large);
  background-color: var(--color-base-lightest);
  overflow: hidden;
  position: relative;
}

.o-planCard__inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner {
    flex-direction: row;
    align-items: stretch;
  }
  .o-planCard__inner > div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25%;
  }
  .o-planCard__inner > div:nth-child(2) {
    flex-basis: 73%;
  }
}

.o-planCard__inner--summary {
  background-color: var(--color-base-lighter);
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner--summary {
    display: flex;
    align-content: center;
    justify-content: center;
  }
}

.o-planCard__inner--content__wrapper {
  padding: var(--spacing-large);
}

.o-planCard__inner--content__type {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner--content__type {
    margin-bottom: var(--spacing-medium);
  }
}

.o-planCard__inner--content__type--copy {
  width: 60%;
  padding-right: var(--spacing-medium);
  color: var(--color-text-alt);
}

.o-planCard__inner--content__type--copy h6 {
  margin-bottom: 0;
}

.o-planCard__inner--content__type--image {
  width: 40%;
  text-align: right;
}

.o-planCard__inner--content__details {
  display: flex;
  flex-direction: column;
  color: var(--color-text-alt);
  margin-bottom: var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner--content__details {
    flex-direction: row;
  }
  .o-planCard__inner--content__details > div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 49%;
  }
  .o-planCard__inner--content__details > div:nth-child(1) {
    padding-right: var(--spacing-medium);
  }
}

.o-planCard__inner--content__details--amount ul {
  margin-bottom: var(--spacing-large);
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner--content__details--amount ul {
    margin-bottom: var(--spacing-small);
    margin-top: 0;
  }
}

.o-planCard__inner--content__details--amount ul li {
  margin-left: 0;
}

.o-planCard__inner--content__details--amount ul li:before {
  content: '';
}

.o-planCard__inner--content__details--amount ul li p:first-of-type {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0;
  color: var(--color-text-default);
}

.o-planCard__inner--content__details--highlights__heading {
  color: var(--color-text-default);
  font-weight: var(--font-weight-bold);
}

.o-planCard__inner--content__details--highlights ul li {
  position: relative;
  margin-left: 0;
}

/* Hide the :after for only the .no-after li */
.o-planCard__inner--content__details--highlights ul li.no-after:after {
  display: none !important;
  content: none !important;
}

.o-planCard__inner--content__details--highlights ul.green li:before {
  background-color: var(--color-dark-green);
}

.o-planCard__inner--content__details--highlights ul.green li:after {
  background-color: var(--color-dark-green);
}

.o-planCard__inner--content__details--highlights ul li:before {
  display: block;
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  top: 0px;
  left: -4px;
  background-color: var(--color-accent-green-light);
  border-radius: var(--border-radius-circle);
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner--content__details--highlights ul li:before {
    top: 2px;
  }
}

@media screen and (min-width: 64em) {
  .o-planCard__inner--content__details--highlights ul li:before {
    top: 4px;
  }
}

.o-planCard__inner--content__details--highlights ul li:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  content: '';
  width: 4px;
  height: 7px;
  background-color: var(--color-accent-green-light);
  transform: rotate(45deg);
  border-bottom: 2px solid var(--color-base-lightest);
  border-right: 2px solid var(--color-base-lightest);
  border-radius: var(--border-radius-x-small);
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner--content__details--highlights ul li:after {
    top: 3px;
  }
}

@media screen and (min-width: 64em) {
  .o-planCard__inner--content__details--highlights ul li:after {
    top: 5px;
  }
}

.o-planCard__inner--content__details--highlights ul li p {
  margin-left: var(--spacing-large);
}

.o-planCard__inner--content__ctas {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.o-planCard__inner--content__ctas > div:not(:nth-of-type(4)) {
  margin-bottom: var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .o-planCard__inner--content__ctas {
    flex-direction: row;
  }
  .o-planCard__inner--content__ctas > div {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .o-planCard__inner--content__ctas > div:not(:nth-of-type(4)) {
    margin-bottom: 0;
  }
}

.o-planCard__inner--content__ctas--getStarted {
  display: none;
}

.o-planCard__inner--content__ctas--allPlans {
  display: none;
}

.o-planCard__inner--content__ctas--planDetails,
.o-planCard__inner--content__ctas--summaryBenefits,
.o-planCard__inner--content__ctas--comparePlan {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.o-planCard__inner--content__ctas--planDetails a,
.o-planCard__inner--content__ctas--summaryBenefits a {
  margin-left: var(--spacing-small);
}

.o-planCard__inner--content__ctas--comparePlan {
  justify-content: flex-end;
}

.o-planCard.--recommendedPlan {
  border: 0;
}

.o-planCard.--recommendedPlan .o-planCard__inner {
  flex-direction: column;
  flex-wrap: nowrap;
}

.o-planCard.--recommendedPlan .o-planCard__inner--summary {
  display: block;
  background-color: var(--color-base-lightest);
}

.o-planCard.--recommendedPlan .o-planCard__inner--content__wrapper {
  padding-top: 0;
}

@media screen and (min-width: 37.5em) {
  .o-planCard.--recommendedPlan .o-planCard__inner--content__ctas {
    flex-direction: row;
  }
  .o-planCard.--recommendedPlan .o-planCard__inner--content__ctas > div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }
}

@media screen and (min-width: 37.5em) and (min-width: 37.5em) {
  .o-planCard.--recommendedPlan
    .o-planCard__inner--content__ctas
    > div:not(:last-of-type) {
    margin-bottom: var(--spacing-large);
    margin-right: var(--spacing-large);
  }
}

@media screen and (min-width: 37.5em) {
  .o-planCard.--recommendedPlan
    .o-planCard__inner--content__ctas
    > div:nth-of-type(3),
  .o-planCard.--recommendedPlan
    .o-planCard__inner--content__ctas
    > div:nth-of-type(5) {
    flex-basis: 100%;
    justify-content: center;
  }
}

.o-planCard.--recommendedPlan .o-planCard__inner--content__ctas--getStarted {
  display: block;
  text-align: center;
}

.o-planCard.--recommendedPlan .o-planCard__inner--content__ctas--getStarted a {
  width: 100%;
}

@media screen and (min-width: 37.5em) {
  .o-planCard.--recommendedPlan
    .o-planCard__inner--content__ctas--getStarted
    a {
    width: 50%;
  }
}

@media screen and (min-width: 64em) {
  .o-planCard.--recommendedPlan
    .o-planCard__inner--content__ctas--getStarted
    a {
    width: 30%;
  }
}

.o-planCard.--recommendedPlan .o-planCard__inner--content__ctas--allPlans {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 0;
  justify-content: center;
  flex-basis: 100% !important;
}

.o-planCard.--recommendedPlan .o-planCard__inner--content__ctas--allPlans img {
  width: 14px;
  margin-left: var(--spacing-small);
}

.o-planCard.--recommendedPlan .o-planCard__inner--content__ctas--comparePlan {
  display: none;
}

.--recommendedPlan {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.o-planDetailColumn {
  overflow-x: auto;
}

@media screen and (min-width: 37.5em) {
  .o-planDetailColumn {
    overflow-x: initial;
  }
}

.o-planDetailColumn__inner {
  display: flex;
  width: 700px;
}

@media screen and (min-width: 37.5em) {
  .o-planDetailColumn__inner {
    width: 100%;
  }
}

.o-planDetailColumn__inner > div {
  position: relative;
  flex: 0 0 33.3%;
}

.o-planDetailColumn__inner > div:not(:last-of-type) {
  border-right: 1px solid var(--color-text-inverse-alt);
}

.o-planDetailColumn__inner--column .m-planSummaryCard {
  display: flex;
  justify-content: center;
  height: 300px;
}

.o-planDetailColumn__inner--column .m-planSummaryCard__inner {
  width: 100%;
}

.o-planDetailColumn__inner--column .m-planSummaryCard__inner--cta > a {
  width: 100%;
}

.o-planDetailColumn__inner--column.--hidden {
  display: none;
}

.o-planDetailColumn .m-detailList ul li {
  margin-left: 0;
}

.o-header {
  padding: var(--spacing-small) var(--spacing-small);
  border: 1px solid var(--color-base-lighter);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-menu);
  background-color: var(--color-base-lightest);
}

@media screen and (min-width: 37.5em) {
  .o-header {
    padding: var(--spacing-medium);
  }
}

.o-header__inner {
  display: flex;
  flex-direction: row;
  align-content: center;
}

.o-header__inner > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.o-header__inner--hamburger__menu {
  padding-right: 0;
  border-right: 1px solid var(--color-text-inverse-alt);
}

@media screen and (min-width: 37.5em) {
  .o-header__inner--hamburger__menu {
    padding-right: var(--spacing-large);
  }
}

.o-header__inner--hamburger__menu button {
  position: relative;
  border: 0;
  color: var(--color-text-default);
  background-color: var(--color-base-lightest);
  padding: var(--spacing-small) var(--spacing-small) var(--spacing-small)
    var(--spacing-x-large);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.o-header__inner--hamburger__menu button:before {
  position: absolute;
  top: 8px;
  left: 8px;
  content: url('../images/hamburger-menu-icon.svg');
}

.o-header__inner--logo {
  justify-content: center;
  background-image: url('../images/logo-101-43.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (min-width: 30em) {
  .o-header__inner--logo {
    background-image: url('../images/logo-237-23.svg');
    background-size: contain;
  }
}

@media screen and (min-width: 48em) {
  .o-header__inner--logo {
    max-width: 237px;
  }
}

.o-header__inner--help {
  justify-content: flex-end;
}

.o-header__inner--help__menu button {
  position: relative;
  color: var(--color-text-default);
  background-color: var(--color-base-lightest);
  padding: var(--spacing-small) var(--spacing-small) var(--spacing-small)
    var(--spacing-x-large);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--color-text-inverse-alt);
  border-radius: var(--border-radius-medium);
}

@media screen and (max-width: 30em) {
  .o-header__inner--help__menu button {
    padding: var(--spacing-x-small) var(--spacing-x-small)
      var(--spacing-x-small) var(--spacing-small);
  }
}

.o-header__inner--help__menu button:before {
  position: absolute;
  top: 6px;
  left: 8px;
  content: url('../images/need-help-icon.svg');
}

@media screen and (max-width: 30em) {
  .o-header__inner--help__menu button:before {
    content: '';
  }
}

@media screen and (min-width: 64em) {
  .o-header__inner--help__menu button:before {
    top: 8px;
  }
}

.p-allPlans {
  background-color: var(--color-base-lighter);
}

.p-allPlans .o-header {
  margin-bottom: var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .p-allPlans .o-planCard .m-planSummaryCard {
    flex-basis: 100%;
  }
  .p-allPlans .o-planCard .m-planSummaryCard__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
  }
  .p-allPlans .o-planCard .m-planSummaryCard__inner > div {
    text-align: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
  }
}

.p-comparePlans {
  background-color: var(--color-base-lighter);
}

.p-comparePlans .o-header {
  margin-bottom: var(--spacing-medium);
}

.p-comparePlans .o-header__inner--hamburger__menu button:before {
  content: url('../images/back-arrow-icon.svg');
}

@media screen and (min-width: 76.2em) {
  .p-confirmResidence .m-pageHeading {
    margin-bottom: var(--spacing-x-large);
  }
}

.p-confirmResidence .a-selectionTile__inner {
  padding-top: 0;
}

.p-education header {
  margin-bottom: var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .p-education header {
    margin-bottom: var(--spacing-x-large);
  }
}
.p-welcomeScreen .o-header__inner--hamburger__menu button:before,
.p-education .o-header__inner--hamburger__menu button:before {
  content: url('../images/back-arrow-icon.svg');
}

.p-education .m-planTabs__inner {
  background-color: var(--color-base-lightest);
}

.p-education .m-planTabs__inner--input:checked + .m-planTabs__inner--label {
  background-color: var(--color-base-lightest);
}

.p-education .m-planTabs__inner--label:hover {
  background-color: var(--color-base-lighter);
}

.p-education .m-planTabs__inner--label:active {
  background-color: var(--color-base-lightest);
}

.p-education .m-planTabs__inner--label p {
  color: var(--color-text-default);
}

.p-education .m-planTabs__inner--content {
  background-color: var(--color-base-lightest);
  padding: var(--spacing-xx-large) 0 0;
}

@media screen and (min-width: 48em) {
  .p-education .m-toggleButton__inner--switcher__content {
    width: 768px;
    left: -30%;
  }
}

@media screen and (min-width: 64em) {
  .p-education .m-toggleButton__inner--switcher__content {
    width: 856px;
    left: -40%;
  }
}

.p-loaderScreen .m-pageHeading {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.p-loaderScreen .m-pageHeading__image,
.p-loaderScreen .m-pageHeading__header,
.p-loaderScreen .m-pageHeading__body {
  opacity: 0;
  position: relative;
  display: flex;
  animation: animateHeading ease 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.p-loaderScreen .m-pageHeading__image {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.p-loaderScreen .m-pageHeading__header {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.p-loaderScreen .m-pageHeading__body {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.p-loaderScreen__bottomImage {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

@-webkit-keyframes animateHeading {
  from {
    opacity: 0;
    bottom: -200px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}

@-moz-keyframes animateHeading {
  from {
    opacity: 0;
    bottom: -200px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}

@keyframes animateHeading {
  from {
    opacity: 0;
    bottom: -200px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}

.p-otherOptions {
  background-color: var(--color-base-lighter);
}

.p-otherOptions .o-header {
  margin-bottom: var(--spacing-medium);
}

.p-planDetails {
  background-color: var(--color-base-lighter);
}

.p-planDetails .m-planSummaryCard,
.p-planDetails .m-textList,
.p-planDetails .m-informationTable {
  margin-bottom: var(--spacing-large);
}

@media screen and (min-width: 37.5em) {
  .p-planDetails .m-planSummaryCard,
  .p-planDetails .m-textList,
  .p-planDetails .m-informationTable {
    margin-bottom: var(--spacing-xx-large);
  }
}

.p-planDetails header {
  margin-bottom: var(--spacing-medium);
}

@media screen and (min-width: 37.5em) {
  .p-planDetails header {
    margin-bottom: var(--spacing-x-large);
  }
}

.p-planDetails .o-header__inner--hamburger__menu button:before {
  content: url('../images/back-arrow-icon.svg');
}

.p-signIn .m-pageHeading__header {
  margin-bottom: var(--spacing-medium);
}

.p-signIn__otherOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.p-signIn__otherOptions img {
  width: 14px;
  margin-left: var(--spacing-small);
}

.p-welcomeScreen__logo {
  text-align: center;
}

@media screen and (min-width: 48em) {
  .p-welcomeScreen__logo {
    margin: var(--spacing-large) auto;
  }
}

.p-welcomeScreen__copy {
  max-width: var(--max-width);
  margin: var(--spacing-medium) auto var(--spacing-large);
  text-align: center;
  color: var(--color-text-alt);
}

.p-welcomeScreen__ctas {
  max-width: var(--max-width);
  text-align: center;
  margin: 0 auto;
  padding: var(--spacing-medium);
  position: relative;
  z-index: 100;
}

@media screen and (min-width: 48em) {
  .p-welcomeScreen__ctas {
    padding: var(--spacing-xx-large);
  }
}

@media screen and (min-width: 48em) {
  .p-welcomeScreen__ctas--cta {
    margin: 0 auto;
    width: 75%;
  }
}

.p-welcomeScreen__ctas--cta:first-of-type {
  margin-bottom: var(--spacing-x-large);
}

/*# sourceMappingURL=styles/maps/styles.css.map */