/*!*********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./Assets/Styles/index.scss ***!
  \*********************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   #SumoDigital.Website.Theme THEME
   ========================================================================== */
/* ==========================================================================
   #VARIABLES
   ========================================================================== */
/**
 * Place any values in variables file to avoid magic values.
 * https://stackoverflow.com/questions/47882/what-is-a-magic-number-and-why-is-it-bad
 */
/* ==========================================================================
   #COLOURS
   ========================================================================== */
:root {
  --colorAlertBackground: #dadada;
  --colorAlertErrorBackground: #e49393;
  --colorAlertErrorText: #310606;
  --colorAlertSuccessBackground: #93e493;
  --colorAlertSuccessText: #093109;
  --colorBlack: #0b0b0b;
  --colorButtonLabel: var(--colorWhite);
  --colorButtonLabelInverted: var(--colorSecondary);
  --colorCarouselIndicator: #747474;
  --colorCarouselIndicatorActive: #ffffff;
  --colorCarouselIndicatorFocus: #c4c4c4;
  --colorError: #e20000;
  --colorGrey: #747474;
  --colorGreyDark: #292929;
  --colorGreyLight: #e1e1e1;
  --colorHr: #c4c4c4;
  --colorPrimary: #be1e2d;
  --colorPrimaryActive: darken(#be1e2d, 10%);
  --colorSecondary: #070f26;
  --colorSiteBackground: #ffffff;
  --colorTextDefault: #0b0b0b;
  --colorTextLight: #747474;
  --colorTextLighter: #c4c4c4;
  --colorTextInverted: #ffffff;
  --colorWhite: #ffffff;
}

/* ==========================================================================
   #CONTENT
   ========================================================================== */
/**
 * Content spacing
 */
/**
 * Content Width
 */
/* ==========================================================================
   #FORM
   ========================================================================== */
:root {
  --formBorderRadius: 0.8rem;
}

/* ==========================================================================
   #SPACING
   ========================================================================== */
/**
 * Control dimensions & spacing, favouring `rem` unit.
 */
/**
 * 1. This is a default which is only used if the scrollbarWidth JavaScript fails to run. 
 */
:root {
  --scrollbarWidth: 1.5rem;
  /* 1 */
}

/* ==========================================================================
   #TABLE
   ========================================================================== */
/* ==========================================================================
   #TYPOGRAPHY
   ========================================================================== */
:root {
  --fontFamilyDefault: "D-DIN Expanded", sans-serif;
  --fontFamilyHeading: "D-DIN Condensed", sans-serif;
  --fontSizeBase: 1.8rem;
  --fontSizeH1: calc(var(--fontSizeBase) * 4);
  --fontSizeH1Mobile: calc(var(--fontSizeBase) * 2.25);
  --fontSizeH2: calc(var(--fontSizeBase) * 3);
  --fontSizeH2Mobile: calc(var(--fontSizeBase) * 2);
  --fontSizeH3: calc(var(--fontSizeBase) * 1.62);
  --fontSizeH3Mobile: calc(var(--fontSizeBase) * 1.5);
  --fontSizeH4: calc(var(--fontSizeBase) * 1.5);
  --fontSizeH4Mobile: calc(var(--fontSizeBase) * 1.125);
  --fontSizeLarge: calc(var(--fontSizeBase) * 1.125);
  --fontSizeSmall: calc(var(--fontSizeBase) * 0.888);
  --fontSizeExtraSmall: 1.4rem;
  --fontSizeBlockquote: calc(var(--fontSizeBase) * 1.3);
  --fontSizeBlockquoteMobile: calc(var(--fontSizeBase) * 1);
  --fontWeightBold: 700;
  --fontWeightDefault: 400;
  --letterSpacingDefault: initial;
  --letterSpacingHeading: var(--letterSpacingDefault);
  --letterSpacingParagraph: var(--letterSpacingDefault);
  --letterSpacingBlockquote: var(--letterSpacingDefault);
  --letterSpacingButton: var(--letterSpacingDefault);
  --letterSpacingNavigation: var(--letterSpacingDefault);
  --lineHeightDefault: 2.2rem;
  --lineHeightHeading: 1;
  --lineHeightParagraph: 1.4;
  --lineHeightBlockquote: 1.5;
}

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/* ==========================================================================
   #Z-INDEX
   ========================================================================== */
/* ==========================================================================
   #BREAKPOINTS
   ========================================================================== */
/**
 * Media query breakpoints used by sass-mq.
 */
/* ==========================================================================
   #TOOLS
   ========================================================================== */
/**
 * Collection of functions/mixins used throughout the Sass project to promote
 * good coding practices.
 */
/* ==========================================================================
   #FOCUS
   ========================================================================== */
/**
 * Mixin for adding :focus styling to elements.
 */
/*  ==========================================================================
    #GRID
    ========================================================================== */
/**
 * Mixins & functions for working with grid.
 */
/* ==========================================================================
   #MEDIAQUERIES
   ========================================================================== */
/**
 * Mixins for targeting Edge and Internet Explorer.
 * For more info and how to target other browsers:
 * https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/
 */
/* ==========================================================================
   #LISTS
   ========================================================================== */
/**
 * Mixins & functions for working with lists.
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * Mixins & functions for working with text styles.
 */
/**
* CSS reset provided by normalize.css 
* https://necolas.github.io/normalize.css/
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

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

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

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

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

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

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

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

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

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

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

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

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

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

@font-face {
  font-family: "lg";
  src: url("../fonts/lg.ttf?22t19m") format("truetype"), url("../fonts/lg.woff?22t19m") format("woff"), url("../fonts/lg.svg?22t19m#lg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.lg-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "lg" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lg-actions .lg-next, .lg-actions .lg-prev {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  color: #999;
  cursor: pointer;
  display: block;
  font-size: 22px;
  margin-top: -10px;
  padding: 8px 10px 9px;
  position: absolute;
  top: 50%;
  z-index: 1080;
  outline: none;
  border: none;
  background-color: transparent;
}
.lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
  color: #FFF;
}
.lg-actions .lg-next {
  right: 20px;
}
.lg-actions .lg-next:before {
  content: "\e095";
}
.lg-actions .lg-prev {
  left: 20px;
}
.lg-actions .lg-prev:after {
  content: "\e094";
}

@-webkit-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
.lg-outer.lg-right-end .lg-object {
  -webkit-animation: lg-right-end 0.3s;
  animation: lg-right-end 0.3s;
  position: relative;
}
.lg-outer.lg-left-end .lg-object {
  -webkit-animation: lg-left-end 0.3s;
  animation: lg-left-end 0.3s;
  position: relative;
}

.lg-toolbar {
  z-index: 1082;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}
.lg-toolbar .lg-icon {
  color: #999;
  cursor: pointer;
  float: right;
  font-size: 24px;
  height: 47px;
  line-height: 27px;
  padding: 10px 0;
  text-align: center;
  width: 50px;
  text-decoration: none !important;
  outline: medium none;
  background: none;
  border: none;
  box-shadow: none;
  transition: color 0.2s linear;
}
.lg-toolbar .lg-icon:hover {
  color: #FFF;
}
.lg-toolbar .lg-close:after {
  content: "\e070";
}
.lg-toolbar .lg-download:after {
  content: "\e0f2";
}

.lg-sub-html {
  background-color: rgba(0, 0, 0, 0.45);
  bottom: 0;
  color: #EEE;
  font-size: 16px;
  left: 0;
  padding: 10px 40px;
  position: fixed;
  right: 0;
  text-align: center;
  z-index: 1080;
}
.lg-sub-html h4 {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
}
.lg-sub-html p {
  font-size: 12px;
  margin: 5px 0 0;
}

#lg-counter {
  color: #999;
  display: inline-block;
  font-size: 16px;
  padding-left: 20px;
  padding-top: 12px;
  vertical-align: middle;
}

.lg-toolbar, .lg-prev, .lg-next {
  opacity: 1;
  transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
}

.lg-hide-items .lg-prev {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
}
.lg-hide-items .lg-next {
  opacity: 0;
  transform: translate3d(10px, 0, 0);
}
.lg-hide-items .lg-toolbar {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object {
  transform: scale3d(0.5, 0.5, 0.5);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  transform-origin: 50% 50%;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.lg-outer .lg-thumb-outer {
  background-color: #0D0A0A;
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 1080;
  max-height: 350px;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}
.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
  transition-duration: 0s !important;
}
.lg-outer.lg-thumb-open .lg-thumb-outer {
  transform: translate3d(0, 0%, 0);
}
.lg-outer .lg-thumb {
  padding: 10px 0;
  height: 100%;
  margin-bottom: -5px;
}
.lg-outer .lg-thumb-item {
  border-radius: 5px;
  cursor: pointer;
  float: left;
  overflow: hidden;
  height: 100%;
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-bottom: 5px;
}
@media (min-width: 1025px) {
  .lg-outer .lg-thumb-item {
    transition: border-color 0.25s ease;
  }
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: rgb(169, 7, 7);
}
.lg-outer .lg-thumb-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lg-outer.lg-has-thumb .lg-item {
  padding-bottom: 120px;
}
.lg-outer.lg-can-toggle .lg-item {
  padding-bottom: 0;
}
.lg-outer.lg-pull-caption-up .lg-sub-html {
  transition: bottom 0.25s ease;
}
.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
  bottom: 100px;
}
.lg-outer .lg-toggle-thumb {
  background-color: #0D0A0A;
  border-radius: 2px 2px 0 0;
  color: #999;
  cursor: pointer;
  font-size: 24px;
  height: 39px;
  line-height: 27px;
  padding: 5px 0;
  position: absolute;
  right: 20px;
  text-align: center;
  top: -39px;
  width: 50px;
  outline: medium none;
  border: none;
}
.lg-outer .lg-toggle-thumb:after {
  content: "\e1ff";
}
.lg-outer .lg-toggle-thumb:hover {
  color: #FFF;
}

.lg-outer .lg-video-cont {
  display: inline-block;
  vertical-align: middle;
  max-width: 1140px;
  max-height: 100%;
  width: 100%;
  padding: 0 5px;
}
.lg-outer .lg-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}
.lg-outer .lg-video .lg-object {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.lg-outer .lg-video .lg-video-play {
  width: 84px;
  height: 59px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -42px;
  margin-top: -30px;
  z-index: 1080;
  cursor: pointer;
}
.lg-outer .lg-has-vimeo .lg-video-play {
  background: url("../img/vimeo-play.png") no-repeat scroll 0 0 transparent;
}
.lg-outer .lg-has-vimeo:hover .lg-video-play {
  background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent;
}
.lg-outer .lg-has-html5 .lg-video-play {
  background: transparent url("../img/video-play.png") no-repeat scroll 0 0;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  width: 64px;
  opacity: 0.8;
}
.lg-outer .lg-has-html5:hover .lg-video-play {
  opacity: 1;
}
.lg-outer .lg-has-youtube .lg-video-play {
  background: url("../img/youtube-play.png") no-repeat scroll 0 0 transparent;
}
.lg-outer .lg-has-youtube:hover .lg-video-play {
  background: url("../img/youtube-play.png") no-repeat scroll 0 -60px transparent;
}
.lg-outer .lg-video-object {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}
.lg-outer .lg-has-video .lg-video-object {
  visibility: hidden;
}
.lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play {
  display: none;
}
.lg-outer .lg-has-video.lg-video-playing .lg-video-object {
  visibility: visible;
}

.lg-progress-bar {
  background-color: #333;
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1083;
  opacity: 0;
  transition: opacity 0.08s ease 0s;
}
.lg-progress-bar .lg-progress {
  background-color: rgb(169, 7, 7);
  height: 5px;
  width: 0;
}
.lg-progress-bar.lg-start .lg-progress {
  width: 100%;
}
.lg-show-autoplay .lg-progress-bar {
  opacity: 1;
}

.lg-autoplay-button:after {
  content: "\e01d";
}
.lg-show-autoplay .lg-autoplay-button:after {
  content: "\e01a";
}

.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
  transition-duration: 0s;
}
.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
  transform: scale3d(1, 1, 1);
  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#lg-zoom-in:after {
  content: "\e311";
}

#lg-actual-size {
  font-size: 20px;
}
#lg-actual-size:after {
  content: "\e033";
}

#lg-zoom-out {
  opacity: 0.5;
  pointer-events: none;
}
#lg-zoom-out:after {
  content: "\e312";
}
.lg-zoomed #lg-zoom-out {
  opacity: 1;
  pointer-events: auto;
}

.lg-outer .lg-pager-outer {
  bottom: 60px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 1080;
  height: 10px;
}
.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
  overflow: visible;
}
.lg-outer .lg-pager-cont {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  margin: 0 5px;
}
.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
  box-shadow: 0 0 0 2px white inset;
}
.lg-outer .lg-pager-thumb-cont {
  background-color: #fff;
  color: #FFF;
  bottom: 100%;
  height: 83px;
  left: 0;
  margin-bottom: 20px;
  margin-left: -60px;
  opacity: 0;
  padding: 5px;
  position: absolute;
  width: 120px;
  border-radius: 3px;
  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
  transform: translate3d(0, 5px, 0);
}
.lg-outer .lg-pager-thumb-cont img {
  width: 100%;
  height: 100%;
}
.lg-outer .lg-pager {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
  display: block;
  height: 12px;
  transition: box-shadow 0.3s ease 0s;
  width: 12px;
}
.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
  box-shadow: 0 0 0 8px white inset;
}
.lg-outer .lg-caret {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px dashed;
  bottom: -10px;
  display: inline-block;
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  vertical-align: middle;
  width: 0;
}

.lg-fullscreen:after {
  content: "\e20c";
}
.lg-fullscreen-on .lg-fullscreen:after {
  content: "\e20d";
}

.lg-outer #lg-dropdown-overlay {
  background-color: rgba(0, 0, 0, 0.25);
  bottom: 0;
  cursor: default;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1081;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
}
.lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay {
  transition-delay: 0s;
  transform: translate3d(0, 0px, 0);
  opacity: 1;
  visibility: visible;
}
.lg-outer.lg-dropdown-active #lg-share {
  color: #FFF;
}
.lg-outer .lg-dropdown {
  background-color: #fff;
  border-radius: 2px;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  right: 0;
  text-align: left;
  top: 50px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 5px, 0);
  transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
}
.lg-outer .lg-dropdown:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  border: 8px solid transparent;
  border-bottom-color: #FFF;
  right: 16px;
  top: -16px;
}
.lg-outer .lg-dropdown > li:last-child {
  margin-bottom: 0px;
}
.lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon {
  color: #333;
}
.lg-outer .lg-dropdown a {
  color: #333;
  display: block;
  white-space: pre;
  padding: 4px 12px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.lg-outer .lg-dropdown a:hover {
  background-color: rgba(0, 0, 0, 0.07);
}
.lg-outer .lg-dropdown .lg-dropdown-text {
  display: inline-block;
  line-height: 1;
  margin-top: -3px;
  vertical-align: middle;
}
.lg-outer .lg-dropdown .lg-icon {
  color: #333;
  display: inline-block;
  float: none;
  font-size: 20px;
  height: auto;
  line-height: 1;
  margin-right: 8px;
  padding: 0;
  vertical-align: middle;
  width: auto;
}
.lg-outer #lg-share {
  position: relative;
}
.lg-outer #lg-share:after {
  content: "\e80d";
}
.lg-outer #lg-share-facebook .lg-icon {
  color: #3b5998;
}
.lg-outer #lg-share-facebook .lg-icon:after {
  content: "\e904";
}
.lg-outer #lg-share-twitter .lg-icon {
  color: #00aced;
}
.lg-outer #lg-share-twitter .lg-icon:after {
  content: "\e907";
}
.lg-outer #lg-share-googleplus .lg-icon {
  color: #dd4b39;
}
.lg-outer #lg-share-googleplus .lg-icon:after {
  content: "\e905";
}
.lg-outer #lg-share-pinterest .lg-icon {
  color: #cb2027;
}
.lg-outer #lg-share-pinterest .lg-icon:after {
  content: "\e906";
}

.lg-outer .lg-img-rotate {
  position: absolute;
  padding: 0 5px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0) 0s;
}

.lg-rotate-left:after {
  content: "\e900";
}

.lg-rotate-right:after {
  content: "\e901";
}

.lg-icon.lg-flip-hor, .lg-icon.lg-flip-ver {
  font-size: 26px;
}

.lg-flip-hor:after {
  content: "\e902";
}

.lg-flip-ver:after {
  content: "\e903";
}

.lg-group {
  *zoom: 1;
}

.lg-group:before, .lg-group:after {
  display: table;
  content: "";
  line-height: 0;
}

.lg-group:after {
  clear: both;
}

.lg-outer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  opacity: 0;
  outline: none;
  transition: opacity 0.15s ease 0s;
}
.lg-outer * {
  box-sizing: border-box;
}
.lg-outer.lg-visible {
  opacity: 1;
}
.lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current {
  transition-duration: inherit !important;
  transition-timing-function: inherit !important;
}
.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
  transition-duration: 0s !important;
  opacity: 1;
}
.lg-outer.lg-grab img.lg-object {
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lg-outer.lg-grabbing img.lg-object {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}
.lg-outer .lg {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}
.lg-outer .lg-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.lg-outer .lg-item {
  background: url("../img/loading.gif") no-repeat scroll center center transparent;
  display: none !important;
}
.lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide {
  display: inline-block !important;
}
.lg-outer.lg-css .lg-current {
  display: inline-block !important;
}
.lg-outer .lg-item, .lg-outer .lg-img-wrap {
  display: inline-block;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
.lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}
.lg-outer .lg-img-wrap {
  position: absolute;
  padding: 0 5px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.lg-outer .lg-item.lg-complete {
  background-image: none;
}
.lg-outer .lg-item.lg-current {
  z-index: 1060;
}
.lg-outer .lg-image {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
}
.lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play {
  opacity: 0;
  transition: opacity 0.15s ease 0s;
}
.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play {
  opacity: 1;
}
.lg-outer .lg-empty-html {
  display: none;
}
.lg-outer.lg-hide-download #lg-download {
  display: none;
}

.lg-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.15s ease 0s;
}
.lg-backdrop.in {
  opacity: 1;
}

.lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current {
  transition: none 0s ease 0s !important;
}
.lg-css3.lg-use-css3 .lg-item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lg-css3.lg-use-left .lg-item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lg-css3.lg-fade .lg-item {
  opacity: 0;
}
.lg-css3.lg-fade .lg-item.lg-current {
  opacity: 1;
}
.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
  transition: opacity 0.1s ease 0s;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item {
  opacity: 0;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
  transform: translate3d(-100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
  transform: translate3d(100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}
.lg-css3.lg-slide.lg-use-left .lg-item {
  opacity: 0;
  position: absolute;
  left: 0;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide {
  left: -100%;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide {
  left: 100%;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  left: 0;
  opacity: 1;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}

/* ==========================================================================
   #BASE
   ========================================================================== */
/* ==========================================================================
   #BASE/VARIABLES
   ========================================================================== */
:root {
  --blockquoteBorderWidth: 0.3rem;
  --blockquoteMarginLeftTablet: 9rem;
  --blockquotePaddingLeft: 2.4rem;
  --blockquoteParagraphMarginBottom: 1.2rem;
  --inputBackgroundColor: var(--colorGreyLight);
  --inputBorderColor: var(--colorGreyLight);
  --inputFontWeight: var(--fontWeightBold);
  --inputLetterSpacing: initial;
  --labelPadding: 0 2.4rem;
  --orderedListPaddingLeft: 4.8rem;
}

/* ==========================================================================
   #ANCHOR
   ========================================================================== */
/**
 * Base styling for anchor links. See component 'links' for modifying these further
 */
a {
  color: var(--colorPrimary);
  text-decoration: underline;
}
a:hover {
  color: var(--colorPrimaryActive);
  text-decoration: none;
}
.carousel__item-body--inverted a, .footer--inverted a, .group--inverted a, .header--inverted a, .hero--inverted a, .section--inverted a, .tiles--inverted a {
  color: var(--colorTextInverted);
}

/* ==========================================================================
   #ARTICLE
   ========================================================================== */
article .width--100 > * + blockquote, article .width--100 > * + .embed, article .width--100 > * + ol, article .width--100 > * + ul {
  margin-top: 2.4rem;
}
@media (min-width: 64em) {
  article .width--100 > * + blockquote, article .width--100 > * + .embed, article .width--100 > * + ol, article .width--100 > * + ul {
    margin-top: 4.8rem;
  }
}
article .width--100 > *:not(.hero):not(p) {
  margin-bottom: 2.4rem;
}
@media (min-width: 64em) {
  article .width--100 > *:not(.hero):not(p) {
    margin-bottom: 4.8rem;
  }
}
article .width--100 > *:not(.hero):not(p):last-child {
  margin-bottom: 0;
}

/**
 * -----------------------------------------------------------------------------
 * $BLOCKQUOTE
 * -----------------------------------------------------------------------------
 */
blockquote {
  margin: 0 0 1.5rem 0;
  padding-left: var(--blockquotePaddingLeft);
  position: relative;
  border-left-color: var(--colorPrimary);
  border-left-style: solid;
  border-left-width: var(--blockquoteBorderWidth);
}
@media (min-width: 48em) {
  blockquote {
    margin-left: var(--blockquoteMarginLeftTablet);
  }
}
blockquote p {
  font-family: var(--fontFamilyDefault);
  font-style: normal;
  font-weight: var(--fontWeightDefault);
  font-size: var(--fontSizeBlockquoteMobile);
  letter-spacing: var(--letterSpacingBlockquote);
  line-height: var(--lineHeightBlockquote);
}
@media (min-width: 64em) {
  blockquote p {
    font-size: var(--fontSizeBlockquote);
  }
}
blockquote p:last-of-type {
  margin-bottom: 0;
}
blockquote footer {
  display: block;
  padding-top: 1.5rem;
  color: var(--colorTextLight);
}

/* ==========================================================================
   #BODY
   ========================================================================== */
/**
 * `body` element which will control default font variables.
 */
/**
 * 1. Sets the default font size back to 16px (unless $font-size-default has
 *    changed value). This is the only time `em` should be used to define the
 *    font-size. This has to be `em` because of a bug in Chrome described in
 *    a link below.
 *    https://code.google.com/p/chromium/issues/detail?id=320754
 */
body {
  background-color: var(--colorSiteBackground);
  color: var(--colorTextDefault);
  font-family: var(--fontFamilyDefault);
  font-size: 1.6em;
  /* 1. */
  letter-spacing: var(--letterSpacingDefault);
  line-height: var(--lineHeightDefault);
}
.is-nav-visible body {
  overflow: hidden;
}

/**
 * -----------------------------------------------------------------------------
 * $FIELDSET
 * -----------------------------------------------------------------------------
 */
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/**
 * -----------------------------------------------------------------------------
 * $FIGURE
 * -----------------------------------------------------------------------------
 */
figure {
  position: relative;
  margin: 0 0 1.5rem 0;
}
figure img,
figure picture {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
figure figcaption {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  font-size: var(--fontSizeSmall);
  font-style: italic;
}

/* ==========================================================================
   #FORM
   ========================================================================== */
.form {
  display: block;
  width: 100%;
}

/* ==========================================================================
   #HEADING
   ========================================================================== */
/* ==========================================================================
   #HEADING/VARIABLES
   ========================================================================== */
:root {
  --headingMargin: 0 0 1.5rem;
  --headingMarginTablet: var(--headingMargin);
  --heading1Margin: var(--headingMargin);
  --heading1MarginTablet: var(--headingMarginTablet);
  --heading2Margin: var(--headingMargin);
  --heading2MarginTablet: var(--headingMarginTablet);
  --heading3Margin: var(--headingMargin);
  --heading3MarginTablet: var(--headingMarginTablet);
  --heading4Margin: var(--headingMargin);
  --heading4MarginTablet: var(--headingMarginTablet);
  --heading1TextTransform: uppercase;
}

/* ==========================================================================
   #HEADING/DEFAULT
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--headingMargin);
}
@media (min-width: 48em) {
  h1,
h2,
h3,
h4,
h5,
h6 {
    margin: var(--headingMarginTablet);
  }
}
h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
  text-decoration: none;
}

h1 {
  margin: var(--heading1Margin);
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH1Mobile);
  font-weight: var(--fontWeightBold);
  letter-spacing: var(--letterSpacingHeading);
  line-height: var(--lineHeightHeading);
  text-transform: var(--heading1TextTransform);
}
@media (min-width: 80em) {
  h1 {
    font-size: var(--fontSizeH1);
  }
}
@media (min-width: 48em) {
  h1 {
    margin: var(--heading1MarginTablet);
  }
}

h2 {
  margin: var(--heading2Margin);
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH2Mobile);
  font-weight: var(--fontWeightBold);
  letter-spacing: var(--letterSpacingHeading);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  h2 {
    font-size: var(--fontSizeH2);
  }
}
@media (min-width: 48em) {
  h2 {
    margin: var(--heading2MarginTablet);
  }
}

h3 {
  margin: var(--heading3Margin);
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH3Mobile);
  font-weight: var(--fontWeightBold);
  letter-spacing: var(--letterSpacingHeading);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  h3 {
    font-size: var(--fontSizeH3);
  }
}
@media (min-width: 48em) {
  h3 {
    margin: var(--heading3MarginTablet);
  }
}

h4 {
  margin: var(--heading4Margin);
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH4Mobile);
  font-weight: var(--fontWeightBold);
  letter-spacing: var(--letterSpacingHeading);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  h4 {
    font-size: var(--fontSizeH4);
  }
}
@media (min-width: 48em) {
  h4 {
    margin: var(--heading4MarginTablet);
  }
}

/* ==========================================================================
   #HR
   ========================================================================== */
/* ==========================================================================
   #HR/VARIABLES
   ========================================================================== */
:root {
  --hrColor: #c4c4c4;
  --hrHeight: 0.3rem;
  --hrSpacing: 4rem;
}

/* ==========================================================================
   #HR/DEFAULT
   ========================================================================== */
hr {
  /*  
  By default, HR's can be styled with border-color, however this approach doesn't scale. 
  If you make the HR taller than 1px, only the border receives the colour, not the entire element. 
  So instead, we reset the border, then use a height and a background for thickness and colour respectively. 
  The color property is also included, for IE's benefit only. 
  */
  display: block;
  height: var(--hrHeight);
  margin-top: var(--hrSpacing);
  margin-bottom: var(--hrSpacing);
  background-color: var(--hrColor);
  border: 0;
  font-size: 0;
}

/* ==========================================================================
   #HTML
   ========================================================================== */
/**
 * `html` element that'll control font size/spacing for the paga via `rem` 
 * unit.
 */
/**
 * 1. Makes REM units easier to work with because 1rem = 10px.
 */
html {
  box-sizing: border-box;
  font-size: 62.5%;
  /* 1. */
}
html *, html *:before, html *:after {
  box-sizing: inherit;
}
html.is-modal-visible {
  overflow-y: hidden;
}

/* ==========================================================================
   #IFRAME
   ========================================================================== */
iframe {
  border: 0;
}

/* ==========================================================================
   #IMAGE
   ========================================================================== */
img {
  max-width: 100%;
}

/* ==========================================================================
   #INPUT
   ========================================================================== */
input {
  border: 0.2rem solid var(--inputBorderColor);
  border-radius: var(--formBorderRadius);
  display: block;
  margin-bottom: 0.75rem;
  padding: 1.2rem 2.4rem;
  width: 100%;
  background: var(--inputBackgroundColor);
  outline: none;
  color: var(--colorBlack);
  font-family: var(--fontFamilyHeading);
  font-size: var(--fontSizeLarge);
  font-weight: var(--inputFontWeight);
  letter-spacing: var(--inputLetterSpacing);
  text-indent: 0;
}
input:focus {
  border: 0.2rem solid var(--colorTextDefault);
  box-shadow: 0 0 6px 1px var(--colorPrimary);
}
input[type=file] {
  border: 0;
}

/* ==========================================================================
   #OL
   ========================================================================== */
/**
 * Base styling for numbered list.
 */
ol {
  margin: 0;
  margin-bottom: 1.5rem;
  padding-left: var(--orderedListPaddingLeft);
}
@media (min-width: 64em) {
  ol {
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightParagraph);
  }
}
ol > li {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}
ol > li::marker {
  color: var(--colorGrey);
}
ol ol {
  margin-bottom: 0;
}

/* ==========================================================================
   #LABEL
   ========================================================================== */
label {
  display: block;
  margin-bottom: 0.75rem;
  padding: var(--labelPadding);
}

/**
 * -----------------------------------------------------------------------------
 * $LEGEND
 * -----------------------------------------------------------------------------
 */
legend {
  margin-bottom: 1.5rem;
}

/**
 * -----------------------------------------------------------------------------
 * $MAIN
 * -----------------------------------------------------------------------------
 */
/* ==========================================================================
   #PARAGRAPH
   ========================================================================== */
/**
 * Default behaviour for a paragraph.
 */
p {
  margin-bottom: 1.5rem;
  margin-top: 0;
}
@media (min-width: 26.5625em) {
  p {
    margin-bottom: 1.5rem;
  }
}
@media (min-width: 64em) {
  p {
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightParagraph);
  }
}

