/*-- normalise across browsers --*/ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

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

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

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

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

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * components
 */
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Regular.woff2") format("woff2"), url("./fonts/Montserrat-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Medium.woff2") format("woff2"), url("./fonts/Montserrat-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-SemiBold.woff2") format("woff2"), url("./fonts/Montserrat-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/OpenSans-Light.woff2") format("woff2"), url("./fonts/OpenSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/OpenSans-LightItalic.woff2") format("woff2"), url("./fonts/OpenSans-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/OpenSans-Regular.woff2") format("woff2"), url("./fonts/OpenSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/OpenSans-Italic.woff2") format("woff2"), url("./fonts/OpenSans-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/OpenSans-SemiBold.woff2") format("woff2"), url("./fonts/OpenSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/OpenSans-SemiBoldItalic.woff2") format("woff2"), url("./fonts/OpenSans-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/**--- variables ---**/
:root {
  --color-text: #333333;
  --color-dark: #220C43;
  --color-white: #FFFFFF;
  --color-light: #F4F3F6;
  --color-gray: #E8E6EC;
  --color-gray-2: #9587A9;
  --color-focus: #5021FF;
  --color-accent: #5821AB;
  --color-primary-1: #220C43; /* dark purple */
  --color-primary-2: #EC008C; /* magenta */
  --color-primary-3: #474C55; /* dark-gray */
  --color-secondary-1: #0077C8; /* cian */
  --color-secondary-2: #00B0B9; /* turquesa */
  --color-secondary-3: #C4D600; /* lime-green */
  --color-secondary-4: #FCED00; /* yellow */
  --color-secondary-5: #FF8200; /* Orange */
  /*-- alpha colours --*/
  --color-alpha-light: #F4F3F699;
  --color-alpha-dark: #22222299;
  --color-alpha-primary-1: #220C4399;
  --color-alpha-primary-2: #EC008C99;
  --color-alpha-primary-3: #474C5599;
  --color-alpha-secondary-1: #0077C899;
  --color-alpha-secondary-2: #00B0B999;
  --color-alpha-secondary-3: #C4D60099;
  --color-alpha-secondary-4: #FCED0099;
  --color-alpha-secondary-5: #FF820099;
  --disabled-opacity: 0.35;
  /**-- special color cases --*/
  --color-primary-1-lighter-90: #E9E7ED;
  --ratio: 1.414;
  --ratio-headers: 1.25;
  --ratio-flow: 1.5;
  /* @link https://utopia.fyi/space/calculator?c=320,16,1.25,2600,19,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6|8|12|16|24,4xl-6xl|4xl-5xl&g=s,l,xl,12 */
  --space-3xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
  --space-2xs: clamp(0.25rem, calc(0.24rem + 0.04vw), 0.31rem);
  --space-xs: clamp(0.50rem, calc(0.48rem + 0.09vw), 0.63rem);
  --space-s: clamp(0.75rem, calc(0.73rem + 0.09vw), 0.88rem);
  --space-base: clamp(1.00rem, calc(0.97rem + 0.13vw), 1.19rem);
  --space-m: clamp(1.50rem, calc(1.46rem + 0.22vw), 1.81rem);
  --space-l: clamp(2.00rem, calc(1.95rem + 0.26vw), 2.38rem);
  --space-xl: clamp(3.00rem, calc(2.92rem + 0.39vw), 3.56rem);
  --space-2xl: clamp(4.00rem, calc(3.89rem + 0.53vw), 4.75rem);
  --space-3xl: clamp(6.00rem, calc(5.84rem + 0.79vw), 7.13rem);
  --space-4xl: clamp(8.00rem, calc(7.79rem + 1.05vw), 9.50rem);
  --space-5xl: clamp(12.00rem, calc(11.68rem + 1.58vw), 14.25rem);
  --space-6xl: clamp(16.00rem, calc(15.58rem + 2.11vw), 19.00rem);
  --space-7xl: clamp(24.00rem, calc(23.37rem + 3.16vw), 28.50rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.13rem, calc(0.10rem + 0.13vw), 0.31rem);
  --space-2xs-xs: clamp(0.25rem, calc(0.20rem + 0.26vw), 0.63rem);
  --space-xs-s: clamp(0.50rem, calc(0.45rem + 0.26vw), 0.88rem);
  --space-s-base: clamp(0.75rem, calc(0.69rem + 0.31vw), 1.19rem);
  --space-base-m: clamp(1.00rem, calc(0.89rem + 0.57vw), 1.81rem);
  --space-m-l: clamp(1.50rem, calc(1.38rem + 0.61vw), 2.38rem);
  --space-l-xl: clamp(2.00rem, calc(1.78rem + 1.10vw), 3.56rem);
  --space-xl-2xl: clamp(3.00rem, calc(2.75rem + 1.23vw), 4.75rem);
  --space-2xl-3xl: clamp(4.00rem, calc(3.56rem + 2.19vw), 7.13rem);
  --space-3xl-4xl: clamp(6.00rem, calc(5.51rem + 2.46vw), 9.50rem);
  --space-4xl-5xl: clamp(8.00rem, calc(7.12rem + 4.39vw), 14.25rem);
  --space-5xl-6xl: clamp(12.00rem, calc(11.02rem + 4.91vw), 19.00rem);
  --space-6xl-7xl: clamp(16.00rem, calc(14.25rem + 8.77vw), 28.50rem);
  --space-logo: clamp(7.5rem, calc(6.15rem + 3.25vw), 12rem);
  /* Custom pairs */
  --space-4xl-6xl: clamp(8.00rem, calc(6.46rem + 7.72vw), 19.00rem);
  /* @link https://utopia.fyi/type/calculator?c=800,17,1.2,2560,21,1.333,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* @link https://utopia.fyi/type/calculator?c=800,17,1.2,2560,22,1.333,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --font-size-s: clamp(0.8856rem, 0.8194rem + 0.1324vw, 1.0313rem);
  --font-size-base: clamp(1.0625rem, 0.9205rem + 0.2841vw, 1.375rem);
  --font-size-m: clamp(1.275rem, 1.0213rem + 0.5074vw, 1.8331rem);
  --font-size-l: clamp(1.53rem, 1.1149rem + 0.8301vw, 2.4431rem);
  --font-size-xl: clamp(1.8363rem, 1.1905rem + 1.2915vw, 3.2569rem);
  --font-size-2xl: clamp(2.2031rem, 1.2313rem + 1.9438vw, 4.3412rem);
  --font-size-3xl: clamp(2.6438rem, 1.2151rem + 2.8574vw, 5.7869rem);
  /*-- buttons have slightly smaller font size --*/
  --font-size-controls: inherit;
  --measure: 68ch;
  --threshold: var(--measure);
  --threshold-2x: calc(var(--measure) * 2);
  --font-plain: "Open Sans","Helvetica Neue","Helvetica","Arial","sans-serif";
  --font-special: "Montserrat", "Helvetica Neue","Helvetica","Arial","sans-serif";
  --font-mono: "Menlo", "Courier", "Courier New", "Andale Mono", "monospace";
  --gutter: var(--space-m);
  --wrapper-width: clamp(250px,90%,115rem);
  --wrapper-reader-width: clamp(16rem,45vw,80rem);
  --sidebar-width: 16rem;
  --grid-cell-width: 16rem;
  --item-width: 16rem;
  --nav-item-width: content;
  --border-width-none: 0;
  --border-width-s: calc(1rem / 16);
  --border-width-base: calc(1rem / 8);
  --border-width-m: calc(1rem / 4);
  --border-width-l: calc(1rem / 2);
  --border-width-xl: calc(1rem);
  --border-radius: calc(1rem / 4);
  --border-width-0: 0;
  --border-width-1: var(--border-width-s);
  --border-width-2: var(--border-width-base);
  --border-width-3: var(--border-width-m);
  --border-width-4: var(--border-width-l);
  --border-width-5: var(--border-width-xl);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-movement-slow: 600ms linear;
  --transition-fade: 300ms ease;
  --transition-fade-slow: 700ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --transition-bounce-slow: 1000ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  /*-- medium is the default size of the cover component --*/
  --cover-min-height: 60vh;
  font-size: 100%;
}

/**
* 
* Base styles: Core elements
* TODO: Add information about this file
*
*/
*, ::after, ::before {
  /*background-color: inherit;*/
  border: 0 solid;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  margin: 0;
  overflow-wrap: break-word;
  padding: 0;
}

/*-- global -- */
body {
  background-color: var(--color-light);
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
  font-family: var(--font-plain);
  font-size: var(--font-size-base);
  line-height: var(--ratio);
  min-height: 100vh;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/*
* {
  max-inline-size: var(--measure);
}
*/
/*--- exception to the above definitions ----*/
html,
body,
div,
header,
nav,
main,
article,
section,
ul,
pre,
footer,
iframe {
  max-inline-size: none;
}

/* 
 * Reset margins of these elements
 * Visual space is achieve with the `.flow` class
 * defined in the typo section
 *
 */
blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
  margin: 0;
}

/*--- global Links ----*/
a {
  text-decoration-thickness: var(--border-width-1);
  text-underline-offset: 0.215em;
}
a:hover {
  cursor: pointer;
}
a:active {
  text-underline-offset: 0.2em;
}

[hidden], .is-hidden {
  display: none;
}

[hidden] + *, .is-hidden + * {
  margin-top: 0 !important;
}

main {
  flex: auto;
  min-height: 50vh;
  padding-bottom: var(--space-xl);
}

main > * + * {
  margin-top: var(--space-l);
}

/*--- restain content ---*/
footer > *,
main > *,
header > *,
.wrapper {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: var(--wrapper-width);
}

/**--- helper to remove the wrapper constrain ---*/
main > .width\:full {
  width: 100%;
}

