@import url(//hello.myfonts.net/count/3e61eb);
@charset "UTF-8";
/*
1. Vendors - contains 3rd party code. If you need to do any overrides, create a new directory (vendor-extensions) that will override any css, rather than editing vendor files directly.
2. Utilities - holds sass tools, helpers, variables, functions, mixins and configs. These files should not output any CSS.
3. Base - boilerplate code, including standard styles and typographic rules used throughout.
4. Layout - contains systems for layout such as header, footer, grid systems.
5. Components - styles for buttons, carousels, sliders, widgets etc.
6. Parts - styles for blocks and parts
7. Templates - contains styles for specific individual templates.
8. Themes - contains themes eg alternative colour schemes.
Delete any un-used files or directories.
*/
/*! 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;
  /* 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;
  /* 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;
}

.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.glide * {
  box-sizing: inherit;
}
.glide__track {
  overflow: hidden;
}
.glide__slides {
  position: relative;
  width: 100%;
  list-style: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.glide__slides--dragging {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.glide__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  white-space: normal;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.glide__slide a {
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.glide__arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.glide__bullets {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.glide--rtl {
  direction: rtl;
}

:root {
  --base-font-size: 18px;
  /* also update --slide-max-height */
  --transition-duration: 0.3s;
  --transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  --zoom-icon-background: hsla(210, 38%, 16%, 0.94);
  --zoom-icon-color: #ffffff;
  --lightbox-background: rgba(0,0,0,0.85);
  --lightbox-z-index: 1337;
  --caption-background: rgba(0,0,0,0.8);
  --caption-color: #eeeeee;
  --counter-background: transparent;
  --counter-color: #ffffff;
  --button-background: transparent;
  --button-navigation-background: rgba(0,0,0,0.5);
  --button-color: #ffffff;
  --loader-color: #ffffff;
  --slide-max-height: calc(100vh - 2.77778em);
  /* 50/18px, em() does not work here */
  --slide-max-width: 100vw;
}

/**
 * Lightbox link
 *
 */