/* ==========================================================================
   #PICTURE
   ========================================================================== */
picture {
  display: block;
}
picture > img {
  display: block;
}

/* ==========================================================================
   #PLACEHOLDER
   ========================================================================== */
/**
 * Styling for input placeholder text.
 */
::-moz-placeholder {
  color: var(--colorGrey);
}
:-ms-input-placeholder {
  color: var(--colorGrey);
}
::placeholder {
  color: var(--colorGrey);
}

/* ==========================================================================
   #SELECT
   ========================================================================== */
/*
* 1. Hide the default arrow in Internet Explorer 10 and Internet Explorer 11
*/
select {
  border: 0.2rem solid var(--inputBorderColor);
  border-radius: var(--formBorderRadius);
  display: inline-block;
  max-width: 100%;
  padding: 1.2rem 3.9rem 1.2rem 2.4rem;
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url("../content/icon-chevron.svg") 0 0 no-repeat var(--inputBackgroundColor);
  background-position: center right 1.2rem;
  color: var(--colorBlack);
  font-family: var(--fontFamilyHeading);
  font-size: var(--fontSizeLarge);
  font-weight: var(--inputFontWeight);
  letter-spacing: var(--inputLetterSpacing);
  text-transform: uppercase;
}
select:focus {
  border: 0.2rem solid var(--colorTextDefault);
  box-shadow: 0 0 6px 1px var(--colorPrimary);
}

select::-ms-expand {
  display: none;
  /* 1 */
}

/* ==========================================================================
   #SELECTION
   ========================================================================== */
/**
 * Styling for highlighted text.
 */
::-moz-selection {
  background-color: var(--colorPrimary);
  color: var(--colorWhite);
}
::selection {
  background-color: var(--colorPrimary);
  color: var(--colorWhite);
}

/* ==========================================================================
   #BASE/STRONG
   ========================================================================== */
/**
 * Normalize resets <b> & <strong> to 'bolder'. This project doesn't use a font
 * weight as heavy as that. So $font-weight-bold corrects that.
 */
b,
strong {
  font-weight: var(--fontWeightBold);
}

/* ==========================================================================
   #TABLE
   ========================================================================== */
/**
 * 1. The border-collapse property sets whether cells inside a <table> have
 *    shared or separate borders. 
 *    https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
 */
table {
  width: 100%;
  border-collapse: collapse;
  /* 1. */
}
table thead {
  display: none;
}
@media (min-width: 48em) {
  table thead {
    display: table-header-group;
  }
}
table tr {
  border-bottom: 0.1rem solid var(--colorGrey);
  display: block;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 48em) {
  table tr {
    display: table-row;
    margin-bottom: 0;
  }
}
table td:before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
  margin-right: 2rem;
}
@media (min-width: 48em) {
  table td:before {
    display: none;
  }
}
table th,
table td {
  display: block;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  text-align: right;
}
@media (min-width: 48em) {
  table th,
table td {
    display: table-cell;
    padding-bottom: 1.1rem;
    padding-right: 0;
    padding-top: 1.1rem;
    vertical-align: top;
    text-align: left;
  }
}
table th:last-child,
table td:last-child {
  padding-right: 2rem;
}

/* ==========================================================================
   #TEXTAREA
   ========================================================================== */
textarea {
  border: 0.2rem solid var(--inputBorderColor);
  border-radius: var(--formBorderRadius);
  display: block;
  margin-bottom: 0.75rem;
  min-height: 12rem;
  padding: 1.2rem 2.4rem;
  width: 100%;
  background: var(--inputBackgroundColor);
  color: var(--colorBlack);
  font-family: var(--fontFamilyHeading);
  font-size: var(--fontSizeLarge);
  font-weight: var(--inputFontWeight);
  letter-spacing: var(--inputLetterSpacing);
  text-indent: 0;
}
.has-error textarea {
  border: 0.2rem solid var(--colorError);
}
textarea:focus {
  border: 0.2rem solid var(--colorTextDefault);
  box-shadow: 0 0 6px 1px var(--colorPrimary);
}

/* ==========================================================================
   #UL
   ========================================================================== */
/**
 * Base styling for bulleted list.
 */
ul {
  list-style: disc;
  margin: 0;
  margin-bottom: 1.5rem;
  padding-left: 3.2rem;
}
@media (min-width: 64em) {
  ul {
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightParagraph);
  }
}
ul > li {
  margin-bottom: 1.5rem;
}
ul ul {
  margin-bottom: 0;
}

/* ==========================================================================
   #COMPONENTS
   ========================================================================== */
/* ==========================================================================
   #ALERT
   ========================================================================== */
/* ==========================================================================
   #VARIABLES
   ========================================================================== */
/* ==========================================================================
   #ALERT/DEFAULT
   ========================================================================== */