.wrapper-reader-view {
  width: auto;
  margin-left: 20vw;
  margin-right: 20vw;
}

.skip-link {
  display: inline-block;
  padding: var(--space-base);
  color: var(--color-dark);
  background-color: var(--color-secondary-5);
  position: absolute;
  top: -10rem;
}

.skip-link:focus-visible {
  position: absolute;
  z-index: 1;
  top: 0;
  outline: none;
}

:focus-visible {
  --outline-size: max(2px, var(--border-width-1));
  outline: var(--outline-size) solid currentColor;
  outline-offset: calc(var(--border-width-1) * 1.5);
}

main :focus-visible:not([data-theme=dark]) {
  outline-color: var(--color-focus);
}

/*-- fallback for older Edge --*/
@supports not (selector(:focus-visible) ) {
  :focus {
    outline: none;
    box-shadow: 0px 0px 0px var(--border-width-1);
  }
}
/*-- global responsive images and video --*/
img, video {
  min-width: auto;
}

pre,
code {
  background: var(--color-white);
  color: var(--color-text);
}

pre {
  border: var(--border-width-1) solid var(--color-gray);
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  padding: var(--space-xs);
}

/**
.skip-link {
    left: var(--gutter);
    position: absolute;
    top: var(--gutter);
    z-index: 99
}

.skip-link:not(:focus) {
    clip: rect(0 0 0 0);
    border: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}
*/
.flow > * + * {
  margin-top: var(--space-m);
}

.flow {
  line-height: var(--ratio-flow);
}

.flow[data-space="2xs"] > * + * {
  margin-top: var(--space-2xs);
}

.flow[data-space=xs] > * + * {
  margin-top: var(--space-xs);
}

.flow[data-space=s] > * + * {
  margin-top: var(--space-s);
}

.flow[data-space=m] > * + * {
  margin-top: var(--space-m);
}

.flow[data-space=l] > * + * {
  margin-top: var(--space-l);
}

.flow[data-space=xl] > * + * {
  margin-top: var(--space-xl);
}

.flow[data-space="2xl"] > * + * {
  margin-top: var(--space-2xl);
}

.flow[data-space="3xl"] > * + * {
  margin-top: var(--space-2xl);
}

.flow :is(ol, ul) {
  padding-inline-start: var(--space-l);
}

.flow ol li::marker {
  color: var(--color-primary-2);
}

.flow li + li {
  margin-top: var(--space-s);
}

.flow :is(pre, pre + *, figure, figure + *, h2, h3, h4) {
  margin-top: var(--space-xl);
}

.flow h1 + * {
  margin-top: var(--space-s);
}

.flow :is(h2 + *, h3 + *, h4 + *) {
  margin-top: var(--space-m);
}

/*--- Stack ---*/
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + *:not(h2, h3, h4, h5) {
  margin-block-start: var(--space-base);
}

.stack > * + *:is(h2, h3, h4, h5) {
  margin-block-start: var(--space-l);
}

.stack\:centered {
  block-size: 100%;
}

.stack[data-space=l] > * + * {
  margin-block-start: var(--space-l);
}

.stack[data-space=xl] > * + * {
  margin-block-start: var(--space-xl);
}

.stack[data-space="2xl"] > * + * {
  margin-block-start: var(--space-2xl);
}

.stack[data-space="3xl"] > * + * {
  margin-block-start: var(--space-3xl);
}

.stack[data-space=s] > * + * {
  margin-block-start: var(--space-s);
}

/*---- BOX ---*/
.box {
  padding: var(--space-base);
  border: var(--border-width-base) solid;
  color: inherit;
  background-color: inherit;
}

.box * {
  color: inherit;
}

.box.invert {
  color: var(--color-light);
  background-color: var(--color-dark);
}

/**--- add some margin to elements inside a box--*/
.box > * + *:not(h2, h3, h4, h5) {
  margin-top: var(--space-base);
}

.box > * + *:is(h2, h3, h4, h5) {
  margin-top: var(--space-l);
}

.frame + .box {
  margin-top: 0;
}

/*--- Icon ---*/
.icon {
  width: var(--space-base);
  height: var(--space-base);
}

.with-icon {
  display: flex;
  align-items: center;
}

.with-icon .icon {
  margin-inline-end: var(--space-s);
}

.with-icon[data-size=s] .icon {
  width: var(--space-s);
  height: var(--space-s);
}

.with-icon[data-size=m] .icon {
  width: var(--space-m);
  height: var(--space-m);
}

.with-icon[data-size=l] .icon {
  width: var(--space-l);
  height: var(--space-l);
}

.with-icon[data-size=xl] .icon {
  width: var(--space-xl);
  height: var(--space-xl);
}

.with-icon[data-size="2xl"] .icon {
  width: var(--space-2xl);
  height: var(--space-2xl);
}

.with-icon[data-side=right] .icon {
  margin-inline-end: initial;
  margin-inline-start: var(--space-s);
}

.with-icon[data-space=xs] .icon {
  margin-inline-end: var(--space-xs);
}

.with-icon[data-space="2xs"] .icon {
  margin-inline-end: var(--space-2xs);
}

.with-icon[data-space="3xs"] .icon {
  margin-inline-end: var(--space-3xs);
}

/*--- Cluster ---*/
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: flex-start;
  align-items: center;
}

/* see helpers to manipulate the gap */
/**--- centering ---*/
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
}

/*
.center:not(h1, h2, h3, h4) {
    max-inline-size: var(--measure);
}
*/
.intrinsic, [data-intrinsic=true] {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/** 
* Note: 
* Use utility "text-align:center" class to center text.
* It is defined in the `helpers.scss` file 
*/
/*--- Cover ----*/
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min-height);
  padding: var(--space-m);
}

.cover > :first-child:not(.centered):not(.pushed) {
  margin-block-start: 0;
}

.cover > :last-child:not(.centered):not(.pushed) {
  margin-block-end: 0;
}

.cover > :only-child {
  margin-block: auto;
}

/*-- positioning ---*/
.cover > .centered {
  margin-block: auto;
}
@supports not (margin-block: auto) {
  .cover > .centered {
    transform: translateY(50%);
  }
}

.cover > .pushed {
  margin-block: initial;
  margin-top: auto;
}

.cover[data-height=small] {
  --cover-min-height: 30vh;
}

.cover[data-height=medium] {
  --cover-min-height: 60vh;
}

/*-- default ---*/
.cover[data-height=large] {
  --cover-min-height: 90vh;
}

/*--- Frame ---*/
/*
*-- Default aspect-ratio is 16:9 ---*/
.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n)/var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*--- utility: modify the aspect ratio of an image or video ----*/
[data-ratio="4:3"] {
  --n: 4;
  --d: 3;
}

/*--- Sidebar ---*/
/* The default state is for the sidebar to be on the left
 * and for it to have a specific width of 16rem
 */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.with-sidebar > * {
  flex-grow: 1;
  max-inline-size: initial;
}

.with-sidebar > :first-child {
  flex-basis: var(--sidebar-width);
  flex-grow: 1;
}

.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/*
 * 
 * --- shift the focus of the sidebar
 *
 */
.with-sidebar[data-side=right] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.with-sidebar[data-side=right] > :last-child {
  flex-grow: 1;
  flex-basis: var(--sidebar-width);
  min-inline-size: initial;
}

.with-sidebar > :first-child > img, .with-sidebar[data-side=right] > :last-child > img {
  display: block;
}

/*
 * Utitlity classes: these modidy the sidebar
 * 
 */
/* --- 
 * modify the size of the side bar allowing two sizes 
 * s, m, l.  The default is 's' (small)
 * --
 */
.with-sidebar[data-width=m] > :first-child,
.with-sidebar[data-side=right][data-width=m] > :last-child {
  --sidebar-width: 24rem;
}

.with-sidebar[data-width=l] > :first-child,
.with-sidebar[data-side=right][data-width=l] > :last-child {
  --sidebar-width: 32rem;
}

/* -- Let the side bar adjust to its contents size --*/
.with-sidebar[data-sideWidth=auto] > :first-child,
.with-sidebar[data-side=right][data-sideWidth=auto] > :last-child {
  flex-basis: 0;
}

/* -- Remove the gap between the sidebar and content --*/
.with-sidebar[data-gap=none] {
  gap: 0;
}

/*
* NOTE: 
* The default is to have equal columns height
* This utility class sets it to unequal colums
* For example, if the sidebar is a button, this class
* would stop it from deforming it self
* 
* Use utility class .align-items defined in _helpers.scss
*/
/*--- Switcher ---*/
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

.reel {
  block-size: auto;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--color-light) var(--color-dark);
}

.reel > * {
  flex: 0 0 var(--item-width);
}

.reel > img {
  block-size: 100%;
  flex-basis: auto;
  inline-size: auto;
}

.reel::-webkit-scrollbar {
  -webkit-appearance: none;
}

.reel::-webkit-scrollbar {
  block-size: var(--space-base);
}

.reel::-webkit-scrollbar-track {
  background-color: var(--color-dark);
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--color-dark);
  background-image: linear-gradient(var(--color-dark) 0, var(--color-dark) 0.25rem, var(--color-light) 0.25rem, var(--color-light) 0.75rem, var(--color-dark) 0.75rem);
}

/*--- Grid --*/
.grid {
  display: grid;
  gap: var(--space-base);
}

@supports (width: min(var(--grid-cell-width), 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-cell-width), 100%), 1fr));
  }
}
.imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.imposter.contain {
  --margin: 0px;
  overflow: auto;
  max-inline-size: calc(100% - var(--margin) * 2);
  max-block-size: calc(100% - var(--margin) * 2);
}

.card {
  display: flex;
  flex-flow: column;
  position: relative;
}

