@import url(https://p.typekit.net/p.css?s=1&k=zta0yxz&ht=tk&f=40407.40408.40409.40410.40411.40412.40413.40414.40415.40416&a=24091584&app=typekit&e=css);
@charset "UTF-8";
/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1yp {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1tx {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1CE {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3Fg {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3rZ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_9jo {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

:root {
  --color-black-almost-rgba: 26, 26, 26;
  --color-black-almost: #1a1a1a;
  --color-grey-davys-rgba: 84, 84, 84;
  --color-grey-davys: #545454;
  --color-grey-dark: #b9babb;
  --color-grey-pastel: #d0d0c6;
  --color-grey-light: #d0d0d0;
  --color-grey: #b9babb;
  --color-grey-input: #f7f7f9;
  --color-blue-persian: #163bc8;
  /* oxford blue */
  --color-blue-oxford-rgba: 3, 0, 56;
  --color-blue-oxford: #030038;
  --color-blue-oxford-alpha10: rgba(var(--color-blue-oxford-rgba), 0.1);
  --color-blue-oxford-alpha03: rgba(var(--color-blue-oxford-rgba), 0.03);
  /* azure blue */
  --color-blue-azure-rgba: 0, 132, 255;
  --color-blue-azure: #0084ff;
  --color-blue-azure-darken-5: #0077e6;
  --color-blue-azure-alpha03: rgba(var(--color-blue-azure-rgba), 0.03);
  --color-blue-azure-alpha10: rgba(var(--color-blue-azure-rgba), 0.1);
  --color-blue-azure-alpha20: rgba(var(--color-blue-azure-rgba), 0.2);
  --color-blue-azure-03: #f7fbff;
  --color-blue-azure-10: #e5f2ff;
  --color-blue-oxford-03: #f7f7f9;
  --color-turquoise: #26dfd9;
  --color-pink-carmine: #e84855;
  --color-isabelline: #f4ebe8;
  --color-white-rgba: 255, 255, 255;
  --color-white: #ffffff;
  --color-green-java: #17e5b4;
  --color-blue-iss-rgba: 0, 44, 85;
  --color-blue-iss: #002c55;
  --color-green-ufo: #26df6e;
  --color-red-rgba: 255, 38, 25;
  --color-red: #ff2619;
  --color-orange-amber: #ff7700;
  --color-yellow-flavescent: #f8d648;
  --color-site-red: var(--color-red);
  --color-grey-dove: #6a6a6a;
  --color-pale: rgba(var(--color-white-rgba), 0.5);
  --color-black: var(--color-black-almost);
  --color-blue-dark: var(--color-blue-oxford);
  --color-blue-dark-darken-15: #030037;
  --color-yellow-rgba: 248, 214, 72;
  --color-yellow: #f8d648;
  --color-yellow-darken-10: #f6cb17;
  --color-body-bg: var(--color-blue-azure-alpha10);
  --color-wrapper-bg: var(--color-white);
  --color-blue: var(--color-blue-azure);
  --color-body: var(--color-black-almost);
  --color-body-grey: var(--color-grey-davys);
  --color-white-opaque: rgba(
    var(--color-white-rgba),
    0.5
  );
  --color-grey-light: #f5f5f5;
  --color-grey-mercury: #e6e6e6;
  --color-grey-pampas: #efebe8;
  --color-grey-silver: #cccccc;
  --color-grey-pablo: #777762;
  --color-link-blue: var(--color-blue);
  --color-link-blue-focus: var(--color-blue-oxford);
  --color-link-secondary: var(--color-blue-oxford);
  --color-link-secondary-focus: var(--color-blue);
  --color-link-nav-blue: var(--color-blue-oxford);
  --color-link-nav-blue-focus: var(--color-blue-azure);
  --color-btn: var(--color-link-blue);
  --color-btn-primary: var(--color-white);
  --color-btn-secondary: var(--color-blue-azure);
  --color-btn-tertiary: var(--color-grey-light);
  --color-bg-primary: var(--color-grey-mercury);
  --color-bg-panels: #030037;
  --logo-width-fixed: 52px;
  --test-bump: 0; }

/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  box-sizing: border-box; }

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

/*! normalize.css v7.0.0 | 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
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

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

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

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

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

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

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

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

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

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

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * 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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

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

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 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; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

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

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
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 and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

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

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

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

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

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

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

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0;
  /* [1] */
  border: 0; }

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
address,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, ol, ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 24px; }

/**
 * Consistent indentation for lists.
 */
dd, ol, ul {
  margin-left: 24px; }

/*
 * The Typekit service used to deliver this font or fonts for use on websites
 * is provided by Adobe and is subject to these Terms of Use
 * http://www.adobe.com/products/eulas/tou_typekit. For font license
 * information, see the list below.
 *
 * noto-sans:
 *   - http://typekit.com/eulas/00000000000000003b9b2578
 *   - http://typekit.com/eulas/00000000000000003b9b2579
 *   - http://typekit.com/eulas/00000000000000003b9b257a
 *   - http://typekit.com/eulas/00000000000000003b9b257b
 *   - http://typekit.com/eulas/00000000000000003b9b257c
 *   - http://typekit.com/eulas/00000000000000003b9b257d
 *   - http://typekit.com/eulas/00000000000000003b9b257e
 *   - http://typekit.com/eulas/00000000000000003b9b257f
 *   - http://typekit.com/eulas/00000000000000003b9b2580
 *   - http://typekit.com/eulas/00000000000000003b9b2581
 *
 * © 2009-2020 Adobe Systems Incorporated. All Rights Reserved.
 */
/*{"last_published":"2020-09-21 10:20:15 UTC"}*/
@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/d9dfc1/00000000000000003b9b2578/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"), url("https://use.typekit.net/af/d9dfc1/00000000000000003b9b2578/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"), url("https://use.typekit.net/af/d9dfc1/00000000000000003b9b2578/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 300; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/dbd402/00000000000000003b9b2579/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"), url("https://use.typekit.net/af/dbd402/00000000000000003b9b2579/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff"), url("https://use.typekit.net/af/dbd402/00000000000000003b9b2579/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 300; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/5d1912/00000000000000003b9b257a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/5d1912/00000000000000003b9b257a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/5d1912/00000000000000003b9b257a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/1319af/00000000000000003b9b257b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/1319af/00000000000000003b9b257b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/1319af/00000000000000003b9b257b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 400; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/a91117/00000000000000003b9b257c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/a91117/00000000000000003b9b257c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/a91117/00000000000000003b9b257c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 500; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/c5fa99/00000000000000003b9b257d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"), url("https://use.typekit.net/af/c5fa99/00000000000000003b9b257d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"), url("https://use.typekit.net/af/c5fa99/00000000000000003b9b257d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 500; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/5e3d62/00000000000000003b9b257e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/5e3d62/00000000000000003b9b257e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/5e3d62/00000000000000003b9b257e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 600; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/c568cc/00000000000000003b9b257f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"), url("https://use.typekit.net/af/c568cc/00000000000000003b9b257f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"), url("https://use.typekit.net/af/c568cc/00000000000000003b9b257f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 600; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/dea00e/00000000000000003b9b2580/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/dea00e/00000000000000003b9b2580/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/dea00e/00000000000000003b9b2580/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: "noto-sans";
  src: url("https://use.typekit.net/af/a48253/00000000000000003b9b2581/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/a48253/00000000000000003b9b2581/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/a48253/00000000000000003b9b2581/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 700; }

html {
  font-family: "noto-sans", sans-serif;
  color: var(--color-body);
  letter-spacing: -0.15px;
  font-stretch: normal; }

html {
  scroll-behavior: smooth; }

input,
button {
  font-family: "noto-sans", sans-serif; }

iframe {
  border: 0; }

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 * 4. Needed when mobile navigation is active and sets position fixed on the body to prevent scroll beneath...
 */
html {
  font-size: 1em;
  /* [1] */
  line-height: 1.5;
  /* [1] */
  overflow-y: scroll;
  /* [2] */
  min-height: 100%;
  /* [3] */ }

body {
  width: 100%;
  /* [4] */
  overflow-x: hidden; }
  body::before {
    z-index: 10000; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
  display: inline;
  overflow-wrap: break-word;
  word-wrap: break-word; }

h1 {
  word-break: break-word; }

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

/**
   * If a `width` and/or `height` attribute has been explicitly defined, let’s
   * not make the image fluid.
   */
img[width],
img[height] {
  max-width: none; }

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

/**
   * If a `width` and/or `height` attribute has been explicitly defined, let’s
   * not make the image fluid.
   */
img[width],
img[height] {
  max-width: none; }

a {
  text-decoration: none;
  transition: all 0.2s ease-in-out; }
  a, a:visited {
    color: var(--color-link-blue); }
  a:hover, a:focus {
    color: var(--color-link-blue-focus); }

.o-list-reset,
.o-list-reset li {
  list-style: none; }

.o-list-reset,
.o-list-reset > li {
  margin-left: 0; }

.o-global-container {
  position: relative;
  background-color: var(--color-white);
  min-height: 100vh;
  z-index: 0; }
  .o-global-container:before, .o-global-container:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
    height: 100%;
    background-color: var(--color-body-bg);
    width: calc((100% - 1440px) / 2); }
  .o-global-container:before {
    left: 0; }
  .o-global-container:after {
    right: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1yp {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1tx {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1CE {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3Fg {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3rZ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_9jo {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.theme-guckenheimer {
  --color-blue-azure-rgba: 70, 191, 160;
  --color-blue-azure: #46A0BF;
  --color-blue-azure-darken-5: #3d92af;
  /*Variables in dependency tree of --color-blue-azure have to be redefined*/
  --color-blue-azure-alpha10: rgba(var(--color-blue-azure-rgba), 0.1);
  --color-body-bg: var(--color-blue-azure-alpha10);
  --color-blue-azure-alpha03: rgba(var(--color-blue-azure-rgba), 0.03);
  --color-blue: var(--color-blue-azure);
  --color-link-blue: var(--color-blue);
  --color-btn: var(--color-link-blue);
  --color-btn-secondary: var(--color-blue-azure);
  --color-link-secondary-focus: var(--color-blue);
  --color-link-nav-blue-focus: var(--color-blue-azure);
  --color-bg-panels: #5CA369;
  /*Make logo bigger*/
  --logo-width-fixed: 104px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1wP {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3Iy {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2Zw {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_iQB {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2lr {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_20f {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.small_1bl {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5; }

.large_2IS {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2; }

.flush_1gg {
  margin-bottom: 0; }

.dense_10_ {
  margin-bottom: 12px ; }

.center_38c {
  text-align: center; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3Gy {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2V- {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_t_M {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3G3 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3P_ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_u57 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.button_289 {
  font-size: 1rem;
  display: inline-block;
  display: inline-flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  text-align: center;
  min-height: calc(1em * 3);
  line-height: 1.5;
  margin: 0 0 24px  0;
  cursor: pointer;
  padding: 0 24px ;
  transition: all 0.2s ease-in-out;
  border: 1px solid;
  box-shadow: none;
  text-shadow: none;
  background: transparent; }
  .button_289 span[class*="icon"] {
    color: inherit;
    margin: 0 12px ;
    border-radius: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center; }

.primary_2W4 {
  background: transparent;
  border: 1px solid var(--color-blue-oxford); }
  .primary_2W4:hover {
    border-color: var(--color-blue-dark-darken-15);
    background: rgba(var(--color-blue-oxford-rgba), 0.03); }
  .primary_2W4, .primary_2W4:visited {
    color: var(--color-blue-oxford); }

.button_289.secondary_3oH {
  background: var(--color-btn-secondary);
  color: white;
  border-color: var(--color-btn-secondary); }
  .button_289.secondary_3oH:hover {
    background: var(--color-blue-dark);
    border-color: var(--color-blue-dark); }

.ghost_lEO {
  background: transparent; }
  .ghost_lEO:hover {
    background: rgba(var(--color-white-rgba), 0.2); }
  .ghost_lEO, .ghost_lEO:hover, .ghost_lEO:visited {
    color: var(--color-white); }

.small_1Fx {
  min-height: 24px ;
  font-size: 14px;
  height: 36px ;
  padding: 0 12px ; }

.large_8l2 {
  height: calc(1em * 3.75); }

.block_3CS {
  display: block;
  width: 100%; }

a.button_289:not(:only-of-type),
button.button_289:not(:only-of-type) {
  margin-right: 24px ; }

.light_3un {
  background: var(--color-blue-azure-03);
  border: none;
  margin: 0 0 36px  0; }
  .light_3un:not(:only-child) {
    margin-right: 0; }
  .light_3un:hover {
    background: var(--color-blue-azure-10); }
  .light_3un, .light_3un:hover, .light_3un:visited {
    color: var(--color-blue-oxford); }

.icon_3Sd {
  padding-right: 0; }

.flush_2TH {
  margin-bottom: 0; }

.center_3e2:only-of-type {
  display: block;
  margin-left: auto;
  margin-right: auto; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2lP {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1lh {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2Gw {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2A0 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2hF {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1Pz {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

/*
// KEEP for reference
// $font-size-h1: 3.5 * $base-font-size; //  42px; // 42 / 16 = 2,625 /// new 56 = 3.5
// $font-size-h2: 2.25 * $base-font-size; // 36px; 36 / 16 = 2,25   ///
// $font-size-h3: 1.7 * $base-font-size; // 31px; 31 / 16 = 1,9375 // new 1.7 = 27.2px
// $font-size-h4: 1.25 * $base-font-size; //  20px; // 20 / 16 = 1,25
// $font-size-h5: 18px;
// $font-size-h6: 16px;

// $headingSizes: (h1: 3.5,
//     h2: 2.25,
//     h3: 1.7,
//     h4: 1.25,
//     h5: 1.125,
//     h6: 1
// );
*/
.heading_c9n {
  display: block; }
  @media (min-width: 20em) {
    .headingh1_3-d {
      font-size: 36px;
      font-weight: 500;
      line-height: 1;
      margin-left: -1px;
      letter-spacing: -0.08px; }
    .headingh2_26L {
      font-size: 30px;
      font-weight: 500;
      line-height: 1.06;
      margin-left: -1px;
      letter-spacing: -0.85px; }
    .headingh3_2Qi {
      font-size: 22px;
      font-weight: 500;
      line-height: 0.91;
      margin-left: -1px;
      letter-spacing: -0.24px; }
    .headingh4_1sf {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.2;
      margin-left: 0px;
      letter-spacing: -0.21px; }
    .headingh5_3AT {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      margin-left: 0px; }
    .headingh6_2EO {
      font-size: 12px;
      font-weight: bold;
      line-height: 2;
      margin-left: 0px;
      letter-spacing: 0; } }
  @media (min-width: 61.25em) {
    .headingh1_3-d {
      font-size: 64px;
      font-weight: 500;
      line-height: 1.125;
      margin-left: -2px; }
    .headingh2_26L {
      font-size: 42px;
      font-weight: 500;
      line-height: 1.4;
      margin-left: -1px;
      letter-spacing: -0.45px; }
    .headingh3_2Qi {
      font-size: 22px;
      font-weight: 500;
      line-height: 0.91;
      margin-left: 0;
      letter-spacing: -0.24px; }
    .headingh4_1sf {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.2;
      margin-left: 0;
      letter-spacing: -0.21px; }
    .headingh5_3AT {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      margin-left: 0; }
    .headingh6_2EO {
      font-size: 12px;
      font-weight: bold;
      line-height: 2;
      margin-left: 0;
      letter-spacing: 0; } }

.center_2Ay {
  text-align: center; }

.dense_3oQ {
  margin-bottom: 12px ; }

.bold_kyh {
  font-weight: 600; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3mi {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1vT {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_16T {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_IgG {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_36t {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3bt {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.image_ZD5 {
  max-width: 100%;
  width: 100%;
  transition: all 0.2s ease-in-out; }

.lozad {
  filter: blur(5px);
  transform: scale(1); }

.scEnabledChrome .lozad,
.lozad.isLoaded {
  filter: none;
  transform: scale(1); }

.large_1-k {
  position: relative;
  width: 150%;
  max-width: calc(100% + 48px);
  margin-left: -24px; }
  @media (min-width: 46.25em) {
    .large_1-k {
      width: 740px;
      max-width: 740px;
      margin-left: calc((740px - 640px) / -2); } }
  @media (min-width: 61.25em) {
    .large_1-k {
      width: 150%;
      max-width: none;
      margin-left: -25%; } }
  @media (min-width: 90em) {
    .large_1-k {
      width: calc(1440px - 48px);
      margin-left: calc((1440px - 40.5rem - 48px) / -2); } }

img.scEnabledChrome[width] {
  max-width: 100%; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_29s {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2j1 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_XPh {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_Uia {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3TZ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_m_t {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_p3H {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Ru {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_iko {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1Z6 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3gL {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1Sb {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.media_38B {
  width: 100%;
  position: relative;
  overflow: hidden; }
  .media_38B img,
  .media_38B > video,
  .media_38B > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .media_38B + .media_38B {
    margin-top: 24px; }
  .media_38B.hover_1xL img {
    transition: all 0.4s ease-in-out; }
  .media_38B.hover_1xL:hover img {
    transition: all 0.4s ease-in-out;
    transform: scale(1.2); }

.contain_2Ra {
  background: #333; }
  .contain_2Ra img,
  .contain_2Ra > video,
  .contain_2Ra > iframe {
    object-fit: contain; }

.naturalSize_3W8 img,
.naturalSize_3W8 > video,
.naturalSize_3W8 > iframe {
  position: static;
  object-fit: none; }

.image_P0A.hover_1xL img,
.image_P0A .hover_1xL img {
  transition: all 0.4s ease-in-out; }

.image_P0A.hover_1xL:hover img,
.image_P0A .hover_1xL:hover img {
  transition: all 0.4s ease-in-out;
  transform: scale(1.2); }

.image_P0A .imageTitle_3YU {
  color: var(--color-body-grey);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-bottom: 0;
  padding-top: 6px; }

.image_P0A .large_1ut,
.image_P0A .large_1ut + .imageTitle_3YU {
  position: relative;
  width: 150%;
  max-width: calc(100% + 48px);
  margin-left: -24px; }
  @media (min-width: 46.25em) {
    .image_P0A .large_1ut,
    .image_P0A .large_1ut + .imageTitle_3YU {
      width: 740px;
      max-width: 740px;
      margin-left: calc((740px - 640px) / -2); } }
  @media (min-width: 61.25em) {
    .image_P0A .large_1ut,
    .image_P0A .large_1ut + .imageTitle_3YU {
      width: 150%;
      max-width: none;
      margin-left: -25%; } }
  @media (min-width: 90em) {
    .image_P0A .large_1ut,
    .image_P0A .large_1ut + .imageTitle_3YU {
      width: calc(1440px - 48px);
      margin-left: calc( ( 1440px - 40.5rem - 48px ) / -2); } }

.image_P0A .large_1ut + .imageTitle_3YU {
  padding-left: 24px; }
  @media (min-width: 46.25em) {
    .image_P0A .large_1ut + .imageTitle_3YU {
      padding-left: 0; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3Rg {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_NeH {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_qR5 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1xs {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2OB {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_DQ0 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.copyTypography_37K img + * {
  margin-top: 24px; }

.copyTypography_37K li {
  margin-bottom: .5em; }
  .copyTypography_37K li li:first-child {
    margin-top: .5em; }

.copyTypography_37K h1 {
  margin-bottom: .5em;
  margin-top: .8em;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  margin-left: -1px;
  letter-spacing: -0.08px; }

.copyTypography_37K h2 {
  margin-bottom: .5em;
  margin-top: .8em;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.06;
  margin-left: -1px;
  letter-spacing: -0.85px; }

.copyTypography_37K h3 {
  margin-bottom: .5em;
  margin-top: .8em;
  font-size: 22px;
  font-weight: 500;
  line-height: 0.91;
  margin-left: -1px;
  letter-spacing: -0.24px; }

.copyTypography_37K h4 {
  margin-bottom: .5em;
  margin-top: .8em;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  margin-left: 0px;
  letter-spacing: -0.21px; }

.copyTypography_37K h5 {
  margin-bottom: .5em;
  margin-top: .8em;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin-left: 0px; }

.copyTypography_37K h6 {
  margin-bottom: .5em;
  margin-top: .8em;
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  margin-left: 0px;
  letter-spacing: 0; }

.copyTypography_37K img.scEnabledChrome[width] {
  max-width: 100%; }

.copyTypography_37K img.scEnabledChrome[height] {
  height: auto; }

.left_11R {
  margin-left: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3kF {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2-S {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3Ai {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2dU {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2DN {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1xi {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.blockLink_2WO {
  display: block;
  width: auto; }
  .blockLink_2WO:hover img {
    transition: all 0.4s ease-in-out;
    transform: scale(1.2); }

.ctaButton_3M1 {
  font-size: 1rem;
  display: inline-block;
  display: inline-flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  text-align: center;
  min-height: calc(1em * 3);
  line-height: 1.5;
  margin: 0 0 24px  0;
  cursor: pointer;
  padding: 0 24px ;
  transition: all 0.2s ease-in-out;
  border: 1px solid;
  box-shadow: none;
  text-shadow: none;
  background: transparent;
  color: white; }
  .ctaButton_3M1 span[class*="icon"] {
    color: inherit;
    margin: 0 12px ;
    border-radius: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center; }

.secondaryText_1Ni, .secondaryText_1Ni:visited {
  color: var(--color-link-secondary);
  text-decoration: underline; }

.secondaryText_1Ni:hover {
  color: var(--color-link-secondary-focus); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1Ee {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2pJ {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_w8A {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2c5 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_15u {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3je {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.clean_1sH,
.clean_1sH li {
  list-style: none; }

.clean_1sH,
.clean_1sH > li {
  margin-left: 0; }

.inline_3Rb,
.inline_3Rb li {
  list-style: none; }

.inline_3Rb,
.inline_3Rb > li {
  margin-left: 0; }

.inline_3Rb > li {
  display: inline-block; }

.inline_3Rb li {
  padding-right: 12px; }
  .inline_3Rb li:last-child {
    padding-right: 0; }

.inline_3Rb li + li {
  padding-left: 12px; }

.hasIcon_1wj span {
  margin-right: 12px ;
  margin-bottom: 12px ;
  color: var(--color-link-blue);
  vertical-align: text-top; }

.hasIcon_1wj.secondary_2yV span {
  color: var(--color-link-secondary); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_AxZ {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_xJx {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2HB {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2rC {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_pHe {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_ckN {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.icon_1md {
  display: inline-block;
  text-align: center;
  width: 1em;
  height: 1em;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
  transition: none; }
  .icon_1md + .icon_1md {
    margin-left: 6px; }
  .icon_1md svg {
    transition: none;
    stroke-width: 0; }

.white_FGp {
  color: var(--color-white); }

.blue_2hI {
  color: var(--color-blue-azure); }

.shady path:first-child:not(:only-child) {
  fill-opacity: 0.2; }

.shade {
  fill-opacity: 0.2; }

.shade-fill-eo {
  fill-opacity: 0.2;
  fill-rule: evenodd; }

.fill-eo {
  fill-rule: evenodd; }

.small_Are {
  font-size: 12px; }

.large_3Py {
  font-size: 48px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1i5 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_18c {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_32T {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3pC {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1jA {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1-E {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.card_3YY {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 24px; }
  @media (max-width: 46.24em) {
    .card_3YY:not(.background_3Y2) {
      padding-bottom: 60px ; } }

.hasLink_3fu {
  transition: all 0.2s ease-in-out;
  color: var(--color-body);
  position: relative; }
  @media (min-width: 46.25em) {
    .hasLink_3fu {
      cursor: pointer; }
      .hasLink_3fu img {
        transition: all 0.4s ease-in-out; }
      .hasLink_3fu:hover img {
        transition: all 0.4s ease-in-out;
        transform: scale(1.2); } }

/**
  set top spacing in textcontainer when theres an image
  disable it when card is in horizontal mode
*/
@media (max-width: 46.24em) {
  .image_UTE + .cardTextCollection_19i {
    padding-top: 12px; } }

@media (min-width: 46.25em) {
  .card_3YY:not(.horizontal_-JQ) .image_UTE + .cardTextCollection_19i {
    padding-top: 12px; } }

.cardLabel_2V4 {
  margin-bottom: 0.5rem;
  position: relative; }

.cardHeader_38q {
  margin-bottom: 0.5rem; }

.cardTeaser_ml3 {
  margin-bottom: 24px; }

.cardLabelImageClass_2AC {
  width: 25px;
  position: absolute;
  right: 0;
  top: 5px;
  border-radius: 50%;
  border: 1px solid var(--color-blue-azure-alpha20); }

.cardCtaButton_2Q7 {
  margin-top: 24px;
  margin-bottom: 0; }
  @media (min-width: 46.25em) {
    .cardCtaButton_2Q7 {
      /* 
    "HACk" - (dirty trick :-))
    put <a> tag as a transparent layer on top of image and text 
    to make the whole card clickable 
    (its still just the a.button that is clicked
     */ }
      .cardCtaButton_2Q7 a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        opacity: 0; } }

/* 
MODIFICATIONS
*/
.background_3Y2 {
  background-color: rgba(0, 132, 255, 0.03); }
  .background_3Y2 .cardTextCollection_19i {
    padding: 24px 24px 0px ; }
    .background_3Y2 .cardTextCollection_19i:nth-child(2) {
      padding-top: 12px ; }
  .background_3Y2.horizontal_-JQ .cardTextCollection_19i {
    padding-left: 24px;
    padding-top: 24px ;
    max-width: none; }
  @media (min-width: 46.25em) {
    .background_3Y2.hasLink_3fu:hover {
      background-color: rgba(0, 132, 255, 0.1); } }
  .background_3Y2 .cardCtaButton_2Q7 {
    padding-left: 24px ; }

@media (min-width: 46.25em) {
  .horizontal_-JQ .cardTeaser_ml3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; } }

@media (min-width: 61.25em) {
  .horizontal_-JQ .cardTeaser_ml3 {
    -webkit-line-clamp: 4; } }

@media (min-width: 81.25em) {
  .horizontal_-JQ .cardTeaser_ml3 {
    -webkit-line-clamp: 5; } }

@media (min-width: 83.75em) {
  .horizontal_-JQ .cardTeaser_ml3 {
    -webkit-line-clamp: 6; } }

@media (min-width: 46.25em) {
  .horizontal_-JQ {
    flex-direction: row; }
    .horizontal_-JQ .image_UTE {
      flex: 0 0 33%;
      min-width: 320px; }
    .horizontal_-JQ .cardTextCollection_19i {
      padding-left: 24px;
      max-width: none;
      margin: 0;
      display: flex;
      justify-content: center;
      flex-direction: column; }
  .invert_1em {
    flex-direction: row-reverse; }
    .invert_1em .cardTextCollection_19i {
      padding-left: 0;
      padding-right: 24px; } }

.cta_1FR {
  display: block; }

.iconBullet_1eh {
  display: flex;
  flex-direction: row; }
  .iconBullet_1eh .cardTextCollection_19i {
    flex: 0 1 auto; }

.icon_sW6 {
  width: 36px ;
  flex: 1 0 36px ;
  margin-right: 24px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2zV {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2II {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2UL {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3Al {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1zI {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_lQW {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.imageCta_3J- {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 10px 0 rgba(26, 26, 26, 0.1);
  transition: all 0.4s ease-in-out; }
  .imageCta_3J-:hover {
    box-shadow: 0 4px 15px 0px rgba(26, 26, 26, 0.3); }
    .imageCta_3J-:hover img {
      transform: scale(1.1); }

.bgimage_2ba {
  position: relative;
  z-index: 10;
  transition: all 0.2s; }

.cta_2sQ {
  position: absolute;
  z-index: 20;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  padding-bottom: 24px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2dF {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_Pg6 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_6QC {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_yQ9 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_IM7 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2PP {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.logo_24T {
  transition: all 0.2s ease-in-out;
  position: relative;
  display: inline-block;
  min-width: var(--logo-width-fixed);
  width: 100%;
  max-width: 120px;
  height: 0; }

.st0_Kmk {
  fill: white; }

.st1_2JP {
  fill: var(--color-blue-oxford); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1vb {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2DK {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_24_ {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1Q0 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_7SF {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_kX8 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.label_DkF {
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  margin-left: 0px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-blue-azure); }
  .label_DkF span {
    display: inline-block;
    vertical-align: middle; }
  .label_DkF span + span {
    display: none;
    font-size: 1em;
    width: auto;
    height: auto; }
    a .label_DkF span + span {
      display: inline-block; }

.flush_8uV {
  margin-bottom: 0; }

.dense_2JC {
  margin-bottom: 12px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1ey {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Nf {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3sR {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3fF {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_13U {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2XK {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.wrapper_vDw {
  margin-bottom: 120px; }

.wrapperInner_2wk {
  position: relative;
  background: var(--color-wrapper-bg);
  margin-left: auto;
  margin-right: auto; }
  .wrapperInner_2wk:after {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    transform: translateY(100%);
    background-color: var(--color-wrapper-bg);
    height: 120px; }

.wrapper_vDw .wrapper_vDw,
.wrapper_vDw .wrapper_vDw > div,
.wrapper_vDw .wrapper_vDw .wrapperInner_2wk {
  padding-left: 0;
  padding-right: 0; }

.cntx_page_385 {
  max-width: 1440px;
  padding-left: 24px;
  padding-right: 24px; }
  @media (min-width: 81.25em) {
    .cntx_page_385 {
      padding-left: 48px;
      padding-right: 48px; } }

.cntx_hero_2Tc {
  max-width: 1440px;
  position: relative; }
  @media (max-width: 90em) {
    .cntx_hero_2Tc.wrapperInner_2wk {
      padding-left: 24px;
      padding-right: 24px; } }

.noInnerPadding_3oW {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.cntx_single_9fV {
  max-width: 40.5rem; }
  @media (max-width: 43.49em) {
    .cntx_single_9fV {
      padding-left: 24px;
      padding-right: 24px; } }

.cntx_fullscreen_woH {
  max-width: none; }

.cntx_inner_Z1- {
  max-width: calc(1112px + 48px);
  padding-left: 24px;
  padding-right: 24px; }

.flush_2hZ {
  margin-bottom: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2A4 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3YA {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2nC {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3xD {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2Dz {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2L7 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.single_2RT {
  max-width: 40.5rem;
  margin-left: auto ;
  margin-right: auto ; }

.left_O4x {
  margin-left: 0; }

.center_iO0 {
  text-align: center; }

@media (max-width: 61.24em) {
  .padded_3t2 {
    padding-left: 24px ;
    padding-right: 24px ; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1dG {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3Bz {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1w0 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3ao {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2XP {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_XRM {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.ratioPadding_Cr2 {
  display: block;
  width: 100%; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_VMO {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1T0 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3LI {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_Npu {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_30T {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_14A {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

/**
    LOCAL MIXINS FOR GRID
*/
/**
    CLASSES for <GRID> => .grid => the CONTAINER
*/
.grid_nHQ {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px; }
  .grid_nHQ:after {
    content: "" !important;
    display: block !important;
    clear: both !important; }
  .grid_nHQ > .cell_3Rr {
    padding-left: 12px;
    padding-right: 12px; }
  @media (min-width: 81.25em) {
    .grid_nHQ {
      margin-left: -18px;
      margin-right: -18px; }
      .grid_nHQ > .cell_3Rr {
        padding-left: 18px;
        padding-right: 18px; } }

/* Vertical layout Description
top	Pull items to top
middle	Pull items to middle
bottom	Pull items to bottom
stretch	Stretch items
baseline	Pull items to baseline

USAGE in COMP => <Grid alignItems="top">...

*/
.top_11O {
  align-items: flex-start; }

.middle_2y- {
  align-items: center; }

.bottom_1wL {
  align-items: flex-end; }

.stretch_3-v {
  align-items: stretch; }
  .stretch_3-v > .cell_3Rr > *:first-child {
    height: 100%; }

.baseline_jny {
  align-items: baseline; }

/**
Horizontal layout Description:

left	Layout items to left
center	Layout items To center
right	Layout items to right
between	Add spaces between items
around	Add spaces around items

EX => <Grid justifyContent="left">...

*/
.left_2Cd {
  justify-content: flex-start; }

.center_3Yz {
  justify-content: center !important; }

.right_7Xf {
  justify-content: flex-end; }

.between_2bv {
  justify-content: space-between; }

.around_J-7 {
  justify-content: space-around; }

.autoFill_LpI > .cell_3Rr {
  min-width: 0;
  flex-grow: 1;
  max-width: 100%;
  flex-basis: 0; }

.flush_1Xj {
  margin-left: 0;
  margin-right: 0; }
  .flush_1Xj > .cell_3Rr {
    padding: 0;
    margin-bottom: 0; }

.vspace_2IW > .cell_3Rr {
  margin-bottom: 24px; }

.gutterSmall_38m {
  margin-left: -6px;
  margin-right: -6px; }
  .gutterSmall_38m > .cell_3Rr {
    padding-left: 6px;
    padding-right: 6px; }

.gutterLarge_2up {
  margin-left: -24px;
  margin-right: -24px; }
  .gutterLarge_2up > .cell_3Rr {
    padding-left: 24px;
    padding-right: 24px; }

/**
    CLASSES FOR <CELL> => .cell => the column/cell
*/
.cell_3Rr {
  box-sizing: border-box;
  flex-grow: 0;
  width: 100%; }

.fill_3j7 {
  min-width: 0;
  flex-grow: 1;
  max-width: 100%;
  flex-basis: 0; }

.centered_B3W {
  margin-left: auto !important;
  margin-right: auto !important; }

 {
  /**
        use global scope for cell classes
    */ }
  @media (min-width: 20em) {
    .span_1of12\@mobile {
      max-width: 8.33333%;
      flex-basis: 8.33333%; }
    .offset_1of12\@mobile {
      margin-left: 8.33333%; }
    .span_2of12\@mobile {
      max-width: 16.66667%;
      flex-basis: 16.66667%; }
    .offset_2of12\@mobile {
      margin-left: 16.66667%; }
    .span_3of12\@mobile {
      max-width: 25%;
      flex-basis: 25%; }
    .offset_3of12\@mobile {
      margin-left: 25%; }
    .span_4of12\@mobile {
      max-width: 33.33333%;
      flex-basis: 33.33333%; }
    .offset_4of12\@mobile {
      margin-left: 33.33333%; }
    .span_5of12\@mobile {
      max-width: 41.66667%;
      flex-basis: 41.66667%; }
    .offset_5of12\@mobile {
      margin-left: 41.66667%; }
    .span_6of12\@mobile {
      max-width: 50%;
      flex-basis: 50%; }
    .offset_6of12\@mobile {
      margin-left: 50%; }
    .span_7of12\@mobile {
      max-width: 58.33333%;
      flex-basis: 58.33333%; }
    .offset_7of12\@mobile {
      margin-left: 58.33333%; }
    .span_8of12\@mobile {
      max-width: 66.66667%;
      flex-basis: 66.66667%; }
    .offset_8of12\@mobile {
      margin-left: 66.66667%; }
    .span_9of12\@mobile {
      max-width: 75%;
      flex-basis: 75%; }
    .offset_9of12\@mobile {
      margin-left: 75%; }
    .span_10of12\@mobile {
      max-width: 83.33333%;
      flex-basis: 83.33333%; }
    .offset_10of12\@mobile {
      margin-left: 83.33333%; }
    .span_11of12\@mobile {
      max-width: 91.66667%;
      flex-basis: 91.66667%; }
    .offset_11of12\@mobile {
      margin-left: 91.66667%; }
    .span_12of12\@mobile {
      max-width: 100%;
      flex-basis: 100%; }
    .offset_12of12\@mobile {
      margin-left: 100%; } }
  @media (min-width: 43.5em) {
    .span_1of12\@paddedContent {
      max-width: 8.33333%;
      flex-basis: 8.33333%; }
    .offset_1of12\@paddedContent {
      margin-left: 8.33333%; }
    .span_2of12\@paddedContent {
      max-width: 16.66667%;
      flex-basis: 16.66667%; }
    .offset_2of12\@paddedContent {
      margin-left: 16.66667%; }
    .span_3of12\@paddedContent {
      max-width: 25%;
      flex-basis: 25%; }
    .offset_3of12\@paddedContent {
      margin-left: 25%; }
    .span_4of12\@paddedContent {
      max-width: 33.33333%;
      flex-basis: 33.33333%; }
    .offset_4of12\@paddedContent {
      margin-left: 33.33333%; }
    .span_5of12\@paddedContent {
      max-width: 41.66667%;
      flex-basis: 41.66667%; }
    .offset_5of12\@paddedContent {
      margin-left: 41.66667%; }
    .span_6of12\@paddedContent {
      max-width: 50%;
      flex-basis: 50%; }
    .offset_6of12\@paddedContent {
      margin-left: 50%; }
    .span_7of12\@paddedContent {
      max-width: 58.33333%;
      flex-basis: 58.33333%; }
    .offset_7of12\@paddedContent {
      margin-left: 58.33333%; }
    .span_8of12\@paddedContent {
      max-width: 66.66667%;
      flex-basis: 66.66667%; }
    .offset_8of12\@paddedContent {
      margin-left: 66.66667%; }
    .span_9of12\@paddedContent {
      max-width: 75%;
      flex-basis: 75%; }
    .offset_9of12\@paddedContent {
      margin-left: 75%; }
    .span_10of12\@paddedContent {
      max-width: 83.33333%;
      flex-basis: 83.33333%; }
    .offset_10of12\@paddedContent {
      margin-left: 83.33333%; }
    .span_11of12\@paddedContent {
      max-width: 91.66667%;
      flex-basis: 91.66667%; }
    .offset_11of12\@paddedContent {
      margin-left: 91.66667%; }
    .span_12of12\@paddedContent {
      max-width: 100%;
      flex-basis: 100%; }
    .offset_12of12\@paddedContent {
      margin-left: 100%; } }
  @media (min-width: 46.25em) {
    .span_1of12\@tablet {
      max-width: 8.33333%;
      flex-basis: 8.33333%; }
    .offset_1of12\@tablet {
      margin-left: 8.33333%; }
    .span_2of12\@tablet {
      max-width: 16.66667%;
      flex-basis: 16.66667%; }
    .offset_2of12\@tablet {
      margin-left: 16.66667%; }
    .span_3of12\@tablet {
      max-width: 25%;
      flex-basis: 25%; }
    .offset_3of12\@tablet {
      margin-left: 25%; }
    .span_4of12\@tablet {
      max-width: 33.33333%;
      flex-basis: 33.33333%; }
    .offset_4of12\@tablet {
      margin-left: 33.33333%; }
    .span_5of12\@tablet {
      max-width: 41.66667%;
      flex-basis: 41.66667%; }
    .offset_5of12\@tablet {
      margin-left: 41.66667%; }
    .span_6of12\@tablet {
      max-width: 50%;
      flex-basis: 50%; }
    .offset_6of12\@tablet {
      margin-left: 50%; }
    .span_7of12\@tablet {
      max-width: 58.33333%;
      flex-basis: 58.33333%; }
    .offset_7of12\@tablet {
      margin-left: 58.33333%; }
    .span_8of12\@tablet {
      max-width: 66.66667%;
      flex-basis: 66.66667%; }
    .offset_8of12\@tablet {
      margin-left: 66.66667%; }
    .span_9of12\@tablet {
      max-width: 75%;
      flex-basis: 75%; }
    .offset_9of12\@tablet {
      margin-left: 75%; }
    .span_10of12\@tablet {
      max-width: 83.33333%;
      flex-basis: 83.33333%; }
    .offset_10of12\@tablet {
      margin-left: 83.33333%; }
    .span_11of12\@tablet {
      max-width: 91.66667%;
      flex-basis: 91.66667%; }
    .offset_11of12\@tablet {
      margin-left: 91.66667%; }
    .span_12of12\@tablet {
      max-width: 100%;
      flex-basis: 100%; }
    .offset_12of12\@tablet {
      margin-left: 100%; } }
  @media (min-width: 61.25em) {
    .span_1of12\@desktop {
      max-width: 8.33333%;
      flex-basis: 8.33333%; }
    .offset_1of12\@desktop {
      margin-left: 8.33333%; }
    .span_2of12\@desktop {
      max-width: 16.66667%;
      flex-basis: 16.66667%; }
    .offset_2of12\@desktop {
      margin-left: 16.66667%; }
    .span_3of12\@desktop {
      max-width: 25%;
      flex-basis: 25%; }
    .offset_3of12\@desktop {
      margin-left: 25%; }
    .span_4of12\@desktop {
      max-width: 33.33333%;
      flex-basis: 33.33333%; }
    .offset_4of12\@desktop {
      margin-left: 33.33333%; }
    .span_5of12\@desktop {
      max-width: 41.66667%;
      flex-basis: 41.66667%; }
    .offset_5of12\@desktop {
      margin-left: 41.66667%; }
    .span_6of12\@desktop {
      max-width: 50%;
      flex-basis: 50%; }
    .offset_6of12\@desktop {
      margin-left: 50%; }
    .span_7of12\@desktop {
      max-width: 58.33333%;
      flex-basis: 58.33333%; }
    .offset_7of12\@desktop {
      margin-left: 58.33333%; }
    .span_8of12\@desktop {
      max-width: 66.66667%;
      flex-basis: 66.66667%; }
    .offset_8of12\@desktop {
      margin-left: 66.66667%; }
    .span_9of12\@desktop {
      max-width: 75%;
      flex-basis: 75%; }
    .offset_9of12\@desktop {
      margin-left: 75%; }
    .span_10of12\@desktop {
      max-width: 83.33333%;
      flex-basis: 83.33333%; }
    .offset_10of12\@desktop {
      margin-left: 83.33333%; }
    .span_11of12\@desktop {
      max-width: 91.66667%;
      flex-basis: 91.66667%; }
    .offset_11of12\@desktop {
      margin-left: 91.66667%; }
    .span_12of12\@desktop {
      max-width: 100%;
      flex-basis: 100%; }
    .offset_12of12\@desktop {
      margin-left: 100%; } }
  @media (min-width: 81.25em) {
    .span_1of12\@wide {
      max-width: 8.33333%;
      flex-basis: 8.33333%; }
    .offset_1of12\@wide {
      margin-left: 8.33333%; }
    .span_2of12\@wide {
      max-width: 16.66667%;
      flex-basis: 16.66667%; }
    .offset_2of12\@wide {
      margin-left: 16.66667%; }
    .span_3of12\@wide {
      max-width: 25%;
      flex-basis: 25%; }
    .offset_3of12\@wide {
      margin-left: 25%; }
    .span_4of12\@wide {
      max-width: 33.33333%;
      flex-basis: 33.33333%; }
    .offset_4of12\@wide {
      margin-left: 33.33333%; }
    .span_5of12\@wide {
      max-width: 41.66667%;
      flex-basis: 41.66667%; }
    .offset_5of12\@wide {
      margin-left: 41.66667%; }
    .span_6of12\@wide {
      max-width: 50%;
      flex-basis: 50%; }
    .offset_6of12\@wide {
      margin-left: 50%; }
    .span_7of12\@wide {
      max-width: 58.33333%;
      flex-basis: 58.33333%; }
    .offset_7of12\@wide {
      margin-left: 58.33333%; }
    .span_8of12\@wide {
      max-width: 66.66667%;
      flex-basis: 66.66667%; }
    .offset_8of12\@wide {
      margin-left: 66.66667%; }
    .span_9of12\@wide {
      max-width: 75%;
      flex-basis: 75%; }
    .offset_9of12\@wide {
      margin-left: 75%; }
    .span_10of12\@wide {
      max-width: 83.33333%;
      flex-basis: 83.33333%; }
    .offset_10of12\@wide {
      margin-left: 83.33333%; }
    .span_11of12\@wide {
      max-width: 91.66667%;
      flex-basis: 91.66667%; }
    .offset_11of12\@wide {
      margin-left: 91.66667%; }
    .span_12of12\@wide {
      max-width: 100%;
      flex-basis: 100%; }
    .offset_12of12\@wide {
      margin-left: 100%; } }

/**

GALLERY MODE

SPECIAL FOR EG IMAGE GALLERIES

*/
.gallery_13k {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  margin-left: -12px;
  margin-right: -12px; }
  .gallery_13k > * {
    flex: 1 1 auto;
    width: 100%;
    margin: 0 12px 24px; }
    @media (min-width: 46.25em) {
      .gallery_13k > * {
        width: calc(50% - 24px); } }
    @media (min-width: 61.25em) {
      .gallery_13k > * {
        width: calc(33.33% - 24px);
        max-width: calc(50% - 24px); } }
    @media (min-width: 81.25em) {
      .gallery_13k > * {
        width: calc(25% - 24px); } }
    .gallery_13k > * + * {
      margin-top: 0 !important; }

.galleryFlush_cbj {
  margin-left: 0;
  margin-right: 0; }
  .galleryFlush_cbj > * {
    margin: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_28i {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2aa {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_kgf {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_Fa3 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3Wo {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2cL {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.spacingTop_small_3ty {
  margin-top: 24px; }

.spacingTop_medium_gaF {
  margin-top: 36px; }

.spacingTop_large_3XG {
  margin-top: 48px; }

.spacingTop_huge_2un {
  margin-top: 96px; }

.spacingBottom_small_1oz {
  margin-bottom: 24px; }

.spacingBottom_medium_15e {
  margin-bottom: 36px; }

.spacingBottom_large_2So {
  margin-bottom: 48px; }

.spacingBottom_huge_1zd {
  margin-bottom: 96px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_19P {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_HB7 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1Cm {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_15f {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1Jt {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3jT {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.swoosh_EXm {
  display: block; }

.top_Vb6 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  z-index: 10;
  height: 112px;
  transform: translate(-50%, -100%);
  transition: all 0.4s ease-in-out;
  fill: var(--color-blue-azure); }

.bottom_3eP {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 112px;
  width: 1440px;
  z-index: 1;
  pointer-events: none;
  fill: var(--color-blue-azure); }

.line_38W {
  width: 1440px;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -72px ;
  fill: var(--color-blue-azure); }
  @media (min-width: 46.25em) {
    .line_38W {
      margin-top: -36px ; } }
  @media (min-width: 61.25em) {
    .line_38W {
      margin-top: 0; } }

.big_1xi {
  position: relative;
  top: 0;
  left: 50%;
  width: 1440px;
  transform: translateX(-50%);
  fill: var(--color-blue-azure); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_oGH {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_fVo {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2Rp {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_Ozh {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1pZ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3kz {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.sectionIntro_1hf {
  margin-bottom: 36px ; }

.sectionLabel_sWU {
  margin-bottom: 6px ; }

.sectionIntro_1hf .sectionHeader_1Lr {
  margin-bottom: 12px ;
  font-size: 42px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2rl {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3-6 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_dI7 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3fZ {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3JU {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_23e {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.modalContainer_85R {
  position: fixed;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; }

.backdropTrigger_3S7 {
  position: absolute;
  z-index: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  background-color: rgba(var(--color-black-almost-rgba), 0.5);
  transform: scale(2); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3nA {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2hD {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_hm2 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_Wcp {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_URv {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1bv {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.fixedMediaContainer_HYX {
  padding-top: 96px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; }
  @media (min-width: 61.25em) {
    .fixedMediaContainer_HYX {
      flex-direction: row; }
      .fixedMediaContainer_HYX.isMediaFixedLeft_2pz {
        flex-direction: row-reverse; } }

@media (max-width: 61.24em) {
  .media_269 {
    position: relative;
    order: 1;
    width: 100%; }
  .fixedText_2Uk {
    order: 2;
    padding: 0px 24px ; } }

@media (min-width: 61.25em) {
  .fixedText_2Uk {
    flex: 0 0 50%; }
    .hero_3l6 .fixedText_2Uk {
      max-width: calc(50% - 18px);
      padding-left: 72px ; } }
    @media (min-width: 61.25em) and (min-width: 81.25em) {
      .hero_3l6 .fixedText_2Uk {
        padding-left: 11.38%; } }

@media (min-width: 61.25em) {
    .normal_2fv .fixedText_2Uk {
      padding-left: 24px ; }
      .normal_2fv .fixedText_2Uk > * {
        width: 432px ;
        margin-left: auto ;
        margin-right: auto ; }
  .media_269 {
    flex: 0 0 50%;
    position: relative;
    max-width: calc(50% - 18px);
    margin: 0; }
    .normal_2fv .media_269 {
      height: 408px ; }
    .hero_3l6 .media_269 {
      height: 576px ; }
    .media_269 > div {
      position: absolute;
      top: 0;
      bottom: 0;
      transform: none;
      width: 100%; }
  .isMediaFixedLeft_2pz.hero_3l6 .fixedText_2Uk {
    padding-left: 36px ;
    padding-right: 24px ; } }
  @media (min-width: 61.25em) and (min-width: 81.25em) {
    .isMediaFixedLeft_2pz.hero_3l6 .fixedText_2Uk {
      padding-right: 11.38%; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_21v {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3TK {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3Rg {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_6Jv {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3Ud {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2TJ {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.gradient_25b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--color-blue-oxford-rgba), 1) 0%, rgba(var(--color-blue-oxford-rgba), 0) 100%);
  opacity: 0;
  animation: fade-in_21v 1s forwards;
  animation-delay: 1s; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_zJQ {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2nN {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_Sy_ {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3LI {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1iz {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1TZ {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

 {
  /*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
  /* draggable */
  /* ---- flickity-button ---- */
  /* ---- previous/next buttons ---- */
  /* right to left */
  /* ---- page dots ---- */
  /* flickity-fade */ }
  .flickity-enabled {
    position: relative; }
  .flickity-enabled:focus {
    outline: none; }
  .flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%; }
  .flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%; }
  .flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab; }
  .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing; }
  .flickity-button {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    border: none;
    color: #333; }
  .flickity-button:hover {
    background: white;
    cursor: pointer; }
  .flickity-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19F; }
  .flickity-button:active {
    opacity: 0.6; }
  .flickity-button:disabled {
    opacity: 0.3;
    cursor: auto;
    /* prevent disabled button from capturing pointer up event. #716 */
    pointer-events: none; }
  .flickity-button-icon {
    fill: currentColor; }
  .flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* vertically center */
    transform: translateY(-50%); }
  .flickity-prev-next-button.previous {
    left: 10px; }
  .flickity-prev-next-button.next {
    right: 10px; }
  .flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px; }
  .flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px; }
  .flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%; }
  .flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1; }
  .flickity-rtl .flickity-page-dots {
    direction: rtl; }
  .flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: 0.25;
    cursor: pointer; }
  .flickity-page-dots .dot.is-selected {
    opacity: 1; }
  .flickity-enabled.is-fade .flickity-slider > * {
    pointer-events: none;
    z-index: 0; }
  .flickity-enabled.is-fade .flickity-slider > .is-selected {
    pointer-events: auto;
    z-index: 1; }

.slider_11w {
  background-color: inherit; }

.sliderItem_3Ce {
  color: black; }

.item_3nf {
  padding: 24px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_sPC {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_31e {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1YI {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_185 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3rJ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2a2 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.textCollection_10Y {
  display: block;
  width: 100%;
  max-width: 40.5rem;
  margin-left: auto ;
  margin-right: auto ;
  margin-bottom: 0; }
  .textCollection_10Y > *:last-child {
    margin-bottom: 0 ; }

.center_1WJ {
  text-align: center; }

.label_UrU, .labelIcon_gig {
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  margin-left: 0px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-blue-azure); }
  .label_UrU span, .labelIcon_gig span {
    display: inline-block;
    vertical-align: middle; }
  .label_UrU .scWebEditInput, .labelIcon_gig .scWebEditInput {
    display: inline-block; }
  .label_UrU span + span, .labelIcon_gig span + span {
    display: none;
    font-size: 1em;
    width: auto;
    height: auto; }
    a .label_UrU span + span, a .labelIcon_gig span + span {
      display: inline-block; }

.header_2Ts {
  margin-bottom: 0.5em; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_23e {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_Mg6 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1_E {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1ub {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2Tx {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_evY {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

/* Style the accordion section */
.accordionSection_Puy {
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px 0 rgba(26, 26, 26, 0.1); }
  .accordionSection_Puy + .accordionSection_Puy {
    border-top: 1px solid rgba(var(--color-grey-davys-rgba), 0.5); }
  .accordionSection_Puy:last-child {
    margin-bottom: 24px; }

/* Style the buttons that are used to open and close the accordion panel */
.accordion_2jz {
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  padding: 24px ;
  line-height: 1.5;
  justify-content: space-between;
  text-align: left;
  background: var(--color-white); }

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordionTitle_3N7 {
  flex: 1 1 auto;
  font-weight: bold;
  padding-right: 12px ; }

.date_3VT {
  flex: 0 0 168px;
  color: var(--color-grey-davys); }

.icons_1m- {
  margin-left: 0;
  flex: 0 0 36px ;
  text-align: right;
  color: var(--color-blue-oxford); }

/* Style the accordion chevron icon */
.accordionIcon_SLG {
  transition: transform 0.6s ease; }

/* Style to rotate icon when state is active */
.rotate_1cX {
  transform: rotate(-180deg); }

/* Style the accordion content panel. Note: hidden by default */
.accordionContent_C1J {
  background-color: white;
  overflow: hidden;
  transition: max-height 0.6s ease; }

/* Style the accordion content text */
.accordionText_17p {
  padding: 0px 24px 24px ; }

.scEnabledChrome .accordionContent_C1J {
  max-height: none !important; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_17u {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_FNr {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_39O {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_j2L {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_Jmo {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1is {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.implicit-form {
  width: 100%;
  max-width: 648px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px ;
  padding-right: 24px ;
  /* 
    BASE CONTROL
        .MuiFormControl-root 
        */ }
  .implicit-form,
  .implicit-form label,
  .implicit-form div,
  .implicit-form p,
  .implicit-form li,
  .implicit-form span,
  .implicit-form legend,
  .implicit-form input {
    font-family: "noto-sans", sans-serif; }
  .implicit-form .text {
    margin-bottom: 24px ; }
  .implicit-form .MuiFormLabel-root {
    color: var(--color-grey-davys); }
  .implicit-form fieldset {
    margin-bottom: 24px ; }
    @media (min-width: 61.25em) {
      .implicit-form fieldset {
        margin-bottom: 48px ; } }
    .implicit-form fieldset > legend {
      font-weight: bold;
      margin-bottom: 12px ; }
      .implicit-form fieldset > legend.Mui-focused {
        color: var(--color-body); }
  .implicit-form .MuiInputBase-root {
    color: var(--color-grey-davys);
    border-radius: 0; }
  .implicit-form .MuiFilledInput-underline:after,
  .implicit-form .MuiInput-underline:after {
    border-bottom-color: var(--color-blue-azure); }
  .implicit-form .MuiFilledInput-input {
    padding: 29px 12px  12px ; }
  .implicit-form .MuiTextField-root {
    margin-bottom: 24px ; }
    @media (min-width: 61.25em) {
      .implicit-form .MuiTextField-root {
        margin-bottom: 48px ; } }
  @media (min-width: 61.25em) {
    .implicit-form.dense .MuiTextField-root {
      margin-bottom: 36px ; }
    .implicit-form.dense .MuiFormHelperText-root {
      margin-bottom: -12px ; } }
  .implicit-form .MuiFilledInput-root, .implicit-form .MuiFilledInput-root.Mui-disabled {
    background: #f7f7f9; }
  .implicit-form .MuiFormLabel-root.Mui-focused {
    color: var(--color-blue-azure); }
  .implicit-form .MuiFormLabel-root.Mui-error {
    color: var(--color-red); }
  .implicit-form .MuiFilledInput-underline.Mui-error:after {
    border-bottom-color: var(--color-red); }
  .implicit-form .MuiFormHelperText-root.Mui-error {
    color: var(--color-red); }
  .implicit-form .MuiIconButton-colorPrimary {
    color: var(--color-blue-iss); }
  .implicit-form .MuiCheckbox-colorPrimary:hover {
    background-color: rgba(var(--color-blue-iss-rgba), 0.08); }
  .implicit-form .MuiCheckbox-colorPrimary.Mui-checked:not(.Mui-disabled) {
    color: var(--color-blue-iss); }
    .implicit-form .MuiCheckbox-colorPrimary.Mui-checked:not(.Mui-disabled):hover {
      background-color: rgba(var(--color-blue-iss-rgba), 0.08); }
  .implicit-form .MuiCheckbox-colorSecondary:hover {
    background-color: rgba(var(--color-blue-azure-rgba), 0.08); }
  .implicit-form .MuiCheckbox-colorSecondary.Mui-checked {
    color: var(--color-blue-azure); }
    .implicit-form .MuiCheckbox-colorSecondary.Mui-checked:hover {
      background-color: rgba(var(--color-blue-azure-rgba), 0.08); }
  .implicit-form .MuiRadio-colorPrimary.Mui-checked:not(.Mui-disabled) {
    color: var(--color-blue-iss); }
  .implicit-form .MuiButton-root {
    font-size: 1rem;
    display: inline-block;
    display: inline-flex;
    justify-content: space-between;
    vertical-align: middle;
    align-items: center;
    text-align: center;
    min-height: calc(1em * 3);
    line-height: 1.5;
    margin: 0 0 24px  0;
    cursor: pointer;
    padding: 0 24px ;
    transition: all 0.2s ease-in-out;
    border: 1px solid;
    box-shadow: none;
    text-shadow: none;
    background: transparent;
    background: var(--color-btn-secondary);
    min-height: calc(1em * 2.5);
    text-transform: none; }
    .implicit-form .MuiButton-root span[class*="icon"] {
      color: inherit;
      margin: 0 12px ;
      border-radius: 1em;
      display: inline-flex;
      align-items: center;
      justify-content: center; }
    .implicit-form .MuiButton-root, .implicit-form .MuiButton-root:hover, .implicit-form .MuiButton-root:focus, .implicit-form .MuiButton-root:visited {
      color: white; }
    .implicit-form .MuiButton-root:hover {
      background-color: var(--color-btn-secondary);
      filter: brightness(105%); }
  .implicit-form .customDatePicker {
    position: relative; }
    .implicit-form .customDatePicker .MuiFormLabel-root {
      z-index: 1;
      padding-left: 16px; }
      .implicit-form .customDatePicker .MuiFormLabel-root.MuiInputLabel-shrink {
        padding-top: 10px; }
    .implicit-form .customDatePicker .MuiInputBase-root {
      margin-top: 0;
      background-color: #f7f7f9;
      z-index: 0;
      padding: 0; }
    .implicit-form .customDatePicker .MuiInput-underline:after {
      border-bottom: 2px solid var(--color-blue-azure); }
    .implicit-form .customDatePicker .MuiInput-input {
      padding-left: 12px;
      padding-top: 22px;
      padding-bottom: 19px; }
    .implicit-form .customDatePicker .MuiInputAdornment-root {
      color: currentColor; }
    .implicit-form .customDatePicker .MuiInputAdornment-positionStart {
      padding-left: 12px ;
      padding-top: 0px; }
    .implicit-form .customDatePicker .MuiFormLabel-root ~ div .MuiInput-input {
      padding-top: 31px;
      padding-bottom: 10px; }
    .implicit-form .customDatePicker .MuiFormLabel-root ~ div .MuiInputAdornment-root {
      padding-top: 18px; }
  .implicit-form .customDropDown {
    margin-bottom: 24px ; }
    @media (min-width: 61.25em) {
      .implicit-form .customDropDown {
        margin-bottom: 48px ; } }
    .implicit-form .customDropDown,
    .implicit-form .customDropDown * {
      cursor: pointer; }
    .implicit-form .customDropDown .MuiTextField-root {
      margin: 0; }
    .implicit-form .customDropDown .MuiInputBase-input {
      padding: 12px  !important; }
      .implicit-form .customDropDown .MuiInputBase-input, .implicit-form .customDropDown .MuiInputBase-input.Mui-disabled {
        background: #f7f7f9; }
      .implicit-form .customDropDown .MuiInputBase-input p {
        position: static !important;
        padding-top: 12px; }
    .implicit-form .customDropDown .MuiPaper-root {
      z-index: 1000 !important;
      margin-top: -1px !important; }
    .implicit-form .customDropDown .MuiMenuItem-root {
      background: white; }
    .implicit-form .customDropDown .Mui-selected {
      background: #f7f7f9; }
    .implicit-form .customDropDown .MuiFormLabel-root {
      z-index: 1;
      transform: translate(12px, 10px) scale(0.75);
      pointer-events: none; }
    .implicit-form .customDropDown label + .MuiInput-formControl {
      margin-top: 0; }
  .implicit-form .MuiFormControl-marginNormal {
    margin-top: 0; }

.MuiPickersModal-dialogRoot .MuiPickersToolbar-toolbar {
  background-color: var(--color-blue-azure); }

.MuiPickersModal-dialogRoot .MuiButton-textPrimary {
  color: var(--color-blue-iss); }

.MuiPickersModal-dialogRoot .MuiPickersDay-daySelected {
  background-color: var(--color-blue-azure); }
  .MuiPickersModal-dialogRoot .MuiPickersDay-daySelected:hover {
    background-color: var(--color-blue-azure-darken-5); }

.MuiPickersModal-dialogRoot .MuiPickersYear-yearSelected {
  color: var(--color-blue-iss); }

body .customSelectItem {
  font-family: "noto-sans", sans-serif;
  display: flex;
  padding: 6px 16px;
  justify-content: left; }

.fullWidth_2Sp {
  max-width: none;
  padding-left: 0;
  padding-right: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1Hf {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1nJ {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_22X {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2V2 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_18i {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_kRI {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.fade-appear {
  opacity: 0; }

.fade-appear-active {
  opacity: 1;
  transition: opacity 200ms linear; }

.fade-appear-done {
  opacity: 1; }

.fade-enter {
  opacity: 0; }

.fade-enter-active {
  opacity: 1;
  transition: all 400ms; }

.fade-enter-done {
  opacity: 1;
  transition: all 400ms; }

.fade-exit {
  opacity: 1; }

.fade-exit-active {
  opacity: 0;
  transition: all 200ms; }

.fade-exit-done {
  opacity: 0; }

.fadeMoveUp-enter {
  opacity: 0.2;
  transform: translateY(12px); }

.fadeMoveUp-enter-active {
  opacity: 1;
  transition: all 200ms;
  transform: translateY(0px); }

.fadeMoveUp-enter-done {
  opacity: 1;
  transform: translateY(0px); }

.fadeMoveUp-exit {
  opacity: 1; }

.fadeMoveUp-exit-active {
  opacity: 0;
  transform: translateY(12px);
  transition: all 200ms; }

.fadeMoveUp-exit-done {
  opacity: 0;
  transform: translateY(12px); }

.fadeMoveGrow-enter {
  opacity: 0.2;
  transform: scale(0.7); }

.fadeMoveGrow-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 200ms; }

.fadeMoveGrow-enter-done {
  opacity: 1;
  transform: scale(1); }

.fadeMoveGrow-exit {
  opacity: 1;
  transform: scale(1); }

.fadeMoveGrow-exit-active {
  opacity: 0;
  transform: scale(0.7);
  transition: all 200ms; }

.fadeMoveGrow-exit-done {
  opacity: 0;
  transform: scale(0.7); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2D_ {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3mn {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2m3 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_DxA {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3za {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_r_b {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.tableTheme_1qx .MuiTable-root,
.tableTheme_1qx .MuiTableCell-root,
.tableTheme_1qx .MuiPaginationItem-root {
  font-family: "noto-sans", sans-serif; }

.tableTheme_1qx .MuiTableRow-root {
  border-bottom: 1px solid var(--color-grey-davys); }

.tableTheme_1qx .MuiTableCell-root {
  text-align: left;
  padding-left: 12px ;
  padding-right: 12px ; }
  .tableTheme_1qx .MuiTableCell-root:last-child {
    text-align: right; }

.tableTheme_1qx .MuiTableCell-head {
  font-size: 0.75rem;
  color: var(--color-body-grey);
  padding-top: 12px ;
  padding-bottom: 12px ; }

.tableTheme_1qx .MuiTableCell-body {
  font-size: 1rem;
  color: var(--color-blue-dark);
  padding-top: 24px ;
  padding-bottom: 24px ; }
  .tableTheme_1qx .MuiTableCell-body:first-child {
    font-weight: bold; }

.tableTheme_1qx .MuiTableSortLabel-root {
  position: relative; }
  .tableTheme_1qx .MuiTableSortLabel-root [class*="icon"] {
    font-size: 12px;
    position: absolute;
    right: -1em; }

.tableTheme_1qx .MuiPaginationItem-root {
  text-decoration: underline;
  color: var(--color-blue-dark);
  font-size: 16px;
  background: none; }
  .tableTheme_1qx .MuiPaginationItem-root.Mui-selected {
    background: none;
    color: var(--color-body);
    background: none;
    text-decoration: none;
    font-weight: bold; }
  .tableTheme_1qx .MuiPaginationItem-root:hover, .tableTheme_1qx .MuiPaginationItem-root.Mui-selected:hover {
    background: none;
    text-decoration: none; }

.tableTheme_1qx .MuiPaginationItem-icon {
  border: 1px solid;
  border-radius: 50%; }

.tableTheme_1qx .MuiPagination-ul {
  justify-content: center; }

@media (max-width: 25.9375em) {
  .mobileVertical_2m6 .MuiTableRow-head {
    display: flex;
    justify-content: space-between;
    background-color: var(--color-grey-mercury); }
  .mobileVertical_2m6 .MuiTableCell-head {
    flex: 1; }
  .mobileVertical_2m6 .MuiTableBody-root {
    display: flex;
    flex-direction: column; }
    .mobileVertical_2m6 .MuiTableBody-root > tr:nth-of-type(2n) {
      background: #f6f6f6; }
  .mobileVertical_2m6 .MuiTableRow-root {
    padding: 12px  0;
    width: 100%; }
    .mobileVertical_2m6 .MuiTableRow-root:after {
      content: "" !important;
      display: block !important;
      clear: both !important; }
  .mobileVertical_2m6 .MuiTableCell-body {
    padding: 0; }
    .mobileVertical_2m6 .MuiTableCell-body:first-child {
      float: left; }
    .mobileVertical_2m6 .MuiTableCell-body:last-child {
      float: right; }
  .mobileVertical_2m6 .MuiTableCell-root {
    border-bottom: none; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3tX {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3Cp {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_19f {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_U8q {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_mbn {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2u0 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.resultContainer_o42 {
  position: relative;
  z-index: 1; }

.progress_KXa {
  opacity: 0;
  animation: fade-in_3tX 0.4s forwards;
  animation-delay: 1s;
  position: absolute;
  top: 24px ;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--color-blue-azure);
  display: flex;
  justify-content: center; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2xZ {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_27U {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2r0 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3uz {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_rdI {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2Ks {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.zeroCase_1Ml {
  opacity: 0;
  animation: fade-in-up_27U 0.4s forwards;
  animation-delay: 0.2s;
  background: rgba(var(--color-yellow-rgba), 0.5);
  border: 1px solid var(--color-yellow-darken-10);
  padding: 24px ;
  text-align: center;
  max-width: 40.5rem;
  margin: 0 auto; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2Ch {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2ZW {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3SD {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3vg {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2Zl {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1En {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.pageHeaderSimple_1aN {
  margin-top: 48px ;
  opacity: 0;
  animation: fade-in-up_2ZW 0.4s forwards;
  animation-delay: 1s; }

.headerTeaser_2dd {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.21px; }

.headerLabel_3Le {
  margin-bottom: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_21W {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1vz {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_UrE {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1DU {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3iK {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_16z {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.container_2bJ {
  position: relative;
  z-index: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  min-height: 168px;
  overflow: hidden;
  padding-top: 48px ;
  padding-bottom: 48px ; }
  .container_2bJ img {
    transition: all 0.4s ease-in-out; }
  .container_2bJ:hover img {
    transition: all 0.4s ease-in-out;
    transform: scale(1.2); }

.bgMedia_17k {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  @media (min-width: 81.25em) {
    .bgMedia_17k {
      left: 48px ;
      width: calc(100% - 48px ); } }
  .bgMedia_17k img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover"; }

.content_1Pu {
  position: relative;
  max-width: 1112px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-white); }
  @media (max-width: 61.24em) {
    .content_1Pu {
      text-align: center; } }
  @media (min-width: 61.25em) {
    .content_1Pu > *:last-child {
      margin-bottom: 0 ; }
    .content_1Pu > * {
      max-width: 40.5rem; } }

.label_Ugd {
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  margin-left: 0px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-blue-azure);
  margin-bottom: 12px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1Mk {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3z6 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_Hr1 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_qIP {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_GQQ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_GhZ {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.pageHeaderMedia_2Yt {
  position: relative;
  opacity: 0;
  animation: fade-in_1Mk 0.4s forwards;
  animation-delay: 1s; }

.fullwidthMedia_1Cl {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  overflow: hidden;
  padding-top: 108px ;
  padding-bottom: 132px ; }
  @media (min-width: 61.25em) {
    .fullwidthMedia_1Cl {
      padding-top: 144px ; } }
  .fullwidthMedia_1Cl,
  .fullwidthMedia_1Cl .teaser_2Mw {
    color: white; }

.overlay_20I {
  transition: all 0.4s ease-in-out;
  transform-origin: right;
  pointer-events: none; }

.contentMedia_24B {
  padding-top: calc(96px + 12px ); }
  @media (min-width: 61.25em) {
    .contentMedia_24B {
      padding-top: calc(96px + 48px ); } }

.bgMedia_3uB {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  @media (min-width: 81.25em) {
    .bgMedia_3uB {
      left: 48px ;
      width: calc(100% - 48px );
      overflow: hidden; } }
  .bgMedia_3uB img,
  .bgMedia_3uB video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover"; }

.content__sR {
  position: relative;
  max-width: 1112px;
  margin-left: auto;
  margin-right: auto; }
  @media (max-width: 61.24em) {
    .content__sR {
      text-align: center; } }
  @media (min-width: 61.25em) {
    .content__sR > *:last-child {
      margin-bottom: 0 ; } }

.label_29r {
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  margin-left: 0px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-blue-azure);
  margin-bottom: 12px ; }

.media_2l9 {
  margin-bottom: 12px ; }

.teaser_2Mw {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.21px;
  color: var(--color-body-grey); }

@media (min-width: 61.25em) {
  .content__sR > * {
    max-width: calc(50% - 16px); }
  .fullwidthMedia_1Cl .content__sR > * {
    max-width: 38rem; }
  .media_2l9 {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%; }
    .media_2l9 > div {
      top: 50%;
      transform: translateY(-50%); } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1oe {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Ok {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1LN {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1ny {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_CPS {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3Ur {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.crosslinkCards_2Og {
  display: block; }
  .crosslinkCards_2Og.rollUp_3jX {
    display: block;
    width: 100%;
    max-width: 40.5rem;
    margin-left: auto ;
    margin-right: auto ;
    max-width: 55.5rem; }

.sectionCta_2j9 {
  margin-top: 24px ;
  text-align: center; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2zP {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1E6 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_4_t {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1nh {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_JwB {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3fz {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.btns_2o2 {
  text-align: center;
  margin-bottom: 60px ; }

.filterBtn_9wN {
  margin-right: 12px ;
  margin-bottom: 12px ; }
  .filterBtn_9wN:focus, .filterBtn_9wN:hover {
    outline: 0; }

.isActive_2Gd {
  background: var(--color-blue-azure);
  color: white !important; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2tF {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Ps {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3jJ {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_131 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_f9V {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3zK {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.list_1uy {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; }
  .list_1uy,
  .list_1uy li {
    list-style: none; }
  .list_1uy,
  .list_1uy > li {
    margin-left: 0; }
  .list_1uy.list_1uy {
    margin-left: -24px ;
    margin-right: -24px ; }

.item_3Az {
  flex-basis: 100%;
  padding: 0 24px ;
  margin-bottom: 48px ; }
  @media (min-width: 46.25em) {
    .item_3Az {
      flex: 1 1 50%;
      max-width: 50%; } }
  @media (min-width: 61.25em) {
    .item_3Az {
      flex: 1 1 33%;
      max-width: calc(100% / 3); } }

.filterTeaser_lTi {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; }
  @media (min-width: 31.25em) and (max-width: 46.24em) {
    .filterTeaser_lTi {
      -webkit-line-clamp: 5; } }

.tagshow_1Tp {
  position: relative;
  z-index: 10;
  transform: translate(24px, -48px);
  font-size: 12px;
  color: var(--color-green-ufo); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_NV8 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_gR8 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_PLq {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2B6 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3j5 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3q8 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.filterCards_1In {
  position: relative;
  z-index: auto; }

.loadmore_YbF {
  text-align: center; }
  .loadmore_YbF button:focus {
    outline: none; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1kT {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3Kj {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_bwY {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1i6 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_Fq0 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_38K {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.promoContent_1uh {
  display: inherit; }

.promo_oQ8 {
  width: 100%;
  max-width: 1112px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column-reverse; }
  .promo_oQ8.invert_2kL {
    flex-direction: column; }
  @media (min-width: 61.25em) {
    .promo_oQ8 {
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse; }
      .promo_oQ8.invert_2kL {
        flex-direction: row; } }

.promoLabel_3_J {
  margin-bottom: 12px ; }

.promoHeader_6fL {
  margin-bottom: 12px ; }

.promoMedia_1hc {
  margin-bottom: 0; }
  .invert_2kL .promoMedia_1hc {
    margin-bottom: 24px ; }
  @media (min-width: 61.25em) {
    .promoMedia_1hc {
      margin-bottom: 0;
      flex: 1 1 60%; } }

.promoText_9sD {
  margin-bottom: 24px ; }
  .invert_2kL .promoText_9sD {
    margin-bottom: 0; }
  @media (min-width: 61.25em) {
    .promoText_9sD {
      margin-bottom: 0;
      flex: 1 1 35%;
      margin-left: 0;
      margin-right: 48px ; }
      .invert_2kL .promoText_9sD {
        margin-left: 48px ;
        margin-top: 0; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_n10 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1f9 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_ni3 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_20s {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_A7H {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_-D2 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@media (min-width: 61.25em) {
  .promotedSquares_2RK {
    display: flex;
    align-items: center; } }

.content_1kn {
  margin-left: auto ;
  margin-right: auto ;
  flex: 0 1 auto; }
  @media (min-width: 46.25em) {
    .content_1kn {
      max-width: 464px;
      padding: 0 24px; } }

.header_11-,
.label_B0x {
  margin-bottom: 12px ; }

.squares_M6W {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: calc((194px));
  max-width: calc((194px)); }
  @media (min-width: calc((2 * 194px) + 36px)) {
    .squares_M6W {
      width: calc((2 * 194px) + 36px );
      max-width: calc((2 * 194px) + 36px ); } }
  @media (min-width: 46.25em) {
    .squares_M6W {
      width: calc((3 * 194px) + (2 * 36px ));
      max-width: calc((3 * 194px) + (2 * 36px )); } }

.square_1bH {
  position: relative;
  z-index: 1;
  display: block;
  width: 194px;
  height: 194px;
  max-height: 194px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 48px ;
  align-items: center;
  margin-top: 36px ; }
  .square_1bH * {
    z-index: 1; }
  .square_1bH .bg_2dJ {
    z-index: 0; }
  .square_1bH:hover .bg_2dJ {
    transform: scale(1.2); }
  .square_1bH:nth-child(1) {
    color: var(--color-white);
    background-color: var(--color-blue-oxford); }
  .square_1bH:nth-child(2) {
    color: var(--color-white);
    background-color: var(--color-blue-persian); }
  .square_1bH:nth-child(3) {
    color: var(--color-blue-oxford);
    background-color: var(--color-blue-azure-10); }
  .square_1bH:nth-child(4) {
    color: var(--color-white);
    background-color: var(--color-blue-azure); }
  .square_1bH:nth-child(5) {
    color: var(--color-blue-oxford);
    background-color: var(--color-blue-azure-03); }
  .square_1bH:nth-child(6) {
    color: var(--color-blue-oxford);
    background-color: var(--color-blue-oxford-03); }
  @media (min-width: 61.25em) {
    .square_1bH {
      margin-top: 0; }
      .square_1bH:nth-child(3) ~ .square_1bH {
        margin-top: 36px ; } }
  .square_1bH [class*="icon"] {
    font-size: 72px ;
    margin-bottom: 18px ; }
  .square_1bH p {
    text-align: center; }

.bg_2dJ {
  transition: all 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1Ug {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2Dt {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3V6 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3ZC {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_32H {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_YHT {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.footer_2db {
  position: relative; }

.inner_3di {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  padding-top: 48px ;
  padding-bottom: 24px ;
  background-color: var(--color-blue-oxford); }
  @media (max-width: 46.24em) {
    .inner_3di {
      text-align: center; } }
  .inner_3di,
  .inner_3di *,
  .inner_3di a {
    color: white; }

.links_3n6 {
  margin-bottom: 0; }
  .links_3n6:after {
    content: "" !important;
    display: block !important;
    clear: both !important; }
  .links_3n6,
  .links_3n6 li {
    list-style: none; }
  .links_3n6,
  .links_3n6 > li {
    margin-left: 0; }
  .links_3n6 li {
    float: left;
    width: 100%;
    text-transform: uppercase;
    padding-bottom: 18px ; }
    @media (min-width: 61.25em) {
      .links_3n6 li {
        width: calc(100% / 3); } }

.feet_1Xk {
  margin-top: 36px ;
  flex-direction: column;
  display: flex; }
  @media (min-width: 46.25em) {
    .feet_1Xk {
      flex-direction: row-reverse;
      justify-content: space-between; } }
  .feet_1Xk ul {
    margin-bottom: 0; }
    .feet_1Xk ul,
    .feet_1Xk ul li {
      list-style: none; }
    .feet_1Xk ul,
    .feet_1Xk ul > li {
      margin-left: 0; }
    .feet_1Xk ul > li {
      display: inline-block; }
  .feet_1Xk a:hover,
  .feet_1Xk a:hover span {
    color: white; }
  .feet_1Xk a:hover svg {
    fill: white; }

@media (max-width: 46.24em) {
  .leftFoot_37o {
    margin-top: 36px ; } }

.rightFoot_3Du li + li,
.leftFoot_37o li + li {
  padding-left: 24px ; }

.content_3ZJ,
.feet_1Xk a,
.feet_1Xk * {
  color: var(--color-pale); }

.usp_3oG {
  position: relative;
  z-index: 1;
  margin-top: 48px ;
  background: var(--color-blue-azure); }
  .usp_3oG * {
    color: var(--color-blue-oxford); }

.uspContent_2yu {
  position: relative;
  z-index: 20;
  margin: 0 auto 0;
  max-width: 1440px;
  text-align: center;
  padding: 60px 0px 60px ; }
  @media (min-width: 61.25em) {
    .uspContent_2yu {
      padding: 84px 0px 72px ; } }

.uspLabel_WoW {
  font-size: 12px;
  font-weight: bold;
  line-height: 2;
  margin-left: 0px;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 12px ;
  font-weight: 600; }

.uspHeader_1Oh {
  font-size: 42px;
  line-height: 1.14;
  font-size: 42px;
  font-size: 2.625rem;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -1.19px;
  color: var(--color-blue-oxford);
  margin-bottom: 0; }

.valign_1wo {
  display: inline-flex !important;
  align-items: center; }
  .valign_1wo span {
    width: 24px ; }

.footerSwoosh_ys8 {
  position: relative;
  height: 112px;
  margin-bottom: -48px ;
  z-index: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3_1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_Sno {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3M1 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3Te {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1ff {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_183 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@media (max-width: 46.24em) {
  .buttonList_JCf {
    text-align: center; } }

.buttonList_JCf a {
  width: 100%;
  margin-bottom: 36px ;
  max-width: 360px; }
  @media (min-width: 46.25em) and (max-width: 61.24em) {
    .buttonList_JCf a {
      margin-bottom: 36px ;
      max-width: 50%;
      max-width: calc(50% - 24px );
      margin-left: 0; } }
  @media (min-width: 61.25em) {
    .buttonList_JCf a {
      max-width: 33.33%;
      min-width: calc(33.33% - 24px );
      max-width: calc(33.33% - 24px );
      margin-left: 0; } }

.scEnabledChrome .buttonList_JCf > span {
  position: relative;
  display: inline-block;
  margin-bottom: 24px ;
  width: 100%; }
  @media (max-width: 46.24em) {
    .scEnabledChrome .buttonList_JCf > span {
      width: 100%; } }
  .scEnabledChrome .buttonList_JCf > span > div[style] {
    position: absolute !important;
    transform: translateY(-100%);
    left: 0; }
  .scEnabledChrome .buttonList_JCf > span > a {
    display: block;
    width: 100%;
    max-width: calc(100% - 36px ); }
  @media (min-width: 46.25em) and (max-width: 61.24em) {
    .scEnabledChrome .buttonList_JCf > span {
      width: 50%; }
      .scEnabledChrome .buttonList_JCf > span:nth-child(2n + 1) > a {
        margin-left: 0; } }
  @media (min-width: 61.25em) {
    .scEnabledChrome .buttonList_JCf > span {
      width: 33%; }
      .scEnabledChrome .buttonList_JCf > span:nth-child(3n + 1) > a {
        margin-left: 0; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_17Y {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3Om {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3g8 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2dy {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_322 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1ti {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.media_3Eb {
  position: relative;
  overflow: hidden; }

.mediaContent_2M7 {
  margin-top: 1px; }

.image_3Km {
  transform: translateX(-72px);
  margin-right: 24px ; }

.image_3Km + .image_3Km {
  margin-top: 0; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_tt_ {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1_B {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1WR {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_YNk {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2Hu {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3IK {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.numberPanel_1v_ {
  position: relative;
  z-index: 1;
  background: var(--color-bg-panels);
  overflow: hidden; }
  .numberPanel_1v_.dark_e14 {
    background: var(--color-blue-oxford); }
    .numberPanel_1v_.dark_e14 .iconNmbr_2Kh {
      color: var(--color-blue-azure); }
  .numberPanel_1v_.light_3de {
    background: var(--color-blue-azure); }
    .numberPanel_1v_.light_3de .iconNmbr_2Kh {
      color: var(--color-blue-persian); }

.container_1b2 {
  padding-top: 72px ;
  padding-bottom: 72px ; }

.content_1Af {
  max-width: 1112px;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto; }

.numbers_2Wy {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 48px; }
  .numbers_2Wy.noPadding_3-e {
    padding-top: 0; }
  @media (max-width: 46.24em) {
    .numbers_2Wy {
      justify-content: space-between; } }

.numberItem_1DO {
  flex: 1;
  padding: 12px ;
  text-align: center;
  color: white; }
  .numberItem_1DO + .numberItem_1DO {
    border-top: 1px solid rgba(255, 255, 255, 0.5); }
    @media (min-width: 46.25em) {
      .numberItem_1DO + .numberItem_1DO {
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-top: none; } }
  @media (max-width: 46.24em) {
    .numberItem_1DO {
      flex: 1 1 auto; } }
  .numberItem_1DO img.scEnabledChrome {
    filter: invert(1); }

.miniSlider_UTa {
  position: relative;
  flex-shrink: 0;
  flex-basis: auto !important;
  transition: all 0.4s ease-in-out;
  transition-timing-function: ease-in-out;
  overflow: auto; }
  .miniSlider_UTa > div {
    display: inline-block;
    flex: none;
    width: 100vw;
    top: -1px;
    position: relative; }

.iconNmbr_2Kh {
  margin-bottom: 12px ; }

.numberline_mRU {
  display: flex;
  justify-content: center;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  margin-left: -1px;
  letter-spacing: -0.08px; }
  @media (min-width: 61.25em) {
    .numberline_mRU {
      font-size: 64px;
      font-weight: 500;
      line-height: 1.125;
      margin-left: -2px; } }

.unit_1cZ {
  font-size: 0.5em;
  padding-top: 6px; }

.label_165 {
  text-transform: uppercase; }

.cta_2qd {
  margin-top: 24px;
  text-align: center; }

.textHeader_3my {
  color: var(--color-white);
  text-align: center;
  font-size: 40px; }

.teaserClass_19k {
  color: var(--color-white);
  text-align: center;
  font-size: 16px; }

.labelClass_GHZ {
  text-align: center; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2z0 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_15O {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1qg {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_cLt {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3YO {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_vFY {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.textspotCard_16v {
  margin-bottom: 12px ; }

.withBackground_3SC {
  background-color: var(--color-blue-azure-03);
  padding-bottom: 48px ; }
  .withBackground_3SC .textSpotIntro_3tx {
    padding-top: 72px ; }

.pullUp_3Ah {
  margin-top: 120px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3W7 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3FC {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1QQ {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_W8y {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_efz {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_vGg {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

/**
* styles for submenu 
*/
.submenu_jSD {
  color: var(--color-link-nav-blue); }

.subBack_3ZY {
  display: flex;
  width: 100%;
  height: 48px ;
  align-items: center;
  margin-bottom: 12px ;
  font-size: 14px;
  line-height: 24px ;
  padding-left: 12px ;
  font-weight: 500;
  background-color: var(--color-blue-azure-alpha03);
  color: var(--color-blue-oxford);
  transition: backgroundColor 0.2s linear;
  background: transparent;
  cursor: pointer; }
  .subBack_3ZY:hover {
    background-color: var(--color-blue-azure-10);
    color: var(--color-link-nav-blue); }
  .subBack_3ZY span {
    margin-right: 12px ; }

.mainCategory_1eD {
  padding-left: 12px ; }

.subLinkgroupHeader_2ME {
  font-size: 12px;
  line-height: 2;
  margin-bottom: 1em;
  text-transform: uppercase;
  color: var(--color-blue-azure) !important; }
  @media (max-width: 61.24em) {
    .subLinkgroupHeader_2ME {
      margin-top: 24px; } }

.subLinkgroup_yKH {
  margin-bottom: 0; }
  .subLinkgroup_yKH,
  .subLinkgroup_yKH li {
    list-style: none; }
  .subLinkgroup_yKH,
  .subLinkgroup_yKH > li {
    margin-left: 0; }
  .subLinkgroup_yKH,
  .subLinkgroup_yKH li {
    list-style: none; }
  .subLinkgroup_yKH,
  .subLinkgroup_yKH > li {
    margin-left: 0; }
  .subLinkgroup_yKH > li {
    display: inline-block; }
  .subLinkgroup_yKH > li {
    width: 100%; }
    .subLinkgroup_yKH > li > a {
      display: flex;
      width: 100%;
      height: 48px ;
      align-items: center;
      margin-bottom: 12px ;
      font-size: 14px;
      line-height: 24px ;
      padding-left: 12px ;
      font-weight: 500;
      background-color: var(--color-blue-azure-alpha03);
      color: var(--color-blue-oxford);
      transition: backgroundColor 0.2s linear;
      display: flex;
      align-items: center; }
      .subLinkgroup_yKH > li > a:hover {
        background-color: var(--color-blue-azure-10);
        color: var(--color-link-nav-blue); }
  @media (min-width: 46.25em) {
    .subLinkgroup_yKH {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between; }
      .subLinkgroup_yKH > li {
        flex: 0 1 calc(50% - 6px );
        max-width: calc(50% - 6px ); } }
  @media (min-width: 61.25em) {
    .subLinkgroup_yKH {
      justify-content: flex-start;
      margin-left: -6px ;
      margin-right: -6px ; }
      .subLinkgroup_yKH > li {
        flex: 0 1 33.33%;
        padding-left: 6px ;
        padding-right: 6px ; }
      .hasTwoColumns_1jA .subLinkgroup_yKH > li {
        flex: 0 1 calc(50% - 6px );
        max-width: calc(50% - 6px ); }
      .hasOneColumn_3wV .subLinkgroup_yKH > li {
        flex-basis: 100%;
        max-width: none; } }

.subItemIcon_2uR {
  display: inline-flex;
  font-size: 36px;
  width: 1em;
  height: 1em;
  background: white;
  border-radius: 0.5em;
  margin-right: 6px ;
  margin-left: -6px ;
  align-items: center;
  justify-content: center; }
  .subItemIcon_2uR > span {
    position: relative;
    left: 1px; }

@media (max-width: 61.24em) {
  .submenu_jSD {
    width: 100vw;
    will-change: transform;
    position: fixed;
    background: white;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 24px ;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.2s linear; }
    .submenu_jSD.isActiveClicked_2-j {
      transform: translateX(0%); }
  .subInner_1Ta[style*="left"] {
    left: 0 !important; } }

@media (min-width: 61.25em) {
  .submenu_jSD {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 840px;
    height: auto;
    padding-top: 24px ; }
  .hasOneColumn_3wV {
    width: 320px; }
  .hasTwoColumns_1jA {
    width: 580px; }
  .subInner_1Ta {
    position: relative;
    padding: 12px  12px  0;
    border-radius: 2px;
    background: white;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25);
    max-height: 456px ;
    overflow: auto; }
  .languagesSubmenu_10X .subInner_1Ta {
    max-height: 80vh;
    overflow: auto; }
  .submenu_jSD {
    pointer-events: none;
    opacity: 0.2;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: all 0.2s;
    z-index: 1; }
    .submenu_jSD * {
      transition: none; }
  [class*="navList"] > li:hover > .submenu_jSD {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    z-index: 10; }
    [class*="navList"] > li:hover > .submenu_jSD.keepRight_2Yr {
      transform: translate(0, 0); } }

@media (min-width: 61.25em) {
  .showSmall_3v1 {
    display: none; } }

.submenu_jSD * {
  color: var(--color-link-nav-blue); }

.submenu_jSD a * {
  color: inherit; }

.submenu_jSD a:hover {
  color: var(--color-link-nav-blue); }

.languages_2iC .subItemIcon_2uR {
  display: inline-flex !important; }
  .languages_2iC .subItemIcon_2uR span {
    display: inline-block !important; }

.languages_2iC > li > a + a {
  margin-top: -12px ; }

.flagIcon_2bt {
  display: inline-flex;
  width: 20px;
  height: 20px;
  width: 36px ;
  height: 36px ;
  margin-right: 12px ;
  border-radius: 50%; }

@media (min-width: 61.25em) {
  .keepRight_2Yr {
    transform: translate(0, 12px);
    left: auto;
    right: 0; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2rr {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3sz {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_Dgx {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_32h {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1Tp {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_Bhe {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.siteAlert_2MT {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: red;
  z-index: 5000;
  transform: translateY(-105%);
  transition: all 0.2s ease-in-out; }
  .siteAlert_2MT a,
  .siteAlert_2MT .closer_2tr {
    color: inherit;
    cursor: pointer; }
  .siteAlert_2MT a:not(.closer_2tr) {
    text-decoration: underline; }

.inner_RI7 {
  max-width: 1440px;
  margin-left: auto ;
  margin-right: auto ;
  display: flex;
  justify-content: space-between;
  padding: 12px  12px ; }

.isOpen_wmc {
  transform: translateY(0);
  transition: all 0.4s ease-in-out; }

.color_grey_3Xc {
  background: var(--color-grey-dark); }

.color_green_Upn {
  background: var(--color-green-java); }

.color_yellow_9fn {
  background: var(--color-yellow-flavescent); }

.color_red_2_X {
  background: var(--color-pink-carmine); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3ln {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2oO {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2br {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1LN {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_18U {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1xC {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.headspaceWrapper_2B3 {
  position: relative;
  z-index: 3000; }

.topNavigation_CBa {
  width: 100%;
  height: 96px; }

.header_3zR {
  height: 96px;
  display: flex;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  font-size: 1rem;
  padding: 12px 24px;
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 1;
  justify-content: space-between;
  opacity: 0;
  animation: fade-in_3ln 0.4s forwards;
  animation-delay: 1.2s; }
  @media (min-width: 81.25em) {
    .header_3zR {
      padding-left: 48px ;
      padding-right: 48px ; } }

.logoWrapper_2hs {
  position: relative;
  width: var(--logo-width-fixed); }

.nav_1uh {
  flex: 1 1 100%; }

.utils_BeO {
  flex: 0 0 72px ;
  display: flex;
  position: relative;
  z-index: 1;
  justify-content: flex-end; }

.menuTrigger_2cO,
.searchTrigger_cWo {
  padding-left: 24px;
  transition: all 0.2s ease-in-out;
  cursor: pointer; }

.searchWrapper_3N5 {
  padding-left: 24px;
  font-size: 1rem;
  position: relative;
  z-index: 1; }

/**
* NAVIGATION STYLES
*/
.navList_1FX {
  margin: 0;
  display: flex; }
  .navList_1FX,
  .navList_1FX li {
    list-style: none; }
  .navList_1FX,
  .navList_1FX > li {
    margin-left: 0; }
  .navList_1FX > li {
    display: inline-block; }

@media (max-width: 61.24em) {
  .mobileMenuCanvas_2Qc {
    background: white;
    width: 100%;
    min-width: 320px;
    position: fixed;
    top: 96px;
    left: 100%;
    height: calc(100vh - 96px);
    transform: translate(0%, 0);
    transition: none;
    overflow: hidden;
    box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.5);
    padding: 24px 0 48px; }
    .mobileMenuCanvas_2Qc.isMenuOpen_CDY {
      transform: translate(-100%, 0);
      opacity: 1;
      background: white; }
      .mobileMenuCanvas_2Qc.isMenuOpen_CDY .canvasInfo_2JV p {
        transform: translateY(0); }
  .navList_1FX {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column; }
    .navList_1FX a {
      display: block; }
    .navList_1FX > li > a {
      padding-bottom: 24px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 36px;
      font-weight: 500;
      line-height: 1;
      margin-left: -1px;
      letter-spacing: -0.08px;
      line-height: 1.3333;
      font-weight: 400; }
    .navList_1FX .searchNavLink_JBb {
      display: none; }
    .navList_1FX + .navList_1FX {
      z-index: 1; }
      .navList_1FX + .navList_1FX.isActive_204 {
        z-index: 10; }
  .canvasInner_2DZ {
    position: relative;
    height: 100%;
    overflow-y: scroll;
    padding: 0 24px; }
  .canvasInfo_2JV {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 12px;
    border-bottom: 2px dotted; }
    .canvasInfo_2JV > *:last-child {
      margin-bottom: 0 ; }
    .canvasInfo_2JV p {
      transform: translateX(1em);
      transition: all 0.2s ease-in-out; }
  .currentLanguage_1Tq {
    display: none; } }

/**
* DESKTOP => 
*
****************************************************************** */
@media (min-width: 61.25em) {
  .menuTrigger_2cO,
  .searchTrigger_cWo {
    display: none; }
  .canvasInfo_2JV {
    display: none; }
  .canvasInner_2DZ {
    display: flex;
    justify-content: space-between; }
  .navList_1FX {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; }
    .navList_1FX:nth-of-type(1) {
      flex: auto;
      justify-content: center; }
    .navList_1FX:nth-of-type(2) {
      padding-left: 48px; }
    .navList_1FX > li {
      position: relative;
      flex-grow: 0; }
    .navList_1FX:first-of-type > li > a {
      position: relative;
      text-transform: uppercase;
      font-size: 14px;
      font-size: 0.875rem;
      line-height: 1.71429;
      font-weight: 500; }
      .navList_1FX:first-of-type > li > a:after {
        will-change: transform;
        position: absolute;
        bottom: -12px;
        left: 0;
        content: "";
        transition: all 0.2s;
        display: inline-block;
        width: 100%;
        height: 4px;
        background: var(--color-link-nav-blue-focus);
        transform: scaleX(0);
        opacity: 0; }
    .navList_1FX:first-of-type > li:hover > a:after {
      transform: scaleX(1);
      opacity: 1; }
    .navList_1FX .flexGrow_1_x {
      flex-grow: 1; }
    .navList_1FX > li + li {
      padding-left: 24px; }
    .navList_1FX .smallDeviceIcon_1QD {
      display: none; }
    .navList_1FX .largeDeviceIcon_1Go {
      padding-left: 6px ;
      display: inline; }
    .navList_1FX .smallDeviceIcon_1QD {
      display: inline; }
    .navList_1FX .largeDeviceIcon_1Go {
      display: none; }
    .navList_1FX .utilNavLink_b1a span:nth-child(1) {
      display: none; }
    .navList_1FX .utilNavLink_b1a span:nth-child(2) {
      display: inline-block; } }

@media (min-width: 61.25em) and (min-width: 81.25em) {
  .main_2m7 > li + li {
    padding-left: 48px; } }

@media (min-width: 61.25em) {
  .header_3zR {
    height: 96px; }
  .logo_ClK {
    padding-right: 48px; }
  .utils_BeO {
    display: none; }
  .currentLanguage_1Tq {
    padding-left: 12px ; } }

/* => end Desktop specifics */
.icons_2uz {
  display: inline-block; }
  .icons_2uz > span:nth-child(2) {
    display: none; }
  @media (min-width: 61.25em) {
    .icons_2uz > span:nth-child(2) {
      display: inline-block;
      padding-left: 6px ;
      position: relative;
      top: -2px; }
    .icons_2uz > span:nth-child(1) {
      display: none; } }

.headRoom_1F7 {
  will-change: transform;
  transition: transform 200ms linear, opacity 0.2s linear 0.2s, top 0.4s linear;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  transform: translateY(0%); }
  .headRoom_1F7.isUnpinned_j_- {
    content: "is unpinned";
    transform: translateY(-100%); }
    .headRoom_1F7.isUnpinned_j_-:hover {
      transform: translateY(0%); }
      .headRoom_1F7.isUnpinned_j_-:hover > div {
        background: white;
        color: var(--color-link-nav-blue); }
  .headRoom_1F7.isPinned_UK2, .headRoom_1F7.atBottom_3XF {
    transform: translateY(0%); }
    .headRoom_1F7.isPinned_UK2 > div, .headRoom_1F7.atBottom_3XF > div {
      background: white;
      color: var(--color-link-nav-blue); }
  .headRoom_1F7.isFrozen_37R {
    opacity: 1 !important;
    transform: translateY(0%) !important; }
    .headRoom_1F7.isFrozen_37R .header_3zR {
      background: white !important; }
  .transparent_2dA .headRoom_1F7 > div, .transparent_2dA .headRoom_1F7.atTop_1Pw > div {
    background: transparent;
    color: white;
    opacity: 1;
    transform: translateY(0%); }
  .transparent_2dA .headRoom_1F7.notAtTop_260 {
    opacity: 0;
    transform: translateY(-100%); }

.hoverRevealNavigation_2By {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: inherit;
  display: block;
  width: 100%;
  height: 96px;
  z-index: 2999; }
  .hoverRevealNavigation_2By:hover ~ .headRoom_1F7 {
    transform: translateY(0%); }

.header_3zR a {
  color: var(--color-link-nav-blue); }

.header_3zR a:hover {
  color: var(--color-link-nav-blue-focus); }

.transparent_2dA .header_3zR {
  background: transparent;
  color: white; }
  .transparent_2dA .header_3zR a {
    color: white; }

.transparent_2dA [class*="submenu"] a {
  color: var(--color-link-nav-blue); }

.transparent_2dA .notAtTop_260 .header_3zR a {
  color: var(--color-link-nav-blue); }

.solid_2oj .header_3zR {
  background: white;
  color: var(--color-link-nav-blue); }

.isInvisible_2sL {
  opacity: 0; }

.buffer_2D6 {
  min-height: 0;
  transition: all 0.4s ease-in-out;
  transition-duration: 0.4s;
  transition-timing-function: linear; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2CC {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Lk {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_SIw {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2ja {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_322 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_13u {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.quoteComp_29r {
  position: relative;
  padding-top: 48px ;
  margin-bottom: 72px ; }

.quote_3HG {
  font-size: 42px;
  font-size: 2.625rem;
  line-height: 1.14286;
  font-style: italic; }

.quoteSource_3R8 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-grey-dove);
  font-style: italic; }
  .quoteSource_3R8:before {
    content: "- "; }

.quoteMark_3p5 {
  font-size: 100px;
  color: var(--color-blue-azure);
  display: inline-block;
  position: absolute;
  left: 50%;
  top: -24px ;
  transform: translateX(-50%);
  font-family: Arial;
  font-style: italic; }
  .quoteMark_3p5.left_Qha {
    left: 12px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_Xdj {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3Xq {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2t1 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3Y6 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3cI {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2zY {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@media (min-width: 61.25em) {
  .imageCtaList_3xZ {
    position: relative;
    z-index: 1;
    overflow: hidden; }
    .imageCtaList_3xZ .flickity-viewport {
      overflow: visible; }
    .imageCtaList_3xZ .flickity-page-dots {
      position: static; } }

.item_3r_ {
  display: inline-block;
  width: 100%;
  padding-left: 24px ;
  max-width: calc(300px - 24px ); }
  @media (min-width: 23.4375em) {
    .item_3r_ {
      max-width: calc(300px + 24px ); } }
  @media (min-width: 90em) {
    .item_3r_ {
      padding-left: 48px ;
      max-width: calc(300px + 48px ); } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2jL {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_12g {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_12A {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1yx {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_Ky6 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3cn {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.CookiesDialogue_2Nq {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  transform: translateX(calc(-100% - 24px));
  width: 100%;
  padding: 24px ;
  box-shadow: 0 4px 15px 0px rgba(26, 26, 26, 0.3);
  background: white; }
  .CookiesDialogue_2Nq,
  .CookiesDialogue_2Nq * {
    transition: all 0.2s ease-in-out; }
  @media (min-width: 46.25em) {
    .CookiesDialogue_2Nq {
      left: 24px;
      bottom: 24px;
      max-width: 450px; } }

.isMount_1LJ {
  transform: translateX(0); }

.removeDialogue_2yj {
  transform: translateX(calc(-100% - 24px));
  opacity: 0; }

.container_6nI {
  display: flex;
  align-items: start; }

.image_18n {
  flex: 0 0 50px;
  top: 6px; }

.text_2fp {
  flex: 1 1 auto;
  padding-left: 12px ; }

.ctaRow_7Ub {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .ctaRow_7Ub > * {
    flex: 0 1 50%; }
    .ctaRow_7Ub > * + * {
      margin-left: 12px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_LHG {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_14a {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2Tp {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3rp {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3nW {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1ln {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.profileTeaser_eDf {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  margin-bottom: 24px; }
  @media (min-width: 61.25em) {
    .profileTeaser_eDf {
      -webkit-line-clamp: 3; } }

.profileTextCollection_xU7 {
  margin-bottom: 24px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_q-V {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1q6 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_rBG {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_325 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1Nf {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2oM {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.profileFull_3t4 {
  position: relative;
  height: 90%;
  background: white;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  width: calc(100% - 10%);
  max-width: 1160px; }
  @media (min-width: 46.25em) {
    .profileFull_3t4 {
      max-height: 90%; } }
  @media print {
    .profileFull_3t4 {
      overflow: visible;
      width: 100%;
      max-width: none;
      height: auto;
      max-height: none; } }

.media_16i {
  background: var(--color-black-almost);
  position: relative; }

.image_N6R {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover";
  transition: opacity 0.1s linear;
  pointer-events: none; }

.dummy_1lS {
  opacity: 0; }

@media (min-width: 61.25em) {
  .imageCell_2V7 {
    order: 2; } }

.headerCell_1RA > div {
  padding: 12px 24px 0px ; }

@media (min-width: 61.25em) {
  .headerCell_1RA {
    order: 1; }
    .headerCell_1RA > div {
      padding-top: 0; } }

@media (min-width: 61.25em) and (max-width: 73em) {
  .headerCell_1RA h2 {
    font-size: 34px;
    font-size: 3.3vw; } }

.head_1bl {
  position: relative; }

.navigator_3X9 {
  position: relative;
  width: 100%;
  height: 36px ; }
  @media (min-width: 61.25em) {
    .navigator_3X9 {
      height: 48px ; } }

.close_3YR {
  font-size: 18px ;
  margin-top: -3px;
  color: var(--color-black-almost);
  position: absolute;
  top: 50%;
  right: 1em;
  display: inline-block;
  transform: translateY(-50%);
  height: 1em;
  width: 1em; }
  @media (min-width: 61.25em) {
    .close_3YR {
      font-size: 24px ;
      margin-top: -6px; } }
  .close_3YR span {
    font-size: 1em; }

.close_3YR {
  cursor: pointer; }

.body_1cO {
  padding: 24px ; }
  @media (min-width: 61.25em) {
    .body_1cO {
      padding-top: 0; } }
  .body_1cO h3,
  .body_1cO h2 {
    margin-bottom: 12px ; }

.summary_2iP {
  color: var(--color-grey-davys); }

.textBlock_1LW {
  margin-bottom: 36px ; }

.buttons_1k6 {
  display: flex;
  justify-content: center;
  cursor: pointer; }

.belowImage_3jf {
  padding: 12px 24px ; }
  .belowImage_3jf:after {
    content: "" !important;
    display: block !important;
    clear: both !important; }
  @media (min-width: 61.25em) {
    .belowImage_3jf {
      padding-left: 0; } }

.downloadBtn_3Ws {
  font-size: 12px;
  float: right;
  position: relative;
  top: -6px ; }

.countryFlag_2mz {
  width: 25px;
  border-radius: 50%;
  border: 1px solid var(--color-blue-azure-alpha20);
  float: left; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_NEN {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1DJ {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_23G {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2I8 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3YB {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1jV {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@media print {
  body.profile-full-printable [class*="topNavigation_"],
  body.profile-full-printable .noPrint_1sW {
    display: none; }
  body.profile-full-printable .profileModal_10- {
    position: static; }
  body.profile-full-printable [data-wrapper="true"]:not(.profileCardsRoot_3QC) {
    display: none; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3pZ {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3kC {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3kB {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_9F_ {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_gtb {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3AB {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.sectionCta_2D- {
  text-align: center; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_36a {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2uV {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1UH {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3NZ {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3Y_ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1q3 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.localNavigation_24I {
  text-align: center; }
  .localNavigation_24I a + a {
    margin-left: 12px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_170 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1tR {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2RF {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_8t5 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_33W {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_21l {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.linkContainer_2Sj {
  position: relative;
  display: block;
  text-align: left;
  z-index: auto;
  margin-right: 18px ; }
  @media (max-width: 25.9375em) {
    .linkContainer_2Sj > a {
      width: 100%; } }
  @media (min-width: 25.9375em) {
    .linkContainer_2Sj {
      display: inline-block; }
      .linkContainer_2Sj + .linkContainer_2Sj {
        margin-left: 18px ; }
      .linkContainer_2Sj:last-child {
        margin-right: 0; }
      .linkContainer_2Sj:hover {
        z-index: 10; } }

.hasSub_3A_:hover {
  box-shadow: 0 2px 4px 0 rgba(26, 26, 26, 0.15);
  filter: none;
  transform: none; }

.linkContainer_2Sj:hover .hasSub_3A_ {
  background-color: var(--color-blue-azure);
  color: white;
  border-color: var(--color-blue-azure); }

.hasSub_3A_ span[class*="icon"] {
  background: transparent;
  color: inherit;
  font-size: 1rem; }

.isActive_1JF, .isActive_1JF:visited, .isActive_1JF:hover {
  background-color: var(--color-blue-azure);
  color: white;
  border-color: var(--color-blue-azure); }

.subMenu_20W {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1;
  bottom: 0; }

.subMenuInner_9hB {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: -12px ;
  width: 264px;
  padding: 12px ;
  background: white;
  border-radius: 2px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25); }

.subItem_2Q4 {
  display: block;
  padding: 12px ;
  background-color: rgba(var(--color-blue-iss), 0.03);
  font-size: 14px; }
  .subItem_2Q4, .subItem_2Q4:visited {
    color: var(--color-blue-iss); }
  .subItem_2Q4:hover {
    background-color: rgba(var(--color-blue-iss), 0.1); }
  .subItem_2Q4 + .subItem_2Q4 {
    margin-top: 12px ; }

.scEnabledChrome .linkContainer_2Sj {
  vertical-align: top; }

.scEnabledChrome .subMenu_20W {
  position: static; }

.scEnabledChrome .subMenuInner_9hB {
  position: static;
  transform: none;
  margin-top: 12px; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_-mx {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1nF {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_lvs {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1v0 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_i0f {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2aD {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.subPageMenu_11j {
  display: block;
  position: relative;
  z-index: 1;
  text-align: center; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_WDW {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_11A {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3kA {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1jT {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_Qsu {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_uXB {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.negative_1R0 {
  color: var(--color-red); }

.rightAlign_T0N {
  text-align: right !important; }

.leftAlign_3M1 {
  text-align: left !important; }

@media (min-width: 61.25em) {
  .wide_3Mf {
    padding-left: 2.5em;
    padding-right: 2.5em; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_278 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Pc {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_ik7 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3-N {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3pE {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1lX {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.selectFields_1E7 {
  display: flex;
  margin-bottom: 24px ; }
  .selectFields_1E7 > div {
    max-height: 60px ;
    flex: 1 1 50%; }
    .selectFields_1E7 > div + div {
      margin-left: 24px ; }
  .selectFields_1E7 svg {
    max-height: 24px ; }

.section_aRq {
  opacity: 0;
  animation: fade-in-up_1Pc 0.4s forwards;
  animation-delay: 0s;
  margin-bottom: 36px ; }
  .section_aRq + .section_aRq {
    animation-delay: 0.2s !important; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1Cb {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_Ld8 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3Ax {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2D2 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3cg {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2cS {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.item_2VS {
  margin-bottom: 36px ; }
  .item_2VS:after {
    content: "" !important;
    display: block !important;
    clear: both !important; }

.date_1nF {
  color: var(--color-body-grey);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  margin-bottom: 0;
  font-weight: 500; }

.heading_1Jn {
  color: var(--color-blue-iss);
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  padding-bottom: 6px;
  margin-bottom: 0;
  letter-spacing: -0.21px; }

.teaser_3sx {
  margin-bottom: 12px ; }

.image_1Co {
  width: 100%;
  margin-bottom: 12px ; }
  @media (min-width: 46.25em) {
    .image_1Co {
      margin-top: 10px;
      float: right;
      max-width: 184px; } }
  .image_1Co img {
    height: 100%; }

.content_1uA {
  padding-top: 6px; }
  @media (min-width: 46.25em) {
    .image_1Co + .content_1uA {
      display: inline-block;
      width: calc(100% - 184px);
      padding-right: 24px ; } }
  @media (min-width: 81.25em) {
    .image_1Co + .content_1uA {
      padding-right: 48px ; } }

.link_QPq {
  clear: both; }
  .link_QPq a, .link_QPq a:visited {
    color: var(--color-link-secondary);
    text-decoration: underline; }
  .link_QPq a:hover {
    color: var(--color-link-secondary-focus); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1gY {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Ii {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2Mn {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_36L {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_14Q {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_184 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.list_3DD {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; }
  .list_3DD,
  .list_3DD li {
    list-style: none; }
  .list_3DD,
  .list_3DD > li {
    margin-left: 0; }
  .list_3DD li {
    width: 100%; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2OV {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1o3 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_L6s {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1HQ {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3oA {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_PyB {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.section_39Q {
  margin-bottom: 24px ;
  min-width: 180px;
  padding: 12px ;
  display: inline-block; }
  @media (min-width: 20em) and (max-width: 61.24em) {
    .section_39Q {
      width: auto;
      vertical-align: top;
      margin-right: 24px ; } }

.viewMore_3KM {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-blue-iss);
  text-decoration: underline; }

.boxes_iUi,
.section_39Q {
  transition: all 0.2s ease-in-out; }

.boxes_iUi {
  max-height: 216px;
  overflow-y: auto;
  margin-right: -12px; }

.isExpanded_3Dt {
  box-shadow: 0 4px 15px 0px rgba(26, 26, 26, 0.3); }
  .isExpanded_3Dt .boxes_iUi {
    max-height: 216px;
    overflow-y: auto; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_20e {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2sf {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1JJ {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_fF0 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3F_ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3WL {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.left_3FC {
  min-height: 336px ;
  min-width: 180px ; }

.center_2hm {
  max-width: 40.5rem;
  margin: 0 auto;
  width: 100%;
  opacity: 0;
  animation: fade-in-up_2sf 0.4s forwards;
  animation-delay: 1s; }

@media (min-width: 61.25em) {
  .centerGrid_fnL {
    display: flex;
    flex-direction: row; }
  .left_3FC {
    width: calc((100% - 40.5rem) / 2);
    margin-right: 24px ; }
  .center_2hm {
    margin: 0; } }

.loadmore_3EU {
  text-align: center; }
  .loadmore_3EU button:focus {
    outline: none; }

.filterByLabel_2bW {
  color: var(--color-body-grey);
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 2;
  font-weight: 500;
  padding-left: 12px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_33k {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3qS {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1JY {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2b2 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3qv {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2-n {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.wrapper_3j- {
  position: relative;
  width: 100%; }
  @media (min-width: 46.25em) {
    .wrapper_3j- {
      overflow-x: hidden; } }

.logoWrapper_1mm {
  max-width: 1440px;
  margin: 0 auto;
  position: relative; }

.logo_3N_ {
  width: 52px;
  position: absolute;
  top: 24px ;
  left: 0; }

.container_3Iy {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column; }
  @media (max-width: 46.24em) {
    .container_3Iy {
      padding-top: 96px; } }
  @media (min-width: 46.25em) {
    .container_3Iy {
      flex-direction: row; }
      .container_3Iy > div {
        padding-top: 96px;
        flex: 1 0 50%; } }

.infoSection_1RC {
  display: flex;
  justify-content: flex-end; }

.infoContainer_mso {
  max-width: 576px ;
  padding: 0px 24px 48px 24px ;
  padding: 36px 24px 48px 24px ; }

.header_tqD {
  line-height: 1.14; }

.formSection_3Si {
  position: relative; }

.bgImage_3Ja img {
  position: absolute;
  z-index: 0;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;
  opacity: 0;
  animation: fade-in_33k 0.4s forwards;
  animation-delay: 1s;
  object-fit: cover;
  font-family: "object-fit: cover"; }
  @media (min-width: 46.25em) {
    .bgImage_3Ja img {
      top: 0;
      left: 20%;
      width: 80%;
      height: 100%; } }
  @media (min-width: 81.25em) {
    .bgImage_3Ja img {
      left: 128px;
      width: calc(100% - 128px); } }

.formContainer_18b {
  background: white;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 10px 0 rgba(var(--color-black-almost-rgba), 0.1);
  padding: 24px ;
  margin: 0px 24px ;
  opacity: 0;
  animation: fade-in-up_3qS 0.4s forwards;
  animation-delay: 3s; }
  @media (min-width: 46.25em) {
    .formContainer_18b {
      max-width: 576px ; } }

.formContainerInner_KrW {
  min-height: 400px;
  transition: all 0.4s;
  position: relative; }

.theForm_k66 {
  transition: opacity 0.4s, transform 0.6s; }
  .isSubmitted_2fp .theForm_k66 {
    opacity: 0;
    pointer-events: none;
    transform: scale(0); }
  .theForm_k66 [class*="heading"] {
    font-size: 22px;
    font-weight: 500;
    line-height: 0.91;
    margin-left: -1px;
    letter-spacing: -0.24px;
    margin-bottom: 24px;
    text-align: center; }
  .theForm_k66 button[type=submit] {
    margin: 24px  auto;
    display: block;
    min-width: 230px !important;
    height: 60px ;
    justify-content: center !important; }

.feedback_1XU {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 24px ;
  text-align: center; }
  .feedback_1XU > div {
    opacity: 0;
    animation: fade-in-grow_2-n 0.4s forwards;
    animation-delay: 0ms; }

.icon_1dr {
  width: 48px ;
  margin-bottom: 36px ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_34q {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_jg3 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1GC {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_35c {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2Vu {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2VB {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

/*
    OVERLAPPING CARDS 
    */
.overlappingCards_2MM {
  margin: 72px  0; }
  .overlappingCards_2MM .quoteComp_TUy {
    margin-bottom: 0; }

.container_1Lz {
  position: relative;
  width: 100%; }
  @media (min-width: 46.25em) {
    .container_1Lz {
      height: 564px; } }

.image_2qM {
  position: relative;
  top: 0;
  right: 0;
  z-index: 0;
  max-width: 648px ;
  width: 100%;
  opacity: 0;
  animation: fade-in_34q 0.4s forwards;
  animation-delay: 1s; }
  @media (min-width: 46.25em) {
    .image_2qM {
      position: absolute;
      transition: all 0.8s ease-in;
      transform: translateY(72px ); }
      .image_2qM[class*="intersect"] {
        transform: translateY(0); }
      .invert_1KX .image_2qM {
        left: 0; } }

.card_3-5 {
  position: relative;
  z-index: 1;
  left: 0;
  margin: -20% 24px 0px ;
  width: auto;
  max-width: 648px ;
  background-color: white;
  box-shadow: 0 4px 10px 0 rgba(26, 26, 26, 0.1);
  padding: 24px ;
  transition: opacity 0.2s linear, transform 0.8s ease-in-out;
  text-align: left;
  direction: ltr; }
  @media (min-width: 46.25em) {
    .card_3-5 {
      opacity: 0;
      width: 100%;
      margin: 0;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      position: absolute; }
      .invert_1KX .card_3-5 {
        transform: translate3d(50%, -50%, 0);
        left: auto;
        right: 0; }
      .card_3-5[class*="intersect"] {
        transform: translate3d(0, -50%, 0);
        opacity: 1; } }

.quoteMark_1Dm {
  display: inline-block;
  position: absolute;
  left: 12px ;
  top: -20px;
  font-size: 136px;
  color: var(--color-blue-azure);
  font-family: Arial;
  font-style: italic;
  text-indent: -12px; }

.quote_hlf {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.06;
  margin-left: -1px;
  letter-spacing: -0.85px;
  line-height: 1.14 !important;
  font-weight: normal !important;
  letter-spacing: -1.19px !important;
  margin-left: 0 !important;
  font-style: italic; }
  @media (min-width: 61.25em) {
    .quote_hlf {
      font-size: 42px;
      font-weight: 500;
      line-height: 1.4;
      margin-left: -1px;
      letter-spacing: -0.45px; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_xdo {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_fqn {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1i2 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_3RD {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3vi {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_dW5 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.theForm_1Lb {
  transition: opacity 0.4s, transform 0.6s; }
  .isSubmitted_EuR .theForm_1Lb {
    opacity: 0;
    pointer-events: none;
    transform: scale(0); }
  .theForm_1Lb [class*="heading"] {
    font-size: 22px;
    font-weight: 500;
    line-height: 0.91;
    margin-left: -1px;
    letter-spacing: -0.24px;
    margin-bottom: 24px;
    text-align: center; }

.feedback_C8s {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 24px ;
  text-align: center; }
  .feedback_C8s > div {
    opacity: 0;
    animation: fade-in-grow_dW5 0.4s forwards;
    animation-delay: 0ms; }

.icon_1_g {
  width: 48px ;
  margin-bottom: 36px ; }

.formContainerInner_sSA {
  min-height: 400px;
  transition: all 0.4s;
  position: relative; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1h7 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3KP {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2Ll {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_13b {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3N_ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2yW {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.container_2By {
  position: relative;
  z-index: auto;
  margin-bottom: 72px ;
  opacity: 0;
  animation: fade-in-up_3KP 0.4s forwards;
  animation-delay: 0; }

.resultItem_18i {
  margin-bottom: 36px ;
  padding-bottom: 12px ; }
  .resultItem_18i h4 {
    color: var(--color-blue-oxford); }
  .resultItem_18i p {
    color: var(--color-blue-oxford);
    margin-bottom: 12px ; }
  .resultItem_18i a, .resultItem_18i a:visited {
    color: var(--color-link-secondary);
    text-decoration: underline; }
  .resultItem_18i a:hover {
    color: var(--color-link-secondary-focus); }

.noResultPhrase_1-e {
  font-size: 22px;
  font-weight: 500;
  line-height: 0.91;
  margin-left: -1px;
  letter-spacing: -0.24px;
  text-align: center;
  font-weight: normal;
  margin-bottom: 72px ; }

.resultInfo_1yA {
  width: 100%;
  margin-bottom: 36px ; }
  .resultInfo_1yA:after {
    content: "" !important;
    display: block !important;
    clear: both !important; }
  .resultInfo_1yA > p {
    float: left;
    width: auto;
    margin-bottom: 12px ; }
    .resultInfo_1yA > p + p {
      float: right;
      text-align: right;
      margin-left: 24px ; }
  .resultInfo_1yA a {
    color: var(--color-body);
    text-decoration: underline; }
    .resultInfo_1yA a.isActive_uX- {
      font-weight: bold;
      text-decoration: none; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_Ocm {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1KY {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_107 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1ZE {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2uc {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3Fc {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.suggestions_3b0 {
  opacity: 0;
  animation: fade-in-up_1KY 0.4s forwards;
  animation-delay: 0.4s; }

.suggestionHeader_1Al {
  margin-bottom: 36px ;
  max-width: 40.5rem;
  margin-left: auto ;
  margin-right: auto ; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3Fe {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_246 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1H8 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_MT1 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1Yl {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3VK {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.searchPage_1xC {
  margin-top: -96px; }

.head_3m1 {
  max-width: 1440px;
  margin: 0 auto; }

.headBgColor_ct3 {
  background-color: var(--color-blue-azure);
  height: 103px; }

.swoosh_38y {
  position: relative;
  height: 113px;
  z-index: 50; }

.searchFieldContainer_jaY {
  position: relative;
  z-index: 100;
  margin-top: -72px ;
  margin-bottom: 72px ;
  background-color: white;
  box-shadow: 0 4px 10px 0 rgba(26, 26, 26, 0.1);
  padding: 24px ; }
  .searchFieldContainer_jaY .implicit-form {
    padding: 0; }

.hideLabel_CDM {
  opacity: 0;
  position: absolute; }

.autocomplete_3mZ {
  opacity: 0;
  transition: all .2s linear;
  max-height: 60px;
  overflow: hidden; }
  .autocomplete_3mZ.isInit_1uv {
    opacity: 1;
    max-height: none; }
  .autocomplete_3mZ > div {
    margin: 0 !important; }
  .autocomplete_3mZ .MuiTextField-root > .MuiInputBase-root {
    padding: 12px ; }
  .autocomplete_3mZ .MuiInputAdornment-positionStart {
    margin-top: 1px !important; }

.iframeContainer_2af {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  height: 1044px; }
  .iframeContainer_2af iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }


/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_JTM {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2_w {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_Yy_ {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2tj {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_28u {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2Uf {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.item_1Ji {
  margin-bottom: 36px ; }
  .item_1Ji:after {
    content: "" !important;
    display: block !important;
    clear: both !important; }

.date_3Mo {
  color: var(--color-body-grey);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  margin-bottom: 0;
  font-weight: bold; }

.heading_2Qc {
  color: var(--color-blue-iss);
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  padding-bottom: 6px;
  margin-bottom: 0;
  letter-spacing: -0.21px; }

.teaser_1pd {
  margin-bottom: 12px ; }

.image_gRi {
  width: 100%;
  margin-bottom: 12px ; }
  @media (min-width: 46.25em) {
    .image_gRi {
      margin-top: 10px;
      float: right;
      max-width: 184px; } }

.content_VCa {
  padding-top: 6px; }
  @media (min-width: 46.25em) {
    .image_gRi + .content_VCa {
      display: inline-block;
      width: calc(100% - 184px);
      padding-right: 24px ; } }
  @media (min-width: 81.25em) {
    .image_gRi + .content_VCa {
      padding-right: 48px ; } }

.link_hXR {
  clear: both; }
  .link_hXR a, .link_hXR a:visited {
    color: var(--color-link-secondary);
    text-decoration: underline; }
  .link_hXR a:hover {
    color: var(--color-link-secondary-focus); }

@media (min-width: 81.25em) {
  .columnLayout_Yss {
    display: flex; } }

@media (min-width: 81.25em) {
  .columnLayout_Yss .content_VCa {
    margin-right: 100px; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_QGa {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_56- {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3ZI {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1FF {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_27q {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_LgG {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.list_3F3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; }
  .list_3F3,
  .list_3F3 li {
    list-style: none; }
  .list_3F3,
  .list_3F3 > li {
    margin-left: 0; }
  .list_3F3 li {
    width: 100%; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1C3 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1fF {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_Db6 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_2W9 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_3k7 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2wU {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.filters_1eO {
  display: flex;
  flex-direction: column; }
  @media (min-width: 35.5em) {
    .filters_1eO {
      flex-direction: row;
      flex-wrap: wrap; }
      .filters_1eO > div {
        flex: 0 1 50%;
        padding-right: 24px ; } }
  @media (min-width: 61.25em) {
    .filters_1eO {
      flex-wrap: nowrap; }
      .filters_1eO > div {
        flex: 0 1 25%;
        max-width: 240px; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1O9 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2RS {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2ed {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1Ea {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_203 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_aHU {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.left_2KG {
  min-height: 336px ;
  min-width: 180px ; }

.center_194 {
  max-width: 40.5rem;
  margin: 0 auto;
  width: 100%;
  opacity: 0;
  animation: fade-in-up_2RS 0.4s forwards;
  animation-delay: 1s; }

@media (min-width: 61.25em) {
  .centerGrid_2Si {
    display: flex;
    flex-direction: row; }
  .left_2KG {
    width: calc((100% - 40.5rem) / 2);
    margin-right: 24px ; } }

.loadmore_1v0 {
  text-align: center; }
  .loadmore_1v0 button:focus {
    outline: none; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2lp {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3_p {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1pV {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1dt {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1fk {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3-P {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.item_1R4 {
  margin-bottom: 36px ;
  display: flex; }
  .item_1R4:after {
    content: "" !important;
    display: block !important;
    clear: both !important; }
  .item_1R4 > div {
    flex: 0 0 33%; }

.heading_UVb {
  color: var(--color-blue-iss);
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  padding-bottom: 6px;
  margin-bottom: 0;
  letter-spacing: -0.21px; }

.content_2mf {
  padding-top: 6px; }
  @media (min-width: 46.25em) {
    .image_33H + .content_2mf {
      display: inline-block;
      width: calc(100% - 184px);
      padding-right: 24px ; } }
  @media (min-width: 81.25em) {
    .image_33H + .content_2mf {
      padding-right: 48px ;
      /*margin-right: 100px;*/ } }

.link_3ox {
  clear: both; }
  .link_3ox a, .link_3ox a:visited {
    color: var(--color-link-secondary);
    text-decoration: underline; }
  .link_3ox a:hover {
    color: var(--color-link-secondary-focus); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_Z_8 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1lP {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_zeP {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_8TC {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1nA {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1Wu {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.list_3OH {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; }
  .list_3OH,
  .list_3OH li {
    list-style: none; }
  .list_3OH,
  .list_3OH > li {
    margin-left: 0; }
  .list_3OH li {
    width: 100%; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_2gR {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1Jy {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3YH {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_wGi {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_Aiz {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_1BD {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.left_15T {
  min-height: 336px ;
  min-width: 180px ; }

.center_2mZ {
  margin: 0 auto;
  width: 100%;
  opacity: 0;
  animation: fade-in-up_1Jy 0.4s forwards;
  animation-delay: 1s; }

@media (min-width: 61.25em) {
  .centerGrid_lvp {
    display: flex;
    flex-direction: row;
    text-align: center; }
  .left_15T {
    width: calc((100% - 40.5rem) / 2);
    margin-right: 24px ; } }

.loadmore_1o0 {
  text-align: center; }
  .loadmore_1o0 button:focus {
    outline: none; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_35d {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_1OO {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_20I {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_23- {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2Wb {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2Qx {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.iframeContainer_y_x {
  position: relative;
  display: flex;
  min-height: 500px;
  min-width: 100%;
  transition: all .2s linear; }
  .iframeContainer_y_x iframe {
    width: 100%; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_31q {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3j7 {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2mV {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_lc8 {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1H2 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2b1 {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.panelCtaContainer_1yd {
  background: var(--color-bg-panels);
  color: white;
  padding: 72px 0px ; }

.panelCtaSimple_1ux {
  opacity: 0;
  animation: fade-in-up_3j7 0.4s forwards;
  animation-delay: 1s; }

.headerTeaser_1tn {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.21px;
  font-size: 1rem;
  margin-bottom: 36px ; }

.headerLabel_2Ye {
  margin-bottom: 0; }

.iframeSection_wqs {
  position: relative;
  margin-top: 36px ; }

.iframeContainer_1s1 {
  position: relative;
  background-color: white;
  min-height: 400px;
  min-width: 50%;
  max-height: 80%;
  max-width: 80%;
  transition: all .2s linear; }
  .iframeContainer_1s1 iframe {
    width: 100%;
    height: 100%; }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_36a {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_2ja {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1c1 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1ZZ {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_EZo {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_2dR {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

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

.sortOrderDesc_1kZ {
  transform: rotate(180deg); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1AG {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_uAj {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_3Nr {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1SN {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2YI {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_zYJ {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.filters_3Si {
  display: flex;
  flex-direction: column; }
  @media (min-width: 35.5em) {
    .filters_3Si {
      flex-direction: row;
      flex-wrap: wrap; }
      .filters_3Si > div {
        flex: 0 1 50%;
        padding-right: 24px ; } }
  @media (min-width: 61.25em) {
    .filters_3Si {
      flex-wrap: nowrap; }
      .filters_3Si > div {
        flex: 0 1 25%;
        max-width: 240px; } }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_3gn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_3g- {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_2wk {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_D4E {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_2ZQ {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_5aY {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.advTable_2oW .MuiTableSortLabel-icon {
  display: none; }

@media (max-width: 46.24em) {
  .advTable_2oW table {
    width: 100%; }
  .advTable_2oW table,
  .advTable_2oW thead,
  .advTable_2oW tbody,
  .advTable_2oW tr,
  .advTable_2oW th,
  .advTable_2oW td {
    display: block; }
  .advTable_2oW .MuiTableCell-body {
    font-size: 12px;
    padding-top: 12px ;
    padding-bottom: 12px ; }
  .advTable_2oW tr > td,
  .advTable_2oW tr > th {
    display: inline-block;
    width: 25%; }
  .advTable_2oW tr > td {
    border: none; }
    .advTable_2oW tr > td:last-child {
      display: block;
      width: 100%;
      border-top: 1px solid #e0e0e0; }
  .advTable_2oW tr > th:last-child {
    display: none; } }

.table_1uj {
  position: relative; }

.spinner__aV {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 48px;
  width: 50px;
  height: 50px;
  color: var(--color-blue-azure); }

.links_2h6 > * + * {
  display: inline-block;
  margin-left: 12px ;
  vertical-align: middle; }

.links_2h6 a {
  vertical-align: middle;
  margin-left: 12px ; }
  .links_2h6 a, .links_2h6 a:visited {
    color: var(--color-link-secondary);
    text-decoration: underline; }
  .links_2h6 a:hover {
    color: var(--color-link-secondary-focus); }

/**

BREAKPOINT
mq (media query) taken from node_module :
@import "../../node_modules/sass-mq/mq";
Go to that file for deeper documentation!

TLDR:

usage from docs:
/// @example scss
///  .element {
///    @include mq($from: mobile) {
///      color: red;
///    }
///    @include mq($until: tablet) {
///      color: blue;
///    }
///    @include mq(mobile, tablet) {
///      color: green;
///    }
///    @include mq($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include mq(950px) {
///      color: hotpink;
///    }
///    @include mq(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///    // Advanced use:
///    $my-breakpoints: (L: 900px, XL: 1200px);
///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
///      color: hotpink;
///    }
///  }


BEWARE
in this project mq is renamed in alias to "mix-break", use like
@include mix-break(props)


SO, ... most uses:


include mix-break(tablet) { // from tablet up

include mix-break(tablet, desktop) // between tablet and desktop

include mix-break($until: desktop) // desktop and down




*/
/**
  A BLOCK CENTERED
  assumes that element is display: block, and has some width defined
*/
/**
  remove margins on children (direct) inside element/container

  defaults to select P tags.
  To override this and use a * star selector, use mixin with
  an argument, eg, true, or '*'

*/
/**

  Sections are used for separating content-areas/blocks down a page
  MIXIN CAN BE USED ALSO INSIDE COMPONENTS.

  a section has 100% width allowing wall to wall background colors/images or video
  the wrapper sets the content width
  the box is optional (applies padding)

  a typical html structure would thus be:

  <div class="o-section">
        <div class="o-wrapper">
          <div class="o-box">
            Lorem ipsum dolor sit amet
          </div>
        </div>
    </div>

 */
@keyframes fade-in_1Js {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-up_13o {
  0% {
    opacity: 0;
    transform: translateY(12px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down-in_1K1 {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }

@keyframes slide-in-from-left_1jq {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes slide-out-from-right_1os {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes fade-in-grow_3-u {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

.wrapper_3Ji {
  position: relative;
  width: 100%; }
  @media (min-width: 46.25em) {
    .wrapper_3Ji {
      overflow-x: hidden; } }

.container_2QR {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column; }
  @media (max-width: 46.24em) {
    .container_2QR {
      padding-top: 96px; } }
  @media (min-width: 46.25em) {
    .container_2QR {
      flex-direction: row; }
      .container_2QR > div {
        padding-top: 96px;
        flex: 1 0 50%; } }

.infoSection_c6P {
  display: flex;
  justify-content: flex-end; }

.infoContainer_Zyf {
  max-width: 576px ;
  padding: 0px 24px 48px 24px ;
  padding: 36px 24px 48px 24px ; }

.header_woU {
  line-height: 1.14; }

.formSection_17i {
  position: relative; }

.bgImage_1ZW img {
  position: absolute;
  z-index: 0;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;
  opacity: 0;
  animation: fade-in_1Js 0.4s forwards;
  animation-delay: 1s;
  object-fit: cover;
  font-family: "object-fit: cover"; }
  @media (min-width: 46.25em) {
    .bgImage_1ZW img {
      top: 0;
      left: 20%;
      width: 80%;
      height: 100%; } }
  @media (min-width: 81.25em) {
    .bgImage_1ZW img {
      left: 128px;
      width: calc(100% - 128px); } }

.formContainer_2Xi {
  background: white;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 10px 0 rgba(var(--color-black-almost-rgba), 0.1);
  padding: 24px ;
  margin: 0px 24px ;
  opacity: 0;
  animation: fade-in-up_13o 0.4s forwards;
  animation-delay: 3s; }
  @media (min-width: 46.25em) {
    .formContainer_2Xi {
      max-width: 576px ; } }

.formContainerInner_1RU {
  min-height: 400px;
  transition: all 0.4s;
  position: relative; }

.theForm_dtQ {
  transition: opacity 0.4s, transform 0.6s; }
  .isSubmitted_3ok .theForm_dtQ {
    opacity: 0;
    pointer-events: none;
    transform: scale(0); }
  .theForm_dtQ [class*="heading"] {
    font-size: 22px;
    font-weight: 500;
    line-height: 0.91;
    margin-left: -1px;
    letter-spacing: -0.24px;
    margin-bottom: 24px;
    text-align: center; }
  .theForm_dtQ button[type=submit] {
    margin: 24px  auto;
    display: block;
    min-width: 230px !important;
    height: 60px ;
    justify-content: center !important; }

.feedback_2s0 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 24px ;
  text-align: center; }
  .feedback_2s0 > div {
    opacity: 0;
    animation: fade-in-grow_3-u 0.4s forwards;
    animation-delay: 0ms; }

.icon_3V3 {
  width: 48px ;
  margin-bottom: 36px ; }

.iframeContainer_1CX {
  position: relative;
  display: flex;
  min-height: 500px;
  min-width: 100%;
  transition: all .2s linear; }
  .iframeContainer_1CX iframe {
    width: 100%; }

.iframeXpMode_3xv {
  text-align: center; }