.alert {
  padding-bottom: 1.6rem;
  padding-top: 1.4rem;
  background-color: var(--colorAlertBackground);
  /* Maintain horizontal padding */
}
@media (min-width: 88.25em) {
  .alert {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.alert a {
  color: inherit;
}

/* ==========================================================================
   #ALERT/ERROR
   ========================================================================== */
.alert--error {
  background-color: var(--colorAlertErrorBackground);
  color: var(--colorAlertErrorText);
}

/* ==========================================================================
   #ALERT/STICKY
   ========================================================================== */
/**
 * 1. This determines the distance from the top of the parent element that the
 *    alert becomes sticky.
 */
.alert--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  /* 1. */
  z-index: 1;
}

/* ==========================================================================
   #ALERT/SUCCESS
   ========================================================================== */
.alert--success {
  background-color: var(--colorAlertSuccessBackground);
  color: var(--colorAlertSuccessText);
}

/* ==========================================================================
   #BADGE
   ========================================================================== */
/* ==========================================================================
   #BADGE/VARIABLES
   ========================================================================== */
/*
 * 1. Set to 3 because it wants to be above the possible image background but also leave room
 *    for a potential pseudo-element overlay in the future
 */
:root {
  --badgeBackgroundPattern: none;
  --badgeBackgroundColor: transparent;
  --badgeBorderRadius: 1rem;
  --badgeBackgroundScale: 1;
  --badgeBackgroundScaleHover: 1.2;
  --badgeBackgroundTransitionDuration: 1s;
  --badgeImageMaxHeight: 4rem;
  --badgeImageMaxWidth: 12.5rem;
  --badgeLogoZIndex: 3;
  /* 1 */
  --badgeMinHeight: 6rem;
}

/* ==========================================================================
   #BADGE/DEFAULT
   ========================================================================== */
.badge {
  border-radius: var(--badgeBorderRadius);
  display: block;
  margin-bottom: 3.2rem;
  min-height: var(--badgeMinHeight);
  position: relative;
  overflow: hidden;
  /* If badge is a link apply hover effect */
}
.badge__background img {
  display: block;
  height: auto;
  width: 100%;
}
.badge__logo {
  bottom: 0;
  left: 0;
  padding: 1.5rem 3.2rem;
  position: absolute;
  z-index: var(--badgeLogoZIndex);
  background-color: var(--badgeBackgroundColor);
}
.badge__logo img {
  display: block;
  max-height: var(--badgeImageMaxHeight);
  max-width: var(--badgeImageMaxWidth);
}
.badge[href] .badge__background img {
  transform: scale(var(--badgeBackgroundScale));
  transition: transform var(--badgeBackgroundTransitionDuration) ease-in-out;
}
.badge[href]:hover .badge__background img {
  transform: scale(var(--badgeBackgroundScaleHover));
}

/* ==========================================================================
   #BUTTON
   ========================================================================== */
/**
 * Various styles related to links or buttons.
 */
/* ==========================================================================
   #BUTTON/VARIABLES
   ========================================================================== */
:root {
  --buttonAfterHoverWipeAmount: 100%;
  --buttonAfterOpacity: 0.1;
  --buttonAfterTransformRotate: 100deg;
  --buttonBorderRadius: 7rem;
  --buttonBorderThickness: 0.3rem;
  --buttonFontSize: var(--fontSizeSmall);
  --buttonFontWeight: bold;
  --buttonHoverAfterAnimationDuration: 2s;
  --buttonHoverIconBounceAmount: 1rem;
  --buttonHoverSvgAnimationDuration: 1s;
  --buttonOutlineTransitionDuration: 0.5s;
  --buttonPaddingHorizontal: 2rem;
  --buttonPaddingVertical: 1rem;
  --buttonSvgMarginLeft: 1rem;
  --buttonSvgWidth: 0.9rem;
  --buttonTextTransform: uppercase;
}
@media (min-width: 48em) {
  :root {
    --buttonFontSize: var(--fontSizeBase);
    --buttonPaddingHorizontal: 3rem;
    --buttonPaddingVertical: 1.4rem;
    --buttonSvgMarginLeft: 1.5rem;
  }
}

/* ==========================================================================
   #BUTTON/DEFAULT
   ========================================================================== */
.btn, #ccc #ccc-module .ccc-notify-button,
.btn:link,
.btn:visited {
  border: var(--buttonBorderThickness) solid var(--colorPrimary);
  border-radius: var(--buttonBorderRadius);
  display: inline-block;
  overflow: hidden;
  padding: var(--buttonPaddingVertical) var(--buttonPaddingHorizontal) var(--buttonPaddingVertical) var(--buttonPaddingHorizontal);
  position: relative;
  vertical-align: middle;
  background-color: var(--colorPrimary);
  outline: none;
  color: var(--colorButtonLabel);
  font-size: var(--buttonFontSize);
  font-weight: var(--buttonFontWeight);
  letter-spacing: var(--letterSpacingButton);
  text-decoration: none;
  text-transform: var(--buttonTextTransform);
  cursor: pointer;
}
.btn svg, #ccc #ccc-module .ccc-notify-button svg,
.btn:link svg,
.btn:visited svg {
  fill: var(--colorButtonLabel);
}
.btn svg:last-child, #ccc #ccc-module .ccc-notify-button svg:last-child,
.btn:link svg:last-child,
.btn:visited svg:last-child {
  margin-left: var(--buttonSvgMarginLeft);
  position: absolute;
  right: var(--buttonPaddingHorizontal);
  top: 50%;
  transform: translateY(-50%);
  width: var(--buttonSvgWidth);
}
.btn:after, #ccc #ccc-module .ccc-notify-button:after,
.btn:link:after,
.btn:visited:after {
  content: "";
  height: 100%;
  right: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: var(--buttonAfterOpacity);
  transform: rotate(var(--buttonAfterTransformRotate));
  background-color: var(--colorWhite);
}
.btn:hover svg:last-child, #ccc #ccc-module .ccc-notify-button:hover svg:last-child,
.btn:link:hover svg:last-child,
.btn:visited:hover svg:last-child {
  -webkit-animation-name: btnHoverIconBounce;
          animation-name: btnHoverIconBounce;
  -webkit-animation-duration: var(--buttonHoverSvgAnimationDuration);
          animation-duration: var(--buttonHoverSvgAnimationDuration);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.btn:hover:after, #ccc #ccc-module .ccc-notify-button:hover:after,
.btn:link:hover:after,
.btn:visited:hover:after {
  -webkit-animation-name: btnAfterHoverWipe;
          animation-name: btnAfterHoverWipe;
  -webkit-animation-duration: var(--buttonHoverAfterAnimationDuration);
          animation-duration: var(--buttonHoverAfterAnimationDuration);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.btn.btn--with-arrow, #ccc #ccc-module .btn--with-arrow.ccc-notify-button {
  padding-right: calc(var(--buttonPaddingHorizontal) + var(--buttonSvgMarginLeft) + var(--buttonSvgWidth));
}

.btn:disabled, #ccc #ccc-module .ccc-notify-button:disabled {
  background-color: var(--colorTextLighter);
  border: 1px solid var(--colorTextLighter);
  color: var(--colorTextLight);
  cursor: not-allowed;
}

@-webkit-keyframes btnAfterHoverWipe {
  0% {
    right: var(--buttonAfterHoverWipeAmount);
  }
  50% {
    right: calc(var(--buttonAfterHoverWipeAmount) * -1);
  }
  100% {
    right: calc(var(--buttonAfterHoverWipeAmount) * -1);
  }
}

@keyframes btnAfterHoverWipe {
  0% {
    right: var(--buttonAfterHoverWipeAmount);
  }
  50% {
    right: calc(var(--buttonAfterHoverWipeAmount) * -1);
  }
  100% {
    right: calc(var(--buttonAfterHoverWipeAmount) * -1);
  }
}
@-webkit-keyframes btnHoverIconBounce {
  0% {
    transform: translate(0, -50%);
  }
  50% {
    transform: translate(var(--buttonHoverIconBounceAmount), -50%);
  }
  100% {
    transform: translateX(0, -50%);
  }
}
@keyframes btnHoverIconBounce {
  0% {
    transform: translate(0, -50%);
  }
  50% {
    transform: translate(var(--buttonHoverIconBounceAmount), -50%);
  }
  100% {
    transform: translateX(0, -50%);
  }
}
/*  ==========================================================================
    #BUTTON/ICON
    ========================================================================== */
.btn--icon {
  border: 0;
  padding: 0;
  background-color: transparent;
}

/* ==========================================================================
   #BUTTON/PRIMARY
   ========================================================================== */
.btn--primary,
.btn--primary:link,
.btn--primary:visited {
  border: var(--buttonBorderThickness) solid var(--colorPrimary);
  background-color: var(--colorPrimary);
  color: var(--colorWhite);
}

/* ==========================================================================
   #BUTTON/SECONDARY
   ========================================================================== */
.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
  border: var(--buttonBorderThickness) solid var(--colorSecondary);
  background-color: var(--colorSecondary);
  color: var(--colorButtonLabel);
}
[class$="--inverted"] .btn--secondary, .styled--dark .btn--secondary,
[class$="--inverted"] .btn--secondary:link,
.styled--dark .btn--secondary:link,
[class$="--inverted"] .btn--secondary:visited,
.styled--dark .btn--secondary:visited {
  border-color: var(--colorWhite);
  background-color: var(--colorWhite);
  color: var(--colorButtonLabelInverted);
}
[class$="--inverted"] .btn--secondary svg, .styled--dark .btn--secondary svg,
[class$="--inverted"] .btn--secondary:link svg,
.styled--dark .btn--secondary:link svg,
[class$="--inverted"] .btn--secondary:visited svg,
.styled--dark .btn--secondary:visited svg {
  fill: var(--colorButtonLabelInverted);
}
[class$="--inverted"] .btn--secondary:after, .styled--dark .btn--secondary:after,
[class$="--inverted"] .btn--secondary:link:after,
.styled--dark .btn--secondary:link:after,
[class$="--inverted"] .btn--secondary:visited:after,
.styled--dark .btn--secondary:visited:after {
  background-color: var(--colorGreyDark);
}
.styled--dark .modal .btn--secondary,
.styled--dark .modal .btn--secondary:link,
.styled--dark .modal .btn--secondary:visited {
  border: var(--buttonBorderThickness) solid var(--colorSecondary);
  background-color: var(--colorSecondary);
  color: var(--colorButtonLabel);
}

/**
 * Outline must go after primary & secondary to ensure the
 * background colour is overridden.
 */
/* ==========================================================================
   #BUTTON/OUTLINE
   ========================================================================== */
.btn--outline,
.btn--outline:link,
.btn--outline:visited {
  background: transparent;
}
.btn--outline:hover,
.btn--outline:link:hover,
.btn--outline:visited:hover {
  transition: all var(--buttonOutlineTransitionDuration) ease-in-out;
}
.btn--outline.btn--primary,
.btn--outline:link.btn--primary,
.btn--outline:visited.btn--primary {
  color: var(--colorPrimary);
}
.btn--outline.btn--primary svg,
.btn--outline:link.btn--primary svg,
.btn--outline:visited.btn--primary svg {
  fill: var(--colorPrimary);
}
.btn--outline.btn--primary:hover,
.btn--outline:link.btn--primary:hover,
.btn--outline:visited.btn--primary:hover {
  background-color: var(--colorPrimary);
  color: var(--colorWhite);
}
.btn--outline.btn--primary:hover svg,
.btn--outline:link.btn--primary:hover svg,
.btn--outline:visited.btn--primary:hover svg {
  fill: var(--colorWhite);
}
.btn--outline.btn--secondary,
.btn--outline:link.btn--secondary,
.btn--outline:visited.btn--secondary {
  color: var(--colorButtonLabelInverted);
}
.btn--outline.btn--secondary svg,
.btn--outline:link.btn--secondary svg,
.btn--outline:visited.btn--secondary svg {
  fill: var(--colorButtonLabelInverted);
}
.btn--outline.btn--secondary:hover,
.btn--outline:link.btn--secondary:hover,
.btn--outline:visited.btn--secondary:hover {
  background-color: var(--colorSecondary);
  color: var(--colorWhite);
}
.btn--outline.btn--secondary:hover svg,
.btn--outline:link.btn--secondary:hover svg,
.btn--outline:visited.btn--secondary:hover svg {
  fill: var(--colorWhite);
}
[class$="--inverted"] .btn--outline.btn--secondary, .styled--dark .btn--outline.btn--secondary,
[class$="--inverted"] .btn--outline:link.btn--secondary,
.styled--dark .btn--outline:link.btn--secondary,
[class$="--inverted"] .btn--outline:visited.btn--secondary,
.styled--dark .btn--outline:visited.btn--secondary {
  background-color: transparent;
  color: var(--colorButtonLabel);
}
[class$="--inverted"] .btn--outline.btn--secondary svg, .styled--dark .btn--outline.btn--secondary svg,
[class$="--inverted"] .btn--outline:link.btn--secondary svg,
.styled--dark .btn--outline:link.btn--secondary svg,
[class$="--inverted"] .btn--outline:visited.btn--secondary svg,
.styled--dark .btn--outline:visited.btn--secondary svg {
  fill: var(--colorButtonLabel);
}
[class$="--inverted"] .btn--outline.btn--secondary:hover, .styled--dark .btn--outline.btn--secondary:hover,
[class$="--inverted"] .btn--outline:link.btn--secondary:hover,
.styled--dark .btn--outline:link.btn--secondary:hover,
[class$="--inverted"] .btn--outline:visited.btn--secondary:hover,
.styled--dark .btn--outline:visited.btn--secondary:hover {
  background-color: var(--colorWhite);
  color: var(--colorButtonLabelInverted);
}
[class$="--inverted"] .btn--outline.btn--secondary:hover svg, .styled--dark .btn--outline.btn--secondary:hover svg,
[class$="--inverted"] .btn--outline:link.btn--secondary:hover svg,
.styled--dark .btn--outline:link.btn--secondary:hover svg,
[class$="--inverted"] .btn--outline:visited.btn--secondary:hover svg,
.styled--dark .btn--outline:visited.btn--secondary:hover svg {
  fill: var(--colorButtonLabelInverted);
}
.styled--dark .modal .btn--outline.btn--secondary,
.styled--dark .modal .btn--outline:link.btn--secondary,
.styled--dark .modal .btn--outline:visited.btn--secondary {
  color: var(--colorButtonLabelInverted);
}

/* ==========================================================================
   #CARD
   ========================================================================== */
/* ==========================================================================
   #CARD/VARIABLES
   ========================================================================== */
/*
 * 1. Set to 3 because it wants to be above the possible image background but also leave room
 *    for a potential pseudo-element overlay in the future
 */
:root {
  --cardBackground: transparent;
  --cardBackgroundPattern: none;
  --cardBodyZIndex: 3;
  /* 1 */
  --cardBorder: var(--colorGrey);
  --cardBorderRadius: 1rem;
  --cardBodyPadding: 2.4rem;
  --cardBoxShadow: none;
  --cardJobBodyPadding: var(--cardBodyPadding);
  --cardJobMetaFontSize: var(--cardMetaFontSize);
  --cardJobMetaFontWeight: var(--cardMetaWeight);
  --cardJobTitleFontSize: var(--cardTitleFontSize);
  --cardJobTitleFontWeight: var(--cardTitleFontWeight);
  --cardMediaBorder: none;
  --cardMediaImageScale: 1;
  --cardMediaImageScaleHover: 1.2;
  --cardMediaImageTransitionDuration: 1s;
  --cardMediaMarginBottom: 0;
  --cardMediaOverlayGradientColor: 255, 255, 255;
  --cardMediaOverlayGradientInvertedColor: 0, 0, 0;
  --cardMediaOverlayGradientOpacity: 0.8;
  --cardMetaFontSize: var(--fontSizeBase);
  --cardMetaWeight: 700;
  --cardMetaTextTransform: uppercase;
  --cardTextColor: #0b0b0b;
  --cardTextColorInverted: #ffffff;
  --cardTitleFontSize: var(--fontSizeH3);
  --cardPinnedTitleFontSize: calc(var(--fontSizeH3) + 2rem);
  --cardTitleFontWeight: var(--fontWeightBold);
  --cardTitleMarginBottom: 0.2rem;
  --cardTitleTextTransform: initial;
  --cardTransform: none;
}

/* ==========================================================================
   #CARD/DEFAULT
   ========================================================================== */
/*
* 1. Force 7:4 aspect ratio on media overlay cards
*/
.card {
  border-radius: var(--cardBorderRadius);
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: var(--cardBackground);
  background-image: var(--cardBackgroundPattern);
  box-shadow: var(--cardBoxShadow);
  color: var(--cardTextColor);
  text-decoration: none;
  overflow: hidden;
  transform: var(--cardTransform);
  /* If card is a link apply hover effect */
}
.styled--dark .card, .content-feed--inverted .card, .card--inverted {
  color: var(--colorTextInverted);
}
.card--media-overlay {
  height: 0;
  padding-bottom: 55.2734375%;
  /* 1 */
}
.card__media {
  border-bottom-left-radius: var(--cardBorderRadius);
  border-bottom-right-radius: var(--cardBorderRadius);
  border: var(--cardMediaBorder);
  margin-bottom: var(--cardMediaMarginBottom);
  overflow: hidden;
}
.card__media-image {
  display: block;
  min-width: 100%;
}
.card--media-overlay .card__media-image {
  width: 100%;
}
.card--media-overlay .card__media {
  position: relative;
  z-index: 1;
}
.card__body {
  padding: var(--cardBodyPadding);
  position: relative;
  z-index: var(--cardBodyZIndex);
}
.card--has-media .card__body {
  padding-top: 1.5rem;
}
.card--media-overlay .card__body {
  bottom: 0;
  left: 0;
  padding: var(--cardBodyPadding);
  position: absolute;
  width: 100%;
  background: linear-gradient(180deg, rgba(var(--cardMediaOverlayGradientColor), 0) 0%, rgba(var(--cardMediaOverlayGradientColor), var(--cardMediaOverlayGradientOpacity)) 100%);
}
.styled--dark .card__body, .content-feed--inverted .card--media-overlay .card__body, .card--inverted.card--media-overlay .card__body {
  background: linear-gradient(180deg, rgba(var(--cardMediaOverlayGradientInvertedColor), 0) 0%, rgba(var(--cardMediaOverlayGradientInvertedColor), var(--cardMediaOverlayGradientOpacity)) 100%);
}
.card__body p:last-child,
.card__body ul:last-child,
.card__body ol:last-child {
  margin-bottom: 0;
}
.card__header {
  margin-bottom: var(--cardTitleMarginBottom);
}
.card__header:last-child {
  margin-bottom: 0;
}
.card--has-media .card__header {
  display: flex;
  flex-direction: column-reverse;
}
.card--media-overlay .card__header {
  display: block;
}
.card__title {
  margin-bottom: var(--cardTitleMarginBottom);
  font-size: var(--cardTitleFontSize);
  font-weight: var(--cardTitleFontWeight);
  text-transform: var(--cardTitleTextTransform);
}
.card__title:last-child {
  margin-bottom: 0;
}
.card__meta {
  display: block;
  color: var(--colorTextLight);
  font-family: var(--fontFamilyHeading);
  font-size: var(--cardMetaFontSize);
  font-weight: var(--cardMetaWeight);
  text-transform: var(--cardMetaTextTransform);
}
.card--has-media .card__meta {
  margin-bottom: var(--cardTitleMarginBottom);
}
.card--media-overlay .card__meta {
  margin-bottom: 0;
  color: var(--cardTextColor);
}
.card--inverted .card__meta, .content-feed--inverted .card__meta {
  color: var(--colorTextLighter);
}
.card[href] .card__media-image {
  transform: scale(var(--cardMediaImageScale));
  transition: transform var(--cardMediaImageTransitionDuration) ease-in-out;
}
.card[href]:hover .card__media-image {
  transform: scale(var(--cardMediaImageScaleHover));
}

a.card:hover {
  color: var(--cardTextColor);
}
a.card--inverted:hover {
  color: var(--colorTextInverted);
}

/* ==========================================================================
   #CARD/BACKGROUND
   ========================================================================== */
.card--with-background-fixed {
  background-attachment: fixed;
}

/* ==========================================================================
   #CARD/EQUAL HEIGHT
   ========================================================================== */
/*
 * 1. Only apply this above desktopSmall, when width-- classes would actually place things side by side
 *    Otherwise, it makes spacing on mobile tricky when they stack.
 */
