@charset "UTF-8"; /** * KDP Versicherungsmakler Contao Theme * Basis: LASR Theme / nutshell-framework (Erdmann & Freunde, MIT) * * Einstiegspunkt der Theme-Styles. * Kompilieren (aus dem Bundle-Root): * sass assets/scss/default.scss public/css/kdp-versicherungsmakler.css * sass assets/scss/tinymce.scss public/css/tinymce.css * (oder `composer build-assets`) */ html { --base-border: var(--base-border-width, 1px) solid var(--base-border-color, #d0d0d0); --base-font-weight: 400; --grid-columns: 12; --gallery-gutter: var(--grid-gutter-half, 0.5rem); --base-font-size--sm: var(--base-font-size-xs, 0.875rem); --base-font-size--lg: var(--base-font-size-lg, 1.125rem); --header-height: 90px; --headings-color: var(--color-brand-ink, #354c6e); --color-alert: var(--forms-error-color, #c0392b); --color-alert-border: rgba(192, 57, 43, 0.35); --color-links-hover: var(--links-color-hover, currentcolor); --color-error-light: rgba(217, 83, 79, 0.12); --forms-input-border-color: var(--base-border-color); --forms-input-border-width: var(--base-border-width, 1px); --forms-input-border-radius: var(--base-border-radius, 4px); --input-border-color: var(--forms-input-border-color); --input-border-width: var(--forms-input-border-width); --input-border-radius: var(--forms-input-border-radius); --forms-error-color-light: var(--color-error-light, rgba(217, 83, 79, 0.12)); --arrow-size: 1.25rem; --arrow-color: var(--links-color, var(--color-brand-primary)); --arrow-font-family: inherit; --table-border-width: 1px; --table-border-style: solid; --table-border-color: var(--base-border-color, #d0d0d0); --table-background-light: var(--color-brand-paper, #f7f8f3); --hr-border: var(--base-border); --faq-border: var(--base-border); --search-color-url: var(--color-text-light, #5f6f7f); --search-color-relevance: var(--color-brand-primary); --selection-background: rgba(174, 200, 58, 0.28); --selection-color: var(--color-text, #1d2939); --accordion-background: transparent; --accordion-padding: var(--base-spacing-unit-sm, 0.5rem) var(--base-spacing-unit, 1rem); --newsletter-list-border: var(--base-border); --newsletter-reader-border: var(--base-border); --newsletter-reader-width: 50%; --download-link-color: var(--links-color); --download-link-decoration: underline; } :root { --color-white: #fff; --color-brand-ink: #354c6e; --color-brand-ink-dark: color-mix(in srgb, var(--color-brand-ink), #000 22%); --color-brand-lime: #aec83a; --color-brand-lime-dark: color-mix(in srgb, var(--color-brand-lime), #000 14%); --color-brand-paper: #f7f8f3; --color-brand-mist: #edf2f7; --color-brand-accent: #71861d; --color-text: #1d2939; --color-muted: #5f6f7f; --color-border: rgba(53, 76, 110, 0.12); --color-error: #c0392b; --color-tint: var(--color-brand-mist); --color-brand-primary: var(--color-brand-ink); --color-brand-primary-light: color-mix(in srgb, var(--color-brand-ink), #fff 24%); --color-brand-primary-dark: color-mix(in srgb, var(--color-brand-ink), #000 16%); --color-brand-primary-darker: var(--color-brand-ink-dark); --color-brand-secondary: var(--color-brand-accent); --color-brand: var(--color-brand-primary); --color-highlight: var(--color-brand-lime); --color-text-light: var(--color-muted); --color-text-inverted: var(--color-white); --color-gray-dark: var(--color-text); --color-gray: var(--color-muted); --color-gray-light: var(--color-brand-mist); --color-gray-lighter: var(--color-brand-mist); --color-gray-lightest: var(--color-brand-paper); --color-page-background: var(--color-white); --base-font-size-xs: 0.875rem; --base-font-size-lg: 1.125rem; --base-font-size-xl: 1.25rem; --base-font-size: 1rem; --base-line-height: 1.65; --base-font-family-1: 'Inter', 'Segoe UI', 'Helvetica Neue', arial, sans-serif; --base-font-family-2: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif; --base-font-family: var(--base-font-family-1); --base-spacing-unit: 1rem; --base-spacing-unit-xs: calc(var(--base-spacing-unit) / 4); --base-spacing-unit-sm: calc(var(--base-spacing-unit) / 2); --base-spacing-unit-lg: calc(var(--base-spacing-unit) * 2); --base-spacing-unit-xl: calc(var(--base-spacing-unit) * 4); --base-border-radius: 0.9rem; --base-border-radius-lg: 1.5rem; --base-border-radius-pill: 9999px; --base-border-width: 1px; --base-border-color: rgba(53, 76, 110, 0.2); --base-border: var(--base-border-width) solid var(--color-border); --base-box-shadow: 0 18px 40px rgba(41, 58, 86, 0.08); --box-shadow-lime: 0 14px 30px rgba(174, 200, 58, 0.22); --base-overlay-background: rgba(53, 76, 110, 0.5); --base-overlay-background-2: rgba(255, 255, 255, 0.2); --grid-gutter: 1rem; --grid-gutter-half: calc(var(--grid-gutter) / 2); } @media screen and (min-width: 48em) { :root { --grid-gutter: 1.875rem; } } :root { --headings-font-family: var(--base-font-family-2); --headings-font-weight: 700; --h1-font-size: clamp(2.4rem, 4.5vw, 3.6rem); --h1-font-size-sm: var(--h1-font-size); --h1-font-size-md: var(--h1-font-size); --h1-font-size-lg: var(--h1-font-size); --h1-font-size-xl: var(--h1-font-size); --h1-font-weight: 800; --h1-line-height: 1.12; --h1-spacing-top: 0; --h1-spacing-bottom: 1.25rem; --h2-font-size: clamp(1.9rem, 3.4vw, 2.7rem); --h2-font-size-sm: var(--h2-font-size); --h2-font-size-md: var(--h2-font-size); --h2-font-size-lg: var(--h2-font-size); --h2-font-size-xl: var(--h2-font-size); --h2-line-height: 1.15; --h2-spacing-top: 0; --h2-spacing-bottom: 1.25rem; --h3-font-size: 1.2rem; --h3-font-size-sm: 1.2rem; --h3-font-size-md: 1.25rem; --h3-font-size-lg: 1.25rem; --h3-font-size-xl: 1.25rem; --h3-line-height: 1.35; --h3-spacing-top: 0; --h3-spacing-bottom: 0.75rem; --h4-font-size: 1.125rem; --h4-font-size-sm: 1.125rem; --h4-font-size-md: 1.125rem; --h4-font-size-lg: 1.125rem; --h4-font-size-xl: 1.125rem; --h4-line-height: 1.35; --h4-spacing-top: 0; --h4-spacing-bottom: 0.5rem; --h5-font-size: 1rem; --h5-font-size-sm: 1rem; --h5-font-size-md: 1rem; --h5-font-size-lg: 1rem; --h5-font-size-xl: 1rem; --h5-line-height: 1.4; --h5-spacing-top: 0; --h5-spacing-bottom: 0.5rem; --h6-font-size: 0.875rem; --h6-font-size-sm: 0.875rem; --h6-font-size-md: 0.875rem; --h6-font-size-lg: 0.875rem; --h6-font-size-xl: 0.875rem; --h6-line-height: 1.4; --h6-spacing-top: 0; --h6-spacing-bottom: 0; --paragraph-link-color: var(--links-color); --paragraph-link-decoration: underline; --paragraph-link-decoration-hover: none; --code-background: var(--color-brand-mist); --code-color: var(--color-brand-accent); --pre-color-background: var(--color-brand-mist); --pre-color: var(--color-text); --layout-wrapper-background: var(--color-white); --layout-wrapper-padding: clamp(1rem, 3.5vw, 2.5rem); --layout-header-background: rgba(255, 255, 255, 0.94); --layout-header-background-inverted: var(--color-brand-ink); --layout-header-color: var(--color-text); --layout-header-color-inverted: var(--color-text-inverted); --layout-header-spacing-top: 0; --layout-header-spacing-bottom: 0; --layout-footer-background: var(--color-white); --layout-footer-color: var(--color-muted); --article-highlight-background: var(--color-highlight); --article-highlight-color: var(--color-brand-ink); --article-tint-background: var(--color-brand-paper); --article-dark-background: var(--color-brand-ink); --article-dark-color: var(--color-text-inverted); --article-spacing-top: var(--base-spacing-unit-lg); --article-spacing-bottom: var(--base-spacing-unit-lg); } @media screen and (min-width: 75em) { :root { --article-spacing-top: var(--base-spacing-unit-xl); --article-spacing-bottom: var(--base-spacing-unit-xl); } } :root { --icons-size: 1em; --icons-spacing: var(--base-spacing-unit-xs); --media-image-border: none; --media-image-caption-padding: var(--base-spacing-unit); --links-color: var(--color-brand-accent); --links-color-hover: var(--color-brand-primary); --links-color-visited: color-mix(in srgb, var(--color-brand-accent), #000 20%); --links-outline-focus-color: var(--color-brand-accent); --links-outline-focus: 2px dotted var(--links-outline-focus-color); --links-outline-active: none; --button-spacing: 0.85rem 1.5rem; --button-color: var(--color-brand-ink); --button-background: var(--color-brand-lime); --button-color-hover: var(--color-brand-ink); --button-background-hover: var(--color-brand-lime-dark); --button-font-weight: 800; --button-color-secondary: var(--color-text-inverted); --button-color-secondary-dark: var(--color-brand-lime); --button-background-highlight: var(--color-brand-ink); --button-color-highlight: var(--color-text-inverted); --button-color-secondary-highlight: var(--color-text-inverted); --nav-main-color: var(--color-brand-ink); --nav-main-color-active: var(--color-brand-accent); --nav-main-item-padding: 0.5rem; --nav-main-item-padding-sm: 0.25rem; --nav-main-font: var(--base-font-family); --nav-main-font-size: 0.92rem; --nav-main-font-weight: 700; --nav-submenu-background: var(--color-white); --nav-submenu-color: var(--color-text); --nav-submenu-padding: var(--base-spacing-unit-sm) var(--base-spacing-unit); --nav-mobile-background: var(--color-white); --nav-mobile-color: var(--color-text); --nav-mobile-border: var(--base-border); --nav-mobile-padding: 1rem var(--layout-wrapper-padding); --nav-mobile-submenu-background: var(--color-brand-mist); --nav-icon-width: 1.25rem; --nav-icon-stroke: 2px; --nav-meta-font-family: var(--base-font-family); --nav-meta-font-size: var(--base-font-size); --nav-meta-font-weight: 700; --nav-meta-color: var(--color-muted); --swiper-navigation-size: 2rem; --swiper-navigation-color: var(--color-brand-primary); --swiper-pagination-bullet-size: 0.5rem; --swiper-pagination-bullet-inactive-color: var(--color-muted); --swiper-pagination-color: var(--color-brand-secondary); --news-list-overlay-background: color-mix( in srgb, var(--color-brand-primary), transparent 50% ); --news-grid-overlay-background: color-mix( in srgb, var(--color-brand-primary), transparent 50% ); --news-grid-simple-background: var(--color-brand-secondary); --news-grid-simple-background-hover: var(--color-brand-primary); --news-grid-simple-color: var(--color-text-inverted); --news-grid-columns-xl: 2; --news-grid-columns-lg: 2; --forms-padding: var(--base-spacing-unit-lg); } @media screen and (min-width: 62em) { :root { --forms-padding: var(--base-spacing-unit-xl); } } :root { --forms-input-line-height: 1.4em; --forms-input-padding-block: 0.95rem; --forms-input-padding-inline: 1rem; --forms-input-padding: var(--forms-input-padding-block) var(--forms-input-padding-inline); --forms-input-border: var(--base-border); --forms-input-background: var(--color-white); --mandatory-color: var(--color-brand-accent); --forms-label-color: var(--color-brand-ink); --forms-label-success-color: var(--color-text-light); --forms-label-font-size: 0.8rem; --forms-label-font-size-sm: 0.8rem; --forms-success-color: var(--color-brand-accent); --forms-error-color: rgb(192, 57, 43); --forms-radio-background: var(--color-white); --forms-radio-border-width: 1px; --forms-radio-border-color: var(--base-border-color); --forms-radio-border-radius: 50%; --forms-radio-size: 1rem; --forms-radio-offset-top: calc( (var(--base-line-height) * 1rem / 2) - (var(--forms-radio-size) / 2) ); --forms-radio-background-active: var(--forms-success-color); --forms-radio-icon-active: var(--color-white); --forms-radio-icon-border: 0.25rem; --forms-checkbox-background: var(--color-white); --forms-checkbox-border-width: 1px; --forms-checkbox-border-color: var(--base-border-color); --forms-checkbox-border-radius: 0.4rem; --forms-checkbox-size: 1rem; --forms-checkbox-offset-top: calc( (var(--base-line-height) * 1rem / 2) - (var(--forms-checkbox-size) / 2) ); --forms-checkbox-background-active: var(--forms-success-color); --forms-checkbox-icon-path: url('../img/icons/checkmark.svg'); --forms-checkbox-icon-active: var(--color-white); --forms-switch-background: var(--base-border-color); --forms-switch-border-width: 1px; --forms-switch-border-color: var(--base-border-color); --forms-switch-outline-color-focus: var(--color-brand-primary); --forms-switch-toggler-background: var(--color-white); --forms-switch-width: 1.75rem; --forms-switch-height: 1rem; --forms-switch-offset-top: calc( (var(--base-line-height) * 1rem / 2) - (var(--forms-switch-height) / 2) ); --accordion-spacing: 0; --accordion-border-radius: var(--base-border-radius); --accordion-toggler-font-size: 1.05rem; --accordion-toggler-background: transparent; --accordion-toggler-color: var(--color-brand-ink); --accordion-toggler-color-hover: var(--color-brand-accent); --accordion-toggler-spacing: 1rem 1.25rem; --accordion-toggler-border: var(--base-border); --accordion-toggler-icon-size: 1.25; --accordion-toggler-font-weight: 700; --accordion-toggler-border-radius: var(--base-border-radius); --accordion-content-spacing: var(--base-spacing-unit) var(--base-spacing-unit-lg) var(--base-spacing-unit); --accordion-content-background: transparent; --accordion-content-border: var(--base-border); --newsletter-list-font-family: var(--headings-font-family); --newsletter-list-font-weight: var(--headings-font-weight); --comments-form-background: transparent; --comments-reply-background: var(--color-brand-mist); --search-spacing: var(--base-spacing-unit); --search-border: var(--base-border); --logo-width: 120px; --hero-background-default: linear-gradient( 90deg, rgba(53, 76, 110, 0.96), rgba(53, 76, 110, 0.84) 48%, rgba(53, 76, 110, 0.36) ); --hero-background-dark: rgba(31, 45, 61, 0.82); --hero-background-light: rgba(255, 255, 255, 0.55); --hero-background-primary: color-mix( in srgb, var(--color-brand-primary), transparent 20% ); --hero-background-secondary: color-mix( in srgb, var(--color-brand-secondary), transparent 20% ); --hero-text-background: transparent; --hero-font-family: var(--base-font-family); --hero-font-weight: normal; --hero-color: var(--color-text-inverted); --hero-heading-font-family: var(--headings-font-family); --hero-heading-font-weight: 700; --portfolio-layout-short-background: var(--color-brand-secondary); --portfolio-layout-short-background-hover: var(--color-brand-primary); --portfolio-layout-short-overlay-background: color-mix( in srgb, var(--color-brand-primary), transparent 50% ); --portfolio-layout-short-padding: var(--base-spacing-unit); --portfolio-full-meta-border: var(--base-border); --card-link-color: var(--color-brand-accent); --card-link-font-weight: 700; --card-overlay-background: var(--base-overlay-background); --card-overlay-color: var(--color-text-inverted); --card-overlay-link-color: var(--color-text-inverted); --text-alert-background: var(--color-brand-lime); --text-alert-color: var(--color-brand-ink); --text-alert-border-color: var(--color-brand-accent); } /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * Change font properties to `inherit` in all browsers (opinionated). */ button, input, select, textarea { font: inherit; } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. * 2. Show the overflow in Edge, Firefox, and IE. */ button, input, select { /* 2 */ overflow: visible; } /** * Remove the margin in Safari. * 1. Remove the margin in Firefox and Safari. */ button, input, select, textarea { /* 1 */ margin: 0; } /** * Remove the inheritence of text transform in Edge, Firefox, and IE. * 1. Remove the inheritence of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Change the cursor in all browsers (opinionated). */ button, [type=button], [type=reset], [type=submit] { cursor: pointer; } /** * Restore the default cursor to disabled elements unset by the previous rule. */ [disabled] { cursor: default; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS. */ button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * Correct the odd appearance of search inputs in Chrome and Safari. */ [type=search] { -webkit-appearance: textfield; } /** * Remove the inner padding and cancel buttons in Chrome on OS X and * Safari on OS X. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } .float_left { float: left; } .float_right { float: right; } .invisible { width: 0; height: 0; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; } /** * Set the global `box-sizing` state to `border-box`. * * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice * paulirish.com/2012/box-sizing-border-box-ftw */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--base-spacing-unit-sm); } ul, ol, dl, blockquote, p, address, hr, fieldset, figure, pre { margin-bottom: var(--base-spacing-unit); } ul, ol, dd { margin-left: var(--base-spacing-unit); } .clearfix:after { content: ""; display: table; clear: both; } a { color: var(--links-color); } :not(p) a { text-decoration: none; } figure { margin: 0; } img { display: block; max-width: 100%; height: auto; margin: 0 auto; } a.invisible:focus-visible { outline: none; clip: unset; height: auto; width: auto; color: var(--color-text-inverted); background-color: var(--color-text); z-index: 1005; position: fixed; left: 0; top: 0; margin: 0; } html { font-family: var(--base-font-family, sans-serif); font-size: var(--base-font-size-xs); line-height: var(--base-line-height); font-weight: var(--base-font-weight); background-color: var(--color-page-background); color: var(--color-text); overflow-y: scroll; min-height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 48em) { html { font-size: var(--base-font-size--sm, var(--base-font-size)); } } @media screen and (min-width: 62em) { html { font-size: var(--base-font-size); } } @media screen and (min-width: 75em) { html { font-size: var(--base-font-size--lg, var(--base-font-size)); } } @media screen and (min-width: 90em) { html { font-size: var(--base-font-size-xl); } } html { font-size: var(--base-font-size); scroll-behavior: smooth; scroll-padding-top: var(--onepage-scroll-offset, 7rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: local("Inter"), url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: local("Inter Medium"), url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: local("Inter Bold"), url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap; src: local("Inter ExtraBold"), url("../fonts/inter/inter-latin-800-normal.woff2") format("woff2"); } html { --grid__columns: 12; --grid__gutter: 1.875rem; --grid__gutter--half: calc(var(--grid-gutter) / 2); } .row { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); grid-column-gap: var(--grid-gutter); grid-auto-columns: 1fr; } @supports not (display: grid) { .row { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } .ie .row { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } .article-xl-12 > .inside > *, .article-xl-11 > .inside > *, .article-xl-10 > .inside > *, .article-xl-9 > .inside > *, .article-xl-8 > .inside > *, .article-xl-7 > .inside > *, .article-xl-6 > .inside > *, .article-xl-5 > .inside > *, .article-xl-4 > .inside > *, .article-xl-3 > .inside > *, .article-xl-2 > .inside > *, .article-xl-1 > .inside > *, .article-lg-12 > .inside > *, .article-lg-11 > .inside > *, .article-lg-10 > .inside > *, .article-lg-9 > .inside > *, .article-lg-8 > .inside > *, .article-lg-7 > .inside > *, .article-lg-6 > .inside > *, .article-lg-5 > .inside > *, .article-lg-4 > .inside > *, .article-lg-3 > .inside > *, .article-lg-2 > .inside > *, .article-lg-1 > .inside > *, .article-md-12 > .inside > *, .article-md-11 > .inside > *, .article-md-10 > .inside > *, .article-md-9 > .inside > *, .article-md-8 > .inside > *, .article-md-7 > .inside > *, .article-md-6 > .inside > *, .article-md-5 > .inside > *, .article-md-4 > .inside > *, .article-md-3 > .inside > *, .article-md-2 > .inside > *, .article-md-1 > .inside > *, .article-sm-12 > .inside > *, .article-sm-11 > .inside > *, .article-sm-10 > .inside > *, .article-sm-9 > .inside > *, .article-sm-8 > .inside > *, .article-sm-7 > .inside > *, .article-sm-6 > .inside > *, .article-sm-5 > .inside > *, .article-sm-4 > .inside > *, .article-sm-3 > .inside > *, .article-sm-2 > .inside > *, .article-sm-1 > .inside > *, .article-xs-12 > .inside > *, .article-xs-11 > .inside > *, .article-xs-10 > .inside > *, .article-xs-9 > .inside > *, .article-xs-8 > .inside > *, .article-xs-7 > .inside > *, .article-xs-6 > .inside > *, .article-xs-5 > .inside > *, .article-xs-4 > .inside > *, .article-xs-3 > .inside > *, .article-xs-2 > .inside > *, .article-xs-1 > .inside > *, .ce_gallery > ul li, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1 { grid-column: 1/-1; } @supports not (display: grid) { .article-xl-12 > .inside > *, .article-xl-11 > .inside > *, .article-xl-10 > .inside > *, .article-xl-9 > .inside > *, .article-xl-8 > .inside > *, .article-xl-7 > .inside > *, .article-xl-6 > .inside > *, .article-xl-5 > .inside > *, .article-xl-4 > .inside > *, .article-xl-3 > .inside > *, .article-xl-2 > .inside > *, .article-xl-1 > .inside > *, .article-lg-12 > .inside > *, .article-lg-11 > .inside > *, .article-lg-10 > .inside > *, .article-lg-9 > .inside > *, .article-lg-8 > .inside > *, .article-lg-7 > .inside > *, .article-lg-6 > .inside > *, .article-lg-5 > .inside > *, .article-lg-4 > .inside > *, .article-lg-3 > .inside > *, .article-lg-2 > .inside > *, .article-lg-1 > .inside > *, .article-md-12 > .inside > *, .article-md-11 > .inside > *, .article-md-10 > .inside > *, .article-md-9 > .inside > *, .article-md-8 > .inside > *, .article-md-7 > .inside > *, .article-md-6 > .inside > *, .article-md-5 > .inside > *, .article-md-4 > .inside > *, .article-md-3 > .inside > *, .article-md-2 > .inside > *, .article-md-1 > .inside > *, .article-sm-12 > .inside > *, .article-sm-11 > .inside > *, .article-sm-10 > .inside > *, .article-sm-9 > .inside > *, .article-sm-8 > .inside > *, .article-sm-7 > .inside > *, .article-sm-6 > .inside > *, .article-sm-5 > .inside > *, .article-sm-4 > .inside > *, .article-sm-3 > .inside > *, .article-sm-2 > .inside > *, .article-sm-1 > .inside > *, .article-xs-12 > .inside > *, .article-xs-11 > .inside > *, .article-xs-10 > .inside > *, .article-xs-9 > .inside > *, .article-xs-8 > .inside > *, .article-xs-7 > .inside > *, .article-xs-6 > .inside > *, .article-xs-5 > .inside > *, .article-xs-4 > .inside > *, .article-xs-3 > .inside > *, .article-xs-2 > .inside > *, .article-xs-1 > .inside > *, .ce_gallery > ul li, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1 { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .article-xl-12 > .inside > *, .ie .article-xl-11 > .inside > *, .ie .article-xl-10 > .inside > *, .ie .article-xl-9 > .inside > *, .ie .article-xl-8 > .inside > *, .ie .article-xl-7 > .inside > *, .ie .article-xl-6 > .inside > *, .ie .article-xl-5 > .inside > *, .ie .article-xl-4 > .inside > *, .ie .article-xl-3 > .inside > *, .ie .article-xl-2 > .inside > *, .ie .article-xl-1 > .inside > *, .ie .article-lg-12 > .inside > *, .ie .article-lg-11 > .inside > *, .ie .article-lg-10 > .inside > *, .ie .article-lg-9 > .inside > *, .ie .article-lg-8 > .inside > *, .ie .article-lg-7 > .inside > *, .ie .article-lg-6 > .inside > *, .ie .article-lg-5 > .inside > *, .ie .article-lg-4 > .inside > *, .ie .article-lg-3 > .inside > *, .ie .article-lg-2 > .inside > *, .ie .article-lg-1 > .inside > *, .ie .article-md-12 > .inside > *, .ie .article-md-11 > .inside > *, .ie .article-md-10 > .inside > *, .ie .article-md-9 > .inside > *, .ie .article-md-8 > .inside > *, .ie .article-md-7 > .inside > *, .ie .article-md-6 > .inside > *, .ie .article-md-5 > .inside > *, .ie .article-md-4 > .inside > *, .ie .article-md-3 > .inside > *, .ie .article-md-2 > .inside > *, .ie .article-md-1 > .inside > *, .ie .article-sm-12 > .inside > *, .ie .article-sm-11 > .inside > *, .ie .article-sm-10 > .inside > *, .ie .article-sm-9 > .inside > *, .ie .article-sm-8 > .inside > *, .ie .article-sm-7 > .inside > *, .ie .article-sm-6 > .inside > *, .ie .article-sm-5 > .inside > *, .ie .article-sm-4 > .inside > *, .ie .article-sm-3 > .inside > *, .ie .article-sm-2 > .inside > *, .ie .article-sm-1 > .inside > *, .ie .article-xs-12 > .inside > *, .ie .article-xs-11 > .inside > *, .ie .article-xs-10 > .inside > *, .ie .article-xs-9 > .inside > *, .ie .article-xs-8 > .inside > *, .ie .article-xs-7 > .inside > *, .ie .article-xs-6 > .inside > *, .ie .article-xs-5 > .inside > *, .ie .article-xs-4 > .inside > *, .ie .article-xs-3 > .inside > *, .ie .article-xs-2 > .inside > *, .ie .article-xs-1 > .inside > *, .ie .ce_gallery > ul li, .ce_gallery > ul .ie li, .ie .col-xl-12, .ie .col-xl-11, .ie .col-xl-10, .ie .col-xl-9, .ie .col-xl-8, .ie .col-xl-7, .ie .col-xl-6, .ie .col-xl-5, .ie .col-xl-4, .ie .col-xl-3, .ie .col-xl-2, .ie .col-xl-1, .ie .col-lg-12, .ie .col-lg-11, .ie .col-lg-10, .ie .col-lg-9, .ie .col-lg-8, .ie .col-lg-7, .ie .col-lg-6, .ie .col-lg-5, .ie .col-lg-4, .ie .col-lg-3, .ie .col-lg-2, .ie .col-lg-1, .ie .col-md-12, .ie .col-md-11, .ie .col-md-10, .ie .col-md-9, .ie .col-md-8, .ie .col-md-7, .ie .col-md-6, .ie .col-md-5, .ie .col-md-4, .ie .col-md-3, .ie .col-md-2, .ie .col-md-1, .ie .col-sm-12, .ie .col-sm-11, .ie .col-sm-10, .ie .col-sm-9, .ie .col-sm-8, .ie .col-sm-7, .ie .col-sm-6, .ie .col-sm-5, .ie .col-sm-4, .ie .col-sm-3, .ie .col-sm-2, .ie .col-sm-1, .ie .col-xs-12, .ie .col-xs-11, .ie .col-xs-10, .ie .col-xs-9, .ie .col-xs-8, .ie .col-xs-7, .ie .col-xs-6, .ie .col-xs-5, .ie .col-xs-4, .ie .col-xs-3, .ie .col-xs-2, .ie .col-xs-1 { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .col-1 { grid-column: span 1/span 1; } @supports not (display: grid) { .col-1 { width: 8.3333333333%; } } .ie .col-1 { width: 8.3333333333%; } .col-2 { grid-column: span 2/span 2; } @supports not (display: grid) { .col-2 { width: 16.6666666667%; } } .ie .col-2 { width: 16.6666666667%; } .col-3 { grid-column: span 3/span 3; } @supports not (display: grid) { .col-3 { width: 25%; } } .ie .col-3 { width: 25%; } .col-4 { grid-column: span 4/span 4; } @supports not (display: grid) { .col-4 { width: 33.3333333333%; } } .ie .col-4 { width: 33.3333333333%; } .col-5 { grid-column: span 5/span 5; } @supports not (display: grid) { .col-5 { width: 41.6666666667%; } } .ie .col-5 { width: 41.6666666667%; } .col-6 { grid-column: span 6/span 6; } @supports not (display: grid) { .col-6 { width: 50%; } } .ie .col-6 { width: 50%; } .col-7 { grid-column: span 7/span 7; } @supports not (display: grid) { .col-7 { width: 58.3333333333%; } } .ie .col-7 { width: 58.3333333333%; } .col-8 { grid-column: span 8/span 8; } @supports not (display: grid) { .col-8 { width: 66.6666666667%; } } .ie .col-8 { width: 66.6666666667%; } .col-9 { grid-column: span 9/span 9; } @supports not (display: grid) { .col-9 { width: 75%; } } .ie .col-9 { width: 75%; } .col-10 { grid-column: span 10/span 10; } @supports not (display: grid) { .col-10 { width: 83.3333333333%; } } .ie .col-10 { width: 83.3333333333%; } .col-11 { grid-column: span 11/span 11; } @supports not (display: grid) { .col-11 { width: 91.6666666667%; } } .ie .col-11 { width: 91.6666666667%; } .col-12 { grid-column: span 12/span 12; } @supports not (display: grid) { .col-12 { width: 100%; } } .ie .col-12 { width: 100%; } @media screen and (min-width: 0) { .col-xs-1 { grid-column: span 1/span 1; } @supports not (display: grid) { .col-xs-1 { width: 8.3333333333%; } } .ie .col-xs-1 { width: 8.3333333333%; } .col-xs-2 { grid-column: span 2/span 2; } @supports not (display: grid) { .col-xs-2 { width: 16.6666666667%; } } .ie .col-xs-2 { width: 16.6666666667%; } .col-xs-3 { grid-column: span 3/span 3; } @supports not (display: grid) { .col-xs-3 { width: 25%; } } .ie .col-xs-3 { width: 25%; } .col-xs-4 { grid-column: span 4/span 4; } @supports not (display: grid) { .col-xs-4 { width: 33.3333333333%; } } .ie .col-xs-4 { width: 33.3333333333%; } .col-xs-5 { grid-column: span 5/span 5; } @supports not (display: grid) { .col-xs-5 { width: 41.6666666667%; } } .ie .col-xs-5 { width: 41.6666666667%; } .col-xs-6 { grid-column: span 6/span 6; } @supports not (display: grid) { .col-xs-6 { width: 50%; } } .ie .col-xs-6 { width: 50%; } .col-xs-7 { grid-column: span 7/span 7; } @supports not (display: grid) { .col-xs-7 { width: 58.3333333333%; } } .ie .col-xs-7 { width: 58.3333333333%; } .col-xs-8 { grid-column: span 8/span 8; } @supports not (display: grid) { .col-xs-8 { width: 66.6666666667%; } } .ie .col-xs-8 { width: 66.6666666667%; } .col-xs-9 { grid-column: span 9/span 9; } @supports not (display: grid) { .col-xs-9 { width: 75%; } } .ie .col-xs-9 { width: 75%; } .col-xs-10 { grid-column: span 10/span 10; } @supports not (display: grid) { .col-xs-10 { width: 83.3333333333%; } } .ie .col-xs-10 { width: 83.3333333333%; } .col-xs-11 { grid-column: span 11/span 11; } @supports not (display: grid) { .col-xs-11 { width: 91.6666666667%; } } .ie .col-xs-11 { width: 91.6666666667%; } .col-xs-12 { grid-column: span 12/span 12; } @supports not (display: grid) { .col-xs-12 { width: 100%; } } .ie .col-xs-12 { width: 100%; } } @media screen and (min-width: 0) { .row-span-xs-1 { grid-row: span 1/span 1; } .row-span-xs-2 { grid-row: span 2/span 2; } .row-span-xs-3 { grid-row: span 3/span 3; } .row-span-xs-4 { grid-row: span 4/span 4; } .row-span-xs-5 { grid-row: span 5/span 5; } .row-span-xs-6 { grid-row: span 6/span 6; } .row-span-xs-7 { grid-row: span 7/span 7; } .row-span-xs-8 { grid-row: span 8/span 8; } .row-span-xs-9 { grid-row: span 9/span 9; } .row-span-xs-10 { grid-row: span 10/span 10; } .row-span-xs-11 { grid-row: span 11/span 11; } .row-span-xs-12 { grid-row: span 12/span 12; } } @media screen and (min-width: 0) { .col-start-xs-1 { grid-column-start: 1; } .row-start-xs-1 { grid-row-start: 1; } .col-start-xs-2 { grid-column-start: 2; } .row-start-xs-2 { grid-row-start: 2; } .col-start-xs-3 { grid-column-start: 3; } .row-start-xs-3 { grid-row-start: 3; } .col-start-xs-4 { grid-column-start: 4; } .row-start-xs-4 { grid-row-start: 4; } .col-start-xs-5 { grid-column-start: 5; } .row-start-xs-5 { grid-row-start: 5; } .col-start-xs-6 { grid-column-start: 6; } .row-start-xs-6 { grid-row-start: 6; } .col-start-xs-7 { grid-column-start: 7; } .row-start-xs-7 { grid-row-start: 7; } .col-start-xs-8 { grid-column-start: 8; } .row-start-xs-8 { grid-row-start: 8; } .col-start-xs-9 { grid-column-start: 9; } .row-start-xs-9 { grid-row-start: 9; } .col-start-xs-10 { grid-column-start: 10; } .row-start-xs-10 { grid-row-start: 10; } .col-start-xs-11 { grid-column-start: 11; } .row-start-xs-11 { grid-row-start: 11; } .col-start-xs-12 { grid-column-start: 12; } .row-start-xs-12 { grid-row-start: 12; } } @media screen and (min-width: 0) { .pull-right-xs { grid-column-end: -1; } .pull-left-xs { grid-row-start: 1; grid-column-end: inherit; } } @media screen and (min-width: 48em) { .col-sm-1 { grid-column: span 1/span 1; } @supports not (display: grid) { .col-sm-1 { width: 8.3333333333%; } } .ie .col-sm-1 { width: 8.3333333333%; } .col-sm-2 { grid-column: span 2/span 2; } @supports not (display: grid) { .col-sm-2 { width: 16.6666666667%; } } .ie .col-sm-2 { width: 16.6666666667%; } .col-sm-3 { grid-column: span 3/span 3; } @supports not (display: grid) { .col-sm-3 { width: 25%; } } .ie .col-sm-3 { width: 25%; } .col-sm-4 { grid-column: span 4/span 4; } @supports not (display: grid) { .col-sm-4 { width: 33.3333333333%; } } .ie .col-sm-4 { width: 33.3333333333%; } .col-sm-5 { grid-column: span 5/span 5; } @supports not (display: grid) { .col-sm-5 { width: 41.6666666667%; } } .ie .col-sm-5 { width: 41.6666666667%; } .col-sm-6 { grid-column: span 6/span 6; } @supports not (display: grid) { .col-sm-6 { width: 50%; } } .ie .col-sm-6 { width: 50%; } .col-sm-7 { grid-column: span 7/span 7; } @supports not (display: grid) { .col-sm-7 { width: 58.3333333333%; } } .ie .col-sm-7 { width: 58.3333333333%; } .col-sm-8 { grid-column: span 8/span 8; } @supports not (display: grid) { .col-sm-8 { width: 66.6666666667%; } } .ie .col-sm-8 { width: 66.6666666667%; } .col-sm-9 { grid-column: span 9/span 9; } @supports not (display: grid) { .col-sm-9 { width: 75%; } } .ie .col-sm-9 { width: 75%; } .col-sm-10 { grid-column: span 10/span 10; } @supports not (display: grid) { .col-sm-10 { width: 83.3333333333%; } } .ie .col-sm-10 { width: 83.3333333333%; } .col-sm-11 { grid-column: span 11/span 11; } @supports not (display: grid) { .col-sm-11 { width: 91.6666666667%; } } .ie .col-sm-11 { width: 91.6666666667%; } .col-sm-12 { grid-column: span 12/span 12; } @supports not (display: grid) { .col-sm-12 { width: 100%; } } .ie .col-sm-12 { width: 100%; } } @media screen and (min-width: 48em) { .row-span-sm-1 { grid-row: span 1/span 1; } .row-span-sm-2 { grid-row: span 2/span 2; } .row-span-sm-3 { grid-row: span 3/span 3; } .row-span-sm-4 { grid-row: span 4/span 4; } .row-span-sm-5 { grid-row: span 5/span 5; } .row-span-sm-6 { grid-row: span 6/span 6; } .row-span-sm-7 { grid-row: span 7/span 7; } .row-span-sm-8 { grid-row: span 8/span 8; } .row-span-sm-9 { grid-row: span 9/span 9; } .row-span-sm-10 { grid-row: span 10/span 10; } .row-span-sm-11 { grid-row: span 11/span 11; } .row-span-sm-12 { grid-row: span 12/span 12; } } @media screen and (min-width: 48em) { .col-start-sm-1 { grid-column-start: 1; } .row-start-sm-1 { grid-row-start: 1; } .col-start-sm-2 { grid-column-start: 2; } .row-start-sm-2 { grid-row-start: 2; } .col-start-sm-3 { grid-column-start: 3; } .row-start-sm-3 { grid-row-start: 3; } .col-start-sm-4 { grid-column-start: 4; } .row-start-sm-4 { grid-row-start: 4; } .col-start-sm-5 { grid-column-start: 5; } .row-start-sm-5 { grid-row-start: 5; } .col-start-sm-6 { grid-column-start: 6; } .row-start-sm-6 { grid-row-start: 6; } .col-start-sm-7 { grid-column-start: 7; } .row-start-sm-7 { grid-row-start: 7; } .col-start-sm-8 { grid-column-start: 8; } .row-start-sm-8 { grid-row-start: 8; } .col-start-sm-9 { grid-column-start: 9; } .row-start-sm-9 { grid-row-start: 9; } .col-start-sm-10 { grid-column-start: 10; } .row-start-sm-10 { grid-row-start: 10; } .col-start-sm-11 { grid-column-start: 11; } .row-start-sm-11 { grid-row-start: 11; } .col-start-sm-12 { grid-column-start: 12; } .row-start-sm-12 { grid-row-start: 12; } } @media screen and (min-width: 48em) { .pull-right-sm { grid-column-end: -1; } .pull-left-sm { grid-row-start: 1; grid-column-end: inherit; } } @media screen and (min-width: 62em) { .col-md-1 { grid-column: span 1/span 1; } @supports not (display: grid) { .col-md-1 { width: 8.3333333333%; } } .ie .col-md-1 { width: 8.3333333333%; } .col-md-2 { grid-column: span 2/span 2; } @supports not (display: grid) { .col-md-2 { width: 16.6666666667%; } } .ie .col-md-2 { width: 16.6666666667%; } .col-md-3 { grid-column: span 3/span 3; } @supports not (display: grid) { .col-md-3 { width: 25%; } } .ie .col-md-3 { width: 25%; } .col-md-4 { grid-column: span 4/span 4; } @supports not (display: grid) { .col-md-4 { width: 33.3333333333%; } } .ie .col-md-4 { width: 33.3333333333%; } .col-md-5 { grid-column: span 5/span 5; } @supports not (display: grid) { .col-md-5 { width: 41.6666666667%; } } .ie .col-md-5 { width: 41.6666666667%; } .col-md-6 { grid-column: span 6/span 6; } @supports not (display: grid) { .col-md-6 { width: 50%; } } .ie .col-md-6 { width: 50%; } .col-md-7 { grid-column: span 7/span 7; } @supports not (display: grid) { .col-md-7 { width: 58.3333333333%; } } .ie .col-md-7 { width: 58.3333333333%; } .col-md-8 { grid-column: span 8/span 8; } @supports not (display: grid) { .col-md-8 { width: 66.6666666667%; } } .ie .col-md-8 { width: 66.6666666667%; } .col-md-9 { grid-column: span 9/span 9; } @supports not (display: grid) { .col-md-9 { width: 75%; } } .ie .col-md-9 { width: 75%; } .col-md-10 { grid-column: span 10/span 10; } @supports not (display: grid) { .col-md-10 { width: 83.3333333333%; } } .ie .col-md-10 { width: 83.3333333333%; } .col-md-11 { grid-column: span 11/span 11; } @supports not (display: grid) { .col-md-11 { width: 91.6666666667%; } } .ie .col-md-11 { width: 91.6666666667%; } .col-md-12 { grid-column: span 12/span 12; } @supports not (display: grid) { .col-md-12 { width: 100%; } } .ie .col-md-12 { width: 100%; } } @media screen and (min-width: 62em) { .row-span-md-1 { grid-row: span 1/span 1; } .row-span-md-2 { grid-row: span 2/span 2; } .row-span-md-3 { grid-row: span 3/span 3; } .row-span-md-4 { grid-row: span 4/span 4; } .row-span-md-5 { grid-row: span 5/span 5; } .row-span-md-6 { grid-row: span 6/span 6; } .row-span-md-7 { grid-row: span 7/span 7; } .row-span-md-8 { grid-row: span 8/span 8; } .row-span-md-9 { grid-row: span 9/span 9; } .row-span-md-10 { grid-row: span 10/span 10; } .row-span-md-11 { grid-row: span 11/span 11; } .row-span-md-12 { grid-row: span 12/span 12; } } @media screen and (min-width: 62em) { .col-start-md-1 { grid-column-start: 1; } .row-start-md-1 { grid-row-start: 1; } .col-start-md-2 { grid-column-start: 2; } .row-start-md-2 { grid-row-start: 2; } .col-start-md-3 { grid-column-start: 3; } .row-start-md-3 { grid-row-start: 3; } .col-start-md-4 { grid-column-start: 4; } .row-start-md-4 { grid-row-start: 4; } .col-start-md-5 { grid-column-start: 5; } .row-start-md-5 { grid-row-start: 5; } .col-start-md-6 { grid-column-start: 6; } .row-start-md-6 { grid-row-start: 6; } .col-start-md-7 { grid-column-start: 7; } .row-start-md-7 { grid-row-start: 7; } .col-start-md-8 { grid-column-start: 8; } .row-start-md-8 { grid-row-start: 8; } .col-start-md-9 { grid-column-start: 9; } .row-start-md-9 { grid-row-start: 9; } .col-start-md-10 { grid-column-start: 10; } .row-start-md-10 { grid-row-start: 10; } .col-start-md-11 { grid-column-start: 11; } .row-start-md-11 { grid-row-start: 11; } .col-start-md-12 { grid-column-start: 12; } .row-start-md-12 { grid-row-start: 12; } } @media screen and (min-width: 62em) { .pull-right-md { grid-column-end: -1; } .pull-left-md { grid-row-start: 1; grid-column-end: inherit; } } @media screen and (min-width: 75em) { .col-lg-1 { grid-column: span 1/span 1; } @supports not (display: grid) { .col-lg-1 { width: 8.3333333333%; } } .ie .col-lg-1 { width: 8.3333333333%; } .col-lg-2 { grid-column: span 2/span 2; } @supports not (display: grid) { .col-lg-2 { width: 16.6666666667%; } } .ie .col-lg-2 { width: 16.6666666667%; } .col-lg-3 { grid-column: span 3/span 3; } @supports not (display: grid) { .col-lg-3 { width: 25%; } } .ie .col-lg-3 { width: 25%; } .col-lg-4 { grid-column: span 4/span 4; } @supports not (display: grid) { .col-lg-4 { width: 33.3333333333%; } } .ie .col-lg-4 { width: 33.3333333333%; } .col-lg-5 { grid-column: span 5/span 5; } @supports not (display: grid) { .col-lg-5 { width: 41.6666666667%; } } .ie .col-lg-5 { width: 41.6666666667%; } .col-lg-6 { grid-column: span 6/span 6; } @supports not (display: grid) { .col-lg-6 { width: 50%; } } .ie .col-lg-6 { width: 50%; } .col-lg-7 { grid-column: span 7/span 7; } @supports not (display: grid) { .col-lg-7 { width: 58.3333333333%; } } .ie .col-lg-7 { width: 58.3333333333%; } .col-lg-8 { grid-column: span 8/span 8; } @supports not (display: grid) { .col-lg-8 { width: 66.6666666667%; } } .ie .col-lg-8 { width: 66.6666666667%; } .col-lg-9 { grid-column: span 9/span 9; } @supports not (display: grid) { .col-lg-9 { width: 75%; } } .ie .col-lg-9 { width: 75%; } .col-lg-10 { grid-column: span 10/span 10; } @supports not (display: grid) { .col-lg-10 { width: 83.3333333333%; } } .ie .col-lg-10 { width: 83.3333333333%; } .col-lg-11 { grid-column: span 11/span 11; } @supports not (display: grid) { .col-lg-11 { width: 91.6666666667%; } } .ie .col-lg-11 { width: 91.6666666667%; } .col-lg-12 { grid-column: span 12/span 12; } @supports not (display: grid) { .col-lg-12 { width: 100%; } } .ie .col-lg-12 { width: 100%; } } @media screen and (min-width: 75em) { .row-span-lg-1 { grid-row: span 1/span 1; } .row-span-lg-2 { grid-row: span 2/span 2; } .row-span-lg-3 { grid-row: span 3/span 3; } .row-span-lg-4 { grid-row: span 4/span 4; } .row-span-lg-5 { grid-row: span 5/span 5; } .row-span-lg-6 { grid-row: span 6/span 6; } .row-span-lg-7 { grid-row: span 7/span 7; } .row-span-lg-8 { grid-row: span 8/span 8; } .row-span-lg-9 { grid-row: span 9/span 9; } .row-span-lg-10 { grid-row: span 10/span 10; } .row-span-lg-11 { grid-row: span 11/span 11; } .row-span-lg-12 { grid-row: span 12/span 12; } } @media screen and (min-width: 75em) { .col-start-lg-1 { grid-column-start: 1; } .row-start-lg-1 { grid-row-start: 1; } .col-start-lg-2 { grid-column-start: 2; } .row-start-lg-2 { grid-row-start: 2; } .col-start-lg-3 { grid-column-start: 3; } .row-start-lg-3 { grid-row-start: 3; } .col-start-lg-4 { grid-column-start: 4; } .row-start-lg-4 { grid-row-start: 4; } .col-start-lg-5 { grid-column-start: 5; } .row-start-lg-5 { grid-row-start: 5; } .col-start-lg-6 { grid-column-start: 6; } .row-start-lg-6 { grid-row-start: 6; } .col-start-lg-7 { grid-column-start: 7; } .row-start-lg-7 { grid-row-start: 7; } .col-start-lg-8 { grid-column-start: 8; } .row-start-lg-8 { grid-row-start: 8; } .col-start-lg-9 { grid-column-start: 9; } .row-start-lg-9 { grid-row-start: 9; } .col-start-lg-10 { grid-column-start: 10; } .row-start-lg-10 { grid-row-start: 10; } .col-start-lg-11 { grid-column-start: 11; } .row-start-lg-11 { grid-row-start: 11; } .col-start-lg-12 { grid-column-start: 12; } .row-start-lg-12 { grid-row-start: 12; } } @media screen and (min-width: 75em) { .pull-right-lg { grid-column-end: -1; } .pull-left-lg { grid-row-start: 1; grid-column-end: inherit; } } @media screen and (min-width: 90em) { .col-xl-1 { grid-column: span 1/span 1; } @supports not (display: grid) { .col-xl-1 { width: 8.3333333333%; } } .ie .col-xl-1 { width: 8.3333333333%; } .col-xl-2 { grid-column: span 2/span 2; } @supports not (display: grid) { .col-xl-2 { width: 16.6666666667%; } } .ie .col-xl-2 { width: 16.6666666667%; } .col-xl-3 { grid-column: span 3/span 3; } @supports not (display: grid) { .col-xl-3 { width: 25%; } } .ie .col-xl-3 { width: 25%; } .col-xl-4 { grid-column: span 4/span 4; } @supports not (display: grid) { .col-xl-4 { width: 33.3333333333%; } } .ie .col-xl-4 { width: 33.3333333333%; } .col-xl-5 { grid-column: span 5/span 5; } @supports not (display: grid) { .col-xl-5 { width: 41.6666666667%; } } .ie .col-xl-5 { width: 41.6666666667%; } .col-xl-6 { grid-column: span 6/span 6; } @supports not (display: grid) { .col-xl-6 { width: 50%; } } .ie .col-xl-6 { width: 50%; } .col-xl-7 { grid-column: span 7/span 7; } @supports not (display: grid) { .col-xl-7 { width: 58.3333333333%; } } .ie .col-xl-7 { width: 58.3333333333%; } .col-xl-8 { grid-column: span 8/span 8; } @supports not (display: grid) { .col-xl-8 { width: 66.6666666667%; } } .ie .col-xl-8 { width: 66.6666666667%; } .col-xl-9 { grid-column: span 9/span 9; } @supports not (display: grid) { .col-xl-9 { width: 75%; } } .ie .col-xl-9 { width: 75%; } .col-xl-10 { grid-column: span 10/span 10; } @supports not (display: grid) { .col-xl-10 { width: 83.3333333333%; } } .ie .col-xl-10 { width: 83.3333333333%; } .col-xl-11 { grid-column: span 11/span 11; } @supports not (display: grid) { .col-xl-11 { width: 91.6666666667%; } } .ie .col-xl-11 { width: 91.6666666667%; } .col-xl-12 { grid-column: span 12/span 12; } @supports not (display: grid) { .col-xl-12 { width: 100%; } } .ie .col-xl-12 { width: 100%; } } @media screen and (min-width: 90em) { .row-span-xl-1 { grid-row: span 1/span 1; } .row-span-xl-2 { grid-row: span 2/span 2; } .row-span-xl-3 { grid-row: span 3/span 3; } .row-span-xl-4 { grid-row: span 4/span 4; } .row-span-xl-5 { grid-row: span 5/span 5; } .row-span-xl-6 { grid-row: span 6/span 6; } .row-span-xl-7 { grid-row: span 7/span 7; } .row-span-xl-8 { grid-row: span 8/span 8; } .row-span-xl-9 { grid-row: span 9/span 9; } .row-span-xl-10 { grid-row: span 10/span 10; } .row-span-xl-11 { grid-row: span 11/span 11; } .row-span-xl-12 { grid-row: span 12/span 12; } } @media screen and (min-width: 90em) { .col-start-xl-1 { grid-column-start: 1; } .row-start-xl-1 { grid-row-start: 1; } .col-start-xl-2 { grid-column-start: 2; } .row-start-xl-2 { grid-row-start: 2; } .col-start-xl-3 { grid-column-start: 3; } .row-start-xl-3 { grid-row-start: 3; } .col-start-xl-4 { grid-column-start: 4; } .row-start-xl-4 { grid-row-start: 4; } .col-start-xl-5 { grid-column-start: 5; } .row-start-xl-5 { grid-row-start: 5; } .col-start-xl-6 { grid-column-start: 6; } .row-start-xl-6 { grid-row-start: 6; } .col-start-xl-7 { grid-column-start: 7; } .row-start-xl-7 { grid-row-start: 7; } .col-start-xl-8 { grid-column-start: 8; } .row-start-xl-8 { grid-row-start: 8; } .col-start-xl-9 { grid-column-start: 9; } .row-start-xl-9 { grid-row-start: 9; } .col-start-xl-10 { grid-column-start: 10; } .row-start-xl-10 { grid-row-start: 10; } .col-start-xl-11 { grid-column-start: 11; } .row-start-xl-11 { grid-row-start: 11; } .col-start-xl-12 { grid-column-start: 12; } .row-start-xl-12 { grid-row-start: 12; } } @media screen and (min-width: 90em) { .pull-right-xl { grid-column-end: -1; } .pull-left-xl { grid-row-start: 1; grid-column-end: inherit; } } .justify-start { justify-self: start; text-align: left; } .justify-center { justify-self: center; text-align: center; } .justify-end { justify-self: end; text-align: right; } @media screen and (min-width: 0) { .justify-xs-start { justify-self: start; text-align: left; } .justify-xs-center { justify-self: center; text-align: center; } .justify-xs-end { justify-self: end; text-align: right; } } @media screen and (min-width: 48em) { .justify-sm-start { justify-self: start; text-align: left; } .justify-sm-center { justify-self: center; text-align: center; } .justify-sm-end { justify-self: end; text-align: right; } } @media screen and (min-width: 62em) { .justify-md-start { justify-self: start; text-align: left; } .justify-md-center { justify-self: center; text-align: center; } .justify-md-end { justify-self: end; text-align: right; } } @media screen and (min-width: 75em) { .justify-lg-start { justify-self: start; text-align: left; } .justify-lg-center { justify-self: center; text-align: center; } .justify-lg-end { justify-self: end; text-align: right; } } @media screen and (min-width: 90em) { .justify-xl-start { justify-self: start; text-align: left; } .justify-xl-center { justify-self: center; text-align: center; } .justify-xl-end { justify-self: end; text-align: right; } } .align-start { align-self: start; } .align-center { align-self: center; } .align-end { align-self: end; } @media screen and (min-width: 0) { .align-xs-start { align-self: start; } .align-xs-center { align-self: center; } .align-xs-end { align-self: end; } } @media screen and (min-width: 48em) { .align-sm-start { align-self: start; } .align-sm-center { align-self: center; } .align-sm-end { align-self: end; } } @media screen and (min-width: 62em) { .align-md-start { align-self: start; } .align-md-center { align-self: center; } .align-md-end { align-self: end; } } @media screen and (min-width: 75em) { .align-lg-start { align-self: start; } .align-lg-center { align-self: center; } .align-lg-end { align-self: end; } } @media screen and (min-width: 90em) { .align-xl-start { align-self: start; } .align-xl-center { align-self: center; } .align-xl-end { align-self: end; } } .row-start-1 { grid-row-start: 1; } .row-span-1 { grid-row: span 1/span 1; } .row-start-2 { grid-row-start: 2; } .row-span-2 { grid-row: span 2/span 2; } .row-start-3 { grid-row-start: 3; } .row-span-3 { grid-row: span 3/span 3; } .row-start-4 { grid-row-start: 4; } .row-span-4 { grid-row: span 4/span 4; } .row-start-5 { grid-row-start: 5; } .row-span-5 { grid-row: span 5/span 5; } .row-start-6 { grid-row-start: 6; } .row-span-6 { grid-row: span 6/span 6; } .row-start-7 { grid-row-start: 7; } .row-span-7 { grid-row: span 7/span 7; } .row-start-8 { grid-row-start: 8; } .row-span-8 { grid-row: span 8/span 8; } .row-start-9 { grid-row-start: 9; } .row-span-9 { grid-row: span 9/span 9; } .row-start-10 { grid-row-start: 10; } .row-span-10 { grid-row: span 10/span 10; } .row-start-11 { grid-row-start: 11; } .row-span-11 { grid-row: span 11/span 11; } .row-start-12 { grid-row-start: 12; } .row-span-12 { grid-row: span 12/span 12; } .row { margin-bottom: var(--base-spacing-unit); grid-row-gap: var(--grid-gutter); } .row [class*=col] { display: grid; } [class*=col] { display: grid; } [class*=col] :last-child:not([class*=m-b-]) { margin-bottom: 0; } .row-start { align-self: start; } .row-center { align-content: center; } html { --headings__font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif; --headings__font-weight: 700; --headings__color: 'currentColor'; --paragraph__link-color: var(--links-color); --code__color: var(--color-highlight); --selection-background: var(--color-brand); --pre__color-background: var(--color-gray); --pre__color: var(--color-text-inverted); --selection-color: var(--color-text-inverted); --hr-border: var(--base-border); --paragraph__link-decoration: underline; --paragraph__link-decoration--hover: none; } h1, h2, h3, h4, h5, h6 { font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); color: var(--headings-color, var(--color-text)); } .text--fact .rte p:first-child, .heading--1 h1:first-child, .heading--1 h2:first-child, .heading--1 h3:first-child, .heading--1 h4:first-child, .heading--1 h5:first-child, .heading--1 h6:first-child, .heading--1.ce_headline, h1 { font-size: 2rem; line-height: 1.55; margin-bottom: 0.5rem; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } @media screen and (min-width: 48em) { .text--fact .rte p:first-child, .heading--1 h1:first-child, .heading--1 h2:first-child, .heading--1 h3:first-child, .heading--1 h4:first-child, .heading--1 h5:first-child, .heading--1 h6:first-child, .heading--1.ce_headline, h1 { font-size: 2rem; } } @media screen and (min-width: 62em) { .text--fact .rte p:first-child, .heading--1 h1:first-child, .heading--1 h2:first-child, .heading--1 h3:first-child, .heading--1 h4:first-child, .heading--1 h5:first-child, .heading--1 h6:first-child, .heading--1.ce_headline, h1 { font-size: 2.25rem; } } @media screen and (min-width: 75em) { .text--fact .rte p:first-child, .heading--1 h1:first-child, .heading--1 h2:first-child, .heading--1 h3:first-child, .heading--1 h4:first-child, .heading--1 h5:first-child, .heading--1 h6:first-child, .heading--1.ce_headline, h1 { font-size: 2.25rem; } } @media screen and (min-width: 90em) { .text--fact .rte p:first-child, .heading--1 h1:first-child, .heading--1 h2:first-child, .heading--1 h3:first-child, .heading--1 h4:first-child, .heading--1 h5:first-child, .heading--1 h6:first-child, .heading--1.ce_headline, h1 { font-size: 2.25rem; } } p + h1, ul + h1, ol + h1 { margin-top: 2rem; } .ce_text + .ce_text h1:first-child { margin-top: 2rem; } h1 + h2 { margin-top: -0.5rem; } .heading--2 h1:first-child, .heading--2 h2:first-child, .heading--2 h3:first-child, .heading--2 h4:first-child, .heading--2 h5:first-child, .heading--2 h6:first-child, .heading--2.ce_headline, h2 { font-size: 1.625rem; line-height: 1.5; margin-bottom: 0.5rem; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } @media screen and (min-width: 48em) { .heading--2 h1:first-child, .heading--2 h2:first-child, .heading--2 h3:first-child, .heading--2 h4:first-child, .heading--2 h5:first-child, .heading--2 h6:first-child, .heading--2.ce_headline, h2 { font-size: 1.625rem; } } @media screen and (min-width: 62em) { .heading--2 h1:first-child, .heading--2 h2:first-child, .heading--2 h3:first-child, .heading--2 h4:first-child, .heading--2 h5:first-child, .heading--2 h6:first-child, .heading--2.ce_headline, h2 { font-size: 1.75rem; } } @media screen and (min-width: 75em) { .heading--2 h1:first-child, .heading--2 h2:first-child, .heading--2 h3:first-child, .heading--2 h4:first-child, .heading--2 h5:first-child, .heading--2 h6:first-child, .heading--2.ce_headline, h2 { font-size: 1.75rem; } } @media screen and (min-width: 90em) { .heading--2 h1:first-child, .heading--2 h2:first-child, .heading--2 h3:first-child, .heading--2 h4:first-child, .heading--2 h5:first-child, .heading--2 h6:first-child, .heading--2.ce_headline, h2 { font-size: 1.75rem; } } p + h2, ul + h2, ol + h2 { margin-top: 2rem; } .ce_text + .ce_text h2:first-child { margin-top: 2rem; } h2 + h3 { margin-top: -0.5rem; } .faq-page h2, .faq-list h2, .news-list .layout_simple, .heading--3 h1:first-child, .heading--3 h2:first-child, .heading--3 h3:first-child, .heading--3 h4:first-child, .heading--3 h5:first-child, .heading--3 h6:first-child, .heading--3.ce_headline, h3 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 0.5rem; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } @media screen and (min-width: 48em) { .faq-page h2, .faq-list h2, .news-list .layout_simple, .heading--3 h1:first-child, .heading--3 h2:first-child, .heading--3 h3:first-child, .heading--3 h4:first-child, .heading--3 h5:first-child, .heading--3 h6:first-child, .heading--3.ce_headline, h3 { font-size: 1.375rem; } } @media screen and (min-width: 62em) { .faq-page h2, .faq-list h2, .news-list .layout_simple, .heading--3 h1:first-child, .heading--3 h2:first-child, .heading--3 h3:first-child, .heading--3 h4:first-child, .heading--3 h5:first-child, .heading--3 h6:first-child, .heading--3.ce_headline, h3 { font-size: 1.5rem; } } @media screen and (min-width: 75em) { .faq-page h2, .faq-list h2, .news-list .layout_simple, .heading--3 h1:first-child, .heading--3 h2:first-child, .heading--3 h3:first-child, .heading--3 h4:first-child, .heading--3 h5:first-child, .heading--3 h6:first-child, .heading--3.ce_headline, h3 { font-size: 1.5rem; } } @media screen and (min-width: 90em) { .faq-page h2, .faq-list h2, .news-list .layout_simple, .heading--3 h1:first-child, .heading--3 h2:first-child, .heading--3 h3:first-child, .heading--3 h4:first-child, .heading--3 h5:first-child, .heading--3 h6:first-child, .heading--3.ce_headline, h3 { font-size: 1.5rem; } } p + h3, ul + h3, ol + h3 { margin-top: 2rem; } .ce_text + .ce_text h3:first-child { margin-top: 2rem; } h3 + h4 { margin-top: -0.5rem; } .news-grid h1, .news-grid h2, .news-grid h3, .news-grid h4, .news-grid h5, .news-grid h6, .news-list .layout_short h1, .news-list .layout_short h2, .news-list .layout_short h3, .news-list .layout_short h4, .news-list .layout_short h5, .news-list .layout_short h6, .news-list .layout_latest h1, .news-list .layout_latest h2, .news-list .layout_latest h3, .news-list .layout_latest h4, .news-list .layout_latest h5, .news-list .layout_latest h6, .nav--sub h1, .nav--sub h2, .nav--sub h3, .nav--sub h4, .nav--sub h5, .nav--sub h6, .text--alert h1, .text--alert h2, .text--alert h3, .text--alert h4, .text--alert h5, .text--alert h6, .heading--4 h1:first-child, .heading--4 h2:first-child, .heading--4 h3:first-child, .heading--4 h4:first-child, .heading--4 h5:first-child, .heading--4 h6:first-child, .heading--4.ce_headline, h4 { font-size: 1.125rem; line-height: 1; margin-bottom: 0.5rem; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } @media screen and (min-width: 48em) { .news-grid h1, .news-grid h2, .news-grid h3, .news-grid h4, .news-grid h5, .news-grid h6, .news-list .layout_short h1, .news-list .layout_short h2, .news-list .layout_short h3, .news-list .layout_short h4, .news-list .layout_short h5, .news-list .layout_short h6, .news-list .layout_latest h1, .news-list .layout_latest h2, .news-list .layout_latest h3, .news-list .layout_latest h4, .news-list .layout_latest h5, .news-list .layout_latest h6, .nav--sub h1, .nav--sub h2, .nav--sub h3, .nav--sub h4, .nav--sub h5, .nav--sub h6, .text--alert h1, .text--alert h2, .text--alert h3, .text--alert h4, .text--alert h5, .text--alert h6, .heading--4 h1:first-child, .heading--4 h2:first-child, .heading--4 h3:first-child, .heading--4 h4:first-child, .heading--4 h5:first-child, .heading--4 h6:first-child, .heading--4.ce_headline, h4 { font-size: 1.125rem; } } @media screen and (min-width: 62em) { .news-grid h1, .news-grid h2, .news-grid h3, .news-grid h4, .news-grid h5, .news-grid h6, .news-list .layout_short h1, .news-list .layout_short h2, .news-list .layout_short h3, .news-list .layout_short h4, .news-list .layout_short h5, .news-list .layout_short h6, .news-list .layout_latest h1, .news-list .layout_latest h2, .news-list .layout_latest h3, .news-list .layout_latest h4, .news-list .layout_latest h5, .news-list .layout_latest h6, .nav--sub h1, .nav--sub h2, .nav--sub h3, .nav--sub h4, .nav--sub h5, .nav--sub h6, .text--alert h1, .text--alert h2, .text--alert h3, .text--alert h4, .text--alert h5, .text--alert h6, .heading--4 h1:first-child, .heading--4 h2:first-child, .heading--4 h3:first-child, .heading--4 h4:first-child, .heading--4 h5:first-child, .heading--4 h6:first-child, .heading--4.ce_headline, h4 { font-size: 1.25rem; } } @media screen and (min-width: 75em) { .news-grid h1, .news-grid h2, .news-grid h3, .news-grid h4, .news-grid h5, .news-grid h6, .news-list .layout_short h1, .news-list .layout_short h2, .news-list .layout_short h3, .news-list .layout_short h4, .news-list .layout_short h5, .news-list .layout_short h6, .news-list .layout_latest h1, .news-list .layout_latest h2, .news-list .layout_latest h3, .news-list .layout_latest h4, .news-list .layout_latest h5, .news-list .layout_latest h6, .nav--sub h1, .nav--sub h2, .nav--sub h3, .nav--sub h4, .nav--sub h5, .nav--sub h6, .text--alert h1, .text--alert h2, .text--alert h3, .text--alert h4, .text--alert h5, .text--alert h6, .heading--4 h1:first-child, .heading--4 h2:first-child, .heading--4 h3:first-child, .heading--4 h4:first-child, .heading--4 h5:first-child, .heading--4 h6:first-child, .heading--4.ce_headline, h4 { font-size: 1.25rem; } } @media screen and (min-width: 90em) { .news-grid h1, .news-grid h2, .news-grid h3, .news-grid h4, .news-grid h5, .news-grid h6, .news-list .layout_short h1, .news-list .layout_short h2, .news-list .layout_short h3, .news-list .layout_short h4, .news-list .layout_short h5, .news-list .layout_short h6, .news-list .layout_latest h1, .news-list .layout_latest h2, .news-list .layout_latest h3, .news-list .layout_latest h4, .news-list .layout_latest h5, .news-list .layout_latest h6, .nav--sub h1, .nav--sub h2, .nav--sub h3, .nav--sub h4, .nav--sub h5, .nav--sub h6, .text--alert h1, .text--alert h2, .text--alert h3, .text--alert h4, .text--alert h5, .text--alert h6, .heading--4 h1:first-child, .heading--4 h2:first-child, .heading--4 h3:first-child, .heading--4 h4:first-child, .heading--4 h5:first-child, .heading--4 h6:first-child, .heading--4.ce_headline, h4 { font-size: 1.25rem; } } p + h4, ul + h4, ol + h4 { margin-top: 1.5rem; } .ce_text + .ce_text h4:first-child { margin-top: 1.5rem; } h4 + h5 { margin-top: -0.5rem; } .text--fact h1, .text--fact h2, .text--fact h3, .text--fact h4, .text--fact h5, .text--fact h6, .portfolio-list .portfolio__items .layout_short .inside > a, .events-calendar > h1, .events-calendar > h2, .events-calendar > h3, .events-calendar > h4, .events-calendar > h5, .events-calendar > h6, .events-menu > h1, .events-menu > h2, .events-menu > h3, .events-menu > h4, .events-menu > h5, .events-menu > h6, .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6, .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6, .heading--5 h1:first-child, .heading--5 h2:first-child, .heading--5 h3:first-child, .heading--5 h4:first-child, .heading--5 h5:first-child, .heading--5 h6:first-child, .heading--5.ce_headline, h5 { font-size: 1rem; line-height: 1; margin-bottom: 0.5rem; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } @media screen and (min-width: 48em) { .text--fact h1, .text--fact h2, .text--fact h3, .text--fact h4, .text--fact h5, .text--fact h6, .portfolio-list .portfolio__items .layout_short .inside > a, .events-calendar > h1, .events-calendar > h2, .events-calendar > h3, .events-calendar > h4, .events-calendar > h5, .events-calendar > h6, .events-menu > h1, .events-menu > h2, .events-menu > h3, .events-menu > h4, .events-menu > h5, .events-menu > h6, .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6, .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6, .heading--5 h1:first-child, .heading--5 h2:first-child, .heading--5 h3:first-child, .heading--5 h4:first-child, .heading--5 h5:first-child, .heading--5 h6:first-child, .heading--5.ce_headline, h5 { font-size: 1rem; } } @media screen and (min-width: 62em) { .text--fact h1, .text--fact h2, .text--fact h3, .text--fact h4, .text--fact h5, .text--fact h6, .portfolio-list .portfolio__items .layout_short .inside > a, .events-calendar > h1, .events-calendar > h2, .events-calendar > h3, .events-calendar > h4, .events-calendar > h5, .events-calendar > h6, .events-menu > h1, .events-menu > h2, .events-menu > h3, .events-menu > h4, .events-menu > h5, .events-menu > h6, .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6, .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6, .heading--5 h1:first-child, .heading--5 h2:first-child, .heading--5 h3:first-child, .heading--5 h4:first-child, .heading--5 h5:first-child, .heading--5 h6:first-child, .heading--5.ce_headline, h5 { font-size: 1rem; } } @media screen and (min-width: 75em) { .text--fact h1, .text--fact h2, .text--fact h3, .text--fact h4, .text--fact h5, .text--fact h6, .portfolio-list .portfolio__items .layout_short .inside > a, .events-calendar > h1, .events-calendar > h2, .events-calendar > h3, .events-calendar > h4, .events-calendar > h5, .events-calendar > h6, .events-menu > h1, .events-menu > h2, .events-menu > h3, .events-menu > h4, .events-menu > h5, .events-menu > h6, .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6, .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6, .heading--5 h1:first-child, .heading--5 h2:first-child, .heading--5 h3:first-child, .heading--5 h4:first-child, .heading--5 h5:first-child, .heading--5 h6:first-child, .heading--5.ce_headline, h5 { font-size: 1rem; } } @media screen and (min-width: 90em) { .text--fact h1, .text--fact h2, .text--fact h3, .text--fact h4, .text--fact h5, .text--fact h6, .portfolio-list .portfolio__items .layout_short .inside > a, .events-calendar > h1, .events-calendar > h2, .events-calendar > h3, .events-calendar > h4, .events-calendar > h5, .events-calendar > h6, .events-menu > h1, .events-menu > h2, .events-menu > h3, .events-menu > h4, .events-menu > h5, .events-menu > h6, .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6, .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6, .heading--5 h1:first-child, .heading--5 h2:first-child, .heading--5 h3:first-child, .heading--5 h4:first-child, .heading--5 h5:first-child, .heading--5 h6:first-child, .heading--5.ce_headline, h5 { font-size: 1rem; } } p + h5, ul + h5, ol + h5 { margin-top: 1.5rem; } .ce_text + .ce_text h5:first-child { margin-top: 1.5rem; } h5 + h6 { margin-top: -0.5rem; } .news-menu > h1, .news-menu > h2, .news-menu > h3, .news-menu > h4, .news-menu > h5, .news-menu > h6, .heading--6 h1:first-child, .heading--6 h2:first-child, .heading--6 h3:first-child, .heading--6 h4:first-child, .heading--6 h5:first-child, .heading--6 h6:first-child, .heading--6.ce_headline, h6 { font-size: 0.875rem; line-height: 1; margin-bottom: 0.5rem; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } @media screen and (min-width: 48em) { .news-menu > h1, .news-menu > h2, .news-menu > h3, .news-menu > h4, .news-menu > h5, .news-menu > h6, .heading--6 h1:first-child, .heading--6 h2:first-child, .heading--6 h3:first-child, .heading--6 h4:first-child, .heading--6 h5:first-child, .heading--6 h6:first-child, .heading--6.ce_headline, h6 { font-size: 0.875rem; } } @media screen and (min-width: 62em) { .news-menu > h1, .news-menu > h2, .news-menu > h3, .news-menu > h4, .news-menu > h5, .news-menu > h6, .heading--6 h1:first-child, .heading--6 h2:first-child, .heading--6 h3:first-child, .heading--6 h4:first-child, .heading--6 h5:first-child, .heading--6 h6:first-child, .heading--6.ce_headline, h6 { font-size: 0.875rem; } } @media screen and (min-width: 75em) { .news-menu > h1, .news-menu > h2, .news-menu > h3, .news-menu > h4, .news-menu > h5, .news-menu > h6, .heading--6 h1:first-child, .heading--6 h2:first-child, .heading--6 h3:first-child, .heading--6 h4:first-child, .heading--6 h5:first-child, .heading--6 h6:first-child, .heading--6.ce_headline, h6 { font-size: 0.875rem; } } @media screen and (min-width: 90em) { .news-menu > h1, .news-menu > h2, .news-menu > h3, .news-menu > h4, .news-menu > h5, .news-menu > h6, .heading--6 h1:first-child, .heading--6 h2:first-child, .heading--6 h3:first-child, .heading--6 h4:first-child, .heading--6 h5:first-child, .heading--6 h6:first-child, .heading--6.ce_headline, h6 { font-size: 0.875rem; } } p + h6, ul + h6, ol + h6 { margin-top: 1.5rem; } .ce_text + .ce_text h6:first-child { margin-top: 1.5rem; } p, ul, ol { margin-top: 0; } p a, ul a, ol a { text-decoration: var(--paragraph-link-decoration); } p a:hover, ul a:hover, ol a:hover { --paragraph__link-decoration: var(--paragraph-link-decoration-hover); } p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } code { color: var(--code-color); } pre { padding: 1rem; background: var(--pre-color-background); color: var(--pre-color); overflow-x: scroll; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: var(--hr-border); } .li--block { margin-bottom: 1rem; } .ce_text { margin-bottom: var(--base-spacing-unit); } ::selection { background: var(--selection-background); color: var(--selection-color); opacity: 1; } .heading--left { text-align: left; } .heading--center { text-align: center; } .heading--right { text-align: right; } .text--left { text-align: left; } .text--center { text-align: center; } .text--right { text-align: right; } .text--attention { font-size: 1.125em; line-height: 1.4; opacity: 75%; } @media screen and (min-width: 62em) { .text--attention { font-size: 1.25em; } } .text--alert { padding: var(--base-spacing-unit); border-radius: var(--base-border-radius); border: 2px solid var(--color-alert-border); color: var(--color-alert); } .text--alert h1, .text--alert h2, .text--alert h3, .text--alert h4, .text--alert h5, .text--alert h6 { margin-top: 0; } p a:hover, ul a:hover, ol a:hover { --links-color: var(--links-color-hover); } ul, ol { padding: 0; margin-top: 0; margin-left: var(--base-spacing-unit-lg); } blockquote { margin: var(--base-spacing-unit) 0; } code { background: var(--code-background); display: inline-block; padding-left: 4px; padding-right: 4px; border-radius: var(--base-border-radius); color: var(--code-color); } pre code { background: none; color: inherit; } html { --header-color-background: var(--color-page-background); --header-color-text: var(--color-text); } [id=header] { background: var(--layout-header-background); color: var(--layout-header-color); } [id=header] > .inside { max-width: 75em; width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .mod_article { max-width: 75em; width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); padding-top: var(--base-spacing-unit-lg); padding-bottom: var(--base-spacing-unit-lg); position: relative; } .article--full { max-width: none; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; } [id=footer] > .inside { max-width: 75em; width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } @media screen and (max-width: 51.9375em) { .html--fixed { overflow: hidden; position: fixed; height: 100%; width: 100%; } } [id=wrapper] { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: min-content auto min-content; } [id=wrapper] > * { min-width: 0; } [id=wrapper] { background: var(--layout-wrapper-background); margin-left: 0; margin-right: 0; } .boxed-layout [id=wrapper] { max-width: 75em; margin-left: auto; margin-right: auto; } .mod_article { max-width: none; width: 100%; margin-left: auto; margin-right: auto; padding: 0; position: relative; } .mod_article > .inside { width: min(75rem, 100% - 2rem); margin: 0 auto; padding-top: var(--article-spacing-top); padding-bottom: var(--article-spacing-bottom); } .mod_article.article--highlight > .inside, .mod_article.article--tint > .inside, .mod_article.article--dark > .inside, .mod_article.article--team > .inside { padding-top: 5rem; padding-bottom: 5rem; } .article--hero > .inside { width: 100%; max-width: none; padding: 0; } .col-right [id=container] { max-width: 75em; width: 100%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 62em) { .col-right [id=container] { display: grid; grid-template-columns: 2fr 1fr; } } .col-left [id=container] { max-width: 75em; width: 100%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 62em) { .col-left [id=container] { display: grid; grid-template-columns: 1fr 2fr; } } [id=left] { grid-column: 1; grid-row: 1; display: grid; } [id=left] > .inside { padding-left: var(--layout-wrapper-padding); padding-right: var(--layout-wrapper-padding); display: grid; padding-top: var(--article-spacing-top); padding-bottom: var(--article-spacing-bottom); } .left-col--sticky [id=left] { position: sticky; top: 0; } [id=right] { display: grid; } [id=right] > .inside { padding-left: var(--layout-wrapper-padding); padding-right: var(--layout-wrapper-padding); display: grid; padding-top: var(--article-spacing-top); padding-bottom: var(--article-spacing-bottom); } .right-col--sticky [id=right] { position: sticky; top: 0; } .mod_article > .inside { padding-left: var(--layout-wrapper-padding); padding-right: var(--layout-wrapper-padding); } [id=left] .mod_article > .inside, [id=right] .mod_article > .inside { padding: 0; } .article--hero { position: relative; z-index: 0; } .article--hero > .inside { max-width: none; width: 100%; margin-left: auto; margin-right: auto; padding: 0; } .article--highlight { background-color: var(--article-highlight-background); color: var(--article-highlight-color); } .article--highlight a { color: inherit; } .article--tint { background-color: var(--article-tint-background); } .article--dark { background: var(--article-dark-background); color: var(--article-dark-color); } @keyframes arrow-right { 0% { transform: translateX(0); } 33% { transform: translateX(5px); } 66% { transform: translateX(0); } } .ce_card .card__link a, .hyperlink--arrow { display: flex; align-items: center; } .ce_card .card__link a::after, .hyperlink--arrow::after { content: ""; -webkit-mask: url(../img/icons/arrow-right.svg) center no-repeat; mask: url(../img/icons/arrow-right.svg) center no-repeat; background-color: currentcolor; width: var(--icons-size); height: var(--icons-size); display: block; } .ce_card .card__link a:hover::after, .hyperlink--arrow:hover::after { animation: arrow-right 1s infinite; } .back a { display: flex; align-items: center; } .back a::before { content: "»"; -webkit-mask: url(../img/icons/arrow-left.svg) center no-repeat; mask: url(../img/icons/arrow-left.svg) center no-repeat; background-color: currentcolor; width: var(--icons-size); height: var(--icons-size); display: block; } html { --gallery__gutter: var(--grid-gutter); --gallery__gutter--half: calc(var(--gallery-gutter, var(--grid-gutter-half)) / 2); } .image--left img { text-align: left; margin-left: 0; } .image--right img { text-align: right; margin-right: 0; } .image--center img { text-align: center; margin-left: auto; margin-right: auto; } .ce_gallery { margin-bottom: var(--base-spacing-unit); } .ce_gallery > ul { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: var(--grid-gutter); grid-auto-columns: 1fr; } @supports not (display: grid) { .ce_gallery > ul { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } .ie .ce_gallery > ul { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } .ce_gallery > ul { grid-row-gap: var(--grid-gutter); padding: 0; margin: 0; list-style-type: none; } .ce_gallery .cols_2 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_2 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_2 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_2 li { grid-column: span 6/span 6; } @supports not (display: grid) { .ce_gallery .cols_2 li { width: 50%; } } .ie .ce_gallery .cols_2 li { width: 50%; } .ce_gallery .cols_3 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_3 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_3 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_3 li { grid-column: span 6/span 6; } @supports not (display: grid) { .ce_gallery .cols_3 li { width: 50%; } } .ie .ce_gallery .cols_3 li { width: 50%; } @media screen and (min-width: 62em) { .ce_gallery .cols_3 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_3 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_3 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_3 li { grid-column: span 4/span 4; } @supports not (display: grid) { .ce_gallery .cols_3 li { width: 33.3333333333%; } } .ie .ce_gallery .cols_3 li { width: 33.3333333333%; } } .ce_gallery .cols_4 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_4 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_4 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_4 li { grid-column: span 6/span 6; } @supports not (display: grid) { .ce_gallery .cols_4 li { width: 50%; } } .ie .ce_gallery .cols_4 li { width: 50%; } @media screen and (min-width: 62em) { .ce_gallery .cols_4 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_4 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_4 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_4 li { grid-column: span 3/span 3; } @supports not (display: grid) { .ce_gallery .cols_4 li { width: 25%; } } .ie .ce_gallery .cols_4 li { width: 25%; } } .ce_gallery .cols_5 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_5 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_5 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_5 li { grid-column: span 6/span 6; } @supports not (display: grid) { .ce_gallery .cols_5 li { width: 50%; } } .ie .ce_gallery .cols_5 li { width: 50%; } @media screen and (min-width: 62em) { .ce_gallery .cols_5 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_5 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_5 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_5 li { grid-column: span 2/span 2; } @supports not (display: grid) { .ce_gallery .cols_5 li { width: 16.6666666667%; } } .ie .ce_gallery .cols_5 li { width: 16.6666666667%; } } .ce_gallery .cols_6 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_6 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_6 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_6 li { grid-column: span 6/span 6; } @supports not (display: grid) { .ce_gallery .cols_6 li { width: 50%; } } .ie .ce_gallery .cols_6 li { width: 50%; } @media screen and (min-width: 62em) { .ce_gallery .cols_6 li { grid-column: 1/-1; } @supports not (display: grid) { .ce_gallery .cols_6 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .ce_gallery .cols_6 li { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .ce_gallery .cols_6 li { grid-column: span 2/span 2; } @supports not (display: grid) { .ce_gallery .cols_6 li { width: 16.6666666667%; } } .ie .ce_gallery .cols_6 li { width: 16.6666666667%; } } .ce_gallery img { display: block; } .ce_player .video_container, .ce_youtube .video_container { position: relative; padding-bottom: 56.25%; width: 100%; height: auto; } .ce_player video { border: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .ce_youtube iframe { border: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .content-image { margin-bottom: var(--base-spacing-unit); } .content-image a { display: grid; grid-auto-rows: auto 1fr; } .content-image img { margin-bottom: 0; justify-self: center; border: var(--media-image-border); } .content-image figcaption { width: 100%; padding: var(--media-image-caption-padding); margin-top: 0; -webkit-hyphens: auto; hyphens: auto; border: var(--media-image-border); border-top: none; } .content-text figure { margin-top: var(--base-spacing-unit); margin-bottom: var(--base-spacing-unit); } @media screen and (min-width: 48em) { .content-text.media--left, .content-text.media--right { display: flex; flex-wrap: wrap; max-width: none; } } .content-text.media--left > h1, .content-text.media--left > h2, .content-text.media--left > h3, .content-text.media--left > h4, .content-text.media--left > h5, .content-text.media--left > h6, .content-text.media--right > h1, .content-text.media--right > h2, .content-text.media--right > h3, .content-text.media--right > h4, .content-text.media--right > h5, .content-text.media--right > h6 { width: 100%; } .content-text.media--left figure, .content-text.media--right figure { position: relative; } @media screen and (min-width: 48em) { .content-text.media--left figure, .content-text.media--right figure { margin-top: 0; margin-bottom: 0; flex: 0 0 40%; } } @media screen and (min-width: 48em) { .content-text.media--left .rte, .content-text.media--right .rte { flex-basis: 60%; } } @media screen and (min-width: 48em) { .content-text.media--left figure { padding-right: var(--grid-gutter); } } @media screen and (min-width: 48em) { .content-text.media--right figure { padding-left: var(--grid-gutter); order: 1; } } .content-text figcaption { font-size: var(--base-font-size-xs); font-style: italic; } .content-text.text--float { display: block; } @media screen and (min-width: 48em) { .content-text.text--float.media--left figure, .content-text.text--float.media--right figure { width: 40%; } } @media screen and (min-width: 48em) { .content-text.text--float.media--left figure { float: left; } } @media screen and (min-width: 48em) { .content-text.text--float.media--right figure { float: right; } } .content-player, .content-youtube { margin-bottom: var(--base-spacing-unit); } html { --button-bg: var(--button-background); --button-bg-hover: var(--button-background); --button-spacing: var(--base-spacing-unit-sm) var(--base-spacing-unit); --button-border-radius: var(--base-border-radius); --button-border-width: var(--base-border-width); --button-font-family: var(--base-font-family); --button-font-weight: 400; --button-line-height: var(--base-line-height); } .ce_comments .submit, input.submit, button.submit, div.btn > a, div.btn > button, .ce_toplink > a, .ce_toplink > button, .toplink > a, .toplink > button, a.btn, .more a, span.btn, button.btn, button[type=submit] { border-radius: var(--button-border-radius); padding: var(--button-spacing); display: inline-block; border: var(--button-border-width) solid transparent; font-family: var(--button-font-family); font-weight: var(--button-font-weight); line-height: var(--button-line-height); text-align: center; background: transparent; background-image: none; white-space: nowrap; text-decoration: none; } .ce_comments .submit, input.submit, button.submit, div.btn--primary > a, div.btn--primary > button, .ce_toplink > a, .ce_toplink > button, .toplink > a, .toplink > button, a.btn--primary, span.btn--primary, button.btn--primary, button[type=submit] { background: var(--button-background); color: var(--button-color); } .ce_comments .submit:hover, input.submit:hover, button.submit:hover, div.btn--primary > a:hover, div.btn--primary > button:hover, .ce_toplink > a:hover, .ce_toplink > button:hover, .toplink > a:hover, .toplink > button:hover, a.btn--primary:hover, span.btn--primary:hover, button.btn--primary:hover, button[type=submit]:hover { background: var(--button-background-hover); } a.btn, .more a, span.btn, button.btn, button[type=submit] { margin-bottom: var(--base-spacing-unit); } div.btn:not(:last-child), .ce_toplink:not(:last-child), .toplink:not(:last-child) { margin-bottom: var(--base-spacing-unit); } div.btn--left { text-align: left; } div.btn--center { text-align: center; } div.btn--right { text-align: right; } .btn--floated { float: left; margin-right: var(--base-spacing-unit-xs); } .ce_toplink a, .toplink a { text-decoration: none; } .back { border-top: var(--base-border); margin-top: var(--base-spacing-unit); padding-top: var(--base-spacing-unit-sm); } .back a { text-decoration: none; } .newsletter-unsubscribe .submit, .newsletter-subscribe .submit, div.btn--secondary a, a.btn--secondary, span.btn--secondary, button.btn--secondary { border-radius: var(--base-border-radius-pill); color: var(--button-color-secondary); border: var(--base-border-width) solid currentcolor; background: transparent; } .newsletter-unsubscribe .submit:hover, .newsletter-subscribe .submit:hover, div.btn--secondary a:hover, a.btn--secondary:hover, span.btn--secondary:hover, button.btn--secondary:hover { color: var(--button-color-secondary-dark); border-color: var(--color-brand-lime); } .article--highlight .newsletter-unsubscribe .submit, .newsletter-unsubscribe .article--highlight .submit, .article--highlight .newsletter-subscribe .submit, .newsletter-subscribe .article--highlight .submit, .article--highlight div.btn--secondary a, div.btn--secondary .article--highlight a, .article--highlight a.btn--secondary, .article--highlight span.btn--secondary, .article--highlight button.btn--secondary { color: var(--button-color-secondary-highlight); border-color: var(--button-color-secondary-highlight); } .article--highlight .newsletter-unsubscribe .submit:hover, .newsletter-unsubscribe .article--highlight .submit:hover, .article--highlight .newsletter-subscribe .submit:hover, .newsletter-subscribe .article--highlight .submit:hover, .article--highlight div.btn--secondary a:hover, div.btn--secondary .article--highlight a:hover, .article--highlight a.btn--secondary:hover, .article--highlight span.btn--secondary:hover, .article--highlight button.btn--secondary:hover { opacity: 50%; } a.btn--primary, span.btn--primary, button.btn--primary, button[type=submit] { text-decoration: none; color: var(--button-color); } p a.btn--primary, p span.btn--primary, p button.btn--primary, p button[type=submit] { margin-bottom: 0; text-decoration: none; } .article--highlight div.btn--primary a { background: var(--button-background-highlight); color: var(--button-color-highlight); } div.btn--feedback { position: fixed; z-index: 1000; right: 0; top: 5rem; transform: rotate(-90deg) translateY(var(--base-spacing-unit-xs)); transform-origin: bottom right; transition: transform 0.1s; } div.btn--feedback:hover { transform: rotate(-90deg) translateY(0); } div.btn--feedback a { padding: var(--base-spacing-unit-xs) var(--base-spacing-unit-sm); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: var(--base-border); border-bottom: none; } .link--social { display: inline-flex; align-items: center; gap: var(--base-spacing-unit-sm); text-decoration: none; } html { --nav--main__item-padding: var(--base-spacing-unit); --nav-toggler-top-space: var(--base-spacing-unit-sm); --nav-toggler-right-space: var(--base-spacing-unit-sm); --nav-toggler-border: var(--base-border-width) solid currentColor; } .nav ul { list-style-type: none; margin: 0; padding: 0; } .nav a { text-decoration: none; } .nav--horizontal ul { display: flex; flex-direction: column; } @media screen and (min-width: 52em) { .nav--horizontal ul { flex-direction: row; } } .nav--horizontal a, .nav--horizontal strong.active, .nav--horizontal strong.trail, .nav--horizontal strong.forward { display: block; padding: calc(var(--nav-main-item-padding) / 2) var(--nav-main-item-padding); } .nav--vertical a, .nav--vertical strong.active, .nav--vertical strong.trail, .nav--vertical strong.forward { display: block; padding: calc(var(--nav-main-item-padding) / 2) var(--nav-main-item-padding); } .nav--border { border: var(--base-border); } .nav--border a, .nav--border strong.active, .nav--border strong.trail, .nav--border strong.forward { padding: var(--nav-main-item-padding) var(--nav-main-item-padding); border-bottom: 1px solid var(--base-border-color); } .nav--border a.last, .nav--border strong.active.last, .nav--border strong.trail.last, .nav--border strong.forward.last { border-bottom: 0; } .nav--breadcrumb { border: var(--base-border); padding: var(--base-spacing-unit-sm) var(--base-spacing-unit); display: flex; } @media screen and (min-width: 52em) { .nav--breadcrumb { flex-direction: column; } } @media screen and (min-width: 52em) { .nav--breadcrumb li { padding-right: var(--base-spacing-unit); } } .nav--breadcrumb a:after { font-size: 0.75rem; display: inline-block; content: "►"; vertical-align: middle; padding-left: var(--base-spacing-unit); } .nav--select select { -webkit-appearance: none; background: transparent; border: var(--base-border); padding: var(--base-spacing-unit-xs) var(--base-spacing-unit-sm); } .nav--select .submit { vertical-align: middle; padding: var(--base-spacing-unit-xs) var(--base-spacing-unit-sm); } .nav--pager ul { text-align: center; } .nav--pager li { display: inline-block; } .nav--pager .empty { width: 0; height: 0; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; } .nav--pager a { padding: var(--base-spacing-unit-sm); } .pagination ul { list-style-type: none; margin: 0; padding: 0; } .pagination a { text-decoration: none; } .pagination { display: grid; grid-column: 1/-1; margin-top: var(--base-spacing-unit); text-align: center; line-height: 1; } @supports not (display: grid) { .pagination { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: space-between; } } @media screen and (min-width: 48em) { .pagination { grid-template-columns: 1fr 1fr; } } .pagination p { padding: var(--base-spacing-unit-xs); padding-left: 0; margin: var(--base-spacing-unit-xs); margin-left: 0; border-top: var(--base-border-width) solid transparent; } .pagination li { display: inline; } .pagination a, .pagination strong { display: inline-block; padding: var(--base-spacing-unit-xs); margin: var(--base-spacing-unit-xs); } .pagination strong { border: var(--base-border); } .pagination a.next { margin-right: 0; padding-right: 0; } @media screen and (min-width: 48em) { .pagination p { justify-self: start; } .pagination p + ul { justify-self: end; } } .nav--right { margin-left: auto; } .nav--main { line-height: 1em; font-size: var(--nav-main-font-size); font-family: var(--nav-main-font); color: var(--color-text); } .nav--main a, .nav--main a.trail, .nav--main strong.active, .nav--main strong.trail { display: block; padding: var(--nav-main-item-padding); text-decoration: none; font-weight: var(--nav-main-font-weight); color: var(--nav-main-color); } @media screen and (min-width: 52em) { .nav--main a, .nav--main a.trail, .nav--main strong.active, .nav--main strong.trail { padding: var(--nav-main-item-padding); margin: var(--nav-main-item-padding); } } .nav--main a:hover { color: var(--nav-main-color-active); } .nav--main strong.active, .nav--main strong.trail, .nav--main a.trail { color: var(--nav-main-color-active); } @media screen and (min-width: 52em) { .nav--main .level_1 { display: flex; flex-wrap: wrap; } .nav--main .level_1 > li { position: relative; } .nav--main .level_1 > li:last-child .level_2 { right: 0; } .nav--main .level_1 > li:last-child .level_2::before { left: unset; right: 32px; } .nav--main .level_1 > li > a, .nav--main .level_1 > li > strong { white-space: nowrap; } } .nav--main li.submenu > a, .nav--main li.submenu > strong { display: flex; align-items: center; } .nav--main li.submenu > a::after, .nav--main li.submenu > strong::after { content: ""; -webkit-mask: url("../img/icons/arrow-down.svg") center no-repeat; mask: url("../img/icons/arrow-down.svg") center no-repeat; background-color: currentcolor; width: var(--icons-size); height: var(--icons-size); display: block; } .nav--main li.submenu > a, .nav--main li.submenu > strong { position: relative; z-index: 1004; margin-right: auto; gap: 0.25rem; } .nav--main li.submenu > a::after, .nav--main li.submenu > strong::after { margin-left: auto; transition: transform 0.3s; } .nav--main .level_2 { flex-direction: column; z-index: 1001; position: relative; min-width: 10rem; font-size: var(--base-font-size); } @media screen and (min-width: 52em) { .nav--main .level_2 { visibility: hidden; font-size: var(--base-font-size-xs); max-height: 0; opacity: 0%; position: absolute; overflow: hidden; margin: 0 var(--nav-main-item-padding); box-shadow: var(--base-box-shadow); transition: opacity 0.2s 0.3s, max-height 0s 0.6s, visibility 0s 0.6s; } .nav--main .level_2::before { transition: opacity 0.2s 0.3s; top: -16px; left: 32px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: var(--nav-submenu-background); border-width: 8px; } } .nav--main .level_2 > li { padding: 0; } @media screen and (min-width: 52em) { .nav--main .level_2 > li { background: var(--nav-submenu-background); } } .nav--main .level_2 > li:first-child { padding-top: var(--nav-main-item-padding-sm); } .nav--main .level_2 > li:last-child { padding-bottom: var(--nav-main-item-padding-sm); } @media screen and (min-width: 52em) { .nav--main .level_2 a { color: var(--nav-submenu-color); } .nav--main .level_2 a:hover, .nav--main .level_2 a.trail { color: var(--nav-main-color-active); } } .nav--main .level_2 a, .nav--main .level_2 a.trail, .nav--main .level_2 strong.active, .nav--main .level_2 strong.trail { padding: var(--nav-submenu-padding); margin: 0; } @media (hover) { .nav--main .level_1 > li.submenu:hover > a::after, .nav--main .level_1 > li.submenu:hover > strong::after, .nav--main .level_1 > li.submenu:active > a::after, .nav--main .level_1 > li.submenu:active > strong::after, .nav--main .level_1 > li.submenu:focus > a::after, .nav--main .level_1 > li.submenu:focus > strong::after, .nav--main .level_1 > li.submenu.submenu--active > a::after, .nav--main .level_1 > li.submenu.submenu--active > strong::after { transform: rotate(180deg); } } @media screen and (hover) and (min-width: 52em) { .nav--main .level_1 > li.submenu:hover > .level_2, .nav--main .level_1 > li.submenu:active > .level_2, .nav--main .level_1 > li.submenu:focus > .level_2, .nav--main .level_1 > li.submenu.submenu--active > .level_2 { overflow: visible; z-index: 1002; max-height: 9999px; opacity: 100%; transition-delay: 0s; visibility: visible; } } @media (hover) { .nav--main .level_2 > li.submenu.submenu--active > a::after, .nav--main .level_2 > li.submenu.submenu--active > strong::after { transform: rotate(180deg); } } @media screen and (hover) and (min-width: 52em) { .nav--main .level_2 > li.submenu.submenu--active > .level_3 { overflow: visible; z-index: 1002; max-height: 9999px; opacity: 100%; transition-delay: 0s; visibility: visible; } } @media (hover: none) { .nav--main li.submenu.submenu--active > a::after, .nav--main li.submenu.submenu--active > strong::after { transform: rotate(180deg); } } @media screen and (hover: none) and (min-width: 52em) { .nav--main li.submenu.submenu--active > .level_2, .nav--main li.submenu.submenu--active > .level_3 { max-height: 9999px; opacity: 100%; transition-delay: 0s; visibility: visible; } } @media screen and (min-width: 52em) { .nav--main .level_2 .submenu--active .level_3 { max-height: 9999px; opacity: 100%; transition-delay: 0s; visibility: visible; } } .nav--main .level_3 { font-size: var(--base-font-size-xs); max-height: 0; overflow: hidden; transition: max-height 0.3s; } .nav--main .level_3 a, .nav--main .level_3 strong.active, .nav--main .level_3 strong.trail { text-transform: none; margin-left: var(--base-spacing-unit-sm); } @media screen and (max-width: 51.9375em) { .nav--mobile { transition: transform 0.3s, background-color 0s, height 0s 0.3s visibility 0s 0.3s; z-index: 1004; visibility: hidden; font-size: var(--base-font-size-xl); position: fixed; top: var(--header-height); height: 0; right: 0; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: touch; -ms-overflow-style: none; transform: translate(-100%, 0); pointer-events: auto; grid-column: span 2; grid-row: 2; align-self: start; left: 0; } @-moz-document url-prefix() { .nav--mobile { left: calc(-1 * var(--layout-wrapper-padding)); } } .nav--mobile .level_1 { background: var(--nav-mobile-background); padding: 0 0 var(--base-spacing-unit-lg) 0; } .nav--mobile .level_1 > li > a, .nav--mobile .level_1 > li > strong { color: var(--nav-mobile-color); padding: var(--nav-mobile-padding); display: flex; flex-grow: 1; } .nav--mobile .level_1 > li > strong, .nav--mobile .level_1 > li > a.trail { color: var(--nav-main-color-active); } .nav--mobile li { transition: opacity 0.3s 0.3s; opacity: 0%; } } @media screen and (max-width: 51.9375em) and (min-width: 52em) { .nav--mobile li { opacity: 100%; } } @media screen and (max-width: 51.9375em) { .nav--mobile li.submenu { display: flex; flex-wrap: wrap; } .nav--mobile .level_2, .nav--mobile .level_3 { width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s; background: var(--nav-mobile-submenu-background); } .nav--mobile .level_2 > li > a, .nav--mobile .level_2 > li > strong, .nav--mobile .level_3 > li > a, .nav--mobile .level_3 > li > strong { display: flex; flex-grow: 1; padding: var(--nav-submenu-padding); } .nav--mobile .level_2 a, .nav--mobile .level_2 strong, .nav--mobile .level_3 a, .nav--mobile .level_3 strong { display: flex; color: var(--nav-mobile-color); } .nav--mobile .level_2 strong, .nav--mobile .level_2 a.trail, .nav--mobile .level_3 strong, .nav--mobile .level_3 a.trail { color: var(--nav-main-color-active); } .nav--mobile .level_2 { margin: 0 var(--layout-wrapper-padding); } .nav--mobile li.submenu--active > a::after, .nav--mobile li.submenu--active > strong::after { transform: rotate(180deg); } .nav--mobile li.submenu--active > .level_2, .nav--mobile li.submenu--active > .level_3 { max-height: 999px; } .nav--mobile .level_3 { width: 100%; } } @media screen and (max-width: 51.9375em) { .nav--mobile--active { height: calc(100dvh - var(--header-height)); transform: translate(0, 0); background: rgba(0, 0, 0, 0.3); visibility: visible; transition: transform 0.3s, background-color 0.3s 0.3s, height 0s, visibility 0s; } .nav--mobile--active li { opacity: 100%; } } .nav-toggler { justify-self: end; z-index: 1004; pointer-events: auto; } @media screen and (min-width: 52em) { .nav-toggler { display: none; } } .nav-toggler__button { background: none; border: var(--base-border); outline: none; display: inline-block; white-space: nowrap; margin: 0; cursor: pointer; color: currentcolor; padding: calc(var(--base-spacing-unit-xs) / 2) var(--base-spacing-unit-xs); line-height: 1.5; } .nav-toggler__button:focus-visible { outline: var(--links-outline-focus); } .nav-toggler__button .menu-icon { position: relative; width: var(--nav-icon-width); height: 1.5rem; display: inline-block; vertical-align: middle; } .nav-toggler__button .menu-icon__inner { width: 100%; background-color: currentcolor; position: absolute; left: 0; top: 40%; margin-top: calc(var(--nav-icon-stroke) / -2); height: var(--nav-icon-stroke); transition: transform 0.15s ease; } .nav-toggler__button .menu-icon__inner::after, .nav-toggler__button .menu-icon__inner::before { background-color: currentcolor; position: absolute; display: block; content: ""; width: 100%; height: var(--nav-icon-stroke); transition: transform 0.15s ease, opacity 0.15s; } .nav-toggler__button .menu-icon__inner::before { top: -6px; } .nav-toggler__button .menu-icon__inner::after { bottom: -6px; } .nav-toggler__button .menu-label { display: inline-block; margin-left: var(--base-spacing-unit-xs); font-size: var(--base-font-size-xl); } .nav-toggler--active .nav-toggler__button .menu-icon__inner { transform: rotate(45deg); } .nav-toggler--active .nav-toggler__button .menu-icon__inner::before { opacity: 0%; } .nav-toggler--active .nav-toggler__button .menu-icon__inner::after { transform: rotate(-90deg); bottom: 0; } .nav--sub { margin-top: var(--base-spacing-unit); margin-bottom: var(--base-spacing-unit); font-size: var(--base-font-size-xs); } .nav--sub:last-child { margin-bottom: 0; } .nav--sub .level_1 { border: var(--base-border); padding: var(--base-spacing-unit-sm) 0; } .nav--sub a, .nav--sub strong { display: block; font-weight: normal; color: inherit; border-left: 4px solid transparent; padding: var(--base-spacing-unit-xs) var(--base-spacing-unit-sm); } .nav--sub a.active, .nav--sub strong.active { border-color: var(--links-color); color: var(--links-color); } .nav--sub a.trail, .nav--sub strong.trail { color: var(--links-color); border-color: var(--links-color); } .nav--sub a:hover, .nav--sub strong:hover { border-color: var(--links-color-hover); color: var(--links-color-hover); } .nav--sub .level_2 a, .nav--sub .level_2 strong { padding-left: var(--base-spacing-unit); } .nav--sub .level_2 strong { border-color: transparent; } .nav--meta { font-family: var(--nav-meta-font-family); font-size: var(--nav-meta-font-size); font-weight: var(--nav-meta-font-weight); } .nav--meta ul { display: flex; } .nav--meta li { display: inline-block; } .nav--meta a, .nav--meta strong.active, .nav--meta strong.trail { padding: 0 var(--base-spacing-unit-sm); margin: var(--base-spacing-unit-xs) 0; text-decoration: none; color: var(--nav-meta-color); font-weight: normal; } @media screen and (max-width: 51.9375em) { .nav--meta a, .nav--meta strong.active, .nav--meta strong.trail { padding-left: 0; } } .nav--meta a:focus-visible, .nav--meta strong.active:focus-visible, .nav--meta strong.trail:focus-visible { outline-color: var(--nav-meta-color); } .nav--meta strong.active { opacity: 70%; } .nav--meta + .nav--meta { justify-self: end; } html { --arrow-color: inherit; --arrow-size: 2rem; --arrow-font-family: 'Arial'; --menu-point-size: 2rem; --menu-point-color: inherit; --menu-point-color--active: var(--color-brand); } .slider { position: relative; } .slider .slider-control { position: static; height: 0; } .slider .slider-control a { position: relative; top: 50%; transform: translateY(-50%); font-size: var(--arrow-size); line-height: 1; position: absolute; display: block; color: var(--arrow-color); font-family: var(--arrow-font-family); } .slider .slider-control a:before { padding: var(--base-spacing-unit-sm); display: block; } .slider .slider-control a:hover { opacity: 0.5; } .slider .slider-prev:before { content: "◄"; } .slider .slider-next:before { content: "►"; } .slider .slider-menu { font-size: var(--nav-main-font-size); line-height: 1; top: auto; bottom: 0; } .slider .slider-menu b { color: var(--nav-main-color); } .slider .slider-menu b.active { color: var(--nav-main-color-active); } .slider .slider-menu b:hover { opacity: 0.5; } .content-swiper { margin-bottom: var(--base-spacing-unit); } .content-swiper img { border: none; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } html { --news-border: var(--base-border); } .news-list { margin-bottom: var(--base-spacing-unit); } .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6 { margin-bottom: 0; } .news-list .info { margin-bottom: 0; } .news-list .float_left { margin-right: var(--base-spacing-unit); } .news-list .float_right { margin-left: var(--base-spacing-unit); } .news-list .layout_short > h1, .news-list .layout_short > h2, .news-list .layout_short > h3, .news-list .layout_short > h4, .news-list .layout_short > h5, .news-list .layout_short > h6, .news-list .layout_latest > h1, .news-list .layout_latest > h2, .news-list .layout_latest > h3, .news-list .layout_latest > h4, .news-list .layout_latest > h5, .news-list .layout_latest > h6, .news-list .layout_simple > h1, .news-list .layout_simple > h2, .news-list .layout_simple > h3, .news-list .layout_simple > h4, .news-list .layout_simple > h5, .news-list .layout_simple > h6 { margin-top: var(--base-spacing-unit); } .news-list .layout_simple time, .news-list .layout_simple a, .news-list .layout_upcoming time, .news-list .layout_upcoming a { padding-top: var(--base-spacing-unit); display: inline-block; } .news-list .header { margin-top: var(--base-spacing-unit); } .news-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: var(--grid-gutter); grid-auto-columns: 1fr; } @supports not (display: grid) { .news-grid { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } .ie .news-grid { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } .news-grid { margin-bottom: var(--base-spacing-unit); } .news-grid > h1, .news-grid > h2, .news-grid > h3, .news-grid > h4, .news-grid > h5, .news-grid > h6 { grid-column: 1/-1; } @supports not (display: grid) { .news-grid > h1, .news-grid > h2, .news-grid > h3, .news-grid > h4, .news-grid > h5, .news-grid > h6 { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-grid > h1, .ie .news-grid > h2, .ie .news-grid > h3, .ie .news-grid > h4, .ie .news-grid > h5, .ie .news-grid > h6 { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-grid > h1, .news-grid > h2, .news-grid > h3, .news-grid > h4, .news-grid > h5, .news-grid > h6 { grid-column: span 12/span 12; } @supports not (display: grid) { .news-grid > h1, .news-grid > h2, .news-grid > h3, .news-grid > h4, .news-grid > h5, .news-grid > h6 { width: 100%; } } .ie .news-grid > h1, .ie .news-grid > h2, .ie .news-grid > h3, .ie .news-grid > h4, .ie .news-grid > h5, .ie .news-grid > h6 { width: 100%; } .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { grid-column: 1/-1; } @supports not (display: grid) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-grid .layout_short, .ie .news-grid .layout_latest, .ie .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } @media screen and (min-width: 48em) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { grid-column: 1/-1; } @supports not (display: grid) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-grid .layout_short, .ie .news-grid .layout_latest, .ie .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { grid-column: span 6/span 6; } @supports not (display: grid) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { width: 50%; } } .ie .news-grid .layout_short, .ie .news-grid .layout_latest, .ie .news-grid .layout_simple { width: 50%; } } @media screen and (min-width: 62em) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { grid-column: 1/-1; } @supports not (display: grid) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-grid .layout_short, .ie .news-grid .layout_latest, .ie .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { grid-column: span 6/span 6; } @supports not (display: grid) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { width: 50%; } } .ie .news-grid .layout_short, .ie .news-grid .layout_latest, .ie .news-grid .layout_simple { width: 50%; } } @media screen and (min-width: 75em) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { grid-column: 1/-1; } @supports not (display: grid) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-grid .layout_short, .ie .news-grid .layout_latest, .ie .news-grid .layout_simple { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { grid-column: span 4/span 4; } @supports not (display: grid) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { width: 33.3333333333%; } } .ie .news-grid .layout_short, .ie .news-grid .layout_latest, .ie .news-grid .layout_simple { width: 33.3333333333%; } } .news-grid .layout_simple time { display: block; } .news-menu ul { list-style-type: none; margin: 0; padding: 0; } .news-menu a { text-decoration: none; } .news-menu .year { margin-bottom: var(--base-spacing-unit-sm); } .news-menu .year > a, .news-menu .year > .active { color: inherit; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } .news-menu .level_2 li { margin-bottom: var(--base-spacing-unit-xs); } .news-list { display: grid; grid-row-gap: var(--grid-gutter); margin-bottom: var(--grid-gutter); } .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6 { margin-bottom: var(--base-spacing-unit-sm); } .news-list .layout_short, .news-list .layout_latest, .news-list .layout_simple { position: relative; transition: box-shadow 0.3s; } .news-list .layout_short .image_container, .news-list .layout_latest .image_container, .news-list .layout_simple .image_container { position: relative; overflow: hidden; } .news-list .layout_short .image_container::after, .news-list .layout_latest .image_container::after, .news-list .layout_simple .image_container::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--news-list-overlay-background); opacity: 0%; transition: opacity 0.3s; pointer-events: none; } .news-list .layout_short img, .news-list .layout_latest img, .news-list .layout_simple img { transition: transform 0.3s; } .news-list .layout_short:hover, .news-list .layout_latest:hover, .news-list .layout_simple:hover { box-shadow: var(--base-box-shadow); } .news-list .layout_short:hover img, .news-list .layout_latest:hover img, .news-list .layout_simple:hover img { transform: scale(1.05); } .news-list .layout_short:hover .image_container::after, .news-list .layout_latest:hover .image_container::after, .news-list .layout_simple:hover .image_container::after { opacity: 100%; } .news-list .layout_latest { display: grid; border: var(--base-border); } @media screen and (min-width: 62em) { .news-list .layout_latest { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: var(--grid-gutter); grid-auto-columns: 1fr; } @supports not (display: grid) { .news-list .layout_latest { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } .ie .news-list .layout_latest { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } @media screen and (min-width: 62em) { .news-list .layout_latest .image_container { grid-column: 1/-1; } @supports not (display: grid) { .news-list .layout_latest .image_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-list .layout_latest .image_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-list .layout_latest .image_container { grid-column: span 7/span 7; } @supports not (display: grid) { .news-list .layout_latest .image_container { width: 58.3333333333%; } } .ie .news-list .layout_latest .image_container { width: 58.3333333333%; } } @media screen and (min-width: 75em) { .news-list .layout_latest .image_container { grid-column: 1/-1; } @supports not (display: grid) { .news-list .layout_latest .image_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-list .layout_latest .image_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-list .layout_latest .image_container { grid-column: span 8/span 8; } @supports not (display: grid) { .news-list .layout_latest .image_container { width: 66.6666666667%; } } .ie .news-list .layout_latest .image_container { width: 66.6666666667%; } } .news-list .layout_latest .image_container img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .news-list .layout_latest .content_container { padding: var(--base-spacing-unit); display: flex; flex-direction: column; } @media screen and (min-width: 62em) { .news-list .layout_latest .content_container { grid-column: 1/-1; } @supports not (display: grid) { .news-list .layout_latest .content_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-list .layout_latest .content_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-list .layout_latest .content_container { grid-column: span 5/span 5; } @supports not (display: grid) { .news-list .layout_latest .content_container { width: 41.6666666667%; } } .ie .news-list .layout_latest .content_container { width: 41.6666666667%; } .news-list .layout_latest .content_container { padding: var(--base-spacing-unit) var(--base-spacing-unit-lg) var(--base-spacing-unit) 0; } } @media screen and (min-width: 75em) { .news-list .layout_latest .content_container { grid-column: 1/-1; } @supports not (display: grid) { .news-list .layout_latest .content_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-list .layout_latest .content_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-list .layout_latest .content_container { grid-column: span 4/span 4; } @supports not (display: grid) { .news-list .layout_latest .content_container { width: 33.3333333333%; } } .ie .news-list .layout_latest .content_container { width: 33.3333333333%; } } .news-list .layout_latest h1, .news-list .layout_latest h2, .news-list .layout_latest h3, .news-list .layout_latest h4, .news-list .layout_latest h5, .news-list .layout_latest h6 { margin-top: 0; } .news-list .layout_latest h1 a, .news-list .layout_latest h2 a, .news-list .layout_latest h3 a, .news-list .layout_latest h4 a, .news-list .layout_latest h5 a, .news-list .layout_latest h6 a { color: inherit; } .news-list .layout_latest .ce_text { font-size: var(--base-font-size-xs); margin-bottom: var(--base-spacing-unit); } .news-list .layout_latest .more { font-size: var(--base-font-size-xs); margin-bottom: 0; margin-top: auto; } .news-list .layout_latest .more a { text-decoration: none; white-space: nowrap; } .news-list .layout_latest .more a::after { content: ""; position: absolute; inset: 0; } .news-list .layout_latest .info { color: var(--color-gray); margin-bottom: 0; font-size: var(--base-font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-list .layout_short { border: var(--base-border); padding: var(--base-spacing-unit); } .news-list .layout_short .info { color: var(--color-gray); margin-bottom: 0; font-size: var(--base-font-size-xs); } .news-list .layout_short h1, .news-list .layout_short h2, .news-list .layout_short h3, .news-list .layout_short h4, .news-list .layout_short h5, .news-list .layout_short h6 { margin-top: 0; } .news-list .layout_short h1 a, .news-list .layout_short h2 a, .news-list .layout_short h3 a, .news-list .layout_short h4 a, .news-list .layout_short h5 a, .news-list .layout_short h6 a { color: inherit; } .news-list .layout_short .more { font-size: var(--base-font-size-xs); margin-bottom: 0; } .news-list .layout_short .more a { text-decoration: none; white-space: nowrap; } .news-list .layout_simple { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: var(--grid-gutter); grid-auto-columns: 1fr; } @supports not (display: grid) { .news-list .layout_simple { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } .ie .news-list .layout_simple { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } .news-list .layout_simple { position: relative; font-family: var(--base-font-family); align-items: center; } .news-list .layout_simple .image_container { grid-column: 1/-1; } @supports not (display: grid) { .news-list .layout_simple .image_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-list .layout_simple .image_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-list .layout_simple .image_container { grid-column: span 2/span 2; } @supports not (display: grid) { .news-list .layout_simple .image_container { width: 16.6666666667%; } } .ie .news-list .layout_simple .image_container { width: 16.6666666667%; } .news-list .layout_simple .image_container a { padding: 0; display: block; } .news-list .layout_simple .content_container { grid-column: 1/-1; } @supports not (display: grid) { .news-list .layout_simple .content_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .news-list .layout_simple .content_container { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .news-list .layout_simple .content_container { grid-column: span 10/span 10; } @supports not (display: grid) { .news-list .layout_simple .content_container { width: 83.3333333333%; } } .ie .news-list .layout_simple .content_container { width: 83.3333333333%; } .news-list .layout_simple .content_container a { padding: 0; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: inherit; } .news-list .image_container { grid-column: 1; } .news-list .image_container img { margin-left: 0; } .news-grid { grid-row-gap: var(--grid-gutter); } .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { position: relative; display: grid; grid-template-rows: min-content 1fr; border: var(--base-border); transition: box-shadow 0.3s; } .news-grid .layout_short:hover, .news-grid .layout_latest:hover, .news-grid .layout_simple:hover { box-shadow: var(--base-box-shadow); } .news-grid .layout_short:hover .image_container::after, .news-grid .layout_latest:hover .image_container::after, .news-grid .layout_simple:hover .image_container::after { opacity: 100%; } .news-grid .layout_short:hover img, .news-grid .layout_latest:hover img, .news-grid .layout_simple:hover img { transform: scale(1.05); } .news-grid .image_container { overflow: hidden; position: relative; } .news-grid .image_container:has(a) { overflow: unset; } .news-grid .image_container a { display: block; overflow: hidden; } .news-grid .image_container img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; transform: translate3d(0, 0, 0); transition: transform 0.3s; } .news-grid .image_container::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--news-grid-overlay-background); opacity: 0%; transition: opacity 0.3s; pointer-events: none; } .news-grid .content_container { padding: var(--base-spacing-unit) 0; display: grid; grid-template-rows: auto 1fr auto auto; grid-template-columns: 2; padding: var(--base-spacing-unit); } .news-grid .content_container a { display: block; } .news-grid .content_container:first-child { grid-row: span 2; } @media screen and (min-width: 62em) { .news-grid .content_container { padding: var(--base-spacing-unit) var(--base-spacing-unit-lg); } } .news-grid h1, .news-grid h2, .news-grid h3, .news-grid h4, .news-grid h5, .news-grid h6 { grid-column: span 2; margin-top: 0; } .news-grid h1 a, .news-grid h2 a, .news-grid h3 a, .news-grid h4 a, .news-grid h5 a, .news-grid h6 a { color: inherit; } .news-grid .info { justify-self: end; grid-row: 3; grid-column: 2; color: var(--color-gray); margin-bottom: 0; font-size: var(--base-font-size-xs); white-space: nowrap; } .news-grid .ce_text { font-size: var(--base-font-size-xs); margin-bottom: var(--base-spacing-unit); grid-column: span 2; } .news-grid .more { grid-column: 1; font-size: var(--base-font-size-xs); } .news-grid .more a { --paragraph-link-decoration: none; } .news-grid .more a::after { content: ""; position: absolute; inset: 0; } .news-grid .layout_simple .content_container { --color-background: var(--news-grid-simple-background); background: var(--color-background); transition: background-color 0.3s; } .news-grid .layout_simple .content_container a { --links-color: var(--news-grid-simple-color); --links-color-hover: var(--news-grid-simple-color); } .news-grid .layout_simple .content_container a::after { content: ""; position: absolute; inset: 0; } .news-grid .layout_simple:hover .content_container { --color-background: var(--news-grid-simple-background-hover); } .news-full { display: flex; flex-direction: column; } .news-full .layout_full h1 { position: relative; z-index: 1000; margin-bottom: var(--base-spacing-unit-lg); text-wrap: balance; } .news-full .layout_full .info { max-width: 56.25em; max-width: calc(56.25em - var(--grid-gutter)); margin-left: auto; margin-right: auto; margin-left: 0; margin-right: auto; border-top: var(--base-border); padding-top: var(--base-spacing-unit); border-bottom: var(--base-border); padding-bottom: var(--base-spacing-unit); display: flex; gap: var(--base-spacing-unit-xs); color: var(--color-gray); } .news-full .layout_full .info time { display: block; } .news-full .layout_full [class*=content-] { grid-column: 2/span 3; } .news-full .ce_comments { margin-top: var(--base-spacing-unit-xl); } .news-full .back { order: -1; font-family: var(--base-font-family); font-size: var(--base-font-size-xs); border-top: none; margin: 0 0 var(--base-spacing-unit); padding: 0; } .news-full .back a { color: var(--color-text-light); } .news-full .back a:hover { color: var(--links-color-hover); } .news-full--hero { display: grid; grid-template-columns: calc(5% - var(--grid-gutter)) repeat(12, 1fr) calc(5% - var(--grid-gutter)); grid-column-gap: var(--grid-gutter); } .news-full--hero .layout_full { grid-column: span 14; display: grid; grid-column-gap: var(--grid-gutter); grid-template-areas: "... hl hl hl hl hl hl hl hl hl hl ... ... ..." "img img img img img img img img img img img img img img" ".. ce ce ce ce ce ce ce ce ce ce ce ce .."; grid-template-columns: calc(5% - var(--grid-gutter)) repeat(12, 1fr) calc(5% - var(--grid-gutter)); grid-template: auto 1fr; } @media screen and (min-width: 62em) { .news-full--hero .layout_full { grid-template-areas: "... hl hl hl hl hl hl hl hl hl hl ... ... ..." "img img img img img img img img img img img img img img" "... ... ... ce ce ce ce ce ce ce ce ... ... ..."; } } .news-full--hero .layout_full [class*=ce_] { grid-column: ce/span 12; } @media screen and (min-width: 62em) { .news-full--hero .layout_full [class*=ce_] { grid-column: ce/span 8; } } .news-full--hero .layout_full h1 { grid-column: hl/span 12; grid-row: hl; position: relative; z-index: 1000; text-align: left; align-self: center; margin-top: var(--base-spacing-unit); margin-bottom: var(--base-spacing-unit); } @media screen and (min-width: 62em) { .news-full--hero .layout_full h1 { grid-column: hl/span 10; } } @media screen and (min-width: 75em) { .news-full--hero .layout_full h1 { margin-top: var(--base-spacing-unit-lg); margin-bottom: var(--base-spacing-unit-lg); } } @media screen and (min-width: 90em) { .news-full--hero .layout_full h1 { grid-column: hl/span 9; margin-top: var(--base-spacing-unit-xl); margin-bottom: var(--base-spacing-unit-xl); } } .news-full--hero .layout_full .content-image:first-of-type { grid-column: img/span 14; margin-bottom: var(--grid-gutter); } .news-full--hero .layout_full .content-image:first-of-type img { border: none; } .news-full--hero .back { font-family: var(--base-font-family); grid-column: 2/span 12; } @media screen and (min-width: 62em) { .news-full--hero .back { grid-column: 4/span 8; } } .news-menu > h1, .news-menu > h2, .news-menu > h3, .news-menu > h4, .news-menu > h5, .news-menu > h6 { padding-bottom: var(--base-spacing-unit-sm); margin-bottom: var(--base-spacing-unit-sm); border-bottom: var(--base-border); } .news-menu a, .news-menu .active { text-decoration: none; color: inherit; font-family: var(--headings-font-family); } .news-menu .level_2 a, .news-menu .level_2 span.active { vertical-align: middle; text-decoration: none; } .news-menu .level_2 a::before, .news-menu .level_2 span.active::before { content: "»"; margin-right: calc(var(--base-spacing-unit-xs) / 2); } .news-menu .year > a, .news-menu .year > .active { font-weight: var(--headings-font-weight); } .news--icon .image_container::after { display: none; } .news--icon .image_container img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 50%; } html { --event-border: var(--base-border); } .events-list { margin-bottom: var(--base-spacing-unit); } .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6 { margin-bottom: 0; } .events-list .image_container { margin-top: var(--base-spacing-unit); margin-bottom: var(--base-spacing-unit); } .events-list .float_left { margin-right: var(--base-spacing-unit); } .events-list .float_right { margin-left: var(--base-spacing-unit); } .events-list .event > h1, .events-list .event > h2, .events-list .event > h3, .events-list .event > h4, .events-list .event > h5, .events-list .event > h6 { margin-top: var(--base-spacing-unit); } .events-list .layout_upcoming time, .events-list .layout_upcoming a { padding-top: var(--base-spacing-unit); display: inline-block; } .events-list .header { margin-top: var(--base-spacing-unit); } .events-menu ul { list-style-type: none; margin: 0; padding: 0; } .events-menu a { text-decoration: none; } .events-menu .year { margin-bottom: var(--base-spacing-unit-sm); } .events-menu .year > a, .events-menu .year > .active { color: inherit; font-weight: var(--headings-font-weight); font-family: var(--headings-font-family); } .events-menu .level_2 li { margin-bottom: var(--base-spacing-unit-xs); } .events-list { display: grid; grid-column-gap: var(--grid-gutter); } @media screen and (min-width: 48em) { .events-list { grid-template-columns: repeat(12, 1fr); } } .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6 { padding-bottom: var(--base-spacing-unit-sm); } @media screen and (min-width: 48em) { .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6 { grid-column: 3/10 span; } } @media screen and (min-width: 62em) { .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6 { grid-column: 3/10 span; } } @media screen and (min-width: 75em) { .events-list > h1, .events-list > h2, .events-list > h3, .events-list > h4, .events-list > h5, .events-list > h6 { grid-column: 3/8 span; } } .events-list .header { margin-top: var(--grid-gutter); font-size: var(--base-font-size-xs); place-self: start start; } @media screen and (min-width: 48em) { .events-list .header { grid-column: 1/2 span; } .events-list .header .day, .events-list .header .date { display: block; white-space: nowrap; } @supports not (display: grid) { .events-list .header .day, .events-list .header .date { display: inline-block; } } } .events-list .layout_list, .events-list .layout_teaser { padding-top: var(--grid-gutter); border-top: var(--base-border); padding-bottom: var(--grid-gutter); } .events-list .layout_list:last-child, .events-list .layout_teaser:last-child { padding-bottom: var(--grid-gutter); border-bottom: var(--base-border); } @media screen and (min-width: 48em) { .events-list .layout_list, .events-list .layout_teaser { grid-column: 3/10 span; } } @media screen and (min-width: 62em) { .events-list .layout_list, .events-list .layout_teaser { grid-column: 3/10 span; } } @media screen and (min-width: 75em) { .events-list .layout_list, .events-list .layout_teaser { grid-column: 3/8 span; } } .events-list .layout_list h1, .events-list .layout_list h2, .events-list .layout_list h3, .events-list .layout_list h4, .events-list .layout_list h5, .events-list .layout_list h6, .events-list .layout_teaser h1, .events-list .layout_teaser h2, .events-list .layout_teaser h3, .events-list .layout_teaser h4, .events-list .layout_teaser h5, .events-list .layout_teaser h6 { margin-top: 0; } .events-list .layout_list h1 a, .events-list .layout_list h2 a, .events-list .layout_list h3 a, .events-list .layout_list h4 a, .events-list .layout_list h5 a, .events-list .layout_list h6 a, .events-list .layout_teaser h1 a, .events-list .layout_teaser h2 a, .events-list .layout_teaser h3 a, .events-list .layout_teaser h4 a, .events-list .layout_teaser h5 a, .events-list .layout_teaser h6 a { color: inherit; } .events-list .layout_list .time, .events-list .layout_teaser .time { line-height: 1.25; margin-bottom: var(--base-spacing-unit-sm); } .events-list .layout_upcoming { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: var(--grid-gutter); grid-auto-columns: 1fr; } @supports not (display: grid) { .events-list .layout_upcoming { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } .ie .events-list .layout_upcoming { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } .events-list .layout_upcoming { grid-column: 1/-1; border-bottom: var(--base-border); padding-bottom: var(--base-spacing-unit); } .events-list .layout_upcoming:first-child { border-top: var(--base-border); } .events-list .layout_upcoming time { grid-column: 1/-1; } @supports not (display: grid) { .events-list .layout_upcoming time { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .events-list .layout_upcoming time { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .events-list .layout_upcoming time { grid-column: span 3/span 3; } @supports not (display: grid) { .events-list .layout_upcoming time { width: 25%; } } .ie .events-list .layout_upcoming time { width: 25%; } @media screen and (min-width: 48em) { .events-list .layout_upcoming time { grid-column: 1/-1; } @supports not (display: grid) { .events-list .layout_upcoming time { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .events-list .layout_upcoming time { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .events-list .layout_upcoming time { grid-column: span 2/span 2; } @supports not (display: grid) { .events-list .layout_upcoming time { width: 16.6666666667%; } } .ie .events-list .layout_upcoming time { width: 16.6666666667%; } } .events-list .layout_upcoming a { grid-column: 1/-1; } @supports not (display: grid) { .events-list .layout_upcoming a { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .events-list .layout_upcoming a { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .events-list .layout_upcoming a { grid-column: span 9/span 9; } @supports not (display: grid) { .events-list .layout_upcoming a { width: 75%; } } .ie .events-list .layout_upcoming a { width: 75%; } @media screen and (min-width: 48em) { .events-list .layout_upcoming a { grid-column: 1/-1; } @supports not (display: grid) { .events-list .layout_upcoming a { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .events-list .layout_upcoming a { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .events-list .layout_upcoming a { grid-column: span 10/span 10; } @supports not (display: grid) { .events-list .layout_upcoming a { width: 83.3333333333%; } } .ie .events-list .layout_upcoming a { width: 83.3333333333%; } } .events-list .layout_upcoming a { align-self: center; } .events-list .ce_text:last-child { margin-bottom: 0; } .events-list .more a { --paragraph-link-decoration: none; } .events-list .empty { margin-top: var(--base-spacing-unit-sm); margin-bottom: var(--base-spacing-unit-sm); } .events-reader .info { font-weight: 700; margin-bottom: var(--base-spacing-unit-sm); } .events-reader .ce_text:first-of-type { font-size: var(--base-font-size-lg); line-height: 1.6; } .events-menu > h1, .events-menu > h2, .events-menu > h3, .events-menu > h4, .events-menu > h5, .events-menu > h6 { border-bottom: var(--base-border); padding-bottom: var(--base-spacing-unit-sm); } .events-menu a, .events-menu .active { text-decoration: none; color: inherit; font-family: var(--headings-font-family); } .events-menu .level_2 a, .events-menu .level_2 span.active { vertical-align: middle; text-decoration: none; } .events-menu .level_2 a::before, .events-menu .level_2 span.active::before { content: "»"; margin-right: calc(var(--base-spacing-unit-xs) / 2); } .events-menu .year > a, .events-menu .year > .active { font-weight: var(--headings-font-weight); } .events-calendar { font-size: var(--base-font-size-xs); } @media screen and (max-width: 47.9375em) { .events-calendar { overflow-x: scroll; -webkit-overflow-scrolling: touch; touch-action: auto; -ms-overflow-style: none; } } .events-calendar > h1, .events-calendar > h2, .events-calendar > h3, .events-calendar > h4, .events-calendar > h5, .events-calendar > h6 { padding-bottom: var(--base-spacing-unit-sm); margin-bottom: 0; } .events-calendar th, .events-calendar td { padding: calc(var(--base-spacing-unit-xs) / 2); text-align: center; } .events-calendar .days { width: 14.2857142857%; } html { --input-border-width: var(--base-border-width); --input-border-radius: var(--base-border-radius); --input-border-color: rgba(0,0,0,0.25); } .ce_form { overflow: visible; } fieldset { padding: 0; margin: 0; border: 0; min-width: 0; } label { display: inline-block; max-width: 100%; margin-bottom: var(--base-spacing-unit-xs); } input.text, input.captcha, textarea { display: block; width: 100%; padding: calc(var(--base-spacing-unit) / 2) var(--base-spacing-unit); border-radius: var(--input-border-radius); border: var(--input-border-width) solid var(--input-border-color); background-clip: padding-box; background-image: none; } textarea.textarea { height: auto; } .widget-text, .widget-textarea, .widget-password { margin-bottom: var(--base-spacing-unit); } input[type=search] { -webkit-appearance: none; } input[type=file] { display: block; vertical-align: middle; line-height: 1; } input.radio, input.checkbox { margin-left: 1px; margin-right: var(--base-spacing-unit-xs); line-height: var(--base-line-height); vertical-align: middle; } input.radio + label, input.checkbox + label { margin-right: var(--base-spacing-unit-xs); margin-bottom: 0; font-weight: normal; } select.select { margin-left: var(--base-spacing-unit-xs); } .widget-radio, .widget-checkbox, .widget-select, .widget-upload { margin-bottom: var(--base-spacing-unit); } .widget-radio legend, .widget-checkbox legend, .widget-select legend, .widget-upload legend { font-weight: 700; } .radio_container > span, .checkbox_container > span { display: inline-flex; align-items: center; } span.mandatory { color: var(--color-brand); } p.error { margin-bottom: 0; } .ce_form { border: var(--base-border); border-radius: var(--base-border-radius); padding: var(--forms-padding); max-width: 42rem; } .ce_form .row { row-gap: var(--base-spacing-unit-lg); margin-bottom: var(--base-spacing-unit-lg); } .ce_form .row .widget { margin-bottom: 0; } .widget { margin-bottom: var(--base-spacing-unit-lg); } .widget:last-child { margin-bottom: 0; } .widget-radio .radio_container > span { position: relative; } .widget-radio input[type=radio] { position: absolute; top: var(--base-spacing-unit-sm); left: var(--base-spacing-unit-xs); opacity: 0%; } .widget-radio input[type=radio]:focus { outline: none; } .widget-radio label { position: relative; display: inline-block; margin-right: 0; padding-left: calc((var(--forms-radio-size)) + var(--base-spacing-unit-sm)); cursor: pointer; } .widget-radio label::before { content: ""; position: absolute; left: 0; top: var(--forms-radio-offset-top); display: block; width: calc(var(--forms-radio-size)); height: calc(var(--forms-radio-size)); background-color: var(--forms-radio-background); border: var(--forms-radio-border-width) solid var(--forms-radio-border-color); cursor: pointer; transition: background-color 0.3s; border-radius: var(--forms-radio-border-radius); } .widget-radio label::after { content: ""; position: absolute; left: var(--forms-radio-border-width); top: calc(var(--forms-radio-offset-top) + var(--forms-radio-border-width)); display: block; height: calc(var(--forms-radio-size) - var(--forms-radio-border-width) * 2); width: calc(var(--forms-radio-size) - var(--forms-radio-border-width) * 2); border-radius: var(--forms-radio-border-radius); background-color: var(--forms-radio-icon-active); box-sizing: border-box; border: var(--forms-radio-icon-border) solid var(--forms-radio-background-active); opacity: 0%; transition: opacity 0.3s; } .widget-radio input:focus-visible + label::before { outline: var(--links-outline-focus); } .widget-radio input:checked + label::before { background-color: var(--forms-radio-background-active); border-color: color-mix(in srgb, var(--forms-success-color), #000 30%); } .widget-radio input:checked + label::after { opacity: 100%; } .widget-checkbox { --forms-input-size: var(--forms-checkbox-size); } .widget-checkbox .checkbox_container > span { position: relative; } .widget-checkbox input[type=checkbox] { position: absolute; top: var(--base-spacing-unit-sm); left: var(--base-spacing-unit-xs); opacity: 0%; } .widget-checkbox input[type=checkbox]:focus { outline: none; } .widget-checkbox label { position: relative; display: inline-block; margin-right: 0; padding-left: calc((var(--forms-checkbox-size)) + var(--base-spacing-unit-sm)); cursor: pointer; } .widget-checkbox label::before { content: ""; position: absolute; left: 0; top: var(--forms-checkbox-offset-top); display: block; width: calc(var(--forms-checkbox-size)); height: calc(var(--forms-checkbox-size)); background-color: var(--forms-checkbox-background); border: var(--forms-checkbox-border-width) solid var(--forms-checkbox-border-color); cursor: pointer; transition: background-color 0.3s; border-radius: var(--forms-checkbox-border-radius); } .widget-checkbox label::after { content: ""; position: absolute; left: var(--forms-checkbox-border-width); top: calc(var(--forms-checkbox-offset-top) + var(--forms-checkbox-border-width)); display: block; height: calc(var(--forms-checkbox-size) - var(--forms-checkbox-border-width) * 2); aspect-ratio: 1/1; background-color: var(--forms-checkbox-icon-active); box-sizing: border-box; -webkit-mask: var(--forms-checkbox-icon-path) center/contain no-repeat; mask: var(--forms-checkbox-icon-path) center/contain no-repeat; opacity: 0%; transition: opacity 0.3s; } .widget-checkbox input:focus-visible + label::before { outline: var(--links-outline-focus); } .widget-checkbox input:checked + label::before { background-color: var(--forms-checkbox-background-active); border-color: color-mix(in srgb, var(--forms-success-color), #000 30%); } .widget-checkbox input:checked + label::after { opacity: 100%; } .widget--label-inline { border: var(--forms-input-border); border-radius: var(--forms-input-border-radius); position: relative; } .widget--label-inline label { position: absolute; pointer-events: none; left: 0; right: 0; margin-bottom: 0; color: var(--forms-label-color); padding: var(--forms-input-padding); font-size: var(--forms-label-font-size); line-height: var(--forms-input-line-height); transition: padding 0.3s, font-size 0.3s; } .widget--label-inline:has(input:not(:-moz-placeholder-shown)) label, .widget--label-inline:has(textarea:not(:-moz-placeholder-shown)) label { padding-top: calc(var(--forms-input-padding-block) / 3); padding-bottom: calc(var(--forms-input-padding-block) / 3 * 5); font-size: var(--forms-label-font-size-sm); color: var(--forms-label-success-color); } .widget--label-inline:has(:focus) label, .widget--label-inline:has(option:checked:not([value=""])) label, .widget--label-inline:has(input:not(:placeholder-shown)) label, .widget--label-inline:has(textarea:not(:placeholder-shown)) label { padding-top: calc(var(--forms-input-padding-block) / 3); padding-bottom: calc(var(--forms-input-padding-block) / 3 * 5); font-size: var(--forms-label-font-size-sm); color: var(--forms-label-success-color); } .widget--label-inline ::-moz-placeholder { visibility: hidden; color: transparent; } .widget--label-inline ::placeholder { visibility: hidden; color: transparent; } .widget--label-inline input, .widget--label-inline textarea, .widget--label-inline select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; padding-top: calc(var(--forms-input-padding-block) / 3 * 5); padding-bottom: calc(var(--forms-input-padding-block) / 3); line-height: var(--forms-input-line-height); background-color: transparent; } .widget--label-inline input:focus, .widget--label-inline textarea:focus, .widget--label-inline select:focus { outline: solid 1px var(--forms-success-color); } .widget--label-inline input:user-invalid, .widget--label-inline input.error, .widget--label-inline textarea:user-invalid, .widget--label-inline textarea.error, .widget--label-inline select:user-invalid, .widget--label-inline select.error { outline: solid 1px var(--forms-error-color); } .widget--label-inline.widget-select::after { content: "▾"; position: absolute; right: 0; top: 0; padding: var(--forms-input-padding); line-height: var(--forms-input-line-height); } .widget--label-inline p.error { position: absolute; transform: translateY(-100%); background-color: var(--forms-error-color); padding: 0 var(--base-spacing-unit-sm); color: var(--color-text-inverted); } .widget-checkbox--switch { --forms-input-size: var(--forms-switch-height); } .widget-checkbox--switch .checkbox_container > span { position: relative; margin-bottom: var(--base-spacing-unit-sm); } .widget-checkbox--switch input[type=checkbox] { position: absolute; top: var(--base-spacing-unit-sm); left: var(--base-spacing-unit-sm); } .widget-checkbox--switch input[type=checkbox]:focus { outline: none; } .widget-checkbox--switch label { position: relative; display: inline-block; margin-right: 0; padding-left: calc((var(--forms-switch-width)) + var(--base-spacing-unit-sm)); cursor: pointer; } .widget-checkbox--switch label::before { content: ""; position: absolute; left: 0; top: var(--forms-switch-offset-top); display: block; width: calc(var(--forms-switch-width)); height: calc(var(--forms-switch-height)); background-color: var(--forms-switch-background); border: var(--forms-switch-border-width) solid var(--forms-switch-border-color); border-radius: 1.25rem; cursor: pointer; transition: background-color 0.3s; } .widget-checkbox--switch label::after { content: ""; position: absolute; left: var(--forms-switch-border-width); top: calc(var(--forms-switch-offset-top) + var(--forms-switch-border-width)); display: block; height: calc(var(--forms-switch-height) - var(--forms-switch-border-width) * 2); aspect-ratio: 1/1; background-color: var(--forms-switch-toggler-background); -webkit-mask: unset; mask: unset; border-radius: 50%; opacity: 100%; box-sizing: border-box; transition: transform 0.3s; } .widget-checkbox--switch input:focus-visible + label::before { outline: var(--links-outline-focus); } .widget-checkbox--switch input:checked + label::before { background-color: var(--forms-success-color); border-color: color-mix(in srgb, var(--forms-success-color), #000 30%); } .widget-checkbox--switch input:checked + label::after { transform: translateX(calc(var(--forms-switch-width) - var(--forms-switch-height))); } :not(.widget) > fieldset { margin-bottom: var(--base-spacing-unit-lg); } :not(.widget) > fieldset legend { font-weight: 700; } :not(.widget) > fieldset:has(.mandatory) legend::after { content: "*"; color: var(--mandatory-color); margin-left: var(--base-spacing-unit-xs); } :not(.widget) > fieldset .widget:last-child { margin-bottom: 0; } .widget-radio--list .radio_container > span { display: flex; } .widget-checkbox--list .checkbox_container > span { display: flex; } html { --accordion-padding: var(--base-spacing-unit-sm); --accordion-background: var(--color-gray-light); --toggler-font-size: 1.5rem; --toggler-background: var(--color-highlight); --toggler-color: var(--color-text-inverted); --toggler-color-hover: var(--color-brand-primary); --toggler-spacing: var(--base-spacing-unit-xs); --toggler-border: 2px solid transparent; } .ce_accordion { margin-bottom: var(--accordion-toggler-spacing); } .ce_accordion .toggler { font-size: var(--accordion-toggler-font-size); cursor: pointer; background: var(--accordion-toggler-background); color: var(--accordion-toggler-color); padding: var(--accordion-padding); border: var(--accordion-toggler-border); } .ce_accordion .toggler:hover { color: var(--accordion-toggler-color-hover); } .ce_accordion .toggler:focus { outline: 0; } .ce_accordion .accordion { padding: var(--accordion-padding); background: var(--accordion-background); overflow: hidden; } .content-accordion { margin-top: var(--base-spacing-unit); margin-bottom: var(--base-spacing-unit); border-bottom: var(--accordion-toggler-border); } .content-accordion .handorgel__header .handorgel__header__button { border-width: 1px 0 0; } .content-accordion .handorgel__header .handorgel__header__button:focus-within { outline: var(--links-outline-focus); } .content-accordion .handorgel__header .handorgel__header__button::after { content: "+"; font-weight: normal; margin-left: auto; margin-right: 0; transition: transform 0.3s; transform: rotate(0) scale(var(--accordion-toggler-icon-size)); } .content-accordion .handorgel__header--open .handorgel__header__button::after { transform: rotate(45deg) scale(var(--accordion-toggler-icon-size)); } .content-accordion .handorgel__content { border-top: none; } .content-accordion .handorgel__content .content-text:last-child { margin-bottom: 0; } html { --download-link-color: inherit; --download-link-decoration: none; } .ce_download, .ce_downloads { margin-bottom: 1rem; } .ce_download .mime_icon, .ce_downloads .mime_icon { display: inline-block; vertical-align: middle; } .ce_download a, .ce_downloads a { display: inline-block; color: var(--download-link-color); text-decoration: var(--download-link-decoration); } .ce_downloads ul { list-style-type: none; margin: 0; padding: 0; } .ce_downloads a { text-decoration: none; } html { --table-border-width: 1px; --table-border-style: solid; --table-border-color: #ccc; --table-background-light: #eee; } table { margin-bottom: var(--base-spacing-unit); width: 100%; padding: 0; border-spacing: 0; border-left: var(--table-border-width) var(--table-border-style) var(--table-border-color); border-top: var(--table-border-width) var(--table-border-style) var(--table-border-color); } table th, table td { border-right: var(--table-border-width) var(--table-border-style) var(--table-border-color); border-bottom: var(--table-border-width) var(--table-border-style) var(--table-border-color); padding: 10px; } thead { text-align: left; background: var(--table-background-light); } tfoot { font-style: italic; } .table--striped .even { background: var(--table-background-light); } .table--overflow { overflow-x: scroll; -ms-overflow-x: auto; } html { --newsletter-list-border: var(--base-border); --newsletter-reader-width: 600px; --newsletter-reader-border: var(--base-border); } .newsletter-subscribe, .newsletter-unsubscribe { margin-bottom: var(--base-spacing-unit); } .newsletter-subscribe .formbody, .newsletter-unsubscribe .formbody { display: flex; flex-flow: row wrap; } .newsletter-subscribe .text, .newsletter-subscribe .widget-text, .newsletter-unsubscribe .text, .newsletter-unsubscribe .widget-text { margin-bottom: 0; display: inline-block; flex: 1; } .newsletter-subscribe .error, .newsletter-unsubscribe .error { margin-bottom: 0; flex: 1 100%; font-weight: 700; } .newsletter-subscribe .submit, .newsletter-unsubscribe .submit { margin-left: var(--base-spacing-unit-xs); } .newsletter-list ul { list-style-type: none; margin: 0; padding: 0; } .newsletter-list a { text-decoration: none; } .newsletter-list li { border-bottom: var(--newsletter-list-border); padding-top: var(--base-spacing-unit); padding-bottom: var(--base-spacing-unit); display: block; } .newsletter-list li:first-of-type { border-top: var(--newsletter-list-border); } @media screen and (min-width: 48em) { .newsletter-list li { font-size: var(--h4-font-size); line-height: var(--h4-line-height); } } @media screen and (min-width: 62em) { .newsletter-list li { font-size: var(--h3-font-size); line-height: var(--h3-line-height); } } .newsletter-list li a:hover { opacity: 0.5; } .newsletter-reader { max-width: var(--newsletter-reader-width); margin-left: auto; margin-right: auto; border: var(--newsletter-reader-border); padding: 0 var(--base-spacing-unit); } .newsletter-subscribe { margin-bottom: 0; } .newsletter-subscribe .widget-text, .newsletter-subscribe .widget-submit { margin-bottom: var(--base-spacing-unit); align-items: center; display: flex; } .newsletter-subscribe .submit { margin-left: var(--base-spacing-unit-sm); } .newsletter-unsubscribe .widget-text, .newsletter-unsubscribe .widget-submit { margin-bottom: var(--base-spacing-unit); } .newsletter-unsubscribe .submit { margin-left: var(--base-spacing-unit-sm); } .newsletter-list li { font-family: var(--newsletter-list-font-family); font-weight: var(--newsletter-list-font-weight); display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .newsletter-reader { padding-top: var(--base-spacing-unit); padding-bottom: var(--base-spacing-unit-sm); } html { --faq-border: var(--base-border); } .faq-list ul { list-style-type: none; margin: 0; padding: 0; } .faq-list a { text-decoration: none; } .faq-list > ul { margin-top: 2rem; } .faq-list li { margin-bottom: var(--base-spacing-unit-sm); } .faq-list li a { display: inline-block; } .faq-list > h1, .faq-list > h2, .faq-list > h3, .faq-list > h4, .faq-list > h5, .faq-list > h6 { margin-bottom: 0; } .faq-list > h1:after, .faq-list > h2:after, .faq-list > h3:after, .faq-list > h4:after, .faq-list > h5:after, .faq-list > h6:after { border-top: var(--faq-border); content: ""; display: block; } .faq-list article > h1, .faq-list article > h2, .faq-list article > h3, .faq-list article > h4, .faq-list article > h5, .faq-list article > h6 { margin-bottom: 0; } .faq-list article > h1:after, .faq-list article > h2:after, .faq-list article > h3:after, .faq-list article > h4:after, .faq-list article > h5:after, .faq-list article > h6:after { border-top: var(--faq-border); content: ""; display: block; } .faq-page > h1, .faq-page > h2, .faq-page > h3, .faq-page > h4, .faq-page > h5, .faq-page > h6 { margin-bottom: 0; } .faq-page > h1:after, .faq-page > h2:after, .faq-page > h3:after, .faq-page > h4:after, .faq-page > h5:after, .faq-page > h6:after { border-top: var(--faq-border); content: ""; display: block; } .faq-page article > h1, .faq-page article > h2, .faq-page article > h3, .faq-page article > h4, .faq-page article > h5, .faq-page article > h6 { margin-bottom: 0; } .faq-page article > h1:after, .faq-page article > h2:after, .faq-page article > h3:after, .faq-page article > h4:after, .faq-page article > h5:after, .faq-page article > h6:after { border-top: var(--faq-border); content: ""; display: block; } .faq-page .info { font-size: 0.875rem; margin-top: var(--base-spacing-unit); opacity: 0.5; } .faq-page section { padding: var(--base-spacing-unit) 0; border-bottom: var(--faq-border); } .faq-page section.last { margin-bottom: var(--base-spacing-unit); } .faq-reader .info { font-size: 0.875rem; margin-top: var(--base-spacing-unit); opacity: 0.5; } .faq-list h2 { margin-bottom: calc(var(--h3-spacing-bottom) / 2); padding-bottom: calc(var(--h3-spacing-bottom) / 2); border-bottom: var(--base-border); } .faq-list h2::after { display: none; } .faq-list ul { margin-top: var(--base-spacing-unit); } .faq-list li { display: flex; align-items: center; } .faq-list li::before { content: ""; -webkit-mask: url(../img/icons/arrow-right.svg) center/contain no-repeat; mask: url(../img/icons/arrow-right.svg) center/contain no-repeat; background-color: currentcolor; width: var(--icons-size); height: var(--icons-size); display: block; margin-right: var(--icons-spacing); } .faq-list li { color: var(--links-color); } .faq-list li a { color: var(--color-text); } .faq-page .toplink { margin-top: var(--base-spacing-unit); } html { --color-error: rgba(255, 0, 0, 1); --color-error-light: rgba(255, 0, 0, 0.5); } .ce_comments { overflow: visible; } .ce_comments .widget { margin-bottom: var(--base-spacing-unit); } .ce_comments p.error { margin-bottom: 0; color: var(--forms-error-color); } .ce_comments .error { border-color: var(--forms-error-color-light, rgba(255, 0, 0, 0.1)); } .comment_default { padding: var(--base-spacing-unit); margin-bottom: var(--base-spacing-unit); border: var(--base-border); } .comment_default .info { padding-bottom: var(--base-spacing-unit); border-bottom: var(--base-border); } .comment_default.last { margin-bottom: var(--base-spacing-unit-lg); } .ce_comments { margin-bottom: var(--base-spacing-unit); } .ce_comments .form { border: var(--base-border); padding: var(--base-spacing-unit); background: var(--comments-form-background); } @media screen and (min-width: 62em) { .ce_comments .form { padding: var(--base-spacing-unit-lg); } } @media screen and (min-width: 62em) { .ce_comments .formbody { max-width: 50em; max-width: calc(50em - var(--grid-gutter)); margin-left: auto; margin-right: auto; } } .ce_comments .widget-submit { margin-bottom: 0; } .comment_default .info { padding-bottom: var(--base-spacing-unit-sm); margin-bottom: var(--base-spacing-unit-sm); } .comment_default .reply { margin-top: var(--base-spacing-unit); } @media screen and (min-width: 48em) { .comment_default .reply { padding: var(--base-spacing-unit); background-color: var(--comments-reply-background); border-radius: var(--base-border-radius); } } .comment_default .reply .info { font-style: italic; } @media screen and (min-width: 90em) { .comment_default + h2 { margin-top: var(--base-spacing-unit-xl); } } html { --search-color-relevance: var(--color-gray); --search-color-url: var(--color-gray); } .search .formbody { display: flex; flex-flow: row wrap; } .search .text, .search .widget-text { margin-bottom: var(--base-spacing-unit-sm); display: inline-block; flex: 1; } .search .widget-text label { width: 0; height: 0; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; } .search .submit, .search .submit_container, .search .widget-submit { margin-bottom: var(--base-spacing-unit-sm); margin-left: var(--base-spacing-unit-xs); align-self: flex-end; } .search .submit_container .submit, .search .widget-submit .submit { margin-left: 0; } .search .relevance { color: var(--search-color-relevance); } .search .context { margin-bottom: var(--base-spacing-unit-xs); } .search .highlight { font-weight: bold; } .search .url { color: var(--search-color-url); } .search .even, .search .odd { padding-bottom: var(--search-spacing); margin-bottom: var(--search-spacing); border-bottom: var(--search-border); } .search .first { border-top: var(--search-border); padding-top: var(--search-spacing); } .logo { pointer-events: auto; margin-right: auto; } .logo a { display: block; } .logo img { width: var(--logo-width); } .ce_hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; width: 100%; background: var(--color-brand-ink); } .ce_hero .hero__background { position: absolute; inset: 0; margin: 0; } .ce_hero .hero__background img, .ce_hero .hero__background video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.7); } .ce_hero .hero__background::after { content: ""; position: absolute; inset: 0; background: var(--hero-background-default); } .ce_hero .hero__content { position: relative; z-index: 1; width: min(75rem, 100% - 2rem); margin: 0 auto; padding: 6rem 0 5rem; } .ce_hero .hero__text { max-width: 42rem; color: var(--hero-color); } .ce_hero .hero__tags { margin-bottom: 1.2rem; } .ce_hero .hero__tags ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .ce_hero .hero__tags li { padding: 0.3rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; font-size: 0.8rem; font-weight: 700; color: var(--hero-color); } .ce_hero .hero__eyebrow { display: inline-block; margin-bottom: 1.2rem; font-size: 0.77rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .ce_hero .hero__headline { margin: 0; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.08; letter-spacing: -0.06em; font-weight: 700; color: var(--hero-color); } .ce_hero .hero__description { margin-top: 1.5rem; max-width: 32rem; font-size: 1.1rem; line-height: 1.75; color: rgba(255, 255, 255, 0.88); } .ce_hero .hero__description p { margin: 0; } .ce_hero .hero__links { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; } .ce_hero .hero__links a { text-decoration: none; } .ce_hero .hero__image { margin: 0 0 1.5rem; } .ce_hero .hero__image img { border-radius: var(--base-border-radius-lg); } @media screen and (max-width: 51.9375em) { .ce_hero { min-height: 540px; } .ce_hero .hero__links { flex-direction: column; align-items: stretch; } .ce_hero .hero__links .btn, .ce_hero .hero__links .more a, .more .ce_hero .hero__links a, .ce_hero .hero__links input[type=submit], .ce_hero .hero__links button[type=submit] { width: 100%; } } .ce_hero mark, .hero__headline mark { background: transparent; color: var(--color-brand-lime); } .ce_hero.hero--text-right .hero__content { display: flex; justify-content: flex-end; } .ce_hero.hero--text-right .hero__text { text-align: right; } .ce_hero.hero--text-right .hero__links { justify-content: flex-end; } .ce_hero.hero--text-center .hero__text { margin-inline: auto; text-align: center; } .ce_hero.hero--text-center .hero__description { margin-inline: auto; } .ce_hero.hero--text-center .hero__links { justify-content: center; } .ce_hero.hero--text-top { align-items: flex-start; } .ce_hero.hero--text-bottom { align-items: flex-end; } .ce_hero.hero--text-large .hero__headline { font-size: clamp(3.2rem, 7vw, 6rem); } .ce_hero.hero--text-inverted { --hero-color: var(--color-text); } .ce_hero.hero--text-inverted .hero__background::after { background: var(--hero-background-light); } .ce_hero.hero--text-inverted .hero__eyebrow, .ce_hero.hero--text-inverted .hero__description { color: var(--color-muted); } .ce_hero.hero--text-boxed .hero__text { background: var(--hero-background-dark); padding: var(--base-spacing-unit-lg); border-radius: var(--base-border-radius-lg); } .ce_hero.hero--background-dark .hero__background::after { background: var(--hero-background-dark); } .ce_hero.hero--background-light .hero__background::after { background: var(--hero-background-light); } .ce_hero.hero--background-primary .hero__background::after { background: var(--hero-background-primary); } .ce_hero.hero--background-secondary .hero__background::after { background: var(--hero-background-secondary); } .ce_hero.hero--sm { min-height: 440px; } .ce_hero.hero--sm .hero__content { padding: 4rem 0 3.5rem; } .ce_hero.hero--md { min-height: 520px; } .kdp-hero { position: relative; width: 100%; min-height: 620px; overflow: hidden; display: flex; align-items: center; background: var(--color-brand-ink); } @media screen and (max-width: 51.9375em) { .kdp-hero { min-height: 540px; } } .kdp-hero__track { position: relative; display: grid; width: 100%; } .kdp-hero__slide { position: relative; grid-area: 1/1; margin: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; } .kdp-hero__slide.is-active, .kdp-hero:not(.kdp-hero--ready) .kdp-hero__slide:first-child { opacity: 1; visibility: visible; } .kdp-hero__background { position: absolute; inset: 0; margin: 0; } .kdp-hero__background img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.7); } .kdp-hero__background::after { content: ""; position: absolute; inset: 0; background: var(--hero-background-default); } .kdp-hero__text { position: relative; z-index: 1; width: min(75rem, 100% - 2rem); margin: 0 auto; padding: 6rem 0 5rem; pointer-events: none; } .kdp-hero__text > * { pointer-events: auto; } .kdp-hero__text .hero__eyebrow { display: block; width: fit-content; max-width: 42rem; margin: 0 0 1.2rem; font-size: 0.77rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .kdp-hero__text h1, .kdp-hero__text h2 { margin: 0; max-width: 42rem; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.1; letter-spacing: -0.05em; font-weight: 700; color: var(--hero-color); } .kdp-hero__text mark { background: transparent; color: var(--color-brand-lime); } .kdp-hero__description { margin-top: 1.4rem; max-width: 32rem; font-size: 1.08rem; line-height: 1.75; color: rgba(255, 255, 255, 0.88); } .kdp-hero__description p { margin: 0; } .kdp-hero__links { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; } .kdp-hero__links a { text-decoration: none; } .kdp-hero__controls { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.4rem; display: flex; align-items: center; justify-content: center; gap: 1.4rem; } .kdp-hero__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(53, 76, 110, 0.45); color: var(--color-white); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .kdp-hero__arrow svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .kdp-hero__arrow:hover, .kdp-hero__arrow:focus-visible { background: var(--color-brand-lime); border-color: var(--color-brand-lime); color: var(--color-brand-ink); } .kdp-hero__arrow:focus-visible { outline: 2px dotted var(--color-white); outline-offset: 2px; } .kdp-hero__dots { display: flex; align-items: center; gap: 0.6rem; } .kdp-hero__dot { width: 0.7rem; height: 0.7rem; padding: 0; border: none; border-radius: var(--base-border-radius-pill); background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background 0.2s ease, width 0.2s ease; } .kdp-hero__dot.is-active { width: 1.6rem; background: var(--color-brand-lime); } .kdp-hero__dot:focus-visible { outline: 2px dotted var(--color-white); outline-offset: 2px; } @media screen and (max-width: 51.9375em) { .kdp-hero .kdp-hero__text { padding: 4.5rem 0 5.5rem; } .kdp-hero .kdp-hero__text h1, .kdp-hero .kdp-hero__text h2 { font-size: clamp(2.1rem, 7vw, 2.8rem); } .kdp-hero .kdp-hero__text .hero__links .btn, .kdp-hero .kdp-hero__text .hero__links .more a, .more .kdp-hero .kdp-hero__text .hero__links a, .kdp-hero .kdp-hero__text .hero__links input[type=submit], .kdp-hero .kdp-hero__text .hero__links button[type=submit] { width: 100%; } } @media (prefers-reduced-motion: reduce) { .kdp-hero__slide { transition: none; } } [id=header] { position: sticky; top: 0; z-index: 40; background: var(--layout-header-background); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } [id=header]::before { display: none; } [id=header] > .inside { display: block; padding: 0; } .mod_navigation__inner { width: min(75rem, 100% - 2rem); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 90px; } @media screen and (max-width: 51.9375em) { .mod_navigation__inner { flex-wrap: nowrap; padding-top: 0.75rem; padding-bottom: 0.75rem; min-height: 0; } } .mod_navigation__brand { display: inline-flex; align-items: center; gap: 0.9rem; min-width: 0; text-decoration: none; } .mod_navigation__brand:hover { text-decoration: none; } .mod_navigation__toggle, .mod_navigation__scrim { display: none; } .mod_navigation__panel { display: contents; } .mod_navigation__contact, .mod_navigation__panel-cta { display: none; } .module-onepage-navigation { margin-left: auto; } .module-onepage-navigation .level_1 { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .module-onepage-navigation li { list-style: none; } .module-onepage-navigation a { display: block; padding: 0.85rem 0.5rem; color: var(--nav-main-color); font-size: var(--nav-main-font-size); font-weight: var(--nav-main-font-weight); text-decoration: none; white-space: nowrap; } .module-onepage-navigation a:hover, .module-onepage-navigation a[aria-current=location] { color: var(--nav-main-color-active); } .mod_navigation__logo { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-brand-lime); color: var(--color-brand-ink); font-size: 1.4rem; font-weight: 800; flex-shrink: 0; } .mod_navigation__logo img { border-radius: 50%; } .mod_navigation__title { display: block; font-weight: 800; letter-spacing: -0.04em; color: var(--color-brand-ink); } .mod_navigation__subtitle { display: block; margin-top: 0.15rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(53, 76, 110, 0.8); } .nav--main { margin-left: auto; } @media screen and (max-width: 51.9375em) { .nav--main { width: 100%; min-width: 0; margin-left: 0; } } .nav--main .mod_navigation__list { display: flex; align-items: center; gap: 0.75rem; list-style: none; padding: 0; margin: 0; } .nav--main .mod_navigation__list a, .nav--main .mod_navigation__list strong { white-space: nowrap; } @media screen and (max-width: 51.9375em) { .nav--main .mod_navigation__list { flex-wrap: wrap; gap: 0.35rem 1rem; padding-bottom: 0.5rem; } } @media screen and (max-width: 47.9375em) { .nav--main .mod_navigation__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0.25rem 0.75rem; padding-bottom: 0; } .nav--main .mod_navigation__list a, .nav--main .mod_navigation__list strong { padding: 0.65rem 0.5rem; } } .nav--main a, .nav--main strong { font-size: var(--nav-main-font-size); font-weight: var(--nav-main-font-weight); color: var(--nav-main-color); text-decoration: none; transition: color 0.15s ease; } .nav--main a:hover, .nav--main strong:hover { color: var(--nav-main-color-active); } .nav--main strong.active, .nav--main strong.trail, .nav--main a.trail { color: var(--nav-main-color-active); } .nav--main strong.active { text-decoration: underline; text-decoration-color: var(--color-brand-lime); text-decoration-thickness: 3px; text-underline-offset: 6px; } @media screen and (min-width: 52em) { .nav--main .level_1 > li { position: relative; } .nav--main .level_1 > li:hover > ul, .nav--main .level_1 > li:focus-within > ul { display: block; } .nav--main .level_2 { position: absolute; top: 100%; left: 0; z-index: 30; display: none; min-width: 15rem; list-style: none; margin: 0; padding: var(--nav-submenu-padding); background: var(--nav-submenu-background); border: 1px solid var(--color-border); border-radius: var(--base-border-radius); box-shadow: var(--base-box-shadow); } .nav--main .level_2 a, .nav--main .level_2 strong { display: block; padding: 0.45rem 0.75rem; font-weight: 500; white-space: nowrap; } } .mod_navigation__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.35rem; border-radius: var(--base-border-radius-pill); background: var(--color-brand-lime); color: var(--color-brand-ink); font-size: 0.85rem; font-weight: 800; text-decoration: none; box-shadow: 0 8px 20px rgba(174, 200, 58, 0.25); transition: background-color 0.2s ease; } .mod_navigation__cta:hover { background: var(--color-brand-lime-dark); text-decoration: none; } @media screen and (max-width: 51.9375em) { .mod_navigation__cta { display: none; } } @media screen and (max-width: 51.9375em) { .mod_navigation__inner { gap: 0.75rem; } .mod_navigation__brand { flex: 1 1 auto; gap: 0.7rem; } .module-onepage-navigation { width: 100%; min-width: 0; margin-left: 0; } .module-onepage-navigation .level_1 { flex-wrap: wrap; gap: 0.35rem 1rem; } .module-onepage-navigation a { padding: 0.65rem 0.5rem; white-space: normal; } .mod_navigation__logo { width: 44px; height: 44px; } .mod_navigation__title { max-width: 12rem; font-size: 0.96rem; line-height: 1.2; } .mod_navigation__subtitle { display: none; } .mod_navigation__toggle { position: relative; z-index: 42; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--base-border-radius); background: var(--color-white); color: var(--color-brand-ink); cursor: pointer; } .mod_navigation__toggle svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .mod_navigation__toggle:focus-visible { outline: var(--links-outline-focus); outline-offset: 3px; } .mod_navigation__close-icon { display: none; } .mod_navigation__panel { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 1.5rem; width: min(23rem, 100vw - 2.5rem); padding: calc(var(--mobile-header-height, 5rem) + 1.25rem) 1.25rem 1.5rem; overflow-x: hidden; overflow-y: auto; background: var(--color-white); box-shadow: var(--base-box-shadow); transform: translateX(102%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; } .mod_navigation__panel .module-onepage-navigation { width: 100%; margin: 0; } .mod_navigation__panel .module-onepage-navigation .level_1 { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; } .mod_navigation__panel .module-onepage-navigation .level_1 > li { border-bottom: 1px solid var(--color-border); } .mod_navigation__panel .module-onepage-navigation .level_1 a, .mod_navigation__panel .module-onepage-navigation .level_1 strong { display: flex; align-items: center; min-height: 3rem; padding: 0.75rem 0.15rem; white-space: normal; } .mod_navigation__contact { display: grid; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--color-border); } .mod_navigation__contact > a { display: grid; gap: 0.15rem; color: var(--color-brand-ink); text-decoration: none; } .mod_navigation__contact > a span { color: var(--color-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; } .mod_navigation__contact > a strong { overflow-wrap: anywhere; font-size: 0.98rem; } .mod_navigation__contact-title { margin: 0; color: var(--color-brand-ink); font-weight: 800; } .mod_navigation__panel-cta { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1rem; border-radius: var(--base-border-radius); background: var(--color-brand-lime); color: var(--color-brand-ink); font-weight: 800; text-decoration: none; } .mod_navigation__scrim { position: fixed; z-index: 40; inset: 0; display: none; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(18, 29, 43, 0.48); } body.mobile-menu-open { overflow: hidden; } body.mobile-menu-open #header { backdrop-filter: none; } body.mobile-menu-open .mod_navigation__toggle { position: fixed; top: var(--mobile-menu-toggle-top, 0.75rem); right: var(--mobile-menu-toggle-right, 1rem); } body.mobile-menu-open .mod_navigation__panel { transform: translateX(0); visibility: visible; } body.mobile-menu-open .mod_navigation__scrim { display: block; } body.mobile-menu-open .mod_navigation__menu-icon { display: none; } body.mobile-menu-open .mod_navigation__close-icon { display: block; } } @media screen and (max-width: 51.9375em) and (prefers-reduced-motion: reduce) { .mod_navigation__panel { transition: none; } } .btn, .more a, input[type=submit], button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 3.25rem; padding: var(--button-spacing); border: 1px solid transparent; border-radius: var(--base-border-radius-pill); font-family: var(--base-font-family); font-size: 0.95rem; font-weight: var(--button-font-weight); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .btn:hover, .more a:hover, input[type=submit]:hover, button[type=submit]:hover { text-decoration: none; } .btn:focus-visible, .more a:focus-visible, input[type=submit]:focus-visible, button[type=submit]:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; } .btn--primary, input[type=submit], button[type=submit] { background: var(--button-background); color: var(--button-color); box-shadow: var(--box-shadow-lime); } .btn--primary:hover, input[type=submit]:hover, button[type=submit]:hover { background: var(--button-background-hover); color: var(--button-color-hover); } .btn--secondary { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: var(--color-white); } .btn--secondary:hover { border-color: var(--color-brand-lime); color: var(--color-brand-lime); } .btn--ghost, .more a { background: transparent; border-color: var(--base-border-color); color: var(--color-brand-ink); } .btn--ghost:hover, .more a:hover { border-color: var(--color-brand-ink); } .btn--secondary--light { border-color: var(--color-brand-ink); color: var(--color-brand-ink); } .btn--secondary--light:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); } input[type=submit], button[type=submit] { border: 0; } .icon-inline { width: 1.2em; height: 1.2em; stroke: currentcolor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon-inline--lg { width: 1.45rem; height: 1.45rem; } .icon-inline--sm { width: 1.05rem; height: 1.05rem; } .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(174, 200, 58, 0.16); color: var(--color-brand-accent); font-size: 1.1rem; flex-shrink: 0; } .icon-badge--square { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--color-brand-ink); color: var(--color-white); } .section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-top: 1rem; } @media screen and (max-width: 51.9375em) { .section-header { display: block; } } .section-header__main { min-width: 0; } .section-header__eyebrow { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand-accent); } .section-header h2 { margin-top: 0.7rem; margin-bottom: 0; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -0.05em; font-weight: 700; color: var(--color-brand-ink); } @media screen and (max-width: 47.9375em) { .section-header h2 { font-size: 1.65rem; } } .section-header__note { max-width: 20rem; margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--color-muted); } .ce_feature_strip { width: 100%; padding: 1.4rem 0; } .feature-strip__inner { width: min(75rem, 100% - 2rem); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } @media screen and (min-width: 62em) { .feature-strip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 47.9375em) { .feature-strip__inner { grid-template-columns: 1fr; } } .feature-strip__item { display: flex; align-items: center; gap: 0.85rem; } .feature-strip__item strong { font-size: 1rem; font-weight: 700; color: var(--color-brand-ink); } .ce_icon_teaser { width: 100%; } .icon-teaser__inner { width: min(75rem, 100% - 2rem); margin: 0 auto; } .icon-teaser__grid { display: grid; gap: 1.2rem; margin-top: 2.3rem; } .icon-teaser__grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .icon-teaser__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .icon-teaser__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media screen and (max-width: 51.9375em) { .icon-teaser__grid[data-columns], .icon-teaser__grid[data-columns="2"], .icon-teaser__grid[data-columns="3"], .icon-teaser__grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 47.9375em) { .icon-teaser__grid { grid-template-columns: 1fr !important; } } .ce_teaser_card { height: 100%; } .teaser-card { height: 100%; padding: 1.5rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--base-border-radius-lg); box-shadow: var(--base-box-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .teaser-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(41, 58, 86, 0.12); } .teaser-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--color-brand-ink); color: var(--color-white); font-size: 1.1rem; } .teaser-card h3, .teaser-card .teaser-card__headline { margin-top: 1.4rem; margin-bottom: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 700; color: var(--color-brand-ink); } .teaser-card .teaser-card__text { margin-top: 0.7rem; font-size: 0.96rem; color: var(--color-muted); line-height: 1.7; } .teaser-card .teaser-card__text p:first-child { margin-top: 0; } .teaser-card .teaser-card__text p:last-child { margin-bottom: 0; } .teaser-card a { text-decoration: none; } .teaser-card__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.9rem; font-weight: 700; color: var(--color-brand-accent); } .teaser-card__link::after { content: "→"; transition: transform 0.2s ease; } .teaser-card__link:hover::after { transform: translateX(3px); } .ce_about_checklist { width: 100%; } .about__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; } @media screen and (max-width: 51.9375em) { .about__grid { grid-template-columns: 1fr; gap: 2.5rem; } } .about__media { position: relative; } .about__media::before { content: ""; position: absolute; left: -1.2rem; bottom: -1.1rem; width: 8rem; height: 8rem; border-radius: 1.6rem; background: var(--color-brand-lime); } @media screen and (max-width: 47.9375em) { .about__media::before { display: none; } } .about__media img { position: relative; width: 100%; height: 430px; object-fit: cover; border-radius: 1.8rem; box-shadow: var(--base-box-shadow); } @media screen and (max-width: 51.9375em) { .about__media img { height: 320px; } } .about__info > div:first-child { margin-bottom: 1.25rem; } .about__info h2 { margin-top: 0.7rem; margin-bottom: 0; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -0.05em; font-weight: 700; color: var(--color-brand-ink); } .about__text { margin-top: 1.25rem; color: var(--color-muted); line-height: 1.7; } .about__text p { margin: 0 0 1rem; } .about__checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: 0.6rem; margin-bottom: 0; padding: 0; } @media screen and (max-width: 47.9375em) { .about__checklist { grid-template-columns: 1fr; } } .about__checklist li { list-style: none; display: flex; align-items: flex-start; gap: 0.7rem; font-weight: 700; color: var(--color-brand-ink); } .about__checklist li::before { content: "✓"; color: var(--color-brand-accent); font-weight: 900; } .about__link { margin-top: 1.75rem; } .about__grid--no-media { grid-template-columns: 1fr; } .article--team > .inside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } @media screen and (max-width: 51.9375em) { .article--team > .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 47.9375em) { .article--team > .inside { grid-template-columns: 1fr; } } .article--team > .inside > .ce_headline { grid-column: 1/-1; margin-bottom: 1rem; } .article--team .ce_card, .card--team { margin: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--base-border-radius-lg); box-shadow: var(--base-box-shadow); overflow: hidden; } .article--team .ce_card .card__image img, .card--team .card__image img { width: 100%; height: 19rem; object-fit: cover; } .article--team .ce_card .card__content, .card--team .card__content { padding: 1.5rem; } .article--team .ce_card .card__headline, .card--team .card__headline { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--color-brand-ink); } .article--team .ce_card .card__description, .card--team .card__description { margin-top: 0.45rem; font-size: 0.96rem; color: var(--color-muted); line-height: 1.7; } .article--team .ce_card .card__description p:first-child, .card--team .card__description p:first-child { margin-top: 0; } .article--team .ce_card .card__description p:last-child, .card--team .card__description p:last-child { margin-bottom: 0; } .article--team .ce_card .card__description p:first-child strong, .article--team .ce_card .card__description .team-card__role, .card--team .card__description p:first-child strong, .card--team .card__description .team-card__role { display: block; margin-bottom: 0.45rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand-accent); } .article--team > .inside > .kdp-team-grid { grid-column: 1/-1; } .kdp-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; } .kdp-team-card { display: flex; flex-direction: column; height: 100%; margin: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--base-border-radius-lg); box-shadow: var(--base-box-shadow); overflow: hidden; } .kdp-team-card .kdp-team-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, var(--color-brand-ink), var(--color-brand-ink-dark)); } .kdp-team-card .kdp-team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .kdp-team-card .kdp-team-card__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); } .kdp-team-card .kdp-team-card__content { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem 1.5rem 1.5rem; } .kdp-team-card h3, .kdp-team-card .kdp-team-card__name { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--color-brand-ink); } .kdp-team-card .kdp-team-card__position { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand-accent); } .kdp-team-card .kdp-team-card__contact { margin: 0.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .kdp-team-card .kdp-team-card__contact a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--color-text); text-decoration: none; } .kdp-team-card .kdp-team-card__contact a .icon-inline { color: var(--color-brand-accent); flex: 0 0 auto; } .kdp-team-card .kdp-team-card__contact a span { overflow-wrap: anywhere; } .kdp-team-card .kdp-team-card__contact a:hover span, .kdp-team-card .kdp-team-card__contact a:focus-visible span { color: var(--color-brand-accent); text-decoration: underline; } .ce_contact { display: block; min-width: 0; margin: 0; } .ce_contact .contact__image { position: relative; margin-bottom: 1.5rem; } .ce_contact .contact__image img { width: 100%; max-height: 18rem; object-fit: cover; border-radius: var(--base-border-radius); box-shadow: var(--base-box-shadow); } .ce_contact .contact__name { font-size: 1.2rem; font-weight: 700; color: var(--color-brand-ink); } .ce_contact .ce_contact__sidebar { min-width: 0; } .ce_contact h2 { margin: 0.7rem 0 0; font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.12; color: var(--color-brand-ink); } .ce_contact .contact__identity { display: grid; gap: 0.25rem; margin: 0.85rem 0 0; } .ce_contact .contact__identity strong { color: var(--color-brand-ink); } .ce_contact .contact__position { font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--color-brand-accent); } .ce_contact .contact__description { margin-top: 0.7rem; color: var(--color-muted); line-height: 1.7; } .ce_contact .contact__description p { margin: 0; } .ce_contact .section-header__eyebrow { color: var(--color-brand-accent); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .contact-list { display: grid; gap: 0.8rem; margin-top: 1.75rem; } .contact-item { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 0.9rem 1rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--base-border-radius-lg); box-shadow: var(--base-box-shadow); color: var(--color-brand-ink); text-decoration: none; } .contact-item:is(a):hover { border-color: var(--color-brand-accent); } .contact-item:focus-visible { outline: var(--links-outline-focus); outline-offset: 3px; } .contact-item svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .contact-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: 50%; background: rgba(174, 200, 58, 0.15); color: var(--color-brand-accent); } .contact-item__content { display: grid; min-width: 0; gap: 0.15rem; } .contact-item__content > span { color: var(--color-muted); font-size: 0.78rem; font-weight: 700; } .contact-item__content strong, .contact-item__content address { min-width: 0; overflow-wrap: anywhere; color: var(--color-brand-ink); font-size: 0.96rem; font-style: normal; font-weight: 700; line-height: 1.45; } .mod_article:has(> .ce_contact):has(> .ce_form), .mod_article:has(> .inside > .ce_contact):has(> .inside > .ce_form) > .inside { display: grid; grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr); align-items: start; gap: clamp(1.5rem, 3vw, 3rem); } .mod_article:has(> .ce_contact):has(> .ce_form) > .ce_contact, .mod_article:has(> .ce_contact):has(> .ce_form) > .ce_form, .mod_article:has(> .inside > .ce_contact):has(> .inside > .ce_form) > .inside > .ce_contact, .mod_article:has(> .inside > .ce_contact):has(> .inside > .ce_form) > .inside > .ce_form { min-width: 0; width: 100%; margin: 0; } .mod_article:has(> .ce_contact):has(> .ce_form) > .ce_form, .mod_article:has(> .inside > .ce_contact):has(> .inside > .ce_form) > .inside > .ce_form { grid-column: 2; max-width: none; } @media screen and (max-width: 51.9375em) { .mod_article:has(> .ce_contact):has(> .ce_form), .mod_article:has(> .inside > .ce_contact):has(> .inside > .ce_form) > .inside { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .mod_article:has(> .ce_contact):has(> .ce_form) > .ce_form, .mod_article:has(> .inside > .ce_contact):has(> .inside > .ce_form) > .inside > .ce_form { grid-column: 1; } } .contact--horizontal { flex-wrap: wrap; } @media screen and (min-width: 48em) { .contact--horizontal { flex-direction: row; gap: var(--base-spacing-unit-lg); } } .contact--horizontal h1, .contact--horizontal h2, .contact--horizontal h3, .contact--horizontal h4, .contact--horizontal h5, .contact--horizontal h6 { width: 100%; } @media screen and (min-width: 48em) { .contact--horizontal .contact__image { flex-basis: 33.3333333333%; } .contact--horizontal .contact__image img { object-fit: cover; height: 100%; } } @media screen and (min-width: 48em) { .contact--horizontal .contact__details { flex-basis: 66.6666666667%; } } .form--card { padding: 2rem; background: rgba(247, 248, 243, 0.9); border: 1px solid var(--color-border); border-radius: 1.6rem; } @media screen and (min-width: 62em) { .form--card { padding: 2.5rem; } } .form--card .widget-select { position: relative; } .form--card .widget-select::after { content: ""; position: absolute; top: 1.1rem; right: 1.1rem; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--color-brand-accent); border-bottom: 2px solid var(--color-brand-accent); transform: rotate(45deg); pointer-events: none; } .form--card .widget-select select { display: block; width: 100%; min-height: 3.25rem; padding: 0.75rem 3rem 0.75rem 1rem; appearance: none; border: 1px solid rgba(53, 76, 110, 0.2); border-radius: 0.75rem; background: var(--color-white); color: var(--color-text); font: inherit; line-height: 1.4; cursor: pointer; } .form--card .widget-select select:focus-visible { outline: var(--links-outline-focus); outline-offset: 2px; } .form--card .form, .mod_form .form { display: grid; gap: 1.25rem; } @media screen and (min-width: 52em) { .form--card .form, .mod_form .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form--card .form > .widget, .mod_form .form > .widget { grid-column: 1/-1; } .form--card .form > .widget:has(> input[type=text]), .form--card .form > .widget:has(> input[type=email]), .form--card .form > .widget:has(> input[type=tel]), .form--card .form > .widget:has(> input[type=url]), .form--card .form > .widget:has(> input[type=date]), .form--card .form > .widget:has(> select), .form--card .form > .widget:has(> input[type=checkbox]), .form--card .form > .widget:has(> input[type=radio]), .mod_form .form > .widget:has(> input[type=text]), .mod_form .form > .widget:has(> input[type=email]), .mod_form .form > .widget:has(> input[type=tel]), .mod_form .form > .widget:has(> input[type=url]), .mod_form .form > .widget:has(> input[type=date]), .mod_form .form > .widget:has(> select), .mod_form .form > .widget:has(> input[type=checkbox]), .mod_form .form > .widget:has(> input[type=radio]) { grid-column: auto; } .form--card .form > .widget:has(> textarea), .mod_form .form > .widget:has(> textarea) { grid-column: 1/-1; } } .portfolio-list .portfolio__filter ul { list-style-type: none; margin: 0; padding: 0; } .portfolio-list .portfolio__filter a { text-decoration: none; } .portfolio-list .portfolio__filter { margin-bottom: var(--base-spacing-unit-lg); font-size: var(--base-font-size-xs); position: relative; z-index: 1000; } .portfolio-list .portfolio__filter::after { content: ""; border-bottom: var(--base-border); display: block; left: 0; right: 0; position: absolute; z-index: -1; bottom: 0; } .portfolio-list .portfolio__filter ul { display: flex; flex-flow: row nowrap; overflow-x: scroll; touch-action: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; padding-top: 2px; } .portfolio-list .portfolio__filter li { flex: 1 0 auto; white-space: nowrap; position: relative; z-index: 1001; text-align: center; } .portfolio-list .portfolio__filter button { color: inherit; padding: var(--nav-submenu-padding); border: none; background: transparent; width: 100%; } .portfolio-list .portfolio__filter button:hover { color: var(--color-links-hover); } .portfolio-list .portfolio__filter button:focus { outline: none; } .portfolio-list .portfolio__filter button:focus-visible { outline: var(--links-outline-focus); } .portfolio-list .portfolio__filter button.active { color: var(--links-color); border-bottom: var(--base-border-width) solid currentcolor; } .portfolio-list .portfolio__items { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: var(--grid-gutter); grid-auto-columns: 1fr; } @supports not (display: grid) { .portfolio-list .portfolio__items { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } } .ie .portfolio-list .portfolio__items { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gutter) / 2); margin-right: calc(-1 * var(--grid-gutter) / 2); } .portfolio-list .portfolio__items { grid-row-gap: var(--grid-gutter); } .portfolio-list .portfolio__items .layout_short { grid-column: 1/-1; } @supports not (display: grid) { .portfolio-list .portfolio__items .layout_short { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .portfolio-list .portfolio__items .layout_short { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .portfolio-list .portfolio__items .layout_short { grid-column: span 12/span 12; } @supports not (display: grid) { .portfolio-list .portfolio__items .layout_short { width: 100%; } } .ie .portfolio-list .portfolio__items .layout_short { width: 100%; } .portfolio-list .portfolio__items .layout_short { grid-template-rows: min-content 1fr; position: relative; border: var(--base-border); } @media screen and (min-width: 48em) { .portfolio-list .portfolio__items .layout_short { grid-column: 1/-1; } @supports not (display: grid) { .portfolio-list .portfolio__items .layout_short { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .portfolio-list .portfolio__items .layout_short { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .portfolio-list .portfolio__items .layout_short { grid-column: span 6/span 6; } @supports not (display: grid) { .portfolio-list .portfolio__items .layout_short { width: 50%; } } .ie .portfolio-list .portfolio__items .layout_short { width: 50%; } } .portfolio-list .portfolio__items .layout_short .image_container { overflow: hidden; order: -1; position: relative; } .portfolio-list .portfolio__items .layout_short .image_container img { transform: translate3d(0, 0, 0); transition: transform 0.3s; } .portfolio-list .portfolio__items .layout_short .image_container::after { content: ""; position: absolute; inset: 0; z-index: 1001; background: var(--portfolio-layout-short-overlay-background); opacity: 0%; transition: opacity 0.3s; pointer-events: none; } .portfolio-list .portfolio__items .layout_short .inside { display: grid; height: 100%; grid-template-rows: min-content auto; transition: box-shadow 0.3s; } .portfolio-list .portfolio__items .layout_short .inside > a { color: var(--color-text-inverted); padding: var(--portfolio-layout-short-padding); background-color: var(--portfolio-layout-short-background); transition: background-color 0.3s; margin-bottom: 0; z-index: 1001; } .portfolio-list .portfolio__items .layout_short .inside > a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .portfolio-list .portfolio__items .layout_short:hover .inside { box-shadow: var(--base-box-shadow); } .portfolio-list .portfolio__items .layout_short:hover .inside > a { --portfolio-layout-short-background: var( --portfolio-layout-short-background-hover ); } .portfolio-list .portfolio__items .layout_short:hover .image_container img { transform: scale(1.05); } .portfolio-list .portfolio__items .layout_short:hover .image_container::after { opacity: 100%; } .portfolio-full .portfolio__meta { max-width: 56.25em; max-width: calc(56.25em - var(--grid-gutter)); margin-left: auto; margin-right: auto; margin-left: 0; margin-right: auto; border-top: var(--base-border); padding-top: var(--base-spacing-unit); border-bottom: var(--base-border); padding-bottom: var(--base-spacing-unit); display: flex; flex-wrap: wrap; color: var(--color-gray); margin-bottom: var(--base-spacing-unit); gap: var(--grid-gutter-half); font-size: var(--base-font-size-xs); } .portfolio-full .portfolio__date { display: flex; align-items: center; } .portfolio-full .portfolio__date::before { content: ""; -webkit-mask: url(../img/icons/calendar.svg) center/contain no-repeat; mask: url(../img/icons/calendar.svg) center/contain no-repeat; background-color: currentcolor; width: var(--icons-size); height: var(--icons-size); display: block; margin-right: var(--icons-spacing); } .portfolio-full .portfolio__categories { display: flex; align-items: center; } .portfolio-full .portfolio__categories::before { content: ""; -webkit-mask: url(../img/icons/tags.svg) center/contain no-repeat; mask: url(../img/icons/tags.svg) center/contain no-repeat; background-color: currentcolor; width: var(--icons-size); height: var(--icons-size); display: block; margin-right: var(--icons-spacing); } .portfolio-full .portfolio__categories ul { list-style-type: none; margin: 0; padding: 0; } .portfolio-full .portfolio__categories a { text-decoration: none; } .portfolio-full .portfolio__categories .level_1 { display: flex; flex-wrap: wrap; } .portfolio-full .portfolio__categories .level_1 li { background-color: var(--color-gray-light); border-radius: var(--base-border-radius); padding: 0 var(--base-spacing-unit-xs); } .portfolio-full .portfolio__categories .level_1 li:not(:last-child) { margin-right: var(--base-spacing-unit-xs); } .portfolio-full .portfolio__client { display: flex; align-items: center; } .portfolio-full .portfolio__client::before { content: ""; -webkit-mask: url(../img/icons/client.svg) center/contain no-repeat; mask: url(../img/icons/client.svg) center/contain no-repeat; background-color: currentcolor; width: var(--icons-size); height: var(--icons-size); display: block; margin-right: var(--icons-spacing); } .portfolio-full .portfolio__content { grid-column: 1/-1; } @supports not (display: grid) { .portfolio-full .portfolio__content { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .portfolio-full .portfolio__content { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .portfolio-full .portfolio__content { grid-column: span 12/span 12; } @supports not (display: grid) { .portfolio-full .portfolio__content { width: 100%; } } .ie .portfolio-full .portfolio__content { width: 100%; } @media screen and (min-width: 62em) { .portfolio-full .portfolio__content { grid-column: 1/-1; } @supports not (display: grid) { .portfolio-full .portfolio__content { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .portfolio-full .portfolio__content { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .portfolio-full .portfolio__content { grid-column: span 8/span 8; } @supports not (display: grid) { .portfolio-full .portfolio__content { width: 66.6666666667%; } } .ie .portfolio-full .portfolio__content { width: 66.6666666667%; } } .portfolio-full .portfolio__content [class*=ce_] { margin-bottom: var(--base-spacing-unit); } .portfolio-full .back { font-family: var(--base-font-family); } @media screen and (min-width: 62em) { .portfolio-full .back { grid-column: 1/-1; } @supports not (display: grid) { .portfolio-full .back { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } } .ie .portfolio-full .back { padding-left: var(--grid-gutter-half); padding-right: var(--grid-gutter-half); } .portfolio-full .back { grid-column: span 8/span 8; } @supports not (display: grid) { .portfolio-full .back { width: 66.6666666667%; } } .ie .portfolio-full .back { width: 66.6666666667%; } .portfolio-full .back { grid-column-start: 4; } } .portfolio-detail { overflow-wrap: anywhere; } .portfolio-detail h1 { hyphens: auto; } .portfolio-hero .hero__text { max-width: 56rem; } .portfolio-detail > .portfolio__section.article--tint { margin-block: 2.5rem; padding-block: var(--article-spacing-top) var(--article-spacing-bottom); background: var(--article-tint-background); box-shadow: 0 0 0 100vmax var(--article-tint-background); clip-path: inset(0 -100vmax); } .portfolio-detail > .portfolio__content, .portfolio-detail > .portfolio__section > .portfolio__content { display: flow-root; width: 100%; max-width: none; margin: 0; } .portfolio-detail > .portfolio__content > * + *, .portfolio-detail > .portfolio__section > .portfolio__content > * + * { margin-top: 2.5rem; } .portfolio-detail > .portfolio__content > .content-text:not(.text--narrow), .portfolio-detail > .portfolio__section > .portfolio__content > .content-text:not(.text--narrow) { width: 100%; max-width: none; margin-inline: 0; } .portfolio-detail > .portfolio__content > .ce_icon_teaser > .icon-teaser__inner, .portfolio-detail > .portfolio__section > .portfolio__content > .ce_icon_teaser > .icon-teaser__inner { width: 100%; } .portfolio-detail:has(> .portfolio-hero) > .portfolio__content, .portfolio-detail:has(> .portfolio-hero) > .portfolio__section > .portfolio__content { width: min(75rem, 100% - 2rem); margin-inline: auto; } .portfolio-detail:has(> .portfolio-hero) > .portfolio__content { margin-block: 3rem; } .kdp-portfolio { width: 100%; } .kdp-portfolio .portfolio__filter { margin-bottom: 2rem; } .kdp-portfolio .portfolio__filter ul { display: flex; flex-wrap: nowrap; gap: 0.25rem; overflow-x: auto; margin: 0; padding: 0; border-bottom: 1px solid var(--color-border); list-style: none; scrollbar-width: thin; } .kdp-portfolio .portfolio__filter li { flex: 0 0 auto; } .kdp-portfolio .portfolio__filter button { padding: 0.7rem 0.85rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--color-text); font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .kdp-portfolio .portfolio__filter button:hover { color: var(--color-brand-accent); background: var(--color-brand-paper); } .kdp-portfolio .portfolio__filter button:focus { outline: none; } .kdp-portfolio .portfolio__filter button:focus-visible { outline: var(--links-outline-focus); outline-offset: 2px; } .kdp-portfolio .portfolio__filter button.active { border-bottom-color: var(--color-brand-lime); color: var(--color-brand-ink); } .kdp-portfolio .portfolio__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 0; padding: 0; } @media screen and (max-width: 51.9375em) { .kdp-portfolio .portfolio__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 47.9375em) { .kdp-portfolio .portfolio__items { grid-template-columns: minmax(0, 1fr); } } .portfolio--kdp { display: flex; min-width: 0; height: 100%; margin: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--base-border-radius-lg); box-shadow: var(--base-box-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .portfolio--kdp:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(41, 58, 86, 0.12); } .portfolio--kdp .inside { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; padding: 1.4rem; } .portfolio--kdp .portfolio__title { margin: 0; overflow-wrap: anywhere; font-size: 1.1rem; line-height: 1.35; font-weight: 700; color: var(--color-brand-ink); } .portfolio--kdp .portfolio__teaser { flex: 1; font-size: 0.94rem; line-height: 1.65; color: var(--color-muted); } .portfolio--kdp .portfolio__teaser p:first-child { margin-top: 0; } .portfolio--kdp .portfolio__teaser p:last-child { margin-bottom: 0; } .portfolio--kdp .portfolio__badges ul.level_1 { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .portfolio--kdp .portfolio__badges li { padding: 0.22rem 0.7rem; border-radius: var(--base-border-radius-pill); background: var(--color-brand-paper); color: var(--color-brand-accent); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; } @keyframes kdpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .portfolio--kdp.kdp-fade-in { animation: kdpFadeIn 0.35s ease both; } .portfolio--kdp.portfolio-hidden { display: none; } .kdp-faq { width: 100%; } .kdp-faq__category { margin: 2.5rem 0 1rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; color: var(--color-brand-ink); } .kdp-faq__list { display: flex; flex-direction: column; gap: 0.8rem; } .kdp-faq__item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--base-border-radius); overflow: hidden; } .kdp-faq__item[open] { box-shadow: var(--base-box-shadow); } .kdp-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--color-brand-ink); transition: color 0.2s ease; } .kdp-faq__question::-webkit-details-marker { display: none; } .kdp-faq__question::after { content: "+"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-brand-paper); color: var(--color-brand-accent); font-size: 1.15rem; font-weight: 800; line-height: 1; transition: background 0.2s ease, transform 0.2s ease; } .kdp-faq__question:hover { color: var(--color-brand-accent); } .kdp-faq__question:focus-visible { outline: var(--links-outline-focus); outline-offset: 2px; } .kdp-faq__item[open] .kdp-faq__question { color: var(--color-brand-accent); } .kdp-faq__item[open] .kdp-faq__question::after { content: "–"; background: var(--color-brand-accent); color: var(--color-white); } .kdp-faq__answer { padding: 0 1.25rem 1.25rem; font-size: 0.97rem; line-height: 1.75; color: var(--color-text); } .kdp-faq__answer p:first-child { margin-top: 0; } .kdp-faq__answer p:last-child { margin-bottom: 0; } .portfolio__more { margin-top: auto; padding-top: 0.35rem; font-size: 0.9rem; font-weight: 700; color: var(--color-brand-accent); text-decoration: none; } .portfolio__more:hover { color: var(--color-brand-ink); } .portfolio__more:focus-visible { outline: var(--links-outline-focus); outline-offset: 2px; } .mod_breadcrumb { padding-bottom: 0.25rem; } .mod_breadcrumb .mod_breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0.2rem 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.845rem; color: var(--color-muted); } .mod_breadcrumb .mod_breadcrumb__item { display: inline-flex; align-items: center; } .mod_breadcrumb .mod_breadcrumb__item + .mod_breadcrumb__item::before { content: "/"; margin-right: 0.55rem; color: var(--color-border); } .mod_breadcrumb .mod_breadcrumb__link { color: var(--color-muted); text-decoration: none; } .mod_breadcrumb .mod_breadcrumb__link:hover { color: var(--color-brand-accent); text-decoration: underline; } .mod_breadcrumb .mod_breadcrumb__link:focus-visible { outline: var(--links-outline-focus); outline-offset: 2px; } .mod_breadcrumb .mod_breadcrumb__item--active span { font-weight: 600; color: var(--color-text); } .service-media { margin: 2rem 0; } .service-media img { display: block; width: 100%; height: auto; border-radius: var(--base-border-radius-lg); box-shadow: var(--base-box-shadow); } .service-media figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--color-muted); } .footer__note { margin-top: var(--base-spacing-unit); padding-top: var(--base-spacing-unit); border-top: var(--base-border); font-size: var(--base-font-size-xs); grid-column: span 2; } .footer__note a { color: inherit; } .ce_card { display: flex; flex-direction: column; position: relative; transition: box-shadow 0.3s; margin-bottom: var(--base-spacing-unit); } .ce_card .card__image { overflow: hidden; } .ce_card .card__image img { transform: translate3d(0, 0, 0); transition: transform 0.3s; } .ce_card .card__image + .card__content { border-top: none; } .ce_card .card__content { flex-grow: 1; font-size: var(--base-font-size-xs); padding: var(--base-spacing-unit); display: flex; flex-direction: column; border: var(--base-border); } .ce_card .card__link { margin-top: auto; padding-top: var(--base-spacing-unit); margin-bottom: 0; } .ce_card .card__link a { line-height: 1.2; font-weight: var(--card-link-font-weight); } .ce_card .card__link a:link { color: var(--card-link-color); } .ce_card .card__link a::before { content: ""; position: absolute; inset: 0; } .ce_card:hover { box-shadow: var(--base-box-shadow); } .ce_card:hover img { transform: scale(1.05); } @media screen and (min-width: 48em) { .card--horizontal { flex-direction: row; } } @media screen and (min-width: 48em) { .card--horizontal .card__image { flex-basis: 33.3333333333%; } .card--horizontal .card__image img { -o-object-fit: cover; object-fit: cover; height: 100%; } .card--horizontal .card__image + .card__content { border-top: var(--base-border); } } @media screen and (min-width: 48em) { .card--horizontal .card__content { flex-basis: 66.6666666667%; border-left: none; } } @media screen and (min-width: 48em) { .card--horizontal--lg .card__image { flex-basis: 40%; } } @media screen and (min-width: 48em) { .card--horizontal--lg .card__content { flex-basis: 60%; } } @media screen and (min-width: 62em) { .card--horizontal--lg .card__content { padding: var(--base-spacing-unit-lg) var(--base-spacing-unit-lg) var(--base-spacing-unit); } } .card--minimal .card__content { padding: 0; } .card--minimal .card__description { padding: 0 var(--base-spacing-unit) var(--base-spacing-unit); } .card--minimal .card__headline { padding: var(--base-spacing-unit) var(--base-spacing-unit) 0; } .card--minimal .card__link { padding: var(--base-spacing-unit-sm) var(--base-spacing-unit); border-top: var(--base-border); } .card--overlay { --card-link-color: var(--card-overlay-link-color); flex-direction: row; } .card--overlay .card__image { width: 100%; display: flex; } .card--overlay .card__image img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; max-width: none; } .card--overlay .card__content { background: var(--card-overlay-background); color: var(--card-overlay-color); border: none; width: 100%; display: flex; justify-content: flex-end; margin-left: -100%; flex-grow: 0; z-index: 1001; } .card--overlay .card__link { margin-top: 0; } .ce_card .card__content { border: 1px solid var(--color-border); border-radius: var(--base-border-radius-lg); background: var(--color-white); box-shadow: var(--base-box-shadow); } .ce_card .card__headline { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--color-brand-ink); } .ce_card .card__description { margin-top: 0.7rem; font-size: 0.96rem; line-height: 1.7; color: var(--color-muted); } .ce_card .card__description p:first-child { margin-top: 0; } .ce_card .card__description p:last-child { margin-bottom: 0; } .ce_card .card__image img { border-radius: var(--base-border-radius-lg); } .ce_card .card__image:not(:last-child) img { border-radius: var(--base-border-radius-lg) var(--base-border-radius-lg) 0 0; } .ce_card .card__image + .card__content { border-top-left-radius: 0; border-top-right-radius: 0; } .card--tinted { background: var(--color-brand-mist); } .card--tinted .card__content { border-color: transparent; background: transparent; } .content-text { max-width: 56.25em; max-width: calc(56.25em - var(--grid-gutter)); margin-left: auto; margin-right: auto; margin-left: 0; margin-right: auto; width: 100%; } .text--narrow { max-width: 50em; max-width: calc(50em - var(--grid-gutter)); margin-left: auto; margin-right: auto; } .text--alert { background: var(--text-alert-background); color: var(--text-alert-color); padding: var(--base-spacing-unit); border-radius: var(--base-border-radius); border: var(--base-border-width) solid var(--text-alert-border-color); } .text--alert h1, .text--alert h2, .text--alert h3, .text--alert h4, .text--alert h5, .text--alert h6 { margin-top: 0; color: inherit; } .text--alert a { color: inherit; } .text--alert code { background: var(--color-page-background); border-radius: var(--base-border-radius); padding: 0 var(--base-spacing-unit-xs); } .text--fact { border: var(--base-border); padding: var(--base-spacing-unit); text-align: center; display: grid; } .text--fact h1, .text--fact h2, .text--fact h3, .text--fact h4, .text--fact h5, .text--fact h6 { text-transform: uppercase; } .text--fact .rte p:first-child { margin-bottom: 0; color: var(--color-brand-primary); font-variant-numeric: lining-nums; } .text--testimonial { border-left: var(--base-border-width) solid var(--color-brand-lime); padding-left: var(--base-spacing-unit); font-style: italic; font-size: 1.1rem; line-height: 1.75; color: var(--color-muted); } [id=footer] { background: var(--layout-footer-background); border-top: 1px solid var(--color-border); color: var(--layout-footer-color); } .mod_footer__inner { width: min(75rem, 100% - 2rem); margin: 0 auto; min-height: 90px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; } @media screen and (max-width: 51.9375em) { .mod_footer__inner { flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; gap: 0.75rem; } } .mod_footer__copyright { margin: 0; font-size: 0.88rem; color: var(--color-muted); } .mod_footer__meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: 0.88rem; list-style: none; padding: 0; margin: 0; } @media screen and (max-width: 51.9375em) { .mod_footer__meta { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 0.6rem 1rem; } } .mod_footer__meta li { display: flex; align-items: center; gap: 1rem; min-width: 0; } .mod_footer__meta li + li::before { content: "|"; opacity: 0.7; } @media screen and (max-width: 51.9375em) { .mod_footer__meta li + li::before { content: none; } } .mod_footer__meta a { color: var(--color-brand-ink); font-weight: 700; text-decoration: none; } .mod_footer__meta a:hover { text-decoration: underline; } .text--inverted, .text--inverted * { color: var(--color-text-inverted); } .border-top { border-top: var(--base-border); } .border-bottom { border-bottom: var(--base-border); } .block--center { margin-left: auto; margin-right: auto; } .m-t-0, .mod_article.m-t-0 { margin-top: calc(0 * var(--base-spacing-unit)); } .m-b-0, .mod_article.m-b-0 { margin-bottom: calc(0 * var(--base-spacing-unit)); } .p-t-0:not(.mod_article) { padding-top: calc(0 * var(--base-spacing-unit)); } .p-b-0:not(.mod_article) { padding-bottom: calc(0 * var(--base-spacing-unit)); } .mod_article.p-t-0 { --article-spacing-top: calc(0 * var(--base-spacing-unit)); } .mod_article.p-b-0 { --article-spacing-bottom: calc(0 * var(--base-spacing-unit)); } .m-t-1, .mod_article.m-t-1 { margin-top: calc(1 * var(--base-spacing-unit)); } .m-b-1, .mod_article.m-b-1 { margin-bottom: calc(1 * var(--base-spacing-unit)); } .p-t-1:not(.mod_article) { padding-top: calc(1 * var(--base-spacing-unit)); } .p-b-1:not(.mod_article) { padding-bottom: calc(1 * var(--base-spacing-unit)); } .mod_article.p-t-1 { --article-spacing-top: calc(1 * var(--base-spacing-unit)); } .mod_article.p-b-1 { --article-spacing-bottom: calc(1 * var(--base-spacing-unit)); } .m-t-2, .mod_article.m-t-2 { margin-top: calc(2 * var(--base-spacing-unit)); } .m-b-2, .mod_article.m-b-2 { margin-bottom: calc(2 * var(--base-spacing-unit)); } .p-t-2:not(.mod_article) { padding-top: calc(2 * var(--base-spacing-unit)); } .p-b-2:not(.mod_article) { padding-bottom: calc(2 * var(--base-spacing-unit)); } .mod_article.p-t-2 { --article-spacing-top: calc(2 * var(--base-spacing-unit)); } .mod_article.p-b-2 { --article-spacing-bottom: calc(2 * var(--base-spacing-unit)); } .m-t-3, .mod_article.m-t-3 { margin-top: calc(3 * var(--base-spacing-unit)); } .m-b-3, .mod_article.m-b-3 { margin-bottom: calc(3 * var(--base-spacing-unit)); } .p-t-3:not(.mod_article) { padding-top: calc(3 * var(--base-spacing-unit)); } .p-b-3:not(.mod_article) { padding-bottom: calc(3 * var(--base-spacing-unit)); } .mod_article.p-t-3 { --article-spacing-top: calc(3 * var(--base-spacing-unit)); } .mod_article.p-b-3 { --article-spacing-bottom: calc(3 * var(--base-spacing-unit)); } .m-t-4, .mod_article.m-t-4 { margin-top: calc(4 * var(--base-spacing-unit)); } .m-b-4, .mod_article.m-b-4 { margin-bottom: calc(4 * var(--base-spacing-unit)); } .p-t-4:not(.mod_article) { padding-top: calc(4 * var(--base-spacing-unit)); } .p-b-4:not(.mod_article) { padding-bottom: calc(4 * var(--base-spacing-unit)); } .mod_article.p-t-4 { --article-spacing-top: calc(4 * var(--base-spacing-unit)); } .mod_article.p-b-4 { --article-spacing-bottom: calc(4 * var(--base-spacing-unit)); } .m-t-5, .mod_article.m-t-5 { margin-top: calc(5 * var(--base-spacing-unit)); } .m-b-5, .mod_article.m-b-5 { margin-bottom: calc(5 * var(--base-spacing-unit)); } .p-t-5:not(.mod_article) { padding-top: calc(5 * var(--base-spacing-unit)); } .p-b-5:not(.mod_article) { padding-bottom: calc(5 * var(--base-spacing-unit)); } .mod_article.p-t-5 { --article-spacing-top: calc(5 * var(--base-spacing-unit)); } .mod_article.p-b-5 { --article-spacing-bottom: calc(5 * var(--base-spacing-unit)); } .article-xs-1 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-1 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-2 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-2 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-3 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-3 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-4 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-4 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-5 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-5 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-6 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-6 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-7 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-7 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-8 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-8 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-9 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-9 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-10 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-10 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-11 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-11 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xs-12 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xs-12 > .inside > * { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 0) { .article-xs-1 .inside > * { grid-column-end: span 1; } @supports not (display: grid) { .article-xs-1 .inside > * { width: 8.3333333333%; } } .article-start-xs-1 .inside > * { grid-column-start: 1; } .article-xs-2 .inside > * { grid-column-end: span 2; } @supports not (display: grid) { .article-xs-2 .inside > * { width: 16.6666666667%; } } .article-start-xs-2 .inside > * { grid-column-start: 2; } .article-xs-3 .inside > * { grid-column-end: span 3; } @supports not (display: grid) { .article-xs-3 .inside > * { width: 25%; } } .article-start-xs-3 .inside > * { grid-column-start: 3; } .article-xs-4 .inside > * { grid-column-end: span 4; } @supports not (display: grid) { .article-xs-4 .inside > * { width: 33.3333333333%; } } .article-start-xs-4 .inside > * { grid-column-start: 4; } .article-xs-5 .inside > * { grid-column-end: span 5; } @supports not (display: grid) { .article-xs-5 .inside > * { width: 41.6666666667%; } } .article-start-xs-5 .inside > * { grid-column-start: 5; } .article-xs-6 .inside > * { grid-column-end: span 6; } @supports not (display: grid) { .article-xs-6 .inside > * { width: 50%; } } .article-start-xs-6 .inside > * { grid-column-start: 6; } .article-xs-7 .inside > * { grid-column-end: span 7; } @supports not (display: grid) { .article-xs-7 .inside > * { width: 58.3333333333%; } } .article-start-xs-7 .inside > * { grid-column-start: 7; } .article-xs-8 .inside > * { grid-column-end: span 8; } @supports not (display: grid) { .article-xs-8 .inside > * { width: 66.6666666667%; } } .article-start-xs-8 .inside > * { grid-column-start: 8; } .article-xs-9 .inside > * { grid-column-end: span 9; } @supports not (display: grid) { .article-xs-9 .inside > * { width: 75%; } } .article-start-xs-9 .inside > * { grid-column-start: 9; } .article-xs-10 .inside > * { grid-column-end: span 10; } @supports not (display: grid) { .article-xs-10 .inside > * { width: 83.3333333333%; } } .article-start-xs-10 .inside > * { grid-column-start: 10; } .article-xs-11 .inside > * { grid-column-end: span 11; } @supports not (display: grid) { .article-xs-11 .inside > * { width: 91.6666666667%; } } .article-start-xs-11 .inside > * { grid-column-start: 11; } .article-xs-12 .inside > * { grid-column-end: span 12; } @supports not (display: grid) { .article-xs-12 .inside > * { width: 100%; } } .article-start-xs-12 .inside > * { grid-column-start: 12; } } .article-sm-1 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-1 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-2 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-2 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-3 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-3 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-4 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-4 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-5 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-5 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-6 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-6 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-7 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-7 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-8 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-8 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-9 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-9 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-10 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-10 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-11 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-11 > .inside > * { padding-left: 0; padding-right: 0; } } .article-sm-12 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-sm-12 > .inside > * { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 48em) { .article-sm-1 .inside > * { grid-column-end: span 1; } @supports not (display: grid) { .article-sm-1 .inside > * { width: 8.3333333333%; } } .article-start-sm-1 .inside > * { grid-column-start: 1; } .article-sm-2 .inside > * { grid-column-end: span 2; } @supports not (display: grid) { .article-sm-2 .inside > * { width: 16.6666666667%; } } .article-start-sm-2 .inside > * { grid-column-start: 2; } .article-sm-3 .inside > * { grid-column-end: span 3; } @supports not (display: grid) { .article-sm-3 .inside > * { width: 25%; } } .article-start-sm-3 .inside > * { grid-column-start: 3; } .article-sm-4 .inside > * { grid-column-end: span 4; } @supports not (display: grid) { .article-sm-4 .inside > * { width: 33.3333333333%; } } .article-start-sm-4 .inside > * { grid-column-start: 4; } .article-sm-5 .inside > * { grid-column-end: span 5; } @supports not (display: grid) { .article-sm-5 .inside > * { width: 41.6666666667%; } } .article-start-sm-5 .inside > * { grid-column-start: 5; } .article-sm-6 .inside > * { grid-column-end: span 6; } @supports not (display: grid) { .article-sm-6 .inside > * { width: 50%; } } .article-start-sm-6 .inside > * { grid-column-start: 6; } .article-sm-7 .inside > * { grid-column-end: span 7; } @supports not (display: grid) { .article-sm-7 .inside > * { width: 58.3333333333%; } } .article-start-sm-7 .inside > * { grid-column-start: 7; } .article-sm-8 .inside > * { grid-column-end: span 8; } @supports not (display: grid) { .article-sm-8 .inside > * { width: 66.6666666667%; } } .article-start-sm-8 .inside > * { grid-column-start: 8; } .article-sm-9 .inside > * { grid-column-end: span 9; } @supports not (display: grid) { .article-sm-9 .inside > * { width: 75%; } } .article-start-sm-9 .inside > * { grid-column-start: 9; } .article-sm-10 .inside > * { grid-column-end: span 10; } @supports not (display: grid) { .article-sm-10 .inside > * { width: 83.3333333333%; } } .article-start-sm-10 .inside > * { grid-column-start: 10; } .article-sm-11 .inside > * { grid-column-end: span 11; } @supports not (display: grid) { .article-sm-11 .inside > * { width: 91.6666666667%; } } .article-start-sm-11 .inside > * { grid-column-start: 11; } .article-sm-12 .inside > * { grid-column-end: span 12; } @supports not (display: grid) { .article-sm-12 .inside > * { width: 100%; } } .article-start-sm-12 .inside > * { grid-column-start: 12; } } .article-md-1 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-1 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-2 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-2 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-3 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-3 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-4 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-4 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-5 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-5 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-6 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-6 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-7 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-7 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-8 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-8 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-9 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-9 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-10 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-10 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-11 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-11 > .inside > * { padding-left: 0; padding-right: 0; } } .article-md-12 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-md-12 > .inside > * { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 62em) { .article-md-1 .inside > * { grid-column-end: span 1; } @supports not (display: grid) { .article-md-1 .inside > * { width: 8.3333333333%; } } .article-start-md-1 .inside > * { grid-column-start: 1; } .article-md-2 .inside > * { grid-column-end: span 2; } @supports not (display: grid) { .article-md-2 .inside > * { width: 16.6666666667%; } } .article-start-md-2 .inside > * { grid-column-start: 2; } .article-md-3 .inside > * { grid-column-end: span 3; } @supports not (display: grid) { .article-md-3 .inside > * { width: 25%; } } .article-start-md-3 .inside > * { grid-column-start: 3; } .article-md-4 .inside > * { grid-column-end: span 4; } @supports not (display: grid) { .article-md-4 .inside > * { width: 33.3333333333%; } } .article-start-md-4 .inside > * { grid-column-start: 4; } .article-md-5 .inside > * { grid-column-end: span 5; } @supports not (display: grid) { .article-md-5 .inside > * { width: 41.6666666667%; } } .article-start-md-5 .inside > * { grid-column-start: 5; } .article-md-6 .inside > * { grid-column-end: span 6; } @supports not (display: grid) { .article-md-6 .inside > * { width: 50%; } } .article-start-md-6 .inside > * { grid-column-start: 6; } .article-md-7 .inside > * { grid-column-end: span 7; } @supports not (display: grid) { .article-md-7 .inside > * { width: 58.3333333333%; } } .article-start-md-7 .inside > * { grid-column-start: 7; } .article-md-8 .inside > * { grid-column-end: span 8; } @supports not (display: grid) { .article-md-8 .inside > * { width: 66.6666666667%; } } .article-start-md-8 .inside > * { grid-column-start: 8; } .article-md-9 .inside > * { grid-column-end: span 9; } @supports not (display: grid) { .article-md-9 .inside > * { width: 75%; } } .article-start-md-9 .inside > * { grid-column-start: 9; } .article-md-10 .inside > * { grid-column-end: span 10; } @supports not (display: grid) { .article-md-10 .inside > * { width: 83.3333333333%; } } .article-start-md-10 .inside > * { grid-column-start: 10; } .article-md-11 .inside > * { grid-column-end: span 11; } @supports not (display: grid) { .article-md-11 .inside > * { width: 91.6666666667%; } } .article-start-md-11 .inside > * { grid-column-start: 11; } .article-md-12 .inside > * { grid-column-end: span 12; } @supports not (display: grid) { .article-md-12 .inside > * { width: 100%; } } .article-start-md-12 .inside > * { grid-column-start: 12; } } .article-lg-1 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-1 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-2 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-2 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-3 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-3 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-4 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-4 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-5 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-5 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-6 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-6 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-7 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-7 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-8 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-8 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-9 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-9 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-10 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-10 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-11 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-11 > .inside > * { padding-left: 0; padding-right: 0; } } .article-lg-12 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-lg-12 > .inside > * { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 75em) { .article-lg-1 .inside > * { grid-column-end: span 1; } @supports not (display: grid) { .article-lg-1 .inside > * { width: 8.3333333333%; } } .article-start-lg-1 .inside > * { grid-column-start: 1; } .article-lg-2 .inside > * { grid-column-end: span 2; } @supports not (display: grid) { .article-lg-2 .inside > * { width: 16.6666666667%; } } .article-start-lg-2 .inside > * { grid-column-start: 2; } .article-lg-3 .inside > * { grid-column-end: span 3; } @supports not (display: grid) { .article-lg-3 .inside > * { width: 25%; } } .article-start-lg-3 .inside > * { grid-column-start: 3; } .article-lg-4 .inside > * { grid-column-end: span 4; } @supports not (display: grid) { .article-lg-4 .inside > * { width: 33.3333333333%; } } .article-start-lg-4 .inside > * { grid-column-start: 4; } .article-lg-5 .inside > * { grid-column-end: span 5; } @supports not (display: grid) { .article-lg-5 .inside > * { width: 41.6666666667%; } } .article-start-lg-5 .inside > * { grid-column-start: 5; } .article-lg-6 .inside > * { grid-column-end: span 6; } @supports not (display: grid) { .article-lg-6 .inside > * { width: 50%; } } .article-start-lg-6 .inside > * { grid-column-start: 6; } .article-lg-7 .inside > * { grid-column-end: span 7; } @supports not (display: grid) { .article-lg-7 .inside > * { width: 58.3333333333%; } } .article-start-lg-7 .inside > * { grid-column-start: 7; } .article-lg-8 .inside > * { grid-column-end: span 8; } @supports not (display: grid) { .article-lg-8 .inside > * { width: 66.6666666667%; } } .article-start-lg-8 .inside > * { grid-column-start: 8; } .article-lg-9 .inside > * { grid-column-end: span 9; } @supports not (display: grid) { .article-lg-9 .inside > * { width: 75%; } } .article-start-lg-9 .inside > * { grid-column-start: 9; } .article-lg-10 .inside > * { grid-column-end: span 10; } @supports not (display: grid) { .article-lg-10 .inside > * { width: 83.3333333333%; } } .article-start-lg-10 .inside > * { grid-column-start: 10; } .article-lg-11 .inside > * { grid-column-end: span 11; } @supports not (display: grid) { .article-lg-11 .inside > * { width: 91.6666666667%; } } .article-start-lg-11 .inside > * { grid-column-start: 11; } .article-lg-12 .inside > * { grid-column-end: span 12; } @supports not (display: grid) { .article-lg-12 .inside > * { width: 100%; } } .article-start-lg-12 .inside > * { grid-column-start: 12; } } .article-xl-1 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-1 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-2 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-2 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-3 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-3 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-4 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-4 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-5 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-5 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-6 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-6 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-7 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-7 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-8 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-8 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-9 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-9 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-10 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-10 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-11 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-11 > .inside > * { padding-left: 0; padding-right: 0; } } .article-xl-12 > .inside { display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--grid-gutter); column-gap: var(--grid-gutter); } @supports not (display: grid) { .article-xl-12 > .inside > * { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 90em) { .article-xl-1 .inside > * { grid-column-end: span 1; } @supports not (display: grid) { .article-xl-1 .inside > * { width: 8.3333333333%; } } .article-start-xl-1 .inside > * { grid-column-start: 1; } .article-xl-2 .inside > * { grid-column-end: span 2; } @supports not (display: grid) { .article-xl-2 .inside > * { width: 16.6666666667%; } } .article-start-xl-2 .inside > * { grid-column-start: 2; } .article-xl-3 .inside > * { grid-column-end: span 3; } @supports not (display: grid) { .article-xl-3 .inside > * { width: 25%; } } .article-start-xl-3 .inside > * { grid-column-start: 3; } .article-xl-4 .inside > * { grid-column-end: span 4; } @supports not (display: grid) { .article-xl-4 .inside > * { width: 33.3333333333%; } } .article-start-xl-4 .inside > * { grid-column-start: 4; } .article-xl-5 .inside > * { grid-column-end: span 5; } @supports not (display: grid) { .article-xl-5 .inside > * { width: 41.6666666667%; } } .article-start-xl-5 .inside > * { grid-column-start: 5; } .article-xl-6 .inside > * { grid-column-end: span 6; } @supports not (display: grid) { .article-xl-6 .inside > * { width: 50%; } } .article-start-xl-6 .inside > * { grid-column-start: 6; } .article-xl-7 .inside > * { grid-column-end: span 7; } @supports not (display: grid) { .article-xl-7 .inside > * { width: 58.3333333333%; } } .article-start-xl-7 .inside > * { grid-column-start: 7; } .article-xl-8 .inside > * { grid-column-end: span 8; } @supports not (display: grid) { .article-xl-8 .inside > * { width: 66.6666666667%; } } .article-start-xl-8 .inside > * { grid-column-start: 8; } .article-xl-9 .inside > * { grid-column-end: span 9; } @supports not (display: grid) { .article-xl-9 .inside > * { width: 75%; } } .article-start-xl-9 .inside > * { grid-column-start: 9; } .article-xl-10 .inside > * { grid-column-end: span 10; } @supports not (display: grid) { .article-xl-10 .inside > * { width: 83.3333333333%; } } .article-start-xl-10 .inside > * { grid-column-start: 10; } .article-xl-11 .inside > * { grid-column-end: span 11; } @supports not (display: grid) { .article-xl-11 .inside > * { width: 91.6666666667%; } } .article-start-xl-11 .inside > * { grid-column-start: 11; } .article-xl-12 .inside > * { grid-column-end: span 12; } @supports not (display: grid) { .article-xl-12 .inside > * { width: 100%; } } .article-start-xl-12 .inside > * { grid-column-start: 12; } } @media print { *, *::before, *::after, p::first-letter, div::first-letter, blockquote::first-letter, li::first-letter, p::first-line, div::first-line, blockquote::first-line, li::first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: var(--base-font-size); font-weight: normal; -webkit-hyphens: auto; hyphens: auto; } abbr[title]::after { content: " (" attr(title) ")"; font-size: var(--base-font-size); font-weight: normal; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } div.btn a, a.btn, .more a, input.submit { color: #000 !important; border-color: #000 !important; } pre { white-space: pre-wrap !important; } pre, blockquote { page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .logo a[href]::after, .ce_gallery a[href]::after { content: ""; } .nav, .nav-toggler, .hero__image, .ce_comments .form { display: none; } .hero, .mod_article.hero, .news-full--hero .hero { min-height: 0; } .band { margin-top: calc(-1 * var(--base-border-width)); border-top: var(--base-border-width) solid var(--color-gray-light); border-bottom: var(--base-border-width) solid var(--color-gray-light); } .news-grid > div { grid-column: span 6 !important; } .news-grid > div .image_container a::after { content: ""; } .news-full--hero .text_container, .ce_comments { max-width: 75em; max-width: calc(75em - var(--grid-gutter)); margin-left: auto; margin-right: auto; } .ce_accordion .accordion { display: block !important; } .ce_accordion .ui-accordion-header-icon { display: none; } .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6 { grid-column: span 6; } .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 { grid-column: span 4; } } .show-grid { background-color: var(--color-brand-primary); padding-top: var(--base-spacing-unit-lg); padding-bottom: var(--base-spacing-unit); margin-bottom: var(--base-spacing-unit); position: relative; } .show-grid::before { font-size: var(--base-font-size-xs); padding: 0 var(--base-spacing-unit-xs); border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0; background-color: var(--base-overlay-background); color: var(--color-text-inverted); position: absolute; top: 0; content: "screen-xs"; } @media screen and (min-width: 48em) { .show-grid::before { content: "screen-sm"; } } @media screen and (min-width: 62em) { .show-grid::before { content: "screen-md"; } } @media screen and (min-width: 75em) { .show-grid::before { content: "screen-lg"; } } @media screen and (min-width: 90em) { .show-grid::before { content: "screen-xl"; } } .show-grid [class*=col-] > * { background-color: var(--color-gray-light); padding: var(--base-spacing-unit-xs); border-radius: var(--base-border-radius); margin: unset; } .color-palette { border-radius: var(--base-border-radius); padding: var(--base-spacing-unit-sm); margin-bottom: var(--base-spacing-unit); display: flex; flex: 1 0 auto; } .color-palette--bordered { border: 1px solid var(--color-gray-light); } .bg-highlight, .bg-brand-primary { background-color: var(--color-brand-primary); } .bg-brand-secondary { background-color: var(--color-brand-secondary); } .bg-dark { background: var(--article-dark-background); } .bg-tint { background-color: var(--article-tint-background); } .bg-overlay { background: var(--base-overlay-background); } .bg-overlay-2 { background: var(--base-overlay-background-2); } .bg-gray { background-color: var(--color-gray); } .bg-gray-dark { background-color: var(--color-gray-dark); } .bg-gray-lighter { background-color: var(--color-gray-lighter); } .bg-text-inverted { background-color: var(--color-text-inverted); } .hide--Dokumentation .link--dokumentation { display: none; } .hide--Demo .link--demo { display: none; } .browser-support { margin-top: 1rem; margin-bottom: 1rem; } .browser-support > .inside { max-width: 75em; width: 100%; margin-left: auto; margin-right: auto; background: #fff8ea; border: 2px solid #e25600; padding: 1rem; margin-left: auto; margin-right: auto; width: auto; }