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

* { font: inherit; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr { margin: 0; padding: 0; border: 0; }

html { box-sizing: border-box; }

body { background-color: var(--color-white, white); }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { display: block; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

button, input, textarea, select { margin: 0; }

.btn, .form-control, .link, .reset { background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; line-height: inherit; appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

select.form-control::-ms-expand { display: none; }

textarea { resize: vertical; overflow: auto; vertical-align: top; }

input::-ms-clear { display: none; }

table { border-collapse: collapse; border-spacing: 0; }

img, video, svg { max-width: 100%; }

p { color: var(--color-contrast-high); }

@font-face { font-family: 'JDS-icon'; font-weight: normal; font-style: normal; src: url("font/JDS-icon.eot?h8soei"); src: url("font/JDS-icon.eot?h8soei#iefix") format("embedded-opentype"), url("font/JDS-icon.ttf?h8soei") format("truetype"), url("font/JDS-icon.woff?h8soei") format("woff"), url("font/JDS-icon.svg?h8soei#JDS-icon") format("svg"); }

@font-face { font-family: 'futuralight'; src: url("font/futura_light_bt-webfont.woff2") format("woff2"), url("font/futura_light_bt-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'futuramedium'; src: url("font/futura_medium_bt-webfont.woff2") format("woff2"), url("font/futura_medium_bt-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Futura Std Condensed ExtBd'; src: url("font/FuturaStd-CondensedExtraBd.woff2") format("woff2"), url("font/FuturaStd-CondensedExtraBd.woff") format("woff"); font-weight: 900; font-style: normal; }

body { font-size: var(--text-base-size); font-family: var(--font-primary); color: var(--color-contrast-high); font-weight: 400; }

h1, h2, h3, h4 { color: var(--color-contrast-higher); line-height: var(--heading-line-height); font-weight: 700; }

.text--xxxl { font-size: var(--text-xxxl); font-weight: 900; }

h1, .text--xxl { font-size: var(--text-xxl); font-weight: 900; color: var(--color-contrast-lower); }

h2, .text--xl { font-size: var(--text-xl); font-family: var(--font-secondary); color: var(--color-contrast-lower); }

h3, .text--lg { font-size: var(--text-lg); font-weight: 700; }

h4, .text--md { font-size: var(--text-md); font-weight: 500; }

.text--sm, small { font-size: var(--text-sm); }

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

a { color: inherit; text-decoration: none; }

.link { text-decoration: underline; color: var(--color-primary-light); }

.link:hover { color: var(--color-primary); transition: .5s; }

.title { font-size: var(--text-xl); font-family: var(--font-secondary); color: var(--color-contrast-lower); }

.s-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-contrast-higher); line-height: var(--heading-line-height); }

.color1 { color: var(--color-primary-light); }

mark { background-color: var(--color-accent-lighter); color: inherit; }

strong { font-weight: 700; }

s { text-decoration: line-through; }

u { text-decoration: underline; }

.text--subtle, .text-component .text--subtle { color: var(--color-contrast-medium); }

.text--inherit, .text-component .text--inherit { color: inherit; }

.text-component { --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1)); --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1)); --line-height-multiplier: 1; --text-vspace-multiplier: 1; }

.text-component h1, .text-component h2, .text-component h3, .text-component h4 { line-height: var(--component-heading-line-height); margin-bottom: calc(var(--space-xxxs) * var(--text-vspace-multiplier)); }

.text-component h2, .text-component h3, .text-component h4 { margin-top: calc(var(--space-sm) * var(--text-vspace-multiplier)); }

.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { line-height: var(--component-body-line-height); color: var(--color-contrast-high); }

.text-component ul, .text-component ol, .text-component p, .text-component blockquote { margin-bottom: calc(var(--space-sm) * var(--text-vspace-multiplier)); }

.text-component ul, .text-component ol { padding-left: 1em; }

.text-component ul { list-style-type: disc; }

.text-component ol { list-style-type: decimal; }

.text-component em { font-style: italic; }

.text-component blockquote { padding-left: 1em; border-left: 4px solid var(--color-contrast-low); }

.text-component hr { background: var(--color-contrast-low); height: 1px; margin: calc(var(--space-lg) * var(--text-vspace-multiplier)) auto; }

.text-component > *:first-child { margin-top: 0; }

.text-component > *:last-child { margin-bottom: 0; }

.article.text-component { --line-height-multiplier: 1.13; }

.text-component__img { text-align: center; }

.text-component__img img { display: block; margin: 0 auto; }

.text-component__img figcaption { text-align: center; font-size: var(--text-sm); color: var(--color-contrast-medium); margin-top: var(--space-xs); }

.text-component__block .text-component__img { margin-bottom: 0; }

.text-component__block--outset, .text-component__img--outset { width: calc(100% + 2 * var(--space-xxl)); }

.text-component__block--outset img, .text-component__img--outset img { width: 100%; }

.text-component__block--outset:not(.text-component__block--right), .text-component__img--outset:not(.text-component__img--right) { margin-left: calc(-1 * var(--space-xxl)); }

.text-component__block--left, .text-component__block--right, .text-component__img--left, .text-component__img--right { width: 50%; }