.card :is(h2, h3, h4) > a {
  text-decoration: none;
}

/**
* The third box is the call to action!
*/
.card .box:nth-child(3) {
  margin-block-start: auto;
}

.card .box:only-child {
  block-size: 100%;
}

.card :is(h2, h3, h4) a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: initial;
}

.card:focus-within, .card :is(h2, h3, h4) a:hover::after {
  box-shadow: 0 0 0 var(--border-width-2) var(--color-primary-2);
  cursor: pointer;
}

.card:focus-within :is(h2, h3, h4) > a, .card:hover :is(h2, h3, h4) > a {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-1);
  filter: none;
}

.card .frame img {
  transition: all 0.2s;
}

.card:focus-within .frame img, .card:hover .frame img {
  scale: 101%;
}

/**
 *
 * This file contains utility classes declarations
 * It's purpose is to modify and to be applied to individual elements
 * instead of grouped elements
 * emulates CSS declaration structure: property-name:value
 *
 */
.display\:block {
  display: block;
}

.filter\:invert {
  filter: invert(100%);
}

/**
 * --- Alignment helpers
 */
/*-- text --*/
.text-align\:center {
  text-align: center;
}

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

/*-- flex --*/
.align-items\:center {
  align-items: center;
}

.align-items\:flex-start {
  align-items: flex-start;
}

.align-items\:end {
  align-items: end;
}

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

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

.justify-content\:space-around {
  justify-content: space-around;
}

.justify-content\:space-evenly {
  justify-content: space-evenly;
}

.justify-content\:center {
  justify-content: center;
}

.justify-content\:start {
  justify-content: start;
}

.justify-content\:end {
  justify-content: end;
}

.position\:relative {
  position: relative;
}

/*
* grid and layout (if supported)
*/
[data-gap=none] {
  gap: 0;
}

[data-gap="3xs"] {
  gap: var(--space-3xs);
}

[data-gap="2xs"] {
  gap: var(--space-2xs);
}

[data-gap=xs] {
  gap: var(--space-xs);
}

[data-gap=s] {
  gap: var(--space-s);
}

[data-gap=base] {
  gap: var(--space-base);
}

[data-gap=m] {
  gap: var(--space-m);
}

[data-gap=l] {
  gap: var(--space-l);
}

[data-gap=xl] {
  gap: var(--space-xl);
}

[data-gap="2xl"] {
  gap: var(--space-2xl);
}

[data-gap="3xl"] {
  gap: var(--space-3xl);
}

[data-gap="4xl"] {
  gap: var(--space-4xl);
}

/**
 * Paddings...
 */
[data-padding=none],
.padding\:none {
  padding: 0;
}

[data-padding="3xs"],
.padding\:3xs {
  padding: var(--space-3xs);
}

[data-padding="2xs"],
.padding\:2xs {
  padding: var(--space-2xs);
}

[data-padding=xs],
.padding\:xs {
  padding: var(--space-xs);
}

[data-padding=s],
.padding\:s {
  padding: var(--space-s);
}

[data-padding=base],
.padding\:base {
  padding: var(--space-base);
}

[data-padding=m],
.padding\:m {
  padding: var(--space-m);
}

[data-padding=l],
.padding\:l {
  padding: var(--space-l);
}

[data-padding=xl],
.padding\:xl {
  padding: var(--space-xl);
}

[data-padding="2xl"],
.padding\:2xl {
  padding: var(--space-2xl);
}

[data-padding="3xl"],
.padding\:3xl {
  padding: var(--space-3xl);
}

[data-padding="4xl"],
.padding\:4xl {
  padding: var(--space-4xl);
}

/*
 *  --- Font size helpers
 */
.font-family\:special {
  font-family: var(--font-special);
}

.font-size\:s {
  font-size: var(--font-size-s);
}

.font-size\:xs {
  font-size: var(--font-size-xs);
}

.font-size\:2xs {
  font-size: var(--font-size-2xs);
}

.font-size\:base {
  font-size: var(--font-size-base);
}

.font-size\:m {
  font-size: var(--font-size-m);
}

.font-size\:l {
  font-size: var(--font-size-l);
}

.font-size\:xl {
  font-size: var(--font-size-xl);
}

.font-size\:2xl {
  font-size: var(--font-size-2xl);
}

.height\:100\% {
  height: 100%;
}

.measure\:none {
  max-inline-size: none;
}

.measure\:20 {
  max-inline-size: 20ch;
}

.measure\:40 {
  max-inline-size: 40ch;
}

.measure\:60 {
  max-inline-size: 60ch;
}

.measure\:80 {
  max-inline-size: 80ch;
}

.measure\:90 {
  max-inline-size: 90ch;
}

.font-weight\:700 {
  font-weight: 700;
}

.font-weight\:600 {
  font-weight: 600;
}

.font-weight\:500 {
  font-weight: 500;
}

.font-weight\:400 {
  font-weight: 400;
}

.text-transform\:uppercase, .uppercase {
  text-transform: uppercase;
}

.inline-size\:none {
  max-inline-size: none;
}

/*----colors----*/
/*--- foreground colors ---*/
.color\:white {
  color: white;
}

.color\:light {
  color: var(--color-light);
}

.color\:dark {
  color: var(--color-dark);
}

.color\:primary-1 {
  color: var(--color-primary-1);
}

.color\:primary-2 {
  color: var(--color-primary-2);
}

.color\:primary-3 {
  color: var(--color-primary-3);
}

/*--- background colors ---*/
.bg-color\:initial {
  background-color: initial;
}

.bg-color\:transparent {
  background-color: transparent;
}

.bg-color\:white {
  background-color: var(--color-white);
}

.bg-color\:light {
  background-color: var(--color-light);
}

.bg-color\:dark {
  background-color: var(--color-dark);
}

.bg-color\:gray {
  background-color: var(--color-gray);
}

.bg-color\:primary-1 {
  background-color: var(--color-primary-1);
}

.bg-color\:primary-2 {
  background-color: var(--color-primary-2);
}

.bg-color\:primary-3 {
  background-color: var(--color-primary-3);
}

.bg-color\:secondary-1 {
  background-color: var(--color-secondary-1);
}

.bg-color\:secondary-2 {
  background-color: var(--color-secondary-2);
}

.bg-color\:secondary-3 {
  background-color: var(--color-secondary-3);
}

.bg-color\:secondary-4 {
  background-color: var(--color-secondary-4);
}

.bg-color\:secondary-5 {
  background-color: var(--color-secondary-5);
}

/*--- Alpha background colors --*/
.bga-color\:light {
  background-color: var(--color-alpha-light);
}

.bga-color\:dark {
  background-color: var(--color-alpha-dark);
}

.bga-color\:primary-1 {
  background-color: var(--color-alpha-primary-1);
}

.bga-color\:primary-2 {
  background-color: var(--color-alpha-primary-2);
}

.bga-color\:primary-3 {
  background-color: var(--color-alpha-primary-3);
}

.bga-color\:secondary-1 {
  background-color: var(--color-alpha-secondary-1);
}

.bga-color\:secondary-2 {
  background-color: var(--color-alpha-secondary-2);
}

.bga-color\:secondary-3 {
  background-color: var(--color-alpha-secondary-3);
}

.bga-color\:secondary-4 {
  background-color: var(--color-alpha-secondary-4);
}

.bga-color\:secondary-5 {
  background-color: var(--color-alpha-secondary-5);
}

.border-color\:light {
  border-color: var(--color-light);
}

.border-color\:dark {
  border-color: var(--color-dark);
}

.border-color\:primary-1 {
  border-color: var(--color-primary-1);
}

.border-color\:primary-2 {
  border-color: var(--color-primary-2);
}

.border-color\:primary-3 {
  border-color: var(--color-primary-3);
}

[data-border-width="0"],
.border\:0 {
  border-width: 0;
}

[data-border-width=none],
.border\:none {
  border-width: 0;
}

[data-border-width="1"],
.border\:1 {
  border-width: var(--border-width-1);
}

[data-border-width="2"],
.border\:2 {
  border-width: var(--border-width-2);
}

[data-border-width=s],
.border\:s {
  border-width: var(--border-width-s);
}

[data-border-width=base],
.border\:base {
  border-width: var(--border-width-base);
}

[data-border-width=m],
.border\:m {
  border-width: var(--border-width-m);
}

[data-border-width=l],
.border\:l {
  border-width: var(--border-width-l);
}

/**
*
* Margins and paddings
*
*/
.margin-bottom\:none {
  margin-bottom: 0;
}

.margin-bottom\:s {
  margin-bottom: var(--space-s);
}

.margin-bottom\:m {
  margin-bottom: var(--space-m);
}

.margin-bottom\:l {
  margin-bottom: var(--space-l);
}

.margin-bottom\:xl {
  margin-bottom: var(--space-xl);
}

.margin-bottom\:2xl {
  margin-bottom: var(--space-2xl);
}

.margin-bottom\:3xl {
  margin-bottom: var(--space-3xl);
}

.margin-bottom\:4xl {
  margin-bottom: var(--space-4xl);
}

.margin-top\:none {
  margin-top: 0;
}

.margin-top\:s {
  margin-top: var(--space-s);
}

.margin-top\:m {
  margin-top: var(--space-m);
}

.margin-top\:l {
  margin-top: var(--space-l);
}

.margin-top\:xl {
  margin-top: var(--space-xl);
}

.margin-top\:2xl {
  margin-top: var(--space-2xl);
}

.margin-top\:3xl {
  margin-top: var(--space-3xl);
}

.margin-top\:4xl {
  margin-top: var(--space-4xl);
}

.margin-block\:s {
  margin-block: var(--space-s);
}