.card--equal-height {
  /* 1 */
}
@media (min-width: 64em) {
  .card--equal-height {
    height: 100%;
  }
  .card--equal-height .card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

/* ==========================================================================
   #CARD/CAROUSEL
   ========================================================================== */
.card--carousel {
  border-radius: 0;
  display: block;
  margin: 0;
  min-height: 50rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 48em) {
  .card--carousel {
    grid-template-columns: repeat(6, 1fr);
  }
}
.card--carousel .card__background {
  grid-column: span 6;
  height: auto;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  width: auto;
}
@media (min-width: 48em) {
  .card--carousel .card__background {
    margin-left: -2rem;
    margin-right: -2rem;
  }
}
.card--carousel .card__background img {
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale3d(1, 1, 1);
  transition: all 3s ease-in-out;
}
.carousel__items .card--carousel .card__background {
  -webkit-animation-name: cardPictureCarouselIntro;
          animation-name: cardPictureCarouselIntro;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
.card--carousel:hover .card__background img {
  transform: scale3d(1, 1, 1);
}
.card--carousel .card__background--embed {
  max-height: calc(100vh - 90px);
}
.card--carousel .card__body {
  left: 3.2rem;
  position: absolute;
  right: 3.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
@media (min-width: 48em) {
  .card--carousel .card__body {
    left: 7rem;
    right: 7rem;
  }
}
@media (min-width: 64em) {
  .card--carousel .card__body {
    left: 11rem;
    right: 11rem;
  }
}
@media (min-width: 80em) {
  .card--carousel .card__body {
    left: 14rem;
    right: 14rem;
  }
}
@media (min-width: 90em) {
  .card--carousel .card__body {
    left: 17rem;
    right: 17rem;
  }
}
.card--carousel .card__body > * {
  margin-bottom: 3.2rem;
  -webkit-animation-name: cardBodyCarouselItemFade;
          animation-name: cardBodyCarouselItemFade;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  opacity: 0;
}
.card--carousel .card__body > *:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.card--carousel .card__body > *:nth-child(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
@media (min-width: 64em) {
  .card--carousel .card__body p {
    width: 50%;
  }
}

@-webkit-keyframes cardPictureCarouselIntro {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes cardPictureCarouselIntro {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@-webkit-keyframes cardBodyCarouselItemFade {
  0% {
    opacity: 0;
    transform: translateY(-2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cardBodyCarouselItemFade {
  0% {
    opacity: 0;
    transform: translateY(-2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   #CARD/JOB
   ========================================================================== */
/**
 * Customise display of a job via a `card`.
 */
.card--job .card__body {
  padding: var(--cardJobBodyPadding);
}
.card--job .card__meta {
  font-size: var(--cardJobMetaFontSize);
  font-weight: var(--cardJobMetaFontWeight);
}
.card--job .card__title {
  font-size: var(--cardJobTitleFontSize);
  font-weight: var(--cardJobTitleFontWeight);
}

/* ==========================================================================
   #CARD/PINNED
   ========================================================================== */
.card--pinned {
  margin-bottom: 6.4rem;
}
@media (min-width: 48em) {
  .card--pinned {
    display: flex;
    flex-flow: row wrap;
  }
  .card--pinned .card__left {
    border-right: 0.75rem solid transparent;
    flex-basis: 50%;
  }
  .card--pinned .card__right {
    border-left: 0.75rem solid transparent;
    flex-basis: 50%;
  }
  .card--pinned .card__title {
    font-size: var(--cardPinnedTitleFontSize);
  }
}
.card--pinned .card__media {
  border-radius: var(--cardBorderRadius);
}
.card--pinned .card__synopsis {
  display: none;
}
@media (min-width: 80em) {
  .card--pinned .card__synopsis {
    display: block;
    margin-top: 1.5rem;
    white-space: pre-line;
  }
}

/*  ==========================================================================
    #CAROUSEL
    ========================================================================== */
/*  ==========================================================================
    #CAROUSEL/VARIABLES
    ========================================================================== */
/*  ==========================================================================
    #CAROUSEL/DEFAULT
    ========================================================================== */
.carousel {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/**
* 1. Position indicators above the line effect containers.
*/
.carousel__indicators {
  bottom: 3.2rem;
  display: flex;
  left: 0;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 100;
  /* 1. */
  list-style: none;
}

.carousel__indicator {
  height: 2rem;
  margin-right: 1.5rem;
  width: 2rem;
}
.carousel__indicator .btn, .carousel__indicator #ccc #ccc-module .ccc-notify-button, #ccc #ccc-module .carousel__indicator .ccc-notify-button {
  border: 0;
  height: 100%;
  padding: 0;
  width: 100%;
  background-color: var(--colorCarouselIndicator);
  border-radius: 1rem;
}
.carousel__indicator .btn:focus, .carousel__indicator #ccc #ccc-module .ccc-notify-button:focus, #ccc #ccc-module .carousel__indicator .ccc-notify-button:focus, .carousel__indicator .btn:hover, .carousel__indicator #ccc #ccc-module .ccc-notify-button:hover, #ccc #ccc-module .carousel__indicator .ccc-notify-button:hover {
  background-color: var(--colorCarouselIndicatorFocus);
}
.carousel__indicator:last-child {
  margin-right: 0;
}
.carousel__indicator.is-active .btn, .carousel__indicator.is-active #ccc #ccc-module .ccc-notify-button, #ccc #ccc-module .carousel__indicator.is-active .ccc-notify-button {
  background-color: var(--colorCarouselIndicatorActive);
}

.carousel__btn {
  overflow: initial;
}

.carousel__next-btn {
  right: 5px;
  transform: translateX(0) translateY(-50%) rotate(180deg);
}
@media (min-width: 48em) {
  .carousel__next-btn {
    right: 35px;
  }
}

.carousel__previous-btn {
  left: 5px;
  transform: translateX(0) translateY(-50%);
}
@media (min-width: 48em) {
  .carousel__previous-btn {
    left: 35px;
  }
}

/**
* 1. Position indicators above the line effect containers.
* 2. Animation is added to the SVG so the button hit area does not also move.
* 3. Negative margin used on the psuedo element to increase hit area.
*/
.carousel__next-btn,
.carousel__previous-btn {
  position: absolute;
  top: 50%;
  z-index: 100;
  /* 1. */
  /* 2. */
  /* 3. */
}
.carousel__next-btn:focus svg, .carousel__next-btn:hover svg,
.carousel__previous-btn:focus svg,
.carousel__previous-btn:hover svg {
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: carouselButtonHover;
          animation-name: carouselButtonHover;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
.carousel__next-btn:after,
.carousel__previous-btn:after {
  bottom: -1rem;
  content: "";
  left: -1rem;
  position: absolute;
  right: -1rem;
  top: -1rem;
  background-color: transparent;
}

.carousel__items {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  min-width: 100%;
  padding: 0;
}

.carousel__item {
  display: none;
  margin-bottom: 0;
  min-width: 100%;
}
.carousel__item.is-active {
  display: block;
}

@-webkit-keyframes carouselButtonHover {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1rem);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes carouselButtonHover {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1rem);
  }
  100% {
    transform: translateX(0);
  }
}
/* ==========================================================================
   #CONTENT FEED
   ========================================================================== */
/* ==========================================================================
   #CONTENT FEED/VARIABLES
   ========================================================================== */
:root {
  --contentFeedTitleTextTransform: uppercase;
}

/* ==========================================================================
   #CONTENT FEED/DEFAULT
   ========================================================================== */
.content-feed__header {
  margin-bottom: 3.2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 114rem;
}
@media (min-width: 48em) {
  .content-feed__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 80em) {
  .content-feed__header {
    margin-bottom: 6.4rem;
  }
}
.content-feed__title {
  margin-bottom: 1.5rem;
  text-transform: var(--contentFeedTitleTextTransform);
}
@media (min-width: 48em) {
  .content-feed__title {
    margin: 0;
  }
}
.content-feed__title .styled--dark {
  color: var(--colorTextInverted);
}
.content-feed__filters {
  align-items: flex-end;
  display: flex;
  flex-flow: row wrap;
  margin: 0 -1.5rem;
}
.content-feed__filter {
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  margin-bottom: 1.5rem;
}
.section--inverted .content-feed__filter .btn--primary {
  border-color: var(--colorTextInverted);
}
.content-feed__list {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -1.5rem;
}
.content-feed__item {
  flex-basis: 100%;
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  margin-bottom: 3rem;
}
.content-feed--inverted .content-feed__item {
  color: var(--colorTextInverted);
}
@media (min-width: 80em) {
  .content-feed__list--two-cols .content-feed__item {
    flex-basis: 50%;
  }
}
@media (min-width: 80em) {
  .constrain--extra-thin .content-feed__list--two-cols .content-feed__item {
    flex-basis: 100%;
  }
}
@media (min-width: 64em) {
  .content-feed__list--three-cols .content-feed__item {
    flex-basis: 33.33%;
  }
}
@media (min-width: 64em) {
  .constrain--extra-thin .content-feed__list--three-cols .content-feed__item {
    flex-basis: 100%;
  }
}
@media (min-width: 48em) {
  .content-feed__list--four-cols .content-feed__item {
    flex-basis: 50%;
  }
}
@media (min-width: 80em) {
  .content-feed__list--four-cols .content-feed__item {
    flex-basis: 25%;
  }
}
@media (min-width: 80em) {
  .constrain--thin .content-feed__list--four-cols .content-feed__item {
    flex-basis: 50%;
  }
}
@media (min-width: 48em) {
  .constrain--extra-thin .content-feed__list--four-cols .content-feed__item {
    flex-basis: 100%;
  }
}
@media (min-width: 80em) {
  .constrain--extra-thin .content-feed__list--four-cols .content-feed__item {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   #COOKIE CONTROL
   ========================================================================== */
/* ==========================================================================
   #COOKIE CONTROL/DEFAULT
   ========================================================================== */
.cookie-control .checkboxes {
  padding: 0;
}
.cookie-control .checkboxes__item {
  margin-bottom: 0;
}

/**
 * 1. Overrides any custom margin set on heading element.
 */
.cookie-control__title {
  margin: 0 0 1.5rem 0;
  /* 1. */
}

.cookie-control__intro {
  display: block;
}
.is-more-info .cookie-control__intro {
  display: none;
}

.cookie-control__more-info {
  display: none;
}
.is-more-info .cookie-control__more-info {
  display: block;
}

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

/* ==========================================================================
   #EDITOR-TOOLBAR
   ========================================================================== */
/* ==========================================================================
   #EDITOR-TOOLBAR/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #EDITOR-TOOLBAR/DEFAULT
   ========================================================================== */
.editor-toolbar {
  bottom: 0;
  left: 0;
  padding: 1.5rem;
  position: fixed;
  width: 100%;
  z-index: 150;
  background-color: var(--colorBlack);
  color: var(--colorWhite);
}
@media (min-width: 48em) {
  .editor-toolbar {
    bottom: 1.5rem;
    left: 1.5rem;
    max-width: 40rem;
    width: auto;
    border-radius: 6px;
  }
}

.editor-toolbar__content {
  margin-left: auto;
  margin-right: auto;
  max-width: 114rem;
}

/* ==========================================================================
   #EMBED
   ========================================================================== */
/* ==========================================================================
   #EMBED/DEFAULT
   ========================================================================== */
.embed {
  display: block;
  margin-bottom: 1.5rem;
}

.embed__source {
  margin-bottom: 0.75rem;
}
.embed__source > embed,
.embed__source > iframe,
.embed__source > object,
.embed__source > video {
  width: 100%;
}

.embed__caption {
  font-style: italic;
}

/* ==========================================================================
   #EMBED/RATIO 4:3
   ========================================================================== */
/**
 * Embedding third party content responsively.
 * Source: https://embedresponsively.com/
 */
.embed--ratio-4-3 .embed__source {
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 75%;
  position: relative;
}
.embed--ratio-4-3 .embed__source > embed,
.embed--ratio-4-3 .embed__source > iframe,
.embed--ratio-4-3 .embed__source > object,
.embed--ratio-4-3 .embed__source > video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

/* ==========================================================================
   #EMBED/RATIO 16:9
   ========================================================================== */
/**
 * Embedding third party content responsively.
 * Source: https://embedresponsively.com/
 */
.embed--ratio-16-9 .embed__source {
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}
.embed--ratio-16-9 .embed__source > embed,
.embed--ratio-16-9 .embed__source > iframe,
.embed--ratio-16-9 .embed__source > object,
.embed--ratio-16-9 .embed__source > video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

/* ==========================================================================
   #FLOW
   ========================================================================== */
/**
 * Component that controls layout of content defined when using the
 * Orchard Core flow editor.
 */
/* ==========================================================================
   #FLOW/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #FLOW/DEFAULT
   ========================================================================== */
/* 
 * 1. For when content is directly added without a section. Ensures
 *    non-full-width content (e.g paragraph) does not touch sides of viewport.
 * 2. Breakout behaviour for full width elements, to ensure they do touch sides
 * 3. Resets the above 'breakout behaviour' if inside a section. So you can put
 *    a hero or carousel inside a section and have it respect layout width, if
 *    desired.
 */
.flow {
  margin-left: auto;
  margin-right: auto;
  max-width: 67.6rem;
  width: 100%;
  /* 1 */
  /* 2 */
}
article > .flow, main > .flow {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (min-width: 80em) {
  article > .flow, main > .flow {
    padding-left: 0;
    padding-right: 0;
  }
}
.flow .width--100 {
  /* 3 */
}
.flow .width--100 > .hero,
.flow .width--100 > .section,
.flow .width--100 > .carousel,
.flow .width--100 > .image--responsive {
  left: 50%;
  margin-left: calc(-50vw + var(--scrollbarWidth) / 2);
  margin-right: calc(-50vw + var(--scrollbarWidth) / 2);
  position: relative;
  right: 50%;
  width: calc(100vw - var(--scrollbarWidth));
}
.flow .width--100 > .hero .flow,
.flow .width--100 > .section .flow,
.flow .width--100 > .carousel .flow,
.flow .width--100 > .image--responsive .flow {
  max-width: none;
}
.flow .width--100 .section .hero,
.flow .width--100 .section .carousel,
.flow .width--100 .section .image--responsive {
  left: auto;
  margin-left: 0;
  margin-right: 0;
  right: auto;
  width: auto;
}

.flow__content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -3rem;
}
.flow__content > * {
  padding: 0 0 0 3rem;
}

/* ==========================================================================
   #FOOTER
   ========================================================================== */
/* ==========================================================================
   #FOOTER/VARIABLES
   ========================================================================== */
:root {
  --footerBackgroundColor: transparent;
  --footerBackgroundPattern: none;
  --footerColorInverted: var(--colorTextInverted);
  --footerColorInvertedActive: var(--colorPrimary);
  --footerFontSize: var(--fontSizeSmall);
  --footerHeadingFontSize: var(--fontSizeBase);
  --footerPaddingVertical: 8rem;
}

/* ==========================================================================
   #FOOTER/DEFAULT
   ========================================================================== */
.footer {
  padding-bottom: var(--footerPaddingVertical);
  padding-top: var(--footerPaddingVertical);
  background-color: var(--footerBackgroundColor);
  background-image: var(--footerBackgroundPattern);
  background-repeat: repeat;
  font-size: var(--footerFontSize);
}
.styled--dark .footer, .footer--inverted {
  color: var(--footerColorInverted);
}
.styled--dark .footer a, .footer--inverted a {
  color: var(--footerColorInverted);
}
.styled--dark .footer a:focus, .styled--dark .footer a:hover, .footer--inverted a:focus, .footer--inverted a:hover {
  color: var(--footerColorInvertedActive);
}
.footer__content {
  display: flex;
  flex-flow: column-reverse wrap;
  padding-bottom: 3rem;
  padding-top: 2rem;
}
@media (min-width: 48em) {
  .footer__content {
    align-items: flex-start;
    flex-flow: row;
    justify-content: space-between;
  }
}
.footer__meta {
  width: 100%;
}
@media (min-width: 48em) {
  .footer__meta {
    margin-top: 1.5rem;
  }
}
.footer__logo {
  display: block;
  margin-bottom: 1.5rem;
  margin-right: auto;
  max-width: 10rem;
  position: relative;
  width: 100%;
  z-index: 100;
}
@media (min-width: 48em) {
  .footer__logo {
    max-width: 15rem;
  }
}
.footer__logo img {
  display: block;
}
.footer nav, .footer__nav {
  border-top: 0;
  margin-bottom: 2rem;
  width: 100%;
  z-index: 1;
  background-color: transparent;
}
@media (min-width: 48em) {
  .footer nav, .footer__nav {
    margin-bottom: 0;
    width: auto;
  }
}
.footer h2,
.footer h3,
.footer h4 {
  font-size: var(--footerHeadingFontSize);
}
.footer p {
  font-size: var(--footerFontSize);
}
.footer ul > li {
  margin-bottom: 0;
}
.footer .image {
  display: inline-block;
  vertical-align: middle;
}
.footer .image img {
  display: block;
  margin-bottom: 3.2rem;
  margin-right: 3.2rem;
  margin-top: 3.2rem;
}
@media (min-width: 64em) {
  .footer .image img {
    margin-top: 0;
  }
}

/* ==========================================================================
   #FORM
   ========================================================================== */
/**
 * Various styles related to forms.
 */
/* ==========================================================================
   #FORM/CHECKBOXES
   ========================================================================== */
.checkboxes {
  display: block;
  padding: 0 2.4rem;
}
.checkboxes__item {
  display: block;
  margin-bottom: 1.5rem;
  position: relative;
}
.checkboxes--inline .checkboxes__item {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 1.5rem;
}
.checkboxes__label {
  display: inline-block;
  margin-bottom: 0;
  padding-left: 3rem;
  font-family: var(--fontFamilyDefault);
  font-size: var(--fontSizeDefault);
  font-weight: var(--fontWeightDefault);
  cursor: pointer;
  touch-action: manipulation;
}
.checkboxes__label:before {
  border: 0.2rem solid var(--colorGreyLight);
  box-sizing: border-box;
  height: 2.2rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 2.2rem;
  background: var(--colorGreyLight);
  content: "";
}
.checkboxes__label:after {
  height: 0.7rem;
  left: 0.5rem;
  position: absolute;
  top: 0.6rem;
  width: 1.2rem;
  background: transparent;
  border: solid;
  border-width: 0 0 0.3rem 0.3rem;
  border-top-color: transparent;
  transform: rotate(-45deg);
  opacity: 0;
  content: "";
}
.checkboxes__input {
  height: 2.2rem;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 2.2rem;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  /* Make check icon visible */
  /* Change checkbox border colour when checked */
  /* Show focus colour */
}
.checkboxes__input:checked + .checkboxes__label:after {
  opacity: 1;
}
.checkboxes__input:checked + .checkboxes__label:before {
  border-color: var(--colorTextDefault);
}
.checkboxes__input:focus + .checkboxes__label::before {
  border: 0.2rem solid var(--colorTextDefault);
  box-shadow: 0 0 6px 1px var(--colorPrimary);
}

/* ==========================================================================
   #FORM/FIELDSET
   ========================================================================== */
.fieldset__heading {
  margin-bottom: 0;
}

/* ==========================================================================
   #FORM/FORM-GROUP
   ========================================================================== */
.form-group {
  margin-bottom: 3.2rem;
  width: 100%;
}

/* ==========================================================================
   #FORM/FORM
   ========================================================================== */
.form--centered .btn, .form--centered #ccc #ccc-module .ccc-notify-button, #ccc #ccc-module .form--centered .ccc-notify-button {
  display: block;
  margin: 0 auto;
}
.form--horizontal {
  display: flex;
}
.form--horizontal > * {
  margin-right: 1.5rem;
}
.form--horizontal > *:last-child {
  margin-right: 0;
}

/* ==========================================================================
   #FORM/INPUT
   ========================================================================== */
.input--underlined {
  border-bottom: 0.2rem solid var(--colorTextDefault);
}

/* ==========================================================================
   #FORM/RADIOS
   ========================================================================== */
.radios {
  display: block;
  padding: 0 2.4rem;
}
.radios__item {
  display: block;
  margin-bottom: 1.5rem;
  position: relative;
}
.radios--inline .radios__item {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 1.5rem;
}
.radios__label {
  display: inline-block;
  margin-bottom: 0;
  padding-left: 3rem;
  font-family: var(--fontFamilyDefault);
  font-size: var(--fontSizeDefault);
  font-weight: var(--fontWeightDefault);
  cursor: pointer;
  touch-action: manipulation;
}
.radios__label:before {
  border: 0.2rem solid var(--colorGreyLight);
  box-sizing: border-box;
  height: 2.2rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 2.2rem;
  background: var(--colorGreyLight);
  border-radius: 50%;
  content: "";
}
.radios__label:after {
  border: 0.6rem solid var(--colorTextDefault);
  height: 0;
  left: 0.5rem;
  position: absolute;
  top: 0.5rem;
  width: 0;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
  content: "";
}
.radios__input {
  height: 2.2rem;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 2.2rem;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  /* Make check icon visible */
  /* Change radio border colour when checked */
  /* Show focus colour */
}
.radios__input:checked + .radios__label:after {
  opacity: 1;
}
.radios__input:checked + .radios__label:before {
  border-color: var(--colorTextDefault);
}
.radios__input:focus + .radios__label::before {
  border: 0.2rem solid var(--colorTextDefault);
  box-shadow: 0 0 6px 1px var(--colorPrimary);
}

/* ==========================================================================
   #FORM/REQUIRED
   ========================================================================== */
.required {
  color: var(--colorPrimary);
}

/* ==========================================================================
   #GALLERY
   ========================================================================== */
/* ==========================================================================
   #GALLERY/VARIABLES
   ========================================================================== */
:root {
  --galleryBorderRadius: 1rem;
  --galleryGutter: 2rem;
  --galleryGutterSmall: 1.5rem;
}

/* ==========================================================================
   #GALLERY/DEFAULT
   ========================================================================== */
.gallery {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--galleryGutterSmall) / 2 * -1);
  margin-right: calc(var(--galleryGutterSmall) / 2 * -1);
  /**
   * 1. Remove tiny gap that can occur when images aren't block.
   */
  /**
   * 1. Overrides list reset padding-left style
   * 2. Works like .embed with 4:3 ratio
   */
}
.gallery > li {
  padding-left: initial;
}
.gallery > li:before {
  display: none;
}
@media (min-width: 23.4375em) {
  .gallery {
    margin-left: calc(var(--galleryGutter) / 2 * -1);
    margin-right: calc(var(--galleryGutter) / 2 * -1);
  }
}
.gallery img {
  display: block;
  /* 1. */
  border-radius: var(--galleryBorderRadius);
}
.gallery > li, .gallery__item {
  margin-bottom: var(--galleryGutterSmall);
  padding-left: calc(var(--galleryGutterSmall) / 2);
  padding-right: calc(var(--galleryGutterSmall) / 2);
  width: 50%;
}
@media (min-width: 37.5em) {
  .gallery > li, .gallery__item {
    width: 33.3%;
  }
}
@media (min-width: 48em) {
  .gallery > li, .gallery__item {
    width: 25%;
  }
}
@media (min-width: 23.4375em) {
  .gallery > li, .gallery__item {
    margin-bottom: var(--galleryGutter);
    padding-left: calc(var(--galleryGutter) / 2);
    padding-right: calc(var(--galleryGutter) / 2);
  }
}
.gallery > li a, .gallery__item a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 75%;
  /* 2. */
  position: relative;
}
.gallery > li img, .gallery__item img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ==========================================================================
   #GRID
   ========================================================================== */
/* ==========================================================================
   #GRID/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #GRID/DEFAULT
   ========================================================================== */
/**
 * The default implementation uses a 3 column grid on desktop.
 */
.grid {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-left: -2rem;
  margin-right: -2rem;
  list-style: none;
}
.grid > li {
  padding-left: initial;
}
.grid > li:before {
  display: none;
}

.grid__item {
  margin-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%;
}
@media (min-width: 37.5em) {
  .grid__item {
    max-width: 50%;
  }
}
@media (min-width: 64em) {
  .grid__item {
    max-width: 33.333%;
  }
}

/* ==========================================================================
   #GRID/DOUBLE
   ========================================================================== */
/**
 * Creates a 2 column grid.
 */
@media (min-width: 37.5em) {
  .grid--double .grid__item {
    max-width: 50%;
  }
}

/* ==========================================================================
   #GRID/QUAD
   ========================================================================== */
/**
 * Creates a 4 column grid.
 */
@media (min-width: 37.5em) {
  .grid--quad .grid__item {
    max-width: 50%;
  }
}
@media (min-width: 64em) {
  .grid--quad .grid__item {
    max-width: 25%;
  }
}

/* ==========================================================================
   #GRID/GUTTER-LARGE
   ========================================================================== */
/**
 * Increases the gutter size between grid items
 */
.grid--gutter-large {
  margin-left: -5rem;
  margin-right: -5rem;
}
.grid--gutter-large .grid__item {
  margin-bottom: 10rem;
  padding-left: 5rem;
  padding-right: 5rem;
}

/* ==========================================================================
   #GRID/GUTTER-SMALL
   ========================================================================== */
/**
 * Reduces the gutter size between grid items
 */
.grid--gutter-small {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.grid--gutter-small .grid__item {
  margin-bottom: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ==========================================================================
   #GRID/NO-GUTTER
   ========================================================================== */
/**
 * Removes negative margins from the grid and padding from the grid items.
 */
.grid--no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.grid--no-gutter .grid__item {
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   #GRID/NO-WRAP
   ========================================================================== */
/**
 * Prevents grid columns from wrapping.
 */
.grid--no-wrap {
  flex-wrap: nowrap;
}

/* ==========================================================================
   #GRID/ROW-REVERSE
   ========================================================================== */
/**
 * Reverses the flex row ordering
 */
.grid--row-reverse {
  flex-direction: row-reverse;
}

/* ==========================================================================
   #GROUP
   ========================================================================== */
/* ==========================================================================
   #GROUP/VARIABLES
   ========================================================================== */
:root {
  --groupBackgroundColor: transparent;
  --groupBackgroundPattern: none;
}

/* ==========================================================================
   #GROUP/DEFAULT
   ========================================================================== */
.group {
  background-color: var(--groupBackgroundColor);
  background-image: var(--groupBackgroundPattern);
}
.styled--dark .group, .group--inverted {
  color: var(--colorTextInverted);
}

/* ==========================================================================
   #HEADER
   ========================================================================== */
/* ==========================================================================
   #HEADER/VARIABLES
   ========================================================================== */
:root {
  --headerBackgroundColor: transparent;
  --headerBackgroundPattern: none;
  --headerBackgroundPosition: initial;
  --headerBackgroundRepeat: repeat;
  --headerBackgroundSize: initial;
  --headerBackgroundSizeTablet: var(--headerBackgroundSize);
  --headerContentAlignItems: center;
  --headerContentHeight: 8rem;
  --headerContentHeightTablet: 10rem;
  --headerContentPadding: 0;
  --headerContentPaddingTablet: var(--headerContentPadding);
  --headerGroupNavigationBackgroundColor: var(--headerBackgroundColor);
  --headerGroupNavigationBackgroundPattern: var(--headerBackgroundPattern);
  --headerGroupNavigationDistance: 0rem;
  --headerGroupNavigationLeftTablet: 0;
  --headerGroupNavigationSpacing: 2rem;
  --headerGroupNavigationOpacity: 0.5;
  --headerInvertedBackgroundPattern: none;
  --headerInvertedMobileBackgroundColor: var(--headerMobileBackgroundColor);
  --headerInvertedNavBackgroundColor: transparent;
  --headerInvertedNavBackgroundImage: var(--headerNavBackgroundImage);
  --headerLogoAlignSelfTablet: center;
  --headerLogoDisplay: block;
  --headerLogoDisplayTablet: var(--headerLogoDisplay);
  --headerLogoMargin: 0 auto 0 0;
  --headerLogoMarginTablet: var(--headerLogoMargin);
  --headerLogoMaxHeight: 5rem;
  --headerLogoMaxHeightTablet: 6rem;
  --headerLogoMaxWidth: 10rem;
  --headerLogoMaxWidthTablet: 15rem;
  --headerMobileBackgroundColor: var(--colorGreyLight);
  --headerMobileBackgroundPattern: none;
  --headerNavBackgroundColor: transparent;
  --headerNavBackgroundImage: none;
  --headerNavBackgroundPosition: initial;
  --headerNavBackgroundRepeat: initial;
  --headerNavBackgroundSize: initial;
  --headerNavBorderTopColor: var(--colorWhite);
  --headerNavBtnAfterOffset: -1rem;
  --headerNavBtnBeforeMarginRight: 0.6rem;
  --headerNavBtnHeight: 2.4rem;
  --headerNavBtnWidth: 2.4rem;
  --headerNavBtnMargin: 0;
  --headerNavBtnPadding: 0;
  --headerNavDisplayTablet: flex;
  --headerNavFlexFlowTablet: row-reverse;
  --headerNavJustifyContentTablet: initial;
  --headerNavPaddingTop: var(--headerContentHeight);
  --headerNavWidthTablet: auto;
}

/* ==========================================================================
   #HEADER/DEFAULT
   ========================================================================== */
/**
 * 1. Prevents navigation submenus from appearing below any other z-indexed
 *    components.
 */
.header {
  position: relative;
  /* 1. */
  z-index: 100;
  /* 1. */
  background-color: var(--headerBackgroundColor);
  background-image: var(--headerBackgroundPattern);
  background-position: var(--headerBackgroundPosition);
  background-repeat: var(--headerBackgroundRepeat);
  background-size: var(--headerBackgroundSize);
}
.header--inverted, .styled--dark .header {
  background-image: var(--headerInvertedBackgroundPattern);
}
@media (min-width: 48em) {
  .header {
    background-size: var(--headerBackgroundSizeTablet);
  }
}
.header__content {
  align-items: var(--headerContentAlignItems);
  display: flex;
  flex-flow: row wrap;
  height: var(--headerContentHeight);
  padding: var(--headerContentPadding);
}
@media (min-width: 48em) {
  .header__content {
    height: var(--headerContentHeightTablet);
    padding: var(--headerContentPaddingTablet);
  }
}
.header__logo-area {
  align-items: center;
  display: flex;
  flex-flow: row;
  margin-right: auto;
  position: relative;
}
.header__logo {
  display: var(--headerLogoDisplay);
  margin: var(--headerLogoMargin);
  max-width: var(--headerLogoMaxWidth);
  position: relative;
  width: 100%;
  z-index: 100;
}
@media (min-width: 48em) {
  .header__logo {
    align-self: var(--headerLogoAlignSelfTablet);
    display: var(--headerLogoDisplayTablet);
    margin: var(--headerLogoMarginTablet);
    max-width: var(--headerLogoMaxWidthTablet);
  }
}
.header__logo img {
  display: block;
  max-height: var(--headerLogoMaxHeight);
}
@media (min-width: 48em) {
  .header__logo img {
    max-height: var(--headerLogoMaxHeightTablet);
  }
}
.header__logo--inverted {
  display: none;
}
.styled--dark .header__logo--inverted {
  display: var(--headerLogoDisplay);
}
.header__logo--default {
  display: var(--headerLogoDisplay);
}
.styled--dark .header__logo--default {
  display: none;
}
.header__group-navigation-toggle {
  border: 0;
  margin-left: var(--headerGroupNavigationSpacing);
  padding: 0;
  color: var(--navColor);
  background: transparent;
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH4Mobile);
  font-weight: var(--fontWeightBold);
  letter-spacing: var(--letterSpacingHeading);
  line-height: var(--lineHeightHeading);
  cursor: pointer;
  opacity: var(--headerGroupNavigationOpacity);
}
@media (min-width: 80em) {
  .header__group-navigation-toggle {
    font-size: var(--fontSizeH4);
  }
}
.header__group-navigation-toggle:hover {
  opacity: 1;
}
.styled--dark .header__group-navigation-toggle, [class$="--inverted"] .header__group-navigation-toggle {
  color: var(--navColorInverted);
}
.header__group-navigation {
  display: none;
  left: 0;
  margin-left: calc(var(--headerGroupNavigationSpacing) * -1);
  margin-top: var(--headerGroupNavigationDistance);
  position: absolute;
  top: 100%;
  background-color: var(--headerGroupNavigationBackgroundColor);
  background-image: var(--headerGroupNavigationBackgroundPattern);
  background-repeat: repeat;
}
@media (min-width: 48em) {
  .header__group-navigation {
    left: var(--headerGroupNavigationLeftTablet);
  }
}
.is-group-nav-visible .header__group-navigation {
  display: block;
}
.header__nav-button {
  align-items: center;
  display: flex;
  cursor: pointer;
  margin: var(--headerNavBtnMargin);
  padding: var(--headerNavBtnPadding);
  position: relative;
  z-index: 100;
  background-color: transparent;
  border: 0;
}
@media (min-width: 64em) {
  .header__nav-button {
    display: none;
  }
}
.header__nav-button:after {
  bottom: var(--headerNavBtnAfterOffset);
  content: "";
  left: var(--headerNavBtnAfterOffset);
  right: var(--headerNavBtnAfterOffset);
  top: var(--headerNavBtnAfterOffset);
  position: absolute;
}
.header__nav-button:before {
  content: "";
  height: var(--headerNavBtnHeight);
  margin-right: var(--headerNavBtnBeforeMarginRight);
  width: var(--headerNavBtnWidth);
  background-image: url("../content/icon-menu.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}
.header__nav-button--close {
  display: none;
}
.header__nav-button--close:before {
  background-image: url("../content/icon-close.svg");
}
.styled--dark .header__nav-button, [class$="--inverted"] .header__nav-button {
  color: var(--colorTextInverted);
}
.styled--dark .header__nav-button:before, [class$="--inverted"] .header__nav-button:before {
  background-image: url("../content/icon-menu-white.svg");
}
.styled--dark .header__nav-button--close:before, [class$="--inverted"] .header__nav-button--close:before {
  background-image: url("../content/icon-close-white.svg");
}
.header__nav {
  display: none;
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: var(--headerMobileBackgroundColor);
  background-image: var(--headerMobileBackgroundPattern);
  border-top-color: var(--headerNavBorderTopColor);
  border-top-style: solid;
  border-top-width: var(--headerNavPaddingTop);
}
@media (min-width: 64em) {
  .header__nav {
    align-items: center;
    border-top: 0;
    display: var(--headerNavDisplayTablet);
    flex-flow: var(--headerNavFlexFlowTablet);
    height: auto;
    justify-content: var(--headerNavJustifyContentTablet);
    padding-top: 0;
    position: static;
    width: var(--headerNavWidthTablet);
    background-color: var(--headerNavBackgroundColor);
    background-image: var(--headerNavBackgroundImage);
    background-position: var(--headerNavBackgroundPosition);
    background-repeat: var(--headerNavBackgroundRepeat);
    background-size: var(--headerNavBackgroundSize);
  }
}
.styled--dark .header__nav, [class$="--inverted"] .header__nav {
  background-color: var(--headerInvertedMobileBackgroundColor);
  border-top-color: var(--headerBackgroundColor);
  color: var(--colorTextInverted);
}
@media (min-width: 48em) {
  .styled--dark .header__nav, [class$="--inverted"] .header__nav {
    background-color: var(--headerInvertedNavBackgroundColor);
    background-image: var(--headerInvertedNavBackgroundImage);
  }
}

.is-nav-visible .header__nav {
  display: block;
}
@media (min-width: 64em) {
  .is-nav-visible .header__nav {
    display: var(--headerNavDisplayTablet);
  }
}
.is-nav-visible .header__nav-button {
  display: none;
}
.is-nav-visible .header__nav-button--close {
  display: flex;
}
@media (min-width: 64em) {
  .is-nav-visible .header__nav-button--close {
    display: none;
  }
}

/* ==========================================================================
   #HEADER/FIXED
   ========================================================================== */
.header--fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
}

/* ==========================================================================
   #HERO
   ========================================================================== */
/* ==========================================================================
   #HERO/VARIABLES
   ========================================================================== */
:root {
  --heroBackgroundColor: transparent;
  --heroBodyPadding: 4.7rem;
  --heroColor: var(--colorBlack);
  --heroColorInverted: var(--colorTextInverted);
  --heroGradientHeight: 13rem;
  --heroHeadingMarginBottom: 3.2rem;
  --heroHeadingTextTransform: uppercase;
  --heroMediaMinHeight: 50rem;
  --heroPullDistance: 8rem;
  --heroSpacingAfterLarge: 9rem;
  --heroSpacingAfterLargeMobile: 6rem;
  --heroZIndex: 1;
}
@media (min-width: 48em) {
  :root {
    --heroPullDistance: 10rem;
  }
}

/* ==========================================================================
   #HERO/DEFAULT
   ========================================================================== */
/**
  * 1. "Pull up" drags the hero up so that it sits behind a header.
  *    We add to the body padding accordingly so that content 'feels' centered
  * 2. Alignment options provided to the CMS user allow for 9 possible layouts.
  *    Top left, top center, top right, center left, true center, center right,
  *    bottom left, bottom center and bottom right. Independent of text align.
  * 3. If the layout options and presence of scroll encouragement cause a
  *    potential clash, double up the spacing to leave room for the latter.
  * 4. The rough space of a spacebar push, ensures that despite liquid output,
  *    anything with a span wrapped is appropriately spaced to the next item
  * 5. Vertically center the embed if it is taller than .hero__media
  * 6. Default heroes (heroes that exist without being explicitly created)
  *    may sometimes not have an image in them. So we apply background
  *    colour depending on the inversion, and a minimum height
  * 7. Default heroes have a z-index of 1 to ensure that their background is
  *    visible when nested inside a section that also has a background. We
  *    reset the hero z-index when the pull up class is applied so that the 
  *    hero appears underneath the content above (the intended behaviour). 
  */
.hero {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: var(--heroZIndex);
  color: var(--heroColor);
  /* 1. */
  /* 2. */
}
.styled--dark .hero, .hero--inverted {
  color: var(--heroColorInverted);
}
.hero--pull-up {
  margin-top: calc(var(--heroPullDistance) * -1);
  z-index: initial;
  /* 7. */
}
.hero--pull-up .hero__body {
  padding-top: calc(var(--heroPullDistance) + var(--heroBodyPadding));
}
.hero--horizontal-left .width--20 {
  margin-right: auto;
}
.hero--horizontal-left .width--25 {
  margin-right: auto;
}
.hero--horizontal-left .width--33 {
  margin-right: auto;
}
.hero--horizontal-left .width--40 {
  margin-right: auto;
}
.hero--horizontal-left .width--50 {
  margin-right: auto;
}
.hero--horizontal-left .width--60 {
  margin-right: auto;
}
.hero--horizontal-left .width--66 {
  margin-right: auto;
}
.hero--horizontal-left .width--75 {
  margin-right: auto;
}
.hero--horizontal-left .width--80 {
  margin-right: auto;
}
.hero--horizontal-center .width--20 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--25 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--33 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--40 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--50 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--60 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--66 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--75 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-center .width--80 {
  margin-left: auto;
  margin-right: auto;
}
.hero--horizontal-right .width--20 {
  margin-left: auto;
}
.hero--horizontal-right .width--25 {
  margin-left: auto;
}
.hero--horizontal-right .width--33 {
  margin-left: auto;
}
.hero--horizontal-right .width--40 {
  margin-left: auto;
}
.hero--horizontal-right .width--50 {
  margin-left: auto;
}
.hero--horizontal-right .width--60 {
  margin-left: auto;
}
.hero--horizontal-right .width--66 {
  margin-left: auto;
}
.hero--horizontal-right .width--75 {
  margin-left: auto;
}
.hero--horizontal-right .width--80 {
  margin-left: auto;
}
.hero--spaced-after-large {
  margin-bottom: var(--heroSpacingAfterLargeMobile);
}
@media (min-width: 80em) {
  .hero--spaced-after-large {
    margin-bottom: var(--heroSpacingAfterLarge);
  }
}
.hero--vertical-top {
  align-items: flex-start;
}
.hero--vertical-center {
  align-items: center;
}
.hero--vertical-bottom {
  align-items: flex-end;
}
.hero__body {
  position: absolute;
  padding: var(--heroBodyPadding) 0;
  /* 3. */
}
.hero--vertical-bottom.hero--with-scroll-encouragement .hero__body {
  padding-bottom: calc(var(--heroBodyPadding) * 2);
}
.width--20 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--25 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--33 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--40 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--50 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--60 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--66 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--75 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.width--80 .hero__body {
  padding-left: var(--heroBodyPadding);
  padding-right: var(--heroBodyPadding);
}
.hero__meta {
  display: block;
  margin-bottom: 3.2rem;
  color: var(--colorTextLight);
  font-family: var(----fontFamilyHeading);
  font-weight: var(--cardMetaWeight);
  text-transform: var(--cardMetaTextTransform);
}
.hero--inverted .hero__meta {
  color: var(--colorTextLighter);
}
.hero__meta:last-child {
  margin-bottom: 0;
}
.hero__meta span {
  margin-left: 0.2em;
  /* 4 */
}
.hero__meta a {
  color: var(--colorTextLight);
}
.hero--inverted .hero__meta a {
  color: var(--colorTextLighter);
}
.hero__media {
  align-items: center;
  /* 5. */
  background: var(--heroBackgroundColor);
  display: flex;
  justify-content: center;
  min-width: auto;
  position: relative;
  width: 100%;
  z-index: -100;
  overflow: hidden;
}
@media (min-width: 48em) {
  .hero__media {
    min-width: auto;
  }
}
.hero--default .hero__media, .hero--embed .hero__media {
  min-height: var(--heroMediaMinHeight);
}
.hero--default .hero__media {
  background: var(--colorTextLighter);
}
.hero--default.hero--inverted .hero__media {
  background: var(--colorBlack);
}
.hero__media .width--20 {
  min-height: 0;
}
.hero__media .width--25 {
  min-height: 0;
}
.hero__media .width--33 {
  min-height: 0;
}
.hero__media .width--40 {
  min-height: 0;
}
.hero__media .width--50 {
  min-height: 0;
}
.hero__media .width--60 {
  min-height: 0;
}
.hero__media .width--66 {
  min-height: 0;
}
.hero__media .width--75 {
  min-height: 0;
}
.hero__media .width--80 {
  min-height: 0;
}
.hero__media .embed {
  margin-bottom: 0;
  position: absolute;
  width: 100%;
}
@media (min-width: 64em) {
  .hero__media .embed {
    position: relative;
  }
}
.hero__media .embed__source {
  margin-bottom: 0;
}
.hero__media .embed--ratio-16-9 {
  width: 278%;
}
@media (min-width: 23.4375em) {
  .hero__media .embed--ratio-16-9 {
    width: 240%;
  }
}
@media (min-width: 26.5625em) {
  .hero__media .embed--ratio-16-9 {
    width: 215%;
  }
}
@media (min-width: 37.5em) {
  .hero__media .embed--ratio-16-9 {
    width: 150%;
  }
}
@media (min-width: 48em) {
  .hero__media .embed--ratio-16-9 {
    width: 117%;
  }
}
@media (min-width: 64em) {
  .hero__media .embed--ratio-16-9 {
    width: 100%;
  }
}
.hero__media picture,
.hero__media img {
  width: 100%;
}
@media (max-width: 89.99em) {
  .hero--default .hero__media picture {
    height: 100%;
    position: absolute;
    width: 100%;
  }
  .hero--default .hero__media img {
    left: 50%;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }
}
.hero--with-media-gradient .hero__media:before, .hero--with-media-gradient .hero__media:after {
  content: " ";
  height: var(--heroGradientHeight);
  position: absolute;
  width: 100%;
  z-index: 2;
}
.hero--with-media-gradient .hero__media:before {
  left: 0;
  top: 0;
  background: linear-gradient(180deg, #0b0b0b 0%, rgba(11, 11, 11, 0) 100%);
}
.hero--with-media-gradient .hero__media:after {
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.5) 100%);
}
.hero__bleed {
  left: 0;
  position: absolute;
  width: 100%;
}
.hero__bleed--in {
  top: 0;
}
.hero__bleed--out {
  bottom: 0;
}
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5 {
  margin-bottom: var(--heroHeadingMarginBottom);
}
.hero h1,
.hero h2 {
  text-transform: var(--heroHeadingTextTransform);
}

/* ==========================================================================
   #HINT
   ========================================================================== */
/* ==========================================================================
   #HINT/DEFAULT
   ========================================================================== */
/* Used primarily for forms and providing further context to a fieldset */
.hint {
  display: block;
  margin-bottom: 1.5rem;
  padding: 0 2.4rem;
  color: var(--colorTextLight);
}

/* ==========================================================================
   #ICON
   ========================================================================== */
/* ==========================================================================
   #ICON/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #ICON/DEFAULT
   ========================================================================== */
.icon {
  display: inline-block;
}

/* ==========================================================================
   #ICON/FLAG
   ========================================================================== */
.icon--flag {
  margin-right: 0.5rem;
  width: 2rem;
  border-radius: 0.3rem;
}

/* ==========================================================================
   #IMAGE
   ========================================================================== */
/* ==========================================================================
   #IMAGE/DEFAULT
   ========================================================================== */
.image {
  display: block;
}
.image img {
  display: block;
}
.image--responsive img {
  width: 100%;
}

/* ==========================================================================
   #INFORMATION
   ========================================================================== */
/* ==========================================================================
   #INFORMATION/VARIABLES
   ========================================================================== */
:root {
  --informationBackgroundColor: transparent;
  --informationBackgroundPattern: none;
  --informationBorderRadius: 1rem;
}

/* ==========================================================================
   #INFORMATION/DEFAULT
   ========================================================================== */
.information {
  border-radius: var(--informationBorderRadius);
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  background-color: var(--informationBackgroundColor);
  background-image: var(--informationBackgroundPattern);
  overflow: hidden;
}
.styled--dark .information, .information--inverted {
  color: var(--colorTextInverted);
}
.information__list {
  margin: 0 -1.5rem;
}
.information__list-item {
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  display: block;
  margin-bottom: 1.5rem;
}
@media (min-width: 48em) {
  .information__list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
}
@media (min-width: 48em) and (min-width: 64em) {
  .width--20 .information__list, .width--25 .information__list, .width--33 .information__list {
    display: block;
  }
}
.information__key {
  display: block;
  font-weight: var(--fontWeightBold);
}
.information__value {
  display: block;
}

/* ==========================================================================
   #LIGHTGALLERY
   ========================================================================== */
/* ==========================================================================
   #LIGHTGALLERY/VARIABLES
   ========================================================================== */
:root {
  --lightGalleryVideoMaxWidth: 70rem;
}

/* ==========================================================================
   #LIGHTGALLERY/DEFAULT
   ========================================================================== */
/**
 * 1. Makes video container smaller so that controls don't disappear off screen
 */
.lg-outer .lg-video-cont {
  max-width: var(--lightGalleryVideoMaxWidth) !important;
  /* 1. */
}

/* ==========================================================================
   #LINK
   ========================================================================== */
/* ==========================================================================
   #LINK/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #LINK/DEFAULT
   ========================================================================== */
/*
 * 1. When link widgets (often styled as buttons) are put directly into flows,
 *    they can sit side by side in width divs - but stack on mobile.
 *    Without spacing, they touch
 */
.link {
  margin-bottom: 1.5rem;
  /* 1 */
}
@media (min-width: 64em) {
  .link {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   #LINK/BREAKOUT
   ========================================================================== */
/**
 * Used to make the entire parent element clickable.
 */
.link--breakout {
  position: static;
}
.link--breakout:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   #LINK/CTA
   ========================================================================== */
.link--cta-large {
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  font-size: var(--fontSizeH3);
}

/* ==========================================================================
   #LINK/GROW
   ========================================================================== */
.link--grow-center:before {
  left: 50%;
  transform: translateX(-50%);
}
.link--grow-ltr:before {
  left: 0;
}
.link--grow-rtl:before {
  right: 0;
}
.link--grow-center, .link--grow-ltr, .link--grow-rtl {
  position: relative;
  text-decoration: none;
}
.link--grow-center:before, .link--grow-ltr:before, .link--grow-rtl:before {
  bottom: 0;
  content: "";
  height: 1px;
  position: absolute;
  width: 0;
  background-color: var(--colorPrimary);
  transition: width 0.3s ease-in-out;
}
.link--grow-center:hover:before, .link--grow-ltr:hover:before, .link--grow-rtl:hover:before {
  width: 100%;
}

/* ==========================================================================
   #LINK/PLAIN
   ========================================================================== */
.link--plain {
  border-bottom: 0;
  color: inherit;
  font-weight: var(--fontWeightDefault);
  text-decoration: none;
}

/* ==========================================================================
   #LINK/RESET BTN
   ========================================================================== */
.link--reset-btn {
  border: 0;
  padding: 0;
  background: 0;
  color: var(--colorPrimary);
  line-height: var(--lineHeightParagraph);
  text-decoration: underline;
  cursor: pointer;
}
.link--reset-btn:hover {
  color: var(--colorPrimaryActive);
  text-decoration: none;
}
.carousel__item-body--inverted .link--reset-btn, .footer--inverted .link--reset-btn, .group--inverted .link--reset-btn, .header--inverted .link--reset-btn, .hero--inverted .link--reset-btn, .section--inverted .link--reset-btn, .tiles--inverted .link--reset-btn {
  color: var(--colorTextInverted);
}

/* ==========================================================================
   #LINK/SHRINK
   ========================================================================== */
.link--shrink-center:before {
  left: 50%;
  transform: translateX(-50%);
}
.link--shrink-ltr:before {
  right: 0;
}
.link--shrink-rtl:before {
  left: 0;
}
.link--shrink-center, .link--shrink-ltr, .link--shrink-rtl {
  position: relative;
  text-decoration: none;
}
.link--shrink-center:before, .link--shrink-ltr:before, .link--shrink-rtl:before {
  bottom: 0;
  content: "";
  height: 1px;
  position: absolute;
  width: 100%;
  background-color: var(--colorPrimary);
  transition: width 0.3s ease-in-out;
}
.link--shrink-center:hover:before, .link--shrink-ltr:hover:before, .link--shrink-rtl:hover:before {
  width: 0;
}

/* ==========================================================================
   #LINK/SLIDE
   ========================================================================== */
.link--slide-bottom:before {
  top: 100%;
  transform: translateY(10px);
}
.link--slide-center:before {
  top: 100%;
  transform: translateY(0px);
}
.link--slide-top:before {
  bottom: 100%;
  transform: translateY(10px);
}
.link--slide-bottom, .link--slide-center, .link--slide-top {
  position: relative;
  text-decoration: none;
}
.link--slide-bottom:before, .link--slide-center:before, .link--slide-top:before {
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
  background-color: var(--colorPrimary);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.link--slide-bottom:hover:before, .link--slide-center:hover:before, .link--slide-top:hover:before {
  opacity: 1;
}
.link--slide-bottom:hover:before {
  transform: translateY(0px);
}
.link--slide-center:hover:before {
  transform: translateY(-10px);
}
.link--slide-top:hover:before {
  transform: translateY(0);
}

/* ==========================================================================
   #LINK/TEXT
   ========================================================================== */
.link--text {
  color: var(--colorTextDefault);
}

/* ==========================================================================
   #LIST
   ========================================================================== */
/* ==========================================================================
   #LIST/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #LIST/DEFAULT
   ========================================================================== */
.list {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}
.list > li {
  padding-left: initial;
}
.list > li:before {
  display: none;
}

/* ==========================================================================
   #LIST/HORIZONTAL
   ========================================================================== */
.list--horizontal,
.list--horizontal-spaced {
  display: flex;
  flex-wrap: wrap;
}

.list--horizontal-spaced > li {
  margin-right: 1.5rem;
}
.list--horizontal-spaced > li:last-child {
  margin-right: 0;
}

/* ==========================================================================
   #MEDIA
   ========================================================================== */
/**
 * Common component used to display text alongside an image. Below is an
 * example of the markup used for this component.
 *
 * <div class="media">
 *     <img src="/path/to/image.jpg" alt="Description of image" />
 *     <div class="media__body">
 *         <p>Text to be displayed alongside image.</p>
 *     </div>
 * </div>
 * 
 * Read more about the `media` component.
 *
 * - https://getbootstrap.com/docs/4.0/layout/media-object/
 * - https://css-tricks.com/media-object-bunch-ways/
 * - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 */
/* ==========================================================================
   #MEDIA/DEFAULT
   ========================================================================== */
.media {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
@media (min-width: 48em) {
  .media {
    display: flex;
  }
}
.media__body {
  padding-top: 1.5rem;
}
@media (min-width: 48em) {
  .media__body {
    margin-left: 2rem;
    padding-top: 0;
  }
}

/* ==========================================================================
   #MODAL
   ========================================================================== */
/* ==========================================================================
   #MODAL/VARIABLES
   ========================================================================== */
:root {
  --modalAlignItems: center;
  --modalBackdropColor: var(--colorBlack);
  --modalBackdropOpacity: 0.5;
  --modalBorderRadius: 1rem;
  --modalContentBackgroundColor: var(--colorWhite);
  --modalContentBackgroundPattern: none;
  --modalContentBoxShadow: none;
  --modalContentPadding: 2.6rem 1rem 1rem 1rem;
  --modalContentZIndex: 1;
  --modalJustifyContent: center;
  --modalZIndex: 500;
}
@media (min-width: 48em) {
  :root {
    --modalContentPaddingTablet: 3.6rem 2rem 2rem 2rem;
  }
}

/* ==========================================================================
   #MODAL/DEFAULT
   ========================================================================== */
.modal {
  align-items: var(--modalAlignItems);
  display: none;
  height: 100%;
  justify-content: var(--modalJustifyContent);
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--modalZIndex);
  overflow-x: hidden;
  overflow-y: auto;
}
.modal.is-visible {
  display: flex;
}
.modal__backdrop {
  height: 100vh;
  left: 0;
  opacity: var(--modalBackdropOpacity);
  position: fixed;
  top: 0;
  width: 100vw;
  background-color: var(--modalBackdropColor);
}
.modal__content {
  padding: var(--modalContentPadding);
  position: relative;
  width: 100%;
  z-index: var(--modalContentZIndex);
  background-color: var(--modalContentBackgroundColor);
  background-image: var(--modalContentBackgroundPattern);
  border-radius: var(--modalBorderRadius);
  box-shadow: var(--modalContentBoxShadow);
}
.modal__content.constrain--cookie-control {
  border-radius: 0;
}
@media (min-width: 37.5em) {
  .modal__content.constrain--cookie-control {
    border-radius: var(--modalBorderRadius);
  }
}

/* ==========================================================================
   #MODAL/INVERTED
   ========================================================================== */
.modal--inverted {
  color: var(--colorTextInverted);
}

/* ==========================================================================
   #NAV
   ========================================================================== */
/* ==========================================================================
   #NAV/VARIABLES
   ========================================================================== */
:root {
  --navAnchorPadding: 1.5rem;
  --navAnchorPaddingTablet: 0.5rem 1rem;
  --navBorderColor: #d7d7d7;
  --navBorderColorLight: #eaeaea;
  --navColor: var(--colorBlack);
  --navColorActive: var(--colorPrimary);
  --navColorInverted: var(--colorTextInverted);
  --navColorInvertedActive: var(--colorPrimary);
  --navFontSize: var(--fontSizeBase);
  --navFontWeight: bold;
  --navFontWeightCurrent: var(--navFontWeight);
  --navFooterFontWeight: normal;
  --navFooterTextTransform: initial;
  --navItemMargin: 0;
  --navItemMarginTablet: var(--navItemMargin);
  --navPrimaryAnchorPaddingDesktop: 1rem 2rem;
  --navSocialItemMargin: 0;
  --navSocialItemMarginTablet: 0;
  --navSocialAnchorPaddingDesktop: 0.25rem 0.75rem;
  --navSocialAnchorPaddingTablet: 0.25rem 0.75rem;
  --navSubAnchorPadding: 1.5rem 2rem;
  --navSubAnchorPaddingTablet: 0.5rem 1rem;
  --navSvgHeight: 2.5rem;
  --navTextAlign: initial;
  --navTextDecorationHover: none;
  --navTextTransform: uppercase;
}

/* ==========================================================================
   #NAV/DEFAULT
   ========================================================================== */
.nav {
  display: block;
  position: relative;
}

.nav__items {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.nav__items > li {
  padding-left: initial;
}
.nav__items > li:before {
  display: none;
}
@media (min-width: 64em) {
  .nav__items {
    flex-direction: row;
  }
}

.nav__item {
  border-bottom: 0.4rem solid var(--navBorderColor);
  margin: var(--navItemMargin);
}
@media (min-width: 64em) {
  .nav__item {
    border-bottom: 0;
    margin: var(--navItemMarginTablet);
  }
}
.nav__item:last-child {
  border-bottom: 0;
}
.nav__item a,
.nav__item .link--reset-btn {
  display: block;
  padding: var(--navAnchorPadding);
  color: var(--navColor);
  font-size: var(--navFontSize);
  font-weight: var(--navFontWeight);
  letter-spacing: var(--letterSpacingNavigation);
  text-align: var(--navTextAlign);
  text-decoration: none;
  text-transform: var(--navTextTransform);
}
.nav__item a svg,
.nav__item .link--reset-btn svg {
  display: inline-block;
  height: var(--navSvgHeight);
  vertical-align: middle;
  fill: var(--navColor);
}
@media (min-width: 64em) {
  .nav__item a,
.nav__item .link--reset-btn {
    padding: var(--navAnchorPaddingTablet);
  }
}
.nav__item a.is-current-page,
.nav__item .link--reset-btn.is-current-page {
  color: var(--navColorActive);
  font-weight: var(--navFontWeightCurrent);
}
.nav__item a.is-current-page svg,
.nav__item .link--reset-btn.is-current-page svg {
  fill: var(--navColorActive);
}
.nav__item a img,
.nav__item .link--reset-btn img {
  display: block;
}
.styled--dark .nav__item a, [class$="--inverted"] .nav__item a,
.styled--dark .nav__item .link--reset-btn,
[class$="--inverted"] .nav__item .link--reset-btn {
  color: var(--navColorInverted);
}
.styled--dark .nav__item a svg, [class$="--inverted"] .nav__item a svg,
.styled--dark .nav__item .link--reset-btn svg,
[class$="--inverted"] .nav__item .link--reset-btn svg {
  fill: var(--navColorInverted);
}
.styled--dark .nav__item a:focus, .styled--dark .nav__item a:hover, [class$="--inverted"] .nav__item a:focus, [class$="--inverted"] .nav__item a:hover,
.styled--dark .nav__item .link--reset-btn:focus,
.styled--dark .nav__item .link--reset-btn:hover,
[class$="--inverted"] .nav__item .link--reset-btn:focus,
[class$="--inverted"] .nav__item .link--reset-btn:hover {
  color: var(--navColorInvertedActive);
}
.styled--dark .nav__item a:focus svg, .styled--dark .nav__item a:hover svg, [class$="--inverted"] .nav__item a:focus svg, [class$="--inverted"] .nav__item a:hover svg,
.styled--dark .nav__item .link--reset-btn:focus svg,
.styled--dark .nav__item .link--reset-btn:hover svg,
[class$="--inverted"] .nav__item .link--reset-btn:focus svg,
[class$="--inverted"] .nav__item .link--reset-btn:hover svg {
  fill: var(--navColorInvertedActive);
}
.nav__item a:focus, .nav__item a:hover,
.nav__item .link--reset-btn:focus,
.nav__item .link--reset-btn:hover {
  color: var(--navColorActive);
  -webkit-text-decoration: var(--navTextDecorationHover);
          text-decoration: var(--navTextDecorationHover);
}
.nav__item a:focus svg, .nav__item a:hover svg,
.nav__item .link--reset-btn:focus svg,
.nav__item .link--reset-btn:hover svg {
  fill: var(--navColorActive);
}

.nav__item--parent svg {
  display: inline-block;
  height: 0.6rem;
  margin-bottom: 0.4rem;
  margin-left: 0.5rem;
  width: 1rem;
  vertical-align: middle;
  fill: var(--navColor);
  pointer-events: none;
}
.nav__item--parent a:hover svg,
.nav__item--parent .link--reset-btn:hover svg {
  fill: var(--navColorActive);
}
.styled--dark .nav__item--parent svg, [class$="--inverted"] .nav__item--parent svg {
  fill: var(--navColorInverted);
}
.styled--dark .nav__item--parent a:hover svg,
.styled--dark .nav__item--parent .link--reset-btn:hover svg, [class$="--inverted"] .nav__item--parent a:hover svg,
[class$="--inverted"] .nav__item--parent .link--reset-btn:hover svg {
  fill: var(--navColorInvertedActive);
}

@media (min-width: 64em) {
  .nav__item--mobile-only {
    display: none;
  }
}

.nav__sub {
  display: none;
  background-color: var(--colorGrey);
}
@media (min-width: 64em) {
  .nav__sub {
    position: absolute;
    background-color: var(--colorWhite);
  }
  [class$="--inverted"] .nav__sub {
    background-color: var(--colorBlack);
  }
}
.nav__sub a,
.nav__sub .link--reset-btn {
  padding: var(--navSubAnchorPadding);
}
@media (min-width: 64em) {
  .nav__sub a,
.nav__sub .link--reset-btn {
    padding: var(--navSubAnchorPaddingTablet);
  }
}
.is-selected .nav__sub {
  display: block;
}

.nav__sub-items {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}
.nav__sub-items > li {
  padding-left: initial;
}
.nav__sub-items > li:before {
  display: none;
}
.nav__sub-items .nav__item {
  border-bottom: 0.4rem solid var(--navBorderColorLight);
}
.nav__sub-items .nav__item:last-child {
  border-bottom: 0;
}

/* ==========================================================================
   #NAV/FOOTER
   ========================================================================== */
.footer .nav__items {
  flex-direction: column;
}
.footer .nav__item a {
  padding-left: 0;
  padding-right: 0;
  font-size: var(--footerFontSize);
  font-weight: var(--navFooterFontWeight);
  text-transform: var(--navFooterTextTransform);
}
.footer .nav__sub {
  background: transparent;
}

.styled--dark .footer--inverted .nav__item a {
  color: var(--footerColorInverted);
}
.styled--dark .footer--inverted .nav__item a:focus, .styled--dark .footer--inverted .nav__item a:hover {
  color: var(--footerColorInvertedActive);
}

/* ==========================================================================
   #NAV/PRIMARY
   ========================================================================== */
.nav--primary {
  margin-bottom: 1.5rem;
}
@media (min-width: 64em) {
  .nav--primary {
    margin-bottom: 0;
    margin-left: 1.5rem;
  }
}
@media (min-width: 64em) {
  .nav--primary .nav__item a,
.nav--primary .nav__item .link--reset-btn {
    padding: var(--navPrimaryAnchorPaddingDesktop);
  }
}
.nav--primary .nav__sub {
  background-color: var(--headerBackgroundColor);
  background-image: var(--headerBackgroundPattern);
}

/* ==========================================================================
   #NAV/SOCIAL
   ========================================================================== */
.nav--social {
  display: inline-block;
}
.nav--social .nav__items {
  flex-direction: row;
}
.nav--social .nav__item {
  border: 0 !important;
  margin: var(--navSocialItemMargin);
}
@media (min-width: 64em) {
  .nav--social .nav__item {
    margin: var(--navSocialItemMarginTablet);
  }
}
.nav--social .nav__item a {
  padding: var(--navSocialAnchorPaddingTablet);
}
@media (min-width: 64em) {
  .nav--social .nav__item a {
    padding: var(--navSocialAnchorPaddingDesktop);
  }
}
.nav--social .nav__item a:hover img {
  filter: grayscale(1);
}
.header__nav .nav--social {
  padding: 0 0.75rem;
}
@media (min-width: 64em) {
  .header__nav .nav--social {
    padding: 0;
  }
}

/* ==========================================================================
   #NOTIFICATION
   ========================================================================== */
/* ==========================================================================
   #NOTIFICATION/VARIABLES
   ========================================================================== */
:root {
  --notificationBackgroundColor: var(--colorPrimary);
  --notificationColor: var(--colorWhite);
  --notificationDimension: 2.6rem;
  --notificationFontSize: 1.2rem;
  --notificationFontWeight: bold;
  --notificationOffsetRight: 2rem;
  --notificationOffsetTop: 50%;
}
@media (min-width: 48em) {
  :root {
    --notificationOffsetRight: 1.2rem;
    --notificationOffsetTop: 0;
  }
}

/* ==========================================================================
   #NOTIFICATION/DEFAULT
   ========================================================================== */
.notification {
  display: inline-block;
  padding-right: var(--notificationOffsetRight);
  position: relative;
}
.notification__count {
  height: var(--notificationDimension);
  position: absolute;
  right: 0;
  top: var(--notificationOffsetTop);
  width: var(--notificationDimension);
  background-color: var(--notificationBackgroundColor);
  border-radius: 50%;
  transform: translateY(-50%);
  color: var(--notificationColor);
  font-size: var(--notificationFontSize);
  font-weight: var(--notificationFontWeight);
  line-height: var(--notificationDimension);
  text-align: center;
}
@media (min-width: 48em) {
  .notification__count {
    transform: none;
  }
}

/* ==========================================================================
   #PAGER
   ========================================================================== */
/* ==========================================================================
   #PAGER/DEFAULT
   ========================================================================== */
.pager {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}
.pager > li {
  padding-left: initial;
}
.pager > li:before {
  display: none;
}
.pager li {
  padding: 0;
}
.pager li:last-child {
  margin-left: auto;
}
.section--inverted .pager .btn--primary {
  border-color: var(--colorTextInverted);
}

/* ==========================================================================
   #PERSON
   ========================================================================== */
/* ==========================================================================
   #PERSON/VARIABLES
   ========================================================================== */
:root {
  --personImageSize: 17.5rem;
}

/* ==========================================================================
   #PERSON/DEFAULT
   ========================================================================== */
.person {
  margin-bottom: 1.5rem;
}
.person__image {
  border-radius: 100%;
  margin-bottom: 3.2rem;
  max-width: var(--personImageSize);
  overflow: hidden;
}
.section--center .person__image, .align--center .person__image {
  margin-left: auto;
  margin-right: auto;
}
.person__job, .person__text {
  font-size: var(--fontSizeBase);
}
.person__job {
  margin-bottom: 1.5rem;
}
.person__text {
  font-style: italic;
}

/* ==========================================================================
   #RICH NAVIGATION ITEM
   ========================================================================== */
/* ==========================================================================
   #RICH NAVIGATION ITEM/VARIABLES
   ========================================================================== */
:root {
  --richNavigationBorderWidth: 0.4rem;
  --richNavigationColor: var(--navColor);
  --richNavigationColorActive: var(--navColorActive);
  --richNavigationColorInverted: var(--navColorInverted);
  --richNavigationColorInvertedActive: var(--navColorIntertedActive);
  --richNavigationItemImageMinWidth: 8rem;
  --richNavigationItemSpacing: 2rem;
  --richNavigationItemWidth: 58rem;
}

/* ==========================================================================
   #RICH NAVIGATION ITEM/DEFAULT
   ========================================================================== */
.rich-navigation-item {
  border-top: var(--richNavigationBorderWidth) solid var(--richNavigationColor);
  display: block;
  padding: var(--richNavigationItemSpacing);
  width: 100vw;
  color: var(--richNavigationColor);
  text-decoration: none;
}
@media (min-width: 48em) {
  .rich-navigation-item {
    width: var(--richNavigationItemWidth);
  }
}
.styled--dark .rich-navigation-item, [class$="--inverted"] .rich-navigation-item {
  border-top-color: var(--richNavigationColorInverted);
  color: var(--richNavigationColorInverted);
}
.styled--dark .rich-navigation-item:focus, .styled--dark .rich-navigation-item:hover, [class$="--inverted"] .rich-navigation-item:focus, [class$="--inverted"] .rich-navigation-item:hover {
  color: var(--richNavigationColorInvertedActive);
}
.rich-navigation-item:focus, .rich-navigation-item:hover {
  color: var(--richNavigationColorActive);
  -webkit-text-decoration: var(--navTextDecorationHover);
          text-decoration: var(--navTextDecorationHover);
}
.rich-navigation-item__content {
  align-items: center;
  display: flex;
  margin: 0 -0.75rem;
}
.rich-navigation-item__image-container {
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
}
.rich-navigation-item__image {
  min-width: var(--richNavigationItemImageMinWidth);
}
.rich-navigation-item__text {
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  flex-grow: 1;
}
.rich-navigation-item__title, .rich-navigation-item__supporting-text {
  display: block;
}
.rich-navigation-item__title {
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH3Mobile);
  font-weight: var(--fontWeightBold);
  letter-spacing: var(--letterSpacingHeading);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  .rich-navigation-item__title {
    font-size: var(--fontSizeH3);
  }
}

/* ==========================================================================
   #SECTION
   ========================================================================== */
/* ==========================================================================
   #SECTION/VARIABLES
   ========================================================================== */
:root {
  --sectionBackgroundColor: transparent;
  --sectionBackgroundPattern: none;
}

/* ==========================================================================
   #SECTION/DEFAULT
   ========================================================================== */
.section {
  display: block;
  position: relative;
  background-color: var(--sectionBackgroundColor);
  background-image: var(--sectionBackgroundPattern);
  overflow-x: hidden;
}

/* ==========================================================================
   #SECTION/ALIGNMENT
   ========================================================================== */
.section--center {
  text-align: center;
}

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

.section--vertical-bottom .flow__content {
  align-items: flex-end;
}

.section--vertical-center .flow__content {
  align-items: center;
}

/* ==========================================================================
   #SECTION/BACKGROUND
   ========================================================================== */
.section--with-background-fixed {
  background-attachment: fixed;
}

/* ==========================================================================
   #SECTION/FORM-SOLO
   ========================================================================== */
.section--form-solo {
  align-items: center;
  display: flex;
  height: 100vh;
  padding: 0;
  width: 100%;
  background-color: var(--colorGreyLight);
  text-align: center;
}
.section--form-solo .section__content {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.section--form-solo .form {
  padding: 3.2rem;
  background-color: var(--colorWhite);
}
.section--form-solo label {
  font-size: var(--fontSizeDefault);
  line-height: var(--lineHeightDefault);
}

/* ==========================================================================
   #SECTION/INVERTED
   ========================================================================== */
.section--inverted,
.styled--dark section {
  color: var(--colorTextInverted);
}

/* ==========================================================================
   #SECTION/SPACING
   ========================================================================== */
.section--spaced-after {
  margin-bottom: 6rem;
}
@media (min-width: 80em) {
  .section--spaced-after {
    margin-bottom: 9rem;
  }
}

.section--spaced-after-large {
  margin-bottom: 12rem;
}
@media (min-width: 80em) {
  .section--spaced-after-large {
    margin-bottom: 18rem;
  }
}

.section--padding-top-default {
  padding-top: 6rem;
}
@media (min-width: 80em) {
  .section--padding-top-default {
    padding-top: 9rem;
  }
}

.section--padding-top-large {
  padding-top: 9rem;
}
@media (min-width: 80em) {
  .section--padding-top-large {
    padding-top: 13.5rem;
  }
}

.section--padding-bottom-default {
  padding-bottom: 6rem;
}
@media (min-width: 80em) {
  .section--padding-bottom-default {
    padding-bottom: 9rem;
  }
}

.section--padding-bottom-large {
  padding-bottom: 9rem;
}
@media (min-width: 80em) {
  .section--padding-bottom-large {
    padding-bottom: 13.5rem;
  }
}

.section--no-flow-gutter .flow__content {
  margin-left: 0;
}
.section--no-flow-gutter .flow__content > * {
  padding: 0;
}

.section--large-flow-gutter .flow__content {
  margin-left: -6rem;
}
.section--large-flow-gutter .flow__content > * {
  padding: 0 0 0 6rem;
}

.section--small-vertical-flow-gutter .flow__content > * {
  margin-bottom: 1.5rem;
}

.section--medium-vertical-flow-gutter .flow__content > * {
  margin-bottom: 3rem;
}

.section--large-vertical-flow-gutter .flow__content > * {
  margin-bottom: 6rem;
}

@media (max-width: 63.99em) {
  .section--no-stacked-vertical-flow-gutter .flow__content > * {
    margin-bottom: 0;
  }
}

@media (max-width: 63.99em) {
  .section--small-stacked-vertical-flow-gutter .flow__content > * {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 63.99em) {
  .section--medium-stacked-vertical-flow-gutter .flow__content > * {
    margin-bottom: 3rem;
  }
}

@media (max-width: 63.99em) {
  .section--large-stacked-vertical-flow-gutter .flow__content > * {
    margin-bottom: 6rem;
  }
}

/* ==========================================================================
   #SCROLL ENCOURAGEMENT
   ========================================================================== */
/* ==========================================================================
   #SCROLL ENCOURAGEMENT/VARIABLES
   ========================================================================== */
:root {
  --scrollEncouragementDistance: -6.5rem;
  --scrollEncouragementFontSize: calc(var(--fontSizeBase) * 0.725);
}

/* ==========================================================================
   #SCROLL ENCOURAGEMENT/DEFAULT
   ========================================================================== */
.scroll-encouragement {
  bottom: var(--scrollEncouragementDistance);
  left: 50%;
  max-width: 114rem;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
  color: var(--colorBlack);
}
.scroll-encouragement svg {
  fill: var(--colorBlack);
  stroke: var(--colorBlack);
}
.styled--dark .scroll-encouragement, .scroll-encouragement--invert {
  color: var(--colorTextInverted);
}
.styled--dark .scroll-encouragement svg, .scroll-encouragement--invert svg {
  fill: var(--colorTextInverted);
  stroke: var(--colorTextInverted);
}
.scroll-encouragement__content {
  bottom: 0;
  left: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: absolute;
}
.hero--horizontal-center .scroll-encouragement__content {
  left: 50%;
  transform: translateX(-50%);
}
.hero--horizontal-right .scroll-encouragement__content {
  left: auto;
  right: 0;
}
@media (min-width: 23.4375em) {
  .scroll-encouragement__content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 88.25em) {
  .scroll-encouragement__content {
    padding-left: 0;
    padding-right: 0;
  }
}
.scroll-encouragement__text {
  display: block;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%) rotate(90deg);
  font-family: var(--fontFamilyHeading);
  font-size: var(--scrollEncouragementFontSize);
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
}
.scroll-encouragement__icon {
  display: block;
  padding-top: 3.2rem;
}

/* ==========================================================================
   #SWATCH
   ========================================================================== */
/* ==========================================================================
   #SWATCH/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #SWATCH/DEFAULT
   ========================================================================== */
.swatch {
  padding-top: 100px;
}
.swatch pre {
  margin-bottom: 0;
  padding: 1.5rem;
  background-color: var(--colorGreyLight);
  text-align: center;
}
.swatch pre span {
  display: block;
}

/* ==========================================================================
   #TABLE
   ========================================================================== */
/* ==========================================================================
   #TABLE/DEFAULT
   ========================================================================== */
.table__caption {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   #TABLE/BORDERED
   ========================================================================== */
.table--bordered {
  border: 0.1rem solid var(--colorGrey);
}

/* ==========================================================================
   #TABLE/BORDERLESS
   ========================================================================== */
.table--borderless thead tr,
.table--borderless tbody tr {
  border: 0;
}

/* ==========================================================================
   #TABLE/HEAD-DARK
   ========================================================================== */
.table--head-dark thead tr {
  background-color: var(--colorBlack);
  color: var(--colorWhite);
}

/* ==========================================================================
   #TABLE/HEAD-LIGHT
   ========================================================================== */
.table--head-light thead tr {
  background-color: var(--colorGreyLight);
}

/* ==========================================================================
   #TABLE/HOVER
   ========================================================================== */
.table--hover tbody tr:hover {
  background-color: var(--colorGreyLight);
}

/* ==========================================================================
   #TABLE/STRIPED
   ========================================================================== */
@media (min-width: 48em) {
  .table--striped tbody tr:nth-child(odd) {
    background-color: var(--colorGreyLight);
  }
}
.table--striped tbody td:nth-child(even) {
  background-color: var(--colorGreyLight);
}
@media (min-width: 48em) {
  .table--striped tbody td:nth-child(even) {
    background-color: transparent;
  }
}

/* ==========================================================================
   #TAGS
   ========================================================================== */
/* ==========================================================================
   #TAGS/VARIABLES
   ========================================================================== */
:root {
  --tagsFontSize: 1.6rem;
  --tagsMargin: 3.2rem 0 3.2rem;
  --tagsTopBorder: 0.1rem solid var(--colorGrey);
}

/* ==========================================================================
   #TAGS/DEFAULT
   ========================================================================== */
.tags {
  align-items: flex-start;
  display: flex;
  margin: var(--tagsMargin);
  padding: 1.5rem 0;
  border-top: var(--tagsTopBorder);
  font-size: var(--tagsFontSize);
}
.tags__label {
  font-weight: var(--fontWeightBold);
}
.tags__list {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  list-style: none;
}
.tags__item {
  position: relative;
}
.tags__item:after {
  position: absolute;
  right: 0;
  color: var(--colorGrey);
  transform: translateX(50%);
  content: "/";
}
.tags__item:last-child:after {
  display: none;
}
.tags__link {
  padding: 0.75rem;
  text-decoration: none;
}
.tags__link:hover {
  color: var(--colorSecondary);
}
.tags__item--current .tags__link {
  color: var(--colorSecondary);
  cursor: default;
}

/* ==========================================================================
   #TILES
   ========================================================================== */
/* ==========================================================================
   #TILES/VARIABLES
   ========================================================================== */
:root {
  --tilesBackgroundColor: transparent;
  --tilesBackgroundPattern: none;
  --tilesDimension: 24rem;
  --tilesGap: 0.75rem;
  --tilesPadding: 1.5rem;
}

/* ==========================================================================
   #TILES/DEFAULT
   ========================================================================== */
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--tilesGap) * -1) 1.5rem;
}

.tiles__item {
  border: var(--tilesGap) solid transparent;
  position: relative;
  flex-basis: 50%;
}
.styled--dark .tiles__item, .tiles__item--inverted {
  color: var(--colorTextInverted);
}
@media (min-width: 48em) {
  .tiles--two-cols .tiles__item {
    flex-basis: 50%;
  }
}
@media (min-width: 48em) {
  .tiles--three-cols .tiles__item {
    flex-basis: 33.33%;
  }
}
@media (min-width: 48em) {
  .tiles--four-cols .tiles__item {
    flex-basis: 50%;
  }
}
@media (min-width: 64em) {
  .tiles--four-cols .tiles__item {
    flex-basis: 25%;
  }
}

/**
 * 1. Using `margin-top` to make the height of the tile the same
 *    size as the width.
 */
.tiles__item-skeleton {
  margin-top: 100%;
  /* 1. */
}

.tiles__item-children {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: var(--tilesPadding);
  position: absolute;
  right: 0;
  top: 0;
  background-color: var(--tilesBackgroundColor);
  background-image: var(--tilesBackgroundPattern);
}

/* ==========================================================================
   #VALIDATION SUMMARY ERRORS
   ========================================================================== */
/* ==========================================================================
   #VALIDATION SUMMARY ERRORS/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #VALIDATION SUMMARY ERRORS/DEFAULT
   ========================================================================== */
.validation-summary-errors {
  border: 1px solid var(--colorError);
  border-radius: var(--formBorderRadius);
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--colorAlertErrorBackground);
}
.validation-summary-errors p:last-child,
.validation-summary-errors ul:last-child,
.validation-summary-errors ol:last-child,
.validation-summary-errors li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   #OVERRIDES
   ========================================================================== */
/**
 * For overriding third party package/plugin styles which are not our own components
 */
/* ==========================================================================
   #OVERRIDES/CIVIC COOKIE CONTROL
   ========================================================================== */
/* ==========================================================================
   #OVERIDES/CIVIC COOKIE CONTROL/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #OVERIDES/CIVIC COOKIE CONTROL/DEFAULT
   ========================================================================== */
#ccc-icon {
  fill: var(--colorBlack) !important;
}

#ccc-content {
  background: var(--colorBlack) !important;
  color: var(--colorWhite);
  font-size: var(--fontSizeBase);
  font-family: var(--fontFamilyDefault);
}
#ccc-content h3 {
  font-size: 3rem !important;
  font-weight: var(--fontWeightDefault) !important;
}

#ccc-title {
  font-size: 3.4rem !important;
  font-weight: var(--fontWeightDefault) !important;
  line-height: 1.2 !important;
}

.checkbox-toggle--slider {
  border: 0.1rem solid var(--colorTextLighter) !important;
  border-radius: 0rem !important;
  top: 0.7rem !important;
  background-color: var(--colorSiteBackground) !important;
}

.checkbox-toggle-label {
  font-family: var(--fontFamilyDefault);
}

.checkbox-toggle-toggle {
  border-radius: 0rem !important;
  background-color: var(--colorPrimary) !important;
}

.checkbox-toggle-on,
.checkbox-toggle-off {
  padding: 6px 5px 4px 6px !important;
  color: var(--colorBlack) !important;
  font-size: 0.65em !important;
  text-transform: uppercase;
}

.checkbox-toggle-off {
  opacity: 0.65 !important;
}

/* ==========================================================================
   #OVERRIDES/MAILCHIMP
   ========================================================================== */
/* ==========================================================================
   #OVERIDES/MAILCHIMP/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #OVERIDES/MAILCHIMP/DEFAULT
   ========================================================================== */
#mc_embed_signup {
  margin-left: 2rem;
  margin-right: 2rem;
  padding-bottom: 1.5rem;
  position: relative;
}
#mc_embed_signup h2 {
  font-size: var(--fontSizeH3);
}
#mc_embed_signup .indicates-required {
  float: right;
}
#mc_embed_signup #mergeRow-gdpr {
  margin-bottom: 3.2rem;
  margin-top: 3.2rem;
}
#mc_embed_signup #mergeRow-gdpr p,
#mc_embed_signup #mergeRow-gdpr label {
  font-size: var(--fontSizeExtraSmall);
}
#mc_embed_signup #mergeRow-gdpr .content__gdpr > label {
  padding: 0;
  font-size: var(--fontSizeLarge);
}
#mc_embed_signup input[type=submit] {
  border: var(--buttonBorderThickness) solid var(--colorPrimary);
  border-radius: var(--buttonBorderRadius);
  display: inline-block;
  padding: var(--buttonPaddingVertical) var(--buttonPaddingHorizontal) var(--buttonPaddingVertical) var(--buttonPaddingHorizontal);
  vertical-align: middle;
  width: auto;
  background-color: var(--colorPrimary);
  color: var(--colorButtonLabel);
  font-size: var(--buttonFontSize);
  font-weight: var(--buttonFontWeight);
  letter-spacing: var(--letterSpacingButton);
  text-decoration: none;
  text-transform: var(--buttonTextTransform);
  cursor: pointer;
  outline: none;
  overflow: hidden;
  position: relative;
}
#mc_embed_signup .brandingLogo {
  float: right;
}
#mc_embed_signup div.mce_inline_error {
  margin: 0 0 1em 0 !important;
  padding: 5px 10px !important;
  background-color: transparent !important;
  color: var(--colorError) !important;
  font-weight: bold !important;
  z-index: 1 !important;
}
#mc_embed_signup .required {
  color: var(--colorTextDefault);
}
#mc_embed_signup #mce-responses #mce-error-response {
  margin-bottom: 3.2rem;
  color: var(--colorError) !important;
}
#mc_embed_signup #mce-responses #mce-success-response::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
#mc_embed_signup #mce-responses #mce-success-response {
  bottom: 0;
  margin-bottom: 3.2rem;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--colorAlertSuccessText);
  font-weight: bold;
  font-size: var(--fontSizeH3);
  text-align: center;
  line-height: 100%;
  z-index: 100;
}