.text-component__block--right.text-component__block--outset, .text-component__img--right.text-component__img--outset { margin-right: calc(-1 * var(--space-xxl)); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text--replace { overflow: hidden; color: transparent; text-indent: 100%; white-space: nowrap; }

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

.text--left { text-align: left; }

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

.text-box { background: var(--color-bg); padding: var(--space-xs); }

.margin-top, .margin-top--md { margin-top: var(--space-md); }

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

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

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

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

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

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

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

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

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

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

.margin-bottom, .margin-bottom--md { margin-bottom: var(--space-md); }

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

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

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

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

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

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

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

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

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

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

.padding-top, .padding-top--md { padding-top: var(--space-md); }

.padding-top--xxxxs { padding-top: var(--space-xxxxs); }

.padding-top--xxxs { padding-top: var(--space-xxxs); }

.padding-top--xxs { padding-top: var(--space-xxs); }

.padding-top--xs { padding-top: var(--space-xs); }

.padding-top--sm { padding-top: var(--space-sm); }

.padding-top--lg { padding-top: var(--space-lg); }

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

.padding-top--xxl { padding-top: var(--space-xxl); }

.padding-top--xxxl { padding-top: var(--space-xxxl); }

.padding-top--xxxxl { padding-top: var(--space-xxxxl); }

.padding-bottom, .padding-bottom--md { padding-bottom: var(--space-md); }

.padding-bottom--xxxxs { padding-bottom: var(--space-xxxxs); }

.padding-bottom--xxxs { padding-bottom: var(--space-xxxs); }

.padding-bottom--xxs { padding-bottom: var(--space-xxs); }

.padding-bottom--xs { padding-bottom: var(--space-xs); }

.padding-bottom--sm { padding-bottom: var(--space-sm); }

.padding-bottom--lg { padding-bottom: var(--space-lg); }

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

.padding-bottom--xxl { padding-bottom: var(--space-xxl); }

.padding-bottom--xxxl { padding-bottom: var(--space-xxxl); }

.padding-bottom--xxxxl { padding-bottom: var(--space-xxxxl); }

.container { width: calc(100% - 2*var(--component-padding)); margin-left: auto; margin-right: auto; }

.container--full-width { width: 100%; }

.container--xxs { max-width: var(--container-width-xxs); }

.container--xs { max-width: var(--container-width-xs); }

.container--sm { max-width: var(--container-width-sm); }

.container--md { max-width: var(--container-width-md); }

.container--lg { max-width: var(--container-width-lg); }

.container--xl { max-width: var(--container-width-xl); }

.container--adaptive { max-width: var(--container-width-md); }

.container--adaptive-sm { max-width: var(--container-width-sm); }

.container--adaptive-md { max-width: var(--container-width-md); }

.grid { display: flex; flex-wrap: wrap; margin: calc(var(--space-md) * -1) 0 0 calc(var(--space-md) * -1); }

.grid > * { padding: var(--space-md) 0 0 var(--space-md); background-clip: content-box; flex-basis: 100%; }

.grid-gap--none { margin: 0; }

.grid-gap--none > * { padding: 0; }

.grid-gap--xs { margin: calc(var(--space-xs) * -1) 0 0 calc(var(--space-xs) * -1); }

.grid-gap--xs > * { padding: var(--space-xs) 0 0 var(--space-xs); }

.grid-gap--sm { margin: calc(var(--space-sm) * -1) 0 0 calc(var(--space-sm) * -1); }

.grid-gap--sm > * { padding: var(--space-sm) 0 0 var(--space-sm); }

.grid-gap--lg { margin: calc(var(--space-lg) * -1) 0 0 calc(var(--space-lg) * -1); }

.grid-gap--lg > * { padding: var(--space-lg) 0 0 var(--space-lg); }

.grid-gap--xl { margin: calc(var(--space-xl) * -1) 0 0 calc(var(--space-xl) * -1); }

.grid-gap--xl > * { padding: var(--space-xl) 0 0 var(--space-xl); }

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

.col--1 { flex-basis: 8.33%; max-width: 8.33%; }

.col--2 { flex-basis: 16.66%; max-width: 16.66%; }

.col--3 { flex-basis: 25%; max-width: 25%; }

.col--4 { flex-basis: 33.33%; max-width: 33.33%; }

.col--5 { flex-basis: 41.66%; max-width: 41.66%; }

.col--6 { flex-basis: 50%; max-width: 50%; }

.col--7 { flex-basis: 58.33%; max-width: 58.33%; }

.col--8 { flex-basis: 66.66%; max-width: 66.66%; }

.col--9 { flex-basis: 75%; max-width: 75%; }

.col--10 { flex-basis: 83.33%; max-width: 83.33%; }

.col--11 { flex-basis: 91.66%; max-width: 91.66%; }

.col--12 { flex-basis: 100%; max-width: 100%; }

/* --------------------------------

Title: Auto Sized Grid
Descr: A grid layout based on CSS Grid where the columns are automatically created according to a min-width value

-------------------------------- */
.auto-sized-grid { --auto-sized-grid-min-width: 230px; display: flex; flex-wrap: wrap; margin: calc(var(--space-md) * -1) 0 0 calc(var(--space-md) * -1); }

.auto-sized-grid > * { padding: var(--space-md) 0 0 var(--space-md); background-clip: content-box; }

@supports (grid-area: auto) { .auto-sized-grid { margin: 0; }
  .auto-sized-grid > * { padding: 0; max-width: none !important; } }

.auto-sized-grid::after { content: ""; clear: both; display: table; }

.auto-sized-grid > * { float: left; width: calc(100%/3); }

@supports (grid-area: auto) { .auto-sized-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--auto-sized-grid-min-width), 1fr)); grid-gap: var(--space-md); }
  .auto-sized-grid > * { width: auto; } }

.auto-sized-grid img { display: block; width: 100%; }

.center-container { position: relative; overflow: hidden; }

.xy-center-item { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; transform: translateX(-50%) translateY(-50%); }

.x-center-item { position: absolute; left: 50%; right: auto; transform: translateX(-50%); }

.y-center-item { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); }

.bgimg { max-width: 100%; min-height: 100%; margin: auto; }

.x-bgimg { width: 100%; min-height: 100%; margin: auto; }

.y-bgimg { min-width: 100%; height: 100%; margin: auto; }

.xy-bgimg { max-width: 100%; max-height: 100%; margin: auto; }

.flex { display: flex; }

.flex > * { display: inline-block; }

.flex--wrap { flex-wrap: wrap; }

.flex--column { flex-direction: column; }

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

.flex--center { justify-content: center; align-items: center; }

.flex--center-x { justify-content: center; }

.flex--center-y { align-items: center; }

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

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

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

.flex--grow > * { flex-grow: 1; }

.flex--shrink-none > * { flex-shrink: 0; }

.flex-gap > *, .flex-gap--md > * { margin-right: var(--space-md); }

.flex-gap > *:last-child, .flex-gap--md > *:last-child { margin-right: 0; }

.flex--wrap.flex-gap, .flex--wrap.flex-gap--md { margin-bottom: calc(-1 * var(--space-md)); }

.flex--wrap.flex-gap > *, .flex--wrap.flex-gap--md > * { margin-bottom: var(--space-md); }

.flex-gap--xxs > * { margin-right: var(--space-xxs); }

.flex-gap--xxs > *:last-child { margin-right: 0; }

.flex--wrap.flex-gap--xxs { margin-bottom: calc(-1 * var(--space-xxs)); }

.flex--wrap.flex-gap--xxs > * { margin-bottom: var(--space-xxs); }

.flex-gap--xs > * { margin-right: var(--space-xs); }

.flex-gap--xs > *:last-child { margin-right: 0; }

.flex--wrap.flex-gap--xs { margin-bottom: calc(-1 * var(--space-xs)); }

.flex--wrap.flex-gap--xs > * { margin-bottom: var(--space-xs); }

.flex-gap--sm > * { margin-right: var(--space-sm); }

.flex-gap--sm > *:last-child { margin-right: 0; }

.flex--wrap.flex-gap--sm { margin-bottom: calc(-1 * var(--space-sm)); }

.flex--wrap.flex-gap--sm > * { margin-bottom: var(--space-sm); }

.flex-gap--lg > * { margin-right: var(--space-lg); }

.flex-gap--lg > *:last-child { margin-right: 0; }

.flex--wrap.flex-gap--lg { margin-bottom: calc(-1 * var(--space-lg)); }

.flex--wrap.flex-gap--lg > * { margin-bottom: var(--space-lg); }

.flex-gap--xl > * { margin-right: var(--space-xl); }

.flex-gap--xl > *:last-child { margin-right: 0; }

.flex--wrap.flex-gap--xl { margin-bottom: calc(-1 * var(--space-xl)); }

.flex--wrap.flex-gap--xl > * { margin-bottom: var(--space-xl); }

.flex-item--end { align-self: flex-end; }

.flex-item--grow { flex-grow: 1; }

.flex-item--shrink-none { flex-shrink: 0; }

[class*="icon"]:before, [class*="icon"]:after { font-family: 'JDS-icon'; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; speak: none; font-size: 120%; }

[class*="icon"].nuisibles:before, [class*="icon"].nuisibles:after { font-family: 'nuisibles'; }

[class*="icon"][data-icon]:before { content: attr(data-icon); }

[class*="icon"][data-icon-right]:after { content: attr(data-icon-right); }

.icon { display: inline-block; fill: currentColor; line-height: 1; }

.icon[data-icon]:before, .icon[data-icon-right]:after { display: inline-block; width: 100%; text-align: center; margin-bottom: var(--space-xxxs); }

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