.margin-block\:base {
  margin-block: var(--space-base);
}

.margin-block\:m {
  margin-block: var(--space-m);
}

.margin-block\:l {
  margin-block: var(--space-l);
}

.margin-block\:xl {
  margin-block: var(--space-xl);
}

.margin-block\:2xl {
  margin-block: var(--space-2xl);
}

.margin-block\:3xl {
  margin-block: var(--space-3xl);
}

.margin-block\:4xl {
  margin-block: var(--space-4xl);
}

.padding-block\:m {
  padding-block: var(--space-m);
}
@supports not (padding-block: var(--space-m)) {
  .padding-block\:m {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }
}

.padding-block\:l {
  padding-block: var(--space-l);
}
@supports not (padding-block: var(--space-l)) {
  .padding-block\:l {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
  }
}

.padding-block\:xl {
  padding-block: var(--space-xl);
}
@supports not (padding-block: var(--space-xl)) {
  .padding-block\:xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

.padding-block\:2xl {
  padding-block: var(--space-2xl);
}
@supports not (padding-block: var(--space-2xl)) {
  .padding-block\:2xl {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
}

.center[data-threshold="2x"],
.center.threshold\:2x {
  --measure: var(--threshold-2x);
}

th, td {
  border: var(--border-width-1) solid var(--color-primary-1); padding: 0.7em !important; 
}

table {
  border: var(--border-width-2) solid var(--color-primary-1);
  border-collapse: collapse;
  display: table;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  table-layout: initial;
  text-align: left;
}

th, td {
  padding: var(--space-base);
}

thead {
  background-color: var(--color-primary-1-lighter-90);
  font-weight: 600;
  font-family: var(--font-special);
  font-size: var(--font-size-m);
  text-transform: uppercase;
}

tr:nth-child(even) {
  background-color: #FFFFFF;
}

tr:nth-child(odd) {
  background-color: var(--color-light);
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-weight: 400;
}

code {
  word-wrap: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--color-primary-shade);
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-break: normal;
  word-spacing: normal;
}

/*--- heading appearance ---*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-special);
  font-weight: 600;
}

/*-- heading sizes --*/
h1 {
  font-size: var(--font-size-2xl);
  line-height: 1.125;
}

h2 {
  font-size: var(--font-size-xl);
  line-height: 1.225;
}

h3 {
  font-size: var(--font-size-l);
  line-height: 1.325;
}

h4 {
  font-size: var(--font-size-m);
  line-height: 1.425;
}

h5 {
  font-size: var(--font-size-base);
}

h6 {
  font-size: var(--font-size-s);
}

/**--- control the width of the headings in heroes ---**/
.hero h1 {
  max-inline-size: calc(var(--measure) * 0.34);
}

.hero h2 {
  max-inline-size: calc(var(--measure) * 0.42);
}

.hero h3 {
  max-inline-size: calc(var(--measure) * 0.6);
}

/*--- elements in the body ---*/
/*
* main p,
* main li,
* main label,
* main dt,
* main dd,
* main td,
* main th {
*     font-size: var(--font-size-base);
* }
* */
h3 {
  max-inline-size: calc(var(--measure) * 0.75);
}

/** --- special cases: Smaller sizes for these elements  ----*/
.breadcrumb + :is(h1, h2, h3) {
  margin-top: var(--space-3xl);
}

h1 + :is(h2, h3, h4, p) {
  margin-top: var(--space-l);
}

.hero h1 + :is(h2, h3, h4, p) {
  margin-top: var(--space-m);
}

.intro,
.light,
.weight\:light {
  font-weight: 300;
}

/* 
 * Header styles
 * Cosmetic definitions; see _base.scss for layout
 */
header {
  background-color: var(--color-dark);
}

.header-logo {
  display: flex;
  height: auto;
  width: var(--space-logo);
}
.header-logo svg {
  max-width: 100%;
  height: auto;
}

footer.box.invert {
  background-color: var(--color-primary-3);
}

footer ul {
  list-style: none;
}

footer p {
  max-inline-size: var(--measure);
}

.banner, header {
  padding-block: var(--space-s);
}
@supports not (padding-block: var(--space-s)) {
  .banner, header {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
  }
}

/*--- keep buttons appearance --*/
button:not(.button) {
  border: revert;
  background-color: revert;
  padding: revert;
  color: revert;
}

button:not(.button)[disabled] {
  opacity: revert;
}

.button {
  background-color: var(--color-gray);
  border-color: var(--color-dark);
  border-radius: var(--border-radius);
  border-width: clamp(1px, var(--border-width-1) + 0.25vw, 2px);
  color: var(--color-dark);
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  font-family: var(--font-special);
  font-size: inherit;
  padding: var(--space-xs) var(--space-base);
  text-transform: uppercase;
}
.button:not([disabled]):hover {
  filter: brightness(90%) saturate(70%);
  transition: transform var(--transition-movement);
}
.button:not([disabled]):active {
  filter: brightness(70%) saturate(50%);
  transition: transform var(--transition-movement);
}

.button[data-type=primary] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-light);
  /*
   &:focus-visible {
       outline-color: var(--color-accent);
   }
  */
}
.button[data-type=primary][data-theme=dark] {
  background-color: var(--color-light);
  border-color: var(--color-light);
  color: var(--color-dark);
}
.button[data-type=primary][data-theme=dark]:focus-visible {
  outline-color: var(--color-light);
}

.button[data-theme=dark] {
  background-color: transparent;
  border-color: var(--color-light);
  color: var(--color-light);
}

.button[disabled] {
  opacity: var(--disabled-opacity);
  cursor: auto;
}

.button[data-size=l] {
  font-size: var(--font-size-m);
  padding: var(--space-base) var(--space-xl);
}

.button[data-size=s] {
  font-size: var(--font-size-s);
  padding: var(--space-2xs) var(--space-s);
}

.font-size\:s .button {
  font-size: var(--font-size-s);
  padding: var(--space-2xs) var(--space-s);
}

.font-size\:l .button {
  font-size: var(--font-size-m);
  padding: var(--space-base) var(--space-m);
}

a.button {
  text-decoration: none;
}

[type=text],
[type=password],
[type=email],
textarea {
  border-radius: 0;
  border-width: clamp(1px, var(--border-width-1) + 0.25vw, 2px);
  font-size: inherit;
  font-family: var(--font-mono);
  padding: var(--space-xs);
}

/*--- progress bar ---*/
progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  accent-color: var(--color-primary-2);
  border-radius: 4px;
  max-width: 100%;
  height: 0.5rem;
  width: 100%;
}

progress[value]::-webkit-progress-bar {
  background-color: var(--color-gray);
  border-radius: 4px;
}

progress[value]::-webkit-progress-value {
  background-color: var(--color-accent);
  border-radius: 4px;
}

progress[value]::-moz-progress-bar {
  background-color: var(--color-accent);
  border-radius: 4px;
}

.progress-bar {
  max-width: 100%;
  height: 0.5rem;
  border-radius: 4px;
  width: 100%;
}

.progress-bar-wrapper {
  display: flex;
  align-items: center;
}

.progress-bar-wrapper progress {
  flex: 1 1 0;
  margin-left: 32px;
}

.progress-complete {
  background-color: var(--color-accent);
}

.progress-complete::-webkit-progress-bar {
  background-color: var(--color-accent);
}

.progress-complete::-moz-progress-bar {
  background-color: var(--color-accent);
}

progress {
  background-color: var(--color-gray);
}

a > svg {
  display: block;
}

/*
* there elements do not have space at the top 
*/
.frame + .hero,
.hero + .hero,
.breadcrumb + *:is(.cover, .frame) {
  margin-top: 0;
}

/*
* Make the entire cover a clickable link
*/
.with-click {
  position: relative;
}

.with-click h1 > a {
  text-decoration: none;
  text-underline-offset: 0.125em;
}
.with-click h1 > a::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: initial;
}
.with-click h1 > a::after:hover {
  cursor: pointer;
}

.with-click:hover h1 > a, .with-click:focus-within h1 > a {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-1);
  filter: none;
}

.reader-content {
  max-width: var(--wrapper-reader-width);
}

/**
 *
 * This file contains utility classes declarations
 * It's purpose is to modify and to be applied to individual elements
 * instead of grouped elements
 * emulates CSS declaration structure: property-name:value
 *
 */
.display\:block {
  display: block;
}

.filter\:invert {
  filter: invert(100%);
}

/**
 * --- Alignment helpers
 */
/*-- text --*/
.text-align\:center {
  text-align: center;
}

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

/*-- flex --*/
.align-items\:center {
  align-items: center;
}

.align-items\:flex-start {
  align-items: flex-start;
}

.align-items\:end {
  align-items: end;
}

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

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

.justify-content\:space-around {
  justify-content: space-around;
}

.justify-content\:space-evenly {
  justify-content: space-evenly;
}

.justify-content\:center {
  justify-content: center;
}

.justify-content\:start {
  justify-content: start;
}

.justify-content\:end {
  justify-content: end;
}

.position\:relative {
  position: relative;
}

/*
* grid and layout (if supported)
*/
[data-gap=none] {
  gap: 0;
}

[data-gap="3xs"] {
  gap: var(--space-3xs);
}

[data-gap="2xs"] {
  gap: var(--space-2xs);
}

[data-gap=xs] {
  gap: var(--space-xs);
}

[data-gap=s] {
  gap: var(--space-s);
}

[data-gap=base] {
  gap: var(--space-base);
}

[data-gap=m] {
  gap: var(--space-m);
}

[data-gap=l] {
  gap: var(--space-l);
}

[data-gap=xl] {
  gap: var(--space-xl);
}

[data-gap="2xl"] {
  gap: var(--space-2xl);
}