/* ==========================================================================
   #TRUMPS
   ========================================================================== */
/**
 * -----------------------------------------------------------------------------
 * $ALIGNMENT
 * -----------------------------------------------------------------------------
 */
.align--full, .align--wide {
  left: 50%;
  margin-left: calc(-50vw + var(--scrollbarWidth) / 2);
  margin-right: calc(-50vw + var(--scrollbarWidth) / 2);
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: calc(100vw - var(--scrollbarWidth));
}
@media (min-width: 48em) {
  .align--wide {
    left: 0%;
    margin-left: calc(15% - 15vw);
    margin-right: calc(15% - 15vw);
    max-width: 1000%;
    right: 0%;
    width: auto;
  }
}
.align-self--center {
  align-self: center;
}
.align-self--end {
  align-self: flex-end;
}
.align-self--start {
  align-self: flex-start;
}
.align--center {
  text-align: center;
}
.align--justify {
  text-align: justify;
}
.align--left {
  text-align: left;
}
.align--right {
  text-align: right;
}

/**
 * -----------------------------------------------------------------------------
 * $BACKGROUND
 * -----------------------------------------------------------------------------
 */
.bg--color-primary {
  background-color: var(--colorPrimary);
}
.bg--color-secondary {
  background-color: var(--colorSecondary);
}
.bg--color-black {
  background-color: var(--colorBlack);
}
.bg--color-grey {
  background-color: var(--colorGrey);
}
.bg--color-grey-dark {
  background-color: var(--colorGreyDark);
}
.bg--color-grey-light {
  background-color: var(--colorGreyLight);
}
.bg--color-white {
  background-color: var(--colorWhite);
}