.icon--sm:before { font-size: var(--icon-sm); }

.icon--md:before { font-size: var(--icon-md); }

.icon--lg:before { font-size: var(--icon-lg); }

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

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

.icon-text > *:nth-child(2) { margin-left: var(--space-xxs); }

.icon-text .icon { color: inherit; flex-shrink: 0; }

.icon-text.icon-text-gap--none > *:nth-child(2) { margin-left: 0; }

.icon-text[data-icon] { padding-left: var(--space-xxs); }

.icon-text[data-icon]:before { margin-right: var(--space-sm); }

.icon-text[data-icon-right]:after { margin-left: var(--space-sm); }

.icon--is-spinning { animation: icon-spin 1s infinite linear; }

@keyframes icon-spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.icon use { color: inherit; fill: currentColor; }

.icon--style[data-icon]:before { color: var(--color-primary); background: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), 0.3); border-radius: 100%; width: 1em; height: 1em; font-size: 6em; line-height: 1; }

.icon--style.icon-text { padding-left: 0; }

.icon--style.icon-text[data-icon]:before { font-size: 3em; margin-right: var(--space-xxxs); }

.btn { display: inline-flex; position: relative; white-space: nowrap; justify-content: center; align-items: center; border-radius: 1em; cursor: pointer; padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-md); font-size: .8em; font-weight: 500; text-transform: uppercase; text-decoration: none; line-height: 1; font-family: var(--font-secondary), sans-serif; transition: all .5s; }

.btn--primary { border: 1px solid var(--color-primary); color: var(--color-primary); background: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.btn--primary:hover { border: 1px solid var(--color-primary-light); color: var(--color-primary-light); }

.btn--subtle { color: var(--color-primary); background: var(--color-white); }

.btn--accent { background-color: transparent; color: var(--color-white); border: 1px solid var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.btn--accent:hover { color: var(--color-primary); border: 1px solid var(--color-primary); transition: all 0.5s ease; }

.btn--secondary { background-color: var(--color-white); color: var(--color-contrast-high); border: 1px solid var(--color-white); transition: all 0.3s ease; }

.btn--secondary:hover { background-color: transparent; color: var(--color-white); }

.btn--disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.btn--sm { font-size: var(--text-xs); }

.btn--md { font-size: var(--text-sm); }

.btn--lg { font-size: var(--text-md); }

.btn--full-width { display: flex; width: 100%; }

.btn .icon { color: inherit; flex-shrink: 0; }

.btn--icon-text { align-items: center; }

.btn--icon-text[data-icon] { padding-left: var(--space-sm); }

.btn--icon-text[data-icon]:before { margin-right: var(--space-xs); }

.btn--icon-text[data-icon-right] { padding-right: var(--space-xs); }

.btn--icon-text[data-icon-right]:after { margin-left: var(--space-sm); }

.btn--icon { padding: var(--space-xs); }

.btn.tel { border: none; color: var(--color-primary); background: transparent; padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; }

.btn.tel[data-icon]:before { background: var(--color-primary); color: var(--color-white); width: 2em; height: 2em; border-radius: 100%; line-height: 2; text-align: center; }

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

.color-accent { color: var(--color-accent); }

.form-control { width: 100%; background-color: var(--color-bg); padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-sm); border-bottom: 2px solid var(--color-contrast-low); border-radius: .2em; }

.form-control::-webkit-input-placeholder { color: var(--color-contrast-high); }

.form-control::-moz-placeholder { opacity: 1; color: var(--color-contrast-high); }

.form-control:-ms-input-placeholder { color: var(--color-contrast-high); }

.form-control:-moz-placeholder { color: var(--color-contrast-high); }

.form-control:focus { border-bottom: 2px solid var(--color-primary); }

.form-control[disabled], .form-control[readonly] { cursor: not-allowed; }

.form-control[aria-invalid="true"] { border: 2px solid var(--color-primary); }

.form-control--picker + .icon { position: absolute; right: var(--space-xxxs); bottom: var(--space-xxxxs); font-size: 1.5em; color: var(--color-contrast-medium); pointer-events: none; }

.form-control--picker + .icon:before { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.form-legend { color: var(--color-contrast-higher); font-size: var(--text-md); line-height: 1.2; margin-bottom: var(--space-xxs); }

.form-label { font-size: var(--text-sm); display: inline-block; }

.form__msg-error { position: absolute; top: 0.3em; right: 0; color: var(--color-error); font-size: .8rem; }

.form__msg-error--is-visible { position: relative; clip: auto; }

.radio-list > *, .checkbox-list > * { position: relative; display: flex; align-items: baseline; margin-bottom: var(--space-xxs); }

.radio-list > *:last-of-type, .checkbox-list > *:last-of-type { margin-bottom: 0; }

.radio-list label, .checkbox-list label { line-height: var(--body-line-height); user-select: none; }

.radio-list input, .checkbox-list input { vertical-align: top; margin-right: var(--space-xxxs); flex-shrink: 0; }

.radio-list.radio-list--inline, .radio-list.checkbox-list--inline, .checkbox-list.radio-list--inline, .checkbox-list.checkbox-list--inline { display: flex; margin-bottom: calc(-1 * var(--space-md)); }

.radio-list.radio-list--inline > *, .radio-list.checkbox-list--inline > *, .checkbox-list.radio-list--inline > *, .checkbox-list.checkbox-list--inline > * { margin: 0 var(--space-md) var(--space-md) 0; }

/* --------------------------------

Title: Custom Select Control

-------------------------------- */
/* --------------------------------

Title: Custom Select Control

-------------------------------- */
.select { position: relative; }

.select select { padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) * 2); }

.select .icon { width: var(--select-icon-size); height: var(--select-icon-size); position: absolute; right: var(--select-icon-right-margin); top: 50%; transform: translateY(-50%); pointer-events: none; }

/* --------------------------------

Title: Quick form

-------------------------------- */
.quick-form { padding: var(--space-lg); box-shadow: var(--shadow-md); position: absolute; z-index: var(--zindex-popover); transform: translate(-50%, -75%); left: 50%; right: auto; background: var(--color-white); border-radius: .25em; }

.quick-form__description { text-align: center; margin-bottom: var(--space-md); line-height: 1.4; color: var(--color-contrast-medium); }

.quick-form__title { text-align: center; position: relative; }

.quick-form .quick-form--icon { position: absolute; top: 0; transform: translate(-50%, -50%); left: 50%; right: auto; /*  border: 1px solid var(--color-contrast-low); */ padding: .5em; width: 8em; height: 8em; border-radius: 100%; background: var(--color-white); }

.quick-form .quick-form--icon[data-icon]:before { font-size: var(--icon-sm); color: var(--color-primary); }

.quick-form .btn { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }

/* --------------------------------

Title: Floating Label
Descr: Input element w/ placeholder that morphs into a label

-------------------------------- */
.floating-label { position: relative; }

.floating-label .form-label { position: absolute; top: -2px; transition: transform .2s; transform: translateY(-80%); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }

.floating-label .form-label--floating { clip: auto; clip-path: none; transform: translateY(30%); }

:root { --display: block; }

.is-visible { display: var(--display) !important; }

.is-hidden { display: none !important; }

.sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; white-space: nowrap; }

/* --------------------------------

Title:Main Header
Descr:Accessible website navigation

-------------------------------- */
.main-content { margin-top: var(--main-header-height); }

