/*!*********************************************************************************************************************************************************************************************************************!*\
  !*** 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 ***!
  \*********************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   #RedKiteGames.Website.Theme THEME
   ========================================================================== */
@font-face {
  font-family: "D-DIN";
  src: url("../fonts/d-din-webfont.woff2") format("woff2"), url("../fonts/d-din-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: url("../fonts/d-dincondensed-webfont.woff2") format("woff2"), url("../fonts/d-dincondensed-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: url("../fonts/d-dincondensed-bold-webfont.woff2") format("woff2"), url("../fonts/d-dincondensed-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "D-DIN Expanded";
  src: url("../fonts/d-dinexp-webfont.woff2") format("woff2"), url("../fonts/d-dinexp-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "D-DIN Expanded";
  src: url("../fonts/d-dinexp-bold-webfont.woff2") format("woff2"), url("../fonts/d-dinexp-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "D-DIN Expanded";
  src: url("../fonts/d-dinexp-italic-webfont.woff2") format("woff2"), url("../fonts/d-dinexp-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
/* ==========================================================================
   #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: #cbccce;
  --colorAlertErrorBackground: #cd2027;
  --colorAlertErrorText: #ffffff;
  --colorAlertSuccessBackground: #231f20;
  --colorAlertSuccessText: #ffffff;
  --colorBlack: #000000;
  --colorBlackRGB: 0, 0, 0;
  --colorCarouselIndicator: #626366;
  --colorCarouselIndicatorActive: #cbccce;
  --colorCarouselIndicatorFocus: lighten(#cbccce, 15%);
  --colorError: #e20000;
  --colorGrey: #626366;
  --colorGreyLight: #cbccce;
  --colorPrimary: #cd2027;
  --colorPrimaryActive: darken(#cd2027, 10%);
  --colorSecondary: #231f20;
  --colorSiteBackground: #ffffff;
  --colorTextDefault: #000000;
  --colorTextLight: #ffffff;
  --colorWhite: #ffffff;
}

/* ==========================================================================
   #CONTENT
   ========================================================================== */
/**
 * Content spacing
 */
/**
 * Content Width
 */
/* ==========================================================================
   #EFFECTS
   ========================================================================== */
/* ==========================================================================
   #FORM
   ========================================================================== */
/* ==========================================================================
   #SPACING
   ========================================================================== */
/**
 * Control dimensions & spacing, favouring `rem` unit.
 */
/* ==========================================================================
   #TABLE
   ========================================================================== */
/* ==========================================================================
   #TYPOGRAPHY
   ========================================================================== */
:root {
  --fontFamilyDefault: "D-DIN Expanded", sans-serif;
  --fontFamilyHeading: "D-DIN Condensed", sans-serif;
  --fontSizeBase: 1.8rem;
  --fontSizeBaseMobile: 1.6rem;
  --fontSizeHero: calc(var(--fontSizeBase) * 5.33);
  --fontSizeHeroMobile: calc(var(--fontSizeBase) * 2.25);
  --fontSizeH1: calc(var(--fontSizeBase) * 5.33);
  --fontSizeH1Mobile: calc(var(--fontSizeBase) * 2.25);
  --fontSizeH2: calc(var(--fontSizeBase) * 4);
  --fontSizeH2Mobile: calc(var(--fontSizeBase) * 2);
  --fontSizeH3: calc(var(--fontSizeBase) * 2.66);
  --fontSizeH3Mobile: calc(var(--fontSizeBase) * 1.5);
  --fontSizeH4: calc(var(--fontSizeBase) * 1.333);
  --fontSizeH4Mobile: calc(var(--fontSizeBase) * 1.125);
  --fontSizeBlockquote: calc(var(--fontSizeBase) * 1.222);
  --fontSizeXLarge: calc(var(--fontSizeBase) * 1.75);
  --fontSizeXLargeMobile: calc(var(--fontSizeBaseMobile) * 1.75);
  --fontSizeLarge: calc(var(--fontSizeBase) * 1.333);
  --fontSizeLargeMobile: calc(var(--fontSizeBaseMobile) * 1.333);
  --fontSizeSmall: calc(var(--fontSizeBase) * 0.777);
  --fontSizeExtraSmall: 1.4rem;
  --fontWeightBold: 700;
  --fontWeightDefault: 400;
  --lineHeightDefault: 1.4;
  --lineHeightHeading: 1.2;
  --lineHeightHero: 1.4;
  --lineHeightParagraph: 1.4;
}

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

.group {
  *zoom: 1;
}

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

.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
   ========================================================================== */
/* ==========================================================================
   #ANCHOR
   ========================================================================== */
/**
 * Base styling for anchor links. See component 'links' for modifying these further
 */
a {
  color: var(--colorPrimary);
  text-decoration: underline;
}
a:hover {
  color: var(--colorPrimary);
  text-decoration: none;
}

/**
 * -----------------------------------------------------------------------------
 * $BLOCKQUOTE
 * -----------------------------------------------------------------------------
 */
blockquote {
  margin: 0 0 1.6rem 0;
  padding-left: 2.4rem;
  position: relative;
  border-left: 0.4rem solid var(--colorPrimary);
}
blockquote p {
  font-size: var(--fontSizeBaseMobile);
  font-style: italic;
  hanging-punctuation: first;
  text-indent: -0.4rem;
}
@media (min-width: 48em) {
  blockquote p {
    font-size: var(--fontSizeBlockquote);
  }
}
blockquote p:last-of-type {
  margin-bottom: 0;
}
blockquote cite {
  display: block;
  padding-top: 1.6rem;
  color: var(--colorGrey);
  font-style: normal;
}
blockquote cite strong {
  display: block;
  margin-bottom: 0;
  color: var(--colorTextDefault);
  font-size: var(--fontSizeBaseMobile);
}
@media (min-width: 48em) {
  blockquote cite strong {
    font-size: var(--fontSizeLarge);
  }
}

/* ==========================================================================
   #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. */
  line-height: var(--lineHeightDefault);
}

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

/**
 * -----------------------------------------------------------------------------
 * $FIGURE
 * -----------------------------------------------------------------------------
 */
figure {
  position: relative;
  margin: 0 0 1.6rem 0;
}
figure img,
figure picture {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
figure figcaption {
  padding-top: 0.8rem;
  font-style: italic;
  text-align: center;
}

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

/* ==========================================================================
   #HEADING
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1.5rem;
  margin-top: 0;
}
@media (min-width: 26.5625em) {
  h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 2.4rem;
  }
}
h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
  text-decoration: none;
}

h1 {
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH1Mobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
}
@media (min-width: 80em) {
  h1 {
    font-size: var(--fontSizeH1);
  }
}

h2 {
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH2Mobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
}
@media (min-width: 80em) {
  h2 {
    font-size: var(--fontSizeH2);
  }
}

h3 {
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH3Mobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
}
@media (min-width: 80em) {
  h3 {
    font-size: var(--fontSizeH3);
  }
}

h4 {
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH4Mobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
}
@media (min-width: 80em) {
  h4 {
    font-size: var(--fontSizeH4);
  }
}

/* ==========================================================================
   #HR
   ========================================================================== */
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: 1px;
  margin-top: 0;
  margin-bottom: 1.6rem;
  background-color: var(--colorGrey);
  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(--colorGreyLight);
  display: block;
  padding: 0.5rem 0.5rem;
  width: 100%;
  margin-bottom: 3.2rem;
  background-color: transparent;
  outline: none;
  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.6rem;
  padding-left: 3.2rem;
}
ol li {
  padding-bottom: 0.8rem;
  font-size: var(--fontSizeBase);
}
ol li:last-child {
  padding-bottom: 0;
}
ol li::marker {
  color: var(--colorPrimary);
}
ol ol {
  margin-bottom: 0;
  padding-top: 0.8rem;
}

/* ==========================================================================
   #LABEL
   ========================================================================== */
label {
  display: block;
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH4Mobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
}
@media (min-width: 80em) {
  label {
    font-size: var(--fontSizeH4);
  }
}

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

/**
 * -----------------------------------------------------------------------------
 * $MAIN
 * -----------------------------------------------------------------------------
 */
/**
 * 1. Fixes issue with full bleed components within a flow causing a 
 *    scroll bars to appear on the page
 */
main {
  overflow: hidden;
  /* 1. */
}

/* ==========================================================================
   #PARAGRAPH
   ========================================================================== */
/**
 * Default behaviour for a paragraph.
 */
p {
  margin-bottom: 1.5rem;
  margin-top: 0;
  font-size: var(--fontSizeBaseMobile);
}
@media (min-width: 26.5625em) {
  p {
    margin-bottom: 2.4rem;
  }
}
@media (min-width: 80em) {
  p {
    font-size: var(--fontSizeBase);
  }
}

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

/* ==========================================================================
   #SELECT
   ========================================================================== */
select {
  border: 0.2rem solid var(--colorTextLight);
  display: block;
  padding: 0.5rem 0.5rem;
  width: auto;
}
select:focus {
  border: 0.2rem solid var(--colorTextDefault);
  box-shadow: 0 0 6px 1px var(--colorPrimary);
}

/* ==========================================================================
   #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.6rem;
  padding-bottom: 1.6rem;
}
@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(--colorGreyLight);
  display: block;
  min-height: 12rem;
  padding: 0.5rem 0.5rem;
  width: 100%;
}
.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 {
  margin: 0;
  margin-bottom: 1.6rem;
  padding-left: 0;
  list-style: none;
}
ul li {
  position: relative;
  margin-bottom: 1.6rem;
  padding-left: 3.2rem;
  font-size: var(--fontSizeBase);
}
ul li:last-child {
  margin-bottom: 0;
}
ul li:before {
  content: "";
  left: 1.4rem;
  height: 0.6rem;
  position: absolute;
  top: 0.9rem;
  width: 0.6rem;
  transform: rotate(45deg);
  background-color: var(--colorPrimary);
}
ul ul {
  margin-bottom: 0;
  padding-top: 0.8rem;
  list-style: none;
}
ul ul li:before {
  background-color: transparent;
  border: 0.1rem solid var(--colorPrimary);
}

/* ==========================================================================
   #COMPONENTS
   ========================================================================== */
/* ==========================================================================
   #ALERT
   ========================================================================== */
/* ==========================================================================
   #VARIABLES
   ========================================================================== */
/* ==========================================================================
   #ALERT/DEFAULT
   ========================================================================== */
.alert {
  padding-bottom: 1.6rem;
  padding-top: 1.4rem;
  background-color: var(--colorAlertBackground);
  /* Maintain horizontal padding */
}
@media (min-width: 96em) {
  .alert {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}
.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);
}

/* ==========================================================================
   #BUTTON
   ========================================================================== */
/**
 * Various styles related to links or buttons.
 */
/* ==========================================================================
   #BUTTON/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #BUTTON/DEFAULT
   ========================================================================== */
.btn,
.btn:link,
.btn:visited {
  border: 0;
  display: inline-block;
  margin-bottom: 1.5rem;
  margin-right: 1.5rem;
  padding: 1.6rem 3.2rem;
  position: relative;
  vertical-align: top;
  background-color: var(--colorPrimary);
  outline: none;
  overflow: hidden;
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeBaseMobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
  color: var(--colorWhite);
  font-family: var(--fontFamilyDefault);
  font-weight: var(--fontWeightDefault);
  text-decoration: none;
  cursor: pointer;
}
@media (min-width: 80em) {
  .btn,
.btn:link,
.btn:visited {
    font-size: var(--fontSizeBase);
  }
}
.btn:last-child,
.btn:link:last-child,
.btn:visited:last-child {
  margin: 0;
}
.btn:before, .btn:after,
.btn:link:before,
.btn:link:after,
.btn:visited:before,
.btn:visited:after {
  content: "";
  height: 8rem;
  left: -6rem;
  position: absolute;
  top: 50%;
  width: 8rem;
  overflow: hidden;
  transform: translateX(-5rem) translateY(-50%);
  background-image: url("../content/icon-btn-primary-diamond.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}
.btn:after,
.btn:link:after,
.btn:visited:after {
  left: auto;
  right: -6rem;
  transform: translateX(5rem) translateY(-50%);
}
.btn:hover:before, .btn:hover:after,
.btn:link:hover:before,
.btn:link:hover:after,
.btn:visited:hover:before,
.btn:visited:hover:after {
  -webkit-animation-name: buttonHoverArrows;
          animation-name: buttonHoverArrows;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.btn:hover:after,
.btn:link:hover:after,
.btn:visited:hover:after {
  -webkit-animation-name: buttonHoverArrowsReversed;
          animation-name: buttonHoverArrowsReversed;
}

@-webkit-keyframes buttonHoverArrows {
  0% {
    transform: translateX(-5rem) translateY(-50%);
  }
  50% {
    transform: translateX(0) translateY(-50%);
  }
  100% {
    transform: translateX(-5rem) translateY(-50%);
  }
}

@keyframes buttonHoverArrows {
  0% {
    transform: translateX(-5rem) translateY(-50%);
  }
  50% {
    transform: translateX(0) translateY(-50%);
  }
  100% {
    transform: translateX(-5rem) translateY(-50%);
  }
}
@-webkit-keyframes buttonHoverArrowsReversed {
  0% {
    transform: translateX(5rem) translateY(-50%);
  }
  50% {
    transform: translateX(0) translateY(-50%);
  }
  100% {
    transform: translateX(5rem) translateY(-50%);
  }
}
@keyframes buttonHoverArrowsReversed {
  0% {
    transform: translateX(5rem) translateY(-50%);
  }
  50% {
    transform: translateX(0) translateY(-50%);
  }
  100% {
    transform: translateX(5rem) translateY(-50%);
  }
}
.btn:disabled {
  background-color: var(--colorbuttonDisabled);
  border: 1px solid var(--colorbuttonDisabled);
  color: var(--colorTextDefault);
}

/*  ==========================================================================
    #BUTTON/ICON
    ========================================================================== */
.btn--icon {
  border: 0;
  padding: 0;
  background-color: transparent;
}

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

/* ==========================================================================
   #BUTTON/SECONDARY
   ========================================================================== */
.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
  background-color: var(--colorSecondary);
  border: 1px solid var(--colorSecondary);
  color: var(--colorWhite);
}
.btn--secondary:before, .btn--secondary:after,
.btn--secondary:link:before,
.btn--secondary:link:after,
.btn--secondary:visited:before,
.btn--secondary:visited:after {
  background-image: url("../content/icon-btn-secondary-diamond.svg");
}

/* ==========================================================================
   #CARD
   ========================================================================== */
/* ==========================================================================
   #CARD/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #CARD/DEFAULT
   ========================================================================== */
.card {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  color: var(--colorBlack);
  text-decoration: none;
  overflow: hidden;
}
.card:hover {
  color: var(--colorBlack);
}
.card__media-image {
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.card__title {
  margin-bottom: 0;
  color: var(--colorPrimary);
  text-transform: uppercase;
}
.card__meta {
  display: block;
  margin-bottom: 1.5rem;
  font-size: var(--fontSizeLarge);
  font-weight: 700;
}
.card__body {
  padding: 23rem 2.4rem 2.4rem 2.4rem;
  position: relative;
  text-align: left;
  z-index: 2;
}

/* ==========================================================================
   #CARD/CAROUSEL
   ========================================================================== */
.card--carousel {
  display: block;
  position: relative;
  overflow: hidden;
  color: var(--colorWhite);
}
@media (min-width: 48em) {
  .card--carousel {
    grid-template-columns: repeat(6, 1fr);
  }
}
.card--carousel .card__background {
  grid-column: span 6;
  height: auto;
  margin-left: -0.8rem;
  margin-right: -0.8rem;
  width: auto;
}
@media (min-width: 48em) {
  .card--carousel .card__background {
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }
}
.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 0.5s ease-in-out;
}
.carousel__items .card--carousel .card__background {
  -webkit-animation-name: cardPictureCarouselIntro;
          animation-name: cardPictureCarouselIntro;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
.card--carousel:hover .card__background img {
  transform: scale3d(1.08, 1.08, 1);
}
.card--carousel .card__background--embed {
  max-height: calc(100vh - 90px);
}
.card--carousel .card__body {
  left: 3.2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
@media (min-width: 48em) {
  .card--carousel .card__body {
    left: 7rem;
  }
}
@media (min-width: 64em) {
  .card--carousel .card__body {
    left: 11rem;
  }
}
@media (min-width: 80em) {
  .card--carousel .card__body {
    left: 14rem;
  }
}
@media (min-width: 90em) {
  .card--carousel .card__body {
    left: 17rem;
  }
}
.card--carousel .card__body > * {
  -webkit-animation-name: cardBodyCarouselItemFade;
          animation-name: cardBodyCarouselItemFade;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -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: 1s;
          animation-delay: 1s;
}
.card--carousel .card__body > *:nth-child(2) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.card--carousel .card__body > *:nth-child(3) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

@-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
   ========================================================================== */
.card--job {
  height: 100%;
  padding-bottom: 1.6rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.6rem;
  background-color: #ebebeb;
}
.card--job .card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 0;
}
.card--job .card__body a {
  color: var(--colorTextDefault);
  text-decoration: none;
}
.card--job .card__body h3 {
  margin-bottom: 0.5rem;
  font-size: var(--fontSizeXLarge);
}
.card--job .card__body p {
  margin-top: auto;
}
.card--job .card__meta {
  margin: 0;
  font-size: var(--fontSizeBase);
}

/* ==========================================================================
   #CARD/NEWS
   ========================================================================== */
.card--news {
  align-items: flex-end;
  display: flex;
  height: 30rem;
}
@media (min-width: 64em) {
  .card--news {
    height: 46rem;
  }
}
.card--news .card__body {
  padding: 2.4rem;
}
.card--news .card__body a {
  color: var(--colorTextDefault);
  text-decoration: none;
}
.card--news .card__title {
  transition: color 0.5s ease-in-out;
}
.card--news .card__media {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.card--news .card__media:before {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  background-image: linear-gradient(180deg, rgba(var(--colorBlackRGB), 0) 0%, rgba(var(--colorBlackRGB), 0.7) 60%, rgba(var(--colorBlackRGB), 0.7) 100%);
}
.card--news .card__media:after {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background: var(--colorPrimary);
}
.card--news:hover .card__media:after {
  opacity: 1;
}
.card--news:hover .card__title {
  color: var(--colorWhite);
}

/*  ==========================================================================
    #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.6rem;
  width: 2rem;
}
.carousel__indicator .btn {
  border: 0;
  height: 100%;
  padding: 0;
  width: 100%;
  background-color: var(--colorCarouselIndicator);
  border-radius: 1rem;
}
.carousel__indicator .btn:focus, .carousel__indicator .btn:hover {
  background-color: var(--colorCarouselIndicatorFocus);
}
.carousel__indicator:last-child {
  margin-right: 0;
}
.carousel__indicator.is-active .btn {
  background-color: var(--colorCarouselIndicatorActive);
}

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

.carousel__previous-btn {
  left: 15px;
  transform: translateX(0) translateY(-50%);
}
@media (min-width: 30em) {
  .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;
}

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

.carousel__item {
  display: none;
  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: 73rem;
}
@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: 3.2rem;
  }
}
.content-feed__title {
  margin-bottom: 1.6rem;
  text-transform: var(--contentFeedTitleTextTransform);
}
@media (min-width: 48em) {
  .content-feed__title {
    margin: 0;
  }
}
.styled--dark .content-feed__title, .content-feed--inverted .content-feed__title {
  color: var(--colorTextInverted);
}
.content-feed__filters {
  align-items: flex-end;
  display: flex;
  flex-flow: row wrap;
  margin: 0 -1.6rem;
}
.content-feed__filter {
  border-left: 1.6rem solid transparent;
  border-right: 1.6rem solid transparent;
  margin-bottom: 1.6rem;
}
.content-feed__list {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -0.8rem;
}
.content-feed__item {
  flex-basis: 100%;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  margin-bottom: 1.6rem;
}
.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;
}

.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;
  /**
   * 1. Required to override a custom image being used as a 
   *    bullet point.
   */
}
.cookie-control__cookies > li {
  padding: 0;
}
.cookie-control__cookies > li:before {
  content: none;
  /* 1. */
}

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

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

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

.embed__source {
  margin-bottom: 0.8rem;
}
.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. Removes max-width from flow when a section is used in a layer
 */
.flow {
  margin-left: auto;
  margin-right: auto;
  max-width: 73rem;
  /* 1 */
  /* 2 */
  /* 3 */
}
article > .flow, main > .flow {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
@media (min-width: 23.4375em) {
  article > .flow, main > .flow {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
}
@media (min-width: 80em) {
  article > .flow, main > .flow {
    padding-left: 0;
    padding-right: 0;
  }
}
.flow .hero,
.flow .section {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}
.flow .hero .flow,
.flow .section .flow {
  max-width: none;
}
.constrain--wide .flow {
  max-width: 144rem;
}
body > .section .flow {
  max-width: none;
}

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

/* ==========================================================================
   #FOOTER
   ========================================================================== */
/* ==========================================================================
   #FOOTER/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #FOOTER/DEFAULT
   ========================================================================== */
.footer__content {
  display: flex;
  flex-flow: column wrap;
  padding-bottom: 3rem;
  padding-top: 2rem;
}
@media (min-width: 48em) {
  .footer__content {
    align-items: flex-start;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}
@media (min-width: 80em) {
  .footer__content {
    flex-flow: row;
  }
}
.footer__logo {
  display: block;
  margin-bottom: 0.8rem;
  margin-right: auto;
  max-width: 16rem;
  position: relative;
  width: 100%;
  z-index: 100;
}
@media (min-width: 48em) {
  .footer__logo {
    margin-right: 4.8rem;
    max-width: 16rem;
  }
}
.footer__logo img {
  display: block;
}
.footer__meta {
  width: 100%;
}
@media (min-width: 48em) {
  .footer__meta {
    margin-right: auto;
    margin-top: 1.6rem;
    width: auto;
  }
}
@media (min-width: 80em) {
  .footer__meta {
    flex-shrink: 0;
    margin-right: 4.8rem;
  }
}
.footer nav, .footer__nav {
  border-top: 0;
  margin-bottom: 1.6rem;
  width: 100%;
  z-index: 1;
  background-color: transparent;
}
@media (min-width: 48em) {
  .footer nav, .footer__nav {
    margin-bottom: 2.4rem;
    width: auto;
  }
}
.footer__secondary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 1.6rem;
  width: 100%;
}
@media (min-width: 48em) {
  .footer__secondary {
    align-self: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.2rem;
    width: 80%;
  }
}
@media (min-width: 64em) {
  .footer__secondary {
    margin-right: 0;
    width: 100%;
  }
}
@media (min-width: 80em) {
  .footer__secondary {
    width: auto;
  }
}
.footer__secondary > * {
  margin-bottom: 1.6rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

.is-nav-visible nav,
.is-nav-visible .header__nav {
  display: block;
}

/* ==========================================================================
   #FORM
   ========================================================================== */
/**
 * Various styles related to forms.
 */
/* ==========================================================================
   #FORM/CHECKBOXES
   ========================================================================== */
.checkboxes {
  display: block;
  padding: 0 0.5rem;
}
.checkboxes__item {
  display: block;
  margin-bottom: 1.6rem;
  position: relative;
}
.checkboxes--inline .checkboxes__item {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 1.6rem;
}
.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 {
  display: block;
  margin: 0 auto;
}
.form--horizontal {
  display: flex;
}
.form--horizontal > * {
  margin-right: 1.6rem;
}
.form--horizontal > *:last-child {
  margin-right: 0;
}

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

/* ==========================================================================
   #FORM/RADIOS
   ========================================================================== */
.radios {
  display: block;
  margin-top: 0.8rem;
  padding: 0 0.5rem;
}
.radios__item {
  display: block;
  margin-bottom: 1.6rem;
  position: relative;
}
.radios--inline .radios__item {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 1.6rem;
}
.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);
}

.form-content .section {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* ==========================================================================
   #GALLERY
   ========================================================================== */
/* ==========================================================================
   #GALLERY/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #GALLERY/DEFAULT
   ========================================================================== */
.gallery {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
}
@media (min-width: 23.4375em) {
  .gallery {
    margin-bottom: 2rem;
  }
}

.gallery__item {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 50%;
}
@media (min-width: 37.5em) {
  .gallery__item {
    width: 33.3%;
  }
}
@media (min-width: 48em) {
  .gallery__item {
    width: 25%;
  }
}

/* ==========================================================================
   #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: -1.6rem;
  margin-right: -1.6rem;
  list-style: none;
}

.grid__item {
  margin-bottom: 3.2rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  width: 100%;
}
@media (min-width: 48em) {
  .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: 48em) {
  .grid--double .grid__item {
    max-width: 50%;
  }
}

/* ==========================================================================
   #GRID/QUAD
   ========================================================================== */
/**
 * Creates a 4 column grid.
 */
@media (min-width: 48em) {
  .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: -3.2rem;
  margin-right: -3.2rem;
}
.grid--gutter-large .grid__item {
  margin-bottom: 6.4rem;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}

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

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

/* ==========================================================================
   #HEADER
   ========================================================================== */
/* ==========================================================================
   #HEADER/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #HEADER/DEFAULT
   ========================================================================== */
/**
 * 1. Prevents navigation submenus from appearing below any other z-indexed
 *    components.
 */
.header {
  position: relative;
  /* 1. */
  z-index: 100;
  /* 1. */
}
.header__content {
  align-items: flex-end;
  display: flex;
  flex-flow: row wrap;
  padding-bottom: 1.6rem;
  padding-top: 0.5rem;
}
@media (min-width: 80em) {
  .header__content {
    align-items: flex-end;
  }
}
.header__logo {
  max-width: 17rem;
  margin-right: auto;
  position: relative;
  width: 100%;
  z-index: 100;
}
@media (min-width: 48em) {
  .header__logo {
    max-width: 22rem;
  }
}
.header__logo img {
  display: block;
}
.header__nav-button {
  align-items: center;
  border: 0;
  display: flex;
  cursor: pointer;
  margin-bottom: 1rem;
  position: relative;
  z-index: 100;
  background-color: transparent;
  color: var(--colorBlack);
  text-transform: uppercase;
}
@media (min-width: 48em) {
  .header__nav-button {
    display: none;
  }
}
.header__nav-button:before {
  content: "";
  height: 1.4rem;
  margin-right: 0.5rem;
  width: 2.1rem;
  background-image: url("../content/icon-menu.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}
.header__nav-button--close {
  display: none;
}
.header__nav {
  display: none;
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: var(--colorBlack);
  border-top-color: var(--colorWhite);
  border-top-style: solid;
  border-top-width: 7rem;
}
@media (min-width: 48em) {
  .header__nav {
    border-top: 0;
    display: block;
    height: auto;
    margin-bottom: 0.2rem;
    padding-top: 0;
    position: static;
    width: auto;
    background-color: transparent;
  }
}

.is-nav-visible .header__nav {
  display: block;
}

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

/* ==========================================================================
   #HERO
   ========================================================================== */
/* ==========================================================================
   #HERO/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #HERO/DEFAULT
   ========================================================================== */
.hero {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  /**
   * 1. Vertically center the embed if it is taller than .hero__media
   */
}
.hero__body {
  margin-bottom: 4rem;
  position: absolute;
  text-align: center;
}
@media (min-width: 48em) {
  .hero__body {
    margin-bottom: 8rem;
  }
}
.hero__title {
  color: var(--colorWhite);
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeHeroMobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
}
@media (min-width: 80em) {
  .hero__title {
    font-size: var(--fontSizeHero);
  }
}
.hero__title span {
  color: var(--colorPrimary);
}
.hero__media {
  align-items: center;
  /* 1. */
  display: flex;
  max-height: 90vh;
  min-width: auto;
  position: relative;
  width: 100%;
  z-index: -100;
  overflow: hidden;
}
@media (min-width: 48em) {
  .hero__media {
    min-width: auto;
  }
}
.hero__media .embed {
  margin-bottom: 0;
  width: 100%;
}
.hero__media .embed__source {
  margin-bottom: 0;
}
.hero .scroll {
  bottom: 3rem;
  display: none;
  position: absolute;
}
@media (min-width: 64em) {
  .hero .scroll {
    display: block;
  }
}

/* ==========================================================================
   #HERO/SHORT
   ========================================================================== */
.hero--short {
  align-items: flex-end;
}
.hero--short .hero__media {
  max-height: 40rem;
}
.hero--short .hero__title {
  margin: 0 auto;
  position: relative;
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  transform: translateY(50%);
  color: var(--colorBlack);
}
.hero--short .hero__title:after {
  bottom: -0.8rem;
  content: "";
  left: -2.4rem;
  right: -2.4rem;
  top: -0.8rem;
  position: absolute;
  z-index: -1;
  background-color: var(--colorWhite);
}

/* ==========================================================================
   #HINT
   ========================================================================== */
/* ==========================================================================
   #HINT/DEFAULT
   ========================================================================== */
/* Used primarily for forms and providing further context to a fieldset */
.hint {
  display: block;
  margin-bottom: 1.6rem;
}

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

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

/* ==========================================================================
   #ICON/SOCIAL
   ========================================================================== */
.icon--social {
  width: 3rem;
}

/* ==========================================================================
   #LEVER-POSTING
   ========================================================================== */
/* ==========================================================================
   #LEVER POSTING/VARIABLES
   ========================================================================== */
:root {
  --leverPostingFakeParagraphLineHeight: 1.5rem;
  --leverPostingListSpacing: 1.5rem;
  --leverPostingListTitlePaddingTop: 0;
}
@media (min-width: 26.5625em) {
  :root {
    --leverPostingFakeParagraphLineHeight: 2.4rem;
    --leverPostingListSpacing: 2.4rem;
  }
}

/* ==========================================================================
   #LEVER-POSTING/DEFAULT
   ========================================================================== */
.lever-posting__content {
  margin-bottom: var(--leverPostingFakeParagraphLineHeight);
}
.lever-posting__content div {
  font-size: var(--fontSizeBaseMobile);
  line-height: var(--leverPostingFakeParagraphLineHeight);
}
@media (min-width: 80em) {
  .lever-posting__content div {
    font-size: var(--fontSizeBase);
  }
}
.lever-posting__lists {
  padding-top: var(--leverPostingListSpacing);
}
.lever-posting h3, .lever-posting__list-title {
  padding-top: var(--leverPostingListTitlePaddingTop);
  font-family: var(--fontFamilyDefault);
  font-size: var(--fontSizeBaseMobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightDefault);
  text-transform: none;
}
@media (min-width: 80em) {
  .lever-posting h3, .lever-posting__list-title {
    font-size: var(--fontSizeBase);
  }
}
.lever-posting ul {
  margin-bottom: var(--leverPostingListSpacing);
}

/* ==========================================================================
   #LINK
   ========================================================================== */
/* ==========================================================================
   #LINK/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #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.8rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-top: 0.8rem;
  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/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-bottom: initial;
  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.6rem;
}
.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 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-decoration: none;
}
@media (min-width: 48em) {
  .media {
    display: flex;
  }
}
.media__body {
  padding-top: 0.8rem;
}
@media (min-width: 48em) {
  .media__body {
    margin-left: 1.6rem;
    padding-top: 0;
  }
}

/* ==========================================================================
   #MODAL
   ========================================================================== */
/* ==========================================================================
   #MODAL/VARIABLES
   ========================================================================== */
:root {
  --modalAlignItems: center;
  --modalBackdropColor: var(--colorBlack);
  --modalBackdropOpacity: 0.5;
  --modalContentBackgroundColor: var(--colorWhite);
  --modalContentBackgroundPattern: none;
  --modalContentBoxShadow: none;
  --modalContentPadding: 1rem;
  --modalContentPaddingTablet: 2rem;
  --modalContentZIndex: 1;
  --modalJustifyContent: center;
  --modalZIndex: 500;
}

/* ==========================================================================
   #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);
  box-shadow: var(--modalContentBoxShadow);
}
@media (min-width: 48em) {
  .modal__content {
    padding: var(--modalContentPaddingTablet);
  }
}
@media (min-width: 37.5em) {
  .modal__content.constrain--cookie-control {
    border-radius: var(--modalBorderRadius);
  }
}

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

/* ==========================================================================
   #NAV
   ========================================================================== */
/* ==========================================================================
   #NAV/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #NAV/DEFAULT
   ========================================================================== */
.nav {
  display: block;
  padding-top: 1.6rem;
  position: relative;
}
@media (min-width: 48em) {
  .nav {
    padding-top: 0.5rem;
  }
}

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

.nav__item:first-child a {
  margin-left: 0;
}
.nav__item a {
  display: block;
  padding-bottom: 1.6rem;
  padding-top: 1.6rem;
  color: var(--colorWhite);
  font-size: var(--fontSizeLarge);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  /* Underline */
  /* Rotating square */
}
@media (min-width: 48em) {
  .nav__item a {
    margin-left: 4rem;
    padding: 0.5rem 0;
    position: relative;
    background-color: var(--colorWhite);
    color: var(--colorBlack);
    font-size: var(--fontSizeDefault);
  }
}
.nav__item a.is-current-page {
  color: var(--colorPrimary);
}
.nav__item a.is-current-page:before, .nav__item a.is-current-page:after {
  display: none;
}
@media (min-width: 48em) {
  .nav__item a:before {
    bottom: 0;
    content: "";
    height: 0.2rem;
    left: 50%;
    position: absolute;
    width: 0;
    transform: translateX(-50%);
    transition: width 0.5s ease-in-out;
    background-color: var(--colorPrimary);
  }
}
@media (min-width: 48em) {
  .nav__item a:after {
    bottom: 0.2rem;
    content: "";
    height: 1rem;
    left: 50%;
    margin-left: -0.5rem;
    position: absolute;
    width: 1rem;
    z-index: -1;
    transition: bottom 0.5s ease-in-out;
    transform: rotate(45deg);
    transform-origin: center center;
    background-color: var(--colorPrimary);
  }
}
.nav__item a:hover:before {
  width: 100%;
}
.nav__item a:hover:after {
  bottom: -0.5rem;
  -webkit-animation-name: navItemHoverRotatingSquare;
          animation-name: navItemHoverRotatingSquare;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes navItemHoverRotatingSquare {
  0% {
    transform: rotate(45deg);
  }
  40% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

@keyframes navItemHoverRotatingSquare {
  0% {
    transform: rotate(45deg);
  }
  40% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
.nav__item--parent > a {
  align-items: center;
  display: flex;
  position: relative;
}
.nav__item--parent > a:after {
  content: "";
  height: 0.6rem;
  margin-bottom: 0.4rem;
  margin-left: 0.5rem;
  width: 1rem;
  background-image: url("../content/icon-chevron.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(50%);
}

.nav__sub {
  display: none;
  background-color: var(--colorGrey);
}
@media (min-width: 48em) {
  .nav__sub {
    position: absolute;
    background-color: var(--colorWhite);
  }
}
.nav__sub a {
  padding-left: 3.2rem;
}
@media (min-width: 48em) {
  .nav__sub a {
    padding: 0.5rem;
  }
}
.is-selected .nav__sub {
  display: block;
}

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

/* ==========================================================================
   #NAV/FOOTER
   ========================================================================== */
.nav--footer .nav__items {
  flex-flow: row wrap;
}
@media (min-width: 48em) {
  .nav--footer .nav__items {
    flex-flow: row;
  }
}
.nav--footer .nav__item {
  margin-bottom: 0.8rem;
  width: 50%;
}
@media (min-width: 48em) {
  .nav--footer .nav__item {
    width: auto;
  }
}
.nav--footer .nav__item a {
  padding: 0;
  color: var(--colorBlack);
  font-size: var(--fontSizeBase);
  text-align: left;
}

/* ==========================================================================
   #NAV/PRIMARY
   ========================================================================== */
@media (min-width: 48em) {
  .nav--primary .nav__item a {
    padding: 0.5rem 0;
  }
}

/* ==========================================================================
   #PAGER
   ========================================================================== */
/* ==========================================================================
   #PAGER/DEFAULT
   ========================================================================== */
.pager {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}
.pager a {
  color: var(--colorPrimary);
}
.pager li {
  padding: 0;
}
.pager li:before {
  display: none;
}
.pager li:last-child {
  margin-left: auto;
}

/* ==========================================================================
   #SCROLL
   ========================================================================== */
/* ==========================================================================
   #SCROLL/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #SCROLL/DEFAULT
   ========================================================================== */
/* Used to display a scroll icon that indicates there is more content below the fold */
.scroll {
  display: block;
  height: 2.24rem;
  width: 2.26rem;
  background-image: url("../content/icon-scroll.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-animation-name: scrollBounce;
          animation-name: scrollBounce;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes scrollBounce {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-1rem);
  }
  30% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes scrollBounce {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-1rem);
  }
  30% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
/* ==========================================================================
   #SECTION
   ========================================================================== */
/* ==========================================================================
   #SECTION/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #SECTION/DEFAULT
   ========================================================================== */
.section {
  display: block;
  position: relative;
  padding-bottom: 4rem;
  padding-top: 4rem;
  overflow: hidden;
}
@media (min-width: 80em) {
  .section {
    padding-bottom: 8rem;
    padding-top: 8rem;
  }
}
.section__title {
  text-transform: uppercase;
}
.bg--grunge-dark .section__title {
  color: var(--colorWhite);
}

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

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

/* ==========================================================================
   #SECTION/FEATURE
   ========================================================================== */
.section--feature {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 0;
  padding-top: 0;
}
.section--feature .section__content {
  position: absolute;
  z-index: 1;
  color: var(--colorWhite);
}
.section--feature .section__content p {
  margin-bottom: 3.2rem;
  max-width: 50rem;
}
.section--feature .section__title,
.section--feature h2 {
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH1Mobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
@media (min-width: 80em) {
  .section--feature .section__title,
.section--feature h2 {
    font-size: var(--fontSizeH1);
  }
}
.section--feature .section__media {
  position: relative;
  overflow: hidden;
}
.section--feature .section__media:after {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  transform: translateX(-40%);
  background: radial-gradient(circle, var(--colorPrimary) 0%, rgba(0, 0, 0, 0) 50%);
}
.section--feature.section--center .section__content p {
  margin-left: auto;
  margin-right: auto;
}
.section--feature.section--center .section__media:after {
  transform: translateX(0);
}
.section--feature.section--right .section__content p {
  margin-left: auto;
}
.section--feature.section--right .section__media:after {
  transform: translateX(40%);
}

/* ==========================================================================
   #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/OFFSET
   ========================================================================== */
.section--offset-top {
  margin-top: -4rem;
}
@media (min-width: 80em) {
  .section--offset-top {
    margin-top: -8rem;
  }
}
.section--offset-top .section__content {
  padding-top: 0;
}

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

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

/* ==========================================================================
   #TEXT WITH IMAGE
   ========================================================================== */
/* ==========================================================================
   #TEXT WITH IMAGE/VARIABLES
   ========================================================================== */
/* ==========================================================================
   #TEXT WITH IMAGE/DEFAULT
   ========================================================================== */
.text-with-image__content {
  min-height: 100%;
  padding: 3.2rem;
}
@media (min-width: 80em) {
  .text-with-image__content {
    padding: 10rem;
  }
}
.text-with-image__content h3 {
  font-family: var(--fontFamilyDefault);
  font-style: normal;
  font-weight: var(--fontWeightDefault);
  font-size: var(--fontSizeLargeMobile);
  line-height: var(--lineHeightDefault);
  text-transform: initial;
}
@media (min-width: 80em) {
  .text-with-image__content h3 {
    font-size: var(--fontSizeLarge);
  }
}
.bg--grunge-dark .text-with-image__content {
  color: var(--colorWhite);
}
.text-with-image--angled .text-with-image__content {
  position: relative;
  background: var(--colorPrimary);
  color: var(--colorWhite);
}
.text-with-image--angled .text-with-image__content:before {
  border-style: solid;
  border-width: 120rem 10rem 0 0;
  border-color: var(--colorPrimary) transparent transparent transparent;
  content: " ";
  height: 0;
  left: 100%;
  position: absolute;
  top: 100%;
  width: 0;
  padding-left: 5rem;
  transform: rotate(90deg);
  transform-origin: top left;
  opacity: 0.5;
  z-index: 1;
}
.text-with-image--angled .text-with-image__content:after {
  border-style: solid;
  border-width: 120rem 10rem 0 0;
  border-color: var(--colorPrimary) transparent transparent transparent;
  content: " ";
  height: 0;
  left: 100%;
  position: absolute;
  top: 100%;
  width: 0;
  transform: rotate(90deg);
  transform-origin: top left;
  z-index: 2;
}
@media (min-width: 60em) {
  .text-with-image--angled .text-with-image__content:before {
    left: 100%;
    top: 0;
    transform: rotate(0deg);
  }
  .text-with-image--angled .text-with-image__content:after {
    left: 100%;
    top: 0;
    transform: rotate(0deg);
  }
}
.text-with-image--angled .text-with-image__content a {
  color: var(--colorWhite);
}
.text-with-image__title {
  position: relative;
  text-transform: uppercase;
}
.text-with-image__title em {
  font-style: normal;
  color: var(--colorPrimary);
}
.text-with-image--angled .text-with-image__title em {
  color: var(--colorSecondary);
}
.text-with-image__title:before {
  content: " ";
  height: 3.2rem;
  left: -3.2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  background: url(../content/red-diamond.svg) 0 0 no-repeat transparent;
  background-size: 3.2rem 3.2rem;
}
@media (min-width: 80em) {
  .text-with-image__title:before {
    height: 8rem;
    left: -10rem;
    width: 8rem;
    background-size: 8rem 8rem;
  }
}
.text-with-image__media {
  height: 100%;
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 50rem;
}
.text-with-image__image {
  display: block;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

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

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

/* ==========================================================================
   #TRUMPS
   ========================================================================== */
/**
 * -----------------------------------------------------------------------------
 * $ALIGNMENT
 * -----------------------------------------------------------------------------
 */
.align--full, .align--wide {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}
@media (min-width: 48em) {
  .align--wide {
    left: 0%;
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
    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-light {
  background-color: var(--colorGreyLight);
}
.bg--color-white {
  background-color: var(--colorWhite);
}
.bg--grunge-light {
  background: url(../content/bg-grunge-light.jpg) 0 0 repeat white;
}
.bg--grunge-dark {
  background: url(../content/bg-grunge-dark.jpg) 0 0 repeat black;
}

/**
 * -----------------------------------------------------------------------------
 * $CONSTRAIN
 * -----------------------------------------------------------------------------
 */
/**
 * Helper classes for restricted width of a container.
 */
.constrain {
  margin-left: auto;
  margin-right: auto;
  max-width: 73rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 23.4375em) {
  .constrain {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
}
@media (min-width: 96em) {
  .constrain {
    padding-left: 0;
    padding-right: 0;
  }
}
.constrain--large {
  max-width: 112rem;
}
.constrain--wide {
  max-width: 144rem;
}
.constrain--no-gutter {
  padding-left: 0;
  padding-right: 0;
}
.constrain--allow-overflow {
  overflow: visible;
}
.constrain--cookie-control {
  max-width: 60rem;
}

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

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

/**
 * -----------------------------------------------------------------------------
 * $EFFECTS
 * -----------------------------------------------------------------------------
 */
/**
 * Collection of effects to elevate brand.
 */
.effect--triangled {
  padding: 0 0.8rem;
  position: relative;
}
.effect--triangled > *:first-child {
  position: relative;
}
.effect--triangled > *:first-child:before {
  content: " ";
  height: 3.2rem;
  left: -3.2rem;
  position: absolute;
  top: 0;
  width: 3.2rem;
  background: url(../content/red-diamond.svg) 0 0 no-repeat transparent;
  background-size: 3.2rem 3.2rem;
}
@media (min-width: 80em) {
  .effect--triangled > *:first-child:before {
    height: 8rem;
    left: -8rem;
    width: 8rem;
    background-size: 8rem 8rem;
  }
}
@media (min-width: 64em) {
  .effect--triangled {
    padding: 0 0 0 8rem;
  }
}

/**
 * -----------------------------------------------------------------------------
 * $FLOAT
 * -----------------------------------------------------------------------------
 */
/*
 * Hey, are you sure you wanna do this? Most of the time building a layout
 * with display: flex or display: grid will produce a better outcome.
 */
.float--left {
  float: left;
}
.float--right {
  float: right;
}
.float--left-content {
  float: left;
  margin-right: 1.6rem;
  max-width: 40%;
}
.float--right-content {
  float: right;
  margin-left: 1.6rem;
  max-width: 40%;
}
@media (min-width: 48em) {
  .float--left-content-tablet {
    float: left;
    margin-right: 1.6rem;
    max-width: 40%;
  }
}
@media (min-width: 48em) {
  .float--right-content-tablet {
    float: right;
    margin-left: 1.6rem;
    max-width: 40%;
  }
}

/* ==========================================================================
   #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.6rem;
}
.margin--bottom-gigantic {
  margin-bottom: 4.8rem;
}
.margin--bottom-huge {
  margin-bottom: 4rem;
}
.margin--bottom-large {
  margin-bottom: 3.2rem;
}
.margin--bottom-medium {
  margin-bottom: 2.4rem;
}
.margin--bottom-small {
  margin-bottom: 0.8rem;
}
.margin--bottom-tiny {
  margin-bottom: 0.4rem;
}
.margin--bottom-none {
  margin-bottom: 0;
}
.margin--bottom-auto {
  margin-bottom: auto;
}
.margin--left {
  margin-left: 1.6rem;
}
.margin--left-gigantic {
  margin-left: 4.8rem;
}
.margin--left-huge {
  margin-left: 4rem;
}
.margin--left-large {
  margin-left: 3.2rem;
}
.margin--left-medium {
  margin-left: 2.4rem;
}
.margin--left-small {
  margin-left: 0.8rem;
}
.margin--left-tiny {
  margin-left: 0.4rem;
}
.margin--left-none {
  margin-left: 0;
}
.margin--left-auto {
  margin-left: auto;
}
.margin--right {
  margin-right: 1.6rem;
}
.margin--right-gigantic {
  margin-right: 4.8rem;
}
.margin--right-huge {
  margin-right: 4rem;
}
.margin--right-large {
  margin-right: 3.2rem;
}
.margin--right-medium {
  margin-right: 2.4rem;
}
.margin--right-small {
  margin-right: 0.8rem;
}
.margin--right-tiny {
  margin-right: 0.4rem;
}
.margin--right-none {
  margin-right: 0;
}
.margin--right-auto {
  margin-bottom: auto;
}
.margin--top {
  margin-top: 1.6rem;
}
.margin--top-gigantic {
  margin-top: 4.8rem;
}
.margin--top-huge {
  margin-top: 4rem;
}
.margin--top-large {
  margin-top: 3.2rem;
}
.margin--top-medium {
  margin-top: 2.4rem;
}
.margin--top-small {
  margin-top: 0.8rem;
}
.margin--top-tiny {
  margin-top: 0.4rem;
}
.margin--top-none {
  margin-top: 0;
}
.margin--top-auto {
  margin-top: auto;
}

.padding--bottom {
  padding-bottom: 1.6rem;
}
.padding--bottom-gigantic {
  padding-bottom: 4.8rem;
}
.padding--bottom-huge {
  padding-bottom: 4rem;
}
.padding--bottom-large {
  padding-bottom: 3.2rem;
}
.padding--bottom-medium {
  padding-bottom: 2.4rem;
}
.padding--bottom-small {
  padding-bottom: 0.8rem;
}
.padding--bottom-tiny {
  padding-bottom: 0.4rem;
}
.padding--bottom-none {
  padding-bottom: 0;
}
.padding--left {
  padding-left: 1.6rem;
}
.padding--left-gigantic {
  padding-left: 4.8rem;
}
.padding--left-huge {
  padding-left: 4rem;
}
.padding--left-large {
  padding-left: 3.2rem;
}
.padding--left-medium {
  padding-left: 2.4rem;
}
.padding--left-small {
  padding-left: 0.8rem;
}
.padding--left-tiny {
  padding-left: 0.4rem;
}
.padding--left-none {
  padding-left: 0;
}
.padding--none {
  padding: 0;
}
.padding--right {
  padding-right: 1.6rem;
}
.padding--right-gigantic {
  padding-right: 4.8rem;
}
.padding--right-huge {
  padding-right: 4rem;
}
.padding--right-large {
  padding-right: 3.2rem;
}
.padding--right-medium {
  padding-right: 2.4rem;
}
.padding--right-small {
  padding-right: 0.8rem;
}
.padding--right-tiny {
  padding-right: 0.4rem;
}
.padding--right-none {
  padding-right: 0;
}
.padding--top {
  padding-top: 1.6rem;
}
.padding--top-gigantic {
  padding-top: 4.8rem;
}
.padding--top-huge {
  padding-top: 4rem;
}
.padding--top-large {
  padding-top: 3.2rem;
}
.padding--top-medium {
  padding-top: 2.4rem;
}
.padding--top-small {
  padding-top: 0.8rem;
}
.padding--top-tiny {
  padding-top: 0.4rem;
}
.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--line-through {
  text-decoration: line-through;
}
.text--title {
  padding-top: 2.4rem;
  font-family: var(--fontFamilyHeading);
  font-style: normal;
  font-size: var(--fontSizeH1Mobile);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightHeading);
  text-transform: uppercase;
  background-color: var(--colorWhite);
}
@media (min-width: 80em) {
  .text--title {
    font-size: var(--fontSizeH1);
  }
}
.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-large {
  font-size: var(--fontSizeLarge);
  font-weight: var(--fontWeightBold);
  line-height: var(--lineHeightDefault);
}
.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
   ========================================================================== */