[data-gap="3xl"] {
  gap: var(--space-3xl);
}

[data-gap="4xl"] {
  gap: var(--space-4xl);
}

/**
 * Paddings...
 */
[data-padding=none],
.padding\:none {
  padding: 0;
}

[data-padding="3xs"],
.padding\:3xs {
  padding: var(--space-3xs);
}

[data-padding="2xs"],
.padding\:2xs {
  padding: var(--space-2xs);
}

[data-padding=xs],
.padding\:xs {
  padding: var(--space-xs);
}

[data-padding=s],
.padding\:s {
  padding: var(--space-s);
}

[data-padding=base],
.padding\:base {
  padding: var(--space-base);
}

[data-padding=m],
.padding\:m {
  padding: var(--space-m);
}

[data-padding=l],
.padding\:l {
  padding: var(--space-l);
}

[data-padding=xl],
.padding\:xl {
  padding: var(--space-xl);
}

[data-padding="2xl"],
.padding\:2xl {
  padding: var(--space-2xl);
}

[data-padding="3xl"],
.padding\:3xl {
  padding: var(--space-3xl);
}

[data-padding="4xl"],
.padding\:4xl {
  padding: var(--space-4xl);
}

/*
 *  --- Font size helpers
 */
.font-family\:special {
  font-family: var(--font-special);
}

.font-size\:s {
  font-size: var(--font-size-s);
}

.font-size\:xs {
  font-size: var(--font-size-xs);
}

.font-size\:2xs {
  font-size: var(--font-size-2xs);
}

.font-size\:base {
  font-size: var(--font-size-base);
}

.font-size\:m {
  font-size: var(--font-size-m);
}

.font-size\:l {
  font-size: var(--font-size-l);
}

.font-size\:xl {
  font-size: var(--font-size-xl);
}

.font-size\:2xl {
  font-size: var(--font-size-2xl);
}

.height\:100\% {
  height: 100%;
}

.measure\:none {
  max-inline-size: none;
}

.measure\:20 {
  max-inline-size: 20ch;
}

.measure\:40 {
  max-inline-size: 40ch;
}

.measure\:60 {
  max-inline-size: 60ch;
}

.measure\:80 {
  max-inline-size: 80ch;
}

.measure\:90 {
  max-inline-size: 90ch;
}

.font-weight\:700 {
  font-weight: 700;
}

.font-weight\:600 {
  font-weight: 600;
}

.font-weight\:500 {
  font-weight: 500;
}

.font-weight\:400 {
  font-weight: 400;
}

.text-transform\:uppercase, .uppercase {
  text-transform: uppercase;
}

.inline-size\:none {
  max-inline-size: none;
}

/*----colors----*/
/*--- foreground colors ---*/
.color\:white {
  color: white;
}

.color\:light {
  color: var(--color-light);
}

.color\:dark {
  color: var(--color-dark);
}

.color\:primary-1 {
  color: var(--color-primary-1);
}

.color\:primary-2 {
  color: var(--color-primary-2);
}

.color\:primary-3 {
  color: var(--color-primary-3);
}

/*--- background colors ---*/
.bg-color\:initial {
  background-color: initial;
}

.bg-color\:transparent {
  background-color: transparent;
}

.bg-color\:white {
  background-color: var(--color-white);
}

.bg-color\:light {
  background-color: var(--color-light);
}

.bg-color\:dark {
  background-color: var(--color-dark);
}

.bg-color\:gray {
  background-color: var(--color-gray);
}

.bg-color\:primary-1 {
  background-color: var(--color-primary-1);
}

.bg-color\:primary-2 {
  background-color: var(--color-primary-2);
}

.bg-color\:primary-3 {
  background-color: var(--color-primary-3);
}

.bg-color\:secondary-1 {
  background-color: var(--color-secondary-1);
}

.bg-color\:secondary-2 {
  background-color: var(--color-secondary-2);
}

.bg-color\:secondary-3 {
  background-color: var(--color-secondary-3);
}

.bg-color\:secondary-4 {
  background-color: var(--color-secondary-4);
}

.bg-color\:secondary-5 {
  background-color: var(--color-secondary-5);
}

/*--- Alpha background colors --*/
.bga-color\:light {
  background-color: var(--color-alpha-light);
}

.bga-color\:dark {
  background-color: var(--color-alpha-dark);
}

.bga-color\:primary-1 {
  background-color: var(--color-alpha-primary-1);
}

.bga-color\:primary-2 {
  background-color: var(--color-alpha-primary-2);
}

.bga-color\:primary-3 {
  background-color: var(--color-alpha-primary-3);
}

.bga-color\:secondary-1 {
  background-color: var(--color-alpha-secondary-1);
}

.bga-color\:secondary-2 {
  background-color: var(--color-alpha-secondary-2);
}

.bga-color\:secondary-3 {
  background-color: var(--color-alpha-secondary-3);
}

.bga-color\:secondary-4 {
  background-color: var(--color-alpha-secondary-4);
}

.bga-color\:secondary-5 {
  background-color: var(--color-alpha-secondary-5);
}

.border-color\:light {
  border-color: var(--color-light);
}

.border-color\:dark {
  border-color: var(--color-dark);
}

.border-color\:primary-1 {
  border-color: var(--color-primary-1);
}

.border-color\:primary-2 {
  border-color: var(--color-primary-2);
}

.border-color\:primary-3 {
  border-color: var(--color-primary-3);
}

[data-border-width="0"],
.border\:0 {
  border-width: 0;
}

[data-border-width=none],
.border\:none {
  border-width: 0;
}

[data-border-width="1"],
.border\:1 {
  border-width: var(--border-width-1);
}

[data-border-width="2"],
.border\:2 {
  border-width: var(--border-width-2);
}

[data-border-width=s],
.border\:s {
  border-width: var(--border-width-s);
}

[data-border-width=base],
.border\:base {
  border-width: var(--border-width-base);
}

[data-border-width=m],
.border\:m {
  border-width: var(--border-width-m);
}

[data-border-width=l],
.border\:l {
  border-width: var(--border-width-l);
}

/**
*
* Margins and paddings
*
*/
.margin-bottom\:none {
  margin-bottom: 0;
}

.margin-bottom\:s {
  margin-bottom: var(--space-s);
}

.margin-bottom\:m {
  margin-bottom: var(--space-m);
}

.margin-bottom\:l {
  margin-bottom: var(--space-l);
}

.margin-bottom\:xl {
  margin-bottom: var(--space-xl);
}

.margin-bottom\:2xl {
  margin-bottom: var(--space-2xl);
}

.margin-bottom\:3xl {
  margin-bottom: var(--space-3xl);
}

.margin-bottom\:4xl {
  margin-bottom: var(--space-4xl);
}

.margin-top\:none {
  margin-top: 0;
}

.margin-top\:s {
  margin-top: var(--space-s);
}

.margin-top\:m {
  margin-top: var(--space-m);
}

.margin-top\:l {
  margin-top: var(--space-l);
}

.margin-top\:xl {
  margin-top: var(--space-xl);
}

.margin-top\:2xl {
  margin-top: var(--space-2xl);
}

.margin-top\:3xl {
  margin-top: var(--space-3xl);
}

.margin-top\:4xl {
  margin-top: var(--space-4xl);
}

.margin-block\:s {
  margin-block: var(--space-s);
}

.margin-block\:base {
  margin-block: var(--space-base);
}

.margin-block\:m {
  margin-block: var(--space-m);
}

.margin-block\:l {
  margin-block: var(--space-l);
}

.margin-block\:xl {
  margin-block: var(--space-xl);
}

.margin-block\:2xl {
  margin-block: var(--space-2xl);
}

.margin-block\:3xl {
  margin-block: var(--space-3xl);
}

.margin-block\:4xl {
  margin-block: var(--space-4xl);
}

.padding-block\:m {
  padding-block: var(--space-m);
}
@supports not (padding-block: var(--space-m)) {
  .padding-block\:m {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }
}

.padding-block\:l {
  padding-block: var(--space-l);
}
@supports not (padding-block: var(--space-l)) {
  .padding-block\:l {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
  }
}