.main-header { box-shadow: var(--shadow-sm); top: 0; height: var(--main-header-height); position: fixed; width: 100%; background-color: var(--color-bg); z-index: var(--zindex-fixed-element); }

.main-header__layout { padding: var(--space-sm) 0; padding: 0; display: flex; justify-content: space-between; align-items: center; }

.main-header__logo { width: 12em; }

.main-header__logo a, .main-header__logo svg, .main-header__logo img { display: block; }

.header-container { background: var(--color-white); }

.main-header__nav { margin-top: var(--space-sm); font-size: 1.25em; margin-top: 0; position: absolute; top: 5em; left: 0; width: 100%; background-color: var(--color-bg); box-shadow: var(--shadow-md); padding: var(--component-padding); display: none; }

.main-header__nav-label { color: var(--color-contrast-medium); margin-bottom: var(--space-xs); }

.main-header__nav-item { margin-bottom: var(--space-xs); }

.main-header__nav-link { color: var(--color-contrast-higher); font-size: var(--text-md); }

.main-header__nav-link[aria-current] { color: var(--color-primary-light); }

.main-header__nav-divider { height: 1px; width: 100%; background-color: var(--color-contrast-low); }

.main-header__nav-trigger { display: inline-flex; margin-left: var(--space-sm); }

.main-header__nav-trigger-icon { position: relative; display: block; height: 2px; width: 1em; background: var(--gradient); margin-right: var(--space-xxs); transition: 0.2s; }

.main-header__nav-trigger-icon::before, .main-header__nav-trigger-icon::after { content: ''; position: absolute; left: 0; top: 0; width: inherit; height: inherit; background: var(--gradient); transition: 0.2s; }

.main-header__nav-trigger-icon::before { transform: translateY(-5px); }

.main-header__nav-trigger-icon::after { transform: translateY(5px); }

.main-header__nav-trigger[aria-expanded="true"] .main-header__nav-trigger-icon { background-color: transparent; }

.main-header__nav-trigger[aria-expanded="true"] .main-header__nav-trigger-icon::before { transform: rotate(45deg); }

.main-header__nav-trigger[aria-expanded="true"] .main-header__nav-trigger-icon::after { transform: rotate(-45deg); }

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

/* --------------------------------

Title:Dropdown
Descr:A hoverable link that toggles the visibility of a dropdown list

-------------------------------- */
.dropdown { position: relative; display: inline-block; }

.dropdown__menu { width: 200px; border-radius: 0.25em; padding: var(--space-xxs) 0; background-color: var(--color-bg); box-shadow: var(--shadow-sm); z-index: var(--zindex-popover); position: absolute; left: 0; top: 100%; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }

.dropdown__wrapper:hover > .dropdown__menu, .dropdown__sub-wrapper:hover > .dropdown__menu { clip: auto; clip-path: none; }

.dropdown__sub-wrapper:hover > .dropdown__menu { left: 100%; }

.dropdown__item { display: block; text-decoration: none; color: var(--color-contrast-high); padding: var(--dropdown-item-padding); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dropdown__item:hover, .dropdown__item.dropdown__item--hover { background-color: var(--color-contrast-lower); }

.dropdown__separator { height: 1px; background-color: var(--color-contrast-low); margin: var(--dropdown-item-padding); }

.dropdown__sub-wrapper { position: relative; }

.dropdown__sub-wrapper > .dropdown__item { position: relative; padding-right: calc(var(--space-sm) + 12px); }

.dropdown__sub-wrapper > .dropdown__item .icon { position: absolute; display: block; width: 12px; height: 12px; right: var(--space-xxs); top: calc(50% - 6px); }

.dropdown__sub-wrapper > .dropdown__menu { top: calc(var(--space-xxs) * -1); box-shadow: var(--shadow-md); }

.dropdown__menu { top: calc(100% + 1em); }

.dropdown__sub-wrapper .dropdown__menu { top: calc(var(--space-xxs) * -1); }

.dropdown__menu--is-visible { clip: auto; clip-path: none; animation: dropdown-show 0.2s forwards; }

.dropdown__menu--is-hidden { animation: dropdown-hide 0.2s; }

.dropdown__sub-wrapper > .dropdown__menu--is-visible, .dropdown__sub-wrapper > .dropdown__menu--is-hidden { left: 100%; }

.dropdown__sub-wrapper > .dropdown__menu--is-visible.dropdown__menu--left, .dropdown__sub-wrapper > .dropdown__menu--is-hidden.dropdown__menu--left { left: -100%; }

@keyframes dropdown-show { 0% { opacity: 0;
    transform: translateY(-4px); }
  100% { opacity: 1;
    transform: translateY(0); } }

@keyframes dropdown-hide { 0% { clip: auto;
    clip-path: none;
    opacity: 1;
    transform: translateY(0); }
  100% { clip: auto;
    clip-path: none;
    opacity: 0;
    transform: translateY(-4px); } }

/* --------------------------------

Title:Main Footer
Descr:Footer navigation

-------------------------------- */
.main-footer { background: var(--color-contrast-high); }

.main-footer__logo { flex-shrink: 0; margin-bottom: var(--space-xxs); width: 23em; }

.main-footer__logo a, .main-footer__logo svg, .main-footer__logo img { width: 100%; display: block; }

.main-footer__logo a + img { width: 80%; margin: 0 auto; }

.main-footer__img { flex-shrink: 0; width: 10em; margin: 0 auto; align-self: start; }

.main-footer__nav-bottom p { font-weight: 500; color: var(--color-white); }

.main-footer__nav-bottom img { width: 8em; margin-left: var(--space-md); }

.main-footer__nav { padding: var(--space-lg) 0; }

.main-footer__nav-list { display: flex; align-items: flex-start; flex-wrap: wrap; }

.main-footer__nav-item { display: grid; grid-gap: var(--space-xxs); margin-bottom: var(--space-md); width: auto; padding-right: var(--space-xxl); }

.main-footer__nav-item p { color: var(--color-white); }

.main-footer__nav-item a { color: var(--color-contrast-low); }

.main-footer__nav-item a:hover { color: var(--color-white); }

.main-footer__colophon { padding-top: var(--space-xxxs); display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; background: var(--color-primary); }

.main-footer__colophon-nav { font-size: var(--text-sm); color: var(--color-primary-darker); margin-right: var(--space-sm); }

.main-footer__colophon-nav > * { margin-right: var(--space-xxs); }

.main-footer__colophon-nav a { color: var(--color-primary-darker); }

.main-footer__colophon-nav a:hover { color: var(--color-white); }

.main-footer__socials { display: flex; margin: var(--space-xxs) 0; }

.main-footer__socials a { text-decoration: none; display: inline-block; margin-left: var(--space-xxs); color: var(--color-contrast-medium); }

.main-footer__socials a:hover { color: var(--color-contrast-high); }

.main-footer__socials a svg { display: block; width: 2em; height: 2em; color: inherit; }

.img-list li { background: var(--color-white); border-radius: .5em; padding: var(--space-md); width: calc(100%/4 - var(--space-lg)); border: 1px solid var(--color-contrast-ligher); }

/* --------------------------------

Title: Hero
Descr: A full-width callout section

-------------------------------- */
.hp .hero { height: var(--container-height-sm); }

.hero { display: flex; align-items: center; padding: var(--space-xxl) 0; background-color: var(--color-bg); height: var(--container-height-xs); background-size: cover; background-repeat: no-repeat; background-position: center center; }

.hero.hero--img { min-height: auto; padding: 0; margin: var(--space-xl) auto var(--space-sm); }

.hero__content h1 { color: var(--color-white); font-size: var(--text-xxxxl); font-family: var(--font-title); }

.hero__content p { font-family: var(--font-primary); color: #FFF; line-height: 0; font-size: var(--text-xxxxl); }

.hero--img img { width: 100%; }

.hero__content--max-width-sm { max-width: 480px; }

.hero__content--max-width-md { max-width: 600px; }

.hero__content--max-width-lg { max-width: 720px; }

.text-component .hero__label { color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.8); font-size: var(--text-lg); margin-top: var(--space-xxs); }

.hero--center { text-align: center; }

.hero--center .hero__content { margin: 0 auto; }

.hero--center .hero__cta { justify-content: center; }

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

.hero--right .hero__content { margin: 0 0 0 auto; }

.hero--right .hero__cta { justify-content: flex-end; }

.hero--overlay-layer { position: relative; }

.hero--overlay-layer .hero__content { position: relative; z-index: 2; }

.hero--overlay-layer::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: var(--color-contrast-medium); opacity: .6; z-index: 1; }