/**
 * -----------------------------------------------------------------------------
 * $CONSTRAIN
 * -----------------------------------------------------------------------------
 */
/**
 * Helper classes for restricted width of a container.
 */
.constrain {
  margin-left: auto;
  margin-right: auto;
  max-width: 114rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}
@media (min-width: 23.4375em) {
  .constrain {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 88.25em) {
  .constrain {
    padding-left: 0;
    padding-right: 0;
  }
}
.constrain .flow {
  max-width: 114rem;
}

.constrain--extra-thin,
.constrain--extra-thin .flow {
  max-width: 67.6rem;
}

.constrain--full,
.constrain--full .flow {
  max-width: 100%;
}

.constrain--thin,
.constrain--thin .flow {
  max-width: 92rem;
}

.constrain--wide,
.constrain--wide .flow {
  max-width: 137.2rem;
}

.constrain--cookie-control,
.constrain--cookie-control .flow {
  max-width: 60rem;
}

/**
 * -----------------------------------------------------------------------------
 * $COLOR
 * -----------------------------------------------------------------------------
 */
.color--default {
  color: var(--colorTextDefault);
}
.color--white {
  color: var(--colorWhite);
}

/* ==========================================================================
   #DISPLAY
   ========================================================================== */
.display--none {
  display: none;
}
.display--block {
  display: block;
}
.display--inline-block {
  display: inline-block;
}

/**
 * -----------------------------------------------------------------------------
 * $GUTTER
 * -----------------------------------------------------------------------------
 */
.gutter--none .flow__content {
  margin-left: 0;
}
.gutter--none .flow__content > * {
  padding: 0;
}

.gutter--large .flow__content {
  margin-left: -6rem;
}
.gutter--large .flow__content > * {
  padding: 0 0 0 6rem;
}

/* ==========================================================================
   #HIDDEN
   ========================================================================== */
.hidden {
  display: none;
}

.hidden-no-js {
  display: block;
}
.no-js .hidden-no-js {
  display: none;
}

.hidden-js {
  display: none;
}
.no-js .hidden-js {
  display: block;
}

/*  ==========================================================================
    #SCREENREADER
    ========================================================================== */
/**
 * Utility classes for catering for screen readers.
 * 
 * https://a11yproject.com/posts/how-to-hide-content/
 */
.visually-hidden {
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  white-space: nowrap;
  clip: rect(1px, 1px, 1px, 1px);
}

/* ==========================================================================
   #SPACING
   ========================================================================== */
.margin--bottom {
  margin-bottom: 1.5rem;
}
.margin--bottom-large {
  margin-bottom: 3.2rem;
}
.margin--bottom-small {
  margin-bottom: 0.75rem;
}
.margin--bottom-none {
  margin-bottom: 0;
}
.margin--left {
  margin-left: 1.5rem;
}
.margin--left-large {
  margin-left: 3.2rem;
}
.margin--left-small {
  margin-left: 0.75rem;
}
.margin--left-none {
  margin-left: 0;
}
.margin--left-auto {
  margin-left: auto;
}
.margin--right {
  margin-right: 1.5rem;
}
.margin--right-large {
  margin-right: 3.2rem;
}
.margin--right-small {
  margin-right: 0.75rem;
}
.margin--right-none {
  margin-right: 0;
}
.margin--right-auto {
  margin-right: auto;
}
.margin--top {
  margin-top: 1.5rem;
}
.margin--top-large {
  margin-top: 3.2rem;
}
.margin--top-small {
  margin-top: 0.75rem;
}
.margin--top-none {
  margin-top: 0;
}

.padding--bottom {
  padding-bottom: 1.5rem;
}
.padding--bottom-large {
  padding-bottom: 3.2rem;
}
.padding--bottom-small {
  padding-bottom: 0.75rem;
}
.padding--bottom-none {
  padding-bottom: 0;
}
.padding--left {
  padding-left: 1.5rem;
}
.padding--left-large {
  padding-left: 3.2rem;
}
.padding--left-small {
  padding-left: 0.75rem;
}
.padding--left-none {
  padding-left: 0;
}
.padding--left-auto {
  padding-left: auto;
}
.padding--right {
  padding-right: 1.5rem;
}
.padding--right-large {
  padding-right: 3.2rem;
}
.padding--right-small {
  padding-right: 0.75rem;
}
.padding--right-none {
  padding-right: 0;
}
.padding--right-auto {
  padding-right: auto;
}
.padding--top {
  padding-top: 1.5rem;
}
.padding--top-large {
  padding-top: 3.2rem;
}
.padding--top-small {
  padding-top: 0.75rem;
}
.padding--top-none {
  padding-top: 0;
}

/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * Classes to style text in various different ways.
 */
.font--default {
  font-family: var(--fontFamilyDefault);
}
.font--heading {
  font-family: var(--fontFamilyHeading);
}

.text--align-left {
  text-align: left;
}
.text--align-center {
  text-align: center;
}
.text--align-right {
  text-align: right;
}
.text--light {
  color: var(--colorTextLight);
}
.text--line-through {
  text-decoration: line-through;
}
.text--underline {
  text-decoration: underline;
}
.text--uppercase {
  text-transform: uppercase;
}
.text--size-h1 {
  font-size: var(--fontSizeH1Mobile);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  .text--size-h1 {
    font-size: var(--fontSizeH1);
  }
}
.text--size-h2 {
  font-size: var(--fontSizeH2Mobile);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  .text--size-h2 {
    font-size: var(--fontSizeH2);
  }
}
.text--size-h3 {
  font-size: var(--fontSizeH3Mobile);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  .text--size-h3 {
    font-size: var(--fontSizeH3);
  }
}
.text--size-h4 {
  font-size: var(--fontSizeH4Mobile);
  line-height: var(--lineHeightHeading);
}
@media (min-width: 80em) {
  .text--size-h4 {
    font-size: var(--fontSizeH4);
  }
}
.text--size-default {
  font-size: var(--fontSizeBase);
  line-height: var(--lineHeightDefault);
}
.text--size-small {
  font-size: var(--fontSizeSmall);
  line-height: var(--lineHeightParagraph);
}
.text--size-x-small {
  font-size: var(--fontSizeExtraSmall);
  line-height: var(--lineHeightParagraph);
}
.text--weight-bold {
  font-weight: var(--fontWeightBold);
}
.text--weight-normal {
  font-weight: var(--fontWeightDefault);
}

/* ==========================================================================
   #WIDTH
   ========================================================================== */
/**
 * Classes to control width of element.
 */
.width--100 {
  width: 100%;
}

.width--20 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--20 {
    width: 20%;
  }
}

.width--25 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--25 {
    width: 25%;
  }
}

.width--33 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--33 {
    width: 33.3333%;
  }
}

.width--40 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--40 {
    width: 40%;
  }
}

.width--50 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--50 {
    width: 50%;
  }
}

.width--60 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--60 {
    width: 60%;
  }
}

.width--66 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--66 {
    width: 66.6666%;
  }
}

.width--75 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--75 {
    width: 75%;
  }
}

.width--80 {
  width: 100%;
}
@media (min-width: 64em) {
  .width--80 {
    width: 80%;
  }
}

/* ==========================================================================
   #PRINT
   ========================================================================== */
/* ==========================================================================
   #PRINT/H5BP-PRINT (Taken from https://html5boilerplate.com, version 7.3.0)
   ========================================================================== */
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
*::before,
*::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
img {
    page-break-inside: avoid;
  }

  p,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
h3 {
    page-break-after: avoid;
  }
}
/* ==========================================================================
   #PRINT/DEFAULT
   ========================================================================== */