.padding-block\:xl {
  padding-block: var(--space-xl);
}
@supports not (padding-block: var(--space-xl)) {
  .padding-block\:xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

.padding-block\:2xl {
  padding-block: var(--space-2xl);
}
@supports not (padding-block: var(--space-2xl)) {
  .padding-block\:2xl {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
}

.center[data-threshold="2x"],
.center.threshold\:2x {
  --measure: var(--threshold-2x);
}

/*-- desig ---*/
nav {
  background-color: var(--color-gray);
}

.nav {
  list-style: none;
}

.nav > li {
  font-size: var(--font-size-s);
}

/** menu items are narrower */
.nav.reel > * {
  flex-basis: var(--nav-item-width);
  margin-left: var(--space-2xl);
}
.nav.reel > *:first-child {
  margin-left: 0;
}

.cta {
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-family: var(--font-special);
  line-height: calc(var(--ratio) * 2);
  text-transform: uppercase;
  text-decoration: none;
}
.cta:hover {
  filter: none;
  color: var(--color-primary-2);
}

.nav + .nav {
  margin-left: var(--space-xl);
}

.hero[data-hero-theme=primary-1] .pushed h1 {
  color: var(--color-secondary-4);
}

.hero[data-hero-theme=primary-2] .pushed {
  background-color: var(--color-alpha-primary-2);
}

.hero[data-hero-theme=primary-3] .pushed {
  background-color: var(--color-alpha-primary-3);
}

.hero[data-hero-theme=secondary-1] .pushed {
  background-color: var(--color-alpha-secondary-1);
}

.hero[data-hero-theme=secondary-2] .pushed {
  background-color: var(--color-alpha-secondary-2);
}

.hero[data-hero-theme=secondary-3] .pushed {
  background-color: var(--color-alpha-secondary-3);
}

.hero[data-hero-theme=secondary-4] .pushed {
  background-color: var(--color-alpha-secondary-4);
}

.hero[data-hero-theme=secondary-5] .pushed {
  background-color: var(--color-alpha-secondary-5);
}

/**
* Suport styles for wordpress embedded videos from youTube and Vimeo
* 
**/
/**-- force the video iframe to be responsive --*/
.wrapper-video {
  max-width: 100%;
}

.wrapper-video iframe {
  width: 100% !important;
  height: 100% !important;
}

.showhide {
  margin-bottom: var(--gutter);
  padding-top: var(--gutter);
}

.showhide-body {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--border-width-1) solid rgba(43, 20, 83, 0.25);
}

.showhide-item {
  width: 100%;
  border-top: 1px solid rgba(43, 20, 83, 0.25);
  margin-bottom: 0;
}

.showhide-item-content {
  display: none;
  padding: var(--gutter);
  background-color: var(--color-white);
}

.showhide-item-control {
  position: absolute;
  opacity: 0;
}

.showhide-item-title {
  cursor: pointer;
  display: block;
  font-weight: 600;
  margin: 0;
  padding: var(--gutter) calc(var(--gutter) * 3.5) var(--gutter) var(--gutter);
  position: relative;
}
.showhide-item-title:after {
  content: " ";
  position: absolute;
  right: var(--gutter);
  top: 0;
  width: 32px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%232B1453' d='M3.313,8.954c-0.418-0.417-0.418-1.095,0-1.511l0.756-0.756c0.418-0.416,1.097-0.416,1.514,0l6.416,6.405 l6.415-6.405c0.417-0.416,1.096-0.416,1.513,0l0.758,0.756c0.42,0.416,0.42,1.094,0,1.511l-8.686,8.671L3.313,8.954z'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1.5rem auto;
}

.showhide-item-control:checked + .showhide-item-title {
  background-color: var(--color-gray);
}
.showhide-item-control:checked + .showhide-item-title:after {
  transform-origin: center;
  transform: rotate(180deg);
  transition: transform 0.2s ease-out;
}
.showhide-item-control:checked ~ .showhide-item-content {
  display: block;
}
.showhide-item-control:hover {
  cursor: pointer;
}
.showhide-item-control:focus-within {
  box-shadow: 0 0 0 var(--border-width-2) var(--color-primary-2);
}

.showhide-body ul {
  list-style: square;
}
.showhide-body ul ul {
  list-style: disc;
}

.showhide-item-content > img,
.showhide-item-content > video,
.showhide-item-content > p > img,
.showhide-item-content > p > video,
.showhide-item-content > div > img,
.showhide-item-content > div > video {
  max-width: 100%;
  height: auto;
}

/**
* Legacy
*/
/** 
 * Default transition time
 * for css animations
*/
/*
* ------------------------------------------------------------------------
* Color variables
* 
* NO COLOR DEFINITIONS BEYOND THIS POINT, ONLY VARIABLES PLEASE.
*
*/
/*
*
* Applications
*
*
*
*/
/**
 * General color variables
 */
/* ----------------------------------------------------------
* 
* FORM
*
*/
/**
* Main color of a form element
* used by buttons, selected checkboxes and radio buttons
*/
/* ----------------------------------------------------------
* 
* BUTTONS
*
*/
/*
* PRIMARY Button
*/
/*
* SECONDARY Button
*/
/*
* TERTIARY Button
*/
/*
*
* INVERTED buttons
*
*/
.text-color-body {
  color: #333333;
}

.text-color-white {
  color: #FFFFFF;
}

.text-color-primary-1 {
  color: #2B1054;
}

.text-color-primary-2 {
  color: #EC008C;
}

.text-color-primary-3 {
  color: #474C55;
}

.text-color-secondary-1 {
  color: #0077C8;
}

.text-color-secondary-2 {
  color: #00B0B9;
}

.text-color-secondary-3 {
  color: #C4D600;
}

.text-color-secondary-4 {
  color: #FCED00;
}

.text-color-secondary-5 {
  color: #FF8200;
}

.bg-primary-1 {
  background-color: #2B1054;
}

.bg-primary-2 {
  background-color: #EC008C;
}

.bg-primary-3 {
  background-color: #474C55;
}

.bg-secondary-1 {
  background-color: #0077C8;
}

.bg-secondary-2 {
  background-color: #00B0B9;
}

.bg-secondary-3 {
  background-color: #C4D600;
}

.bg-secondary-4 {
  background-color: #FCED00;
}

.bg-secondary-5 {
  background-color: #FF8200;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-black {
  background-color: #000000;
}

.bg-panel {
  background-color: #F4F3F6;
}

/*
* STYLEGUIDE ONLY class definitions... 
* move somewhere else
*
*/
.bg-primary-1-darker-10 {
  background-color: #260E4B;
}

.bg-primary-1-darker-20 {
  background-color: #220C43;
}

.bg-primary-1-darker-30 {
  background-color: #1E0B3A;
}

.bg-primary-1-darker-40 {
  background-color: #190932;
}

.bg-primary-1-darker-50 {
  background-color: #15082A;
}

.bg-primary-1-darker-60 {
  background-color: #110621;
}

.bg-primary-1-darker-70 {
  background-color: #0C0419;
}

.bg-primary-1-darker-80 {
  background-color: #080310;
}

.bg-primary-1-darker-90 {
  background-color: #040108;
}

.bg-primary-1-lighter-10 {
  background-color: #402765;
}

.bg-primary-1-lighter-20 {
  background-color: #553F76;
}

.bg-primary-1-lighter-30 {
  background-color: #6A5787;
}

.bg-primary-1-lighter-40 {
  background-color: #7F6F98;
}

.bg-primary-1-lighter-50 {
  background-color: #9587A9;
}

.bg-primary-1-lighter-60 {
  background-color: #AA9FBA;
}

.bg-primary-1-lighter-70 {
  background-color: #BFB7CB;
}

.bg-primary-1-lighter-80 {
  background-color: #D4CFDC;
}

.bg-primary-1-lighter-90 {
  background-color: #E9E7ED;
}

.bg-primary-1-lighter-95 {
  background-color: #F4F3F6;
}

.bg-primary-2-darker-10 {
  background-color: #D4007E;
}

.bg-primary-2-darker-20 {
  background-color: #BC0070;
}

.bg-primary-2-darker-30 {
  background-color: #A50062;
}

.bg-primary-2-darker-40 {
  background-color: #8D0054;
}

.bg-primary-2-darker-50 {
  background-color: #760046;
}

.bg-primary-2-darker-60 {
  background-color: #5E0038;
}

.bg-primary-2-darker-70 {
  background-color: #46002A;
}

.bg-primary-2-darker-80 {
  background-color: #2F001C;
}

.bg-primary-2-darker-90 {
  background-color: #17000E;
}

.bg-primary-2-lighter-10 {
  background-color: #ED1997;
}

.bg-primary-2-lighter-20 {
  background-color: #EF32A3;
}

.bg-primary-2-lighter-30 {
  background-color: #F14CAE;
}

.bg-primary-2-lighter-40 {
  background-color: #F366BA;
}

.bg-primary-2-lighter-50 {
  background-color: #F57FC5;
}

.bg-primary-2-lighter-60 {
  background-color: #F799D1;
}

.bg-primary-2-lighter-70 {
  background-color: #F9B2DC;
}

.bg-primary-2-lighter-80 {
  background-color: #FBCCE8;
}

.bg-primary-2-lighter-90 {
  background-color: #FDE5F3;
}

.bg-primary-3-darker-10 {
  background-color: #3F444C;
}

.bg-primary-3-darker-20 {
  background-color: #383C44;
}

.bg-primary-3-darker-30 {
  background-color: #31353B;
}

.bg-primary-3-darker-40 {
  background-color: #2A2D33;
}

.bg-primary-3-darker-50 {
  background-color: #23262A;
}

.bg-primary-3-darker-60 {
  background-color: #1C1E22;
}

.bg-primary-3-darker-70 {
  background-color: #151619;
}

.bg-primary-3-darker-80 {
  background-color: #0E0F11;
}

.bg-primary-3-darker-90 {
  background-color: #070708;
}

.bg-primary-3-lighter-10 {
  background-color: #595D66;
}

.bg-primary-3-lighter-20 {
  background-color: #6B6F76;
}

.bg-primary-3-lighter-30 {
  background-color: #7E8188;
}

.bg-primary-3-lighter-40 {
  background-color: #909399;
}

.bg-primary-3-lighter-50 {
  background-color: #A3A5AA;
}

.bg-primary-3-lighter-60 {
  background-color: #B5B7BB;
}

.bg-primary-3-lighter-70 {
  background-color: #C7C9CC;
}

.bg-primary-3-lighter-80 {
  background-color: #DADBDD;
}

.bg-primary-3-lighter-90 {
  background-color: #ECEDEE;
}

.bg-secondary-1-darker-10 {
  background-color: #006BB4;
}

.bg-secondary-1-darker-20 {
  background-color: #005FA0;
}

.bg-secondary-1-darker-30 {
  background-color: #00538C;
}

.bg-secondary-1-darker-40 {
  background-color: #004778;
}

.bg-secondary-1-darker-50 {
  background-color: #003B64;
}

.bg-secondary-1-darker-60 {
  background-color: #002F50;
}

.bg-secondary-1-darker-70 {
  background-color: #00233C;
}

.bg-secondary-1-darker-80 {
  background-color: #001728;
}

.bg-secondary-1-darker-90 {
  background-color: #000B14;
}

.bg-secondary-1-lighter-10 {
  background-color: #1984CD;
}

.bg-secondary-1-lighter-20 {
  background-color: #3292D3;
}

.bg-secondary-1-lighter-30 {
  background-color: #4C9FD8;
}

.bg-secondary-1-lighter-40 {
  background-color: #66ADDE;
}

.bg-secondary-1-lighter-50 {
  background-color: #7FBBE3;
}

.bg-secondary-1-lighter-60 {
  background-color: #99C8E9;
}

.bg-secondary-1-lighter-70 {
  background-color: #B2D6EE;
}

.bg-secondary-1-lighter-80 {
  background-color: #CCE3F4;
}

.bg-secondary-1-lighter-90 {
  background-color: #E5F1F9;
}

.bg-secondary-2-darker-10 {
  background-color: #009EA6;
}

.bg-secondary-2-darker-20 {
  background-color: #008C94;
}

.bg-secondary-2-darker-30 {
  background-color: #007B81;
}

.bg-secondary-2-darker-40 {
  background-color: #00696F;
}

.bg-secondary-2-darker-50 {
  background-color: #00585C;
}

.bg-secondary-2-darker-60 {
  background-color: #00464A;
}

.bg-secondary-2-darker-70 {
  background-color: #003437;
}

.bg-secondary-2-darker-80 {
  background-color: #002325;
}

.bg-secondary-2-darker-90 {
  background-color: #001112;
}

.bg-secondary-2-lighter-10 {
  background-color: #19B7C0;
}

.bg-secondary-2-lighter-20 {
  background-color: #32BFC7;
}

.bg-secondary-2-lighter-30 {
  background-color: #4CC7CE;
}

.bg-secondary-2-lighter-40 {
  background-color: #66CFD5;
}

.bg-secondary-2-lighter-50 {
  background-color: #7FD7DC;
}

.bg-secondary-2-lighter-60 {
  background-color: #99DFE3;
}

.bg-secondary-2-lighter-70 {
  background-color: #B2E7EA;
}

.bg-secondary-2-lighter-80 {
  background-color: #CCEFF1;
}

.bg-secondary-2-lighter-90 {
  background-color: #E5F7F8;
}

.bg-secondary-3-darker-10 {
  background-color: #B0C000;
}

.bg-secondary-3-darker-20 {
  background-color: #9CAB00;
}

.bg-secondary-3-darker-30 {
  background-color: #899500;
}

.bg-secondary-3-darker-40 {
  background-color: #758000;
}

.bg-secondary-3-darker-50 {
  background-color: #626B00;
}

.bg-secondary-3-darker-60 {
  background-color: #4E5500;
}

.bg-secondary-3-darker-70 {
  background-color: #3A4000;
}

.bg-secondary-3-darker-80 {
  background-color: #272A00;
}

.bg-secondary-3-darker-90 {
  background-color: #131500;
}

.bg-secondary-3-lighter-10 {
  background-color: #C9DA19;
}

.bg-secondary-3-lighter-20 {
  background-color: #CFDE32;
}

.bg-secondary-3-lighter-30 {
  background-color: #D5E24C;
}

.bg-secondary-3-lighter-40 {
  background-color: #DBE666;
}

.bg-secondary-3-lighter-50 {
  background-color: #E1EA7F;
}

.bg-secondary-3-lighter-60 {
  background-color: #E7EE99;
}

.bg-secondary-3-lighter-70 {
  background-color: #EDF2B2;
}

.bg-secondary-3-lighter-80 {
  background-color: #F3F6CC;
}

.bg-secondary-3-lighter-90 {
  background-color: #F9FAE5;
}

.bg-secondary-4-darker-10 {
  background-color: #E2D500;
}

.bg-secondary-4-darker-20 {
  background-color: #C9BD00;
}

.bg-secondary-4-darker-30 {
  background-color: #B0A500;
}

.bg-secondary-4-darker-40 {
  background-color: #978E00;
}

.bg-secondary-4-darker-50 {
  background-color: #7E7600;
}

.bg-secondary-4-darker-60 {
  background-color: #645E00;
}

.bg-secondary-4-darker-70 {
  background-color: #4B4700;
}

.bg-secondary-4-darker-80 {
  background-color: #322F00;
}

.bg-secondary-4-darker-90 {
  background-color: #191700;
}

.bg-secondary-4-lighter-10 {
  background-color: #FCEE19;
}

.bg-secondary-4-lighter-20 {
  background-color: #FCF032;
}

.bg-secondary-4-lighter-30 {
  background-color: #FCF24C;
}

.bg-secondary-4-lighter-40 {
  background-color: #FDF466;
}

.bg-secondary-4-lighter-50 {
  background-color: #FDF67F;
}

.bg-secondary-4-lighter-60 {
  background-color: #FDF799;
}

.bg-secondary-4-lighter-70 {
  background-color: #FEF9B2;
}

.bg-secondary-4-lighter-80 {
  background-color: #FEFBCC;
}

.bg-secondary-4-lighter-90 {
  background-color: #FEFDE5;
}

.bg-secondary-5-darker-10 {
  background-color: #E57500;
}

.bg-secondary-5-darker-20 {
  background-color: #CC6800;
}

.bg-secondary-5-darker-30 {
  background-color: #B25B00;
}

.bg-secondary-5-darker-40 {
  background-color: #994E00;
}

.bg-secondary-5-darker-50 {
  background-color: #7F4100;
}

.bg-secondary-5-darker-60 {
  background-color: #663400;
}

.bg-secondary-5-darker-70 {
  background-color: #4C2700;
}

.bg-secondary-5-darker-80 {
  background-color: #331A00;
}

.bg-secondary-5-darker-90 {
  background-color: #190D00;
}

.bg-secondary-5-lighter-10 {
  background-color: #FF8E19;
}

.bg-secondary-5-lighter-20 {
  background-color: #FF9B32;
}

.bg-secondary-5-lighter-30 {
  background-color: #FFA74C;
}

.bg-secondary-5-lighter-40 {
  background-color: #FFB466;
}

.bg-secondary-5-lighter-50 {
  background-color: #FFC07F;
}

.bg-secondary-5-lighter-60 {
  background-color: #FFCD99;
}

.bg-secondary-5-lighter-70 {
  background-color: #FFD9B2;
}

.bg-secondary-5-lighter-80 {
  background-color: #FFE6CC;
}

.bg-secondary-5-lighter-90 {
  background-color: #FFF2E5;
}

/* ----------------------------------------------------
*  NEW SECTION STARTS HERE
*
*
*
*
*
*/
.bgc-primary-1 {
  background-color: #2B1054;
}

.bgc-primary-2 {
  background-color: #EC008C;
}

.bgc-primary-3 {
  background-color: #474C55;
}

.bgc-secondary-1 {
  background-color: #0077C8;
}

.bgc-secondary-2 {
  background-color: #00B0B9;
}

.bgc-secondary-3 {
  background-color: #C4D600;
}

.bgc-secondary-4 {
  background-color: #FCED00;
}

.bgc-secondary-5 {
  background-color: #FF8200;
}

.bgc-success {
  background-color: #899500;
}

.bgc-warn {
  background-color: #E57500;
}

.bgc-danger {
  background-color: #BC0070;
}

.bgc-info {
  background-color: #009EA6;
}

.color-info {
  color: #009EA6;
}

.color-success {
  color: #899500;
}

.color-warn {
  color: #E57500;
}

.color-danger {
  color: #BC0070;
}

@-webkit-keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.search-hide-from-screen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.group-checkboxes > label {
  display: block;
  margin-bottom: 1rem;
}

label.implicitly {
  margin-bottom: 1.5rem;
  margin-right: 1rem;
  position: relative;
  user-select: none;
}
label.implicitly > input[type=checkbox], label.implicitly > input[type=radio] {
  position: absolute;
  opacity: 0.01;
  left: 0;
}
label.implicitly > input[type=checkbox]:disabled, label.implicitly > input[type=radio]:disabled {
  opacity: 0;
  cursor: not-allowed;
}
label.implicitly > input[type=checkbox]:disabled + label,
label.implicitly > input[type=checkbox]:disabled + span, label.implicitly > input[type=radio]:disabled + label,
label.implicitly > input[type=radio]:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}
label.implicitly > span {
  display: inline-flex;
  line-height: 1.575;
  padding-left: 2.5rem;
  position: relative;
}
label.implicitly > span::before, label.implicitly > span::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: 2rem;
  width: 2rem;
}
label.implicitly input[type=checkbox] + span::before {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cg%3E %3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='546' y1='670.416' x2='546' y2='697.4521'%3E  %3Cstop  offset='0' style='stop-color:%23FEFEFE'/%3E  %3Cstop  offset='1' style='stop-color:%23F4F3F6'/%3E %3C/linearGradient%3E %3Cpath fill='url(%23SVGID_1_)' d='M534,699c-1.654,0-3-1.346-3-3v-24c0-1.654,1.346-3,3-3h24c1.654,0,3,1.346,3,3v24  c0,1.654-1.346,3-3,3H534z'/%3E %3Cpath fill='%23474C55' d='M558,670c1.103,0,2,0.897,2,2v24c0,1.103-0.897,2-2,2h-24c-1.103,0-2-0.897-2-2v-24c0-1.103,0.897-2,2-2  H558 M558,668h-24c-2.2,0-4,1.8-4,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4v-24C562,669.8,560.2,668,558,668L558,668z'/%3E%3C/g%3E%3Cg%3E %3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='15.9995' y1='2.4165' x2='15.9995' y2='29.453'%3E  %3Cstop  offset='0' style='stop-color:%23FEFEFE'/%3E  %3Cstop  offset='1' style='stop-color:%23F4F3F6'/%3E %3C/linearGradient%3E %3Cpath fill='url(%23SVGID_2_)' d='M4,31c-1.654,0-3-1.346-3-3V4c0-1.654,1.346-3,3-3h24c1.654,0,3,1.346,3,3v24c0,1.654-1.346,3-3,3H4  z'/%3E %3Cpath fill='%23474C55' d='M28,2c1.104,0,2,0.897,2,2v24c0,1.103-0.896,2-2,2H4c-1.103,0-2-0.897-2-2V4c0-1.103,0.897-2,2-2H28 M28,0  H4C1.8,0,0,1.8,0,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0L28,0z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
label.implicitly input[type=checkbox] + span::after {
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'    viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'%3E%3Cg%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='546' y1='670.416' x2='546' y2='697.4521'%3E%3Cstop  offset='0' style='stop-color:%23FEFEFE'/%3E%3Cstop  offset='1' style='stop-color:%23F4F3F6'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_1_)' d='M534,699c-1.654,0-3-1.346-3-3v-24c0-1.654,1.346-3,3-3h24c1.654,0,3,1.346,3,3v24c0,1.654-1.346,3-3,3H534z'/%3E%3Cpath fill='%23474C55' d='M558,670c1.103,0,2,0.897,2,2v24c0,1.103-0.897,2-2,2h-24c-1.103,0-2-0.897-2-2v-24c0-1.103,0.897-2,2-2H558 M558,668h-24c-2.2,0-4,1.8-4,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4v-24C562,669.8,560.2,668,558,668L558,668z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath fill='%2331353B' d='M4,31.5c-1.93,0-3.5-1.57-3.5-3.5V4c0-1.93,1.57-3.5,3.5-3.5h24c1.93,0,3.5,1.57,3.5,3.5v24c0,1.93-1.57,3.5-3.5,3.5H4z'/%3E%3Cpath fill='%2331353B' d='M28,1c1.654,0,3,1.346,3,3v24c0,1.654-1.346,3-3,3H4c-1.654,0-3-1.346-3-3V4c0-1.654,1.346-3,3-3H28 M28,0H4C1.8,0,0,1.8,0,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0L28,0z'/%3E%3C/g%3E%3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='3.1875' y1='16.0537' x2='28.9521' y2='16.0537'%3E%3Cstop  offset='0' style='stop-color:%23FEFEFE'/%3E%3Cstop  offset='1' style='stop-color:%23F4F3F6'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_2_)' d='M28.416,7.934l-1.3-1.3c-0.719-0.718-1.881-0.718-2.599,0L12.17,18.974l-4.545-4.546c-0.718-0.718-1.881-0.718-2.599,0l-1.299,1.3c-0.72,0.717-0.72,1.883,0,2.598l7.146,7.148c0.717,0.718,1.881,0.718,2.599,0l1.298-1.301l13.646-13.645C29.131,9.812,29.131,8.649,28.416,7.934'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
label.implicitly input[type=radio] + span::before {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3ClinearGradient%20id%3D%22SVGID_1_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2215.9995%22%20y1%3D%225.2178%22%20x2%3D%2215.9995%22%20y2%3D%2226.3171%22%3E%0A%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FEFEFE%22%2F%3E%0A%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23F4F3F6%22%2F%3E%0A%09%3C%2FlinearGradient%3E%0A%09%3Cpath%20fill%3D%22url%28%23SVGID_1_%29%22%20d%3D%22M16%2C31C7.729%2C31%2C1%2C24.271%2C1%2C16C1%2C7.729%2C7.729%2C1%2C16%2C1c8.271%2C0%2C15%2C6.729%2C15%2C15%0A%09%09C31%2C24.271%2C24.271%2C31%2C16%2C31z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%23474C55%22%20d%3D%22M16%2C2c7.72%2C0%2C14%2C6.28%2C14%2C14s-6.28%2C14-14%2C14S2%2C23.72%2C2%2C16S8.28%2C2%2C16%2C2%20M16%2C0C7.164%2C0%2C0%2C7.163%2C0%2C16%0A%09%09s7.164%2C16%2C16%2C16s16-7.163%2C16-16S24.836%2C0%2C16%2C0L16%2C0z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
}
label.implicitly input[type=radio] + span::after {
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20fill%3D%22%2331353B%22%20d%3D%22M16%2C31.5C7.453%2C31.5%2C0.5%2C24.547%2C0.5%2C16S7.453%2C0.5%2C16%2C0.5S31.5%2C7.453%2C31.5%2C16S24.547%2C31.5%2C16%2C31.5z%22%2F%3E%0A%09%09%3Cpath%20fill%3D%22%2331353B%22%20d%3D%22M16%2C1c8.271%2C0%2C15%2C6.729%2C15%2C15c0%2C8.271-6.729%2C15-15%2C15C7.729%2C31%2C1%2C24.271%2C1%2C16C1%2C7.729%2C7.729%2C1%2C16%2C1%20M16%2C0%0A%09%09%09C7.164%2C0%2C0%2C7.163%2C0%2C16s7.164%2C16%2C16%2C16s16-7.163%2C16-16S24.836%2C0%2C16%2C0L16%2C0z%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20fill%3D%22%23F4F3F6%22%20d%3D%22M16%2C23.5c-4.136%2C0-7.5-3.364-7.5-7.5s3.364-7.5%2C7.5-7.5s7.5%2C3.364%2C7.5%2C7.5S20.136%2C23.5%2C16%2C23.5z%22%2F%3E%0A%09%09%3Cpath%20fill%3D%22%2331353B%22%20d%3D%22M16%2C9c3.859%2C0%2C7%2C3.14%2C7%2C7c0%2C3.859-3.141%2C7-7%2C7c-3.86%2C0-7-3.141-7-7C9%2C12.14%2C12.14%2C9%2C16%2C9%20M16%2C8%0A%09%09%09c-4.418%2C0-8%2C3.582-8%2C8c0%2C4.418%2C3.582%2C8%2C8%2C8s8-3.582%2C8-8C24%2C11.582%2C20.418%2C8%2C16%2C8L16%2C8z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
}
label.implicitly input[type=checkbox]:checked + span, label.implicitly input[type=radio]:checked + span {
  font-weight: 600;
}
label.implicitly input[type=checkbox]:checked + span::before, label.implicitly input[type=radio]:checked + span::before {
  opacity: 0;
}
label.implicitly input[type=checkbox]:checked + span::after, label.implicitly input[type=radio]:checked + span::after {
  opacity: 1;
}
label.implicitly input[type=checkbox]:focus:not(:disabled) + span::before, label.implicitly input[type=checkbox]:focus:not(:disabled) + span::after, label.implicitly input[type=radio]:focus:not(:disabled) + span::before, label.implicitly input[type=radio]:focus:not(:disabled) + span::after {
  border-radius: 2px;
  outline: 2px solid;
  outline-offset: 2px;
}
label.implicitly input[type=checkbox]:active + span::before, label.implicitly input[type=checkbox]:active + span::after, label.implicitly input[type=radio]:active + span::before, label.implicitly input[type=radio]:active + span::after {
  background-size: 94%;
  background-position: center;
}
.select, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: white;
  border: 2px solid;
  border-radius: 4px;
  color: #474C55;
  font-size: 1rem;
  height: 3rem;
  line-height: 1.3161;
  vertical-align: middle;
  padding-right: 2rem;
  padding-left: 0.5rem;
  text-indent: 0.01px;
  text-overflow: "";
}
.select:not([multiple]), select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csymbol%20%20id%3D%22chevron_x5F_down_x5F_gray%22%20viewBox%3D%22-7.156%20-4.473%2014.312%208.945%22%3E%0A%09%3Cpath%20fill%3D%22%23474C55%22%20d%3D%22M-6.906%2C2.422c-0.333%2C0.332-0.333%2C0.869%2C0%2C1.201l0.601%2C0.602c0.332%2C0.33%2C0.872%2C0.33%2C1.204%2C0l5.101-5.093%0A%09%09l5.102%2C5.093c0.331%2C0.33%2C0.871%2C0.33%2C1.202%2C0l0.603-0.602c0.334-0.332%2C0.334-0.869%2C0-1.201l-6.906-6.895L-6.906%2C2.422z%22%2F%3E%0A%3C%2Fsymbol%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23chevron_x5F_down_x5F_gray%22%20%20width%3D%2214.312%22%20height%3D%228.945%22%20x%3D%22-7.156%22%20y%3D%22-4.473%22%20transform%3D%22matrix%281%200%200%20-1%2015.9092%2023.0166%29%22%20overflow%3D%22visible%22%2F%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23chevron_x5F_down_x5F_gray%22%20%20width%3D%2214.312%22%20height%3D%228.945%22%20x%3D%22-7.156%22%20y%3D%22-4.473%22%20transform%3D%22matrix%281%200%200%201%2015.9092%208.0742%29%22%20overflow%3D%22visible%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat, repeat;
  background-position: right center, top left;
  background-size: 2rem auto, 100% 100%;
}
.select[multiple], select[multiple] {
  width: 100%;
  min-height: 240;
}
.select:hover:enabled, select:hover:enabled {
  border-color: #474C55;
}
.select:focus, select:focus {
  border-color: #474C55;
  outline: #3292D3 solid 2px;
  outline-offset: 2px;
}
.select:focus:not(:focus-visible), select:focus:not(:focus-visible) {
  outline: none;
  border-color: #909399;
}
.select:focus-visible, select:focus-visible {
  outline: #3292D3 solid 2px;
  outline-offset: 2px;
  border-color: #474C55;
}
.select:disabled, select:disabled {
  cursor: not-allowed;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  opacity: 0.5;
}
.select.select-block, select.select-block {
  width: 100%;
  margin-top: 0.5rem;
}

.group-select-block select {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
}