/* --------------------------------

Title: Diagonal Hero
Descr: Hero section variation w/ diagonal edges

-------------------------------- */
.hero--diagonal, .hero--diagonal-top, .hero--diagonal-bottom { position: relative; background-color: transparent; }

.hero--diagonal::before, .hero--diagonal-top::before, .hero--diagonal-bottom::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--color-bg); left: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; }

.hero--diagonal .hero__content, .hero--diagonal-top .hero__content, .hero--diagonal-bottom .hero__content { position: relative; z-index: 1; }

@supports (clip-path: inset(50%)) { .hero--diagonal::before { height: calc(100% + var(--hero-diagonal-offset)*2); top: calc(var(--hero-diagonal-offset) * -1); clip-path: polygon(0% 0%, 100% var(--hero-diagonal-offset), 100% 100%, 0% calc(100% - var(--hero-diagonal-offset))); }
  .hero--diagonal-top::before { height: calc(100% + var(--hero-diagonal-offset)); top: calc(var(--hero-diagonal-offset) * -1); clip-path: polygon(0% 0%, 100% var(--hero-diagonal-offset), 100% 100%, 0% 100%); }
  .hero--diagonal-bottom::before { height: calc(100% + var(--hero-diagonal-offset)); top: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--hero-diagonal-offset))); } }

#hero-diagonal-1::before { background-image: url("../img/punaises-de-lit.jpg"); }

/* --------------------------------

Title:Sticky Hero
Descr:A sticky hero section that reveals its content on scroll

-------------------------------- */
.sticky-hero__media { position: relative; position: sticky; z-index: 1; top: 0; width: 100%; height: 70vh; overflow: hidden; transition: transform 0.5s var(--transition-ease-in-out); background-size: cover; background-position: center; background-repeat: no-repeat; transform: translateZ(0); }

.sticky-hero--overlay-layer .sticky-hero__media::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; background-color: var(--color-bg); transition: opacity 1s; }

.sticky-hero--media-is-fixed.sticky-hero--overlay-layer .sticky-hero__media::after { opacity: 0.5; }

.sticky-hero--media-is-fixed.sticky-hero--scale .sticky-hero__media { transform: scale(0.9); }

.sticky-hero__video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

.sticky-hero__video video { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; min-height: 100%; min-width: 100%; height: auto; width: auto; max-width: none; }

.sticky-hero__content { position: relative; z-index: 2; height: 70vh; display: flex; justify-content: center; align-items: center; transform: translateZ(0); }

/* --------------------------------

Title:Card
Descr:Container of information used as teasers for further content, often displayed in a gallery of related items

-------------------------------- */
.card { box-shadow: var(--shadow-sm); border-radius: 0.25em; overflow: hidden; }

.card__img img { display: block; width: 100%; }

.card__img--no-jump { position: relative; height: 0; padding-bottom: 67.5%; }

.card__img--no-jump img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.card__content { padding: var(--space-lg); }

.card__description { font-size: var(--text-sm); line-height: 1.4; color: var(--color-contrast-medium); }

.card--is-link { will-change: box-shadow; transition: box-shadow 0.2s; }

.card--is-link:hover { box-shadow: var(--shadow-md); }

.card--is-link:hover .card__img::after { opacity: 1; }

.card--is-link .card__img { position: relative; }

.card--is-link .card__img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.6); opacity: 0; transition: opacity 0.2s; }

.card__link { text-decoration: none; display: block; color: inherit; }

.card__link-icon { position: absolute; z-index: 1; width: 64px; height: 64px; top: calc(50% - 32px); left: calc(50% - 32px); opacity: 0; border-radius: 50%; background: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.9); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }

.card__link-icon .icon { display: block; width: 32px; height: 32px; color: var(--color-black); }

.card--is-link:hover .card__link-icon { opacity: 1; }

/* --------------------------------

Title:Call to Action Banner
Descr:A banner containing brief info about a subject, plus links/buttons

-------------------------------- */
.cta-banner { background-color: var(--color-primary-light); padding: var(--space-xl); overflow: hidden; position: relative; }

.cta-banner--icon { background-color: var(--color-bg); padding: var(--space-md); }

.cta-banner--icon .cta-banner__text { text-align: left; }

.cta-banner__text { text-align: center; margin-bottom: var(--space-md); padding-left: var(--space-md); z-index: var(--zindex-header); }

@supports (grid-area: auto) { .cta-banner__text { margin-bottom: 0; } }

.text-component h2 { font-weight: 500; }

.text-component .cta-banner__description { color: var(--color-contrast-medium); }

.cta-banner--bg:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.8); z-index: 1; pointer-events: none; }

.cta-banner--bg .text-component h2 { color: var(--color-white); }

.cta-banner__img img { display: block; width: 100%; }

.cta-banner__buttons { justify-content: center; }

.cta-banner--img-no-padding { padding: 0; grid-gap: 0; }

.cta-banner--img-no-padding .cta-banner__text { margin-bottom: 0; padding: var(--space-ld); }

.cta-banner--text-center .cta-banner__item--text { text-align: center; }

.cta-banner--text-center .cta-banner__item--text .cta-banner__buttons { justify-content: center; }

.cta-banner--text-center .cta-banner__item--text .cta-banner__buttons .btn--primary { background: var(--color-primary-dark); }

/* --------------------------------

Title:Steps
Descr:Multi-step indicator

-------------------------------- */
.steps { background-color: transparent; padding: calc(var(--step-circle-size)/2) 0 0; font-size: 0.85em; border-radius: 0.25em; }

.steps__list { display: flex; flex-wrap: wrap; margin-bottom: calc(var(--space-xs) * -1); }

.step__label { color: inherit; text-decoration: none; }

.step--completed .step__label, .step--current .step__label { color: var(--color-primary); }

.step--completed .step__label { text-decoration: underline; }

/* screen reader */
.step--completed .step__label::after, .step--current .step__label::after { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }

.step--completed .step__label::after { content: 'step completed'; }

.step--current .step__label::after { content: 'step current'; }