.tobii-zoom {
  border: 0;
  box-shadow: none;
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.tobii-zoom img {
  display: block;
}
.tobii-zoom__icon {
  align-items: center;
  background-color: hsla(210, 38%, 16%, 0.94);
  background-color: var(--zoom-icon-background);
  top: 0.4444444444em;
  color: #ffffff;
  color: var(--zoom-icon-color);
  display: flex;
  height: 1.7777777778em;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 0.4444444444em;
  width: 1.7777777778em;
}
.tobii-zoom__icon svg {
  fill: none;
  height: 1.3333333333em;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  stroke: currentColor;
  width: 1.3333333333em;
}

.tobii-is-open {
  overflow-y: hidden;
}

/**
 * Lightbox
 *
 */
.tobii {
  background-color: rgba(0,0,0,0.85);
  background-color: var(--lightbox-background);
  bottom: 0;
  box-sizing: border-box;
  contain: strict;
  font-size: 18px;
  font-size: var(--base-font-size);
  left: 0;
  line-height: 1.5;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1337;
  z-index: var(--lightbox-z-index);
}
.tobii[aria-hidden=true] {
  display: none;
}
.tobii *, .tobii *::before, .tobii *::after {
  box-sizing: inherit;
}

/**
 * Slider
 *
 */
.tobii__slider {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 2.7777777778em;
  will-change: transform;
}
.tobii__slider[aria-hidden=true] {
  display: none;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .tobii__slider--animate:not(.tobii__slider--is-dragging) {
    transition-duration: 0.3s;
    transition-duration: var(--transition-duration);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: var(--transition-timing-function);
  }
}
.tobii__slider--is-draggable [data-type] {
  cursor: -webkit-grab;
  cursor: grab;
}
.tobii__slider--is-dragging [data-type] {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/**
 * Slide
 *
 */
.tobii__slide {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.tobii__slide:not(.tobii__slide--is-active) {
  visibility: hidden;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .tobii__slide:not(.tobii__slide--is-active) {
    transition-duration: 0.3s;
    transition-duration: var(--transition-duration);
    transition-property: visibility;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: var(--transition-timing-function);
  }
}
.tobii__slide [data-type] {
  max-height: calc(100vh - 2.77778em);
  max-height: var(--slide-max-height);
  max-width: 100vw;
  max-width: var(--slide-max-width);
  overflow: hidden;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}
.tobii__slide iframe, .tobii__slide video {
  display: block !important;
}
.tobii__slide figure {
  margin: 0;
  position: relative;
}
.tobii__slide figure > img {
  display: block;
  height: auto;
  max-height: calc(100vh - 2.77778em);
  max-height: var(--slide-max-height);
  max-width: 100vw;
  max-width: var(--slide-max-width);
  width: auto;
}
.tobii__slide figure > figcaption {
  background-color: rgba(0,0,0,0.8);
  background-color: var(--caption-background);
  bottom: 0;
  color: #eeeeee;
  color: var(--caption-color);
  padding: 0.2222222222em 0.4444444444em;
  position: absolute;
  white-space: pre-wrap;
  width: 100%;
}
.tobii__slide [data-type=html] video {
  cursor: auto;
  max-height: calc(100vh - 2.77778em);
  max-height: var(--slide-max-height);
  max-width: 100vw;
  max-width: var(--slide-max-width);
}
.tobii__slide [data-type=iframe] {
  /* Fix iframe scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, 0, 0);
}
.tobii__slide [data-type=iframe] iframe {
  height: calc(100vh - 2.77778em);
  height: var(--slide-max-height);
  width: 100vw;
  width: var(--slide-max-width);
}

/**
 * Buttons
 *
 */
.tobii__btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  background-color: var(--button-background);
  border: 0.0555555556em solid transparent;
  color: #ffffff;
  color: var(--button-color);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  margin: 0;
  opacity: 0.5;
  padding: 0;
  position: absolute;
  touch-action: manipulation;
  will-change: opacity;
  z-index: 1;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .tobii__btn {
    transition-duration: 0.3s;
    transition-duration: var(--transition-duration);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: var(--transition-timing-function);
    will-change: opacity, transform;
  }
}
.tobii__btn svg {
  fill: none;
  height: 3.3333333333em;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  stroke: currentColor;
  width: 3.3333333333em;
}
.tobii__btn--previous, .tobii__btn--next {
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  background-color: var(--button-navigation-background);
  border-radius: 0.2777777778em;
}
.tobii__btn--previous {
  left: 0.8888888889em;
}
.tobii__btn--next {
  right: 0.8888888889em;
}
.tobii__btn--close {
  right: 0.2777777778em;
  top: 0.2777777778em;
  width: 2.2222222222em;
  height: 2.2222222222em;
}
.tobii__btn--close svg {
  transform: scale(1.4);
  width: 100%;
  height: 100%;
}
.tobii__btn:disabled, .tobii__btn[aria-hidden=true] {
  visibility: hidden;
  cursor: default;
}

/**
 * Counter
 *
 */
.tobii__counter {
  background-color: transparent;
  background-color: var(--counter-background);
  color: #ffffff;
  color: var(--counter-color);
  font-size: 1.1111111111em;
  left: 0.8333333333em;
  line-height: 1;
  position: absolute;
  top: 0.8333333333em;
  z-index: 1;
  opacity: 0.8;
}
.tobii__counter[aria-hidden=true] {
  display: none;
}

/**
 * Loader
 *
 */
.tobii__loader {
  display: inline-block;
  height: 5.5555555556em;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5.5555555556em;
}
.tobii__loader::before {
  -webkit-animation: spin 1s infinite;
          animation: spin 1s infinite;
  border-radius: 100%;
  border: 0.2222222222em solid #949ba3;
  border-top-color: #ffffff;
  border-top-color: var(--loader-color);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.tobii__slide .tobii-html {
  background: #ffffff;
  padding: 10px 20px;
  max-width: 800px;
}

/* CONFIG========================
   Set all variables here
   1. FONTS
   2. COLOURS
   3. CONTAINER WIDTHS
   4. LAYOUT VARIABLES
============================== */
/* 1. FONTS======================
   $ff for font family
   $fs for font size
   $flh for line height
   $fls for letter spacing.
   $fw for font weights
============================== */
@font-face {
  font-family: "TTFirsNeue";
  src: url(b26d187547fc25a1e186a178719568c5.woff2) format("woff2"), url(e410e545267065464b8c01485f5db1e9.woff) format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "TTFirsNeue";
  src: url(c7c7004c107d47c76f6dbb343d3b6c8c.woff2) format("woff2"), url(eb2b738a092d486bc86e0295030d8194.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TTFirsNeue";
  src: url(9a088713ddaa8ca38adbfd0ec7962c8f.woff2) format("woff2"), url(e62055f2a8bf4e707cca9553025e53a6.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}
/* 2. COLOURS====================
   $c for colours
   $ct for transparent colours
   $cg for gradients
============================== */
/* 3. CONTAINER WIDTHS===========
   $cw for container widths
   !not for responsive
============================== */
/* 4. LAYOUT VARIABLES===========
   $lo
============================== */
/* MIXINS========================
  Sass helpers
============================== */
/**
 * Use this mixin to declare a set of CSS Custom Properties.
 * The variables in $css_variables will be properly prefixed.
 * The use of this mixin is encouraged to keep a good scalability.
 *
 * Usage:
 *
 * @include cssvars((
 *  base-font-size: 65.5%,
 *  font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif,
 *
 *  primary-color: #33b5e5,
 *  secondary-color: #ff500a,
 * ));
 *
 * Will result in:
 *
 * root {
 *    --prefix-var-name: value;
 *    --prefix-var-name: value;
 *    --prefix-var-name: value;
 * }
 *
 */
/**
 * Retrieve a css variable value with prefix
 *
 * Usage
 *
 * @include cssvars((...));
 *
 * .btn-primary {
 *  height: cssvar(button-height);
 * line-height: cssvar(button-height);
 * color: cssvar(button-color);
 * background-color: cssvar(button-background);
 *   &--big {
 *     // ** LOOK HERE **
 *     @include cssvar(button-height, 56px);
 *   }
 * }
 *
 * Will result in
 *
 * :root { ...vars }
 *
 * .btn-primary {
 *   height: var(--pm-button-height);
 *   line-height: var(--pm-button-height);
 *   color: var(--pm-button-color);
 *   background-color: var(--pm-button-height);
 * }
 *
 * .btn-primary--big {
 *   --pm-button-height: 56px;
 * }
 */
/* RESPONSIVE====================
  Breakpoints
============================== */
/*
Use this file to overwrite any breakpoints or media types,
or add any new custom breakpoints.

Media queries come from the plugin include-media
Src: https://eduardoboucas.github.io/include-media/#features

Breakpoints are:
  'phone': 320px
  'tablet': 768px
  'desktop': 1024px

Media types are:
  'screen': 'screen',
  'print': 'print',
  'handheld': 'handheld',
  'landscape': '(orientation: landscape)',
  'portrait': '(orientation: portrait)',
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'


To add a new set of breakpoints:
$my-weird-bp: ">=tablet", "<815px", "landscape", "retina3x";
@include media($my-weird-bp...) {
  display: inline-block;
}

Some examples of usage are:
@include media(">tablet", "<=desktop") {}
@include media("retina2x", ">desktop") {}
@include media-context(('custom': 678px)) {
  .my-component {
    @include media(">phone", "<=custom") {
      border-radius: 100%;
    }
  }
}
*/
/* ROOT VARS=====================
  Base CSS variables
============================== */
:root {
  --make-columns: repeat(4, 1fr);
  --make-rows: auto;
  --make-justify: stretch;
  --make-align: stretch;
  --make-gap: 23px;
  --make-font-family: TTFirsNeue, sans-serif;
  --make-font-size: 1rem;
  --make-font-size-tiny: 0.77rem;
  --make-font-size-small: 0.9rem;
  --make-font-size-medium: 1.15rem;
  --make-font-size-big: 1.3rem;
  --make-font-size-large: 1.7rem;
  --make-font-size-title: 2.4rem;
  --make-line-height: 133%;
  --make-line-height-small: 116%;
  --make-line-height-tight: 100%;
  --make-line-height-big: 155%;
  --make-font-spacing: 0;
  --make-font-spacing-slight: 1px;
  --make-font-spacing-more: 1.5px;
  --make-font-color: white;
  --make-font-color-alt: #1d1d39;
  --make-font-color-bright: #fd03fd;
  --make-button-bg: #fd03fd;
  --make-button-color: #1d1d39;
  --make-button-bg-hover: white;
  --make-button-color-hover: #fd03fd;
  --make-section-padding-value: 3.8rem;
  --make-section-padding: 3.8rem 0;
  --make-border-radius: 4px;
  --make-transition-time: 0.5s;
  --make-transition-time-long: 1s;
  --make-container-max: 1340px;
  --make-container-width: 80vw;
  --make-container-gap: calc((100vw - var(--make-container-width)) / 2);
}
@media (min-width: 768px) {
  :root {
    --make-columns: repeat(12, 1fr);
    --make-gap: 30px;
  }
}
@media (min-width: 768px) {
  :root {
    --make-container-width: 90vw;
  }
}

@-webkit-keyframes wibble {
  0%, 6.6% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  1% {
    transform: translateX(-5px) rotate(-1deg);
  }
  2% {
    transform: translateX(2.5px) rotate(1deg);
  }
  3% {
    transform: translateX(-2.5px) rotate(-0.6deg);
  }
  4% {
    transform: translateX(1.5px) rotate(0.4deg);
  }
  5% {
    transform: translateX(-1px) rotate(-0.2deg);
  }
}

@keyframes wibble {
  0%, 6.6% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  1% {
    transform: translateX(-5px) rotate(-1deg);
  }
  2% {
    transform: translateX(2.5px) rotate(1deg);
  }
  3% {
    transform: translateX(-2.5px) rotate(-0.6deg);
  }
  4% {
    transform: translateX(1.5px) rotate(0.4deg);
  }
  5% {
    transform: translateX(-1px) rotate(-0.2deg);
  }
}
@-webkit-keyframes activateCurrentSlideContent {
  0% {
    font-size: 0;
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
  50% {
    font-size: 0;
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
  80% {
    margin-top: 0;
  }
  100% {
    font-size: 1rem;
    font-size: var(--make-font-size);
    opacity: 1;
    height: auto;
    visibility: visible;
    margin-top: 1.25rem;
  }
}
@keyframes activateCurrentSlideContent {
  0% {
    font-size: 0;
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
  50% {
    font-size: 0;
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
  80% {
    margin-top: 0;
  }
  100% {
    font-size: 1rem;
    font-size: var(--make-font-size);
    opacity: 1;
    height: auto;
    visibility: visible;
    margin-top: 1.25rem;
  }
}
@-webkit-keyframes activateCurrentSlideSubtitle {
  0% {
    max-width: 100%;
    color: white;
    color: var(--make-font-color);
  }
  50% {
    max-width: 100%;
    color: white;
    color: var(--make-font-color);
  }
  100% {
    max-width: 55.33%;
    color: #fd03fd;
    color: var(--make-font-color-bright);
  }
}
@keyframes activateCurrentSlideSubtitle {
  0% {
    max-width: 100%;
    color: white;
    color: var(--make-font-color);
  }
  50% {
    max-width: 100%;
    color: white;
    color: var(--make-font-color);
  }
  100% {
    max-width: 55.33%;
    color: #fd03fd;
    color: var(--make-font-color-bright);
  }
}
@-webkit-keyframes activateCurrentSlide {
  0% {
    background: linear-gradient(230deg, #387B90 0%, #333465 100%);
    color: white;
    color: var(--make-font-color);
    width: 166%;
    left: -33%;
  }
  50% {
    background: linear-gradient(230deg, #387B90 0%, #333465 100%);
    color: white;
    color: var(--make-font-color);
    width: 166%;
    left: -33%;
  }
  100% {
    background: white;
    color: #1d1d39;
    color: var(--make-font-color-alt);
    width: 300%;
    left: -100%;
  }
}
@keyframes activateCurrentSlide {
  0% {
    background: linear-gradient(230deg, #387B90 0%, #333465 100%);
    color: white;
    color: var(--make-font-color);
    width: 166%;
    left: -33%;
  }
  50% {
    background: linear-gradient(230deg, #387B90 0%, #333465 100%);
    color: white;
    color: var(--make-font-color);
    width: 166%;
    left: -33%;
  }
  100% {
    background: white;
    color: #1d1d39;
    color: var(--make-font-color-alt);
    width: 300%;
    left: -100%;
  }
}
@-webkit-keyframes slideUp {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0;
  }
}
@keyframes slideUp {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0;
  }
}
@-webkit-keyframes slideDown {
  0% {
    bottom: 0;
    z-index: 10;
  }
  50% {
    bottom: -100%;
    z-index: 10;
  }
  100% {
    position: relative;
    z-index: 1;
  }
}
@keyframes slideDown {
  0% {
    bottom: 0;
    z-index: 10;
  }
  50% {
    bottom: -100%;
    z-index: 10;
  }
  100% {
    position: relative;
    z-index: 1;
  }
}
@-webkit-keyframes growCircle {
  0% {
    background: #fd03fd;
  }
  100% {
    background: #fd03fd;
    transform: scale(3);
    transform-origin: 50%;
  }
}
@keyframes growCircle {
  0% {
    background: #fd03fd;
  }
  100% {
    background: #fd03fd;
    transform: scale(3);
    transform-origin: 50%;
  }
}
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* TYPOGRAPHY====================
Base rules for typography
============================== */
html {
  color: white;
  color: var(--make-font-color);
  font-family: TTFirsNeue, sans-serif;
  font-family: var(--make-font-family);
  font-weight: 400;
  font-size: 14px;
  font-style: normal;
  line-height: 133%;
  line-height: var(--make-line-height);
  letter-spacing: var(--make-letter-spacing);
}
@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

* {
  font-size: 1rem;
  font-size: var(--make-font-size);
  line-height: 133%;
  line-height: var(--make-line-height);
  letter-spacing: var(--make-letter-spacing);
  margin: 0;
}

h1 {
  font-size: 2.4rem;
  font-size: var(--make-font-size-title);
  line-height: 100%;
  line-height: var(--make-line-height-tight);
  font-weight: 500;
}

h2 {
  font-size: 2.4rem;
  font-size: var(--make-font-size-title);
  line-height: 100%;
  line-height: var(--make-line-height-tight);
  font-weight: 500;
}

h3 {
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
  line-height: 100%;
  line-height: var(--make-line-height-tight);
  font-weight: 500;
}

h4 {
  font-size: 1.15rem;
  font-size: var(--make-font-size-medium);
  line-height: 100%;
  line-height: var(--make-line-height-tight);
  font-weight: 500;
}

a {
  color: inherit;
}

p, address, li {
  margin-bottom: 1rem;
}
p strong, address strong, li strong {
  font-weight: 600;
}
p a, address a, li a {
  text-decoration: underline;
  color: #fd03fd;
  color: var(--make-font-color-bright);
}

address {
  font-style: normal;
}

.screen-reader-only {
  position: absolute;
  left: -10000%;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .mobile-only-text {
    position: absolute;
    left: -10000%;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

/* CONTAINERS====================
   Sets site/container widths
============================== */
header, footer, section, .container {
  width: 100%;
  position: relative;
}

.container {
  width: 80vw;
  width: var(--make-container-width);
  max-width: 1340px;
}

/* HEADER========================
   Layout for header
============================== */
.page-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.page-header__container {
  width: 100%;
  margin: 0 10px;
}
@media (min-width: 768px) {
  .page-header__container {
    width: 80vw;
    width: var(--make-container-width);
    margin: 0;
  }
}

.page-header__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: 1fr auto 1fr;
  grid-column-gap: 3.3rem;
  width: 100%;
}
@media (max-width: 767px) {
  .page-header__list {
    grid-column-gap: 0;
  }
}

/* FOOTER========================
   Layout for footer
============================== */
.page-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.page-footer__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
}

.page-footer__content {
  grid-column: span 3;
}

/* CONTACT ======================
   Layout for contact
============================== */
.contact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: 1;
  --make-justify: center;
  --make-rows: 60px 180px auto;
  --make-gap: 1rem;
  height: auto;
  padding: 2rem;
}

.contact__speciality,
.contact__photo {
  align-self: center;
}

/* CONTACT TRAY CAROUSEL===============
   Layout etc for contact tray carousel
===================================== */
@media (max-width: 767px) {
  .contact-tray.carousel .carousel__container {
    width: 90vw;
  }
}

.contact-tray.carousel .carousel__controls {
  padding-right: 0;
}

/* CAROUSEL ======================
   Layout for carousel
=============================== */
.carousel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.carousel__container--intro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-align: center;
}

.carousel__heading {
  grid-column: 1/span 4;
  grid-row: 1/span 1;
}
@media (min-width: 768px) {
  .carousel__heading {
    grid-column: 2/span 10;
  }
}

.carousel__intro {
  grid-column: 1/span 4;
  grid-row: 2/span 1;
}
@media (min-width: 768px) {
  .carousel__intro {
    grid-column: 4/span 6;
  }
}
@media (min-width: 1024px) {
  .carousel__intro {
    grid-column: 5/span 4;
  }
}

.carousel__controls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.carousel__pagination--prev {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
}

.carousel__pagination--next {
  grid-column: 12/span 1;
  grid-row: 1/span 1;
}

.carousel__container--carousel {
  align-self: flex-end;
  width: calc(80vw + 15px);
}
@media (min-width: 768px) {
  .carousel__container--carousel {
    max-width: calc((100vw - 1340px) / 2 + 1340px);
    width: 95%;
  }
}

@media (min-width: 768px) {
  .carousel--restrict .carousel__container--carousel {
    max-width: 1340px;
    width: 80vw;
    width: var(--make-container-width);
    align-self: center;
  }
}

.carousel--disabled .glide__track {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.carousel--disabled .carousel__container--carousel {
  max-width: 1340px;
  width: 80vw;
  width: var(--make-container-width);
  align-self: center;
}

.carousel .glide__track {
  width: 100%;
  max-width: 1340px;
  overflow: visible;
}

.carousel--disabled .glide__slides {
  justify-content: center;
}

@media (min-width: 768px) {
  .carousel--restrict .carousel__bullets {
    width: 100%;
  }
}

.glide__slide {
  width: 100%;
}
@media (min-width: 320px) {
  .glide__slide {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .glide__slide {
    width: 33%;
  }
}
@media (min-width: 1024px) {
  .glide__slide {
    width: 25%;
  }
}
@media (min-width: 1488px) {
  .glide__slide {
    width: 20%;
  }
}

/* CAROUSEL ======================
   Layout for carousel
=============================== */
.carousel-3D__propper {
  position: relative;
}

.carousel-3D__pagination--next {
  right: 0;
  bottom: calc((100% - 330px) / 2);
  position: absolute;
}
@media (min-width: 1024px) {
  .carousel-3D__pagination--next {
    bottom: calc((100% - 430px) / 2);
  }
}

.carousel-3D__pagination--prev {
  left: 0;
  bottom: calc((100% - 330px) / 2);
  position: absolute;
}
@media (min-width: 1024px) {
  .carousel-3D__pagination--prev {
    bottom: calc((100% - 430px) / 2);
  }
}

@media (max-width: 767px) {
  .carousel-3D {
    width: 100vw;
    margin-left: -10vw;
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  .carousel-3D__track {
    margin: 0 1rem;
    overflow: visible;
  }
}

/* INSIGHT/EVENT CARD ===========
   Layout for insight/event card
============================== */
.insightevent-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: calc(82% - 0.5rem) calc(18% - 0.5rem);
  --make-rows: 1em auto 1em 1fr;
  --make-gap: 1rem;
  grid-template-areas: "type   .         " "title  .         " "date   .         " "intro  indicator ";
  height: auto;
  position: relative;
}

.insightevent-card__type {
  grid-area: type;
}

.insightevent-card__title {
  grid-area: title;
}

.insightevent-card__date {
  grid-area: date;
}

.insightevent-card__intro {
  grid-area: intro;
  align-self: start;
}

.insightevent-card__indicator {
  grid-area: indicator;
  align-self: end;
}

.insightevent-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.insightevent-card__iframe {
  display: none;
}

.insightevent-card.video .insightevent-card__indicator {
  display: none;
}

.tobii .insightevent-card__iframe {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 90vw;
  width: 800px;
}

.insightevent-card.video {
  --make-rows: 1em auto 1em auto 1fr;
  grid-template-areas: "type . " "title . " "date . " "video video " "intro intro ";
}

.insightevent-card__video-thumbnail {
  grid-area: video;
  position: relative;
  z-index: 1;
}

.insightevent-card__video-thumbnail figure {
  width: 100%;
  height: auto;
}

.insightevent-card__video-thumbnail svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: auto;
  transform: translate(-50%, -50%);
}

.tobii__slide .tobii-html {
  padding: 0;
}

.tobii__slide iframe {
  max-width: 90vw;
  max-height: 50.625vw;
}

/* FEATURED INSIGHT/EVENT ===========
   Layout for featured insight/event
================================== */
.featured-post {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: 25% 50% 25%;
  --make-rows:1fr auto 1fr;
  --make-gap: 0;
  grid-template-areas: ". type   .         " ". title  indicator " ". date   .         ";
  height: auto;
  position: relative;
  width: 100%;
}

.featured-post__subtitle {
  grid-area: type;
}

.featured-post__title {
  grid-area: title;
}

.featured-post__date {
  grid-area: date;
  align-self: end;
}

.featured-post__indicator {
  grid-area: indicator;
}

.featured-post__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* EXPANDABLE CARDS ===================
   Layout for expandable cards sections
==================================== */
.expandable-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-justify: stretch;
  --make-align: stretch;
  --make-rows: 2;
  width: 100%;
  overflow: visible;
}
@media (min-width: 1024px) {
  .expandable-cards {
    grid-gap: 2rem;
  }
}
@media (min-width: 1488px) {
  .expandable-cards {
    grid-gap: 3.3rem;
  }
}

.expandable-cards__card {
  grid-column: span 4;
}
@media (min-width: 768px) {
  .expandable-cards__card {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .expandable-cards__card {
    grid-column: span 4;
  }
}

.timeline-stage1__information {
  z-index: 3;
}

.expandable-cards--full-width .expandable-cards__card {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
@media (min-width: 768px) {
  .expandable-cards--full-width .expandable-cards__card {
    grid-column: 1/-1;
  }
}
@media (min-width: 1024px) {
  .expandable-cards--full-width .expandable-cards__card {
    grid-column: 3/span 8;
  }
}

.expandable-cards--full-width .expandable-cards__initial {
  text-align: left;
  position: relative;
}

.expandable-cards__card--expanded .expandable-cards__initial {
  color: #1d1d39;
  color: var(--make-font-color-alt);
  z-index: 2;
}

.expandable-cards--full-width .expandable-cards__expanded-content {
  color: #1d1d39;
  color: var(--make-font-color-alt);
  padding-left: 3rem;
  padding-right: 3rem;
}

/* EXPANDABLE CARD ==============
   Layout for expandable card
============================== */
.expandable-cards__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: 100%;
  --make-rows: auto;
  position: relative;
  overflow: visible;
}

.expandable-cards__initial {
  align-self: center;
}

.expandable-cards__trigger {
  position: absolute;
  right: 1.5rem;
  align-self: center;
}

/* UNEXPANDABLE CARDS ===================
   Layout for unexpandable cards sections
====================================== */
.unexpandable-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-justify: stretch;
  --make-align: stretch;
  --make-columns: 100%;
  width: 100%;
  overflow: visible;
  grid-auto-rows: 1fr;
}
@media (min-width: 1024px) {
  .unexpandable-cards {
    grid-gap: 2rem;
  }
}
@media (min-width: 1488px) {
  .unexpandable-cards {
    grid-gap: 3.3rem;
  }
}

.unexpandable-cards--3-columns {
  --make-rows: 1fr;
}
@media (min-width: 768px) {
  .unexpandable-cards--3-columns {
    --make-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .unexpandable-cards--3-columns .unexpandable-cards__card {
    grid-column: span 3;
  }
}
@media (min-width: 1024px) {
  .unexpandable-cards--3-columns .unexpandable-cards__card {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .unexpandable-cards--2-columns {
    --make-columns: repeat(6, minmax(0, 1fr));
    --make-rows: 1fr;
  }
}

.unexpandable-cards--2-columns .unexpandable-cards__card:nth-of-type(odd) {
  grid-column: span 3;
}
@media (min-width: 1024px) {
  .unexpandable-cards--2-columns .unexpandable-cards__card:nth-of-type(odd) {
    grid-column: 2/span 2;
  }
}

.unexpandable-cards--2-columns .unexpandable-cards__card:nth-of-type(even) {
  grid-column: span 3;
}
@media (min-width: 1024px) {
  .unexpandable-cards--2-columns .unexpandable-cards__card:nth-of-type(even) {
    grid-column: 4/span 2;
  }
}

@media (min-width: 768px) {
  .unexpandable-cards--1-columns {
    --make-columns: repeat(3, 1fr);
    --make-rows: 1fr;
  }
}

@media (min-width: 768px) {
  .unexpandable-cards--1-columns .unexpandable-cards__card {
    grid-column: 2/span 1;
  }
}

@media (min-width: 768px) {
  .unexpandable-cards--last-row-centered .unexpandable-cards__card:last-of-type {
    width: calc(33% - 23px / 2);
    width: calc(33% - var(--make-gap) / 2);
    justify-self: center;
    grid-column: 1/span 3;
  }
}

@media (min-width: 768px) {
  .unexpandable-cards--2-columns.unexpandable-cards--last-row-centered .unexpandable-cards__card:last-of-type {
    grid-column: 1/span 6;
    width: calc(50% - 23px / 2);
    width: calc(50% - var(--make-gap) / 2);
  }
}
@media (min-width: 1024px) {
  .unexpandable-cards--2-columns.unexpandable-cards--last-row-centered .unexpandable-cards__card:last-of-type {
    width: calc(33% - 23px / 2);
    width: calc(33% - var(--make-gap) / 2);
  }
}

/* UNEXPANDABLE CARD ==============
   Layout for unexpandable card
================================ */
.unexpandable-cards__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: 100%;
  --make-rows: auto;
  position: relative;
  overflow: visible;
  height: 100%;
}

.unexpandable-cards__initial {
  align-self: center;
}

/* INTERACTIVE CARDS ===================
   Layout for interactive cards sections
==================================== */
.interactive-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-justify: stretch;
  --make-align: stretch;
  --make-columns: repeat(4, 1fr);
  width: 100%;
  overflow: visible;
}
@media (min-width: 1024px) {
  .interactive-cards {
    --make-columns: repeat(6, 1fr);
  }
}

.interactive-cards__card {
  grid-column: span 4;
}
@media (min-width: 768px) {
  .interactive-cards__card {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .interactive-cards__card.interactive-cards__card--0 {
    grid-row: 1;
    grid-column: 3/span 2;
  }
}

@media (min-width: 1024px) {
  .interactive-cards__card.interactive-cards__card--1 {
    grid-row: 2;
    grid-column: 4/span 2;
  }
}

@media (min-width: 1024px) {
  .interactive-cards__card.interactive-cards__card--2 {
    grid-row: 1;
    grid-column: 5/span 2;
  }
}

@media (min-width: 1024px) {
  .interactive-cards__card.interactive-cards__card--3 {
    grid-row: 1;
    grid-column: 1/span 2;
  }
}

@media (min-width: 1024px) {
  .interactive-cards__card.interactive-cards__card--4 {
    grid-row: 2;
    grid-column: 2/span 2;
  }
}

.interactive-cards__content-space {
  grid-row: 5;
  grid-column: span 4;
}
@media (min-width: 768px) {
  .interactive-cards__content-space {
    grid-row: 3;
  }
}
@media (min-width: 1024px) {
  .interactive-cards__content-space {
    grid-column: 2/span 4;
    width: 66%;
    justify-self: center;
  }
}

.interactive-cards[data-active-key="0"] .interactive-cards__card.interactive-cards__card--0 {
  display: none;
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="0"] .interactive-cards__card.interactive-cards__card--1 {
    grid-row: 2;
    grid-column: 4/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="0"] .interactive-cards__card.interactive-cards__card--2 {
    grid-row: 1;
    grid-column: 5/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="0"] .interactive-cards__card.interactive-cards__card--3 {
    grid-row: 1;
    grid-column: 1/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="0"] .interactive-cards__card.interactive-cards__card--4 {
    grid-row: 2;
    grid-column: 2/span 2;
  }
}

.interactive-cards[data-active-key="1"] .interactive-cards__card.interactive-cards__card--1 {
  display: none;
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="1"] .interactive-cards__card.interactive-cards__card--2 {
    grid-row: 2;
    grid-column: 4/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="1"] .interactive-cards__card.interactive-cards__card--3 {
    grid-row: 1;
    grid-column: 5/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="1"] .interactive-cards__card.interactive-cards__card--4 {
    grid-row: 1;
    grid-column: 1/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="1"] .interactive-cards__card.interactive-cards__card--0 {
    grid-row: 2;
    grid-column: 2/span 2;
  }
}

.interactive-cards[data-active-key="2"] .interactive-cards__card.interactive-cards__card--2 {
  display: none;
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="2"] .interactive-cards__card.interactive-cards__card--3 {
    grid-row: 2;
    grid-column: 4/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="2"] .interactive-cards__card.interactive-cards__card--4 {
    grid-row: 1;
    grid-column: 5/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="2"] .interactive-cards__card.interactive-cards__card--0 {
    grid-row: 1;
    grid-column: 1/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="2"] .interactive-cards__card.interactive-cards__card--1 {
    grid-row: 2;
    grid-column: 2/span 2;
  }
}

.interactive-cards[data-active-key="3"] .interactive-cards__card.interactive-cards__card--3 {
  display: none;
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="3"] .interactive-cards__card.interactive-cards__card--4 {
    grid-row: 2;
    grid-column: 4/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="3"] .interactive-cards__card.interactive-cards__card--0 {
    grid-row: 1;
    grid-column: 5/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="3"] .interactive-cards__card.interactive-cards__card--1 {
    grid-row: 1;
    grid-column: 1/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="3"] .interactive-cards__card.interactive-cards__card--2 {
    grid-row: 2;
    grid-column: 2/span 2;
  }
}

.interactive-cards[data-active-key="4"] .interactive-cards__card.interactive-cards__card--4 {
  display: none;
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="4"] .interactive-cards__card.interactive-cards__card--0 {
    grid-row: 2;
    grid-column: 4/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="4"] .interactive-cards__card.interactive-cards__card--1 {
    grid-row: 1;
    grid-column: 5/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="4"] .interactive-cards__card.interactive-cards__card--2 {
    grid-row: 1;
    grid-column: 1/span 2;
  }
}
@media (min-width: 1024px) {
  .interactive-cards[data-active-key="4"] .interactive-cards__card.interactive-cards__card--3 {
    grid-row: 2;
    grid-column: 2/span 2;
  }
}

/* INTERACTIVE CARD ==============
   Layout for interactive card
============================== */
.interactive-cards__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: 100%;
  --make-rows: auto;
  position: relative;
  overflow: visible;
}

.interactive-cards__initial {
  align-self: center;
}

.interactive-cards__trigger {
  position: absolute;
  right: 1.5rem;
  align-self: center;
}

/* FLIP CARDS ===================
   Layout for flip cards sections
============================== */
.flip-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-justify: stretch;
  --make-align: stretch;
  --make-columns: 100%;
  grid-gap: calc(23px * 2);
  grid-gap: calc(var(--make-gap) * 2);
  width: 100%;
  overflow: visible;
  grid-auto-rows: 1fr;
}

.flip-cards__card {
  width: 100%;
}

@media (min-width: 768px) {
  .flip-cards--3-columns {
    --make-columns: repeat(6, 1fr);
    --make-rows: 1fr;
  }
}

@media (min-width: 768px) {
  .flip-cards--3-columns .flip-cards__card {
    grid-column: span 3;
  }
}
@media (min-width: 1024px) {
  .flip-cards--3-columns .flip-cards__card {
    grid-column: 1/span 2;
  }
}

@media (min-width: 1024px) {
  .flip-cards--3-columns .flip-cards__card:nth-of-type(3n+2) {
    grid-column: 3/span 2;
  }
}

@media (min-width: 1024px) {
  .flip-cards--3-columns .flip-cards__card:nth-of-type(3n+3) {
    grid-column: 5/span 2;
  }
}

@media (min-width: 768px) {
  .flip-cards--2-columns {
    --make-columns: repeat(6, 1fr);
    --make-rows: 1fr;
  }
}

@media (min-width: 768px) {
  .flip-cards--2-columns .flip-cards__card:nth-of-type(odd) {
    grid-column: 1/span 3;
  }
}
@media (min-width: 1024px) {
  .flip-cards--2-columns .flip-cards__card:nth-of-type(odd) {
    grid-column: 2/span 2;
  }
}

@media (min-width: 768px) {
  .flip-cards--2-columns .flip-cards__card:nth-of-type(even) {
    grid-column: 4/span 3;
  }
}
@media (min-width: 1024px) {
  .flip-cards--2-columns .flip-cards__card:nth-of-type(even) {
    grid-column: 4/span 2;
  }
}

@media (min-width: 768px) {
  .flip-cards--1-columns {
    --make-columns: repeat(3, 1fr);
    --make-rows: 1fr;
  }
}

@media (min-width: 768px) {
  .flip-cards--1-columns .flip-cards__card {
    grid-column: 2/span 1;
  }
}

@media (min-width: 768px) {
  .flip-cards--last-row-centered .flip-cards__card:last-of-type {
    justify-self: center;
    grid-column: 3/span 2;
  }
}

@media (min-width: 768px) {
  .flip-cards--last-row-2centered .flip-cards__card:nth-last-child(1) {
    justify-self: center;
    grid-column: 4/span 2;
  }
}

@media (min-width: 768px) {
  .flip-cards--last-row-2centered .flip-cards__card:nth-last-child(2) {
    justify-self: center;
    grid-column: 2/span 2;
  }
}

/* FLIP CARD ==============
   Layout for flip card
======================== */
.flip-cards__card {
  perspective: 40rem;
  display: flex;
}

.flip-cards__body {
  display: flex;
  flex: 1;
  width: 100%;
}

.flip-cards__front,
.flip-cards__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* HERO========================
   Layout for the hero unit
============================= */
.hero {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.hero__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  grid-column-gap: 0;
  --make-gap: 2rem;
  --make-align: center;
}
@media (min-width: 768px) {
  .hero__container {
    --make-gap: 4rem;
  }
}

.hero .hero__title {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .hero .hero__title {
    grid-column: span 12;
    order: 1;
  }
}

.hero__intro {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .hero__intro {
    grid-column: 3/span 8;
    order: 2;
  }
}

/* HOME HERO========================
   Layout for the hero unit on home
================================= */
.hero--home .hero__logo {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .hero--home .hero__logo {
    grid-column: 3/span 8;
  }
}

.hero--home .hero__container {
  --make-gap: 4rem;
}

.hero--home .hero__button {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .hero--home .hero__button {
    grid-column: 3/span 8;
    order: 3;
  }
}

/* INSIGHTS & EVENTS HERO========================
   Layout for the hero unit on insights & events
============================================== */
.hero--insights-and-events .featured-post {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .hero--insights-and-events .featured-post {
    grid-column: 3/span 8;
    order: 3;
  }
}

/* TIMELINE NAVIGATION================
   Layout for the timeline navigation
=================================== */
.timeline-navigation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.timeline-navigation__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}
@media (min-width: 768px) {
  .timeline-navigation__container {
    --make-columns: repeat(5, 1fr);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-columns: var(--make-columns);
    grid-template-rows: auto;
    grid-template-rows: var(--make-rows);
    justify-items: stretch;
    justify-items: var(--make-justify);
    align-items: stretch;
    align-items: var(--make-align);
    grid-gap: 23px;
    grid-gap: var(--make-gap);
  }
}

.timeline-navigation__step {
  --make-columns: repeat(4, 1fr);
  --make-gap: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  grid-row-gap: 0.5rem;
  row-gap: 0.5rem;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .timeline-navigation__step {
    --make-columns: 16% 1fr 10%;
    --make-gap: 2rem;
    grid-template-areas: " number subheading indicator " " number context indicator ";
  }
}
@media (min-width: 768px) {
  .timeline-navigation__step {
    display: block;
  }
}

.timeline-navigation__link {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.timeline-navigation__number {
  grid-area: number;
  justify-self: center;
  align-self: center;
}
@media (min-width: 768px) {
  .timeline-navigation__number {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
  }
}

.timeline-navigation__subheading {
  grid-area: subheading;
}
@media (min-width: 768px) {
  .timeline-navigation__subheading {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
}

.timeline-navigation__context {
  grid-area: context;
}
@media (min-width: 768px) {
  .timeline-navigation__context {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.5s;
  }
}

.timeline-navigation__indicator {
  grid-area: indicator;
  justify-self: center;
  align-self: center;
}
@media (min-width: 768px) {
  .timeline-navigation__indicator {
    display: none;
  }
}

@media (min-width: 768px) {
  .timeline-navigation__step:hover .timeline-navigation__subheading {
    top: 0;
  }
  .timeline-navigation__step:hover .timeline-navigation__context {
    opacity: 1;
  }
}

/* HOME STAGE COMMON ==================
   Layout for common elements in stages
==================================== */
.timeline-stage__information {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.timeline-stage__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-align: center;
}

.timeline-stage__number {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .timeline-stage__number {
    grid-column: 1/span 12;
  }
}

.timeline-stage__title {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .timeline-stage__title {
    grid-column: 1/span 12;
  }
}

.timeline-stage__intro {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .timeline-stage__intro {
    grid-column: 3/span 8;
  }
}
@media (min-width: 1024px) {
  .timeline-stage__intro {
    grid-column: 4/span 6;
  }
}

.timeline-stage__cards,
.timeline-stage__breakdown {
  width: 100%;
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .timeline-stage__cards,
.timeline-stage__breakdown {
    grid-column: 1/span 12;
  }
}

/* HOME STAGE 1========================
   Layout for stage 1 in the timeline
==================================== */
/* HOME STAGE 2========================
   Layout for stage 2 in the timeline
==================================== */
.timeline-stage--2 .timeline-stage__breakdown {
  grid-column: 1/span 4;
  justify-self: center;
  width: 100%;
}
@media (min-width: 768px) {
  .timeline-stage--2 .timeline-stage__breakdown {
    grid-column: 1/span 12;
  }
}

/* HOME STAGE 3========================
   Layout for stage 3 in the timeline
==================================== */
/* HOME STAGE 4========================
   Layout for stage 4 in the timeline
==================================== */
/* INSIGHT/EVENT CAROUSEL===============
   Layout etc for insight/event carousel
===================================== */
@media (max-width: 767px) {
  .insights-and-events.carousel .container {
    width: 90vw;
  }
}

.insights-and-events.carousel .carousel__controls {
  padding-right: 0;
}

/* INSIGHT/EVENT CATEGORIES ========================
   Layout for insights/events categories
================================================= */
.categories {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.categories__links-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

/* INSIGHT/EVENT LIST ========================
   Layout for insights/events list
=========================================== */
.insights-and-events {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.insights-and-events__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
}

.insights-and-events .insightevent-card {
  grid-column: span 4;
  width: 100%;
}
@media (min-width: 768px) {
  .insights-and-events .insightevent-card {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .insights-and-events .insightevent-card {
    grid-column: span 4;
  }
}
@media (min-width: 1488px) {
  .insights-and-events .insightevent-card {
    grid-column: span 3;
  }
}

/* GET STARTED BANNER ==========================
   Layout for the get started banner
============================================== */
.get-started-banner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.get-started-banner__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-gap: 1rem;
}

.get-started-banner__title {
  grid-column: span 4;
}
@media (min-width: 768px) {
  .get-started-banner__title {
    grid-column: span 12;
  }
}

.get-started-banner__content {
  grid-column: span 4;
}
@media (min-width: 768px) {
  .get-started-banner__content {
    grid-column: 3/span 8;
  }
}

.get-started-banner__button {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .get-started-banner__button {
    grid-column: 3/span 8;
  }
}

/* PAGE CONTENT ===================
   Layout for page content
================================ */
.page-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

/* CENTERED TEXT ===================
   Layout for centered text
================================ */
.centered-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.centered-text__container {
  --make-gap: 4rem;
  --make-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
}

.centered-text__content-wrapper {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .centered-text__content-wrapper {
    grid-column: 3/span 8;
  }
}

/* MIXED IMAGE AND CONTENT ===========
   Layout for mixed image and content
=================================== */
.mixed-image-and-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.mixed-image-and-content__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
}
@media (max-width: 1023px) {
  .mixed-image-and-content__container {
    --make-gap: 0;
  }
}

.mixed-image-and-content__content-wrapper {
  grid-column: span 4;
  grid-row: 2;
}
@media (min-width: 768px) {
  .mixed-image-and-content__content-wrapper {
    grid-column: span 12;
  }
}
@media (min-width: 1024px) {
  .mixed-image-and-content__content-wrapper {
    grid-column: 2/span 3;
    grid-row: 1;
    align-self: center;
  }
}

.mixed-image-and-content__image-wrapper {
  grid-column: span 4;
  grid-row: 1;
  width: 100vw;
  margin-left: calc(calc((100vw - 80vw) / 2) * -1);
  margin-left: calc(var(--make-container-gap) * -1);
}
@media (min-width: 1024px) {
  .mixed-image-and-content__image-wrapper {
    grid-column: 6/span 6;
    align-self: center;
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .mixed-image-and-content--image-left .mixed-image-and-content__content-wrapper {
    grid-column: 9/span 3;
  }
}

@media (min-width: 1024px) {
  .mixed-image-and-content--image-left .mixed-image-and-content__image-wrapper {
    grid-column: 2/span 6;
  }
}

@media (min-width: 1024px) {
  .mixed-image-and-content__content-wrapper--white-background {
    grid-column: 2/span 4;
  }
}

@media (min-width: 1024px) {
  .mixed-image-and-content--image-left .mixed-image-and-content__content-wrapper--white-background {
    grid-column: 8/span 4;
  }
}

/* BREAKDOWN =======================
   Layout for breakdown
==================================== */
.breakdown {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.breakdown__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-align: center;
}

.breakdown__title {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .breakdown__title {
    grid-column: 1/span 12;
  }
}

.breakdown__intro {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .breakdown__intro {
    grid-column: 3/span 8;
  }
}

.breakdown__cards {
  width: 100%;
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .breakdown__cards {
    grid-column: 1/span 12;
  }
}

/* FULL WIDTH IMAGE=============
   Layout for  full width image
============================= */
.full-width-image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.full-width-image__image-wrapper {
  width: 100%;
}

/* FULL WIDTH CONTENT=============
   Layout for  full width content
================================ */
.full-width-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

/* FLIP CARD SECTION ==================
   Layout for flip card section
==================================== */
.flip-cards-section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.flip-cards-section__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-align: center;
}

.flip-cards-section__title {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .flip-cards-section__title {
    grid-column: 1/span 12;
  }
}

.flip-cards-section__intro {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .flip-cards-section__intro {
    grid-column: 3/span 8;
  }
}

.flip-cards-section__cards {
  width: 100%;
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .flip-cards-section__cards {
    grid-column: 1/span 12;
  }
}

/* KEY RISKS ALT ======================
   Layout for key risks alt
=============================== */
.key-risks-alt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.key-risks-alt__container--intro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-align: center;
}

.key-risks-alt__heading {
  grid-column: 1/span 4;
  grid-row: 1/span 1;
}
@media (min-width: 768px) {
  .key-risks-alt__heading {
    grid-column: 2/span 10;
  }
}

.key-risks-alt__intro {
  grid-column: 1/span 4;
  grid-row: 2/span 1;
}
@media (min-width: 768px) {
  .key-risks-alt__intro {
    grid-column: 4/span 6;
  }
}
@media (min-width: 1024px) {
  .key-risks-alt__intro {
    grid-column: 5/span 4;
  }
}

.key-risks-alt .expandable-cards {
  --make-rows: auto;
  margin-top: 3.8rem;
  margin-top: var(--make-section-padding-value);
}

/* EXPANDABLE CARD SECTION ==================
   Layout for expandable card section
==================================== */
.expandable-cards-section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.expandable-cards-section__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-align: center;
}

.expandable-cards-section__title {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .expandable-cards-section__title {
    grid-column: 1/span 12;
  }
}

.expandable-cards-section__intro {
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .expandable-cards-section__intro {
    grid-column: 3/span 8;
  }
}

.expandable-cards-section__cards {
  width: 100%;
  grid-column: 1/span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .expandable-cards-section__cards {
    grid-column: 1/span 12;
  }
}

/* DOWNLOAD CONTENT BANNER ==========================
   Layout for the download content banner
============================================== */
.download-content-banner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.download-content-banner__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-gap: 1rem;
}

.download-content-banner__title {
  grid-column: span 4;
}
@media (min-width: 768px) {
  .download-content-banner__title {
    grid-column: span 12;
  }
}

.download-content-banner__content {
  grid-column: span 4;
}
@media (min-width: 768px) {
  .download-content-banner__content {
    grid-column: 3/span 8;
  }
}

.download-content-banner__button {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .download-content-banner__button {
    grid-column: 3/span 8;
  }
}

/* VIDEO EMBED ====================
   Layout for video embed
================================ */
.video-embed {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.video-embed__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.video-embed__iframe {
  display: none;
}

.video-embed.video .video-embed__indicator {
  display: none;
}

.tobii .video-embed__iframe {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 90vw;
  width: 800px;
}

.video-embed.video {
  --make-rows: 1em auto 1em auto 1fr;
  grid-template-areas: "type . " "title . " "date . " "video video " "intro intro ";
}

.video-embed__video-thumbnail {
  grid-area: video;
  position: relative;
  z-index: 1;
}

.video-embed__video-thumbnail figure {
  width: 100%;
  height: auto;
}

.video-embed__video-thumbnail figure img {
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-embed__video-thumbnail svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: auto;
  transform: translate(-50%, -50%);
}

.tobii__slide .tobii-html {
  padding: 0;
}

.tobii__slide iframe {
  max-width: 90vw;
  max-height: 50.625vw;
}

/* RELATED LINKS ===================
   Layout for related links
================================ */
.related-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
}

.related-links__container {
  --make-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
}

.related-links__content-wrapper {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .related-links__content-wrapper {
    grid-column: 3/span 8;
  }
}
@media (min-width: 1024px) {
  .related-links__content-wrapper {
    grid-column: 4/span 6;
  }
}

.related-links__list-item {
  display: block;
  width: 100%;
}

.related-links__link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.related-links__link svg {
  flex-basis: 20px;
}

/* ADJACENT INSIGHTS ==============
   Layout for adjacent insights
================================ */
.adjacent-insights {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.adjacent-insights__container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.adjacent-insights__button {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 25px 1fr;
  grid-template-rows: auto;
  max-width: calc(50% - 10px);
}
@media (min-width: 768px) {
  .adjacent-insights__button {
    max-width: 33.33%;
  }
}

.adjacent-insights__button--next {
  grid-template-columns: 1fr 25px;
}

.adjacent-insights__button svg {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.adjacent-insights__button--next svg {
  grid-column: 2;
  justify-self: end;
  transform: rotate(180deg);
}

.adjacent-insights__label {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.adjacent-insights__button--next .adjacent-insights__label {
  grid-column: 1;
}

.adjacent-insights__title {
  grid-column: 2;
  grid-row: 2;
}

.adjacent-insights__button--next .adjacent-insights__title {
  grid-column: 1;
}

/* BUTTON ======================
   Styling for button
============================= */
.button {
  background: #fd03fd;
  background: var(--make-font-color-bright);
  color: #1d1d39;
  color: var(--make-font-color-alt);
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  padding: 0.7rem 1.4rem 0.6rem;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.5s, color 0.5s;
  transition: background var(--make-transition-time), color var(--make-transition-time);
}

.button:hover {
  background: white;
  background: var(--make-font-color);
  color: #fd03fd;
  color: var(--make-font-color-bright);
}

.button--pill {
  border-radius: 3rem;
}

/* LIST ======================
   Styling for list
============================= */
.content-wrapper ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.content-wrapper ul li {
  text-indent: -5px;
}

.content-wrapper ul li:before {
  content: "-";
  text-indent: -5px;
  margin-right: 3px;
}

.content-wrapper ol {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

/* FIGURE ======================
   Styling for figure
============================= */
figure {
  margin: 0;
  width: 100%;
  padding: 0;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* VIDEO ======================
   Styling for video
============================= */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  width: 100%;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CAROUSEL ======================
   Fonts, colours etc for carousel
=============================== */
.carousel {
  padding: 3.8rem 0 0 0;
  padding: var(--make-section-padding-value) 0 0 0;
}
@media (min-width: 1024px) {
  .carousel {
    padding: 3.8rem 0;
    padding: var(--make-section-padding);
  }
}

.carousel__heading {
  text-align: center;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
}
@media (min-width: 768px) {
  .carousel__heading {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
  }
}

.carousel__intro {
  text-align: center;
}

.carousel__propper {
  margin: 3.8rem 0;
  margin: var(--make-section-padding-value) 0;
}

.carousel__controls {
  text-align: center;
  max-width: 1340px;
  width: 80vw;
  width: var(--make-container-width);
  margin: 1rem 0;
  padding-right: calc(10vw + 15px);
}
@media (min-width: 768px) {
  .carousel__controls {
    padding-right: 0;
  }
}

.carousel__pagination {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
}
@media (min-width: 768px) {
  .carousel__pagination {
    display: block;
    overflow: visible;
  }
}

.carousel__pagination svg {
  height: 1.7rem;
  height: var(--make-font-size-large);
  fill: white;
}

.carousel__pagination--next svg {
  transform: rotate(180deg);
}

.carousel__bullets {
  width: 100%;
}

.carousel__bullet {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 1rem;
  background: #76278b;
  cursor: pointer;
  margin: 4px;
}

.carousel__bullet.glide__bullet--active {
  background: white;
}

.carousel__bullet:hover,
.carousel__bullet.glide__bullet--active:hover {
  background: #fd03fd;
}

.carousel__pagination--hidden {
  display: none;
}

.carousel__bullets--hidden {
  display: none;
}

.carousel--disabled .glide__slide--clone {
  display: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

.carousel--disabled .glide__slides {
  transform: translate3d(0px, 0px, 0px) !important;
}

.carousel:not(.carousel--disabled) {
  overflow: hidden;
}

.carousel:not(.carousel--disabled) .glide__clip {
  background: transparent;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-clip-path: inset(-100vw -100vw -100vw 0);
          clip-path: inset(-100vw -100vw -100vw 0);
}

.glide__slides * {
  white-space: normal;
}

.glide__slide {
  height: auto;
}

.page-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-image: url(750e64f2518df7ef01486504f0bd20d4.png);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .page-background {
    background-image: url(7cadaba552541473d86aa5f627237b55.png);
  }
}

.hero-background-wrapper {
  background: linear-gradient(0deg, #1d1d39 0%, rgba(29, 29, 57, 0) 100%);
  background-position: bottom center;
  background-size: 100%;
}

/* HEADER========================
   Fonts, colours etc for header
============================== */
.page-header {
  background: transparent;
  position: relative;
  border-bottom: rgba(255, 255, 255, 0.25) solid 1px;
  color: white;
  color: var(--make-font-color);
  padding: 10px 0;
}

.page-header__list {
  padding: 0;
  list-style-type: none;
}

.page-header__logo a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  height: 100%;
}

.page-header__logo svg {
  width: auto;
  transition: transform 0.2s;
  height: 30px;
}
@media (min-width: 768px) {
  .page-header__logo svg {
    height: 40px;
  }
}

.page-header__link, .page-header__logo {
  margin: 0;
}
@media (max-width: 767px) {
  .page-header__link, .page-header__logo {
    padding: 0 0.5rem;
  }
}

.page-header__link a {
  color: white;
  color: var(--make-font-color);
  font-size: 0.9rem;
  font-size: var(--make-font-size-small);
  line-height: 100%;
  line-height: var(--make-line-height-tight);
  text-decoration: none;
  height: 100%;
  display: inline;
  width: auto;
}
@media (max-width: 767px) {
  .page-header__link a {
    text-align: center;
  }
}

.page-header__link--left a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: end;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.page-header__link--right a {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.page-header__link svg {
  height: 0.9rem;
  height: var(--make-font-size-small);
  fill: white;
  fill: var(--make-font-color);
  margin: 0 1rem 3px;
  transition: transform 0.5s;
  transition: transform var(--make-transition-time);
  display: none;
}
@media (min-width: 768px) {
  .page-header__link svg {
    display: block;
  }
}

.page-header__link--right svg {
  transform: rotate(180deg);
}

.page-header__link a:hover svg {
  transform: translateX(-10px);
}

.page-header__link--right a:hover svg {
  transform: rotate(180deg) translateX(-10px);
}

.page-header__logo a:hover svg {
  transform: translateY(-2px);
}

/* FOOTER========================
   Fonts, colours etc for footer
============================== */
.page-footer {
  background: #aeb4cb;
  position: relative;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  padding: 23px 0 calc(23px - 1rem);
  padding: var(--make-gap) 0 calc(var(--make-gap) - 1rem);
}

.page-footer__list {
  padding: 0;
  list-style-type: none;
}

.page-footer a {
  color: #1d1d39;
  color: var(--make-font-color-alt);
  text-decoration: none;
}

.page-footer__heading {
  margin-bottom: 1rem;
  font-weight: bold;
}

.page-footer p,
.page-footer a,
.page-footer li,
.page-footer h4,
.page-footer address {
  font-size: 0.9rem;
  font-size: var(--make-font-size-small);
}

.page-footer__content:last-child {
  margin-bottom: 0;
}

/* CONTACT TRAY=======================
   Fonts, colours etc for contact tray
=================================== */
.contact-tray {
  background: linear-gradient(230deg, #387B90 0%, #333465 100%);
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

.contact-tray__heading {
  text-align: center;
  font-size: 2.4rem;
  font-size: var(--make-font-size-title);
}
@media (max-width: 767px) {
  .contact-tray__heading {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.contact-tray__carousel.carousel__propper {
  margin: 3.8rem 0 3rem 0;
  margin: var(--make-section-padding-value) 0 3rem 0;
}
@media (min-width: 768px) {
  .contact-tray__carousel.carousel__propper {
    margin-bottom: 0;
  }
}

.contact-tray.is-open {
  -webkit-animation: slideUp 1s linear;
          animation: slideUp 1s linear;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  transform-origin: 50% 100%;
  z-index: 10;
}

.contact-tray .close-button {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
  color: var(--make-font-color);
  cursor: pointer;
}

.contact-tray.is-open .close-button {
  display: block;
}
.contact-tray.is-open .close-button svg {
  height: 1.15rem;
  height: var(--make-font-size-medium);
}

.contact-tray.is-closed {
  -webkit-animation: slideDown 2s linear;
          animation: slideDown 2s linear;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: 50% 100%;
}

/* CONTACT ======================
   Fonts, colours etc for contact
============================== */
.contact {
  background: #1d1d39;
  padding: 2rem;
  text-align: center;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
}

.contact__speciality {
  color: #fd03fd;
  line-height: 100%;
  line-height: var(--make-line-height-tight);
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 0;
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
}

.contact__photo {
  width: 160px;
  height: 0;
  padding-top: 160px;
  position: relative;
  border-radius: 80px;
  overflow: hidden;
}

.contact__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.contact__image-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.contact__name {
  font-size: 1rem;
  font-size: var(--make-font-size);
}

.contact__speciality,
.contact__name,
.contact__role,
.contact__phone-number {
  margin-bottom: 0;
}

.contact__linkedin {
  margin: 0.5rem;
  display: inline-block;
}
.contact__linkedin svg {
  height: 20px;
  fill: white;
}

.contact__email a,
.contact__phone-number a,
.contact__linkedin {
  color: white;
  text-decoration: none;
}

.contact__email, .contact__email a,
.contact__phone-number, .contact__phone-number a,
.contact__insights, .contact__insights a {
  font-size: 0.77rem;
  font-size: var(--make-font-size-tiny);
}

.contact__email {
  word-wrap: break-word;
}

.contact__insights {
  margin-bottom: 0;
}

/* CAROUSEL 3D=======================
   Fonts, colours etc for carousel 3D
=================================== */
.carousel-3D__bullets {
  text-align: center;
  max-width: 1340px;
  margin: 1rem 0;
  display: block;
}
@media (min-width: 768px) {
  .carousel-3D__bullets {
    display: none;
  }
}

.carousel-3D__bullet {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 1rem;
  background: #76278b;
  cursor: pointer;
  margin: 4px;
}

.carousel-3D__bullet.glide__bullet--active {
  background: white;
}

.carousel-3D__bullet:hover,
.carousel-3D__bullet.glide__bullet--active:hover {
  background: #fd03fd;
}

.carousel-3D__pagination {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
}
@media (min-width: 768px) {
  .carousel-3D__pagination {
    display: block;
  }
}

.carousel-3D__pagination svg {
  height: 1.3rem;
  height: var(--make-font-size-big);
  fill: white;
}

.carousel-3D__pagination--next svg {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .carousel-3D__slides {
    height: 70vh;
  }
}

@media (min-width: 768px) {
  .carousel-3D__slides,
.carousel-3D__track,
.carousel-3D__propper,
.carousel-3D,
.timeline-stage--2 .timeline-stage__breakdown {
    overflow-y: visible;
  }
}

.carousel-3D__slide-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-rows: 63px auto;
  --make-columns: 100%;
  --make-gap: 0;
  justify-items: center;
  background: white;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  padding: 2rem;
  opacity: 0.6;
  transition: opacity 0.5s;
  transition: opacity var(--make-transition-time);
}
@media (min-width: 768px) {
  .carousel-3D__slide-inner {
    -webkit-animation: wibble 15s linear;
            animation: wibble 15s linear;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 1;
    background: linear-gradient(230deg, #387B90 0%, #333465 100%);
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 200%;
    transition: top 1s, width 1s, left 1s, background 0.5s, color 0.5s;
    transition: top var(--make-transition-time-long), width var(--make-transition-time-long), left var(--make-transition-time-long), background var(--make-transition-time), color var(--make-transition-time);
    height: 135px;
  }
}
@media (min-width: 1024px) {
  .carousel-3D__slide-inner {
    width: 166%;
  }
}

@media (min-width: 768px) {
  .carousel-3D__slide:nth-of-type(5n+1) .carousel-3D__slide-inner {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
}

@media (min-width: 768px) {
  .carousel-3D__slide:nth-of-type(5n+2) .carousel-3D__slide-inner {
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
  }
}

@media (min-width: 768px) {
  .carousel-3D__slide:nth-of-type(5n+3) .carousel-3D__slide-inner {
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
  }
}

@media (min-width: 768px) {
  .carousel-3D__slide:nth-of-type(5n+4) .carousel-3D__slide-inner {
    -webkit-animation-delay: 9s;
            animation-delay: 9s;
  }
}

@media (min-width: 768px) {
  .carousel-3D__slide:nth-of-type(5n+5) .carousel-3D__slide-inner {
    -webkit-animation-delay: 12s;
            animation-delay: 12s;
  }
}

.carousel-3D__slide.glide__slide--active .carousel-3D__slide-inner {
  opacity: 1;
}
@media (min-width: 768px) {
  .carousel-3D__slide.glide__slide--active .carousel-3D__slide-inner {
    -webkit-animation: activateCurrentSlide 1s linear;
            animation: activateCurrentSlide 1s linear;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    height: auto;
    position: absolute;
    transform-origin: center top;
    width: 200%;
  }
}
@media (min-width: 1024px) {
  .carousel-3D__slide.glide__slide--active .carousel-3D__slide-inner {
    width: 166%;
  }
}
@media (min-width: 768px) {
  .carousel-3D__slide.glide__slide--active .carousel-3D__slide-inner .carousel-3D__subtitle {
    -webkit-animation: activateCurrentSlideSubtitle 1s linear;
            animation: activateCurrentSlideSubtitle 1s linear;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
}

@media (min-width: 768px) {
  .carousel-3D__slide:hover .carousel-3D__slide-inner {
    background: #fd03fd;
    color: #1d1d39;
    color: var(--make-font-color-alt);
  }
}

.carousel-3D__subtitle {
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
  text-align: center;
  align-self: center;
}
@media (max-width: 767px) {
  .carousel-3D__subtitle {
    color: #fd03fd;
    color: var(--make-font-color-bright);
  }
}

@media (min-width: 768px) {
  .carousel-3D__content {
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: none;
  }
}

.carousel-3D__slide {
  --make-3D-slide-top-position-2-4: 165px;
  --make-3D-slide-top-position-3: 330px;
  --make-3D-slide-left-position-1-2-4-5: -50%;
  position: relative;
}
@media (min-width: 1024px) {
  .carousel-3D__slide {
    --make-3D-slide-top-position-2-4: 215px;
    --make-3D-slide-top-position-3: 430px;
    --make-3D-slide-left-position-1-2-4-5: -33%;
  }
}

@media (max-width: 767px) {
  .carousel-3D__slide.glide__slide--active .carousel-3D__content {
    background: white;
    color: #1d1d39;
    color: var(--make-font-color-alt);
  }
}
@media (min-width: 768px) {
  .carousel-3D__slide.glide__slide--active .carousel-3D__content {
    -webkit-animation: activateCurrentSlideContent 2s linear;
            animation: activateCurrentSlideContent 2s linear;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
}

@media (min-width: 768px) {
  .carousel-3D[data-current-slide="0"] .carousel-3D__slide[data-slide-index="1"] .carousel-3D__slide-inner,
.carousel-3D[data-current-slide="0"] .carousel-3D__slide[data-slide-index="4"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-2-4);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="0"] .carousel-3D__slide[data-slide-index="0"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-3);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="0"] .carousel-3D__slide[data-slide-index="2"] .carousel-3D__slide-inner {
    right: 0;
  }
  .carousel-3D[data-current-slide="0"] .carousel-3D__slide[data-slide-index="3"] .carousel-3D__slide-inner {
    left: 0;
  }
}

@media (min-width: 768px) {
  .carousel-3D[data-current-slide="1"] .carousel-3D__slide[data-slide-index="2"] .carousel-3D__slide-inner,
.carousel-3D[data-current-slide="1"] .carousel-3D__slide[data-slide-index="0"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-2-4);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="1"] .carousel-3D__slide[data-slide-index="1"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-3);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="1"] .carousel-3D__slide[data-slide-index="3"] .carousel-3D__slide-inner {
    right: 0;
  }
  .carousel-3D[data-current-slide="1"] .carousel-3D__slide[data-slide-index="4"] .carousel-3D__slide-inner {
    left: 0;
  }
}

@media (min-width: 768px) {
  .carousel-3D[data-current-slide="2"] .carousel-3D__slide[data-slide-index="1"] .carousel-3D__slide-inner,
.carousel-3D[data-current-slide="2"] .carousel-3D__slide[data-slide-index="3"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-2-4);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="2"] .carousel-3D__slide[data-slide-index="2"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-3);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="2"] .carousel-3D__slide[data-slide-index="4"] .carousel-3D__slide-inner {
    right: 0;
  }
  .carousel-3D[data-current-slide="2"] .carousel-3D__slide[data-slide-index="0"] .carousel-3D__slide-inner {
    left: 0;
  }
}

@media (min-width: 768px) {
  .carousel-3D[data-current-slide="3"] .carousel-3D__slide[data-slide-index="2"] .carousel-3D__slide-inner,
.carousel-3D[data-current-slide="3"] .carousel-3D__slide[data-slide-index="4"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-2-4);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="3"] .carousel-3D__slide[data-slide-index="3"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-3);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="3"] .carousel-3D__slide[data-slide-index="0"] .carousel-3D__slide-inner {
    right: 0;
  }
  .carousel-3D[data-current-slide="3"] .carousel-3D__slide[data-slide-index="1"] .carousel-3D__slide-inner {
    left: 0;
  }
}

@media (min-width: 768px) {
  .carousel-3D[data-current-slide="4"] .carousel-3D__slide[data-slide-index="3"] .carousel-3D__slide-inner,
.carousel-3D[data-current-slide="4"] .carousel-3D__slide[data-slide-index="0"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-2-4);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="4"] .carousel-3D__slide[data-slide-index="4"] .carousel-3D__slide-inner {
    top: var(--make-3D-slide-top-position-3);
    left: var(--make-3D-slide-left-position-1-2-4-5);
  }
  .carousel-3D[data-current-slide="4"] .carousel-3D__slide[data-slide-index="1"] .carousel-3D__slide-inner {
    right: 0;
  }
  .carousel-3D[data-current-slide="4"] .carousel-3D__slide[data-slide-index="2"] .carousel-3D__slide-inner {
    left: 0;
  }
}

/* INSIGHT/EVENT =====================
   Fonts, colours etc for insight/event
==================================== */
.insightevent-card {
  background: #5E3A73;
  padding: 2rem;
  transition: color 0.5s;
  transition: color var(--make-transition-time);
}

@media (max-width: 767px) {
  .carousel .insightevent-card {
    border-radius: 4px;
    border-radius: var(--make-border-radius);
  }
}

.insightevent-card.insight:nth-of-type(even) {
  background: #7C4F97;
}

.insightevent-card__type {
  font-size: 0.77rem;
  font-size: var(--make-font-size-tiny);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
  position: relative;
  z-index: 1;
}

.insightevent-card__title {
  font-size: 1.15rem;
  font-size: var(--make-font-size-medium);
  font-weight: 500;
  line-height: 133%;
  line-height: var(--make-line-height);
  position: relative;
  z-index: 1;
  margin-bottom: -5px;
}

.insightevent-card__date {
  font-size: 0.77rem;
  font-size: var(--make-font-size-tiny);
  position: relative;
  z-index: 1;
}

.insightevent-card__intro {
  font-size: 0.77rem;
  font-size: var(--make-font-size-tiny);
  position: relative;
  z-index: 1;
}

.insightevent-card__indicator svg {
  transform: rotate(180deg);
  height: 1.3rem;
  height: var(--make-font-size-big);
  fill: white;
  transition: fill 0.5s;
  transition: fill var(--make-transition-time);
  position: relative;
  z-index: 1;
}

.insightevent-card.event--coming-up,
.insightevent-card.event--today {
  background: linear-gradient(230deg, #039AFD 0.03%, #376C87 100%);
}

.insightevent-card.event--past {
  background: linear-gradient(229.02deg, #AD8DDC 0%, #C39CF6 0.03%, #3D3D64 100%);
}

.insightevent-card.event--coming-up .insightevent-card__date,
.insightevent-card.event--today .insightevent-card__date {
  font-size: 1.15rem;
  font-size: var(--make-font-size-medium);
  color: #fd03fd;
  color: var(--make-font-color-bright);
}

.insightevent-card__hover-background {
  background: #fd03fd;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s;
  transition: opacity var(--make-transition-time);
}

.insightevent-card:hover,
.insightevent-card:nth-of-type(even):hover {
  color: #1d1d39;
  color: var(--make-font-color-alt);
}
.insightevent-card:hover .insightevent-card__hover-background,
.insightevent-card:nth-of-type(even):hover .insightevent-card__hover-background {
  opacity: 1;
}

.insightevent-card:hover .insightevent-card__indicator svg {
  fill: #1d1d39;
  fill: var(--make-font-color-alt);
}

.insightevent-card.event--coming-up:hover .insightevent-card__date,
.insightevent-card.event--today:hover .insightevent-card__date {
  color: #1d1d39;
  color: var(--make-font-color-alt);
}

/* FEATURED INSIGHT/EVENT ======================
   Fonts, colours etc for featured insight/event
============================================= */
.featured-post {
  background: rgba(255, 255, 255, 0.15);
  padding: 2rem;
  transition: background 0.5s;
  transition: background var(--make-transition-time);
  text-align: center;
}

.featured-post__subtitle {
  font-size: 0.77rem;
  font-size: var(--make-font-size-tiny);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
}

.featured-post__title {
  font-size: 1.15rem;
  font-size: var(--make-font-size-medium);
  font-weight: 500;
}

.featured-post__date {
  font-size: 0.77rem;
  font-size: var(--make-font-size-tiny);
}

.featured-post__indicator svg {
  transform: rotate(180deg);
  height: 1.3rem;
  height: var(--make-font-size-big);
  fill: white;
}

.featured-post.event--past {
  background: linear-gradient(229.02deg, #AD8DDC 0%, #C39CF6 0.03%, #3D3D64 100%);
}

.featured-post:hover,
.featured-post:nth-of-type(even):hover {
  background: #fd03fd;
  color: #1d1d39;
  color: var(--make-font-color-alt);
}

.featured-post:hover .featured-post__indicator svg path {
  fill: #1d1d39;
  fill: var(--make-font-color-alt);
}

/* KEY RISKS ===========================
   Fonts, colours etc for key risks
===================================== */
.key-risks {
  background: linear-gradient(180deg, rgba(118, 39, 139, 0.5) 0%, rgba(29, 29, 57, 0) 100%);
}

@media (max-width: 767px) {
  .key-risks .carousel__intro p {
    max-width: 245px;
    display: block;
    margin: 0 auto;
  }
}

/* KEY RISK ===========================
   Fonts, colours etc for key risks
===================================== */
.key-risk {
  background: rgba(94, 58, 115, 0.8);
  padding: 2rem;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
}

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

.key-risk__content {
  font-size: 0.9rem;
  font-size: var(--make-font-size-small);
  text-align: center;
}
@media (min-width: 768px) {
  .key-risk__content {
    text-align: left;
  }
}

.key-risk__title + .key-risk__content {
  margin: 1rem 0 0 0;
}

/* EXPANDABLE CARD =============
   Styling for expandable card
============================== */
.expandable-cards__card {
  background: linear-gradient(230deg, rgba(56, 123, 144, 0.8) 0%, rgba(51, 52, 101, 0.8) 100%);
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  padding: 2rem 3rem;
  cursor: pointer;
  transition: background 0.5s, color 0.5s;
  transition: background var(--make-transition-time), color var(--make-transition-time);
}
@media (min-width: 1488px) {
  .expandable-cards__card {
    padding: 2rem 4rem;
  }
}

.expandable-cards__initial {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
  text-align: center;
  font-size: 1rem;
  font-size: var(--make-font-size);
}
@media (min-width: 768px) {
  .expandable-cards__initial {
    font-size: 1.3rem;
    font-size: var(--make-font-size-big);
  }
}

.expandable-cards__trigger {
  background: none;
  border: none;
  cursor: pointer;
}
.expandable-cards__trigger svg {
  transition: fill 0.5s;
  transition: fill var(--make-transition-time);
  height: 1.15rem;
  height: var(--make-font-size-medium);
  fill: white;
}
.expandable-cards__trigger svg .vertical-line {
  transform: scaleY(1);
}

.expandable-cards__expanded-content {
  background: white;
  color: #76278b;
  padding: 4rem;
  z-index: 3;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  opacity: 0;
}

.expandable-cards__card--expanded .expandable-cards__expanded-content {
  height: auto;
  opacity: 1;
}

.expandable-cards__card--expanded .expandable-cards__trigger {
  z-index: 4;
}

.expandable-cards__card--expanded .expandable-cards__trigger svg {
  fill: #76278b;
}
.expandable-cards__card--expanded .expandable-cards__trigger svg .vertical-line {
  transform: scaleY(0);
}

.expandable-cards__card:hover {
  background: #fd03fd;
  color: #1d1d39;
  color: var(--make-font-color-alt);
}
.expandable-cards__card:hover svg {
  fill: #1d1d39;
  fill: var(--make-font-color-alt);
}

/* INTERACTIVE CARDS=======================
   Fonts, colours etc for interactive cards
======================================== */
@media (min-width: 768px) {
  .timeline-stage--2 .timeline-stage__breakdown {
    overflow-y: visible;
  }
}

.interactive-cards__card {
  -webkit-animation: wibble 15s linear;
          animation: wibble 15s linear;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background: linear-gradient(230deg, #387B90 0%, #333465 100%);
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.5s, color 0.5s;
  transition: background var(--make-transition-time), color var(--make-transition-time);
  overflow: hidden;
  opacity: 0.6;
  border: 1px solid #1d1d39;
}
@media (min-width: 1024px) {
  .interactive-cards__card {
    padding: 2rem 3rem;
  }
}

.interactive-cards__card:nth-of-type(5n+2) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.interactive-cards__card:nth-of-type(5n+3) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}

.interactive-cards__card:nth-of-type(5n+4) {
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
}

.interactive-cards__card:nth-of-type(5n+5) {
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}

.interactive-cards__initial {
  font-size: 1rem;
  font-size: var(--make-font-size);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
  text-align: center;
}
@media (min-width: 1024px) {
  .interactive-cards__initial {
    font-size: 1.3rem;
    font-size: var(--make-font-size-big);
  }
}

.interactive-cards__expanded-content {
  visibility: hidden;
  height: 0;
  position: absolute;
  left: -9000px;
}

.interactive-cards__content-space {
  --make-transition-time: 1s;
  background: white;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  padding: 2rem;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  transition: opacity 0.5s;
  transition: opacity var(--make-transition-time);
  opacity: 1;
}

.interactive-cards__content-space--transitioning {
  transition: opacity 0.5s;
  transition: opacity var(--make-transition-time);
  opacity: 0;
}

.interactive-cards__content-space .interactive-cards__subtitle {
  color: #fd03fd;
  color: var(--make-font-color-bright);
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
  text-align: center;
  margin-bottom: 1rem;
}

.interactive-cards__card:hover {
  background: #fd03fd;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  opacity: 1;
}

.interactive-cards__card--active {
  border-color: #387B90;
  opacity: 1;
  color: #fd03fd;
  color: var(--make-font-color-bright);
}

.interactive-cards__card--active:hover {
  border-color: #fd03fd;
}

/* EXPANDABLE CARD =============
   Styling for unexpandable card
============================== */
.unexpandable-cards__card {
  background: linear-gradient(230deg, rgba(56, 123, 144, 0.8) 0%, rgba(51, 52, 101, 0.8) 100%);
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  padding: 1rem 2.5rem;
}

.unexpandable-cards__initial {
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
  line-height: 116%;
  line-height: var(--make-line-height-small);
  font-weight: 500;
  text-align: center;
}

.unexpandable-cards__card:hover {
  -webkit-animation: wibble 15s linear;
          animation: wibble 15s linear;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/* FLIP CARD ====================
   Styling for flip card
============================== */
.flip-cards__card {
  transition: z-index, transform 0.5s;
  transition-delay: 1s, 0.5s;
  cursor: pointer;
  z-index: 0;
}

.flip-cards__card:hover,
.flip-cards__card--flipped {
  transition-delay: 0s;
  z-index: 1;
}

.flip-cards__body {
  transform-style: preserve-3d;
  transition: 1s transform;
  min-height: 300px;
}

.flip-cards__card:hover .flip-cards__body,
.flip-cards__card--flipped .flip-cards__body {
  transform: rotateX(-180deg);
}

.flip-cards__back {
  transform: rotateX(-180deg) translate(-100%, 0);
  background: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  padding: 2rem;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  text-align: center;
}

.flip-cards__front {
  border-radius: 4px;
  border-radius: var(--make-border-radius);
  background: linear-gradient(230deg, rgba(56, 123, 144, 0.8) 0%, rgba(51, 52, 101, 0.8) 100%);
}

.flip-cards__icon {
  margin-bottom: 1rem;
}

.flip-cards__icon svg {
  width: 6rem;
}

.flip-cards__subtitle {
  text-transform: uppercase;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
  letter-spacing: 1.5px;
  letter-spacing: var(--make-font-spacing-more);
  line-height: 116%;
  line-height: var(--make-line-height-small);
  max-width: 70%;
  text-align: center;
}

.flip-cards__back p:last-of-type {
  margin-bottom: 0;
}

/* HOME TIMELINE===========
   Styling for the timeline
======================== */
.timeline {
  position: relative;
}

.timeline__contact-button {
  position: -webkit-sticky;
  position: sticky;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  border: none;
  cursor: pointer;
}

.timeline-progress-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  height: 0;
  overflow: hidden;
  transition: height 0.7s;
  background: white;
}
.timeline-progress-bar:after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  height: 4px;
  background: #1d1d39;
}
@media (min-width: 1025px) {
  .timeline-progress-bar:after {
    height: 6px;
  }
}
.timeline-progress-bar:before {
  --make-scale-val: -100%;
  --make-scale-duration: 1s;
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2;
  transform: translateX(var(--make-scale-val));
  transition: transform var(--make-scale-duration) ease;
  transform-origin: 0 50%;
  background: #fd03fd;
  border-radius: 0 2px 2px 0;
}
@media (min-width: 1024px) {
  .timeline-progress-bar:before {
    height: 6px;
    border-radius: 0 3px 3px 0;
  }
}
@media (min-width: 1488px) {
  .timeline-progress-bar:before {
    --make-progress-step-width: calc(var(--make-container-max) / 5);
    --make-progress-step-width-half: calc(var(--make-progress-step-width) / 2);
    --make-progress-negative-container-space: calc((100vw - var(--make-container-max)) / 2);
  }
}

.timeline-progress-bar.stuck {
  height: 30px;
}
@media (min-width: 768px) {
  .timeline-progress-bar.stuck {
    height: 60px;
  }
}
@media (min-width: 1024px) {
  .timeline-progress-bar.stuck {
    height: 70px;
  }
}

.timeline-progress-bar__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
  --make-columns: repeat(5, 1fr);
  list-style-type: none;
  position: relative;
  padding: 0;
  height: 30px;
}
@media (min-width: 768px) {
  .timeline-progress-bar__container {
    height: 60px;
  }
}
@media (min-width: 1024px) {
  .timeline-progress-bar__container {
    height: 70px;
  }
}

.timeline-progress-bar__step {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  font-size: 0;
  padding-top: 1.75rem;
}
.timeline-progress-bar__step:hover {
  color: #fd03fd;
  color: var(--make-font-color-bright);
}
@media (min-width: 768px) {
  .timeline-progress-bar__step {
    font-size: 0.77rem;
    font-size: var(--make-font-size-tiny);
  }
}
@media (min-width: 1024px) {
  .timeline-progress-bar__step {
    font-size: 0.9rem;
    font-size: var(--make-font-size-small);
    padding-top: 2rem;
  }
}
.timeline-progress-bar__step:before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 1rem;
  background: #1d1d39;
  z-index: 1;
  transform: scale(2.9);
}
@media (min-width: 1024px) {
  .timeline-progress-bar__step:before {
    width: 6px;
    height: 6px;
  }
}
.timeline-progress-bar__step:after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 1rem;
  background: transparent;
  z-index: 3;
}
@media (min-width: 1024px) {
  .timeline-progress-bar__step:after {
    width: 6px;
    height: 6px;
  }
}

.timeline-progress-bar__link {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.timeline-progress-bar[data-current-step=stage1]:before {
  --make-scale-val: calc((86vw * -1) + 1rem);
}
@media (min-width: 768px) {
  .timeline-progress-bar[data-current-step=stage1]:before {
    --make-scale-val: -86vw;
  }
}
@media (min-width: 1488px) {
  .timeline-progress-bar[data-current-step=stage1]:before {
    --make-scale-val: calc(((var(--make-progress-step-width-half) * 9) + var(--make-progress-negative-container-space)) * -1);
  }
}
.timeline-progress-bar[data-current-step=stage1] .timeline-progress-bar__step:nth-of-type(1):after {
  -webkit-animation: growCircle 0.2s linear;
          animation: growCircle 0.2s linear;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.timeline-progress-bar[data-current-step=stage2]:before {
  --make-scale-val: calc(68vw * -1);
}
@media (min-width: 1488px) {
  .timeline-progress-bar[data-current-step=stage2]:before {
    --make-scale-val: calc(((var(--make-progress-step-width-half) * 7) + var(--make-progress-negative-container-space)) * -1);
  }
}
.timeline-progress-bar[data-current-step=stage2] .timeline-progress-bar__step:nth-of-type(1):after,
.timeline-progress-bar[data-current-step=stage2] .timeline-progress-bar__step:nth-of-type(2):after {
  -webkit-animation: growCircle 0.2s linear;
          animation: growCircle 0.2s linear;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.timeline-progress-bar[data-current-step=stage3]:before {
  --make-scale-val: -50%;
}
.timeline-progress-bar[data-current-step=stage3] .timeline-progress-bar__step:nth-of-type(1):after,
.timeline-progress-bar[data-current-step=stage3] .timeline-progress-bar__step:nth-of-type(2):after,
.timeline-progress-bar[data-current-step=stage3] .timeline-progress-bar__step:nth-of-type(3):after {
  -webkit-animation: growCircle 0.2s linear;
          animation: growCircle 0.2s linear;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.timeline-progress-bar[data-current-step=stage4]:before {
  --make-scale-val: -32vw;
}
@media (min-width: 1488px) {
  .timeline-progress-bar[data-current-step=stage4]:before {
    --make-scale-val: calc(((var(--make-progress-step-width-half) * 3) + var(--make-progress-negative-container-space)) * -1);
  }
}
.timeline-progress-bar[data-current-step=stage4] .timeline-progress-bar__step:nth-of-type(1):after,
.timeline-progress-bar[data-current-step=stage4] .timeline-progress-bar__step:nth-of-type(2):after,
.timeline-progress-bar[data-current-step=stage4] .timeline-progress-bar__step:nth-of-type(3):after,
.timeline-progress-bar[data-current-step=stage4] .timeline-progress-bar__step:nth-of-type(4):after {
  -webkit-animation: growCircle 0.2s linear;
          animation: growCircle 0.2s linear;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.timeline-progress-bar[data-current-step=stage5]:before {
  --make-scale-val: 0;
  --make-scale-duration: 2s;
}
@media (min-width: 1488px) {
  .timeline-progress-bar[data-current-step=stage5]:before {
    --make-scale-duration: 2.5s;
  }
}
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(1):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(2):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(3):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(4):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(5):after {
  -webkit-animation: growCircle 0.2s linear;
          animation: growCircle 0.2s linear;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@media (min-width: 768px) {
  .timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(1):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(2):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(3):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(4):after,
.timeline-progress-bar[data-current-step=stage5] .timeline-progress-bar__step:nth-of-type(5):after {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
}

/* HOME HERO========================
   Styling for the hero unit on home
================================= */
.hero {
  padding: 5rem 0;
}

.hero__title {
  margin: 0;
  text-align: center;
  font-size: 1.7rem;
  font-size: var(--make-font-size-large);
  line-height: 100%;
  line-height: var(--make-line-height-tight);
}
@media (min-width: 768px) {
  .hero__title {
    font-size: 2.4rem;
    font-size: var(--make-font-size-title);
  }
}

.hero__intro {
  text-align: center;
}
.hero__intro p {
  margin-bottom: 0;
}

/* HOME HERO========================
   Styles for the hero unit on home
================================= */
.hero--home .hero__logo svg {
  height: 60px;
}
@media (min-width: 768px) {
  .hero--home .hero__logo svg {
    height: 100px;
  }
}

/* TIMELINE NAVIGATION================
   Styling for the timeline navigation
=================================== */
.timeline-navigation__step {
  margin-bottom: 2rem;
}

.timeline-navigation__number {
  font-size: 5.1rem;
  font-weight: bold;
  line-height: 100%;
  line-height: var(--make-line-height-tight);
  color: transparent;
  -webkit-text-stroke: 1px #fd03fd;
  z-index: 1;
  position: relative;
  transition: opacity 0.5s, transform 0.5s;
  transition: opacity var(--make-transition-time), transform var(--make-transition-time);
  background: transparent;
}
@media (min-width: 768px) {
  .timeline-navigation__number {
    font-size: 10rem;
    margin: 1rem 0;
    text-align: center;
    -webkit-text-stroke: 0 #fd03fd;
    background: linear-gradient(180deg, #7E118D 0%, #5E1471 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (max-width: 767px) {
  .timeline-navigation__step:hover .timeline-navigation__number {
    -webkit-text-stroke: 0 #fd03fd;
    background: #fd03fd;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateX(-10px);
  }
}

.timeline-navigation__subheading {
  font-weight: 400;
  font-size: 1rem;
  font-size: var(--make-font-size);
  line-height: 116%;
  line-height: var(--make-line-height-small);
  color: #fd03fd;
  color: var(--make-font-color-bright);
  z-index: 2;
  transition: color 0.5s, top 0.5s;
  transition: color var(--make-transition-time), top var(--make-transition-time);
}
@media (min-width: 768px) {
  .timeline-navigation__subheading {
    text-align: center;
    color: white;
    color: var(--make-font-color);
    margin-bottom: 0.75rem;
  }
}

.timeline-navigation__context p {
  font-size: 1rem;
  font-size: var(--make-font-size);
  line-height: 116%;
  line-height: var(--make-line-height-small);
  margin-bottom: 0;
  z-index: 2;
  position: relative;
}
@media (min-width: 768px) {
  .timeline-navigation__context p {
    font-size: 0.77rem;
    font-size: var(--make-font-size-tiny);
    text-align: center;
  }
}

.timeline-navigation__indicator svg {
  height: 2.5rem;
  transform: rotate(180deg);
  z-index: 1;
  position: relative;
  transition: transform 0.5s;
  transition: transform var(--make-transition-time);
}
.timeline-navigation__indicator svg path {
  fill: white;
  transition: fill 0.5s;
  transition: fill var(--make-transition-time);
}

@media (max-width: 767px) {
  .timeline-navigation__step:hover .timeline-navigation__indicator svg {
    transform: rotate(180deg) translateX(-10px);
  }
  .timeline-navigation__step:hover .timeline-navigation__indicator svg path {
    fill: #fd03fd;
  }
}

@media (min-width: 768px) {
  .timeline-navigation__step:hover .timeline-navigation__subheading {
    color: #fd03fd;
    color: var(--make-font-color-bright);
  }
  .timeline-navigation__step:hover .timeline-navigation__number {
    opacity: 0.35;
  }
}

/* HOME STAGE COMMON ===================
   Styling for the common stage elements
===================================== */
.timeline-stage {
  --make-stage-background-size: 200% auto;
  background-color: #1d1d39;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: var(--make-stage-background-size);
  padding-top: 0;
}
@media (min-width: 768px) {
  .timeline-stage {
    --make-stage-background-size: 2560px auto;
  }
}

.timeline-stage__information {
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

.timeline-stage__title {
  font-size: 1.7rem;
  font-size: var(--make-font-size-large);
}
@media (min-width: 768px) {
  .timeline-stage__title {
    font-size: 2.4rem;
    font-size: var(--make-font-size-title);
  }
}

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

.timeline-stage__number {
  font-size: 5.1rem;
  font-weight: bold;
  line-height: 100%;
  line-height: var(--make-line-height-tight);
}
@media (min-width: 768px) {
  .timeline-stage__number {
    font-size: 10rem;
  }
}

/* HOME STAGE 1=======================
   Styling for the stage 1 in timeline
=================================== */
.timeline-stage--1 {
  background-image: url(5ec8cfcbc7b64b108a4f60f35e92638c.svg);
  padding-top: 1.5rem;
}
@media (min-width: 768px) {
  .timeline-stage--1 {
    padding-top: 12rem;
  }
}

/* HOME STAGE 2=======================
   Styling for the stage 2 in timeline
=================================== */
.timeline-stage--2 {
  background-image: url(a1980db6f6ac2b0c7c078ce56c5e6e1e.svg);
  z-index: 2;
}
@media (min-width: 768px) {
  .timeline-stage--2 {
    padding-top: 8rem;
  }
}

@media (min-width: 768px) {
  .timeline-stage--2 .key-risks {
    background-image: url(e5e21fddaf26c65dfe96abd346ad6700.svg), linear-gradient(180deg, rgba(118, 39, 139, 0.5) 0%, rgba(29, 29, 57, 0) 100%);
    background-repeat: no-repeat;
    background-position: bottom -1570px center, top center;
    background-size: var(--make-stage-background-size), 100%;
  }
}

/* HOME STAGE 3=======================
   Styling for the stage 3 in timeline
=================================== */
.timeline-stage--3 {
  background-image: url(e5e21fddaf26c65dfe96abd346ad6700.svg);
}
@media (min-width: 768px) {
  .timeline-stage--3 {
    background-position: top -450px center;
    padding-top: 5rem;
  }
}

/* HOME STAGE 4=======================
   Styling for the stage 4 in timeline
=================================== */
.timeline-stage--4 {
  background-image: url(30bd0d70c8f89b58441251a8243639be.svg);
}
@media (min-width: 768px) {
  .timeline-stage--4 {
    padding-top: 10rem;
  }
}

@media (min-width: 768px) {
  .timeline-stage--4 .key-risks {
    background-image: url(82161b2edffd0067a21e2e40da049aa3.svg), linear-gradient(180deg, rgba(118, 39, 139, 0.5) 0%, rgba(29, 29, 57, 0) 100%);
    background-repeat: no-repeat;
    background-position: bottom -1570px center, top center;
    background-size: var(--make-stage-background-size), 100%;
  }
}

/* HOME STAGE 5=======================
   Styling for the stage 5 in timeline
=================================== */
.timeline-stage--5 {
  background-image: url(82161b2edffd0067a21e2e40da049aa3.svg);
}
@media (min-width: 768px) {
  .timeline-stage--5 {
    background-position: top -230px center;
    min-height: 1570px;
  }
}
@media (min-width: 1024px) {
  .timeline-stage--5 {
    padding-top: 11rem;
  }
}

.timeline-stage__instruction {
  width: 100%;
  text-align: center;
}
.timeline-stage__instruction:before {
  content: "ℹ";
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 1px solid #fd03fd;
  border: 1px solid var(--make-font-color-bright);
  position: relative;
  display: inline-block;
  line-height: 16px;
  margin-right: 5px;
  color: #fd03fd;
  color: var(--make-font-color-bright);
}

/* INSIGHT/EVENT CAROUSEL===============
   Styles etc for insight/event carousel
===================================== */
.insights-and-events.carousel {
  margin: 0;
  background: transparent;
}
@media (max-width: 1023px) {
  .insights-and-events.carousel {
    padding-bottom: 3.8rem;
    padding-bottom: var(--make-section-padding-value);
  }
}

.insights-and-events.carousel .carousel__heading {
  font-size: 1.7rem;
  font-size: var(--make-font-size-large);
}

/* INSIGHT/EVENT CATEGORIES ========================
   Fonts, colours etc for insights/events categories
================================================= */
.categories {
  background: white;
}

.categories__container {
  border-bottom: 1px solid #d3d2d7;
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}
@media (max-width: 767px) {
  .categories__container {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.categories__link {
  background: #d3d2d7;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  font-size: 0.9rem;
  font-size: var(--make-font-size-small);
  font-weight: 400;
  margin: 0.5rem 1rem;
}
@media (max-width: 767px) {
  .categories__link {
    background: transparent;
    margin: 0;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #d3d2d7;
    text-align: left;
    display: block;
    width: 100%;
    border-radius: 0;
    font-size: 1rem;
    font-size: var(--make-font-size);
  }
  .categories__link:last-of-type {
    margin-bottom: 1.5rem;
  }
}

.categories__link--current {
  background: #1d1d39;
  background: var(--make-font-color-alt);
  color: white;
  color: var(--make-font-color);
  position: relative;
  display: flex;
  align-items: center;
}
.categories__link--current svg {
  height: 0.9rem;
  height: var(--make-font-size-small);
  margin-left: 0.5rem;
}
.categories__link--current svg.tick-icon {
  display: none;
}
@media (max-width: 767px) {
  .categories__link--current {
    background: transparent;
    color: #1d1d39;
    color: var(--make-font-color-alt);
  }
  .categories__link--current svg.close-icon {
    display: none;
  }
  .categories__link--current svg.tick-icon {
    display: block;
    align-self: end;
    margin-left: auto;
    height: 1.3rem;
    height: var(--make-font-size-big);
  }
}

.categories__link:hover {
  background: #fd03fd;
  color: #1d1d39;
  color: var(--make-font-color-alt);
}
@media (max-width: 767px) {
  .categories__link:hover {
    background: transparent;
  }
}

.categories__mobile-trigger {
  display: none;
}
@media (max-width: 767px) {
  .categories__mobile-trigger {
    border: none;
    position: relative;
    display: block;
    align-items: center;
    background: #d3d2d7;
    color: #1d1d39;
    color: var(--make-font-color-alt);
    font-weight: 400;
    margin: 0;
    text-align: center;
    cursor: pointer;
    width: 100%;
    padding: 1.5rem 2rem;
    text-transform: uppercase;
  }
  .categories__mobile-trigger svg {
    position: absolute;
    right: 1.5rem;
    height: 0.9rem;
    height: var(--make-font-size-small);
    margin-left: 0.5rem;
    fill: #1d1d39;
    fill: var(--make-font-color-alt);
  }
}

.categories__mobile-trigger:hover {
  background: #fd03fd;
  color: #1d1d39;
  color: var(--make-font-color-alt);
}

.categories__mobile-trigger-close {
  display: none;
}
@media (max-width: 767px) {
  .categories__mobile-trigger-close {
    background: transparent;
    margin: 0;
    padding: 1.5rem 2rem;
    border: none;
    border-bottom: 1px solid #d3d2d7;
    text-align: center;
    width: 100%;
    height: auto;
    border-radius: 0;
    font-size: 1rem;
    font-size: var(--make-font-size);
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    display: block;
    line-height: 1.3rem;
    line-height: var(--make-font-size-big);
  }
  .categories__mobile-trigger-close svg {
    height: 1.3rem;
    height: var(--make-font-size-big);
    margin-left: 0.5rem;
    fill: #1d1d39;
    fill: var(--make-font-color-alt);
    transform: rotate(45deg);
    position: absolute;
    right: 1.5rem;
  }
}

.categories__mobile-trigger-close-alt {
  display: none;
}
@media (max-width: 767px) {
  .categories__mobile-trigger-close-alt {
    display: block;
    border: none;
    width: calc(100% - 3rem);
    background: #2c2d59;
    color: white;
    color: var(--make-font-color);
    font-weight: 400;
    cursor: pointer;
    text-align: center;
    padding: 1.5rem 2rem;
    text-transform: uppercase;
    align-self: flex-end;
    margin: auto 1.5rem 1.5rem;
  }
  .categories__mobile-trigger-close-alt:hover {
    background: #fd03fd;
    color: #1d1d39;
    color: var(--make-font-color-alt);
  }
}

@media (max-width: 767px) {
  .categories__links-wrapper {
    right: -91vw;
    position: fixed;
    width: 91vw;
    background: white;
    padding: 0;
    height: 100vh;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    transition: right 0.5s;
    transition: right var(--make-transition-time);
    overflow-y: scroll;
  }
  .categories__links-wrapper.is-active {
    right: 0;
  }
}

/* INSIGHT/EVENT LIST ========================
   Fonts, colours etc for insights/events list
=========================================== */
.insights-and-events {
  background: white;
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

.insights-and-events__title,
.insights-and-events__showing {
  color: #1d1d39;
  color: var(--make-font-color-alt);
  text-align: center;
}

.insights-and-events__title {
  margin-bottom: 1rem;
}

.insights-and-events__list {
  margin: 3.8rem 0;
  margin: var(--make-section-padding);
}

.insights-and-events__pagination {
  color: #1d1d39;
  color: var(--make-font-color-alt);
  text-align: center;
}

.insights-and-events__pagination svg {
  height: 0.9rem;
  height: var(--make-font-size-small);
  fill: #1d1d39;
  fill: var(--make-font-color-alt);
  transition: transform 0.5s;
  transition: transform var(--make-transition-time);
}

.insights-and-events__pagination .pagination__arrow--next svg {
  transform: rotate(180deg);
}

/* INSIGHT/EVENT PAGINATION==========================
   Fonts, colours etc for insights/events pagination
================================================= */
.pagination svg {
  height: 0.9rem;
  height: var(--make-font-size-small);
  fill: #1d1d39;
  fill: var(--make-font-color-alt);
  transition: transform 0.5s;
  transition: transform var(--make-transition-time);
}

.pagination .pagination__arrow--next svg {
  transform: rotate(180deg);
}

.pagination .page-numbers {
  margin: 0 0.5rem;
  text-decoration: none;
  position: relative;
  padding: 0.75rem 0.25rem;
}

.pagination .page-numbers.current:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #fd03fd;
}

/* GET STARTED BANNER ===========================
   Styling for the get started banner
============================================== */
.get-started-banner {
  background: #1d1d39;
  text-align: center;
  padding: 2rem;
}

.get-started-banner__title {
  font-size: 1.15rem;
  font-size: var(--make-font-size-medium);
}

/* PAGE CONTENT ===================
   Styling for page content
================================ */
.page-content {
  background: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

.page-content .page-content__content-wrapper h2 {
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  .page-content .page-content__content-wrapper h2 {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.page-content .page-content__content-wrapper h3 {
  margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
  .page-content .page-content__content-wrapper h3 {
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.page-content .page-content__content-wrapper h4 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
}

/* CENTERED TEXT ===================
   Styling for centered text
================================ */
.centered-text {
  margin: 3.8rem 0;
  margin: var(--make-section-padding);
  background: #1d1d39;
  text-align: center;
}

.hero-background-wrapper + .centered-text {
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
  margin: 0;
}

.centered-text--teal {
  background: linear-gradient(230deg, #387B90 0%, #333465 100%);
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
  margin: 0;
}

.centered-text--white {
  background: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
  margin: 0;
}

.centered-text--purple {
  background: linear-gradient(180deg, #7E118D 0%, #5E1471 100%);
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
  margin: 0;
}

.centered-text p:last-of-type {
  margin-bottom: 0;
}

.centered-text h2,
.centered-text h3 {
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  .centered-text h2,
.centered-text h3 {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.centered-text h4 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
}

/* MIXED IMAGE AND CONTENT ===========
   Styles for mixed image and content
=================================== */
.mixed-image-and-content {
  --make-section-padding: calc(var(--make-section-padding-value) * 2) 0;
  background: #1d1d39;
  margin: 3.8rem 0;
  margin: var(--make-section-padding);
}

.hero-background-wrapper + .centered-text + .mixed-image-and-content {
  margin-top: 0;
  padding-top: calc(3.8rem * 2);
  padding-top: calc(var(--make-section-padding-value) * 2);
}

.mixed-image-and-content__content-wrapper {
  text-align: center;
  margin-top: 3.8rem;
  margin-top: var(--make-section-padding-value);
}
@media (min-width: 1024px) {
  .mixed-image-and-content__content-wrapper {
    text-align: left;
    margin-top: 0;
  }
}

.mixed-image-and-content__image-wrapper figure,
.mixed-image-and-content__image-wrapper img {
  width: 100%;
  height: auto;
}

.mixed-image-and-content__content-wrapper--white-background {
  background: #d3d2d7;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  padding: 3rem;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
}
@media (min-width: 1024px) {
  .mixed-image-and-content__content-wrapper--white-background {
    margin-left: calc(23px * -1);
    margin-left: calc(var(--make-gap) * -1);
    border-radius: 0 4px 4px 0;
    border-radius: 0 var(--make-border-radius) var(--make-border-radius) 0;
  }
}

@media (min-width: 1024px) {
  .mixed-image-and-content--image-right .mixed-image-and-content__content-wrapper--white-background {
    border-radius: 4px 0 0 4px;
    border-radius: var(--make-border-radius) 0 0 var(--make-border-radius);
  }
}

.mixed-image-and-content__content-wrapper p:last-of-type {
  margin-bottom: 0;
}

.mixed-image-and-content__content-wrapper h2 {
  margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
  .mixed-image-and-content__content-wrapper h2 {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.mixed-image-and-content__content-wrapper h3 {
  margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
  .mixed-image-and-content__content-wrapper h3 {
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.mixed-image-and-content__content-wrapper h4 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
}

/* Breakdown=======================
   Styling for breakdown
=================================== */
.breakdown {
  margin: 3.8rem 0;
  margin: var(--make-section-padding);
}

@media (max-width: 767px) {
  .breakdown__title {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
  }
}

.breakdown__intro {
  text-align: center;
}

/* FULL WIDTH CONTENT ===================
   Styling for full width content
====================================== */
.full-width-content {
  margin: 3.8rem 0;
  margin: var(--make-section-padding);
}

.full-width-content--white-background {
  background: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  margin: 0;
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

.full-width-content .full-width-content__content-wrapper h2 {
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  .full-width-content .full-width-content__content-wrapper h2 {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.full-width-content .full-width-content__content-wrapper h3 {
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  .full-width-content .full-width-content__content-wrapper h3 {
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.full-width-content .full-width-content__content-wrapper h4 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
}

.full-width-content .full-width-content__content-wrapper p + h2,
.full-width-content .full-width-content__content-wrapper p + h3 {
  margin-top: 2rem;
}

/* FLIP CARD SECTION ==================
   Styling for flip card section
==================================== */
.flip-cards-section {
  background-color: #1d1d39;
  background-image: url(b7678568e08b28a8dc9150c0564b4057.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

@media (max-width: 767px) {
  .flip-cards-section__title {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.flip-cards-section__instruction {
  width: 100%;
  text-align: center;
}
.flip-cards-section__instruction:before {
  content: "ℹ";
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 1px solid #fd03fd;
  border: 1px solid var(--make-font-color-bright);
  position: relative;
  display: inline-block;
  line-height: 16px;
  margin-right: 5px;
  color: #fd03fd;
  color: var(--make-font-color-bright);
}

/* TEXT CAROUSEL ===================
   Styling for text carousel
================================= */
.text-carousel {
  padding-top: 3.8rem;
  padding-top: var(--make-section-padding-value);
  padding-bottom: 0;
  margin-bottom: 3.8rem;
  margin-bottom: var(--make-section-padding-value);
}

/* KEY RISKS ALT ======================
   Fonts, colours etc for key risks alt
==================================== */
.key-risks-alt {
  padding: 3.8rem 0 0 0;
  padding: var(--make-section-padding-value) 0 0 0;
}
@media (min-width: 1024px) {
  .key-risks-alt {
    padding: 3.8rem 0;
    padding: var(--make-section-padding);
  }
}

.key-risks-alt__heading {
  text-align: center;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
}
@media (min-width: 768px) {
  .key-risks-alt__heading {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
  }
}

.key-risks-alt__intro {
  text-align: center;
}

.key-risks-alt .expandable-cards__card {
  --make-rows: 28px auto;
  background: rgba(94, 58, 115, 0.8);
  padding: 2rem;
  border-radius: 4px;
  border-radius: var(--make-border-radius);
}

.key-risks-alt .expandable-cards__expanded-content {
  padding: 2rem;
}

.key-risks-alt .expandable-cards__subtitle {
  text-align: center;
}

.key-risks-alt .expandable-cards__initial {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.15rem;
  font-size: var(--make-font-size-medium);
  padding: 0 2rem;
}

.key-risks-alt .expandable-cards__content {
  font-size: 0.9rem;
  font-size: var(--make-font-size-small);
  text-align: center;
}
@media (min-width: 768px) {
  .key-risks-alt .expandable-cards__content {
    text-align: left;
  }
}

.key-risks-alt .expandable-cards__title + .key-risks-alt .expandable-cards__content {
  margin: 30px 0 0 0;
}

.key-risks-alt .expandable-cards__expanded-content .expandable-cards__subtitle {
  margin-bottom: 30px;
}

.key-risks-alt .expandable-cards__card:hover {
  background: #fd03fd;
  color: #1d1d39;
  color: var(--make-font-color-alt);
}
.key-risks-alt .expandable-cards__card:hover svg {
  fill: #1d1d39;
  fill: var(--make-font-color-alt);
}

.key-risks-alt .expandable-cards__trigger {
  top: 2rem;
}

/* EXPANDABLE CARD SECTION ==================
   Styling for expandable card section
==================================== */
.expandable-cards-section {
  background-color: #1d1d39;
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

@media (max-width: 767px) {
  .expandable-cards-section__title {
    font-size: 1.7rem;
    font-size: var(--make-font-size-large);
    line-height: 100%;
    line-height: var(--make-line-height-tight);
  }
}

.expandable-cards-section__intro {
  text-align: center;
}

/* DOWNLOAD CONTENT BANNER ===========================
   Styling for the download content banner
============================================== */
.download-content-banner {
  background: #1d1d39;
  text-align: center;
  padding: 2rem;
}

.download-content-banner__title {
  font-size: 1.15rem;
  font-size: var(--make-font-size-medium);
}

/* VIDEO EMBED =========================
   Styling for video embed
====================================== */
.video-embed {
  background: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  margin: 0;
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

/* RELATED LINKS ===================
   Styling for related links
================================ */
.related-links {
  background: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

.related-links__title {
  margin-bottom: 23px;
  margin-bottom: var(--make-gap);
}

.related-links__list {
  list-style-type: none;
  padding: 0;
  border-top: 1px solid #aeb4cb;
}

.related-links__list-item {
  border-bottom: 1px solid #aeb4cb;
  padding: 20px 0;
  margin: 0;
}

.related-links__link {
  color: #1d1d39;
  color: var(--make-font-color-alt);
  text-decoration: none;
  font-size: 1.3rem;
  font-size: var(--make-font-size-big);
}

.related-links__link svg {
  height: 20px;
  width: 12px;
  fill: #2c2d59;
  transform: rotate(180deg);
  transition: transform ease-in-out 0.3s;
}

.related-links__link:hover {
  color: #fd03fd;
  color: var(--make-font-color-bright);
}

.related-links__link:hover svg {
  transform: rotate(180deg) translateX(-10px);
  fill: #fd03fd;
  fill: var(--make-font-color-bright);
}

/* ADJACENT INSIGHTS ====================
   Styling for adjacent insights
====================================== */
.adjacent-insights {
  background: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
  margin: 0;
  padding: 3.8rem 0;
  padding: var(--make-section-padding);
}

.adjacent-insights__button {
  padding: 10px;
  border-radius: 5px;
  background: linear-gradient(230deg, #387B90 0%, #333465 100%);
  text-decoration: none;
  color: white;
  color: var(--make-font-color);
}
@media (min-width: 768px) {
  .adjacent-insights__button {
    padding: 23px 80px 23px 23px;
  }
}

.adjacent-insights__button--next {
  padding: 10px;
  text-align: right;
}
@media (min-width: 768px) {
  .adjacent-insights__button--next {
    padding: 23px 23px 23px 80px;
  }
}

.adjacent-insights__button svg {
  height: 15px;
  width: auto;
  fill: white;
  fill: var(--make-font-color);
}

.adjacent-insights__label {
  font-weight: bold;
}

.adjacent-insights__title {
  margin-top: 5px;
}

/* GENERAL ==========================
   Fonts, colours etc for general use
================================== */
body {
  background: #1d1d39;
}

.hero-background-wrapper--insight-post {
  background-image: none;
  background-color: white;
  color: #1d1d39;
  color: var(--make-font-color-alt);
}

.hero-background-wrapper--insight-post .hero__container {
  --make-gap: 2rem;
}

.hero-background-wrapper--insight-post .hero__title {
  grid-row: 2;
}

.hero-background-wrapper--insight-post .hero__date {
  grid-column: 1/-1;
  grid-row: 1;
  text-align: center;
}

.insightevent-template-default .full-width-content + .video-embed {
  padding-top: 0;
}

.insightevent-template-default .video-embed + .full-width-content {
  padding-top: 0;
}

.insightevent-template-default .full-width-content__container {
  --make-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
}

.insightevent-template-default .full-width-content__content-wrapper {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .insightevent-template-default .full-width-content__content-wrapper {
    grid-column: 3/span 8;
  }
}
@media (min-width: 1024px) {
  .insightevent-template-default .full-width-content__content-wrapper {
    grid-column: 4/span 6;
  }
}

.insightevent-template-default .video-embed__container {
  --make-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: var(--make-columns);
  grid-template-rows: auto;
  grid-template-rows: var(--make-rows);
  justify-items: stretch;
  justify-items: var(--make-justify);
  align-items: stretch;
  align-items: var(--make-align);
  grid-gap: 23px;
  grid-gap: var(--make-gap);
}

.insightevent-template-default .video-embed__content-wrapper {
  grid-column: span 4;
  justify-self: center;
}
@media (min-width: 768px) {
  .insightevent-template-default .video-embed__content-wrapper {
    grid-column: 3/span 8;
  }
}
@media (min-width: 1024px) {
  .insightevent-template-default .video-embed__content-wrapper {
    grid-column: 4/span 6;
  }
}