@charset "UTF-8"; /* purgecss start ignore */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, path, clipPath)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; -webkit-tap-highlight-color: transparent; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; overflow-wrap: break-word; word-wrap: break-word; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* hide arrow in details on safari and ios */ ::-webkit-details-marker { display: none; } /* purgecss end ignore */ @font-face { font-family: "hsh-icons"; src: url("../fonts/icons/hsh-icons.ttf?dvole3") format("truetype"), url("../fonts/icons/hsh-icons.ttf?dvole3") format("woff"), url("../fonts/icons/hsh-icons.ttf?dvole3#hsh-icons") format("svg"); font-weight: normal; font-style: normal; font-display: block; } :root { --grid-columns: 12; --grid-gap: 0.8rem; --grid-gap-block: 1.6rem; --grid-edge: 2.4rem; --layout-max-width: 168rem; --container-columns: 12; --column-size: 12; --minus-gap: 1; --cta-height: 5.6rem; --header-height: 9.6rem; --header-offset-block: 2.4rem; --wp-sidebar: 0px; --wp-topbar: 46px; --radius--md: 8.8rem; --radius--default: 4rem; --radius--sm: 3.2rem; --radius--xs: 2.4rem; --radius--xxs: 1.6rem; --radius--xxxs: 1.2rem; --radius--4xs: 0.8rem; --shadow--default: 0 0 2rem hsl(from var(--black) h s l/20%); --white: #ffffff; --black: #000000; --grey--lighter: hsl(216, 26.3%, 96.3%); --grey--light: hsl(0, 0%, 92%); --grey: hsl(0, 0%, 85%); --grey--medium: hsl(0, 0%, 60%); --grey--dark: hsl(0, 0%, 40%); --green: hsl(118, 66%, 88%); --purple: hsl(300, 12%, 20%); --blue: hsl(185, 28%, 43%); --salmon: hsl(20, 71%, 81%); --salmon--dark: hsl(20, 50%, 63%); --sand: hsl(27, 100%, 96%); --red: hsl(0, 51%, 60%); --orange: hsl(29, 75%, 65%); --gradient: linear-gradient( var(--gradient-direction, 101deg), var(--turquoise), var(--green) ); --gradient--dark: linear-gradient( var(--gradient-direction, 101deg), var(--turquoise--darker), var(--turquoise--dark) ); --based-font-size: 1.6rem; --based-line-height: 1.5em; --root-font-size: 10; --title-font: Rethink Sans, system-ui, sans-serif; --text-font: Rethink Sans, system-ui, sans-serif; --text-color--accent: var(--green); --text-color--accent-2: var(--salmon--dark); --text-color--accent-3: var(--blue); --text-color--bright: var(--white); --text-color--medium: var(--grey--medium); --text-color--default: var(--purple); --text-color: var(--text-color--default, black); --title-color--bright: var(--white); --title-color--light: var(--sand); --title-color--default: var(--purple); --title-color--accent-2: var(--salmon); --title-color--accent-3: var(--blue); --title-color: var(--title-color--default); --stroke-color--accent: var(--green); --stroke-color--accent-2: var(--salmon); --stroke-color--accent-3: var(--blue); --stroke-color--medium: var(--grey); --stroke-color--light: var(--grey--light); --stroke-color--bright: var(--white); --stroke-color--default: var(--purple); --stroke-color: var(--stroke-color--default, black); --background-color--accent: var(--green); --background-color--accent-2: var(--salmon); --background-color--accent-3: var(--blue); --background-color--accent-4: var(--sand); --background-color--default: var(--white); --background-color--lighter: var(--grey--lighter); --background-color--medium: var(--grey); --background-color--dark: var(--purple); --background-color: var(--background-color--default, white); --icon-color: currentColor; --warning: var(--orange, tomato); --alert: var(--red, tomato); --success: var(--green, yellowgreen); --row-background: var(--background-color); --row-padding-block: 3em; --row-margin-block: 3em; --block-padding-block: 3em; --block-margin-block: 6.4rem; --transition-property: all; --transition-easing: cubic-bezier(0.25, 0, 0.2, 1); --transition-duration: 0.32s; --wp-topbar: 0px; } :root:has(#wpadminbar) { --wp-topbar: 46px; } @media screen and (min-width: 783px) { :root:has(#wpadminbar) { --wp-topbar: 32px; } } @media screen and (min-width: 961px) { :root:has(#wpadminbar) { --wp-sidebar: 160px; } } @media screen and ( min-width: 40em ) { :root { --grid-edge: 4rem; --grid-gap: 2.4rem; } } @media screen and ( min-width: 48em ) { :root { --block-margin-block: 10rem; --grid-gap: 3.2rem; --grid-edge: 4.8rem; } } @media screen and ( min-width: 64em ) { :root { --row-padding-block: 4em; --block-padding-block: 3em; --header-offset-block: 4rem; --grid-gap-block: 2.4rem; --grid-edge: 8rem; } } @media screen and ( min-width: 80em ) { :root { --block-margin-block: 12rem; --grid-gap: 3.2rem; } } :root { --z-index--breadcrumb: 50; --z-index--header-curtain: 100; --z-index--header: 150; --z-index--header-nav: 200; --z-index--header-actions: 250; --z-index--header-logo: 300; --z-index--header-search: 350; --z-index--dialog: 400; } .hidden { display: none; } .mobile-only { display: none; } @media screen and ( max-width: 47.9375em ) { .mobile-only { display: block; } } @media screen and ( min-width: 48em ) { .mobile-only { display: none !important; } } .desktop-only { display: none; } @media screen and ( max-width: 47.9375em ) { .desktop-only { display: none !important; } } @media screen and ( min-width: 48em ) { .desktop-only { display: block; } } html, body { font-family: var(--text-font); font-size: calc(var(--root-font-size, 16) / 16 * 100%); font-optical-sizing: auto; font-weight: 400; text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } .page__wrapper { font-size: var(--based-font-size); line-height: var(--based-line-height); } *:not(.icon) { color: var(--text-color); } em { font-style: italic; } strong { font-weight: 800; } mark { background-color: var(--green); } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--selection-color, var(--purple)); background: var(--selection-background, hsl(from var(--salmon) h s 93%)); } ::selection { color: var(--selection-color, var(--purple)); background: var(--selection-background, hsl(from var(--salmon) h s 93%)); } .title--gradient :is(span, a, .icon)::-moz-selection { -webkit-text-fill-color: var(--text-color--accent-darker); } .title--gradient :is(span, a, .icon)::selection { -webkit-text-fill-color: var(--text-color--accent-darker); } .block--blue { --title-color: var(--title-color--light); --text-color: var(--text-color--bright); } .flex, .block__header { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--row, .block__header, .flex--grid { gap: var(--grid-gap-block) var(--grid-gap); } .flex--row > :where(*:not([class*=col-])), .block__header > :where(*:not([class*=col-])), .flex--grid > :where(*:not([class*=col-])) { flex: 0 0 100%; } .flex--grid { gap: max(var(--grid-gap), 1.5em) var(--grid-gap); } .flex--grid > * + * { margin-block-start: 0 !important; } .flex > [class*=col-], .block__header > [class*=col-] { flex: var(--width, 0 0 calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); min-width: var(--min-width, calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%))); } .flex--column { flex-direction: column; } .flex--column.flex--h-center { align-items: center; } .flex :where(.col-auto), .block__header :where(.col-auto) { --width: 0 0 auto; --min-width: auto; } .flex :where(.col-grow), .block__header :where(.col-grow) { --width: 1 0 auto; --min-width: auto; } .flex :where(.col-flow), .block__header :where(.col-flow) { --width: 1 1 0%; --min-width: auto; } .flex--auto > :where(*:not([class*=col-])) { flex: 0 0 auto; max-width: 100%; } .flex--grow > :where(*:not([class*=col-])) { flex: 1; } .flex--flow > :where(*:not([class*=col-])) { flex: 1; } .flex--column { flex-wrap: nowrap; flex-direction: column; } .flex--justify { justify-content: center; } .flex--v-spaced { align-content: space-between; } .flex--v-top { align-items: flex-start; } .flex--v-stretch { align-items: stretch; } .flex--h-spaced { justify-content: space-between; } .flex--v-center { align-items: center; align-content: center; } .flex--h-center { justify-content: center; } .flex--h-end { justify-content: flex-end; } .flex--h-flip { flex-direction: row-reverse; } .grid { display: grid; gap: 0 var(--grid-gap); grid-template-columns: repeat(var(--container-columns, var(--grid-columns)), 1fr); grid-auto-flow: column; } .grid > [class*=col-] { grid-column-end: span clamp(1, var(--column-size), var(--container-columns)); } .grid > :where(*:not([class*=col-])) { grid-column: 1/-1; } .grid--row { grid-auto-flow: row; } .grid--v-start { align-items: start; } *:not(.flex, .block__header, .grid) > [class*=col-] { width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--column-size) + var(--grid-gap) * (var(--column-size) - var(--minus-gap)) + var(--grid-offset, 0%)); } [class*=ml-] { margin-inline-start: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--offset-left-size) + var(--grid-gap) * (var(--offset-left-size) - 0) + var(--grid-offset, 0%)); } [class*=mr-] { margin-inline-end: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * var(--offset-right-size) + var(--grid-gap) * (var(--offset-right-size) - 0) + var(--grid-offset, 0%)); } .col-20 { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter, .col-25 { --column-size: calc(var(--container-columns) * 0.25); } .col-third, .col-33 { --column-size: calc(var(--container-columns) / 3); } .col-40 { --column-size: calc(var(--container-columns) * 0.4); } .col-demi, .col-50 { --column-size: calc(var(--container-columns) * 0.5); } .col-60 { --column-size: calc(var(--container-columns) * 0.6); } .col-two-third, .col-66 { --column-size: calc((var(--container-columns) / 3) * 2); } .col-three-quarters, .col-75 { --column-size: calc(var(--container-columns) * 0.75); } .col-80 { --column-size: calc(var(--container-columns) * 0.8); } .col-full, .col-100 { --column-size: var(--container-columns); } .col-1 { --column-size: 1; } .col-1 > *, .col-1::before, .col-1::after { --container-columns: 1; } .col-1.grid { --grid-columns: 1; } .start-1 { grid-column-start: 1; } .col-2 { --column-size: 2; } .col-2 > *, .col-2::before, .col-2::after { --container-columns: 2; } .col-2.grid { --grid-columns: 2; } .start-2 { grid-column-start: 2; } .col-3 { --column-size: 3; } .col-3 > *, .col-3::before, .col-3::after { --container-columns: 3; } .col-3.grid { --grid-columns: 3; } .start-3 { grid-column-start: 3; } .col-4 { --column-size: 4; } .col-4 > *, .col-4::before, .col-4::after { --container-columns: 4; } .col-4.grid { --grid-columns: 4; } .start-4 { grid-column-start: 4; } .col-5 { --column-size: 5; } .col-5 > *, .col-5::before, .col-5::after { --container-columns: 5; } .col-5.grid { --grid-columns: 5; } .start-5 { grid-column-start: 5; } .col-6 { --column-size: 6; } .col-6 > *, .col-6::before, .col-6::after { --container-columns: 6; } .col-6.grid { --grid-columns: 6; } .start-6 { grid-column-start: 6; } .col-7 { --column-size: 7; } .col-7 > *, .col-7::before, .col-7::after { --container-columns: 7; } .col-7.grid { --grid-columns: 7; } .start-7 { grid-column-start: 7; } .col-8 { --column-size: 8; } .col-8 > *, .col-8::before, .col-8::after { --container-columns: 8; } .col-8.grid { --grid-columns: 8; } .start-8 { grid-column-start: 8; } .col-9 { --column-size: 9; } .col-9 > *, .col-9::before, .col-9::after { --container-columns: 9; } .col-9.grid { --grid-columns: 9; } .start-9 { grid-column-start: 9; } .col-10 { --column-size: 10; } .col-10 > *, .col-10::before, .col-10::after { --container-columns: 10; } .col-10.grid { --grid-columns: 10; } .start-10 { grid-column-start: 10; } .col-11 { --column-size: 11; } .col-11 > *, .col-11::before, .col-11::after { --container-columns: 11; } .col-11.grid { --grid-columns: 11; } .start-11 { grid-column-start: 11; } .col-12 { --column-size: 12; } .col-12 > *, .col-12::before, .col-12::after { --container-columns: 12; } .col-12.grid { --grid-columns: 12; } .start-12 { grid-column-start: 12; } .col-demi { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third { --column-size: calc(var(--container-columns) * 0.3333); } .col-full { --column-size: var(--container-columns); } .ml-0 { --offset-left-size: 0; } .mr-0 { --offset-right-size: 0; } .ml-1 { --offset-left-size: 1; } .mr-1 { --offset-right-size: 1; } .ml-2 { --offset-left-size: 2; } .mr-2 { --offset-right-size: 2; } .ml-3 { --offset-left-size: 3; } .mr-3 { --offset-right-size: 3; } .ml-4 { --offset-left-size: 4; } .mr-4 { --offset-right-size: 4; } .ml-5 { --offset-left-size: 5; } .mr-5 { --offset-right-size: 5; } .ml-6 { --offset-left-size: 6; } .mr-6 { --offset-right-size: 6; } .ml-7 { --offset-left-size: 7; } .mr-7 { --offset-right-size: 7; } .ml-8 { --offset-left-size: 8; } .mr-8 { --offset-right-size: 8; } .ml-9 { --offset-left-size: 9; } .mr-9 { --offset-right-size: 9; } .ml-10 { --offset-left-size: 10; } .mr-10 { --offset-right-size: 10; } .ml-11 { --offset-left-size: 11; } .mr-11 { --offset-right-size: 11; } .ml-12 { --offset-left-size: 12; } .mr-12 { --offset-right-size: 12; } @media screen and ( min-width: 22.5em ) { .col-1--xxxs { --column-size: 1; } .col-1--xxxs > *, .col-1--xxxs::before, .col-1--xxxs::after { --container-columns: 1; } .col-1--xxxs.grid { --grid-columns: 1; } .start-1--xxxs { grid-column-start: 1; } .col-2--xxxs { --column-size: 2; } .col-2--xxxs > *, .col-2--xxxs::before, .col-2--xxxs::after { --container-columns: 2; } .col-2--xxxs.grid { --grid-columns: 2; } .start-2--xxxs { grid-column-start: 2; } .col-3--xxxs { --column-size: 3; } .col-3--xxxs > *, .col-3--xxxs::before, .col-3--xxxs::after { --container-columns: 3; } .col-3--xxxs.grid { --grid-columns: 3; } .start-3--xxxs { grid-column-start: 3; } .col-4--xxxs { --column-size: 4; } .col-4--xxxs > *, .col-4--xxxs::before, .col-4--xxxs::after { --container-columns: 4; } .col-4--xxxs.grid { --grid-columns: 4; } .start-4--xxxs { grid-column-start: 4; } .col-5--xxxs { --column-size: 5; } .col-5--xxxs > *, .col-5--xxxs::before, .col-5--xxxs::after { --container-columns: 5; } .col-5--xxxs.grid { --grid-columns: 5; } .start-5--xxxs { grid-column-start: 5; } .col-6--xxxs { --column-size: 6; } .col-6--xxxs > *, .col-6--xxxs::before, .col-6--xxxs::after { --container-columns: 6; } .col-6--xxxs.grid { --grid-columns: 6; } .start-6--xxxs { grid-column-start: 6; } .col-7--xxxs { --column-size: 7; } .col-7--xxxs > *, .col-7--xxxs::before, .col-7--xxxs::after { --container-columns: 7; } .col-7--xxxs.grid { --grid-columns: 7; } .start-7--xxxs { grid-column-start: 7; } .col-8--xxxs { --column-size: 8; } .col-8--xxxs > *, .col-8--xxxs::before, .col-8--xxxs::after { --container-columns: 8; } .col-8--xxxs.grid { --grid-columns: 8; } .start-8--xxxs { grid-column-start: 8; } .col-9--xxxs { --column-size: 9; } .col-9--xxxs > *, .col-9--xxxs::before, .col-9--xxxs::after { --container-columns: 9; } .col-9--xxxs.grid { --grid-columns: 9; } .start-9--xxxs { grid-column-start: 9; } .col-10--xxxs { --column-size: 10; } .col-10--xxxs > *, .col-10--xxxs::before, .col-10--xxxs::after { --container-columns: 10; } .col-10--xxxs.grid { --grid-columns: 10; } .start-10--xxxs { grid-column-start: 10; } .col-11--xxxs { --column-size: 11; } .col-11--xxxs > *, .col-11--xxxs::before, .col-11--xxxs::after { --container-columns: 11; } .col-11--xxxs.grid { --grid-columns: 11; } .start-11--xxxs { grid-column-start: 11; } .col-12--xxxs { --column-size: 12; } .col-12--xxxs > *, .col-12--xxxs::before, .col-12--xxxs::after { --container-columns: 12; } .col-12--xxxs.grid { --grid-columns: 12; } .start-12--xxxs { grid-column-start: 12; } .col-20--xxxs { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--xxxs, .col-25--xxxs { --column-size: calc(var(--container-columns) * 0.25); } .col-third--xxxs, .col-33--xxxs { --column-size: calc(var(--container-columns) / 3); } .col-40--xxxs { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--xxxs, .col-50--xxxs { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--xxxs, .col-66--xxxs { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--xxxs { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--xxxs, .col-75--xxxs { --column-size: calc(var(--container-columns) * 0.75); } .col-80--xxxs { --column-size: calc(var(--container-columns) * 0.8); } .col-full--xxxs, .col-100--xxxs { --column-size: var(--container-columns); } .col-auto--xxxs { --width: 0 0 auto; --min-width: auto; } .col-flow--xxxs { --width: 1 1 0%; --min-width: auto; } .col-grow--xxxs { --width: 1 0 auto; --min-width: auto; } .col-demi--xxxs { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--xxxs { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--xxxs { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--xxxs { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--xxxs { --column-size: var(--container-columns); } .ml-0--xxxs { --offset-left-size: 0; } .mr-0--xxxs { --offset-right-size: 0; } .ml-1--xxxs { --offset-left-size: 1; } .mr-1--xxxs { --offset-right-size: 1; } .ml-2--xxxs { --offset-left-size: 2; } .mr-2--xxxs { --offset-right-size: 2; } .ml-3--xxxs { --offset-left-size: 3; } .mr-3--xxxs { --offset-right-size: 3; } .ml-4--xxxs { --offset-left-size: 4; } .mr-4--xxxs { --offset-right-size: 4; } .ml-5--xxxs { --offset-left-size: 5; } .mr-5--xxxs { --offset-right-size: 5; } .ml-6--xxxs { --offset-left-size: 6; } .mr-6--xxxs { --offset-right-size: 6; } .ml-7--xxxs { --offset-left-size: 7; } .mr-7--xxxs { --offset-right-size: 7; } .ml-8--xxxs { --offset-left-size: 8; } .mr-8--xxxs { --offset-right-size: 8; } .ml-9--xxxs { --offset-left-size: 9; } .mr-9--xxxs { --offset-right-size: 9; } .ml-10--xxxs { --offset-left-size: 10; } .mr-10--xxxs { --offset-right-size: 10; } .ml-11--xxxs { --offset-left-size: 11; } .mr-11--xxxs { --offset-right-size: 11; } .ml-12--xxxs { --offset-left-size: 12; } .mr-12--xxxs { --offset-right-size: 12; } } @media screen and ( min-width: 24.375em ) { .col-1--xxs { --column-size: 1; } .col-1--xxs > *, .col-1--xxs::before, .col-1--xxs::after { --container-columns: 1; } .col-1--xxs.grid { --grid-columns: 1; } .start-1--xxs { grid-column-start: 1; } .col-2--xxs { --column-size: 2; } .col-2--xxs > *, .col-2--xxs::before, .col-2--xxs::after { --container-columns: 2; } .col-2--xxs.grid { --grid-columns: 2; } .start-2--xxs { grid-column-start: 2; } .col-3--xxs { --column-size: 3; } .col-3--xxs > *, .col-3--xxs::before, .col-3--xxs::after { --container-columns: 3; } .col-3--xxs.grid { --grid-columns: 3; } .start-3--xxs { grid-column-start: 3; } .col-4--xxs { --column-size: 4; } .col-4--xxs > *, .col-4--xxs::before, .col-4--xxs::after { --container-columns: 4; } .col-4--xxs.grid { --grid-columns: 4; } .start-4--xxs { grid-column-start: 4; } .col-5--xxs { --column-size: 5; } .col-5--xxs > *, .col-5--xxs::before, .col-5--xxs::after { --container-columns: 5; } .col-5--xxs.grid { --grid-columns: 5; } .start-5--xxs { grid-column-start: 5; } .col-6--xxs { --column-size: 6; } .col-6--xxs > *, .col-6--xxs::before, .col-6--xxs::after { --container-columns: 6; } .col-6--xxs.grid { --grid-columns: 6; } .start-6--xxs { grid-column-start: 6; } .col-7--xxs { --column-size: 7; } .col-7--xxs > *, .col-7--xxs::before, .col-7--xxs::after { --container-columns: 7; } .col-7--xxs.grid { --grid-columns: 7; } .start-7--xxs { grid-column-start: 7; } .col-8--xxs { --column-size: 8; } .col-8--xxs > *, .col-8--xxs::before, .col-8--xxs::after { --container-columns: 8; } .col-8--xxs.grid { --grid-columns: 8; } .start-8--xxs { grid-column-start: 8; } .col-9--xxs { --column-size: 9; } .col-9--xxs > *, .col-9--xxs::before, .col-9--xxs::after { --container-columns: 9; } .col-9--xxs.grid { --grid-columns: 9; } .start-9--xxs { grid-column-start: 9; } .col-10--xxs { --column-size: 10; } .col-10--xxs > *, .col-10--xxs::before, .col-10--xxs::after { --container-columns: 10; } .col-10--xxs.grid { --grid-columns: 10; } .start-10--xxs { grid-column-start: 10; } .col-11--xxs { --column-size: 11; } .col-11--xxs > *, .col-11--xxs::before, .col-11--xxs::after { --container-columns: 11; } .col-11--xxs.grid { --grid-columns: 11; } .start-11--xxs { grid-column-start: 11; } .col-12--xxs { --column-size: 12; } .col-12--xxs > *, .col-12--xxs::before, .col-12--xxs::after { --container-columns: 12; } .col-12--xxs.grid { --grid-columns: 12; } .start-12--xxs { grid-column-start: 12; } .col-20--xxs { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--xxs, .col-25--xxs { --column-size: calc(var(--container-columns) * 0.25); } .col-third--xxs, .col-33--xxs { --column-size: calc(var(--container-columns) / 3); } .col-40--xxs { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--xxs, .col-50--xxs { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--xxs, .col-66--xxs { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--xxs { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--xxs, .col-75--xxs { --column-size: calc(var(--container-columns) * 0.75); } .col-80--xxs { --column-size: calc(var(--container-columns) * 0.8); } .col-full--xxs, .col-100--xxs { --column-size: var(--container-columns); } .col-auto--xxs { --width: 0 0 auto; --min-width: auto; } .col-flow--xxs { --width: 1 1 0%; --min-width: auto; } .col-grow--xxs { --width: 1 0 auto; --min-width: auto; } .col-demi--xxs { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--xxs { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--xxs { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--xxs { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--xxs { --column-size: var(--container-columns); } .ml-0--xxs { --offset-left-size: 0; } .mr-0--xxs { --offset-right-size: 0; } .ml-1--xxs { --offset-left-size: 1; } .mr-1--xxs { --offset-right-size: 1; } .ml-2--xxs { --offset-left-size: 2; } .mr-2--xxs { --offset-right-size: 2; } .ml-3--xxs { --offset-left-size: 3; } .mr-3--xxs { --offset-right-size: 3; } .ml-4--xxs { --offset-left-size: 4; } .mr-4--xxs { --offset-right-size: 4; } .ml-5--xxs { --offset-left-size: 5; } .mr-5--xxs { --offset-right-size: 5; } .ml-6--xxs { --offset-left-size: 6; } .mr-6--xxs { --offset-right-size: 6; } .ml-7--xxs { --offset-left-size: 7; } .mr-7--xxs { --offset-right-size: 7; } .ml-8--xxs { --offset-left-size: 8; } .mr-8--xxs { --offset-right-size: 8; } .ml-9--xxs { --offset-left-size: 9; } .mr-9--xxs { --offset-right-size: 9; } .ml-10--xxs { --offset-left-size: 10; } .mr-10--xxs { --offset-right-size: 10; } .ml-11--xxs { --offset-left-size: 11; } .mr-11--xxs { --offset-right-size: 11; } .ml-12--xxs { --offset-left-size: 12; } .mr-12--xxs { --offset-right-size: 12; } } @media screen and ( min-width: 26.75em ) { .col-1--xs { --column-size: 1; } .col-1--xs > *, .col-1--xs::before, .col-1--xs::after { --container-columns: 1; } .col-1--xs.grid { --grid-columns: 1; } .start-1--xs { grid-column-start: 1; } .col-2--xs { --column-size: 2; } .col-2--xs > *, .col-2--xs::before, .col-2--xs::after { --container-columns: 2; } .col-2--xs.grid { --grid-columns: 2; } .start-2--xs { grid-column-start: 2; } .col-3--xs { --column-size: 3; } .col-3--xs > *, .col-3--xs::before, .col-3--xs::after { --container-columns: 3; } .col-3--xs.grid { --grid-columns: 3; } .start-3--xs { grid-column-start: 3; } .col-4--xs { --column-size: 4; } .col-4--xs > *, .col-4--xs::before, .col-4--xs::after { --container-columns: 4; } .col-4--xs.grid { --grid-columns: 4; } .start-4--xs { grid-column-start: 4; } .col-5--xs { --column-size: 5; } .col-5--xs > *, .col-5--xs::before, .col-5--xs::after { --container-columns: 5; } .col-5--xs.grid { --grid-columns: 5; } .start-5--xs { grid-column-start: 5; } .col-6--xs { --column-size: 6; } .col-6--xs > *, .col-6--xs::before, .col-6--xs::after { --container-columns: 6; } .col-6--xs.grid { --grid-columns: 6; } .start-6--xs { grid-column-start: 6; } .col-7--xs { --column-size: 7; } .col-7--xs > *, .col-7--xs::before, .col-7--xs::after { --container-columns: 7; } .col-7--xs.grid { --grid-columns: 7; } .start-7--xs { grid-column-start: 7; } .col-8--xs { --column-size: 8; } .col-8--xs > *, .col-8--xs::before, .col-8--xs::after { --container-columns: 8; } .col-8--xs.grid { --grid-columns: 8; } .start-8--xs { grid-column-start: 8; } .col-9--xs { --column-size: 9; } .col-9--xs > *, .col-9--xs::before, .col-9--xs::after { --container-columns: 9; } .col-9--xs.grid { --grid-columns: 9; } .start-9--xs { grid-column-start: 9; } .col-10--xs { --column-size: 10; } .col-10--xs > *, .col-10--xs::before, .col-10--xs::after { --container-columns: 10; } .col-10--xs.grid { --grid-columns: 10; } .start-10--xs { grid-column-start: 10; } .col-11--xs { --column-size: 11; } .col-11--xs > *, .col-11--xs::before, .col-11--xs::after { --container-columns: 11; } .col-11--xs.grid { --grid-columns: 11; } .start-11--xs { grid-column-start: 11; } .col-12--xs { --column-size: 12; } .col-12--xs > *, .col-12--xs::before, .col-12--xs::after { --container-columns: 12; } .col-12--xs.grid { --grid-columns: 12; } .start-12--xs { grid-column-start: 12; } .col-20--xs { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--xs, .col-25--xs { --column-size: calc(var(--container-columns) * 0.25); } .col-third--xs, .col-33--xs { --column-size: calc(var(--container-columns) / 3); } .col-40--xs { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--xs, .col-50--xs { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--xs, .col-66--xs { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--xs { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--xs, .col-75--xs { --column-size: calc(var(--container-columns) * 0.75); } .col-80--xs { --column-size: calc(var(--container-columns) * 0.8); } .col-full--xs, .col-100--xs { --column-size: var(--container-columns); } .col-auto--xs { --width: 0 0 auto; --min-width: auto; } .col-flow--xs { --width: 1 1 0%; --min-width: auto; } .col-grow--xs { --width: 1 0 auto; --min-width: auto; } .col-demi--xs { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--xs { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--xs { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--xs { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--xs { --column-size: var(--container-columns); } .ml-0--xs { --offset-left-size: 0; } .mr-0--xs { --offset-right-size: 0; } .ml-1--xs { --offset-left-size: 1; } .mr-1--xs { --offset-right-size: 1; } .ml-2--xs { --offset-left-size: 2; } .mr-2--xs { --offset-right-size: 2; } .ml-3--xs { --offset-left-size: 3; } .mr-3--xs { --offset-right-size: 3; } .ml-4--xs { --offset-left-size: 4; } .mr-4--xs { --offset-right-size: 4; } .ml-5--xs { --offset-left-size: 5; } .mr-5--xs { --offset-right-size: 5; } .ml-6--xs { --offset-left-size: 6; } .mr-6--xs { --offset-right-size: 6; } .ml-7--xs { --offset-left-size: 7; } .mr-7--xs { --offset-right-size: 7; } .ml-8--xs { --offset-left-size: 8; } .mr-8--xs { --offset-right-size: 8; } .ml-9--xs { --offset-left-size: 9; } .mr-9--xs { --offset-right-size: 9; } .ml-10--xs { --offset-left-size: 10; } .mr-10--xs { --offset-right-size: 10; } .ml-11--xs { --offset-left-size: 11; } .mr-11--xs { --offset-right-size: 11; } .ml-12--xs { --offset-left-size: 12; } .mr-12--xs { --offset-right-size: 12; } } @media screen and ( min-width: 40em ) { .col-1--xs-mid { --column-size: 1; } .col-1--xs-mid > *, .col-1--xs-mid::before, .col-1--xs-mid::after { --container-columns: 1; } .col-1--xs-mid.grid { --grid-columns: 1; } .start-1--xs-mid { grid-column-start: 1; } .col-2--xs-mid { --column-size: 2; } .col-2--xs-mid > *, .col-2--xs-mid::before, .col-2--xs-mid::after { --container-columns: 2; } .col-2--xs-mid.grid { --grid-columns: 2; } .start-2--xs-mid { grid-column-start: 2; } .col-3--xs-mid { --column-size: 3; } .col-3--xs-mid > *, .col-3--xs-mid::before, .col-3--xs-mid::after { --container-columns: 3; } .col-3--xs-mid.grid { --grid-columns: 3; } .start-3--xs-mid { grid-column-start: 3; } .col-4--xs-mid { --column-size: 4; } .col-4--xs-mid > *, .col-4--xs-mid::before, .col-4--xs-mid::after { --container-columns: 4; } .col-4--xs-mid.grid { --grid-columns: 4; } .start-4--xs-mid { grid-column-start: 4; } .col-5--xs-mid { --column-size: 5; } .col-5--xs-mid > *, .col-5--xs-mid::before, .col-5--xs-mid::after { --container-columns: 5; } .col-5--xs-mid.grid { --grid-columns: 5; } .start-5--xs-mid { grid-column-start: 5; } .col-6--xs-mid { --column-size: 6; } .col-6--xs-mid > *, .col-6--xs-mid::before, .col-6--xs-mid::after { --container-columns: 6; } .col-6--xs-mid.grid { --grid-columns: 6; } .start-6--xs-mid { grid-column-start: 6; } .col-7--xs-mid { --column-size: 7; } .col-7--xs-mid > *, .col-7--xs-mid::before, .col-7--xs-mid::after { --container-columns: 7; } .col-7--xs-mid.grid { --grid-columns: 7; } .start-7--xs-mid { grid-column-start: 7; } .col-8--xs-mid { --column-size: 8; } .col-8--xs-mid > *, .col-8--xs-mid::before, .col-8--xs-mid::after { --container-columns: 8; } .col-8--xs-mid.grid { --grid-columns: 8; } .start-8--xs-mid { grid-column-start: 8; } .col-9--xs-mid { --column-size: 9; } .col-9--xs-mid > *, .col-9--xs-mid::before, .col-9--xs-mid::after { --container-columns: 9; } .col-9--xs-mid.grid { --grid-columns: 9; } .start-9--xs-mid { grid-column-start: 9; } .col-10--xs-mid { --column-size: 10; } .col-10--xs-mid > *, .col-10--xs-mid::before, .col-10--xs-mid::after { --container-columns: 10; } .col-10--xs-mid.grid { --grid-columns: 10; } .start-10--xs-mid { grid-column-start: 10; } .col-11--xs-mid { --column-size: 11; } .col-11--xs-mid > *, .col-11--xs-mid::before, .col-11--xs-mid::after { --container-columns: 11; } .col-11--xs-mid.grid { --grid-columns: 11; } .start-11--xs-mid { grid-column-start: 11; } .col-12--xs-mid { --column-size: 12; } .col-12--xs-mid > *, .col-12--xs-mid::before, .col-12--xs-mid::after { --container-columns: 12; } .col-12--xs-mid.grid { --grid-columns: 12; } .start-12--xs-mid { grid-column-start: 12; } .col-20--xs-mid { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--xs-mid, .col-25--xs-mid { --column-size: calc(var(--container-columns) * 0.25); } .col-third--xs-mid, .col-33--xs-mid { --column-size: calc(var(--container-columns) / 3); } .col-40--xs-mid { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--xs-mid, .col-50--xs-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--xs-mid, .col-66--xs-mid { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--xs-mid { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--xs-mid, .col-75--xs-mid { --column-size: calc(var(--container-columns) * 0.75); } .col-80--xs-mid { --column-size: calc(var(--container-columns) * 0.8); } .col-full--xs-mid, .col-100--xs-mid { --column-size: var(--container-columns); } .col-auto--xs-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--xs-mid { --width: 1 1 0%; --min-width: auto; } .col-grow--xs-mid { --width: 1 0 auto; --min-width: auto; } .col-demi--xs-mid { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--xs-mid { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--xs-mid { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--xs-mid { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--xs-mid { --column-size: var(--container-columns); } .ml-0--xs-mid { --offset-left-size: 0; } .mr-0--xs-mid { --offset-right-size: 0; } .ml-1--xs-mid { --offset-left-size: 1; } .mr-1--xs-mid { --offset-right-size: 1; } .ml-2--xs-mid { --offset-left-size: 2; } .mr-2--xs-mid { --offset-right-size: 2; } .ml-3--xs-mid { --offset-left-size: 3; } .mr-3--xs-mid { --offset-right-size: 3; } .ml-4--xs-mid { --offset-left-size: 4; } .mr-4--xs-mid { --offset-right-size: 4; } .ml-5--xs-mid { --offset-left-size: 5; } .mr-5--xs-mid { --offset-right-size: 5; } .ml-6--xs-mid { --offset-left-size: 6; } .mr-6--xs-mid { --offset-right-size: 6; } .ml-7--xs-mid { --offset-left-size: 7; } .mr-7--xs-mid { --offset-right-size: 7; } .ml-8--xs-mid { --offset-left-size: 8; } .mr-8--xs-mid { --offset-right-size: 8; } .ml-9--xs-mid { --offset-left-size: 9; } .mr-9--xs-mid { --offset-right-size: 9; } .ml-10--xs-mid { --offset-left-size: 10; } .mr-10--xs-mid { --offset-right-size: 10; } .ml-11--xs-mid { --offset-left-size: 11; } .mr-11--xs-mid { --offset-right-size: 11; } .ml-12--xs-mid { --offset-left-size: 12; } .mr-12--xs-mid { --offset-right-size: 12; } } @media screen and ( min-width: 48em ) { .col-1--sm { --column-size: 1; } .col-1--sm > *, .col-1--sm::before, .col-1--sm::after { --container-columns: 1; } .col-1--sm.grid { --grid-columns: 1; } .start-1--sm { grid-column-start: 1; } .col-2--sm { --column-size: 2; } .col-2--sm > *, .col-2--sm::before, .col-2--sm::after { --container-columns: 2; } .col-2--sm.grid { --grid-columns: 2; } .start-2--sm { grid-column-start: 2; } .col-3--sm { --column-size: 3; } .col-3--sm > *, .col-3--sm::before, .col-3--sm::after { --container-columns: 3; } .col-3--sm.grid { --grid-columns: 3; } .start-3--sm { grid-column-start: 3; } .col-4--sm { --column-size: 4; } .col-4--sm > *, .col-4--sm::before, .col-4--sm::after { --container-columns: 4; } .col-4--sm.grid { --grid-columns: 4; } .start-4--sm { grid-column-start: 4; } .col-5--sm { --column-size: 5; } .col-5--sm > *, .col-5--sm::before, .col-5--sm::after { --container-columns: 5; } .col-5--sm.grid { --grid-columns: 5; } .start-5--sm { grid-column-start: 5; } .col-6--sm { --column-size: 6; } .col-6--sm > *, .col-6--sm::before, .col-6--sm::after { --container-columns: 6; } .col-6--sm.grid { --grid-columns: 6; } .start-6--sm { grid-column-start: 6; } .col-7--sm { --column-size: 7; } .col-7--sm > *, .col-7--sm::before, .col-7--sm::after { --container-columns: 7; } .col-7--sm.grid { --grid-columns: 7; } .start-7--sm { grid-column-start: 7; } .col-8--sm { --column-size: 8; } .col-8--sm > *, .col-8--sm::before, .col-8--sm::after { --container-columns: 8; } .col-8--sm.grid { --grid-columns: 8; } .start-8--sm { grid-column-start: 8; } .col-9--sm { --column-size: 9; } .col-9--sm > *, .col-9--sm::before, .col-9--sm::after { --container-columns: 9; } .col-9--sm.grid { --grid-columns: 9; } .start-9--sm { grid-column-start: 9; } .col-10--sm { --column-size: 10; } .col-10--sm > *, .col-10--sm::before, .col-10--sm::after { --container-columns: 10; } .col-10--sm.grid { --grid-columns: 10; } .start-10--sm { grid-column-start: 10; } .col-11--sm { --column-size: 11; } .col-11--sm > *, .col-11--sm::before, .col-11--sm::after { --container-columns: 11; } .col-11--sm.grid { --grid-columns: 11; } .start-11--sm { grid-column-start: 11; } .col-12--sm { --column-size: 12; } .col-12--sm > *, .col-12--sm::before, .col-12--sm::after { --container-columns: 12; } .col-12--sm.grid { --grid-columns: 12; } .start-12--sm { grid-column-start: 12; } .col-20--sm { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--sm, .col-25--sm { --column-size: calc(var(--container-columns) * 0.25); } .col-third--sm, .col-33--sm { --column-size: calc(var(--container-columns) / 3); } .col-40--sm { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--sm, .col-50--sm { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--sm, .col-66--sm { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--sm { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--sm, .col-75--sm { --column-size: calc(var(--container-columns) * 0.75); } .col-80--sm { --column-size: calc(var(--container-columns) * 0.8); } .col-full--sm, .col-100--sm { --column-size: var(--container-columns); } .col-auto--sm { --width: 0 0 auto; --min-width: auto; } .col-flow--sm { --width: 1 1 0%; --min-width: auto; } .col-grow--sm { --width: 1 0 auto; --min-width: auto; } .col-demi--sm { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--sm { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--sm { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--sm { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--sm { --column-size: var(--container-columns); } .ml-0--sm { --offset-left-size: 0; } .mr-0--sm { --offset-right-size: 0; } .ml-1--sm { --offset-left-size: 1; } .mr-1--sm { --offset-right-size: 1; } .ml-2--sm { --offset-left-size: 2; } .mr-2--sm { --offset-right-size: 2; } .ml-3--sm { --offset-left-size: 3; } .mr-3--sm { --offset-right-size: 3; } .ml-4--sm { --offset-left-size: 4; } .mr-4--sm { --offset-right-size: 4; } .ml-5--sm { --offset-left-size: 5; } .mr-5--sm { --offset-right-size: 5; } .ml-6--sm { --offset-left-size: 6; } .mr-6--sm { --offset-right-size: 6; } .ml-7--sm { --offset-left-size: 7; } .mr-7--sm { --offset-right-size: 7; } .ml-8--sm { --offset-left-size: 8; } .mr-8--sm { --offset-right-size: 8; } .ml-9--sm { --offset-left-size: 9; } .mr-9--sm { --offset-right-size: 9; } .ml-10--sm { --offset-left-size: 10; } .mr-10--sm { --offset-right-size: 10; } .ml-11--sm { --offset-left-size: 11; } .mr-11--sm { --offset-right-size: 11; } .ml-12--sm { --offset-left-size: 12; } .mr-12--sm { --offset-right-size: 12; } } @media screen and ( min-width: 50.625em ) { .col-1--sm-mid { --column-size: 1; } .col-1--sm-mid > *, .col-1--sm-mid::before, .col-1--sm-mid::after { --container-columns: 1; } .col-1--sm-mid.grid { --grid-columns: 1; } .start-1--sm-mid { grid-column-start: 1; } .col-2--sm-mid { --column-size: 2; } .col-2--sm-mid > *, .col-2--sm-mid::before, .col-2--sm-mid::after { --container-columns: 2; } .col-2--sm-mid.grid { --grid-columns: 2; } .start-2--sm-mid { grid-column-start: 2; } .col-3--sm-mid { --column-size: 3; } .col-3--sm-mid > *, .col-3--sm-mid::before, .col-3--sm-mid::after { --container-columns: 3; } .col-3--sm-mid.grid { --grid-columns: 3; } .start-3--sm-mid { grid-column-start: 3; } .col-4--sm-mid { --column-size: 4; } .col-4--sm-mid > *, .col-4--sm-mid::before, .col-4--sm-mid::after { --container-columns: 4; } .col-4--sm-mid.grid { --grid-columns: 4; } .start-4--sm-mid { grid-column-start: 4; } .col-5--sm-mid { --column-size: 5; } .col-5--sm-mid > *, .col-5--sm-mid::before, .col-5--sm-mid::after { --container-columns: 5; } .col-5--sm-mid.grid { --grid-columns: 5; } .start-5--sm-mid { grid-column-start: 5; } .col-6--sm-mid { --column-size: 6; } .col-6--sm-mid > *, .col-6--sm-mid::before, .col-6--sm-mid::after { --container-columns: 6; } .col-6--sm-mid.grid { --grid-columns: 6; } .start-6--sm-mid { grid-column-start: 6; } .col-7--sm-mid { --column-size: 7; } .col-7--sm-mid > *, .col-7--sm-mid::before, .col-7--sm-mid::after { --container-columns: 7; } .col-7--sm-mid.grid { --grid-columns: 7; } .start-7--sm-mid { grid-column-start: 7; } .col-8--sm-mid { --column-size: 8; } .col-8--sm-mid > *, .col-8--sm-mid::before, .col-8--sm-mid::after { --container-columns: 8; } .col-8--sm-mid.grid { --grid-columns: 8; } .start-8--sm-mid { grid-column-start: 8; } .col-9--sm-mid { --column-size: 9; } .col-9--sm-mid > *, .col-9--sm-mid::before, .col-9--sm-mid::after { --container-columns: 9; } .col-9--sm-mid.grid { --grid-columns: 9; } .start-9--sm-mid { grid-column-start: 9; } .col-10--sm-mid { --column-size: 10; } .col-10--sm-mid > *, .col-10--sm-mid::before, .col-10--sm-mid::after { --container-columns: 10; } .col-10--sm-mid.grid { --grid-columns: 10; } .start-10--sm-mid { grid-column-start: 10; } .col-11--sm-mid { --column-size: 11; } .col-11--sm-mid > *, .col-11--sm-mid::before, .col-11--sm-mid::after { --container-columns: 11; } .col-11--sm-mid.grid { --grid-columns: 11; } .start-11--sm-mid { grid-column-start: 11; } .col-12--sm-mid { --column-size: 12; } .col-12--sm-mid > *, .col-12--sm-mid::before, .col-12--sm-mid::after { --container-columns: 12; } .col-12--sm-mid.grid { --grid-columns: 12; } .start-12--sm-mid { grid-column-start: 12; } .col-20--sm-mid { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--sm-mid, .col-25--sm-mid { --column-size: calc(var(--container-columns) * 0.25); } .col-third--sm-mid, .col-33--sm-mid { --column-size: calc(var(--container-columns) / 3); } .col-40--sm-mid { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--sm-mid, .col-50--sm-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--sm-mid, .col-66--sm-mid { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--sm-mid { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--sm-mid, .col-75--sm-mid { --column-size: calc(var(--container-columns) * 0.75); } .col-80--sm-mid { --column-size: calc(var(--container-columns) * 0.8); } .col-full--sm-mid, .col-100--sm-mid { --column-size: var(--container-columns); } .col-auto--sm-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--sm-mid { --width: 1 1 0%; --min-width: auto; } .col-grow--sm-mid { --width: 1 0 auto; --min-width: auto; } .col-demi--sm-mid { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--sm-mid { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--sm-mid { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--sm-mid { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--sm-mid { --column-size: var(--container-columns); } .ml-0--sm-mid { --offset-left-size: 0; } .mr-0--sm-mid { --offset-right-size: 0; } .ml-1--sm-mid { --offset-left-size: 1; } .mr-1--sm-mid { --offset-right-size: 1; } .ml-2--sm-mid { --offset-left-size: 2; } .mr-2--sm-mid { --offset-right-size: 2; } .ml-3--sm-mid { --offset-left-size: 3; } .mr-3--sm-mid { --offset-right-size: 3; } .ml-4--sm-mid { --offset-left-size: 4; } .mr-4--sm-mid { --offset-right-size: 4; } .ml-5--sm-mid { --offset-left-size: 5; } .mr-5--sm-mid { --offset-right-size: 5; } .ml-6--sm-mid { --offset-left-size: 6; } .mr-6--sm-mid { --offset-right-size: 6; } .ml-7--sm-mid { --offset-left-size: 7; } .mr-7--sm-mid { --offset-right-size: 7; } .ml-8--sm-mid { --offset-left-size: 8; } .mr-8--sm-mid { --offset-right-size: 8; } .ml-9--sm-mid { --offset-left-size: 9; } .mr-9--sm-mid { --offset-right-size: 9; } .ml-10--sm-mid { --offset-left-size: 10; } .mr-10--sm-mid { --offset-right-size: 10; } .ml-11--sm-mid { --offset-left-size: 11; } .mr-11--sm-mid { --offset-right-size: 11; } .ml-12--sm-mid { --offset-left-size: 12; } .mr-12--sm-mid { --offset-right-size: 12; } } @media screen and ( min-width: 64em ) { .col-1--md { --column-size: 1; } .col-1--md > *, .col-1--md::before, .col-1--md::after { --container-columns: 1; } .col-1--md.grid { --grid-columns: 1; } .start-1--md { grid-column-start: 1; } .col-2--md { --column-size: 2; } .col-2--md > *, .col-2--md::before, .col-2--md::after { --container-columns: 2; } .col-2--md.grid { --grid-columns: 2; } .start-2--md { grid-column-start: 2; } .col-3--md { --column-size: 3; } .col-3--md > *, .col-3--md::before, .col-3--md::after { --container-columns: 3; } .col-3--md.grid { --grid-columns: 3; } .start-3--md { grid-column-start: 3; } .col-4--md { --column-size: 4; } .col-4--md > *, .col-4--md::before, .col-4--md::after { --container-columns: 4; } .col-4--md.grid { --grid-columns: 4; } .start-4--md { grid-column-start: 4; } .col-5--md { --column-size: 5; } .col-5--md > *, .col-5--md::before, .col-5--md::after { --container-columns: 5; } .col-5--md.grid { --grid-columns: 5; } .start-5--md { grid-column-start: 5; } .col-6--md { --column-size: 6; } .col-6--md > *, .col-6--md::before, .col-6--md::after { --container-columns: 6; } .col-6--md.grid { --grid-columns: 6; } .start-6--md { grid-column-start: 6; } .col-7--md { --column-size: 7; } .col-7--md > *, .col-7--md::before, .col-7--md::after { --container-columns: 7; } .col-7--md.grid { --grid-columns: 7; } .start-7--md { grid-column-start: 7; } .col-8--md { --column-size: 8; } .col-8--md > *, .col-8--md::before, .col-8--md::after { --container-columns: 8; } .col-8--md.grid { --grid-columns: 8; } .start-8--md { grid-column-start: 8; } .col-9--md { --column-size: 9; } .col-9--md > *, .col-9--md::before, .col-9--md::after { --container-columns: 9; } .col-9--md.grid { --grid-columns: 9; } .start-9--md { grid-column-start: 9; } .col-10--md { --column-size: 10; } .col-10--md > *, .col-10--md::before, .col-10--md::after { --container-columns: 10; } .col-10--md.grid { --grid-columns: 10; } .start-10--md { grid-column-start: 10; } .col-11--md { --column-size: 11; } .col-11--md > *, .col-11--md::before, .col-11--md::after { --container-columns: 11; } .col-11--md.grid { --grid-columns: 11; } .start-11--md { grid-column-start: 11; } .col-12--md { --column-size: 12; } .col-12--md > *, .col-12--md::before, .col-12--md::after { --container-columns: 12; } .col-12--md.grid { --grid-columns: 12; } .start-12--md { grid-column-start: 12; } .col-20--md { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--md, .col-25--md { --column-size: calc(var(--container-columns) * 0.25); } .col-third--md, .col-33--md { --column-size: calc(var(--container-columns) / 3); } .col-40--md { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--md, .col-50--md { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--md, .col-66--md { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--md { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--md, .col-75--md { --column-size: calc(var(--container-columns) * 0.75); } .col-80--md { --column-size: calc(var(--container-columns) * 0.8); } .col-full--md, .col-100--md { --column-size: var(--container-columns); } .col-auto--md { --width: 0 0 auto; --min-width: auto; } .col-flow--md { --width: 1 1 0%; --min-width: auto; } .col-grow--md { --width: 1 0 auto; --min-width: auto; } .col-demi--md { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--md { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--md { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--md { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--md { --column-size: var(--container-columns); } .ml-0--md { --offset-left-size: 0; } .mr-0--md { --offset-right-size: 0; } .ml-1--md { --offset-left-size: 1; } .mr-1--md { --offset-right-size: 1; } .ml-2--md { --offset-left-size: 2; } .mr-2--md { --offset-right-size: 2; } .ml-3--md { --offset-left-size: 3; } .mr-3--md { --offset-right-size: 3; } .ml-4--md { --offset-left-size: 4; } .mr-4--md { --offset-right-size: 4; } .ml-5--md { --offset-left-size: 5; } .mr-5--md { --offset-right-size: 5; } .ml-6--md { --offset-left-size: 6; } .mr-6--md { --offset-right-size: 6; } .ml-7--md { --offset-left-size: 7; } .mr-7--md { --offset-right-size: 7; } .ml-8--md { --offset-left-size: 8; } .mr-8--md { --offset-right-size: 8; } .ml-9--md { --offset-left-size: 9; } .mr-9--md { --offset-right-size: 9; } .ml-10--md { --offset-left-size: 10; } .mr-10--md { --offset-right-size: 10; } .ml-11--md { --offset-left-size: 11; } .mr-11--md { --offset-right-size: 11; } .ml-12--md { --offset-left-size: 12; } .mr-12--md { --offset-right-size: 12; } } @media screen and ( min-width: 80em ) { .col-1--md-mid { --column-size: 1; } .col-1--md-mid > *, .col-1--md-mid::before, .col-1--md-mid::after { --container-columns: 1; } .col-1--md-mid.grid { --grid-columns: 1; } .start-1--md-mid { grid-column-start: 1; } .col-2--md-mid { --column-size: 2; } .col-2--md-mid > *, .col-2--md-mid::before, .col-2--md-mid::after { --container-columns: 2; } .col-2--md-mid.grid { --grid-columns: 2; } .start-2--md-mid { grid-column-start: 2; } .col-3--md-mid { --column-size: 3; } .col-3--md-mid > *, .col-3--md-mid::before, .col-3--md-mid::after { --container-columns: 3; } .col-3--md-mid.grid { --grid-columns: 3; } .start-3--md-mid { grid-column-start: 3; } .col-4--md-mid { --column-size: 4; } .col-4--md-mid > *, .col-4--md-mid::before, .col-4--md-mid::after { --container-columns: 4; } .col-4--md-mid.grid { --grid-columns: 4; } .start-4--md-mid { grid-column-start: 4; } .col-5--md-mid { --column-size: 5; } .col-5--md-mid > *, .col-5--md-mid::before, .col-5--md-mid::after { --container-columns: 5; } .col-5--md-mid.grid { --grid-columns: 5; } .start-5--md-mid { grid-column-start: 5; } .col-6--md-mid { --column-size: 6; } .col-6--md-mid > *, .col-6--md-mid::before, .col-6--md-mid::after { --container-columns: 6; } .col-6--md-mid.grid { --grid-columns: 6; } .start-6--md-mid { grid-column-start: 6; } .col-7--md-mid { --column-size: 7; } .col-7--md-mid > *, .col-7--md-mid::before, .col-7--md-mid::after { --container-columns: 7; } .col-7--md-mid.grid { --grid-columns: 7; } .start-7--md-mid { grid-column-start: 7; } .col-8--md-mid { --column-size: 8; } .col-8--md-mid > *, .col-8--md-mid::before, .col-8--md-mid::after { --container-columns: 8; } .col-8--md-mid.grid { --grid-columns: 8; } .start-8--md-mid { grid-column-start: 8; } .col-9--md-mid { --column-size: 9; } .col-9--md-mid > *, .col-9--md-mid::before, .col-9--md-mid::after { --container-columns: 9; } .col-9--md-mid.grid { --grid-columns: 9; } .start-9--md-mid { grid-column-start: 9; } .col-10--md-mid { --column-size: 10; } .col-10--md-mid > *, .col-10--md-mid::before, .col-10--md-mid::after { --container-columns: 10; } .col-10--md-mid.grid { --grid-columns: 10; } .start-10--md-mid { grid-column-start: 10; } .col-11--md-mid { --column-size: 11; } .col-11--md-mid > *, .col-11--md-mid::before, .col-11--md-mid::after { --container-columns: 11; } .col-11--md-mid.grid { --grid-columns: 11; } .start-11--md-mid { grid-column-start: 11; } .col-12--md-mid { --column-size: 12; } .col-12--md-mid > *, .col-12--md-mid::before, .col-12--md-mid::after { --container-columns: 12; } .col-12--md-mid.grid { --grid-columns: 12; } .start-12--md-mid { grid-column-start: 12; } .col-20--md-mid { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--md-mid, .col-25--md-mid { --column-size: calc(var(--container-columns) * 0.25); } .col-third--md-mid, .col-33--md-mid { --column-size: calc(var(--container-columns) / 3); } .col-40--md-mid { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--md-mid, .col-50--md-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--md-mid, .col-66--md-mid { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--md-mid { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--md-mid, .col-75--md-mid { --column-size: calc(var(--container-columns) * 0.75); } .col-80--md-mid { --column-size: calc(var(--container-columns) * 0.8); } .col-full--md-mid, .col-100--md-mid { --column-size: var(--container-columns); } .col-auto--md-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--md-mid { --width: 1 1 0%; --min-width: auto; } .col-grow--md-mid { --width: 1 0 auto; --min-width: auto; } .col-demi--md-mid { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--md-mid { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--md-mid { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--md-mid { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--md-mid { --column-size: var(--container-columns); } .ml-0--md-mid { --offset-left-size: 0; } .mr-0--md-mid { --offset-right-size: 0; } .ml-1--md-mid { --offset-left-size: 1; } .mr-1--md-mid { --offset-right-size: 1; } .ml-2--md-mid { --offset-left-size: 2; } .mr-2--md-mid { --offset-right-size: 2; } .ml-3--md-mid { --offset-left-size: 3; } .mr-3--md-mid { --offset-right-size: 3; } .ml-4--md-mid { --offset-left-size: 4; } .mr-4--md-mid { --offset-right-size: 4; } .ml-5--md-mid { --offset-left-size: 5; } .mr-5--md-mid { --offset-right-size: 5; } .ml-6--md-mid { --offset-left-size: 6; } .mr-6--md-mid { --offset-right-size: 6; } .ml-7--md-mid { --offset-left-size: 7; } .mr-7--md-mid { --offset-right-size: 7; } .ml-8--md-mid { --offset-left-size: 8; } .mr-8--md-mid { --offset-right-size: 8; } .ml-9--md-mid { --offset-left-size: 9; } .mr-9--md-mid { --offset-right-size: 9; } .ml-10--md-mid { --offset-left-size: 10; } .mr-10--md-mid { --offset-right-size: 10; } .ml-11--md-mid { --offset-left-size: 11; } .mr-11--md-mid { --offset-right-size: 11; } .ml-12--md-mid { --offset-left-size: 12; } .mr-12--md-mid { --offset-right-size: 12; } } @media screen and ( min-width: 85.375em ) { .col-1--lg { --column-size: 1; } .col-1--lg > *, .col-1--lg::before, .col-1--lg::after { --container-columns: 1; } .col-1--lg.grid { --grid-columns: 1; } .start-1--lg { grid-column-start: 1; } .col-2--lg { --column-size: 2; } .col-2--lg > *, .col-2--lg::before, .col-2--lg::after { --container-columns: 2; } .col-2--lg.grid { --grid-columns: 2; } .start-2--lg { grid-column-start: 2; } .col-3--lg { --column-size: 3; } .col-3--lg > *, .col-3--lg::before, .col-3--lg::after { --container-columns: 3; } .col-3--lg.grid { --grid-columns: 3; } .start-3--lg { grid-column-start: 3; } .col-4--lg { --column-size: 4; } .col-4--lg > *, .col-4--lg::before, .col-4--lg::after { --container-columns: 4; } .col-4--lg.grid { --grid-columns: 4; } .start-4--lg { grid-column-start: 4; } .col-5--lg { --column-size: 5; } .col-5--lg > *, .col-5--lg::before, .col-5--lg::after { --container-columns: 5; } .col-5--lg.grid { --grid-columns: 5; } .start-5--lg { grid-column-start: 5; } .col-6--lg { --column-size: 6; } .col-6--lg > *, .col-6--lg::before, .col-6--lg::after { --container-columns: 6; } .col-6--lg.grid { --grid-columns: 6; } .start-6--lg { grid-column-start: 6; } .col-7--lg { --column-size: 7; } .col-7--lg > *, .col-7--lg::before, .col-7--lg::after { --container-columns: 7; } .col-7--lg.grid { --grid-columns: 7; } .start-7--lg { grid-column-start: 7; } .col-8--lg { --column-size: 8; } .col-8--lg > *, .col-8--lg::before, .col-8--lg::after { --container-columns: 8; } .col-8--lg.grid { --grid-columns: 8; } .start-8--lg { grid-column-start: 8; } .col-9--lg { --column-size: 9; } .col-9--lg > *, .col-9--lg::before, .col-9--lg::after { --container-columns: 9; } .col-9--lg.grid { --grid-columns: 9; } .start-9--lg { grid-column-start: 9; } .col-10--lg { --column-size: 10; } .col-10--lg > *, .col-10--lg::before, .col-10--lg::after { --container-columns: 10; } .col-10--lg.grid { --grid-columns: 10; } .start-10--lg { grid-column-start: 10; } .col-11--lg { --column-size: 11; } .col-11--lg > *, .col-11--lg::before, .col-11--lg::after { --container-columns: 11; } .col-11--lg.grid { --grid-columns: 11; } .start-11--lg { grid-column-start: 11; } .col-12--lg { --column-size: 12; } .col-12--lg > *, .col-12--lg::before, .col-12--lg::after { --container-columns: 12; } .col-12--lg.grid { --grid-columns: 12; } .start-12--lg { grid-column-start: 12; } .col-20--lg { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--lg, .col-25--lg { --column-size: calc(var(--container-columns) * 0.25); } .col-third--lg, .col-33--lg { --column-size: calc(var(--container-columns) / 3); } .col-40--lg { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--lg, .col-50--lg { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--lg, .col-66--lg { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--lg { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--lg, .col-75--lg { --column-size: calc(var(--container-columns) * 0.75); } .col-80--lg { --column-size: calc(var(--container-columns) * 0.8); } .col-full--lg, .col-100--lg { --column-size: var(--container-columns); } .col-auto--lg { --width: 0 0 auto; --min-width: auto; } .col-flow--lg { --width: 1 1 0%; --min-width: auto; } .col-grow--lg { --width: 1 0 auto; --min-width: auto; } .col-demi--lg { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--lg { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--lg { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--lg { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--lg { --column-size: var(--container-columns); } .ml-0--lg { --offset-left-size: 0; } .mr-0--lg { --offset-right-size: 0; } .ml-1--lg { --offset-left-size: 1; } .mr-1--lg { --offset-right-size: 1; } .ml-2--lg { --offset-left-size: 2; } .mr-2--lg { --offset-right-size: 2; } .ml-3--lg { --offset-left-size: 3; } .mr-3--lg { --offset-right-size: 3; } .ml-4--lg { --offset-left-size: 4; } .mr-4--lg { --offset-right-size: 4; } .ml-5--lg { --offset-left-size: 5; } .mr-5--lg { --offset-right-size: 5; } .ml-6--lg { --offset-left-size: 6; } .mr-6--lg { --offset-right-size: 6; } .ml-7--lg { --offset-left-size: 7; } .mr-7--lg { --offset-right-size: 7; } .ml-8--lg { --offset-left-size: 8; } .mr-8--lg { --offset-right-size: 8; } .ml-9--lg { --offset-left-size: 9; } .mr-9--lg { --offset-right-size: 9; } .ml-10--lg { --offset-left-size: 10; } .mr-10--lg { --offset-right-size: 10; } .ml-11--lg { --offset-left-size: 11; } .mr-11--lg { --offset-right-size: 11; } .ml-12--lg { --offset-left-size: 12; } .mr-12--lg { --offset-right-size: 12; } } @media screen and ( min-width: 90em ) { .col-1--lg-mid { --column-size: 1; } .col-1--lg-mid > *, .col-1--lg-mid::before, .col-1--lg-mid::after { --container-columns: 1; } .col-1--lg-mid.grid { --grid-columns: 1; } .start-1--lg-mid { grid-column-start: 1; } .col-2--lg-mid { --column-size: 2; } .col-2--lg-mid > *, .col-2--lg-mid::before, .col-2--lg-mid::after { --container-columns: 2; } .col-2--lg-mid.grid { --grid-columns: 2; } .start-2--lg-mid { grid-column-start: 2; } .col-3--lg-mid { --column-size: 3; } .col-3--lg-mid > *, .col-3--lg-mid::before, .col-3--lg-mid::after { --container-columns: 3; } .col-3--lg-mid.grid { --grid-columns: 3; } .start-3--lg-mid { grid-column-start: 3; } .col-4--lg-mid { --column-size: 4; } .col-4--lg-mid > *, .col-4--lg-mid::before, .col-4--lg-mid::after { --container-columns: 4; } .col-4--lg-mid.grid { --grid-columns: 4; } .start-4--lg-mid { grid-column-start: 4; } .col-5--lg-mid { --column-size: 5; } .col-5--lg-mid > *, .col-5--lg-mid::before, .col-5--lg-mid::after { --container-columns: 5; } .col-5--lg-mid.grid { --grid-columns: 5; } .start-5--lg-mid { grid-column-start: 5; } .col-6--lg-mid { --column-size: 6; } .col-6--lg-mid > *, .col-6--lg-mid::before, .col-6--lg-mid::after { --container-columns: 6; } .col-6--lg-mid.grid { --grid-columns: 6; } .start-6--lg-mid { grid-column-start: 6; } .col-7--lg-mid { --column-size: 7; } .col-7--lg-mid > *, .col-7--lg-mid::before, .col-7--lg-mid::after { --container-columns: 7; } .col-7--lg-mid.grid { --grid-columns: 7; } .start-7--lg-mid { grid-column-start: 7; } .col-8--lg-mid { --column-size: 8; } .col-8--lg-mid > *, .col-8--lg-mid::before, .col-8--lg-mid::after { --container-columns: 8; } .col-8--lg-mid.grid { --grid-columns: 8; } .start-8--lg-mid { grid-column-start: 8; } .col-9--lg-mid { --column-size: 9; } .col-9--lg-mid > *, .col-9--lg-mid::before, .col-9--lg-mid::after { --container-columns: 9; } .col-9--lg-mid.grid { --grid-columns: 9; } .start-9--lg-mid { grid-column-start: 9; } .col-10--lg-mid { --column-size: 10; } .col-10--lg-mid > *, .col-10--lg-mid::before, .col-10--lg-mid::after { --container-columns: 10; } .col-10--lg-mid.grid { --grid-columns: 10; } .start-10--lg-mid { grid-column-start: 10; } .col-11--lg-mid { --column-size: 11; } .col-11--lg-mid > *, .col-11--lg-mid::before, .col-11--lg-mid::after { --container-columns: 11; } .col-11--lg-mid.grid { --grid-columns: 11; } .start-11--lg-mid { grid-column-start: 11; } .col-12--lg-mid { --column-size: 12; } .col-12--lg-mid > *, .col-12--lg-mid::before, .col-12--lg-mid::after { --container-columns: 12; } .col-12--lg-mid.grid { --grid-columns: 12; } .start-12--lg-mid { grid-column-start: 12; } .col-20--lg-mid { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--lg-mid, .col-25--lg-mid { --column-size: calc(var(--container-columns) * 0.25); } .col-third--lg-mid, .col-33--lg-mid { --column-size: calc(var(--container-columns) / 3); } .col-40--lg-mid { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--lg-mid, .col-50--lg-mid { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--lg-mid, .col-66--lg-mid { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--lg-mid { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--lg-mid, .col-75--lg-mid { --column-size: calc(var(--container-columns) * 0.75); } .col-80--lg-mid { --column-size: calc(var(--container-columns) * 0.8); } .col-full--lg-mid, .col-100--lg-mid { --column-size: var(--container-columns); } .col-auto--lg-mid { --width: 0 0 auto; --min-width: auto; } .col-flow--lg-mid { --width: 1 1 0%; --min-width: auto; } .col-grow--lg-mid { --width: 1 0 auto; --min-width: auto; } .col-demi--lg-mid { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--lg-mid { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--lg-mid { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--lg-mid { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--lg-mid { --column-size: var(--container-columns); } .ml-0--lg-mid { --offset-left-size: 0; } .mr-0--lg-mid { --offset-right-size: 0; } .ml-1--lg-mid { --offset-left-size: 1; } .mr-1--lg-mid { --offset-right-size: 1; } .ml-2--lg-mid { --offset-left-size: 2; } .mr-2--lg-mid { --offset-right-size: 2; } .ml-3--lg-mid { --offset-left-size: 3; } .mr-3--lg-mid { --offset-right-size: 3; } .ml-4--lg-mid { --offset-left-size: 4; } .mr-4--lg-mid { --offset-right-size: 4; } .ml-5--lg-mid { --offset-left-size: 5; } .mr-5--lg-mid { --offset-right-size: 5; } .ml-6--lg-mid { --offset-left-size: 6; } .mr-6--lg-mid { --offset-right-size: 6; } .ml-7--lg-mid { --offset-left-size: 7; } .mr-7--lg-mid { --offset-right-size: 7; } .ml-8--lg-mid { --offset-left-size: 8; } .mr-8--lg-mid { --offset-right-size: 8; } .ml-9--lg-mid { --offset-left-size: 9; } .mr-9--lg-mid { --offset-right-size: 9; } .ml-10--lg-mid { --offset-left-size: 10; } .mr-10--lg-mid { --offset-right-size: 10; } .ml-11--lg-mid { --offset-left-size: 11; } .mr-11--lg-mid { --offset-right-size: 11; } .ml-12--lg-mid { --offset-left-size: 12; } .mr-12--lg-mid { --offset-right-size: 12; } } @media screen and ( min-width: 96em ) { .col-1--xl { --column-size: 1; } .col-1--xl > *, .col-1--xl::before, .col-1--xl::after { --container-columns: 1; } .col-1--xl.grid { --grid-columns: 1; } .start-1--xl { grid-column-start: 1; } .col-2--xl { --column-size: 2; } .col-2--xl > *, .col-2--xl::before, .col-2--xl::after { --container-columns: 2; } .col-2--xl.grid { --grid-columns: 2; } .start-2--xl { grid-column-start: 2; } .col-3--xl { --column-size: 3; } .col-3--xl > *, .col-3--xl::before, .col-3--xl::after { --container-columns: 3; } .col-3--xl.grid { --grid-columns: 3; } .start-3--xl { grid-column-start: 3; } .col-4--xl { --column-size: 4; } .col-4--xl > *, .col-4--xl::before, .col-4--xl::after { --container-columns: 4; } .col-4--xl.grid { --grid-columns: 4; } .start-4--xl { grid-column-start: 4; } .col-5--xl { --column-size: 5; } .col-5--xl > *, .col-5--xl::before, .col-5--xl::after { --container-columns: 5; } .col-5--xl.grid { --grid-columns: 5; } .start-5--xl { grid-column-start: 5; } .col-6--xl { --column-size: 6; } .col-6--xl > *, .col-6--xl::before, .col-6--xl::after { --container-columns: 6; } .col-6--xl.grid { --grid-columns: 6; } .start-6--xl { grid-column-start: 6; } .col-7--xl { --column-size: 7; } .col-7--xl > *, .col-7--xl::before, .col-7--xl::after { --container-columns: 7; } .col-7--xl.grid { --grid-columns: 7; } .start-7--xl { grid-column-start: 7; } .col-8--xl { --column-size: 8; } .col-8--xl > *, .col-8--xl::before, .col-8--xl::after { --container-columns: 8; } .col-8--xl.grid { --grid-columns: 8; } .start-8--xl { grid-column-start: 8; } .col-9--xl { --column-size: 9; } .col-9--xl > *, .col-9--xl::before, .col-9--xl::after { --container-columns: 9; } .col-9--xl.grid { --grid-columns: 9; } .start-9--xl { grid-column-start: 9; } .col-10--xl { --column-size: 10; } .col-10--xl > *, .col-10--xl::before, .col-10--xl::after { --container-columns: 10; } .col-10--xl.grid { --grid-columns: 10; } .start-10--xl { grid-column-start: 10; } .col-11--xl { --column-size: 11; } .col-11--xl > *, .col-11--xl::before, .col-11--xl::after { --container-columns: 11; } .col-11--xl.grid { --grid-columns: 11; } .start-11--xl { grid-column-start: 11; } .col-12--xl { --column-size: 12; } .col-12--xl > *, .col-12--xl::before, .col-12--xl::after { --container-columns: 12; } .col-12--xl.grid { --grid-columns: 12; } .start-12--xl { grid-column-start: 12; } .col-20--xl { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--xl, .col-25--xl { --column-size: calc(var(--container-columns) * 0.25); } .col-third--xl, .col-33--xl { --column-size: calc(var(--container-columns) / 3); } .col-40--xl { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--xl, .col-50--xl { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--xl, .col-66--xl { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--xl { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--xl, .col-75--xl { --column-size: calc(var(--container-columns) * 0.75); } .col-80--xl { --column-size: calc(var(--container-columns) * 0.8); } .col-full--xl, .col-100--xl { --column-size: var(--container-columns); } .col-auto--xl { --width: 0 0 auto; --min-width: auto; } .col-flow--xl { --width: 1 1 0%; --min-width: auto; } .col-grow--xl { --width: 1 0 auto; --min-width: auto; } .col-demi--xl { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--xl { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--xl { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--xl { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--xl { --column-size: var(--container-columns); } .ml-0--xl { --offset-left-size: 0; } .mr-0--xl { --offset-right-size: 0; } .ml-1--xl { --offset-left-size: 1; } .mr-1--xl { --offset-right-size: 1; } .ml-2--xl { --offset-left-size: 2; } .mr-2--xl { --offset-right-size: 2; } .ml-3--xl { --offset-left-size: 3; } .mr-3--xl { --offset-right-size: 3; } .ml-4--xl { --offset-left-size: 4; } .mr-4--xl { --offset-right-size: 4; } .ml-5--xl { --offset-left-size: 5; } .mr-5--xl { --offset-right-size: 5; } .ml-6--xl { --offset-left-size: 6; } .mr-6--xl { --offset-right-size: 6; } .ml-7--xl { --offset-left-size: 7; } .mr-7--xl { --offset-right-size: 7; } .ml-8--xl { --offset-left-size: 8; } .mr-8--xl { --offset-right-size: 8; } .ml-9--xl { --offset-left-size: 9; } .mr-9--xl { --offset-right-size: 9; } .ml-10--xl { --offset-left-size: 10; } .mr-10--xl { --offset-right-size: 10; } .ml-11--xl { --offset-left-size: 11; } .mr-11--xl { --offset-right-size: 11; } .ml-12--xl { --offset-left-size: 12; } .mr-12--xl { --offset-right-size: 12; } } @media screen and ( min-width: 120em ) { .col-1--xxl { --column-size: 1; } .col-1--xxl > *, .col-1--xxl::before, .col-1--xxl::after { --container-columns: 1; } .col-1--xxl.grid { --grid-columns: 1; } .start-1--xxl { grid-column-start: 1; } .col-2--xxl { --column-size: 2; } .col-2--xxl > *, .col-2--xxl::before, .col-2--xxl::after { --container-columns: 2; } .col-2--xxl.grid { --grid-columns: 2; } .start-2--xxl { grid-column-start: 2; } .col-3--xxl { --column-size: 3; } .col-3--xxl > *, .col-3--xxl::before, .col-3--xxl::after { --container-columns: 3; } .col-3--xxl.grid { --grid-columns: 3; } .start-3--xxl { grid-column-start: 3; } .col-4--xxl { --column-size: 4; } .col-4--xxl > *, .col-4--xxl::before, .col-4--xxl::after { --container-columns: 4; } .col-4--xxl.grid { --grid-columns: 4; } .start-4--xxl { grid-column-start: 4; } .col-5--xxl { --column-size: 5; } .col-5--xxl > *, .col-5--xxl::before, .col-5--xxl::after { --container-columns: 5; } .col-5--xxl.grid { --grid-columns: 5; } .start-5--xxl { grid-column-start: 5; } .col-6--xxl { --column-size: 6; } .col-6--xxl > *, .col-6--xxl::before, .col-6--xxl::after { --container-columns: 6; } .col-6--xxl.grid { --grid-columns: 6; } .start-6--xxl { grid-column-start: 6; } .col-7--xxl { --column-size: 7; } .col-7--xxl > *, .col-7--xxl::before, .col-7--xxl::after { --container-columns: 7; } .col-7--xxl.grid { --grid-columns: 7; } .start-7--xxl { grid-column-start: 7; } .col-8--xxl { --column-size: 8; } .col-8--xxl > *, .col-8--xxl::before, .col-8--xxl::after { --container-columns: 8; } .col-8--xxl.grid { --grid-columns: 8; } .start-8--xxl { grid-column-start: 8; } .col-9--xxl { --column-size: 9; } .col-9--xxl > *, .col-9--xxl::before, .col-9--xxl::after { --container-columns: 9; } .col-9--xxl.grid { --grid-columns: 9; } .start-9--xxl { grid-column-start: 9; } .col-10--xxl { --column-size: 10; } .col-10--xxl > *, .col-10--xxl::before, .col-10--xxl::after { --container-columns: 10; } .col-10--xxl.grid { --grid-columns: 10; } .start-10--xxl { grid-column-start: 10; } .col-11--xxl { --column-size: 11; } .col-11--xxl > *, .col-11--xxl::before, .col-11--xxl::after { --container-columns: 11; } .col-11--xxl.grid { --grid-columns: 11; } .start-11--xxl { grid-column-start: 11; } .col-12--xxl { --column-size: 12; } .col-12--xxl > *, .col-12--xxl::before, .col-12--xxl::after { --container-columns: 12; } .col-12--xxl.grid { --grid-columns: 12; } .start-12--xxl { grid-column-start: 12; } .col-20--xxl { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--xxl, .col-25--xxl { --column-size: calc(var(--container-columns) * 0.25); } .col-third--xxl, .col-33--xxl { --column-size: calc(var(--container-columns) / 3); } .col-40--xxl { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--xxl, .col-50--xxl { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--xxl, .col-66--xxl { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--xxl { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--xxl, .col-75--xxl { --column-size: calc(var(--container-columns) * 0.75); } .col-80--xxl { --column-size: calc(var(--container-columns) * 0.8); } .col-full--xxl, .col-100--xxl { --column-size: var(--container-columns); } .col-auto--xxl { --width: 0 0 auto; --min-width: auto; } .col-flow--xxl { --width: 1 1 0%; --min-width: auto; } .col-grow--xxl { --width: 1 0 auto; --min-width: auto; } .col-demi--xxl { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--xxl { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--xxl { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--xxl { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--xxl { --column-size: var(--container-columns); } .ml-0--xxl { --offset-left-size: 0; } .mr-0--xxl { --offset-right-size: 0; } .ml-1--xxl { --offset-left-size: 1; } .mr-1--xxl { --offset-right-size: 1; } .ml-2--xxl { --offset-left-size: 2; } .mr-2--xxl { --offset-right-size: 2; } .ml-3--xxl { --offset-left-size: 3; } .mr-3--xxl { --offset-right-size: 3; } .ml-4--xxl { --offset-left-size: 4; } .mr-4--xxl { --offset-right-size: 4; } .ml-5--xxl { --offset-left-size: 5; } .mr-5--xxl { --offset-right-size: 5; } .ml-6--xxl { --offset-left-size: 6; } .mr-6--xxl { --offset-right-size: 6; } .ml-7--xxl { --offset-left-size: 7; } .mr-7--xxl { --offset-right-size: 7; } .ml-8--xxl { --offset-left-size: 8; } .mr-8--xxl { --offset-right-size: 8; } .ml-9--xxl { --offset-left-size: 9; } .mr-9--xxl { --offset-right-size: 9; } .ml-10--xxl { --offset-left-size: 10; } .mr-10--xxl { --offset-right-size: 10; } .ml-11--xxl { --offset-left-size: 11; } .mr-11--xxl { --offset-right-size: 11; } .ml-12--xxl { --offset-left-size: 12; } .mr-12--xxl { --offset-right-size: 12; } } @media screen and ( min-width: 100em ) { .col-1--max { --column-size: 1; } .col-1--max > *, .col-1--max::before, .col-1--max::after { --container-columns: 1; } .col-1--max.grid { --grid-columns: 1; } .start-1--max { grid-column-start: 1; } .col-2--max { --column-size: 2; } .col-2--max > *, .col-2--max::before, .col-2--max::after { --container-columns: 2; } .col-2--max.grid { --grid-columns: 2; } .start-2--max { grid-column-start: 2; } .col-3--max { --column-size: 3; } .col-3--max > *, .col-3--max::before, .col-3--max::after { --container-columns: 3; } .col-3--max.grid { --grid-columns: 3; } .start-3--max { grid-column-start: 3; } .col-4--max { --column-size: 4; } .col-4--max > *, .col-4--max::before, .col-4--max::after { --container-columns: 4; } .col-4--max.grid { --grid-columns: 4; } .start-4--max { grid-column-start: 4; } .col-5--max { --column-size: 5; } .col-5--max > *, .col-5--max::before, .col-5--max::after { --container-columns: 5; } .col-5--max.grid { --grid-columns: 5; } .start-5--max { grid-column-start: 5; } .col-6--max { --column-size: 6; } .col-6--max > *, .col-6--max::before, .col-6--max::after { --container-columns: 6; } .col-6--max.grid { --grid-columns: 6; } .start-6--max { grid-column-start: 6; } .col-7--max { --column-size: 7; } .col-7--max > *, .col-7--max::before, .col-7--max::after { --container-columns: 7; } .col-7--max.grid { --grid-columns: 7; } .start-7--max { grid-column-start: 7; } .col-8--max { --column-size: 8; } .col-8--max > *, .col-8--max::before, .col-8--max::after { --container-columns: 8; } .col-8--max.grid { --grid-columns: 8; } .start-8--max { grid-column-start: 8; } .col-9--max { --column-size: 9; } .col-9--max > *, .col-9--max::before, .col-9--max::after { --container-columns: 9; } .col-9--max.grid { --grid-columns: 9; } .start-9--max { grid-column-start: 9; } .col-10--max { --column-size: 10; } .col-10--max > *, .col-10--max::before, .col-10--max::after { --container-columns: 10; } .col-10--max.grid { --grid-columns: 10; } .start-10--max { grid-column-start: 10; } .col-11--max { --column-size: 11; } .col-11--max > *, .col-11--max::before, .col-11--max::after { --container-columns: 11; } .col-11--max.grid { --grid-columns: 11; } .start-11--max { grid-column-start: 11; } .col-12--max { --column-size: 12; } .col-12--max > *, .col-12--max::before, .col-12--max::after { --container-columns: 12; } .col-12--max.grid { --grid-columns: 12; } .start-12--max { grid-column-start: 12; } .col-20--max { --column-size: calc(var(--container-columns) * 0.2); } .col-quarter--max, .col-25--max { --column-size: calc(var(--container-columns) * 0.25); } .col-third--max, .col-33--max { --column-size: calc(var(--container-columns) / 3); } .col-40--max { --column-size: calc(var(--container-columns) * 0.4); } .col-demi--max, .col-50--max { --column-size: calc(var(--container-columns) * 0.5); } .col-two-third--max, .col-66--max { --column-size: calc((var(--container-columns) / 3) * 2); } .col-60--max { --column-size: calc(var(--container-columns) * 0.6); } .col-three-quarters--max, .col-75--max { --column-size: calc(var(--container-columns) * 0.75); } .col-80--max { --column-size: calc(var(--container-columns) * 0.8); } .col-full--max, .col-100--max { --column-size: var(--container-columns); } .col-auto--max { --width: 0 0 auto; --min-width: auto; } .col-flow--max { --width: 1 1 0%; --min-width: auto; } .col-grow--max { --width: 1 0 auto; --min-width: auto; } .col-demi--max { --column-size: calc(var(--container-columns) * 0.5); } .ml-demi--max { --offset-left-size: calc(var(--container-columns) * 0.5); } .mr-demi--max { --offset-right-size: calc(var(--container-columns) * 0.5); } .col-third--max { --column-size: calc(var(--container-columns) * 0.3333); } .col-full--max { --column-size: var(--container-columns); } .ml-0--max { --offset-left-size: 0; } .mr-0--max { --offset-right-size: 0; } .ml-1--max { --offset-left-size: 1; } .mr-1--max { --offset-right-size: 1; } .ml-2--max { --offset-left-size: 2; } .mr-2--max { --offset-right-size: 2; } .ml-3--max { --offset-left-size: 3; } .mr-3--max { --offset-right-size: 3; } .ml-4--max { --offset-left-size: 4; } .mr-4--max { --offset-right-size: 4; } .ml-5--max { --offset-left-size: 5; } .mr-5--max { --offset-right-size: 5; } .ml-6--max { --offset-left-size: 6; } .mr-6--max { --offset-right-size: 6; } .ml-7--max { --offset-left-size: 7; } .mr-7--max { --offset-right-size: 7; } .ml-8--max { --offset-left-size: 8; } .mr-8--max { --offset-right-size: 8; } .ml-9--max { --offset-left-size: 9; } .mr-9--max { --offset-right-size: 9; } .ml-10--max { --offset-left-size: 10; } .mr-10--max { --offset-right-size: 10; } .ml-11--max { --offset-left-size: 11; } .mr-11--max { --offset-right-size: 11; } .ml-12--max { --offset-left-size: 12; } .mr-12--max { --offset-right-size: 12; } } .first { order: -1; } html { background: var(--background-color--medium); } html, body { overflow-x: hidden; } .page__wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: calc(var(--header-height) + var(--header-offset-block) * 2) auto 1fr auto; grid-template-areas: "header" "breadcrumb" "content" "footer"; max-width: 100vw; max-width: 100dvw; min-height: 100vh; min-height: 100dvh; position: relative; } .page__wrapper:has(.page__breadcrumb) { --breadcrumb-height: 4.4rem; } .page__header { grid-area: header; max-width: 100vw; max-width: 100dvw; } .page__content { --content-padding-block: 0em; grid-area: content; padding-block-start: var(--content-padding-block); align-content: start; } @media screen and ( min-width: 48em ) { .page__content { --content-padding-block: 1.5em; } } .page__content, .page__content__article { display: grid; grid-template-columns: var(--grid-edge) minmax(0, 1fr) var(--grid-edge); width: 100%; max-width: var(--layout-max-width); margin: 0 auto; position: relative; } .page__content > *, .page__content__article > * { grid-column: 2/span 1; } .page__content__article { grid-column: 1/-1; } .page__footer { grid-area: footer; width: 100%; max-width: var(--layout-max-width); padding-inline: var(--grid-edge); margin: 0 auto; } img { display: block; -webkit-user-select: none; -moz-user-select: none; user-select: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .svg-defs, .svg-defs * { width: 0; height: 0; opacity: 0; position: absolute; pointer-events: none; } [data-flag=scroller] { display: block; height: 0.1rem; position: absolute; top: 100vh; top: 100dvh; transform: translate(0, 0.1rem); } [class*=ratio--] { aspect-ratio: var(--ratio, 1/1); } .ratio--card { --ratio: 7/5; } .alignleft, img.alignleft { margin-right: 1.5em; display: inline; float: left; } .alignright, img.alignright { margin-left: 1.5em; display: inline; float: right; } .aligncenter, img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; } .wp-caption { margin-bottom: 1.5em; text-align: center; padding-top: 5px; } .wp-caption img { border: 0 none; padding: 0; margin: 0; } .wp-caption p.wp-caption-text { line-height: 1.5; font-size: 10px; margin: 0; } blockquote.left { margin-right: 20px; text-align: right; margin-left: 0; width: 33%; float: left; } blockquote.right { margin-left: 20px; text-align: left; margin-right: 0; width: 33%; float: right; } /* purgecss start ignore */ .title, .accordion__rte :where(h1, h2, h3, h4, h5, h6):not(.title), .block__rte :where(h1, h2, h3, h4, h5, h6):not(.title), .block--rte :where(h1, h2, h3, h4, h5, h6):not(.title), .hero__rte :where(h1, h2, h3, h4, h5, h6):not(.title), .hero__introduction :where(h1, h2, h3, h4, h5, h6):not(.title), .fancybox__container .modal__rte :where(h1, h2, h3, h4, h5, h6):not(.title), trix-editor :where(h1, h2, h3, h4, h5, h6):not(.title), .notification__rte :where(h1, h2, h3, h4, h5, h6):not(.title), .form__rte :where(h1, h2, h3, h4, h5, h6):not(.title), .form__alert-rte :where(h1, h2, h3, h4, h5, h6):not(.title) { font-family: var(--title-font); font-size: var(--title-size, var(--based-font-size)); font-weight: var(--title-weight, 700); line-height: 1.2em; line-height: calc(var(--title-size) + 0.8rem); color: var(--title-color); } .title strong, .accordion__rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .block__rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .block--rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .hero__rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .hero__introduction :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .fancybox__container .modal__rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong, trix-editor :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .notification__rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .form__rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong, .form__alert-rte :where(h1, h2, h3, h4, h5, h6):not(.title) strong { color: inherit; font-weight: bolder; text-transform: uppercase; } .title mark, .accordion__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .block__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .block--rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .hero__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .hero__introduction :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .fancybox__container .modal__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark, trix-editor :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .notification__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .form__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark, .form__alert-rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark { position: relative; } .title mark::before, .accordion__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .block__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .block--rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .hero__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .hero__introduction :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .fancybox__container .modal__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, trix-editor :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .notification__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .form__rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before, .form__alert-rte :where(h1, h2, h3, h4, h5, h6):not(.title) mark::before { content: ""; display: block; width: 100%; height: 100%; background: url("../images/decoration/decoration-circle-draw.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0; left: 0; scale: 1.25; } .title--bolder { --title-weight: 800; } .title--white { --title-color: var(--title-color--light); } .title--accent { --title-color: var(--title-color--accent-medium); } .title--xxl { line-height: 1em; } .title--xxl { --title-size: 3.6rem; } .title--xl { --title-size: 2.8rem; } .title--lg, .accordion__rte h1:not(.title), .block__rte h1:not(.title), .block--rte h1:not(.title), .hero__rte h1:not(.title), .hero__introduction h1:not(.title), .fancybox__container .modal__rte h1:not(.title), trix-editor h1:not(.title), .notification__rte h1:not(.title), .form__rte h1:not(.title), .form__alert-rte h1:not(.title) { --title-size: 2.8rem; } .title--sm, .accordion__rte h3:not(.title), .block__rte h3:not(.title), .block--rte h3:not(.title), .hero__rte h3:not(.title), .hero__introduction h3:not(.title), .fancybox__container .modal__rte h3:not(.title), trix-editor h3:not(.title), .notification__rte h3:not(.title), .form__rte h3:not(.title), .form__alert-rte h3:not(.title) { --title-size: 2.4rem; } .title--xs, .accordion__rte h4:not(.title), .block__rte h4:not(.title), .block--rte h4:not(.title), .hero__rte h4:not(.title), .hero__introduction h4:not(.title), .fancybox__container .modal__rte h4:not(.title), trix-editor h4:not(.title), .notification__rte h4:not(.title), .form__rte h4:not(.title), .form__alert-rte h4:not(.title) { --title-size: 2.1rem; } @media screen and ( min-width: 24.375em ) { .title--xl { --title-size: 3.2rem; } .title--lg, .accordion__rte h1:not(.title), .block__rte h1:not(.title), .block--rte h1:not(.title), .hero__rte h1:not(.title), .hero__introduction h1:not(.title), .fancybox__container .modal__rte h1:not(.title), trix-editor h1:not(.title), .notification__rte h1:not(.title), .form__rte h1:not(.title), .form__alert-rte h1:not(.title) { --title-size: 3.2rem; } .title--sm, .accordion__rte h3:not(.title), .block__rte h3:not(.title), .block--rte h3:not(.title), .hero__rte h3:not(.title), .hero__introduction h3:not(.title), .fancybox__container .modal__rte h3:not(.title), trix-editor h3:not(.title), .notification__rte h3:not(.title), .form__rte h3:not(.title), .form__alert-rte h3:not(.title) { --title-size: 2.8rem; } .title--xs, .accordion__rte h4:not(.title), .block__rte h4:not(.title), .block--rte h4:not(.title), .hero__rte h4:not(.title), .hero__introduction h4:not(.title), .fancybox__container .modal__rte h4:not(.title), trix-editor h4:not(.title), .notification__rte h4:not(.title), .form__rte h4:not(.title), .form__alert-rte h4:not(.title) { --title-size: 2.4rem; } .title--md, .accordion__rte h2:not(.title), .block__rte h2:not(.title), .block--rte h2:not(.title), .hero__rte h2:not(.title), .hero__introduction h2:not(.title), .fancybox__container .modal__rte h2:not(.title), trix-editor h2:not(.title), .notification__rte h2:not(.title), .form__rte h2:not(.title), .form__alert-rte h2:not(.title) { --title-size: 4.8rem; } .title--xxs, .accordion__rte h5:not(.title), .block__rte h5:not(.title), .block--rte h5:not(.title), .hero__rte h5:not(.title), .hero__introduction h5:not(.title), .fancybox__container .modal__rte h5:not(.title), trix-editor h5:not(.title), .notification__rte h5:not(.title), .form__rte h5:not(.title), .form__alert-rte h5:not(.title) { --title-size: 2.4rem; } .title--xxxs, .accordion__rte h6:not(.title), .block__rte h6:not(.title), .block--rte h6:not(.title), .hero__rte h6:not(.title), .hero__introduction h6:not(.title), .fancybox__container .modal__rte h6:not(.title), trix-editor h6:not(.title), .notification__rte h6:not(.title), .form__rte h6:not(.title), .form__alert-rte h6:not(.title) { --title-size: 2.1rem; } } @media screen and ( min-width: 48em ) { .title--xxl { --title-size: 4.8rem; } .title--xl { --title-size: 4rem; } .title--lg, .accordion__rte h1:not(.title), .block__rte h1:not(.title), .block--rte h1:not(.title), .hero__rte h1:not(.title), .hero__introduction h1:not(.title), .fancybox__container .modal__rte h1:not(.title), trix-editor h1:not(.title), .notification__rte h1:not(.title), .form__rte h1:not(.title), .form__alert-rte h1:not(.title) { --title-size: 3.2rem; } } @media screen and ( min-width: 64em ) { .title--xl { --title-size: 4.8rem; } .title--lg, .accordion__rte h1:not(.title), .block__rte h1:not(.title), .block--rte h1:not(.title), .hero__rte h1:not(.title), .hero__introduction h1:not(.title), .fancybox__container .modal__rte h1:not(.title), trix-editor h1:not(.title), .notification__rte h1:not(.title), .form__rte h1:not(.title), .form__alert-rte h1:not(.title) { --title-size: 4rem; } .title--xs, .accordion__rte h4:not(.title), .block__rte h4:not(.title), .block--rte h4:not(.title), .hero__rte h4:not(.title), .hero__introduction h4:not(.title), .fancybox__container .modal__rte h4:not(.title), trix-editor h4:not(.title), .notification__rte h4:not(.title), .form__rte h4:not(.title), .form__alert-rte h4:not(.title) { --title-size: 3.2rem; } } @media screen and ( min-width: 80em ) { .title--xxl { --title-size: 6.4rem; } .title--xl { --title-size: 5.6rem; } .title--lg, .accordion__rte h1:not(.title), .block__rte h1:not(.title), .block--rte h1:not(.title), .hero__rte h1:not(.title), .hero__introduction h1:not(.title), .fancybox__container .modal__rte h1:not(.title), trix-editor h1:not(.title), .notification__rte h1:not(.title), .form__rte h1:not(.title), .form__alert-rte h1:not(.title) { --title-size: 4.8rem; } .title--sm, .accordion__rte h3:not(.title), .block__rte h3:not(.title), .block--rte h3:not(.title), .hero__rte h3:not(.title), .hero__introduction h3:not(.title), .fancybox__container .modal__rte h3:not(.title), trix-editor h3:not(.title), .notification__rte h3:not(.title), .form__rte h3:not(.title), .form__alert-rte h3:not(.title) { --title-size: 4rem; } } @media screen and ( min-width: 85.375em ) { .title--xxl { --title-size: 7.2rem; } .title--xl { --title-size: 6.4rem; } .title--lg, .accordion__rte h1:not(.title), .block__rte h1:not(.title), .block--rte h1:not(.title), .hero__rte h1:not(.title), .hero__introduction h1:not(.title), .fancybox__container .modal__rte h1:not(.title), trix-editor h1:not(.title), .notification__rte h1:not(.title), .form__rte h1:not(.title), .form__alert-rte h1:not(.title) { --title-size: 5.6rem; } } @media screen and ( min-width: 96em ) { .title--xxl { --title-size: 8rem; } } i.icon, .header__item:has(.header__sublist) > i:is(a, button) { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "hsh-icons" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } i.icon, .header__item:has(.header__sublist) > i:is(a, button), i.icon::before, .header__item:has(.header__sublist) > i:is(a, button)::before, i.icon::after, .header__item:has(.header__sublist) > i:is(a, button)::after { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .icon--xmark-solid:before { content: "\e919"; } .icon--text-slash-solid:before { content: "\e918"; } .icon--quote-right-solid:before { content: "\e916"; } .icon--underline-solid:before { content: "\e917"; } .icon--edit-line:before { content: "\e915"; } .icon--heading-solid:before, .trix-button--icon-heading-1:before { content: "\e914"; } .icon--arrow-left-long-solid:before { content: "\e900"; } .icon--arrow-right-long-solid:before { content: "\e901"; } .icon--arrow-rotate-left-solid-1:before { content: "\e902"; } .icon--arrow-rotate-right-solid:before { content: "\e903"; } .icon--bold-solid:before, .trix-button--icon-bold:before { content: "\e904"; } .icon--code-solid:before, .trix-button--icon-code:before { content: "\e905"; } .icon--image-solid:before, .trix-button--icon-attach:before { content: "\e906"; } .icon--italic-solid:before, .trix-button--icon-italic:before { content: "\e907"; } .icon--link-solid:before, .trix-button--icon-link:before { content: "\e908"; } .icon--list-ol-solid:before, .trix-button--icon-number-list:before { content: "\e909"; } .icon--list-ul-solid:before, .trix-button--icon-bullet-list:before { content: "\e90a"; } .icon--strikethrough-solid:before, .trix-button--icon-strike:before { content: "\e90b"; } .icon--calendar-line:before { content: "\e90c"; } .icon--exclamation-circle-line:before { content: "\e90d"; } .icon--eye-line:before { content: "\e90e"; } .icon--house-line:before { content: "\e90f"; } .icon--lock-line:before { content: "\e910"; } .icon--question-circle-line:before { content: "\e911"; } .icon--warning-fill:before { content: "\e912"; } .icon--clock-line:before { content: "\e913"; } .icon, .header__item:has(.header__sublist) > :is(a, button) { --icon-thickness: 1; } .icon::before, .header__item:has(.header__sublist) > :is(a, button)::before { color: var(--icon-color); } .icon--chevron-right, .icon--chevron-down, .header__item:has(.header__sublist) > :is(a, button), .icon--chevron-left { --icon-thickness: 1.4; } .icon--chevron-right::before, .icon--chevron-down::before, .header__item:has(.header__sublist) > :is(a, button)::before, .icon--chevron-left::before { content: ""; display: block; width: 0.6em; height: 0.6em; border: max(calc(var(--icon-thickness) * 0.1071428571em), 0.15rem) solid var(--icon-color); border-block-start: 0; border-inline-start: 0; transform: translate(-25%, 0) rotate(-45deg); } .icon--chevron-left::before { transform: scale(-1, 1) translate(-25%, 0) rotate(-45deg); } .icon--chevron-down::before, .header__item:has(.header__sublist) > :is(a, button)::before { transform: translate(0, -25%) rotate(45deg); } .icon--check { --icon-thickness: 1.5; } .icon--check::before { content: ""; display: block; width: 0.75em; height: 0.5em; border: max(0.0714285714em * var(--icon-thickness), 0.15rem) solid var(--icon-color); border-block-start: 0; border-inline-end: 0; transform: translate(0, -25%) rotate(-45deg); } .icon--add, .icon--cross { --icon-thickness: 1.2; display: inline-block; width: 1em; height: 1em; position: relative; } .icon--add::before, .icon--cross::before, .icon--add::after, .icon--cross::after { content: ""; display: inline-block; width: 0.75em; height: calc(var(--icon-thickness) * 0.1071428571em); border-radius: 100rem; background: var(--icon-color); position: absolute; top: 50%; left: 50%; } .icon--add::before, .icon--cross::before { transform: translate(-50%, -50%); } .icon--add::after, .icon--cross::after { transform: translate(-50%, -50%) rotate(-90deg); } .icon--cross::before { transform: translate(-50%, -50%) rotate(45deg); } .icon--cross::after { transform: translate(-50%, -50%) rotate(-45deg); } .icon--menu { display: block; width: 2.8rem; height: calc(var(--icon-thickness) * 0.1rem); border-radius: 100rem; background: var(--icon-color); position: relative; } .icon--menu::before, .icon--menu::after { content: ""; display: block; width: 100%; height: 100%; background: var(--icon-color); border-radius: 100rem; position: absolute; top: 0; left: 0; } .icon--menu::before { translate: 0 -350%; } .icon--menu::after { translate: 0 350%; } /* purgecss start ignore */ .button-underline, .trix-button--remove, input.trix-button, .accordion__rte a:not(.button, .button-inline), .block__rte a:not(.button, .button-inline), .block--rte a:not(.button, .button-inline), .hero__rte a:not(.button, .button-inline), .hero__introduction a:not(.button, .button-inline), .fancybox__container .modal__rte a:not(.button, .button-inline), trix-editor a:not(.button, .button-inline), .notification__rte a:not(.button, .button-inline), .form__rte a:not(.button, .button-inline), .form__alert-rte a:not(.button, .button-inline) { --text-color: var(--text-color--accent-3); text-decoration: underline; text-decoration-color: var(--text-color); text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media (hover: hover) { .button-underline:hover, .trix-button--remove:hover, input.trix-button:hover, .accordion__rte a:hover:not(.button, .button-inline), .block__rte a:hover:not(.button, .button-inline), .block--rte a:hover:not(.button, .button-inline), .hero__rte a:hover:not(.button, .button-inline), .hero__introduction a:hover:not(.button, .button-inline), .fancybox__container .modal__rte a:hover:not(.button, .button-inline), trix-editor a:hover:not(.button, .button-inline), .notification__rte a:hover:not(.button, .button-inline), .form__rte a:hover:not(.button, .button-inline), .form__alert-rte a:hover:not(.button, .button-inline), .button-underline:focus, .trix-button--remove:focus, input.trix-button:focus, .accordion__rte a:focus:not(.button, .button-inline), .block__rte a:focus:not(.button, .button-inline), .block--rte a:focus:not(.button, .button-inline), .hero__rte a:focus:not(.button, .button-inline), .hero__introduction a:focus:not(.button, .button-inline), .fancybox__container .modal__rte a:focus:not(.button, .button-inline), trix-editor a:focus:not(.button, .button-inline), .notification__rte a:focus:not(.button, .button-inline), .form__rte a:focus:not(.button, .button-inline), .form__alert-rte a:focus:not(.button, .button-inline) { text-underline-offset: 0.3em; } } .accordion__rte, .block__rte, .block--rte, .hero__rte, .hero__introduction, .fancybox__container .modal__rte, trix-editor, .notification__rte, .form__rte, .form__alert-rte { --rte-title-margin-start: 2.4rem; --rte-title-margin-end: 1.6rem; --rte-margin-block: 1em; } .accordion__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .block__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .block--rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .hero__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .hero__introduction > * + *:not(li, h1, h2, h3, h4, h5, h6), .fancybox__container .modal__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), trix-editor > * + *:not(li, h1, h2, h3, h4, h5, h6), .notification__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .form__rte > * + *:not(li, h1, h2, h3, h4, h5, h6), .form__alert-rte > * + *:not(li, h1, h2, h3, h4, h5, h6) { margin-block-start: var(--rte-margin-block); } .accordion__rte > * + :is(h1, h2, h3, h4, h5, h6), .block__rte > * + :is(h1, h2, h3, h4, h5, h6), .block--rte > * + :is(h1, h2, h3, h4, h5, h6), .hero__rte > * + :is(h1, h2, h3, h4, h5, h6), .hero__introduction > * + :is(h1, h2, h3, h4, h5, h6), .fancybox__container .modal__rte > * + :is(h1, h2, h3, h4, h5, h6), trix-editor > * + :is(h1, h2, h3, h4, h5, h6), .notification__rte > * + :is(h1, h2, h3, h4, h5, h6), .form__rte > * + :is(h1, h2, h3, h4, h5, h6), .form__alert-rte > * + :is(h1, h2, h3, h4, h5, h6) { margin-block-start: min(2em, var(--rte-title-margin-start)); } .accordion__rte > * + :is(img, .block__media), .block__rte > * + :is(img, .block__media), .block--rte > * + :is(img, .block__media), .hero__rte > * + :is(img, .block__media), .hero__introduction > * + :is(img, .block__media), .fancybox__container .modal__rte > * + :is(img, .block__media), trix-editor > * + :is(img, .block__media), .notification__rte > * + :is(img, .block__media), .form__rte > * + :is(img, .block__media), .form__alert-rte > * + :is(img, .block__media) { margin-block-start: 2.4rem; } @media screen and ( min-width: 48em ) { .accordion__rte > * + :is(img, .block__media), .block__rte > * + :is(img, .block__media), .block--rte > * + :is(img, .block__media), .hero__rte > * + :is(img, .block__media), .hero__introduction > * + :is(img, .block__media), .fancybox__container .modal__rte > * + :is(img, .block__media), trix-editor > * + :is(img, .block__media), .notification__rte > * + :is(img, .block__media), .form__rte > * + :is(img, .block__media), .form__alert-rte > * + :is(img, .block__media) { margin-block-start: 3.2rem; } } .accordion__rte > :is(img, figure, .block__media) + *, .block__rte > :is(img, figure, .block__media) + *, .block--rte > :is(img, figure, .block__media) + *, .hero__rte > :is(img, figure, .block__media) + *, .hero__introduction > :is(img, figure, .block__media) + *, .fancybox__container .modal__rte > :is(img, figure, .block__media) + *, trix-editor > :is(img, figure, .block__media) + *, .notification__rte > :is(img, figure, .block__media) + *, .form__rte > :is(img, figure, .block__media) + *, .form__alert-rte > :is(img, figure, .block__media) + * { margin-block-start: 2.4rem; } @media screen and ( min-width: 48em ) { .accordion__rte > :is(img, figure, .block__media) + *, .block__rte > :is(img, figure, .block__media) + *, .block--rte > :is(img, figure, .block__media) + *, .hero__rte > :is(img, figure, .block__media) + *, .hero__introduction > :is(img, figure, .block__media) + *, .fancybox__container .modal__rte > :is(img, figure, .block__media) + *, trix-editor > :is(img, figure, .block__media) + *, .notification__rte > :is(img, figure, .block__media) + *, .form__rte > :is(img, figure, .block__media) + *, .form__alert-rte > :is(img, figure, .block__media) + * { margin-block-start: 3.2rem; } } .accordion__rte > * + blockquote, .block__rte > * + blockquote, .block--rte > * + blockquote, .hero__rte > * + blockquote, .hero__introduction > * + blockquote, .fancybox__container .modal__rte > * + blockquote, trix-editor > * + blockquote, .notification__rte > * + blockquote, .form__rte > * + blockquote, .form__alert-rte > * + blockquote { margin-block-start: 3em; } .accordion__rte > * + table, .block__rte > * + table, .block--rte > * + table, .hero__rte > * + table, .hero__introduction > * + table, .fancybox__container .modal__rte > * + table, trix-editor > * + table, .notification__rte > * + table, .form__rte > * + table, .form__alert-rte > * + table, .accordion__rte > table + *, .block__rte > table + *, .block--rte > table + *, .hero__rte > table + *, .hero__introduction > table + *, .fancybox__container .modal__rte > table + *, trix-editor > table + *, .notification__rte > table + *, .form__rte > table + *, .form__alert-rte > table + * { margin-block-start: 4em; } .accordion__rte, .block__rte, .block--rte, .hero__rte, .hero__introduction, .fancybox__container .modal__rte, trix-editor, .notification__rte, .form__rte, .form__alert-rte { --rte-mark-color: var(--text-color); } .accordion__rte :where(h3, h4, h5, h6):not(.title), .block__rte :where(h3, h4, h5, h6):not(.title), .block--rte :where(h3, h4, h5, h6):not(.title), .hero__rte :where(h3, h4, h5, h6):not(.title), .hero__introduction :where(h3, h4, h5, h6):not(.title), .fancybox__container .modal__rte :where(h3, h4, h5, h6):not(.title), trix-editor :where(h3, h4, h5, h6):not(.title), .notification__rte :where(h3, h4, h5, h6):not(.title), .form__rte :where(h3, h4, h5, h6):not(.title), .form__alert-rte :where(h3, h4, h5, h6):not(.title) { font-weight: 500; } .accordion__rte a[data-special], .block__rte a[data-special], .block--rte a[data-special], .hero__rte a[data-special], .hero__introduction a[data-special], .fancybox__container .modal__rte a[data-special], trix-editor a[data-special], .notification__rte a[data-special], .form__rte a[data-special], .form__alert-rte a[data-special] { text-decoration: none; background: url("../images/placeholder/stroke.svg"); background-repeat: repeat-x; background-position: 0 1em; padding-block-end: 2em; margin-block-start: -2em; } .accordion__rte small, .block__rte small, .block--rte small, .hero__rte small, .hero__introduction small, .fancybox__container .modal__rte small, trix-editor small, .notification__rte small, .form__rte small, .form__alert-rte small { display: inline-block; } .accordion__rte del, .block__rte del, .block--rte del, .hero__rte del, .hero__introduction del, .fancybox__container .modal__rte del, trix-editor del, .notification__rte del, .form__rte del, .form__alert-rte del { text-decoration: line-through; } .accordion__rte ul:not(.block__list, .notification__list), .block__rte ul:not(.block__list, .notification__list), .block--rte ul:not(.block__list, .notification__list), .hero__rte ul:not(.block__list, .notification__list), .hero__introduction ul:not(.block__list, .notification__list), .fancybox__container .modal__rte ul:not(.block__list, .notification__list), trix-editor ul:not(.block__list, .notification__list), .notification__rte ul:not(.block__list, .notification__list), .form__rte ul:not(.block__list, .notification__list), .form__alert-rte ul:not(.block__list, .notification__list), .accordion__rte ol:not(.block__list, .notification__list), .block__rte ol:not(.block__list, .notification__list), .block--rte ol:not(.block__list, .notification__list), .hero__rte ol:not(.block__list, .notification__list), .hero__introduction ol:not(.block__list, .notification__list), .fancybox__container .modal__rte ol:not(.block__list, .notification__list), trix-editor ol:not(.block__list, .notification__list), .notification__rte ol:not(.block__list, .notification__list), .form__rte ol:not(.block__list, .notification__list), .form__alert-rte ol:not(.block__list, .notification__list) { display: flex; flex-wrap: wrap; flex: 0 0 100%; gap: 0.4rem 2em; } .accordion__rte ul ul, .block__rte ul ul, .block--rte ul ul, .hero__rte ul ul, .hero__introduction ul ul, .fancybox__container .modal__rte ul ul, trix-editor ul ul, .notification__rte ul ul, .form__rte ul ul, .form__alert-rte ul ul, .accordion__rte ul ol, .block__rte ul ol, .block--rte ul ol, .hero__rte ul ol, .hero__introduction ul ol, .fancybox__container .modal__rte ul ol, trix-editor ul ol, .notification__rte ul ol, .form__rte ul ol, .form__alert-rte ul ol, .accordion__rte ol ul, .block__rte ol ul, .block--rte ol ul, .hero__rte ol ul, .hero__introduction ol ul, .fancybox__container .modal__rte ol ul, trix-editor ol ul, .notification__rte ol ul, .form__rte ol ul, .form__alert-rte ol ul, .accordion__rte ol ol, .block__rte ol ol, .block--rte ol ol, .hero__rte ol ol, .hero__introduction ol ol, .fancybox__container .modal__rte ol ol, trix-editor ol ol, .notification__rte ol ol, .form__rte ol ol, .form__alert-rte ol ol { padding-block: 0.5em; } .accordion__rte ul ol li, .block__rte ul ol li, .block--rte ul ol li, .hero__rte ul ol li, .hero__introduction ul ol li, .fancybox__container .modal__rte ul ol li, trix-editor ul ol li, .notification__rte ul ol li, .form__rte ul ol li, .form__alert-rte ul ol li, .accordion__rte ol ol li, .block__rte ol ol li, .block--rte ol ol li, .hero__rte ol ol li, .hero__introduction ol ol li, .fancybox__container .modal__rte ol ol li, trix-editor ol ol li, .notification__rte ol ol li, .form__rte ol ol li, .form__alert-rte ol ol li { padding-inline-start: 2.5em; } .accordion__rte ul li:not([class]), .block__rte ul li:not([class]), .block--rte ul li:not([class]), .hero__rte ul li:not([class]), .hero__introduction ul li:not([class]), .fancybox__container .modal__rte ul li:not([class]), trix-editor ul li:not([class]), .notification__rte ul li:not([class]), .form__rte ul li:not([class]), .form__alert-rte ul li:not([class]), .accordion__rte ol li:not([class]), .block__rte ol li:not([class]), .block--rte ol li:not([class]), .hero__rte ol li:not([class]), .hero__introduction ol li:not([class]), .fancybox__container .modal__rte ol li:not([class]), trix-editor ol li:not([class]), .notification__rte ol li:not([class]), .form__rte ol li:not([class]), .form__alert-rte ol li:not([class]) { padding: 0 1em; padding-inline-start: 2em; flex: 0 0 100%; position: relative; } .accordion__rte ul li:not([class]) > :is(p), .block__rte ul li:not([class]) > :is(p), .block--rte ul li:not([class]) > :is(p), .hero__rte ul li:not([class]) > :is(p), .hero__introduction ul li:not([class]) > :is(p), .fancybox__container .modal__rte ul li:not([class]) > :is(p), trix-editor ul li:not([class]) > :is(p), .notification__rte ul li:not([class]) > :is(p), .form__rte ul li:not([class]) > :is(p), .form__alert-rte ul li:not([class]) > :is(p), .accordion__rte ol li:not([class]) > :is(p), .block__rte ol li:not([class]) > :is(p), .block--rte ol li:not([class]) > :is(p), .hero__rte ol li:not([class]) > :is(p), .hero__introduction ol li:not([class]) > :is(p), .fancybox__container .modal__rte ol li:not([class]) > :is(p), trix-editor ol li:not([class]) > :is(p), .notification__rte ol li:not([class]) > :is(p), .form__rte ol li:not([class]) > :is(p), .form__alert-rte ol li:not([class]) > :is(p) { display: inline-block; } .accordion__rte ul li:not([class])::before, .block__rte ul li:not([class])::before, .block--rte ul li:not([class])::before, .hero__rte ul li:not([class])::before, .hero__introduction ul li:not([class])::before, .fancybox__container .modal__rte ul li:not([class])::before, trix-editor ul li:not([class])::before, .notification__rte ul li:not([class])::before, .form__rte ul li:not([class])::before, .form__alert-rte ul li:not([class])::before, .accordion__rte ol li:not([class])::before, .block__rte ol li:not([class])::before, .block--rte ol li:not([class])::before, .hero__rte ol li:not([class])::before, .hero__introduction ol li:not([class])::before, .fancybox__container .modal__rte ol li:not([class])::before, trix-editor ol li:not([class])::before, .notification__rte ol li:not([class])::before, .form__rte ol li:not([class])::before, .form__alert-rte ol li:not([class])::before { color: var(--rte-mark-color); font-weight: 600; position: absolute; left: 0; } .accordion__rte ul:not([class]) > li::before, .block__rte ul:not([class]) > li::before, .block--rte ul:not([class]) > li::before, .hero__rte ul:not([class]) > li::before, .hero__introduction ul:not([class]) > li::before, .fancybox__container .modal__rte ul:not([class]) > li::before, trix-editor ul:not([class]) > li::before, .notification__rte ul:not([class]) > li::before, .form__rte ul:not([class]) > li::before, .form__alert-rte ul:not([class]) > li::before { content: "•"; -webkit-text-stroke: 0.1rem var(--rte-mark-color); } .accordion__rte ol:not([class]), .block__rte ol:not([class]), .block--rte ol:not([class]), .hero__rte ol:not([class]), .hero__introduction ol:not([class]), .fancybox__container .modal__rte ol:not([class]), trix-editor ol:not([class]), .notification__rte ol:not([class]), .form__rte ol:not([class]), .form__alert-rte ol:not([class]) { counter-reset: index; } .accordion__rte ol:not([class]) > li, .block__rte ol:not([class]) > li, .block--rte ol:not([class]) > li, .hero__rte ol:not([class]) > li, .hero__introduction ol:not([class]) > li, .fancybox__container .modal__rte ol:not([class]) > li, trix-editor ol:not([class]) > li, .notification__rte ol:not([class]) > li, .form__rte ol:not([class]) > li, .form__alert-rte ol:not([class]) > li { counter-increment: index; } .accordion__rte ol:not([class]) > li:before, .block__rte ol:not([class]) > li:before, .block--rte ol:not([class]) > li:before, .hero__rte ol:not([class]) > li:before, .hero__introduction ol:not([class]) > li:before, .fancybox__container .modal__rte ol:not([class]) > li:before, trix-editor ol:not([class]) > li:before, .notification__rte ol:not([class]) > li:before, .form__rte ol:not([class]) > li:before, .form__alert-rte ol:not([class]) > li:before { content: counters(index, ".", decimal) "."; } .accordion__rte *:not([class]) li ul li::before, .block__rte *:not([class]) li ul li::before, .block--rte *:not([class]) li ul li::before, .hero__rte *:not([class]) li ul li::before, .hero__introduction *:not([class]) li ul li::before, .fancybox__container .modal__rte *:not([class]) li ul li::before, trix-editor *:not([class]) li ul li::before, .notification__rte *:not([class]) li ul li::before, .form__rte *:not([class]) li ul li::before, .form__alert-rte *:not([class]) li ul li::before { color: transparent; } .accordion__rte abbr::before, .block__rte abbr::before, .block--rte abbr::before, .hero__rte abbr::before, .hero__introduction abbr::before, .fancybox__container .modal__rte abbr::before, trix-editor abbr::before, .notification__rte abbr::before, .form__rte abbr::before, .form__alert-rte abbr::before { content: open-quote " "; } .accordion__rte abbr::after, .block__rte abbr::after, .block--rte abbr::after, .hero__rte abbr::after, .hero__introduction abbr::after, .fancybox__container .modal__rte abbr::after, trix-editor abbr::after, .notification__rte abbr::after, .form__rte abbr::after, .form__alert-rte abbr::after { content: " " close-quote; } .accordion__rte em, .block__rte em, .block--rte em, .hero__rte em, .hero__introduction em, .fancybox__container .modal__rte em, trix-editor em, .notification__rte em, .form__rte em, .form__alert-rte em { --text-color: var(--text-color--medium); } .accordion__rte blockquote, .block__rte blockquote, .block--rte blockquote, .hero__rte blockquote, .hero__introduction blockquote, .fancybox__container .modal__rte blockquote, trix-editor blockquote, .notification__rte blockquote, .form__rte blockquote, .form__alert-rte blockquote { padding-block: 2em; border-block: 0.1rem solid var(--stroke-color--accent-3); text-align: center; } .accordion__rte blockquote p, .block__rte blockquote p, .block--rte blockquote p, .hero__rte blockquote p, .hero__introduction blockquote p, .fancybox__container .modal__rte blockquote p, trix-editor blockquote p, .notification__rte blockquote p, .form__rte blockquote p, .form__alert-rte blockquote p { font-style: italic; font-size: 1.25em; line-height: 1.5em; font-weight: lighter; } @media screen and ( min-width: 64em ) { .accordion__rte blockquote p, .block__rte blockquote p, .block--rte blockquote p, .hero__rte blockquote p, .hero__introduction blockquote p, .fancybox__container .modal__rte blockquote p, trix-editor blockquote p, .notification__rte blockquote p, .form__rte blockquote p, .form__alert-rte blockquote p { font-size: 1.5em; padding-inline: 3em; } } .accordion__rte blockquote cite, .block__rte blockquote cite, .block--rte blockquote cite, .hero__rte blockquote cite, .hero__introduction blockquote cite, .fancybox__container .modal__rte blockquote cite, trix-editor blockquote cite, .notification__rte blockquote cite, .form__rte blockquote cite, .form__alert-rte blockquote cite { --text-color: var(--text-color--accent-3); display: block; padding-block-start: 1em; font-weight: 500; } @media screen and ( min-width: 64em ) { .accordion__rte blockquote cite, .block__rte blockquote cite, .block--rte blockquote cite, .hero__rte blockquote cite, .hero__introduction blockquote cite, .fancybox__container .modal__rte blockquote cite, trix-editor blockquote cite, .notification__rte blockquote cite, .form__rte blockquote cite, .form__alert-rte blockquote cite { font-size: 1.25em; } } .accordion__rte blockquote cite::before, .block__rte blockquote cite::before, .block--rte blockquote cite::before, .hero__rte blockquote cite::before, .hero__introduction blockquote cite::before, .fancybox__container .modal__rte blockquote cite::before, trix-editor blockquote cite::before, .notification__rte blockquote cite::before, .form__rte blockquote cite::before, .form__alert-rte blockquote cite::before { content: "― "; } .accordion__rte :where(img:not([class])), .block__rte :where(img:not([class])), .block--rte :where(img:not([class])), .hero__rte :where(img:not([class])), .hero__introduction :where(img:not([class])), .fancybox__container .modal__rte :where(img:not([class])), trix-editor :where(img:not([class])), .notification__rte :where(img:not([class])), .form__rte :where(img:not([class])), .form__alert-rte :where(img:not([class])) { border-radius: var(--radius--default); } .accordion__rte figcaption, .block__rte figcaption, .block--rte figcaption, .hero__rte figcaption, .hero__introduction figcaption, .fancybox__container .modal__rte figcaption, trix-editor figcaption, .notification__rte figcaption, .form__rte figcaption, .form__alert-rte figcaption { margin-block-start: 1em; padding-inline: var(--radius--default); font-size: 1.4rem; font-weight: 500; color: var(--text-color--accent-3); } .accordion__rte table, .block__rte table, .block--rte table, .hero__rte table, .hero__introduction table, .fancybox__container .modal__rte table, trix-editor table, .notification__rte table, .form__rte table, .form__alert-rte table { width: column(12); position: relative; left: 50%; transform: translate(-50%, 0); } @media screen and ( min-width: 80em ) { .accordion__rte table, .block__rte table, .block--rte table, .hero__rte table, .hero__introduction table, .fancybox__container .modal__rte table, trix-editor table, .notification__rte table, .form__rte table, .form__alert-rte table { width: column(10); } } .accordion__rte thead, .block__rte thead, .block--rte thead, .hero__rte thead, .hero__introduction thead, .fancybox__container .modal__rte thead, trix-editor thead, .notification__rte thead, .form__rte thead, .form__alert-rte thead { background: var(--background-color--accent-3); } @media screen and ( max-width: 47.9375em ) { .accordion__rte thead, .block__rte thead, .block--rte thead, .hero__rte thead, .hero__introduction thead, .fancybox__container .modal__rte thead, trix-editor thead, .notification__rte thead, .form__rte thead, .form__alert-rte thead { display: none; } } .accordion__rte tbody img, .block__rte tbody img, .block--rte tbody img, .hero__rte tbody img, .hero__introduction tbody img, .fancybox__container .modal__rte tbody img, trix-editor tbody img, .notification__rte tbody img, .form__rte tbody img, .form__alert-rte tbody img { width: 100%; border-radius: var(--radius--xs); } .accordion__rte tbody tr:nth-child(even), .block__rte tbody tr:nth-child(even), .block--rte tbody tr:nth-child(even), .hero__rte tbody tr:nth-child(even), .hero__introduction tbody tr:nth-child(even), .fancybox__container .modal__rte tbody tr:nth-child(even), trix-editor tbody tr:nth-child(even), .notification__rte tbody tr:nth-child(even), .form__rte tbody tr:nth-child(even), .form__alert-rte tbody tr:nth-child(even) { background: var(--background-color--accent-4); } .accordion__rte tr, .block__rte tr, .block--rte tr, .hero__rte tr, .hero__introduction tr, .fancybox__container .modal__rte tr, trix-editor tr, .notification__rte tr, .form__rte tr, .form__alert-rte tr { display: flex; flex-wrap: wrap; } @media screen and ( max-width: 47.9375em ) { .accordion__rte tr, .block__rte tr, .block--rte tr, .hero__rte tr, .hero__introduction tr, .fancybox__container .modal__rte tr, trix-editor tr, .notification__rte tr, .form__rte tr, .form__alert-rte tr { padding: 0.5em; padding-block-end: 1em; background: var(--background-color--accent-4); border-radius: var(--radius--sm); } } .accordion__rte tr > *, .block__rte tr > *, .block--rte tr > *, .hero__rte tr > *, .hero__introduction tr > *, .fancybox__container .modal__rte tr > *, trix-editor tr > *, .notification__rte tr > *, .form__rte tr > *, .form__alert-rte tr > * { flex: 0 0 100%; } @media screen and ( min-width: 48em ) { .accordion__rte tr > *, .block__rte tr > *, .block--rte tr > *, .hero__rte tr > *, .hero__introduction tr > *, .fancybox__container .modal__rte tr > *, trix-editor tr > *, .notification__rte tr > *, .form__rte tr > *, .form__alert-rte tr > * { flex: 1; } } @media screen and ( max-width: 47.9375em ) { .accordion__rte tr + tr, .block__rte tr + tr, .block--rte tr + tr, .hero__rte tr + tr, .hero__introduction tr + tr, .fancybox__container .modal__rte tr + tr, trix-editor tr + tr, .notification__rte tr + tr, .form__rte tr + tr, .form__alert-rte tr + tr { margin-block-start: 1em; } } @media screen and ( min-width: 48em ) { .accordion__rte tr + tr, .block__rte tr + tr, .block--rte tr + tr, .hero__rte tr + tr, .hero__introduction tr + tr, .fancybox__container .modal__rte tr + tr, trix-editor tr + tr, .notification__rte tr + tr, .form__rte tr + tr, .form__alert-rte tr + tr { border-block-start: 0.1rem solid var(--stroke-color--accent-3); } } .accordion__rte th, .block__rte th, .block--rte th, .hero__rte th, .hero__introduction th, .fancybox__container .modal__rte th, trix-editor th, .notification__rte th, .form__rte th, .form__alert-rte th { padding: 2rem 1em; color: var(--text-color--bright); font-weight: 700; } @media screen and ( min-width: 48em ) { .accordion__rte th:first-child, .block__rte th:first-child, .block--rte th:first-child, .hero__rte th:first-child, .hero__introduction th:first-child, .fancybox__container .modal__rte th:first-child, trix-editor th:first-child, .notification__rte th:first-child, .form__rte th:first-child, .form__alert-rte th:first-child { min-width: 14.4rem; max-width: 20rem; } } @media screen and ( min-width: 48em ) { .accordion__rte th + th, .block__rte th + th, .block--rte th + th, .hero__rte th + th, .hero__introduction th + th, .fancybox__container .modal__rte th + th, trix-editor th + th, .notification__rte th + th, .form__rte th + th, .form__alert-rte th + th { border-inline-start: 0.1rem solid var(--stroke-color--accent); } } .accordion__rte td, .block__rte td, .block--rte td, .hero__rte td, .hero__introduction td, .fancybox__container .modal__rte td, trix-editor td, .notification__rte td, .form__rte td, .form__alert-rte td { vertical-align: top; } @media screen and ( max-width: 47.9375em ) { .accordion__rte td::before, .block__rte td::before, .block--rte td::before, .hero__rte td::before, .hero__introduction td::before, .fancybox__container .modal__rte td::before, trix-editor td::before, .notification__rte td::before, .form__rte td::before, .form__alert-rte td::before { content: attr(data-title); display: block; margin-block-end: 0.25em; font-size: 1.8rem; font-family: var(--text-font); font-weight: 500; line-height: 1em; color: var(--title-color); } } @media screen and ( min-width: 48em ) { .accordion__rte td:first-child, .block__rte td:first-child, .block--rte td:first-child, .hero__rte td:first-child, .hero__introduction td:first-child, .fancybox__container .modal__rte td:first-child, trix-editor td:first-child, .notification__rte td:first-child, .form__rte td:first-child, .form__alert-rte td:first-child { min-width: 14.4rem; max-width: 20rem; } } @media screen and ( min-width: 48em ) { .accordion__rte td + td, .block__rte td + td, .block--rte td + td, .hero__rte td + td, .hero__introduction td + td, .fancybox__container .modal__rte td + td, trix-editor td + td, .notification__rte td + td, .form__rte td + td, .form__alert-rte td + td { border-inline-start: 0.1rem solid var(--stroke-color--accent-3); } } .accordion__rte th, .block__rte th, .block--rte th, .hero__rte th, .hero__introduction th, .fancybox__container .modal__rte th, trix-editor th, .notification__rte th, .form__rte th, .form__alert-rte th, .accordion__rte td, .block__rte td, .block--rte td, .hero__rte td, .hero__introduction td, .fancybox__container .modal__rte td, trix-editor td, .notification__rte td, .form__rte td, .form__alert-rte td { padding: 0.5em 1em; } @media screen and ( min-width: 48em ) { .accordion__rte th, .block__rte th, .block--rte th, .hero__rte th, .hero__introduction th, .fancybox__container .modal__rte th, trix-editor th, .notification__rte th, .form__rte th, .form__alert-rte th, .accordion__rte td, .block__rte td, .block--rte td, .hero__rte td, .hero__introduction td, .fancybox__container .modal__rte td, trix-editor td, .notification__rte td, .form__rte td, .form__alert-rte td { padding: 1.5em; } } .accordion__rte .block, .block__rte .block, .block--rte .block, .hero__rte .block, .hero__introduction .block, .fancybox__container .modal__rte .block, trix-editor .block, .notification__rte .block, .form__rte .block, .form__alert-rte .block { position: relative; left: 50%; translate: -50% 0; } .button { --button-primary: var(--green, black); --button-secondary: var(--purple, white); --button-ternary: var(--grey--dark, black); --button-height: 5.6rem; --button-padding-inline: 32; --button-background: var(--button-primary); --button-color: var(--button-secondary); --button-stroke: var(--button-ternary); display: inline-flex; max-width: 100%; align-items: center; min-height: var(--button-height); padding-inline: calc(0.0714285714em * var(--button-padding-inline)) !important; gap: 1.2em; background: var(--button-background); border-radius: 100rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 1.3rem; line-height: 1.2em; font-weight: 700; color: var(--button-color); letter-spacing: 0.0928571429em; text-transform: uppercase; position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media screen and ( min-width: 24.375em ) { .button { font-size: 1.4rem; } } .button > * { pointer-events: none; } .button::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; outline: 0.6rem solid hsl(from var(--button-background) h 40% l/50%); opacity: 0; position: absolute; top: 0; left: 0; z-index: -1; scale: 0.95; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .button .icon--edit-line { font-size: 1.3em; translate: 0 -10%; } @media (hover: hover) { .button:hover, .button:focus { scale: 1.03; } .button:hover::before, .button:focus::before { opacity: 1; scale: 0.99; } .button:hover .icon--chevron-right, .button:focus .icon--chevron-right { translate: 50% 0; } .button:hover .icon--chevron-left, .button:focus .icon--chevron-left { translate: -50% 0; } } .button--secondary { --button-primary: var(--blue); --button-secondary: var(--white); } .button--green { --button-primary: var(--green, black); --button-secondary: var(--purple, white); --button-ternary: var(--grey--dark, black); } .button--outline { --button-color: var(--button-primary); outline: 0.1rem solid var(--button-primary); background: transparent; } .button--outline.button--primary { --button-primary: var(--text-color); } .button--shadow { --button-background: var(--white); box-shadow: var(--shadow--default); } .button--disabled { --button-primary: var(--grey); --button-secondary: var(--grey--dark); pointer-events: none; } .button--lg { --button-height: 8rem; --button-padding-inline: 24; padding-block: 1.6rem; flex-direction: column; justify-content: center; gap: 0.4rem; font-size: 2rem; line-height: 1.2em; text-transform: none; text-align: center; } .button--lg span { order: -1; font-size: 1.6rem; line-height: 1em; font-weight: 450; color: var(--button-color); } .button--sm { --button-height: 3.2rem; --button-padding-inline: 24; font-size: 1.1rem; } .button--reverse .icon { order: -1; } .button-inline { --button-color: var(--text-color--accent-3); --button-underline: transparent; --icon-color: var(--button-color); display: inline-flex; align-items: center; min-height: 4.4rem; gap: 2.2857142857em; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 1.3rem; font-weight: 650; letter-spacing: 0.1em; color: var(--button-color); text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--button-underline); text-underline-offset: 0.3em; text-decoration-thickness: 0.1rem; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media screen and ( min-width: 24.375em ) { .button-inline { font-size: 1.4rem; } } .button-inline--reverse { flex-direction: row-reverse; } @media (hover: hover) { .button-inline:hover, .button-inline:focus { --button-underline: var(--button-color); } .button-inline:hover .icon--chevron-right, .button-inline:focus .icon--chevron-right { translate: 50% 0; } .button-inline:hover .icon--chevron-left, .button-inline:focus .icon--chevron-left { translate: -50% 0; } } .button-icon, .fancybox__container .close-button, .fancybox__container .f-button { --button-primary: var(--background-color--accent-3); --button-size: 4.4rem; --button-background: hsl( from var(--button-primary) h s l / var(--button-alpha, 1) ); --icon-color: var(--text-color--bright); display: inline-flex; align-items: center; justify-content: center; width: var(--button-size); height: var(--button-size); background: var(--button-background); border-radius: 100rem; cursor: pointer; position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .button-icon::before, .fancybox__container .close-button::before, .fancybox__container .f-button::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; outline: 0.6rem solid hsl(from var(--button-background) h 40% l/50%); opacity: 0; position: absolute; top: 0; left: 0; z-index: -1; scale: 0.95; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media (hover: hover) { .button-icon:hover, .fancybox__container .close-button:hover, .fancybox__container .f-button:hover, .button-icon:focus, .fancybox__container .close-button:focus, .fancybox__container .f-button:focus { scale: 1.03; } .button-icon:hover::before, .fancybox__container .close-button:hover::before, .fancybox__container .f-button:hover::before, .button-icon:focus::before, .fancybox__container .close-button:focus::before, .fancybox__container .f-button:focus::before { opacity: 1; scale: 0.99; } } .button-icon > *, .fancybox__container .close-button > *, .fancybox__container .f-button > * { pointer-events: none; } .button-icon .icon, .fancybox__container .close-button .icon, .fancybox__container .f-button .icon { font-size: 1.2em; } .button-icon .icon--star::before, .fancybox__container .close-button .icon--star::before, .fancybox__container .f-button .icon--star::before, .button-icon .icon--star-fill::before, .fancybox__container .close-button .icon--star-fill::before, .fancybox__container .f-button .icon--star-fill::before { display: inline-block; transform: translate(0, -0.05em); } .button-icon--outline { --icon-color: var(--text-color--accent-darker); border: 0.1rem solid var(--stroke-color--accent-darker); background: transparent; } .button-icon--white { --button-primary: var(--background-color); --icon-color: var(--text-color--accent-darker); } @media (hover: hover) { .button-icon--white:hover, .button-icon--white:focus { --button-primary: var(--background-color--accent-dark); --icon-color: var(--text-color--bright); } } .button-icon--shadow { box-shadow: var(--shadow--sm); } .button-icon--notification { position: relative; } .button-icon--notification::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: var(--background-color--accent); border-radius: 100rem; position: absolute; top: 0; right: 0; } .button-underline, .trix-button--remove, input.trix-button { cursor: pointer; } .progress { --progress-height: 2rem; display: grid; grid-template-columns: minmax(auto, var(--progress-value, 0%)) 1fr; grid-template-rows: var(--progress-height); grid-template-areas: "progress-value progress-bar"; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .progress__label { grid-area: progress-value; display: block; min-width: -moz-fit-content; min-width: fit-content; padding-inline: 1.5em; background: var(--background-color--accent); border-radius: 100rem; font-size: 1rem; font-weight: 700; line-height: var(--progress-height); text-align: center; position: relative; z-index: 2; } .progress__bar { grid-column: 1/-1; grid-row: 1/-1; display: block; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--background-color--lighter); border-radius: 100rem; } .progress__bar::-moz-progress-bar { background: var(--background-color--accent); border-radius: 100rem; } .progress__bar::-webkit-progress-bar { background: var(--background-color--lighter); border-radius: 100rem; } .progress__bar::-webkit-progress-value { background: transparent; } .tags__list { display: flex; gap: 1em; font-weight: 800; } .form__label a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1rem; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media (hover: hover) { .form__label a:hover, .form__label a:focus { text-underline-offset: 0.4em; text-decoration-color: hsl(from var(--text-color) h s l/50%); } } .form__label a:focus { background: hsl(from var(--text-color) h s l/20%); text-decoration-color: hsl(from var(--text-color) h s l/0%); } .form { --input-padding-inline: 2.4rem; --input-height: 5.2rem; --input-background: var(--background-color--default); --input-stroke: var(--stroke-color--accent-3); --input-stroke--accent: var(--stroke-color--accent-2); --input-stroke--checkbox: var(--input-stroke); --input-color: var(--text-color--dark); --field-gap: 0.8rem; } .form:not(.grid) { display: grid; grid-template-columns: 1fr; grid-auto-flow: row; } .form input { caret-color: var(--input-stroke--accent); min-width: 0; } .form__list__label { display: block; font-weight: bold; color: var(--blue); margin-block: 0 0.5em; } .form__step .form__header { padding-block-start: 0.5em !important; padding-block-end: 0.5em !important; } .form__set { position: relative; } body.evaluation .form__set > *:not(.form__header, .form__alert, .form__actions, .form__submit):nth-child(odd)::before { content: ""; display: block; height: calc(100% + 2em); top: 1em; position: absolute; left: -2em; top: 50%; z-index: -1; translate: 0 -50%; background: var(--background-color--lighter); width: calc(100% + 6em); left: -3em; } .form__set--upperline { margin-block-start: 1em; padding-block-start: 3em; border-block-start: 0.1rem solid var(--stroke-color--accent-3); } @media screen and ( min-width: 48em ) { .form__set--upperline { padding-block-start: 4em; } } .form__set:not(.form__set--alt) .form__header { padding-block-end: 1em; margin-block-end: 1em; border-block-end: 0.1rem solid var(--stroke-color--accent-3); } @media screen and ( min-width: 48em ) { .form__set:not(.form__set--alt) .form__header { padding-block-end: 3em; } } .form__frame { --form-background: var(--background-color); padding: 2em; background: var(--form-background); box-shadow: var(--shadow--default); border-radius: var(--radius--default); } @media screen and ( min-width: 48em ) { .form__frame { padding: 2em 3em; } } @media screen and ( max-width: 63.9375em ) { .form__frame:has(.form__table) { background: none; border-radius: 0; box-shadow: none; } } .form__header { row-gap: 1em; } .form__header .title { color: var(--blue); margin-block-end: 0.5em; } .form__rte { font-weight: 500; } .form__field { align-self: stretch; } .form__field:has(.form__description) .form__label { margin-block-end: 0; } .form__field--default, .form__field--select, .form__field--file { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto; grid-template-areas: "label" "description" "input" "notification"; align-content: start; } .form__field--editor { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "label" "description" "toolbar" "editor" "notification"; align-content: start; } .form__field--editor::before { content: ""; grid-row: toolbar/editor; grid-column: 1/-1; outline: 0.1rem solid var(--input-stroke); box-shadow: var(--shadow--sm); border-radius: var(--radius--xs); background: var(--input-background); color: var(--input-color); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__field--editor *::-moz-placeholder { color: hsl(from var(--text-color--default) h s l/50%); } .form__field--editor *::placeholder { color: hsl(from var(--text-color--default) h s l/50%); } .form__field--editor .form__editor { grid-area: editor; } .form__field--editor trix-toolbar { max-width: 100%; grid-area: toolbar; position: relative; z-index: 2; } .form__field--file .form__input, .form__field--file .trix-input, .form__field--file .select__button { width: 100%; height: 100%; opacity: 0; cursor: pointer; } @media (hover: hover) { .form__field--file .form__input:hover ~ .form__upload, .form__field--file .trix-input:hover ~ .form__upload, .form__field--file .select__button:hover ~ .form__upload, .form__field--file .form__input:focus ~ .form__upload, .form__field--file .trix-input:focus ~ .form__upload, .form__field--file .select__button:focus ~ .form__upload { outline-color: var(--input-stroke--accent); } } .form__field--file.uploaded .form__upload { opacity: 0; background: rgba(0, 0, 0, 0.4); color: var(--text-color--bright); } @media (hover: hover) { .form__field--file.uploaded:hover .form__upload, .form__field--file.uploaded:focus .form__upload { opacity: 1; } } .form__field--select { position: relative; } .form__field--select .select__list { grid-area: input; } .form__field--wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "field" "notification"; } .form__field--wrapper .notification { margin-block-start: 0.25em; } .form__field--checkbox, .form__field--switch, .form__field--radio { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "input label" "input description"; align-items: start; } .form__field--checkbox .form__label, .form__field--switch .form__label, .form__field--radio .form__label { align-self: start; margin-block-end: 0; padding-inline: 0; font-weight: 400; color: var(--text-color); } .form__field--checkbox .form__description, .form__field--switch .form__description, .form__field--radio .form__description { margin-block-end: 0.25em; } .form__field--code { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto auto; grid-template-areas: "label label" "description description" "code input" "notification notification"; } .form__field--code .form__input, .form__field--code .trix-input, .form__field--code .select__button { --input-background: #fff; outline: 0; border: 0; border-inline-start: 0.1rem solid var(--input-stroke); box-shadow: none; border-radius: 0 calc(var(--input-height) * 0.5) calc(var(--input-height) * 0.5) 0; } .form__field--code .form__input:focus, .form__field--code .trix-input:focus, .form__field--code .select__button:focus { border-color: var(--input-stroke--accent); } .form__field--code .form__input:focus ~ .form__codemark, .form__field--code .trix-input:focus ~ .form__codemark, .form__field--code .select__button:focus ~ .form__codemark { outline-color: var(--input-stroke--accent); } .form__field--code .form__label { padding-inline: 0; margin-block-end: 0.8rem; } .form__field--switch { align-items: center; } .form__field--switch .form__checkbox { width: 100%; height: 100%; } .form__field--switch .form__label { padding-inline-start: 1.5em; } .form__field--submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5em 1em; margin-block-start: 1em; } @media screen and ( min-width: 48em ) { .form__field--submit { gap: 2em 1em; } } .form__field--submit-reverse { flex-direction: row-reverse; } .form__field.invalid { --input-stroke: var(--alert); --input-stroke--accent: var(--alert); --input-stroke--checkbox: var(--alert); } .form__field.invalid::after { grid-area: input; content: ""; display: block; width: 100%; height: 100%; background: var(--alert); opacity: 0.2; pointer-events: none; border-radius: 2.6rem; mix-blend-mode: hard-light; } .form__field--h-center { justify-content: center; } .form__field .notification { grid-area: notification; margin-block-start: var(--field-gap); } .form__input, .trix-input, .select__button, .form__textarea, .form__upload { grid-area: input; padding-inline: var(--input-padding-inline); padding-block: 1em; outline: 0.1rem solid var(--input-stroke); outline: 0.1rem solid var(--input-stroke); box-shadow: var(--shadow--sm); border-radius: var(--radius--xs); background: var(--input-background); color: var(--input-color); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__input:focus, .trix-input:focus, .select__button:focus, .form__textarea:focus, .form__upload:focus { outline-color: var(--input-stroke--accent); } .form__input::-moz-placeholder, .trix-input::-moz-placeholder, .select__button::-moz-placeholder, .form__textarea::-moz-placeholder, .form__upload::-moz-placeholder { color: hsl(from var(--text-color--default) h s l/50%); } .form__input::placeholder, .trix-input::placeholder, .select__button::placeholder, .form__textarea::placeholder, .form__upload::placeholder { color: hsl(from var(--text-color--default) h s l/50%); } .form__input[required] ~ .form__label::after, [required].trix-input ~ .form__label::after, [required].select__button ~ .form__label::after, .form__textarea[required] ~ .form__label::after, .form__radio[required] ~ .form__label::after, .form__checkbox[required] ~ .form__label::after { content: " *"; color: var(--alert); } .form__input[disabled], [disabled].trix-input, [disabled].select__button, .form__textarea[disabled], .form__radio[disabled], .form__checkbox[disabled] { --input-background: var(--background-color--medium); --input-color: var(--text-color); } .form__input, .trix-input, .select__button { height: var(--input-height); } .form__label { grid-area: label; align-self: end; margin-block-end: var(--field-gap); cursor: pointer; font-weight: 500; color: var(--text-color); } .form__label span { color: var(--alert); } .form__description { grid-area: description; margin-block-end: var(--field-gap); font-size: 1.4rem; color: var(--text-color--medium); } .form__information { --text-color: hsl(from var(--text-color--default) h s l / 50%); order: -1; margin-block-end: 1em; } .form__information span { --text-color: var(--alert); } .form__image { grid-area: input; border-radius: var(--radius--xs); aspect-ratio: 16/9; } .form__upload { aspect-ratio: 16/9; text-align: center; pointer-events: none; background: var(--background-color); position: relative; z-index: 2; } .form__notification { order: -2; margin-block-end: 1em; } .form__notification:not(.notification--reduce) { margin-block-end: 3em; } .form__checkbox, .form__radio { grid-area: input; width: 3.2rem; height: 3.2rem; cursor: pointer; } .form__checkbox:hover ~ .form__checkmark, .form__checkbox:hover ~ .form__radiomark, .form__checkbox:focus ~ .form__checkmark, .form__checkbox:focus ~ .form__radiomark, .form__radio:hover ~ .form__checkmark, .form__radio:hover ~ .form__radiomark, .form__radio:focus ~ .form__checkmark, .form__radio:focus ~ .form__radiomark { outline-color: var(--input-stroke--accent); } .form__checkbox:checked ~ .form__checkmark, .form__radio:checked ~ .form__checkmark { outline-color: var(--input-stroke--checkbox); } .form__checkbox:checked ~ .form__checkmark::after, .form__radio:checked ~ .form__checkmark::after { clip-path: xywh(0.3rem 0.3rem calc(100% - 0.6rem) calc(100% - 0.6rem) round 0.2rem); transform: rotate(0); } .form__checkbox:checked ~ .form__radiomark, .form__radio:checked ~ .form__radiomark { outline-color: var(--input-stroke--checkbox); } .form__checkbox:checked ~ .form__radiomark::after, .form__radio:checked ~ .form__radiomark::after { scale: 1; } .form__checkbox:checked ~ .form__switchmark::before, .form__radio:checked ~ .form__switchmark::before { opacity: 1; } .form__checkbox:checked ~ .form__switchmark::after, .form__radio:checked ~ .form__switchmark::after { background: var(--background-color); transform: translate(calc(100% + 1.5rem), -50%); } .form__checkbox:checked ~ .form__switchmark .icon, .form__radio:checked ~ .form__switchmark .icon { transform: rotate(0deg) translate(0, -50%) scale(1); } .form__radiomark { grid-area: input; display: block; width: 1.2rem; height: 1.2rem; margin-block-start: 0.2lh; border-radius: 100rem; outline: 0.2rem solid var(--input-stroke--checkbox); outline-offset: -0.2rem; pointer-events: none; position: relative; z-index: 2; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__radiomark::after { content: ""; display: block; width: 100%; height: 100%; background: hsl(from var(--background-color--accent-3) h s 60%); border-radius: 100rem; position: absolute; top: 50%; left: 50%; z-index: -1; translate: -50% -50%; scale: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__checkmark { grid-area: input; display: block; width: 1.6rem; height: 1.6rem; margin-block-start: 0.2lh; outline: 0.1rem solid var(--input-stroke--checkbox); outline-offset: -0.1rem; border-radius: 0.4rem; pointer-events: none; position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__checkmark::after { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color--accent-3); clip-path: xywh(50% 50% 0 0 round 0.6rem); position: absolute; top: 0; left: 0; transform: rotate(-90deg); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__switchmark { --icon-color: var(--text-color--accent-darker); grid-area: input; display: block; height: 4rem; width: 8rem; border-radius: 100rem; background: var(--background-color); box-shadow: var(--shadow--sm); pointer-events: none; position: relative; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__switchmark .icon { display: grid; align-content: center; justify-content: center; width: 3rem; height: 3rem; font-size: 0.8em; position: absolute; top: 50%; right: 0.5rem; z-index: 2; transform: rotate(90deg) translate(0, -50%) scale(0); } .form__switchmark::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 100rem; background: var(--gradient); opacity: 0; position: absolute; top: 0; left: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__switchmark::after { content: ""; display: block; width: 3rem; height: 3rem; background: var(--background-color--light); border-radius: 100rem; position: relative; top: 50%; transform: translate(0.5rem, -50%); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__code { grid-area: code; height: var(--input-height); padding-inline: 0; background: var(--input-background); border-radius: 100rem; border-start-end-radius: 0; border-end-end-radius: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__codemark { grid-area: code/code/code/input; display: block; width: 100%; height: 100%; border-radius: 100rem; outline: 0.1rem solid var(--input-stroke); box-shadow: var(--shadow--sm); background: var(--input-background); pointer-events: none; position: relative; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .form__table th, .form__table td { display: flex; } .form__table tr { align-content: center; min-height: 8rem; position: relative; z-index: 2; } .form__table tr::before { content: ""; display: block; width: calc(100% + 4em); height: 100%; background: transparent; position: absolute; left: -2em; top: 50%; z-index: -1; translate: 0 -50%; } @media screen and ( max-width: 63.9375em ) { .form__table tr::before { background: var(--background-color); box-shadow: var(--shadow--default); border-radius: var(--radius--default); } } @media screen and ( min-width: 48em ) { .form__table tr::before { width: calc(100% + 6em); left: -3em; } } @media screen and ( max-width: 63.9375em ) { .form__table thead { display: none; } } .form__table thead th { --text-color: var(--text-color--accent-3); padding-inline: 1em; font-size: 1.4rem; text-align: center; font-weight: 700; } @media screen and ( max-width: 63.9375em ) { .form__table tbody { display: flex; flex-wrap: wrap; row-gap: 2em; } } @media screen and ( max-width: 63.9375em ) and ( min-width: 64em ) { .form__table tbody { row-gap: 3em; } } @media screen and ( max-width: 63.9375em ) { .form__table tbody tr { flex: 0 0 100%; padding-block: 1em; } } @media screen and ( min-width: 64em ) { .form__table tbody tr:nth-child(odd)::before { background: var(--background-color--lighter); } } .form__table__title { padding-block: 1em; font-weight: 700; } @media screen and ( max-width: 63.9375em ) { .form__table__title { border-block-end: 0.1rem solid var(--stroke-color--accent-3); margin-block-end: 1.5em; } } .form__table .form__field { width: 100%; } @media screen and ( min-width: 64em ) { .form__table .form__field { grid-template-columns: 1fr 0; grid-template-rows: 1fr 0; } } @media screen and ( min-width: 64em ) { .form__table .form__radio { width: 100%; height: 100%; } } @media screen and ( min-width: 64em ) { .form__table .form__radiomark { margin: 0; align-self: center; justify-self: center; } } @media screen and ( min-width: 64em ) { .form__table .form__label { display: none; } } .form__alert { padding: 1em calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 1 + var(--grid-gap) * (1 - var(--minus-gap)) + var(--grid-offset, 0%)); min-height: 100%; position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 5; } .form__alert::before { content: ""; display: block; width: 100vw; width: 100dvw; height: calc(100% + 2em); background: hsl(from var(--background-color--dark) h s l/80%); box-shadow: var(--shadow--default); position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -2; } @media screen and ( min-width: 48em ) { .form__alert::before { height: calc(100% + 4em); } } .form__alert::after { content: ""; display: block; width: 100%; height: 100%; background: var(--background-color); border-radius: var(--radius--default); position: absolute; top: 0; left: 0; z-index: -1; } .form__alert-rte { text-align: center; font-weight: 500; } @media screen and ( max-width: 47.9375em ) { .form__alert-rte { font-size: 1.4rem; } } .form__alert-image { order: -1; } .form__alert-list { justify-content: center; } .form--space { row-gap: 2em; } @media screen and ( min-width: 64em ) { .form--space { row-gap: 3em; } } .form--space .form__field--submit { margin-block-start: 0; } .form--editor { row-gap: 3em; grid-template-rows: auto auto auto; } @media screen and ( min-width: 48em ) { .form--editor { grid-template-rows: auto 1fr; } } .form--editor .form__sidebar { grid-row: span 1/-1; margin-block-start: 0; } @media screen and ( min-width: 48em ) { .form--editor .form__sidebar { grid-row: 1/-1; } } .notification { --notification-background: transparent; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "icon rte"; padding: 1.5em 2em; width: 100%; justify-self: center; border-radius: var(--radius--sm); background: var(--notification-background); } @media screen and ( min-width: 40em ) { .notification { padding: 1.5em 2em; border-radius: var(--radius--default); } } .notification__icon { grid-area: icon; align-self: center; padding-inline-end: 0.75em; font-size: 1.25em; } .notification__list { list-style-type: disc; margin-inline-start: 4rem; } .notification__rte { grid-area: rte; font-weight: 500; } .notification--reduce { padding: 1em; border-radius: var(--radius--xxxs); } .notification--default { --notification-background: var(--grey--dark); --text-color: var(--text-color--bright); } .notification--bright { --notification-background: var(--background-color); box-shadow: var(--shadow--default); } .notification--light { --notification-background: var(--sand); --text-color: #a4856c; } .notification--blue { --notification-background: var(--blue); --text-color: var(--text-color--bright); } .notification--warning { --notification-background: var(--warning); --text-color: var(--text-color--bright); } .notification--alert { --notification-background: var(--alert); --text-color: var(--text-color--bright); } .notification--success { --notification-background: var(--success); } .notification--inline { --notification-background: transparent; --text-color: var(--text-color--accent-3); padding: 0; } .notification--inline .icon { font-size: 1em; } .notification--inline:not(.notification--alert) .notification__rte { font-size: 1.4rem; font-weight: 400; } .notification--inline.notification--alert { --text-color: var(--alert); } .notification--inline.notification--alert .notification__rte { font-weight: 500; } .select { display: none; } .select[required] ~ .form__label::after { content: " *"; color: var(--alert); } .select__button { display: flex; align-items: center; justify-content: space-between; cursor: pointer; position: relative; z-index: 4; } .select__button .icon { font-size: 0.75em; } .select__list { --select-offset: 0.8rem; --select-visible-options: 4.5; width: calc(100% + 1.6rem); max-height: calc(var(--input-height) * var(--select-visible-options)); padding-block-start: calc(var(--input-height) + var(--select-offset) * 2); padding-block-end: calc(var(--select-offset) * 2); border: 0.1rem solid var(--input-stroke); background: var(--background-color); border-radius: var(--radius--sm); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; position: absolute; top: -0.8rem; left: -0.8rem; z-index: 3; } .select__item { display: flex; align-items: center; padding-inline: calc(var(--input-padding-inline) + var(--select-offset)); min-height: 4.4rem; padding-block: var(--select-offset); } .select__item:nth-child(even) { background: var(--background-color--lighter); } .select__item.active { --text-color: var(--text-color--accent-3); } .select__item:not(.active) { cursor: pointer; } trix-toolbar { display: flex; flex-wrap: wrap; padding: 1.5em; position: relative; z-index: 3; } .trix-dialog { width: calc(100% - 3em); padding: 1em; box-shadow: var(--shadow--default); background: var(--background-color); border-radius: var(--radius--xxxs); position: absolute; top: 100%; left: 1.5em; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .trix-dialog:not(.trix-active) { opacity: 0; pointer-events: none; } .trix-dialog__link-fields { display: flex; flex-wrap: wrap; gap: 1em; } .trix-dialog__link-fields .trix-button-group { gap: 1em; } .trix-input { --input-height: 4rem; flex: 1; min-width: 15rem !important; padding: 0 1em; border-radius: var(--radius--4xs); } .trix-button-row { display: flex; flex-wrap: wrap; width: 100%; gap: 1em 1.5em; } .trix-button-group { display: flex; flex-wrap: wrap; gap: 0.6rem; } .trix-button--remove { flex: 0 0 auto !important; width: auto !important; } .trix-button { flex: 0 0 4rem; width: 4rem; height: 3.2rem; overflow: hidden; cursor: pointer; position: relative; } @media (hover: hover) { .trix-button:hover::before, .trix-button:focus::before { border-color: var(--stroke-color--accent-2); } } .trix-button.trix-active::before { color: var(--text-color--bright); background: var(--background-color--accent-3); border-color: var(--stroke-color--accent-3); } .trix-button::before { display: flex; align-content: center; justify-content: center; width: 100%; height: 100%; border: 0.1rem solid var(--stroke-color--medium); background: var(--background-color); border-radius: 0.8rem; font-family: "hsh-icons"; line-height: 2.8rem; position: absolute; top: 0; left: 0; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } input.trix-button { flex: 0 0 auto; width: -moz-min-content; width: min-content; } trix-editor { padding-inline: 2em; padding-block-end: 1.5em; min-height: 12lh; } trix-editor pre { padding: 0.5em 1em; border-radius: var(--radius--4xs); background: var(--background-color--lighter); font-family: monospace; font-size: 1.4rem; } trix-editor h2 { --title-size: 3.2rem !important; } trix-editor figure { margin-block: 1em; } trix-editor img { width: 100%; border-radius: var(--radius--xs); } trix-editor figcaption { padding-inline: var(--radius--xs); } trix-editor .attachment__progress { display: none; } trix-editor .attachment__toolbar { font-size: 1.4rem; } trix-editor .attachment__metadata-container { display: none; } /* Custom styles */ .fancybox__container .modal { display: block; max-width: calc(100vw - var(--grid-edge) * 2); max-height: calc(100vh - var(--grid-edge) * 2 - var(--wp-topbar)); padding: 3em 4em; border-radius: var(--radius--md); line-height: var(--based-line-height); font-size: var(--based-font-size); translate: 0 calc(var(--wp-topbar) * 0.5); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } @media screen and ( max-width: 47.9375em ) { .fancybox__container .modal { padding: 2em; border-radius: var(--radius--xs); } } @media screen and (min-width: 105.0625rem) { .fancybox__container .modal { --grid-width: calc(var(--layout-max-width) - var(--grid-edge) * 2); } } .fancybox__container .modal__header { padding-block-end: 2em; border-block-end: 0.1rem solid var(--stroke-color--medium); margin-block-end: 2em; } .fancybox__container .modal__image { max-width: 20rem; margin-inline: auto; } .fancybox__container .modal__title { padding-inline-end: 6.4rem; } .fancybox__container .modal__information { --text-color: var(--text-color--accent-3); display: flex; margin-block-start: 2em; justify-content: space-between; gap: 1em; font-weight: 600; } .fancybox__container .modal__footer { margin-block-start: 2em; } .fancybox__container .close-button, .fancybox__container .f-button { flex: 0 0 var(--button-size); background: var(--button-background) !important; color: transparent; position: absolute; top: calc(3em + 0.5lh) !important; right: 4em !important; } @media screen and ( max-width: 47.9375em ) { .fancybox__container .close-button, .fancybox__container .f-button { right: 2em !important; } } .fancybox__container .close-button svg, .fancybox__container .f-button svg { display: none; } .fancybox__container .close-button::after, .fancybox__container .f-button::after { content: "\e919"; font-family: "hsh-icons" !important; color: var(--text-color--bright); position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .header { height: var(--header-height); margin-block: var(--header-offset-block); } .header__wrapper { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "logo login" "logo menu"; height: var(--header-height); padding-inline: 1.5em; width: calc(100% - var(--grid-edge) * 2); max-width: var(--layout-max-width); gap: 0 1em; border-radius: 100rem; box-shadow: var(--shadow--default); background: var(--background-color); position: fixed; top: 0; left: 50%; transform: translate(-50%, var(--header-offset-block)); z-index: var(--z-index--header); } @media screen and ( min-width: 26.75em ) { .header__wrapper { padding-inline: 3em; } } @media screen and ( min-width: 48em ) { .header__wrapper { gap: 0 2em; } } @media screen and ( min-width: 48em ) { .header__wrapper { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; grid-template-areas: "logo login menu"; } } @media screen and ( min-width: 80em ) { .header__wrapper { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "logo login" "logo menu"; } } .header__logo { grid-area: logo; height: var(--header-height); position: relative; z-index: 3; } .header__logo svg { height: 100%; padding-block: 2.5rem; } @media screen and ( min-width: 48em ) { .header__logo svg { padding-block: 2rem; } } .header__logo path { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .header__login { grid-area: login; justify-self: end; display: flex; align-items: center; gap: 1em; font-size: 1.4rem; } @media screen and ( max-width: 79.9375em ) { .header__login { translate: 4em 0; } } @media screen and ( max-width: 47.9375em ) { .header__login { padding-block-start: 1em; translate: 0 0; } .header__login p { display: none; } } @media screen and ( min-width: 80em ) { .header__login { padding-block-start: 1em; } } .header__action.button-underline { font-weight: 500; --text-color: var(--text-color--default); } @media screen and ( max-width: 79.9375em ) { .header__menu { --text-color: var(--text-color--bright); display: grid; grid-template-columns: 1fr; grid-template-rows: calc(var(--header-offset-block) + var(--header-height)) 1fr; grid-template-areas: "space-t" "nav"; align-items: center; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; align-content: center; background: var(--background-color--dark); position: absolute; left: 50%; top: 0; translate: -50% calc(var(--header-offset-block) * -1); } .header__menu::before, .header__menu::after { grid-area: nav; content: ""; display: block; width: 100%; height: 3lh; background: linear-gradient(to bottom, hsl(from var(--background-color--dark) h s l/100%) 0%, hsl(from var(--background-color--dark) h s l/98.7%) 8.1%, hsl(from var(--background-color--dark) h s l/95.1%) 15.5%, hsl(from var(--background-color--dark) h s l/89.6%) 22.5%, hsl(from var(--background-color--dark) h s l/82.5%) 29%, hsl(from var(--background-color--dark) h s l/74.1%) 35.3%, hsl(from var(--background-color--dark) h s l/64.8%) 41.2%, hsl(from var(--background-color--dark) h s l/55%) 47.1%, hsl(from var(--background-color--dark) h s l/45%) 52.9%, hsl(from var(--background-color--dark) h s l/35.2%) 58.8%, hsl(from var(--background-color--dark) h s l/25.9%) 64.7%, hsl(from var(--background-color--dark) h s l/17.5%) 71%, hsl(from var(--background-color--dark) h s l/10.4%) 77.5%, hsl(from var(--background-color--dark) h s l/4.9%) 84.5%, hsl(from var(--background-color--dark) h s l/1.3%) 91.9%, hsl(from var(--background-color--dark) h s l/0%) 100%); pointer-events: none; position: absolute; top: 0; z-index: 3; } .header__menu::after { top: auto; bottom: 0; background: linear-gradient(to top, hsl(from var(--background-color--dark) h s l/100%) 0%, hsl(from var(--background-color--dark) h s l/98.7%) 8.1%, hsl(from var(--background-color--dark) h s l/95.1%) 15.5%, hsl(from var(--background-color--dark) h s l/89.6%) 22.5%, hsl(from var(--background-color--dark) h s l/82.5%) 29%, hsl(from var(--background-color--dark) h s l/74.1%) 35.3%, hsl(from var(--background-color--dark) h s l/64.8%) 41.2%, hsl(from var(--background-color--dark) h s l/55%) 47.1%, hsl(from var(--background-color--dark) h s l/45%) 52.9%, hsl(from var(--background-color--dark) h s l/35.2%) 58.8%, hsl(from var(--background-color--dark) h s l/25.9%) 64.7%, hsl(from var(--background-color--dark) h s l/17.5%) 71%, hsl(from var(--background-color--dark) h s l/10.4%) 77.5%, hsl(from var(--background-color--dark) h s l/4.9%) 84.5%, hsl(from var(--background-color--dark) h s l/1.3%) 91.9%, hsl(from var(--background-color--dark) h s l/0%) 100%); } } @media screen and ( min-width: 80em ) { .header__menu { grid-area: menu; align-self: stretch; justify-self: end; } } @media screen and ( max-width: 79.9375em ) { .header__nav { padding-block: var(--header-offset-block); grid-area: nav; max-height: 100%; padding-inline: var(--grid-edge); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } } @media screen and ( min-width: 80em ) { .header__nav { height: 100%; } } .header__nav__login { margin-bottom: 2rem; background-color: rgba(17, 24, 28, 0.8); padding: 1rem 1rem 1rem 2rem; border-radius: var(--radius--sm); align-items: center; margin-inline: -1rem; } .header__list { display: flex; gap: 0.5em; font-size: 1.3rem; line-height: 1.2em; font-weight: 500; text-wrap: pretty; } @media screen and ( max-width: 79.9375em ) { .header__list { flex-direction: column; width: 100%; font-size: 2rem; } } @media screen and ( min-width: 80em ) { .header__list { height: 100%; font-size: 1.4rem; gap: 2.4rem; } } @media screen and ( min-width: 85.375em ) { .header__list { font-size: 1.5rem; gap: 3.2rem; } } .header__item { position: relative; } .header__item:has(.header__sublist) > :is(a, button) { gap: 0.8rem; } .header__item:has(.header__sublist) > :is(a, button)::before { --icon-color: var(--text-color); order: 2; font-size: 0.9em; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .header__item > :is(a, button) { display: inline-grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 0.1rem; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media screen and ( max-width: 79.9375em ) { .header__item > :is(a, button) { width: 100%; min-height: 4rem; } } @media screen and ( min-width: 80em ) { .header__item > :is(a, button) { height: 100%; padding-block-end: 0.5em; } } @media (hover: hover) { .header__item > :is(a, button):hover, .header__item > :is(a, button):focus { --text-color: var(--text-color--accent-3); } } .header__item.active > :is(a, button) { --text-color: var(--text-color--accent-3); text-decoration-color: var(--text-color); } @media screen and ( max-width: 79.9375em ) { .header__item.active > :is(a, button) { --text-color: var(--text-color--accent); } } @media screen and ( max-width: 79.9375em ) { .header__item { position: relative; } .header__item.accordion::before { content: ""; display: block; width: 100vw; width: 100dvw; height: calc(100% + 1em); background: var(--background-color--accent-3); opacity: 0; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .header__item.expand > :is(a, button) { --text-color: var(--text-color--default); } .header__item.expand > :is(a, button)::before { scale: 1 -1; } .header__item.expand::before { opacity: 1; } .header__item.expand.active > :is(a, button) { text-decoration-color: transparent; } } @media screen and ( min-width: 80em ) { .header__item { height: 100%; } } .header__sublist { min-width: 100%; width: -moz-max-content !important; width: max-content !important; max-width: calc(100vw - var(--grid-space) * 2); padding: 0 !important; margin: 0 !important; } @media screen and ( min-width: 80em ) { .header__sublist { background: var(--background-color); border-radius: var(--radius--xxxs); box-shadow: var(--shadow--default); position: absolute; left: 50%; translate: -50% -1em; } } .header__sublist > :where(*:last-child) { padding: 0 !important; } @media screen and ( max-width: 79.9375em ) { .header__sublist > :where(*:first-child) { padding-block-start: 0.4rem; } } .header__subitem.active { --text-color: var(--text-color--accent-3); } @media screen and ( max-width: 79.9375em ) { .header__subitem.active { --text-color: var(--text-color--accent); } } .header__subitem.active a { text-decoration-color: var(--text-color); } .header__subitem a { display: flex; align-content: center; min-height: 3.2rem; padding: 0.8rem 0; font-size: 1.6rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 0.1rem; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media screen and ( min-width: 80em ) { .header__subitem a { padding: 0.8rem 1.5em; font-size: 1.4rem; } } @media (hover: hover) { .header__subitem a:hover, .header__subitem a:focus { --text-color: var(--text-color--accent-3); } } @media screen and ( min-width: 80em ) { .header__subitem + li { border-block-start: 0.1rem solid var(--stroke-color--light); } } .header__button { grid-area: menu; justify-self: end; display: grid; align-items: center; justify-items: center; width: -moz-min-content; width: min-content; height: 100%; padding-inline: 2em; cursor: pointer; position: relative; z-index: 4; translate: 2em 0; } @media screen and ( min-width: 26.75em ) { .header__button { padding-inline: 3em; translate: 3em 0; } } @media screen and ( min-width: 48em ) { .header__button { translate: 2em 0; } } .header__button * { pointer-events: none; } .header__button .icon, .header__button .header__item:has(.header__sublist) > :is(a, button) { --icon-thickness: 2; } @media screen and ( min-width: 80em ) { .header__button { display: none; } } :root:has(#wpadminbar) .header__wrapper { top: 4.6rem; } @media screen and ( max-width: 79.9375em ) { :root:has(#wpadminbar) .header__menu { height: calc(100vh - 4.6rem); height: calc(100dvh - 4.6rem); } } .breadcrumb { width: 100%; max-width: var(--layout-max-width); height: var(--breadcrumb-height); overflow: hidden; padding-block-end: 1em; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.03em; position: relative; z-index: var(--z-index--breadcrumb); } @media screen and ( min-width: 80em ) { .breadcrumb { font-size: 1.6rem; } } .breadcrumb__list { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } @media (hover: hover) { .breadcrumb__list a:hover, .breadcrumb__list a:focus { color: var(--text-color--accent-dark); --icon-color: var(--text-color--accent-dark); } } .breadcrumb__item:first-child { display: inline-block; vertical-align: top; } .breadcrumb__item:last-child { font-weight: 800; } .breadcrumb__item + .breadcrumb__item::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; margin-inline: 1em 1.5em; border: 0.2rem solid var(--text-color); border-inline-start: 0; border-block-end: 0; transform: translate(0, -10%) rotate(45deg); } .breadcrumb__item .icon { max-width: 3.2rem; } @media screen and ( max-width: 39.9375em ) { .breadcrumb__item:not(:first-child, :last-child) { display: none; } .breadcrumb__item + *::before { margin: 0 0.8rem 0 1rem; transform: scale(1.2); } } .hero { --hero-background: transparent; --hero-title-color: var(--title-color--accent-3); position: relative; z-index: 2; } .hero.has-wave { margin-block-end: calc(var(--wave-height) - 2rem); } .hero__content { --grid-gap-block: 1em; } .hero__title { color: var(--hero-title-color); } .hero__overtitle { color: var(--hero-overtitle-color); margin-block-end: 0; margin-block-start: 2em; font-weight: 800; order: -1; } .hero__overtitle + .hero__title { margin-block-start: 0; } .hero__rte, .hero__introduction { max-width: 45em; } .hero__information { gap: 1em 2em; font-weight: 500; } .hero__date, .hero__time { display: inline-flex; align-items: center; gap: 1em; } .hero__date .icon, .hero__time .icon { order: -1; font-size: 1.2em; } .hero__author { display: flex; align-items: center; gap: 0.5em; } .hero__author img { width: 3.2rem; aspect-ratio: 1/1; border-radius: 100rem; order: -1; } .hero__footer { margin-block-start: 1em; } .hero__wave { width: 100vw; width: 100dvw; height: var(--wave-height, 10rem); background: var(--hero-background); position: absolute; bottom: 0; left: 50%; translate: -50% 50%; z-index: -1; transform-origin: center; } .hero__wave path { fill: var(--background-color); } .hero__progress { order: -1; margin-inline: auto; } .hero--evaluation { padding-block: 40px; } .hero--evaluation .hero__title { font-size: 2.4rem; line-height: 1.2em; margin-block-end: 0.5em; } @media screen and ( min-width: 48em ) { .hero--evaluation .hero__title { font-size: 3.2rem; } } @media screen and ( min-width: 64em ) { .hero--evaluation .hero__title { font-size: 4rem; } } .hero--default, .hero--restricted { --wave-height: var(--block-margin-block); } @media screen and ( min-width: 64em ) { .hero--default.has-wave .hero__image, .hero--restricted.has-wave .hero__image { margin-block-end: calc(var(--wave-height) * -1 + 2rem); } } .hero--default .hero__rte, .hero--restricted .hero__rte { font-weight: 500; font-size: 1.6rem; line-height: 1.4em; } @media screen and ( min-width: 64em ) { .hero--default .hero__rte, .hero--restricted .hero__rte { font-size: 1.8rem; } } @media screen and ( min-width: 80em ) { .hero--default .hero__rte, .hero--restricted .hero__rte { font-size: 2rem; } } .hero--default .hero__image, .hero--restricted .hero__image { -o-object-fit: contain; object-fit: contain; } @media screen and ( max-width: 47.9375em ) { .hero--default .hero__image, .hero--restricted .hero__image { margin-block-start: 1em; } } @media screen and ( max-width: 47.9375em ) { .hero--default .hero__wave, .hero--restricted .hero__wave { translate: -50% 0%; } } .hero--restricted { padding-block-end: calc(var(--block-margin-block) + 2em); } .hero--restricted .hero__image { z-index: 10000; position: relative; } @media screen and ( max-width: 64em ) { .hero--restricted .hero__image { display: none; } } @media screen and ( min-width: 64em ) { .hero--restricted .hero__image { margin-block-start: -3rem; margin-block-end: -10rem; } } .hero--restricted::after { --container-columns: 12; content: ""; display: block; width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 12 + var(--grid-gap) * (12 - var(--minus-gap)) + var(--grid-offset, 0%)); height: 0.1rem; background: var(--stroke-color--accent-3); position: absolute; left: 50%; bottom: var(--block-margin-block); translate: -50% 0; } @media screen and ( min-width: 85.375em ) { .hero--restricted::after { width: calc(((var(--grid-width, 100%)) - var(--grid-gap) * (var(--container-columns) - 1)) / var(--container-columns) * 10 + var(--grid-gap) * (10 - var(--minus-gap)) + var(--grid-offset, 0%)); } } .hero--restricted .hero__wave { height: 5rem; } @media screen and ( min-width: 48em ) { .hero--restricted .hero__wave { height: 10rem; } } @media screen and ( min-width: 64em ) { .hero--restricted .hero__wave { height: 20rem; } } .hero--restricted .hero__wave path { fill: var(--background-color); } .hero--restricted .hero__content { --grid-gap-block: 0.75em; } .hero--restricted .hero__footer { gap: 1em; } @media screen and ( max-width: 63.9375em ) { .hero--restricted .hero__footer { margin-block-start: 0.5em; } } .hero--restricted + .row { margin-block-start: calc(var(--block-margin-block) * -1 + 3em); } .hero--restricted + .row > .block:first-child:not(.block--contrasted, .block--frame) { padding-block-start: 0 !important; } .hero--blog .hero__overtitle, .hero--article .hero__overtitle { --text-color: var(--text-color--bright); flex: 0 0 auto; padding: 0.5em 1em; background: var(--background-color--accent-3); border-radius: 100rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; } .hero--blog { --wave-height: var(--block-margin-block); padding-block-end: var(--wave-height); } .hero--blog .hero__image { width: 100vw; max-width: none; height: calc(100% + var(--header-height) + var(--header-offset-block) * 2 + var(--content-padding-block) + var(--breadcrumb-height, 0rem)); opacity: 0.1; position: absolute; bottom: 0; left: 50%; translate: -50% 0; z-index: -1; } .hero--blog .hero__wave { height: var(--wave-height); background: transparent; top: 100%; translate: 0% -150%; scale: 2; } @media screen and ( min-width: 40em ) { .hero--blog .hero__wave { translate: -50% -125%; scale: 1 1.5; } } .hero--blog .hero__wave path { fill: var(--background-color); } .hero--blog .hero__date { font-weight: 800; } .hero--article { --wave-height: var(--block-margin-block); padding-block-end: var(--wave-height); align-items: flex-end; } .hero--article::before { bottom: calc(var(--wave-height) * 1.5) !important; } .hero--article .hero__image { border-radius: var(--radius--default); } @media screen and ( max-width: 63.9375em ) { .hero--article .hero__image { -webkit-mask-image: url("../images/placeholder/placeholder-blob-2.svg"); mask-image: url("../images/placeholder/placeholder-blob-2.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } } @media screen and ( max-width: 47.9375em ) { .hero--article .hero__image { order: -1; margin-block-end: 2em; } } .hero--article .hero__wave { height: var(--wave-height); background: transparent; translate: 0% -25%; scale: 2; } @media screen and ( min-width: 40em ) { .hero--article .hero__wave { translate: -50% -50%; scale: 1 1.5; } } .hero--article .hero__wave path { fill: var(--hero-background); } .hero--v-center { align-items: center; } @media screen and ( min-width: 48em ) { .hero--v-center .hero__image { margin-block-start: calc(var(--breadcrumb-height) * -1.5); } } .hero--contrasted { --hero-background: var(--background-color); } .hero--contrasted::before { content: ""; display: block; width: 100vw; height: calc(100% + var(--header-height) + var(--header-offset-block) * 2 + var(--content-padding-block) + var(--breadcrumb-height, 0rem)); background: var(--hero-background); position: absolute; bottom: 0; left: 50%; translate: -50% 0%; z-index: -1; } .hero--salmon { --hero-background: var(--background-color--accent-2); --hero-title-color: var(--title-color--bright); --hero-overtitle-color: hsl(21deg 25.64% 39%); } .hero--salmon .button--primary { --button-background: var(--background-color); } .hero--sand { --hero-background: var(--background-color--accent-4); } .hero--sand .button--primary { --button-background: var(--background-color); } .hero--sand ::-moz-selection { --selection-color: var(--sand); --selection-background: var(--purple); } .hero--sand ::selection { --selection-color: var(--sand); --selection-background: var(--purple); } .row { position: relative; z-index: 2; } .row:has(+ .block--image-list) { z-index: 3; } .row + .row { margin-block-start: calc(var(--row-margin-block) * 0.5); } @media screen and ( min-width: 64em ) { .row + .row { margin-block-start: var(--row-margin-block); } } .row--reduce .block:first-child { padding-block-start: calc(var(--row-margin-block) * 0.5); } @media screen and ( min-width: 40em ) { .row--reduce .block:first-child { padding-block-start: calc(var(--row-margin-block) * 0.25); } } .row > .notification + *:not(.notification, .block--notifications), .row > .block--notifications + *:not(.notification, .block--notifications) { padding-block-start: calc(var(--block-margin-block) * 0.5); } .row > .notification:first-child, .row > .block--notifications:first-child { margin-block-start: calc(var(--block-margin-block) * 0.5); } .row > .notification + .notification, .row > .notification + .block--notifications, .row > .block--notifications + .notification, .row > .block--notifications + .block--notifications { margin-block-start: 1.5em; } .row > .block--notifications.block--no-space { padding: 0; } .hero + .row:not(.flex--grid) .block--frame:first-child { margin-block-start: calc(var(--row-margin-block) * 0.5); } .hero + .row:not(.row--reduce) > .block:first-child:not(.block--frame, .block--no-space, .block--aside) { padding-block-start: calc(var(--block-margin-block) * 0.75); } @media screen and ( min-width: 48em ) { .hero + .row:not(.row--reduce) > .block:first-child:not(.block--frame, .block--no-space, .block--aside) { padding-block-start: var(--block-margin-block); } } .hero--restricted + .row > .notification:first-child, .hero--restricted + .row > .block--notifications:first-child { margin-block-start: 0; } .page__content:has(*:last-child > .block--contrasted:last-child, + .page__footer .block--contrasted:first-child .block__wave--top) *:last-child > .block--contrasted:last-child { --wave-bottom-height: 0px; } .page__content:has(*:last-child > .block--contrasted:last-child, + .page__footer .block--contrasted:first-child .block__wave--top) *:last-child > .block--contrasted:last-child .block__wave--bottom { display: none; } .page__content:has(*:last-child > .block--contrasted:last-child) + .page__footer:has(.block--contrasted:first-child) .block--contrasted:first-child { margin-block-start: 0; } .page__content:has(*:last-child > .block--sand:last-child) + .page__footer:has(.block--contrasted:first-child .block__wave--top) .block--contrasted:first-child .block__wave--top { background: var(--background-color--accent-4); } .block { --block-in-space: 2em; padding-block: calc(var(--block-margin-block) * 0.5); } @media screen and ( min-width: 48em ) { .block { --block-in-space: 3em; } } @media screen and ( min-width: 80em ) { .block { --block-in-space: 4em; } } .block + .block--frame { margin-block-start: calc(var(--block-margin-block) * 0.5); } .block:not(.block--contrasted) + .block--aside { margin-block-start: var(--block-margin-block); } .block--reduce { padding-block: calc(var(--block-margin-block) * 0.5); } @media screen and ( min-width: 64em ) { .block--reduce { padding-block: calc(var(--block-margin-block) * 0.25); } } .block--no-space { padding-block-start: 0; } .block__rte { max-width: 45em; } .block__rte--accent { --text-color: var(--text-color--accent-3); } .block__header { row-gap: 1.5em; } .block__header + *:not(.block__image) { margin-block-start: var(--block-in-space); } .block__header > .button { flex: 0 0 auto; } .block__overtitle { font-weight: 800; order: -1; } .block__footer { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-block-start: var(--block-in-space) !important; } .block__wave { width: 100vw; position: absolute; left: 50%; translate: -50% 0; z-index: -1; } .block__wave path { fill: var(--block-background); } .block__wave--top { top: 0; } .block__wave--bottom { bottom: 0; } .block:not(.block--contrasted) .block__wave { display: none; } @media screen and ( max-width: 79.9375em ) { .block__scroller { width: 100vw; width: 100dvw; flex: 0 0 100vw; flex: 0 0 100dvw; position: relative; left: 50%; translate: -50% 0; } .block__scroller .card__list { justify-self: flex-start; flex-wrap: nowrap; width: 100%; padding-inline: var(--grid-edge); overflow-x: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; } .block__scroller .card__item { scroll-snap-align: center; } } @media screen and ( max-width: 47.9375em ) { .block__scroller .card__list { -moz-column-gap: calc(column(1) + var(--grid-gap) * 2); column-gap: calc(column(1) + var(--grid-gap) * 2); } } .block--justify .block__title { text-align: center; } .block--justify .block__rte { margin-inline: auto; text-align: center; } .block--justify .block__list { justify-content: center; } .block--justify .block__scroller .block__list { justify-content: flex-start; } .block--justify .block__footer { justify-content: center; } .block--justify.block--rte { text-align: center; } .block--rte .block__header { row-gap: 0; } .block--rte .block__header + * { margin-block-start: min(2em, 1.6rem); } .block--rte .block__footer { --rte-margin-block: 2em; } .block--image-list { --wave-top-height: 10rem; --wave-bottom-height: 0px; padding-block-start: var(--block-margin-block); } @media screen and ( min-width: 48em ) { .block--image-list { --wave-top-height: 20rem; } } @media screen and ( min-width: 64em ) { .block--image-list { --wave-top-height: 25rem; padding-block-start: calc(var(--block-margin-block) * 1.25); } } @media screen and ( min-width: 80em ) { .block--image-list { --wave-top-height: 35rem; } } .block--image-list:has(.block__wave--bottom) { --wave-bottom-height: 3rem; } @media screen and ( min-width: 48em ) { .block--image-list:has(.block__wave--bottom) { --wave-bottom-height: 5rem; } } .block--image-list:has(.block__wave--bottom.block__wave--large) { padding-block-end: calc(var(--wave-bottom-height) * 3); } .block--image-list:has(.block__wave)::before { height: calc(100% - var(--wave-top-height) - var(--wave-bottom-height)); margin-block-start: var(--wave-top-height); border-radius: 0; } .block--image-list::before { border-top-left-radius: 55% 4em; border-top-right-radius: 45% 3em; } @media screen and ( min-width: 48em ) { .block--image-list::before { border-top-left-radius: 55% 10%; border-top-right-radius: 45% 5%; } } @media screen and ( min-width: 64em ) { .block--image-list::before { border-top-left-radius: 50% 25%; border-top-right-radius: 40% 35%; } } .block--image-list .block__wave--top { height: var(--wave-top-height); } @media screen and ( max-width: 47.9375em ) { .block--image-list .block__wave--top { height: calc(var(--wave-top-height) * 0.5); scale: 2; transform-origin: center top; } } .block--image-list .block__wave--bottom { height: var(--wave-bottom-height); scale: 1 -1; } @media screen and ( max-width: 47.9375em ) { .block--image-list .block__wave--bottom { scale: 2 -1; transform-origin: center center; } } .block--steps { --wave-top-height: 4rem; --wave-bottom-height: 5rem; padding-block-start: calc(var(--block-margin-block) * 0.5 + var(--wave-top-height)); padding-block-end: calc(var(--block-margin-block) * 0.5 + var(--wave-bottom-height)) !important; position: relative; } @media screen and ( max-width: 47.9375em ) { .block--steps { padding-block-end: calc(10rem + var(--wave-bottom-height)) !important; } } @media screen and ( min-width: 64em ) { .block--steps { --wave-top-height: 5rem; --wave-bottom-height: 10rem; } } .block--steps::before { height: calc(100% - var(--wave-top-height) - var(--wave-bottom-height)) !important; margin-block-start: var(--wave-top-height); } .block--steps .block__list { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-template-areas: "step-1" "step-2" "step-3"; gap: 10rem var(--grid-gap); margin-block-start: 10rem; } @media screen and ( min-width: 48em ) { .block--steps .block__list { grid-template-columns: repeat(6, 1fr); grid-template-areas: "space-a space-a space-a step-1 step-1 step-1" "step-2 step-2 step-2 space-b space-b space-b" "space-c space-c step-3 step-3 step-3 space-d"; gap: 10rem var(--grid-gap); margin-block-start: 10rem; } } @media screen and ( min-width: 64em ) { .block--steps .block__list { grid-template-columns: repeat(3, 1fr); grid-template-areas: "space-a space-a step-3" "step-1 space-b space-b" "space-c step-2 space-d"; gap: 0 var(--grid-gap); margin-block-start: 0; } } @media screen and ( min-width: 80em ) { .block--steps .block__list { padding-inline-start: column(1, 0); } } .block--steps .block__item { width: 100%; position: relative; z-index: 2; } .block--steps .block__item:nth-child(1) { grid-area: step-1; } .block--steps .block__item:nth-child(2) { grid-area: step-2; } .block--steps .block__item:nth-child(3) { grid-area: step-3; } .block--steps .block__item .button { width: 100%; } .block--steps .block__wave--top { height: calc(var(--wave-top-height) * 0.5); scale: -2 2; } @media screen and ( max-width: 39.9375em ) { .block--steps .block__wave--top { transform-origin: center top; translate: -15% 0; } } @media screen and ( min-width: 40em ) { .block--steps .block__wave--top { height: var(--wave-top-height); scale: -1 1; } } .block--steps .block__wave--bottom { height: var(--wave-bottom-height); scale: 1 -1; } .block--steps .line { width: 100%; position: absolute; z-index: -1; pointer-events: none; } .block--steps .line--1 { translate: -150% -9rem; } .block--steps .line--2 { bottom: 0; left: 0; translate: -100% -10%; scale: 0.8; } @media screen and ( min-width: 64em ) { .block--steps .line--2 { translate: -100% -25%; scale: 1; } } .block--steps .line--3 { top: 0; right: 0; transform: translate(75%, 5%) scale(0.8); } @media screen and ( max-width: 63.9375em ) { .block--steps .line--3 { display: none; } } .block--steps .line--4 { translate: 0% -9rem; } .block--steps .line--5 { translate: -50% -9rem; } .block--steps .line--6 { top: 100% !important; translate: 25% 1rem; } .block--steps .line--7 { top: 0; left: 0; translate: 25% calc(-160% - 10rem); scale: 0.8; } @media screen and ( min-width: 64em ) { .block--steps .line--7 { top: 100%; left: calc(var(--grid-gap) * -1); translate: 0 10%; scale: 1.05; } } .block--steps .line--8 { bottom: 100%; left: 0; translate: -80% 30%; scale: 0.8 -0.8; rotate: 35deg; } @media screen and ( min-width: 64em ) { .block--steps .line--8 { bottom: 100%; left: 60%; translate: 0 -20%; scale: 0.8; rotate: 0deg; } } .block--steps .line--mobile { width: auto; max-height: 8rem; top: 0; left: 50%; } @media screen and ( min-width: 48em ) { .block--steps .line--mobile { display: none; } } @media screen and ( max-width: 47.9375em ) { .block--steps .line:not(.line--mobile) { display: none; } } .block--cards .block__header { row-gap: 0; } .block--cards .block__list { margin-block-start: 5em; } @media screen and ( max-width: 39.9375em ) { .block--cards-list .block__header + :not(.block__image) { margin-block-start: 0.5em; } } @media screen and ( min-width: 64em ) and ( max-width: 79.9375em ) { .block--cards-list .block__list { --grid-gap: 2.4rem; } } .block--aside { margin-block-start: var(--block-margin-block); position: relative; } @media screen and ( max-width: 26.6875em ) { .block--aside { text-align: center; } .block--aside .button { margin-inline: auto; } } .block--aside .block__title { --title-size: 3.2rem; } @media screen and ( min-width: 64em ) { .block--aside .block__title { --title-size: 4rem; } } .block--aside .block__image { align-self: flex-start; -o-object-fit: contain; object-fit: contain; translate: 0 -5rem; } @media screen and ( max-width: 39.9375em ) { .block--aside .block__image { order: -1; } } @media screen and ( min-width: 40em ) { .block--aside .block__image { translate: 0 -10rem; } } @media screen and ( min-width: 64em ) { .block--aside .block__image { translate: 0 -8rem; } } .block--aside .block__wave { height: 5rem; translate: -50% 0; transform-origin: center top; } @media screen and ( max-width: 39.9375em ) { .block--aside .block__wave { scale: 2; } } @media screen and ( min-width: 40em ) { .block--aside .block__wave { translate: -50% -100%; } } @media screen and ( max-width: 39.9375em ) { .block--aside::before { height: calc(100% - 10rem) !important; margin-block-start: 10rem; } } .block--text-image, .block--default { position: relative; } .block--text-image:has(.block__wave), .block--default:has(.block__wave) { --wave-top-height: 5rem; --wave-bottom-height: 4rem; padding-block-start: calc(var(--block-margin-block) * 0.5 + var(--wave-top-height)); padding-block-end: calc(var(--block-margin-block) * 0.5 + var(--wave-bottom-height)) !important; } @media screen and ( min-width: 64em ) { .block--text-image:has(.block__wave), .block--default:has(.block__wave) { --wave-top-height: 10rem; --wave-bottom-height: 5rem; } } .block--text-image:has(.block__wave)::before, .block--default:has(.block__wave)::before { height: calc(100% - var(--wave-top-height) - var(--wave-bottom-height)); margin-block-start: var(--wave-top-height); } .block--text-image .block__image, .block--default .block__image { -o-object-fit: contain; object-fit: contain; } @media screen and ( max-width: 47.9375em ) { .block--text-image .block__image, .block--default .block__image { margin-block-start: var(--block-in-space); } } .block--text-image .block__wave, .block--default .block__wave { height: var(--wave-top-height); translate: -50% 0; } .block--text-image .block__wave--bottom, .block--default .block__wave--bottom { height: var(--wave-bottom-height); scale: 1 -1; } @media screen and ( max-width: 39.9375em ) { .block--text-image .block__wave--bottom, .block--default .block__wave--bottom { height: calc(var(--wave-bottom-height) * 0.5); transform-origin: center top; translate: -75% 100%; scale: 2 -2; } } @media screen and ( min-width: 40em ) { .block--text-image .block__wave--bottom, .block--default .block__wave--bottom { scale: 1 -1; } } @media screen and ( min-width: 48em ) { .block--text-image:not(.block--frame).block--reverse .block__image[class*=ml-], .block--default:not(.block--frame).block--reverse .block__image[class*=ml-] { margin-inline-start: 0; margin-inline-end: column(var(--offset-left-size), 0); } } .block--cards .cards__list { row-gap: calc(var(--grid-gap) * 2); } .block--navigation { position: relative; } @media screen and ( max-width: 47.9375em ) { .block--navigation { --grid-gap: 2em; } } .block--navigation::before { content: ""; display: block; width: 100%; height: 0.1rem; background: var(--stroke-color--light); position: absolute; top: calc(var(--block-margin-block) * 0.5); left: 0; transform: translate(0, -1em); } @media screen and ( max-width: 39.9375em ) { .block--team.flex--grid { row-gap: 2em; } } .block--actions .block__header { row-gap: 0.5em; } .block--actions .block__rte { font-weight: 500; } .block--actions .block__content { padding: 1.5em 2em; margin-block-start: 2em; border-radius: var(--radius--default); box-shadow: var(--shadow--default); } @media screen and ( min-width: 40em ) { .block--actions .block__content { padding: 2em 3em; } } @media screen and ( max-width: 47.9375em ) { .block--reverse.block--contrasted .block__image { order: -1; } } @media screen and ( min-width: 48em ) { .block--reverse .block__image { order: -1; } } .block--contrasted, .block--frame { --block-background: var(--background-color); position: relative; z-index: 2; } @media screen and ( max-width: 47.9375em ) { .block--contrasted, .block--frame { padding-block: var(--block-margin-block); } } .block--contrasted::before, .block--frame::before { content: ""; display: block; width: 100vw; height: 100%; background: var(--block-background); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; } .block--contrasted + .block--frame { margin-block-start: calc(var(--block-margin-block) * 0.5); } .block--contrasted:has(+ .block--contrasted) { padding-block-end: var(--block-margin-block); } .block--contrasted.block--sand + .block--aside, .block--contrasted.block--sand + .block--steps { margin-block-start: 0; } .block--contrasted.block--sand + .block--aside .block__wave--top, .block--contrasted.block--sand + .block--steps .block__wave--top { background: var(--background-color--accent-4); } @media (hover: hover) { .block--contrasted .card--illustration:hover, .block--contrasted .card--illustration:focus { --card-background: oklch( from var(--block-background) calc(l - 0.05) calc(c + 0.02) h ); } } @media screen and ( min-width: 40em ) { .block--frame::before { width: 100%; height: 100%; border-radius: var(--radius--md); } } .block--frame .block__rte { font-weight: 500; } .block--frame.block--rte { padding: var(--block-margin-block) 0; } @media screen and ( min-width: 40em ) { .block--frame.block--rte { padding: 2em 3em; } } @media screen and ( min-width: 40em ) { .block--frame.block--rte::before { border-radius: var(--radius--default); } } .block--frame.block--alt.block--rte::before { width: 100%; height: 100%; border-radius: var(--radius--sm); } @media screen and ( max-width: 39.9375em ) { .block--frame.block--alt.block--rte { padding: 2em; } .block--frame.block--alt.block--rte .form__field--submit { justify-content: flex-start; } } @media screen and ( max-width: 47.9375em ) { .block--frame.block--reverse .block__image { order: -1; margin-block-end: 1em; } } .block--frame + :is(.block--frame, .block--contrasted) { margin-block-start: var(--block-margin-block); } .block--blue .form, .block--green .form, .block--sand .form { --input-stroke: transparent; --input-stroke--accent: var(--stroke-color--accent-3); --input-stroke--checkbox: var(--stroke-color--accent-3); } .block--blue .form__upload, .block--green .form__upload, .block--sand .form__upload { outline-color: transparent; } .block--blue { --block-background: var(--background-color--accent-3); } .block--blue .block__rte { --text-color: var(--text-color--bright); } .block--blue:not(.block--steps) .button--primary { --button-primary: var(--white); } .block--blue .form__input { --input-color: var(--text-color--default); } .block--blue .form__label { --text-color: var(--text-color--accent); } .block--blue .form__field--checkbox { --input-stroke--checkbox: var(--green); --input-stroke--accent: var(--white); } .block--blue .form__field--checkbox .form__label { --text-color: var(--text-color--bright); } .block--blue .form__field--checkbox .form__checkmark::after { background: var(--green); } .block--blue .notification--inline .notification__rte { font-size: 1.6rem; font-weight: 600; } .block--blue .notification--inline .notification__rte a { --text-color: var(--text-color--accent); } .block--blue .button--secondary { --button-primary: var(--white); } .block--sand { --block-background: var(--background-color--accent-4); } .block--sand .block__rte { --text-color: var(--text-color--default); } .block--green { --block-background: var(--background-color--accent); } .block--green .button--primary { --button-primary: var(--white); } .block--green .form .button--primary { --button-primary: var(--blue); --button-secondary: var(--white); } .block--green .form .open .select__button { outline-color: var(--input-stroke--accent); } .block--green .form .open .select__list { border-color: var(--input-stroke--accent); } .block--green .notification--success { --text-color: var(--text-color--bright); --notification-background: var(--background-color--accent-3); } .block--white { --block-background: var(--background-color); } .block--white::before { box-shadow: var(--shadow--default); } .block--sand mark, .section--sand mark { background-color: var(--background-color--accent-2); } .card { --card-background: transparent; background: var(--card-background); } .card__header { grid-area: header; } .card__title { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .card__category .icon { margin-inline-end: 0.5em; } .card__category .icon--eye-line { font-size: 0.9em; } .card__image { grid-area: image; } .card__rte { grid-area: content; } .card__footer { grid-area: footer; } .card__item { container-type: inline-size; container-name: card-item; } @container card-item (max-width: 22em) { .card__item .card--rte { border-radius: var(--radius--sm); box-shadow: var(--shadow--default); padding: 2em; } .card__item .card--rte .card__resume { font-size: 1.4rem; } } @container card-item (max-width: 18em) { .card__item .card--article .card__title, .card__item .card--illustration .card__title { --title-size: 1.8rem; line-height: 2.4rem; } .card__item .card--simple .card__title { --title-size: 2.4rem; } .card__item .card--simple .card__rte { font-size: 1.4rem; } } .card--frame { --card-background: var(--background-color); --text-color: var(--text-color--accent-2); } .card--frame .card__wrapper { padding-block: 1em 2em; padding-inline: 1em; border-radius: var(--radius--xs); background: var(--card-background); box-shadow: var(--shadow--default); } .card--frame .card__image { width: 75%; } .card--blue { --card-background: var(--background-color--accent-3); --title-color: var(--title-color--light); --text-color: var(--text-color--accent); } .card--illustration { height: 100%; border-radius: var(--radius--xxs); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media (hover: hover) { .card--illustration:hover, .card--illustration:focus { --card-background: oklch( from var(--background-color--accent) l c h / 50% ); } } .card--illustration .card__wrapper { padding: 25px 10px; transition: background-color 0.3s ease; border-radius: var(--radius--xs); } .card--illustration .card__wrapper { display: grid; height: 100%; width: 100%; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "image" "header" "button"; justify-content: center; cursor: pointer; } @media (hover: hover) { .card--illustration .card__wrapper:hover .card__image, .card--illustration .card__wrapper:focus .card__image { transform: scale(0.8); } .card--illustration .card__wrapper:hover .card__button, .card--illustration .card__wrapper:focus .card__button { scale: 1.02; } .card--illustration .card__wrapper:hover .card__button::before, .card--illustration .card__wrapper:focus .card__button::before { opacity: 1; scale: 1; } .card--illustration .card__wrapper:hover .card__button .icon--chevron-right, .card--illustration .card__wrapper:focus .card__button .icon--chevron-right { translate: 50% 0; } .card--illustration .card__wrapper:hover .card__button .icon--chevron-left, .card--illustration .card__wrapper:focus .card__button .icon--chevron-left { translate: -50% 0; } .card--illustration .card__wrapper:hover .card__title .icon, .card--illustration .card__wrapper:focus .card__title .icon { translate: 50% 0; } } .card--illustration .card__image { justify-self: center; aspect-ratio: 4/3; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; transform-origin: center; transform: scale(0.75); transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .card--illustration .card__header { display: flex; flex-direction: column; align-items: center; } .card--illustration .card__rte { text-align: center; } .card--illustration .card__title { --title-size: 2rem; display: flex; align-items: center; gap: 0.5em; line-height: 3.2rem; text-align: center; } .card--illustration .card__title .icon { font-size: 0.7em; } .card--illustration .card__subtitle { text-align: center; } .card--illustration .card__button { grid-area: button; justify-self: center; margin-block-start: 1em; } .card--illustration svg { grid-area: image; align-self: center; justify-self: center; position: relative; transform: scale(0.75); z-index: -1; } .card--illustration.card--alternative:not(.card--frame) .card__image { transform: scale(0.9); margin-block-end: 1em; } @media (hover: hover) { .card--illustration.card--alternative:not(.card--frame):hover .card__image, .card--illustration.card--alternative:not(.card--frame):focus .card__image { transform: scale(0.95); } } .card--article { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); grid-template-areas: "image" "header" "content" "footer"; gap: 0.8rem var(--grid-gap); position: relative; } @media (hover: hover) { .card--article:hover .card__title, .card--article:focus .card__title { --title-color: var(--title-color--accent-2); } } .card--article .card__image { width: 100%; aspect-ratio: 3/2; border-radius: var(--radius--default); margin-block-end: 1.6rem; } .card--article .card__header { row-gap: 0.8rem; } .card--article .card__title { --title-size: 2rem; line-height: 3.2rem; } .card--article .card__information { --text-color: var(--text-color--accent-3); display: flex; justify-content: space-between; gap: 1em; font-weight: 600; } .card--article .card__footer { display: flex; gap: 0.5em 1em; } .card--article .card__footer:not(:has(.button-inline)) { margin-block-start: 0.5em; } .card--article .card__footer .button-inline::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .card--navigation { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "image header" "cta cta"; gap: 1em var(--grid-gap); position: relative; } @media screen and ( max-width: 47.9375em ) { .card--navigation { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; grid-template-areas: "image" "header" "cta" !important; } } .card--navigation:first-child .card__image-wrapper { order: -1; } .card--navigation:first-child .card__image-wrapper { -webkit-mask-image: url("../images/placeholder/placeholder-blob-2.svg"); mask-image: url("../images/placeholder/placeholder-blob-2.svg"); } .card--navigation:first-child .card__cta { justify-self: start; } .card--navigation + .card--navigation { grid-template-columns: 1fr auto; grid-template-areas: "header image" "cta cta"; } @media screen and ( min-width: 48em ) { .card--navigation + .card--navigation::before { content: ""; display: block; width: 0.1rem; height: 100%; background: var(--stroke-color--light); position: absolute; top: 0; left: calc(var(--grid-gap) * -1); } } .card--navigation + .card--navigation .card__cta { justify-self: end; } .card--navigation .card__header { grid-area: header; } .card--navigation .card__title { padding-inline-end: var(--grid-gap); } @media screen and ( max-width: 47.9375em ) { .card--navigation .card__title { --title-size: 1.4rem; } } @media screen and ( max-width: 24.3125em ) { .card--navigation .card__title { --title-size: 1.3rem; } } .card--navigation .card__image-wrapper { grid-area: image; -webkit-mask-image: url("../images/placeholder/placeholder-blob.svg"); mask-image: url("../images/placeholder/placeholder-blob.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } @media screen and ( min-width: 48em ) { .card--navigation .card__image-wrapper { width: 9.6rem; } } .card--navigation .card__image { width: 100%; height: 100%; } .card--navigation .card__date { display: block; margin-block-start: 0.5em; font-size: 1.4rem; font-weight: 600; } .card--navigation .card__cta { grid-area: cta; } @media screen and ( max-width: 47.9375em ) { .card--navigation .card__cta { gap: 1em; } } .card--navigation .card__cta::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .card--simple { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "image" "title" "content"; gap: 0.8rem; } .card--simple .card__title { --title-size: 3.2rem; } .card--simple .card__image { height: 100%; aspect-ratio: 1/1; margin-block-end: 0.8rem; border-radius: var(--radius--sm); } .card--team-member { grid-template-areas: "image" "title" "role" "content"; } .card--team-member .card__role { grid-area: role; color: var(--title-color--accent-3); font-weight: bold; padding-block-end: 1rem; font-size: 1.8rem; } .card--rte { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-template-areas: "header" "resume" "footer"; gap: 1em; padding: 3em; border-radius: var(--radius--default); background: var(--background-color); box-shadow: var(--shadow--default); position: relative; } .card--rte .card__subtitle { --text-color: var(--text-color--accent-3); font-weight: 600; } .card--rte .card__button::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .card--diary { display: flex; flex-direction: column; gap: 0.8rem var(--grid-gap); height: 100%; padding: 2em; background: var(--background-color); border-radius: var(--radius--xs); box-shadow: var(--shadow--default); } .card--diary .card__title { --title-size: 2rem; line-height: 3.2rem; } .card--diary .card__information { --text-color: var(--text-color--accent-3); display: flex; justify-content: space-between; gap: 1em; font-weight: 600; } .card--diary .card__footer { display: flex; gap: 0.5em 1em; margin-block-start: auto; } .accordion__item + .accordion__item .accordion__title button { padding-block-start: 0; } @media screen and ( min-width: 64em ) { .accordion__item + .accordion__item .accordion__title button { padding-block-start: 1.5em; } } .accordion__title { display: flex; gap: 1em; width: 100%; min-height: 8rem; padding-block: 1.2rem 1.6rem; align-items: center; justify-content: space-between; cursor: pointer; } @media screen and ( min-width: 40em ) { .accordion__title { padding-block: 1.6rem; } } @media screen and ( min-width: 80em ) { .accordion__title { min-height: 10rem; } } .accordion__title button { display: grid; grid-template-columns: 1fr 4rem; align-items: center; width: 100%; padding-block: 1em; border-block-end: 0.1rem solid var(--stroke-color--light); cursor: pointer; color: currentColor; } @media screen and ( min-width: 40em ) { .accordion__title button { padding-block: 0.5em; } } @media screen and ( min-width: 64em ) { .accordion__title button { grid-template-columns: 1fr 6.4rem; } } .accordion__title .icon { --icon-thickness: 1.5; display: flex; justify-content: flex-end; } .accordion__content { display: grid; } .accordion__content > * { grid-row: 1/-1; } .accordion__overflow { width: 100%; overflow: hidden; } .accordion__overflow > :where(*:last-child) { padding-block-end: 3.2rem; } .accordion__rte + * { margin-block-start: 2em; } .accordion__button { margin-block-start: 1em; position: relative; z-index: 3; } .footer { position: relative; z-index: 3; } .footer__logo { display: block; padding-block: 3.2rem; position: relative; z-index: 2; } .footer__logo img { height: 9.2rem; margin-inline: auto; margin-block: 1rem; } .footer__logo::before { content: ""; display: block; width: 100vw; width: 100dvw; height: 100%; background: var(--background-color--accent-3); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .footer__colophon { display: flex; align-items: center; justify-content: space-between; padding-block: 4rem; } .footer__list { align-items: center; justify-content: center; } @media screen and ( max-width: 47.9375em ) { .footer__list { order: -1; } } @media screen and ( min-width: 48em ) { .footer__list { --grid-gap: 2em; justify-content: flex-end; } } .footer__item { display: flex; justify-content: center; } .footer__item img { max-width: 12rem; max-height: 6rem; } @media screen and ( min-width: 48em ) { .footer__item img { max-height: 4rem; } } .footer__item a { display: block; } .footer__legal { font-size: 1.4rem; } @media screen and ( max-width: 47.9375em ) { .footer__legal { text-align: center; margin-block-start: 2em; } } .footer__legal small { font-weight: 800; } @media screen and ( min-width: 64em ) { .footer__legal ul { display: flex; } } @media screen and ( min-width: 64em ) { .footer__legal li + li::before { content: "•"; margin-inline: 1.5em; } } .footer__legal li a { color: var(--text-color); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media (hover: hover) { .footer__legal li a:hover, .footer__legal li a:focus { --text-color: var(--text-color--accent-3); text-decoration-color: var(--text-color); } } @media screen and ( max-width: 47.9375em ) { .page--home .hero__image { display: none; } .page--home .hero__wave { translate: -50% 75%; } } @media screen and ( max-width: 47.9375em ) { .page--home .hero + .row .block--image-list:first-child { margin-block-start: 25vw; padding-block-start: 70vw !important; } .page--home .hero + .row .block--image-list:first-child::after { content: ""; display: block; width: 80vw; aspect-ratio: 1/1; background: var(--hero-background); background-repeat: no-repeat; background-size: contain; background-position: center; pointer-events: none; position: absolute; top: 0; right: 0; translate: 10% -30%; } } .js-header .header__logo, .js-header .header__logo path, .js-header .header__button, .js-header .header__nav, .js-header .header__menu, .js-header .header__login, .js-header .header__information, .js-header .header__action { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } @media screen and ( max-width: 79.9375em ) { .js-header.open .header__logo { translate: -3em 0; } .js-header.open .header__logo path { fill: var(--text-color--bright); } .js-header.open .header__action.button-underline { --text-color: var(--text-color--bright); } .js-header.open .header__action.button { --button-primary: white; --button-secondary: var(--text-color--default); } .js-header.open .header__login { translate: 3.3em 0; } .js-header.open .header__button { --icon-color: var(--text-color--bright); translate: 6em 0; } .js-header.open .header__button .icon { background: transparent; } .js-header.open .header__button .icon::before { translate: 0 0; rotate: -45deg; } .js-header.open .header__button .icon::after { translate: 0 0; rotate: -135deg; } } @media screen and ( max-width: 79.9375em ) and (hover: hover) { .js-header.open .header__sublist :is(a, button):hover, .js-header.open .header__sublist :is(a, button):focus { --text-color: var(--text-color--accent); } } @media screen and ( max-width: 79.9375em ) { .js-header:not(.open) .header__menu { opacity: 0; pointer-events: none; } } @media screen and ( max-width: 26.6875em ) { .js-header.open .header__logo { translate: -2em 0; } .js-header.open .header__login { translate: 2em 0; } .js-header.open .header__button { translate: 4em 0; } } .js-accordion__content, .js-accordion__button { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .js-accordion__button { cursor: pointer; font-weight: 500; } .js-accordion__button .icon { pointer-events: none; } .js-accordion:not(.expand) > .accordion__content { grid-template-rows: var(--accordion-based-height, 0fr) 0fr; opacity: 0; pointer-events: none; } .js-accordion:not(.expand) > .js-accordion__button::after { opacity: 0; } .js-accordion:not(.expand) > .accordion__button .closed { transform: translate(0, 100%); opacity: 0; pointer-events: none; } .js-accordion.expand > .accordion__content { opacity: 1; grid-template-rows: var(--accordion-based-height, 0fr) 1fr; } .js-accordion.expand > .accordion__content::after { opacity: 0; } .js-accordion.expand > .accordion__button .opened { transform: translate(0, 100%); opacity: 0; pointer-events: none; } .js-accordion.expand .js-accordion__button .icon { transform: scale(1, -1); } @media screen and ( min-width: 80em ) and (hover: hover) { .header .js-accordion:hover > .accordion__content, .header .js-accordion:focus > .accordion__content { opacity: 1; grid-template-rows: var(--accordion-based-height, 0fr) 1fr; pointer-events: auto; } .header .js-accordion:hover > .accordion__content::after, .header .js-accordion:focus > .accordion__content::after { opacity: 0; } .header .js-accordion:hover .js-accordion__button .icon, .header .js-accordion:focus .js-accordion__button .icon { transform: scale(1, -1); } } .js-select .select__button .icon, .js-select .select__list { transition: var(--transition-property, all) var(--transition-easing, ease) var(--transition-duration, 0.32s); } .js-select:not(.open) .select__list { opacity: 0; pointer-events: none; } .js-select.open { z-index: 10; } .js-select.open .select__button .icon { transform: scale(-1); } /* purgecss end ignore */ .admin-flare { background: #ffc5c5 !important; border: 1px solid #bd5757; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #wpadminbar { position: fixed; top: 0; left: 0; }