/* --------------------------------

Title: Features
Descr: A section containing a list of features

-------------------------------- */
.features { background: var(--color-bg); padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

.features__item { border-radius: 0.3em; position: relative; background: var(--color-white); padding: var(--space-md); }

.features__item img { display: block; margin-bottom: var(--space-sm); height: 200px; margin-left: auto; margin-right: auto; }

.features__item .features__title { color: var(--color-contrast-high); font-family: var(--font-primary); font-size: var(--text-lg); }

.features__item .features__title strong { font-size: var(--text-xl); display: block; }

.features__item h4 { font-size: 1em; text-transform: uppercase; border-top: 2px solid var(--color-primary); padding-top: 1em; border-bottom: 2px solid var(--color-primary); padding-bottom: 1em; margin-bottom: 1em; }

.features--img-sm img { max-width: 128px; }

.features--center-content { text-align: center; }

.features--center-content .features__item { text-align: center; }

.features--center-content .features__item img { margin-left: auto; margin-right: auto; }

.features--icon [data-icon]:before { display: block; margin-right: var(--space-xs); background: var(--color-bg); color: var(--color-contrast-high); border: 1px solid var(--color-contrast-high); width: var(--text-xxxl); height: var(--text-xxxl); font-size: var(--text-xxxl); text-align: center; border-radius: 100%; line-height: 1.5; }

.features--icon a:hover:before { border: 1px solid var(--color-primary); color: var(--color-white); background: var(--gradient); }

.features__box { background: var(--color-bg); border-radius: .5em; padding: var(--space-sm); }

.features__box img { width: 100%; height: auto; }

.features--icon .more-container [data-icon]::before { margin-right: 0; }

.bandeau { background: var(--gradient); }

.bandeau .bandeau-item { border-right: 1px solid #FFF; padding: var(--text-base-size); }

.bandeau .bandeau-item:last-child { border: none; }

.bandeau .bandeau-item h4 { font-family: var(--font-title); text-transform: uppercase; }

.bandeau .bandeau-item .btn:hover { border: 1px solid var(--color-white); color: var(--color-white); }

.bandeau * { color: #FFF; }

/* --------------------------------

Title:Feature
Descr:Content group containing text + media (img, video, iframe, inline SVG)

-------------------------------- */
.feature__text { margin-bottom: var(--space-md); text-align: left; }

.feature__text .text-component h1, .feature__text .text-component h2, .feature__text .text-component h3, .feature__text .text-component h4 { margin-top: 0; }

.feature__text-inner { width: 100%; }

.feature__label { display: inline-block; color: var(--color-contrast-medium); }

.feature__media { display: flex; align-items: center; }

.feature__media figure { width: 100%; position: relative; overflow: hidden; height: 100%; }

.feature__media video, .feature__media img, .feature__media svg { display: block; }

.feature__media video, .feature__media img { width: 100%; height: auto; }

@supports (display: grid) { .feature__media svg { width: 100%; height: auto; } }

.feature__media-bgimg figure { overflow: hidden; width: 20em; height: 20em; border-radius: 100%; }

.feature__media-bgimg figure:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.8); z-index: 1; pointer-events: none; }

.feature__iframe-wrapper { position: relative; padding-bottom: 56.25%; height: 0; width: 100%; }

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

.feature--text-center .feature__text { text-align: center; padding: 0 5%; }

.feature--text-center .feature__cta { justify-content: center; }

.feature__cta img { height: 5em; }

.more-container .features__item { background: var(--color-bg); border: 10px solid var(--color-white); border-radius: 1em; text-align: center; }

.more-container .features__item .text-component:before { color: #FFF; text-transform: uppercase; background: var(--gradient); border: none; display: inline-block; }

/* --------------------------------

Title:Table
Descr:Data tables used to organize and display information in rows and columns

-------------------------------- */
.table { font-size: 1em; position: relative; border-bottom: 2px solid var(--color-contrast-low); }

.table table { vertical-align: top; width: 100%; }

.table th, .table td { padding: var(--space-sm); text-align: left; position: relative; }

.table th { font-weight: 700; color: var(--color-contrast-high); text-transform: uppercase; }

.table td.table__cell--action .btn { margin: var(--space-xxs); }

.table td ul li { margin: var(--space-xxs) 0; display: block; }

.table td ul li .btn { padding: var(--space-xxs); }

.table td .form-label { display: block; margin: var(--space-xxs) 0; }

.table .table__caption { margin-bottom: 0; padding-left: var(--space-sm); }

.table th img, .table td span { display: block; }

.table th img { width: 4em; }

.table.no-scroll:hover, .table.no-scroll:hover .table__inner { overflow: initial; }

.table__inner { padding: var(--space-sm); }

.table__caption { padding: var(--space-sm) 0; }

.table__caption h5 { font-size: var(--text-md); }

.table__header { border-top: 1px solid var(--color-contrast-lower); }

.table__body tr { border-top: 3px solid var(--color-bg); border-radius: .5em; background-color: var(--color-white); }

.table__body tr:first-child { border-top: 2px solid var(--color-primary); }

.table th .icon, .table td .icon { display: block; max-width: initial; font-weight: bold; }

.table th .icon[data-icon]:before, .table td .icon[data-icon]:before { font-weight: bold; -moz-osx-font-smoothing: inherit; }

.table th p .btn, .table td p .btn { padding: 0; }

.table__scrolling-indicator, .table__body-shadow { display: none; }

.table::after { content: ''; position: absolute; top: 0; right: -1px; height: 100%; width: 36px; z-index: 1; pointer-events: none; display: none; background: linear-gradient(to right, hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0), var(--color-bg)); }

.table.table--show-scrolling-indicator::after { display: block; }

.table.table--show-scrolling-indicator .table__scrolling-indicator { display: flex; }

.table.table--scrolling-x-started .table__scrolling-indicator { display: none; }

.table__scrolling-indicator { background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; line-height: inherit; appearance: none; position: absolute; width: 40px; height: 40px; top: calc(50% - 20px); right: 6px; z-index: 2; border-radius: 50%; display: none; background-color: var(--color-contrast-higher); justify-content: center; align-items: center; animation: hintRight 1s; }

.table__scrolling-indicator .icon { width: 24px; height: 24px; display: block; color: var(--color-bg); }

@supports (--css: variables) { .table--sticky-header { border-bottom: 0; }
  .table--sticky-header .table__header { border-bottom: 2px solid var(--color-primary); }
  .table--sticky-header .table__header tr { display: block; }
  .table--sticky-header .table__body { display: block; height: 500px; max-height: 60vh; width: 100%; overflow: auto; }
  .table--sticky-header .table__body tr { border-radius: .5em; background-color: var(--color-white); }
  .table--sticky-header .table__body-shadow { display: block; position: absolute; width: 120%; margin-left: -10%; left: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 -1px 3px rgba(0, 0, 0, 0.2); pointer-events: none; }
  .table--sticky-header.table--scrolling-x .table__body { overflow-x: hidden; }
  .table--sticky-header.table--scrolling-x tr > :last-child { padding-right: 1.6rem; }
  .table--sticky-header.table--is-loading { opacity: 0; } }

@keyframes hintRight { 0%, 50%, 100% { transform: translateX(0); }
  25%, 75% { transform: translateX(6px); } }

.table .table__cell--no-wrap { white-space: nowrap; }

.table .table__cell--center-x { text-align: center; }

.table .table__cell--center-x > * { margin-left: auto; margin-right: auto; }

.table .table__cell--center-y { vertical-align: middle; }

.table .table__cell--left { text-align: left; }

.table .table__cell--right { text-align: right; }

.table .table__cell--right > * { margin-left: auto; }

.table .table__cell--top { vertical-align: top; }

.table .table__cell--bottom { vertical-align: bottom; }

.table .table__row--is-hidden { height: 0; margin: 0; visibility: hidden; overflow: hidden; }

.table .table__row--is-hidden > * { height: 0; padding-top: 0; padding-bottom: 0; line-height: 0; }

.table .table__row--is-hidden > * * { display: none; }

.table .table__cell--xs { min-width: var(--table-cell-width-xs); }

.table .table__cell--sm { min-width: var(--table-cell-width-sm); }

.table .table__cell--md { min-width: var(--table-cell-width-md); }

.table .table__cell--lg { min-width: var(--table-cell-width-lg); }

.table .table__cell--xl { min-width: var(--table-cell-width-xl); }

.table .table__cell--xs-max { max-width: var(--table-cell-width-xs); }

.table .table__cell--sm-max { max-width: var(--table-cell-width-sm); }

.table .table__cell--md-max { max-width: var(--table-cell-width-md); }

.table .table__cell--lg-max { max-width: var(--table-cell-width-lg); }

.table .table__cell--xl-max { max-width: var(--table-cell-width-xl); }

.table .table__cell--info { display: block; background: var(--color-accent); width: 3px; height: 100%; left: 0; top: 0; position: absolute; }

.table .table__cell--item-block { display: block; }

/* --------------------------------

Title: Smooth Scrolling
Descr: Replace the default browser behaviour (jump) with a smooth scrolling transition.

-------------------------------- */
html { scroll-behavior: smooth; }

/* --------------------------------

Title: Customer Logos
Descr: A gallery of trusted companies

-------------------------------- */
.customer-logos { background: var(--color-bg); padding-top: var(--space-md); padding-bottom: var(--space-sm); }

.customer-logos__list { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

.customer-logos__list > * { margin: 0 var(--space-md) var(--space-sm); }

.customer-logos__logo { display: block; fill: var(--color-contrast-medium); height: 80px; background: var(--color-white); padding: var(--space-xs); }

/* --------------------------------

Title: Testimonials
Descr: A gallery of testimonial cards

-------------------------------- */
.testimonials__grid > * { margin-bottom: var(--space-md); }

.testimonials__card { background-color: var(--color-bg); padding: var(--component-padding); border-radius: var(--radius); }

.testimonials__card .icon { display: block; width: 64px; height: 64px; color: var(--color-primary); margin-bottom: var(--space-xxs); }

.testimonials__card footer { display: flex; align-items: center; flex-wrap: wrap; }

.testimonials__quote { line-height: 1.4; margin-bottom: var(--space-md); }

.testimonials__img { flex-shrink: 0; margin-right: var(--space-xxs); }

.testimonials__img img { display: block; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--color-bg); }

.testimonials__cite { font-size: var(--text-sm); }

.testimonials__cite span { display: block; color: var(--color-contrast-medium); margin-top: var(--space-xxxxs); }

.testimonials--center-content .testimonials__card { text-align: center; }

.testimonials--center-content .testimonials__card .icon { margin-left: auto; margin-right: auto; }

.testimonials--center-content .testimonials__card footer { display: block; }

.testimonials--center-content .testimonials__card .testimonials__img { margin: 0 0 var(--space-xxxs); display: flex; justify-content: center; }

/* --------------------------------

Title: Rating
Descr: A rating plugin that allows users to vote for your products

-------------------------------- */
.rating__control ul { display: inline-block; display: inline-flex; }

.rating__control li { position: relative; height: var(--rating-icon-size); width: var(--rating-icon-size); float: left; cursor: pointer; }

.rating__control li:focus { outline: none; }

.rating__control li:focus::before { transform: scale(1); opacity: 0.2; }

.rating__control li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: currentColor; border-radius: 50%; opacity: 0; transform: scale(0); transition: 0.2s; }

.rating__control li.rating__item--zero { display: none; }

.rating__control--is-hidden { display: none; }

.rating__icon, .rating__control li::before, .rating[data-animation="on"] .rating__control ul:hover .rating__icon { color: var(--color-accent); }

.rating__icon--inactive, .rating[data-animation="on"] .rating__control li:hover ~ li .rating__icon, .rating__item--checked ~ li .rating__icon { color: var(--color-contrast-low); }

.rating__icon { overflow: hidden; }

.rating__icon svg { display: block; height: var(--rating-icon-size); width: var(--rating-icon-size); max-width: var(--rating-icon-size); pointer-events: none; }

.rating--read-only .rating__control li { cursor: default; }

.rating__icon--inactive { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; }

.rating__item--half .rating__icon:not(.rating__icon--inactive) { position: relative; z-index: 2; width: 50%; }

.rating[data-animation="on"] .rating__control li:active .rating__icon { transform: scale(0.8); }

.rating[data-animation="on"] .rating__icon { transition: .2s; }

.rating__select { display: none; }

/* --------------------------------

Title: Tooltip
Descr: A popup displaying additional text information

-------------------------------- */
.tooltip-trigger { white-space: nowrap; border-bottom: 1px dotted var(--color-contrast-high); cursor: help; }

.tooltip { display: inline-block; position: absolute; padding: var(--space-xxs); border-radius: 0.2em; max-width: 200px; background-color: var(--color-bg); border: 1px solid var(--color-contrast-low); box-shadow: var(--shadow-md); font-size: var(--text-sm); line-height: 1.4; transition: opacity 0.2s, visibility 0.2s; }

@supports (clip-path: inset(50%)) { .tooltip::before { content: ''; position: absolute; background-color: inherit; border: inherit; width: var(--tooltip-triangle-size); height: var(--tooltip-triangle-size); clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%); } }

.tootip:not(.tooltip--sticky) { pointer-events: none; }

.tooltip--lg { max-width: 350px; padding: var(--space-xs); }

.tooltip--top::before, .tooltip--bottom::before { left: calc(50% - var(--tooltip-triangle-size) / 2); }

.tooltip--top::before { bottom: calc(var(--tooltip-triangle-size) * -0.5); transform: rotate(-45deg); }

.tooltip--bottom::before { top: calc(var(--tooltip-triangle-size) * -0.5); transform: rotate(135deg); }

.tooltip--left::before, .tooltip--right::before { top: calc(50% - var(--tooltip-triangle-size) / 2); }

.tooltip--left::before { right: calc(var(--tooltip-triangle-size) * -0.5); transform: rotate(-135deg); }

.tooltip--right::before { left: calc(var(--tooltip-triangle-size) * -0.5); transform: rotate(45deg); }

.tooltip--is-hidden { visibility: hidden; opacity: 0; }

.single-point { position: absolute; border-radius: 50%; z-index: 2; }

.single-point > a { position: relative; z-index: 2; display: block; width: 20px; height: 20px; border-radius: inherit; background: var(--color-primary); /* rotating plus icon */ }

.single-point > a::after, .single-point > a:before { content: ''; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; transform: translateX(-50%) translateY(-50%); background-color: var(--color-primary); }

.single-point > a::after { height: 2px; width: 12px; }

.single-point > a::before { height: 12px; width: 2px; }

.single-point .more-info { position: absolute; left: 50%; right: auto; transform: translateX(-50%); bottom: -150%; }

.single-point h2 { color: var(--color-white); font-size: var(--text-lg); }

.single-point::after { content: ''; position: absolute; z-index: 1; width: 25px; height: 25px; top: -2.5px; left: -2.5px; border-radius: inherit; background-color: transparent; animation: pulse 2s infinite; }

.single-point:nth-of-type(1) { bottom: 55%; right: 35%; }

.single-point:nth-of-type(2) { bottom: 25%; right: 55%; }

.single-point:nth-of-type(3) { top: 28%; left: 31%; }

.single-point:nth-of-type(4) { top: 70%; right: 30%; }

.single-point:nth-of-type(5) { bottom: 10%; right: 50%; }

@keyframes pulse { 0% { transform: scale(1);
    box-shadow: inset 0 0 1px 1px var(--color-primary); }
  50% { box-shadow: inset 0 0 1px 1px var(--color-primary); }
  100% { transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px var(--color-primary); } }

.content--list { background: var(--color-primary-light); padding: var(--space-xl); }

.content--list ul { margin-top: var(--space-md); }

.content--list li { background: var(--color-white); padding-bottom: var(--space-sm); }

.content--list li:nth-child(odd) { background: var(--color-contrast-lower); }

.content--list li[data-icon]:before { font-size: var(--space-md); font-weight: bold; -moz-osx-font-smoothing: inherit; color: var(--color-white); margin-left: var(--space-sm); padding: var(--space-xxxs); background: var(--color-accent); border-radius: 100%; width: 50px; height: 50px; text-align: center; }

/* --------------------------------

Title: Details
Descr: A button that toggles the visibility of additional information

-------------------------------- */
.details__summary { list-style: none; }

.details__summary .icon-text { display: block; width: 1em; margin: 0 auto; }

.details__summary::-webkit-details-marker { display: none; }

.details .details__summary .icon { transform: rotate(90deg); }

.details[open] .details__summary .icon { transform: rotate(-90deg); }

.details__content[aria-hidden="true"] { display: none; }

/* --------------------------------

Title: List
Descr: Custom list component

-------------------------------- */
.list, .text-component .list { --list-v-space: 1; --list-offset: 1; padding-left: 0; list-style: none; }

.list ul, .list ol, .text-component .list ul, .text-component .list ol { list-style: none; margin: 0; margin-top: calc(var(--list-v-space, 1) * var(--space-xxxs)); padding-top: calc(var(--list-v-space, 1) * var(--space-xxxs)); padding-left: calc(var(--space-xs) * var(--list-offset, 1)); }

.list ul > li:last-child, .list ol > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child { padding-bottom: 0; margin-bottom: 0; }

.list li, .text-component .list li { padding-bottom: calc(var(--list-v-space, 1) * var(--space-xxxs)); margin-bottom: calc(var(--list-v-space, 1) * var(--space-xxxs)); }

.list--ul li, .list--ol li { padding-left: calc(var(--bullet-size) + var(--bullet-margin-right)); }

.list--ul li::before, .list--ol li::before { width: var(--bullet-size); height: var(--bullet-size); margin-left: calc(var(--bullet-size) * -1); display: inline-flex; vertical-align: middle; position: relative; left: calc(var(--bullet-margin-right) * -1); }

.list--ul { --bullet-size: 7px; --bullet-margin-right: var(--space-xxs); }

.list--ul li::before { content: ''; border-radius: 50%; color: var(--color-primary); background: var(--gradient); -webkit-text-fill-color: transparent; }

.list--ul ul li::before { background-color: transparent; }

.list--ol { --bullet-size: 26px; --bullet-margin-right: 6px; counter-reset: list-items; }

.list--ol li { counter-increment: list-items; }

.list--ol ol { counter-reset: list-items; }

.list--ol li::before { content: counter(list-items); font-size: 0.75em; justify-content: center; align-items: center; top: -0.1em; border-radius: 50%; background-color: var(--color-contrast-lower); border: 2px solid var(--color-contrast-lower); color: var(--color-contrast-high); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.list--ol ol li::before { background-color: transparent; }

.list--border li { border-bottom: 1px solid var(--color-contrast-low); }

.list--border ul, .list--border ol { border-top: 1px solid var(--color-contrast-low); }

.list--border ul li:last-child, .list--border ol li:last-child { border-bottom-width: 0; }

/* --------------------------------

Title: Tabs
Descr: Tabs are multiple content sections (panels), accessible one at a time using control labels

-------------------------------- */
.tabs__controls { display: flex; flex-wrap: wrap; margin-bottom: var(--space-xs); width: 25%; align-content: flex-start; }

.tabs__controls li { width: 100%; display: inline-block; margin: 0; }

.tabs__controls li:last-child a { border-bottom: 0; }

.tabs__controls a { border-bottom: 2px solid var(--color-bg); padding: var(--space-xs) var(--space-sm); white-space: nowrap; color: inherit; border-radius: var(--tabs-control-radius); width: 100%; position: relative; }

.tabs__controls a:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; }

.tabs__controls a:hover { background-color: var(--color-bg); }

.tabs__controls a:hover:after { background: var(--gradient); }

.tabs__panel { margin-bottom: var(--space-md); }

.tabs__panels { width: 80%; background: var(--color-bg); padding: 2em; }

.js .tabs__controls a { text-decoration: none; }

.js .tabs__controls .tabs__control--selected { background-color: var(--color-bg); color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.js .tabs__controls .tabs__control--selected:before { border: 1px solid var(--color-primary); color: var(--color-white); background: var(--gradient); }

.js .tabs__controls .tabs__control--selected:after { background: var(--gradient-top); }

.js .tabs__panel { margin-bottom: 0; display: none; }

.js .tabs__panel--selected { display: block; }

/* --------------------------------

Title: Floating Label
Descr: Input element w/ placeholder that morphs into a label

-------------------------------- */
.js .floating-label { position: relative; }

.js .floating-label .form-label { position: absolute; top: 1.5em; transition: transform .2s; transform: translateY(-80%); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }

.js .floating-label .form-label--floating { clip: auto; clip-path: none; transform: translateY(-100%); }

/* --------------------------------

Title: Switch
Descr: Custom ON/OFF checkbox toggle

-------------------------------- */
.switch { margin-left: 1em; display: flex; flex-shrink: 0; align-items: center; position: relative; width: var(--switch-width); height: var(--switch-height); border-radius: 50em; padding: var(--switch-padding) 0; }

.switch__input, .switch__label { position: absolute; left: 0; top: 0; }

.switch__input { margin: 0; padding: 0; opacity: 0; height: 0; width: 0; pointer-events: none; }

.switch__input:checked + .switch__label { background: var(--gradient); }

.switch__input:checked + .switch__label + .switch__marker { left: calc(100% - var(--switch-height) + var(--switch-padding)); }

.switch__input:focus + .switch__label, .switch__input:active + .switch__label { --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); box-shadow: 0 0 0 3px var(--color-shadow); }

.switch__label { width: 100%; height: 100%; color: transparent; user-select: none; background-color: var(--color-contrast-low); border-radius: inherit; z-index: 1; transition: background var(--switch-animation-duration); }

.switch__marker { position: relative; background-color: var(--color-white); width: calc(var(--switch-height) - var(--switch-padding) * 2); height: calc(var(--switch-height) - var(--switch-padding) * 2); border-radius: 50%; z-index: 2; pointer-events: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); left: var(--switch-padding); transition: left var(--switch-animation-duration); will-change: left; }