/* div#CybotCookiebotDialog { max-width: 650px; top: auto !important; bottom: 0 !important; right: 0 !important; left: auto !important; box-shadow: 0 0 60px rgba(0,0,0,0.2); margin: 0 25px 25px 0; width: calc(100% - 50px) !important; border-radius: 4px; z-index: 999999 !important; } div#CybotCookiebotDialogPoweredbyLink { display: none !important; } div#CybotCookiebotDialogBodyContent { padding: 1.5rem 1.2rem 0.7rem 1.2rem !important; } #CybotCookiebotDialogBody { padding-right: 0; } #CybotCookiebotDialogDetailFooter { display: none; } #CybotCookiebotDialogDetailBodyContentCookieContainerTypeDetails, #CybotCookiebotDialogDetailBodyContentIABv2Details { overflow-x: hidden !important; } #CybotCookiebotDialog a, #CybotCookiebotDialog div { font-family: var(--base-font-1) !important; } #CybotCookiebotDialog a:hover { text-decoration: none !important; } div#CybotCookiebotDialogBodyButtons { padding: 0 1.2rem 1rem 1.2rem !important; margin: 0 !important; } #CybotCookiebotDialog a#CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialog a#CybotCookiebotDialogBodyButtonDecline { width: auto !important; padding: 0.6em 0.9em; padding-bottom: 0.4em; transition: opacity 150ms; opacity: 1; font-weight: normal !important; font-family: var(--base-font-1-bold) !important; border-radius: 3px; } #CybotCookiebotDialog a#CybotCookiebotDialogBodyButtonAccept:hover, #CybotCookiebotDialog a#CybotCookiebotDialogBodyButtonDecline:hover { opacity: 0.9; } #CybotCookiebotDialog a#CybotCookiebotDialogBodyButtonDecline { background: var(--base-color-lightest-gray) !important; border-color: var(--base-color-lightest-gray) !important; color: var(--base-color-gray) !important; margin-left: 0 !important; } #CybotCookiebotDialog a#CybotCookiebotDialogBodyButtonAccept { background: var(--base-color-dark-blue) !important; border-color: var(--base-color-dark-blue) !important; color: #fff !important; } #CybotCookiebotDialogBodyContentTitle { font-family: var(--base-font-1-bold) !important; font-weight: 400 !important; font-size: 1.125rem !important; color: var(--base-color-black) !important; margin-bottom: 12px !important; } #CybotCookiebotDialog br, #CybotCookiebotDialog div, #CybotCookiebotDialog td { line-height: 1.431 !important; } #CybotCookiebotDialogDetailBodyContent { border-bottom-width: 1px !important; } #CybotCookiebotDialogDetailBody { margin: 0 !important; padding: 0.3rem 1.2rem 0.5rem 1.2rem; width: auto !important; } @media only screen and (max-width: 650px) { #CybotCookiebotDialogBodyButtonDetails { display: block !important; text-align: left !important; float: none !important; background-position: left 12px !important; padding-left: 0px !important; } } @media only screen and (max-width: 500px) { div#CybotCookiebotDialog { width: 100% !important; border-radius: 0 !important; margin: 0 !important; } } #CybotCookiebotDialogBodyButtons { float: left; clear: both; } #CybotCookiebotDialogBodyButtons > a { float: left; } #CybotCookiebotDialogBodyButtons > #CybotCookiebotDialogBodyButtonDetails { float: left; clear: left; padding-top: 13px !important; background: transparent !important; }*/ .wysiwyg .CookieDeclarationType { font-size: inherit !important; overflow: auto; position: relative; padding: 1em !important; margin-left: -1em !important; margin-right: -1em !important; border: 1px solid rgba(0,0,0,0.2) !important; } .CookieDeclarationTable { width: 100% !important; } .CookieDeclarationTable thead { display: none; } .CookieDeclarationTable tbody tr { display: block; width: 100%; padding: 0.35em 0.75em; background: #fff; box-sizing: border-box; line-height: 1.2; } .CookieDeclarationTable tbody tr:not(:last-child) { margin-bottom: .5em; } .CookieDeclarationTable tbody td { display: block; width: 100%; padding-left: 6.25em !important; position: relative; border: 0 !important; box-sizing: border-box !important; max-width: none !important; } .CookieDeclarationTable tbody td::before { content: attr(data-label); display: inline-block; font-family: "Source Sans Pro Regular", sans-serif !important; font-weight: 600; position: absolute; left: 0; } .CookieDeclarationTypeHeader { font-family: "Source Sans Pro Regular", sans-serif !important; font-weight: 600 !important; } .cookieconsent-placeholder > div { background: #e3ebeb; padding: 1.5em; } .cookieconsent-placeholder .btn-set { margin-top: 1.9em; } .cookieconsent-placeholder .headline { margin-bottom: .6em; } .cookieconsent-placeholder[data-accepted="false"] + .embed-wrap { display: none; } blockquote.twitter-tweet { display: none; }@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{visibility:hidden}.splide,.splide__slide{position:relative;outline:none}.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}@font-face { font-family: 'fontello'; src: url('/content/themes/schwarzkopf/fontello/font/fontello.eot?28302404&x30636'); src: url('/content/themes/schwarzkopf/fontello/font/fontello.eot?28302404#iefix&x30636') format('embedded-opentype'), url('/content/themes/schwarzkopf/fontello/font/fontello.woff2?28302404') format('woff2'), url('/content/themes/schwarzkopf/fontello/font/fontello.woff?28302404&x30636') format('woff'), url('/content/themes/schwarzkopf/fontello/font/fontello.ttf?28302404&x30636') format('truetype'), url('/content/themes/schwarzkopf/fontello/font/fontello.svg?28302404#fontello&x30636') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'fontello'; src: url('/content/themes/schwarzkopf/fontello/font/fontello.svg?28302404#fontello&x30636') format('svg'); } } */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-wp-edit:before { content: '\e811'; } /* '' */ @font-face { font-display: swap; font-family:"Roboto Slab Light"; src:url("/content/themes/schwarzkopf/webfonts/RobotoSlab-Light.woff2") format("woff2"),url("/content/themes/schwarzkopf/webfonts/RobotoSlab-Light.woff?x30636") format("woff"),url("/content/themes/schwarzkopf/webfonts/RobotoSlab-Light.otf?x30636") format("opentype"); font-style:normal;font-weight:400; } @font-face { font-display: swap; font-family:"Sailec Bold"; src:url("/content/themes/schwarzkopf/webfonts/Sailec-Bold.woff2") format("woff2"),url("/content/themes/schwarzkopf/webfonts/Sailec-Bold.woff?x30636") format("woff"),url("/content/themes/schwarzkopf/webfonts/Sailec-Bold.otf?x30636") format("opentype"); font-style:normal;font-weight:400; } @font-face { font-display: swap; font-family:"Sailec"; src:url("/content/themes/schwarzkopf/webfonts/Sailec-Regular.woff2") format("woff2"),url("/content/themes/schwarzkopf/webfonts/Sailec-Regular.woff?x30636") format("woff"),url("/content/themes/schwarzkopf/webfonts/Sailec-Regular.otf?x30636") format("opentype"); font-style:normal;font-weight:400; } @font-face { font-display: swap; font-family:"Sailec Regular Italic"; src:url("/content/themes/schwarzkopf/webfonts/Sailec-RegularItalic.woff2") format("woff2"),url("/content/themes/schwarzkopf/webfonts/Sailec-RegularItalic.woff?x30636") format("woff"),url("/content/themes/schwarzkopf/webfonts/Sailec-RegularItalic.otf?x30636") format("opentype"); font-style:normal;font-weight:400; } @font-face { font-display: swap; font-family:"Sailec Light"; src:url("/content/themes/schwarzkopf/webfonts/Sailec-Light.woff2") format("woff2"),url("/content/themes/schwarzkopf/webfonts/Sailec-Light.woff?x30636") format("woff"),url("/content/themes/schwarzkopf/webfonts/Sailec-Light.otf?x30636") format("opentype"); font-style:normal;font-weight:400; } @font-face { font-display: swap; font-family:"Sailec Medium"; src:url("/content/themes/schwarzkopf/webfonts/Sailec-Medium.woff2") format("woff2"),url("/content/themes/schwarzkopf/webfonts/Sailec-Medium.woff?x30636") format("woff"),url("/content/themes/schwarzkopf/webfonts/Sailec-Medium.otf?x30636") format("opentype"); font-style:normal;font-weight:400; } /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 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; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * 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 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #000; color: #fff; text-shadow: none; } ::selection { background: #000; color: #fff; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } img { vertical-align: middle; } fieldset, iframe, figure, blockquote { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } ul, ol, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: normal; } a { text-decoration: none; color: inherit; } [class^="icon-"]:before, [class*=" icon-"]:before { width: auto; margin-right: 0; margin-left: 0; } select::-ms-expand { display: none; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-slide { outline: 0; } .btn-wp-edit { display: block; float: left; position: fixed; bottom: 1rem; left: 1rem; z-index: 10000; color: #fff; background: #222; min-width: 1.875rem; height: 1.875rem; line-height: 1.875rem; text-align: center; border-radius: .9375rem; white-space: nowrap; font-family: Arial; text-transform: uppercase; } .btn-wp-edit i { position: absolute; top: 0; left: 0.55rem; } .btn-wp-edit > span { display: inline-block; position: relative; overflow: hidden; max-width: 0; -webkit-transition: max-width 150ms; -moz-transition: max-width 150ms; -ms-transition: max-width 150ms; -o-transition: max-width 150ms; transition: max-width 150ms; margin-left: 1.875rem; } .btn-wp-edit:hover > span { max-width: 12.5rem; } .btn-wp-edit > span > span { display: inline-block; padding-right: 0.55rem; font-size: .75rem; } .btn-wp-edit { font-size: 16px; bottom: 0; left: 0; min-width: 2.275em; height: 2.275em; line-height: 2.275em; border-radius: 0; } .btn-wp-edit i { left: 0.65em; } .btn-wp-edit > span { margin-left: 2.275em; } .btn-wp-edit > span > span { font-size: .75em; padding-right: .65em; } .btn-wp-edit:hover > span { max-width: 12.5em; } .sn-col-set { letter-spacing:-.31em; *letter-spacing:normal; *word-spacing:-.43em; text-rendering:optimizespeed; display:-webkit-flex; display: flex; -webkit-flex-flow:row wrap; display:-ms-flexbox; -ms-flex-flow:row wrap; flex-flow: row wrap; -ms-align-content:flex-start; -webkit-align-content:flex-start; align-content:flex-start; } .sn-col-set-nowrap { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .sn-col-set > * { display:inline-block; *display:inline; zoom:1; letter-spacing:normal; word-spacing:normal; vertical-align:top; text-rendering:auto; -moz-box-sizing: border-box; box-sizing: border-box; background-clip: padding-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .sn-col-set-1 > * { width: 100%; margin-right: 0; } .sn-col-set-2 > * { width: 50%; } .sn-col-set-3 > * { width: 33.33333333333333333333%; } .sn-col-set-4 > * { width: 25%; } .sn-col-set-5 > * { width: 20%; } .sn-col-set-6 > * { width: 16.66666666666666666666%; } .sn-col-set > .sn-col-auto, .sn-col-set-footer > * { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } html:not(.explorer) .sn-col-set .sn-col-equal-height { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .sn-col-set .sn-col-space-between { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .sn-col-set .sn-col-valigned { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .pull-left { float: left; } .pull-right { float: right; } .btn { border: 0; border-radius: 0; display: inline-block; white-space: nowrap; font-size: 1rem; background: transparent; position: relative; } button.btn { -webkit-appearance: none; appearance: none; } .btn-set { margin-top: 1.2em; } span.loading { height: 0; width: 0; display: inline-block; vertical-align: bottom; position: relative; transition: all 150ms; transform: scale(0); } span.loading img { width: 100%; padding: 0.75rem; position: absolute; top: -0.9rem; left: 0; animation: spin .4s infinite linear; } span.loading.now { height: 1.3rem; width: 1.3rem; transform: scale(1); } img.ajax-loader { display: none !important; } button.btn { -webkit-appearance: none; appearance: none; outline: 0; box-shadow: none; } .lnk { display: inline-block; transition: opacity 250ms; } .btn:hover, .lnk:hover, a:hover span.btn { } .btn span.icon { margin: 0 .875rem; } .btn span.icon, .btn span.label, .lnk span.icon, .lnk span.label { display: inline-block; line-height: 1.4; vertical-align: top; white-space: normal; } .lnk span.icon { margin: 0 .875em; } .btn span.icon:last-child, .lnk span.icon:last-child { margin-right: 0; } .btn span.icon:first-child, .lnk span.icon:first-child { margin-left: 0; } .spanned > span { display: block; } .figure-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; } .figure-contain { background-size: contain; background-position: center center; background-repeat: no-repeat; } .figure-cover img, .figure-contain img { display: none; } img.rounded { display: inline-block; border-radius: 50%; } .to-be-added { transform: translateY(60px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-timing-function: cubic-bezier(0.19,1,.22,1); } .just-added { transform: translateY(0px); opacity: 1; } button.link { all: inherit; cursor: pointer; } address { font-style: normal; } a { text-decoration-skip: ink; } :focus:not(:focus-visible) { outline: none } html { overflow-y: scroll; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wysiwyg a { word-wrap: break-word; } /* DEV */ #breakpoints { position: fixed; bottom: 0; right: 0; background: #000; padding: 0.5em .75em; font-size: 16px; color: #fff; z-index: 20000; } #breakpoints::after { content: 'max'; } /* ROOT */ :root { --base-font-1: "Sailec", sans-serif; --base-font-1-italic: "Sailec Regular Italic", sans-serif; --base-font-1-light: "Sailec Light", sans-serif; --base-font-1-medium: "Sailec Medium", sans-serif; --base-font-1-bold: "Sailec Bold", sans-serif; --base-font-2: "Roboto Slab Light", serif; --base-unit: .06250000000000000000vw; --base-unit-x: 0vw; --base-unit-y: 0vw; --base-unit-mobile: .26666666666666666666vw; --ttf: cubic-bezier(0.19,1,.22,1); --ttf-2: cubic-bezier(0.075, 0.820, 0.165, 1.000); --ttf-3: cubic-bezier(0.64, 0, 0.78, 0); --page-padding-left: calc(96 * var(--base-unit)); --page-padding-right: calc(96 * var(--base-unit)); --page-padding-top: 0; --module-margin: max(6.5625rem, min(calc(267 * var(--base-unit)), 9.375rem)); /* 150px */ --mrgn: 12rem; --mrgn-20: calc(var(--mrgn) * 0.2); --mrgn-30: calc(var(--mrgn) * 0.3); --mrgn-40: calc(var(--mrgn) * 0.4); --mrgn-50: calc(var(--mrgn) * 0.5); --grid-column: calc(88 * var(--base-unit)); --grid-column-fixed: 5.5rem; --grid-gap: calc(32 * var(--base-unit)); --grid-gap-fixed: 2rem; --grid-item: calc(var(--grid-column) + var(--grid-gap)); --grid-item-fixed: calc(var(--grid-column-fixed) + var(--grid-gap-fixed)); --grid-1: var(--grid-item); --grid-1-: calc(var(--grid-item) - var(--grid-gap)); --grid-1-fixed: var(--grid-item-fixed); --grid-1-fixed-: calc(var(--grid-item-fixed) - var(--grid-gap-fixed)); --grid-2: calc(var(--grid-item) * 2); --grid-2-: calc(var(--grid-item) * 2 - var(--grid-gap)); --grid-2-fixed: calc(var(--grid-item-fixed) * 2); --grid-2-fixed-: calc(var(--grid-item-fixed) * 2 - var(--grid-gap-fixed)); --grid-3: calc(var(--grid-item) * 3); --grid-3-: calc(var(--grid-item) * 3 - var(--grid-gap)); --grid-3-fixed: calc(var(--grid-item-fixed) * 3); --grid-3-fixed-: calc(var(--grid-item-fixed) * 3 - var(--grid-gap-fixed)); --grid-4: calc(var(--grid-item) * 4); --grid-4-: calc(var(--grid-item) * 4 - var(--grid-gap)); --grid-4-fixed: calc(var(--grid-item-fixed) * 4); --grid-4-fixed-: calc(var(--grid-item-fixed) * 4 - var(--grid-gap-fixed)); --grid-5: calc(var(--grid-item) * 5); --grid-5-: calc(var(--grid-item) * 5 - var(--grid-gap)); --grid-5-fixed: calc(var(--grid-item-fixed) * 5); --grid-5-fixed-: calc(var(--grid-item-fixed) * 5 - var(--grid-gap-fixed)); --grid-6: calc(var(--grid-item) * 6); --grid-6-: calc(var(--grid-item) * 6 - var(--grid-gap)); --grid-6-fixed: calc(var(--grid-item-fixed) * 6); --grid-6-fixed-: calc(var(--grid-item-fixed) * 6 - var(--grid-gap-fixed)); --grid-7: calc(var(--grid-item) * 7); --grid-7-: calc(var(--grid-item) * 7 - var(--grid-gap)); --grid-7-fixed: calc(var(--grid-item-fixed) * 7); --grid-7-fixed-: calc(var(--grid-item-fixed) * 7 - var(--grid-gap-fixed)); --grid-8: calc(var(--grid-item) * 8); --grid-8-: calc(var(--grid-item) * 8 - var(--grid-gap)); --grid-8-fixed: calc(var(--grid-item-fixed) * 8); --grid-8-fixed-: calc(var(--grid-item-fixed) * 8 - var(--grid-gap-fixed)); --grid-9: calc(var(--grid-item) * 9); --grid-9-: calc(var(--grid-item) * 9 - var(--grid-gap)); --grid-9-fixed: calc(var(--grid-item-fixed) * 9); --grid-9-fixed-: calc(var(--grid-item-fixed) * 9 - var(--grid-gap-fixed)); --grid-10: calc(var(--grid-item) * 10); --grid-10-: calc(var(--grid-item) * 10 - var(--grid-gap)); --grid-10-fixed: calc(var(--grid-item-fixed) * 10); --grid-10-fixed-: calc(var(--grid-item-fixed) * 10 - var(--grid-gap-fixed)); --grid-11: calc(var(--grid-item) * 11); --grid-11-: calc(var(--grid-item) * 11 - var(--grid-gap)); --grid-11-fixed: calc(var(--grid-item-fixed) * 11); --grid-11-fixed-: calc(var(--grid-item-fixed) * 11 - var(--grid-gap-fixed)); --grid-12: calc(var(--grid-item) * 12); --grid-12-: calc(var(--grid-item) * 12 - var(--grid-gap)); --grid-12-fixed: calc(var(--grid-item-fixed) * 12); --grid-12-fixed-: calc(var(--grid-item-fixed) * 12 - var(--grid-gap-fixed)); --base-color-black: #000000; --base-color-dark-blue: #003397; --base-color-blue: #0055fc; --base-color-gray: #585858; --base-color-lightest-gray: #dedede; --base-color-white: #ffffff; --base-color-light-green: #ade7ab; --base-color-rose: #ffa4a4; --base-color-yellow: #ffcd2a; --base-color-light-yellow: #ffeb9b; --base-color-sand: #faf6ed; --base-color-light-blue: #C2EAEF; --base-color-lightest-blue: #e4edef; --slant-angle: calc(251 * var(--base-unit)); --kicker-margin: calc(30 * var(--base-unit)); } @media (min-width: 1920px) { :root { --base-unit: 1.2px; } } @media (max-width: 900px) { :root { --page-padding-right: calc(160 * var(--base-unit)); } } @media (max-width: 500px) { :root { --page-padding-right: var(--page-padding-left); } } /* BASE */ html { scroll-behavior: smooth; } html.is-transitioning, html.is-forced-scrolling { scroll-behavior: auto; } body { font-size: 100%; font-family: var(--base-font-1); font-weight: 400; color: var(--base-color-black); line-height: 1.3; background: #fff; } input, textarea, select, button { font-family: var(--base-font-1); font-weight: 400; color: var(--base-color-black); } img { max-width: 100%; height: auto; } *:not(.has-component-inner) .module-inner, header.main > .inner, footer.main > .inner, *.has-component-inner .component-inner { position: relative; max-width: 1920px; margin: 0 auto; padding-left: var(--page-padding-left); padding-right: var(--page-padding-right); -moz-box-sizing: border-box; box-sizing: border-box; } .module-full-width .module-inner { max-width: none; padding-left: 0; padding-right: 0; } .load-more { text-align: center; } .wysiwyg a { transition: box-shadow 500ms; transition-timing-function: var(--ttf); text-decoration: none; box-shadow: 0 -8px 0 0 rgba(244, 191, 0, 0.2) inset; } .wysiwyg a:hover { text-decoration: none; box-shadow: 0 -8px 0 0 rgba(244, 191, 0, 0.7) inset; } .wysiwyg > *:not(:last-child) { margin-bottom: 1em; } .wysiwyg strong { } .wysiwyg em { font-style: normal; } .wysiwyg > ul:not(.plain), .wysiwyg > ol:not(.plain) { counter-reset: supernovae; } .wysiwyg > ul:not(.plain) li, .wysiwyg > ol:not(.plain) li { position: relative; padding-left: 1.8em; } .wysiwyg > ul:not(.plain) ul li, .wysiwyg > ol:not(.plain) ol li { padding-left: 1em; } .wysiwyg > ul:not(.plain) li:not(:last-child), .wysiwyg > ol:not(.plain) li:not(:last-child) { margin-bottom: 0.5em; } .wysiwyg > ul:not(.plain) li::before { content: ''; position: absolute; display: block; top: 0.55em; left: 0; width: 1.2em; height: 4px; background: var(--base-color-blue); } .wysiwyg > ul:not(.plain) ul li::before { height: 6px; width: 6px; } @media (max-width: 500px) { .wysiwyg > ul:not(.plain) li::before { height: 2px; width: 1.1em; } .wysiwyg > ul:not(.plain) ul li::before { height: 4px; width: 4px; } } .wysiwyg > ol:not(.plain) li::before { content: counter(supernovae) '.'; counter-increment: supernovae; position: absolute; left: 0; } .wysiwyg > ul ul li::before { } .wysiwyg > ul ul, .wysiwyg > ol ol { } .wysiwyg table { width: auto !important; } .wysiwyg table td { width: auto !important; height: auto !important; } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } span.loading img { top: -12px; } span.loading { vertical-align: middle; } .btn-menu { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; color: inherit; } /* HEADLINES */ *[class*="hdln-"], nav.flyout .menu > li > a { font-family: var(--base-font-2); font-size: var(--font-size); font-size: max(var(--min-font-size, 1rem), min(var(--this-font-size), var(--max-font-size, var(--this-font-size)))); --this-font-size: calc(var(--font-size) * (100 / var(--scale-breakpoint)) * 1vw); --scale-breakpoint: 1600; } *[class*="hdln-"][class*="hdln-sans"] { font-family: var(--base-font-1); } *[class*="hdln-"][class*="hdln-sans"][class*="hdln-sans-l"] { font-family: var(--base-font-1-light); } *[class*="hdln-"][class*="hdln-sans"][class*="hdln-sans-b"], nav.flyout .menu > li > a { font-family: var(--base-font-1-bold); } *[class*="hdln-"][class*="hdln-sans"][class*="hdln-sans-m"] { font-family: var(--base-font-1-medium); } .hdln-62 { --font-size: 62; --min-font-size: 1.875rem; --max-font-size: 3.875rem; } .hdln-52 { --font-size: 52; --min-font-size: 1.375rem; --max-font-size: 3.25rem; } .hdln-46 { --font-size: 46; --min-font-size: 1.875rem; --max-font-size: 2.875rem; } .hdln-38 { --font-size: 38; --min-font-size: 1.5rem; --max-font-size: 2.375rem; } .hdln-32 { --font-size: 32; --min-font-size: 1.375rem; --max-font-size: 2rem; } .hdln-24, nav.flyout .menu > li > a { --font-size: 24; --min-font-size: 1.125rem; --max-font-size: 1.5rem; line-height: 1.33333333333333333333; } .hdln-20 { --font-size: 20; --min-font-size: 1rem; --max-font-size: 1.25rem; } .hdln-18 { --font-size: 18; --min-font-size: 1rem; --max-font-size: 1.125rem; } .hdln-14.kicker { --font-size: 14; --min-font-size: .6875rem; --max-font-size: .875rem; text-transform: uppercase; font-family: var(--base-font-1-medium); margin-bottom: var(--kicker-margin); } @media (max-width: 600px) { .hdln-62, .hdln-52, .hdln-46, .hdln-38 { -webkit-hyphens: auto; hyphens: auto; word-break: break-word; } .module-hero *[class*="hdln-"] { -webkit-hyphens: none; hyphens: none; } } /* COPIES */ *[class*="cpy-"] { font-family: var(--base-font-1); font-size: var(--font-size); font-size: max(var(--min-font-size, 1rem), min(var(--this-font-size), var(--max-font-size, var(--this-font-size)))); --this-font-size: calc(var(--font-size) * (100 / var(--scale-breakpoint)) * 1vw); --scale-breakpoint: 1600; } *[class*="cpy-"][class*="cpy-b"] { font-family: var(--base-font-1-bold); } *[class*="cpy-"][class*="cpy-m"] { font-family: var(--base-font-1-medium); } *[class*="cpy-"][class*="cpy-serif"] { font-family: var(--base-font-2); } .cpy-45 { --font-size: 45; --min-font-size: 16px; --max-font-size: 45px; } .cpy-32 { --font-size: 32; --min-font-size: 16px; --max-font-size: 32px; } .cpy-20 { --font-size: 20; --min-font-size: 16px; --max-font-size: 20px; line-height: 1.6; } .cpy-18 { --font-size: 18; --min-font-size: 14px; --max-font-size: 18px; line-height: 1.44444444444444444444; } .cpy-14 { --font-size: 14; --min-font-size: .875rem; --max-font-size: .875rem; line-height: 1.4; } /* PAGE TRANSITIONS */ .transitioner { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: var(--transitioner-z-index, 99); } .transitioner::before { content: ''; position: absolute; display: block; top: -20vh; left: 0; right: 0; bottom: -20vh; background: var(--transitioner-background-color, #e9edf6); opacity: 1; z-index: 1; will-change: transform; transform: skewY(9deg) scaleY(0); transform-origin: center bottom; } .barba-outer, .sn-pt-leave-active, .sn-pt-enter-active { transition: opacity; transition-duration: 1.2s; opacity: 1; } .sn-pt-leave-active .module, .sn-pt-enter-active .module, .barba-once-active .module { transition: opacity 1s, transform 1s; transition-timing-function: cubic-bezier(0.19,1,.22,1); } .sn-pt-leave-active .transitioner::before, .sn-pt-enter-active .transitioner::before, .barba-once-active .transition::before { transition: opacity 2.25s, transform 2.25s; transition-timing-function: var(--ttf); } .sn-pt-enter-active .transitioner::before { transition-delay: .15s; } /* Starting state for leave */ .sn-pt-leave .module { opacity: 1; } .sn-pt-leave .transitioner::before { opacity: 1; transform: skewY(9deg) scaleY(0); } /* Ending state for leave */ .sn-pt-leave-to .module { opacity: 1; } .sn-pt-leave-to .transitioner::before { opacity: 1; transform: skewY(9deg) scaleY(1.5); } /* Starting state for enter */ .sn-pt-enter .module:not(.module-hero):not(.module-hero-navigation):not(.module-hero-slant), .barba-once .module:not(.module-hero):not(.module-hero-navigation):not(.module-hero-slant) { /*opacity: 0;*/ transform: translateY(80px); } .sn-pt-enter .transitioner::before, .barba-once .transitioner::before { opacity: 1; transform: skewY(9deg) scaleY(1.5); } /* Ending state for enter */ .sn-pt-enter-to .module, .barba-once-to .module { opacity: 1; transform: none; } .sn-pt-enter-to .transitioner::before, .barba-once-to .transitioner::before { opacity: 1; transform: skewY(9deg) scaleY(0); transform-origin: center top; transition-duration: 1.25s; } /* ON SCREEN */ /* clip left to right */ *[data-ios] *[data-ios-item="a"] { opacity: 0; -webkit-clip-path: inset(0% 100% 0% 0%); clip-path: inset(0% 100% 0% 0%); transition: clip-path 1.5s, -webkit-clip-path 1.5s, opacity 1.5s; transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms)); will-change: opacity; } *[data-ios].is-on-screen *[data-ios-item="a"] { opacity: 1; -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } /* clip top to bottom */ *[data-ios] *[data-ios-item="b"] { opacity: 0; -webkit-clip-path: inset(0% 0% 100% 0%); clip-path: inset(0% 0% 100% 0%); transition: clip-path 1.5s, -webkit-clip-path 1.5s, opacity 1.5s; transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms)); will-change: opacity; } *[data-ios].is-on-screen *[data-ios-item="b"] { opacity: 1; -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } /* pop randomly */ *[data-ios] *[data-ios-item="c"] { transform: scale(0.8); opacity: 0; transition: transform 1s, opacity 1s; transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-delay: calc((var(--ios-random) * 30ms) + var(--ios-delay, 0ms)); will-change: opacity; } *[data-ios].is-on-screen *[data-ios-item="c"] { opacity: 1; transform: none; } /* clip vertically from center */ *[data-ios] *[data-ios-item="d"] { opacity: 0; -webkit-clip-path: inset(50% 0% 50% 0%); clip-path: inset(50% 0% 50% 0%); transition: clip-path 1.5s, -webkit-clip-path 1.5s, opacity 1.5s; transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms)); will-change: opacity; } *[data-ios].is-on-screen *[data-ios-item="d"] { opacity: 1; -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } /* move in from bottom */ *[data-ios] *[data-ios-item="e"] { opacity: 0; transform: translateY(2vw); transition: opacity 1.5s, transform 1.5s; transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms)); will-change: opacity; } *[data-ios].is-on-screen *[data-ios-item="e"] { opacity: 1; transform: none; } /* move in from right */ *[data-ios] *[data-ios-item="f"] { opacity: 0; transform: translateX(20vw); transition: opacity 1.5s, transform 1.5s; transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-delay: calc((var(--ios-item-index) * 100ms) + var(--ios-delay, 0ms)); will-change: opacity; } *[data-ios].is-on-screen *[data-ios-item="f"] { opacity: 1; transform: none; } /* BUTTONS */ button, .btn, .lnk, .filter-form-list .styled-select select { margin: 0; border: 0; padding: 0; border-radius: 0; box-shadow: none; background: transparent; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-family: var(--base-font-1-medium); line-height: normal; font-size: var(--font-size); font-size: max(var(--min-font-size, 1rem), min(var(--this-font-size), var(--max-font-size, var(--this-font-size)))); --this-font-size: calc(var(--font-size) * (100 / var(--scale-breakpoint)) * 1vw); --scale-breakpoint: 1600; transition: filter 750ms; transition-timing-function: var(--ttf); } .btn:not(.btn-icon-only) svg path, .lnk svg path { fill: currentColor; } .btn:not(.btn-white):not(.btn-b):hover { filter: brightness(1.3); } .btn-a, .filter-form-list .styled-select select { border-radius: 3px; padding: .7em 2.22222222222222222222em .6em; --font-size: 18; --min-font-size: 14px; --max-font-size: 18px; } .filter-form-list .styled-select select { padding-left: 1em; line-height: 1.4; } .btn-b { border-radius: 3px; padding: .7em 2.22222222222222222222em .6em; background: var(--base-color-white); color: var(--base-color-dark-blue); border: 1px solid var(--base-color-dark-blue); --font-size: 18; --min-font-size: 14px; --max-font-size: 18px; } @media (max-width: 500px) { .btn-a, .btn-b, .filter-form-list .styled-select select { padding: .6em 1.6em .5em; } .btn svg, .lnk:not(.lnk-social) svg { transform: scale(0.8); display: inline-block; vertical-align: text-top; } } .btn-b span.icon:first-child { margin-left: -0.8em; } .btn-blue { background: var(--base-color-blue); color: #fff; } .btn-dark-blue, .filter-form-list .styled-select select { background: var(--base-color-dark-blue); color: #fff; } .btn-white { background: var(--base-color-white); color: var(--base-color-dark-blue); } .btn-icon-only { --size: 1.875em; width: var(--size); height: var(--size); } .btn-icon-only svg { display: block; width: 100%; height: 100%; } .btn-icon-only svg path[stroke] { stroke: currentColor; } .btn-icon-only span.label { display: none; } .btn-icon-only span.icon { margin-right: 0; } .btn-prev-next { background: var(--base-color-dark-blue); color: var(--base-color-white); --size: max(32px, calc(52 * var(--base-unit))); width: var(--size); height: var(--size); border-radius: 50px; position: relative; transition: background 250ms; } .btn-prev-next span.label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .btn-prev-next span.icon { margin-right: 0; } .btn-prev-next svg { display: block; --icon-size: calc(var(--size) * 0.538); width: var(--icon-size); height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .splide-nav { display: flex; flex-flow: row nowrap; } .splide-nav button + button { margin-left: calc(var(--grid-gap) / 2); } *[data-splide-end="true"] .btn-next, *[data-splide-start="true"] .btn-prev { background: var(--base-color-lightest-gray); pointer-events: none; } .btn-disabled, .btn-disabled:hover, .btn-disabled:focus { filter: grayscale(1) !important; cursor: not-allowed; opacity: 0.25; } /* LINKS */ .lnk-white { color: var(--base-color-white); } .lnk-dark-blue { color: var(--base-color-dark-blue); } .lnk-a { --font-size: 18; --min-font-size: 14px; --max-font-size: 18px; } .lnk-a svg { transition: transform 150ms; } .lnk-a:not(.lnk-social):hover svg { transform: translateX(4px); } .lnk-contact { --font-size: 20; --min-font-size: 1rem; --max-font-size: 20px; color: var(--base-color-dark-blue); pointer-events: none; display: flex; flex-flow: row nowrap; word-break: break-word; } .lnk-contact svg { width: .85em; height: auto; vertical-align: text-top; } .lnk-contact svg path { stroke: currentColor; stroke-width: 1.8px; } .lnk-contact span.icon { margin-right: 0.5em; } .lnk-contact span.label { pointer-events: all; } .lnk-social { --font-size: 20; --min-font-size: 1rem; --max-font-size: 20px; --icon-color: currentColor; white-space: nowrap; } .lnk-social.type-facebook { --icon-color: #1877f2; } .lnk-social.type-linkedin { --icon-color: #0077b5; } .lnk-social.type-twitter { --icon-color: #1da1f2; } .lnk-social.type-instagram { --icon-color: #c03584; } .lnk-social.type-youtube { --icon-color: #fe0201; } .lnk-social span.label, .lnk-social span.icon, .lnk-social svg, .lnk-social span span { vertical-align: middle !important; line-height: 1 !important; display: inline-block; } .lnk-social span.label span { padding-top: 0.2em; } .lnk-social svg { width: max(20px, calc(25 * var(--base-unit))); height: auto; } .lnk-social svg path, .lnk-social svg circle { fill: var(--icon-color); } .link-list { display: flex; flex-flow: row wrap; border-radius: 3px; overflow: hidden; } .link-list > li { width: 50%; min-width: 180px; margin-bottom: .8em; } .link-list > li:last-child { margin-bottom: 0; } @media (max-width: 1000px) { .link-list > li { min-width: 150px; width: auto; } } /* FORMS */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: var(--color); -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; } ::-webkit-input-placeholder { color: var(--color); } ::placeholder { color: var(--color); } .styled-select, .styled-search { position: relative; } .styled-select select { line-height: 1.4; padding-left: 1em; padding-right: 3em !important; max-width: 100%; cursor: pointer; } .styled-select .icon { pointer-events: none; } .styled-select .icon svg { position: absolute; display: block; top: 50%; right: 1em; transform: translateY(-50%); width: max(18px, calc(24 * var(--base-unit))); } .standard-form-list .styled-select .icon svg path { fill: currentColor; } .screen-reader-response { display: none; } .wpcf7-not-valid-tip { position: absolute; left: max(6px, calc(12 * var(--base-unit))); top: 100%; display: inline-block; color: #a00; background: var(--base-color-white); z-index: 2; font-size: 14px; pointer-events: none; transform: translateY(-40%); padding: 3px 8px; border-radius: 3px; } .wpcf7-response-output { padding: 2em 0; } .wpcf7-form.unaccepted .wpcf7-response-output, .wpcf7-form.invalid .wpcf7-response-output { color: #a00; } .wpcf7 form.sent .response-wrapper, .wpcf7 form.sent .wpcf7-response-output { display: none !important; } .response-wrapper.bottom div.wpcf7-mail-sent-ok { display: none !important; } .outer-form-wrap + .success-copy { display: none; } .form-list > li { position: relative; } .form-list li.input input, .form-list li.input textarea, .standard-form-list li.select .styled-select select, .form-list li.checkboxes .wpcf7-list-item label { --font-size: 20; --min-font-size: 1rem; --max-font-size: 1.25rem; font-family: var(--base-font-1); font-size: var(--font-size); font-size: max(var(--min-font-size, 1rem), min(var(--this-font-size), var(--max-font-size, var(--this-font-size)))); --this-font-size: calc(var(--font-size) * (100 / var(--scale-breakpoint)) * 1vw); --scale-breakpoint: 900; } .form-list li.input input, .form-list li.input textarea, .standard-form-list li.select .styled-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; border: 0; box-shadow: none; border-radius: 3px; line-height: normal; padding: .95em 1em; padding-bottom: .75em; width: 100%; box-sizing: border-box; accent-color: var(--base-color-dark-blue); --color: var(--base-color-black); background: var(--base-color-white); } .form-list li.input textarea { height: 10em; } .form-list input[type="date"] { min-height: 3em; } .form-list input[type="checkbox"], .form-list input[type="radio"] { accent-color: var(--base-color-dark-blue); transform: scale(1.3); } .form-list label { display: block; margin-bottom: .625rem; } .form-list li.checkboxes .wpcf7-list-item { display: block; position: relative; padding-left: 1.75em; user-select: none; cursor: pointer; margin-top: 1em; } .form-list li.checkboxes input[type="checkbox"] { position: absolute; left: 0; top: 0.2em; } @media (max-width: 500px) { .form-list li.checkboxes input[type="checkbox"] { top: 0; } } .form-list li.checkboxes .wpcf7-list-item label { cursor: pointer; } .form-list li.gdpr.newsletter-checkbox label .wpcf7-list-item-label { display: none; } .form-list li.gdpr.newsletter-checkbox .wysiwyg strong { font-weight: normal; font-family: var(--base-font-1-bold); } .form-list li.gdpr > .gdpr-col-set { display: flex; flex-flow: row nowrap; } .form-list li.gdpr > .gdpr-col-set > div:first-child { width: 1.75em; flex-shrink: 0; } .form-list li.gdpr label { cursor: pointer; user-select: none; } .form-list li + li.is-misc { display: none; } .form-list li.show-misc + li.is-misc { display: block; } .form-list span.hint { display: block; opacity: 0.5; margin-top: 3px; font-size: 14px; } .standard-form-list > li + li { margin-top: max(25px, calc(40 * var(--base-unit))); } .form-list > li + li.gdpr { margin-top: max(50px, calc(80 * var(--base-unit))); } .newsletter-form-list > li + li { margin-top: .9375em; } .newsletter-form-list li.input input { background: #fff; } .filter-form-list { display: flex; flex-flow: row nowrap; --gap: calc(var(--page-padding-left) / 2); } .filter-form-list > li { margin-right: var(--gap); overflow: hidden; } .filter-form-list > li:last-child { margin-right: 0; } .filter-form-list label { color: var(--base-color-gray); } @media (max-width: 700px) { .filter-form-list { display: flex; flex-flow: column nowrap; --gap: 0; } .filter-form-list > li + li { margin-top: 20px; } .filter-form-list .styled-select select { width: 100%; } .filter-form-list > li.select label { display: none; } } /* HEADER */ :root { --header-height: 60px; } header.main { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: var(--base-color-white); box-shadow: 0 5px 15px 0 rgba(0,0,0,0.35); } header.main > .inner { padding-right: var(--page-padding-left); } .btn-menu { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: none; position: absolute; right: var(--page-padding-left); top: 50%; transform: translateY(-50%); --size: 34px; width: var(--size); height: var(--size); } .btn-menu .bar { display: block; height: 2px; width: 100%; background: var(--base-color-dark-blue); position: absolute; left: 0; } .btn-menu .bar-1 { top: 24%; } .btn-menu .bar-2 { top: 48%; } .btn-menu .bar-3 { top: 72%; } header.main .language { display: none; } .hero-navigation-col-set, .header-col-set { display: flex; flex-flow: row nowrap; } .header-col-set { height: var(--header-height); } html { scroll-padding-top: calc(var(--header-height) * 1.5); } .hero-navigation-col-set .site-title, header.main .site-title { width: calc(268 * var(--base-unit)); position: relative; } header.main .site-title a { display: block; } header.main .site-title .logo, header.main .site-title .logo-star { transition: opacity 500ms, transform 500ms; } header.main .site-title .logo { display: block; position: relative; opacity: 1; } header.main .site-title .logo svg { width: auto; height: calc(var(--header-height) - 10px); padding-top: 5px; } header.main .site-title .logo-star { position: absolute; top: 50%; left: var(--grid-1-); width: 45px; height: 24px; z-index: 2; transform: translateY(-50%) scale(0.5); opacity: 0; } body.scrolled-more .site-title .logo { opacity: 0; } body.scrolled-more .site-title .logo-star { opacity: 1; transform: translateY(-50%) scale(1); } header.main .site-title .logo-star svg { width: 100%; height: auto; } .hero-navigation-col-set nav, .header-col-set nav { margin-left: auto; } nav.header { --color: var(--base-color-light-green); --highlight-color: var(--base-color-yellow); color: var(--color); display: flex; flex-flow: row nowrap; align-items: center; --gap: 1.94444444444444444444em; } nav.header:not(.hero-header) { --color: var(--base-color-black); --highlight-color: var(--base-color-blue); --bar-color: var(--base-color-yellow); } nav.header ul.menu { display: flex; flex-flow: row nowrap; } nav.header .menu > li { position: relative; } nav.header .menu > li + li { margin-left: var(--gap); } nav.header a { transition: color 150ms; } nav.header a:hover, nav.header .current-menu-any > a, nav.header li:hover > a, nav.header li:focus-within > a { color: var(--highlight-color); } nav.header a:hover svg path { fill: var(--highlight-color); } nav.header .menu > li > a { display: inline-block; height: var(--header-height); line-height: var(--header-height); white-space: nowrap; position: relative; } nav.header .menu > li > a::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--bar-color); transform: scaleY(0); } nav.header .menu > li.current-menu-any > a::before { transform: none; } nav.header li.btn-donate .title-wrap, .donate-shortcut a > span { display: inline-block; background: #0055fc; line-height: normal; padding: 0.45em 0.7em 0.26em; border-radius: 3px; color: #fff; } .donate-shortcut { font-family: var(--base-font-1-medium); } nav.header .icon-wrap + .title-wrap { display: none; } nav.header .icon-wrap svg { position: relative; transform: translateY(15%); } nav.header .icon-wrap svg path { fill: var(--color); transition: fill 150ms; } nav.header .sub-menu-wrapper { position: absolute; min-width: 150%; top: 100%; left: 50%; color: var(--base-color-white); font-family: var(--base-font-1); padding: calc(var(--gap) / 2); line-height: 1.3; opacity: 0; will-change: opacity; transition: opacity; transition-timing-function: var(--ttf); transition-duration: 400ms; pointer-events: none; transform: translateX(-50%); } nav.header .menu > li:focus-within .sub-menu-wrapper, nav.header .menu > li:hover .sub-menu-wrapper { opacity: 1; pointer-events: all; } nav.header .sub-menu-wrapper::after { content: ''; display: block; position: absolute; top: 0; left: -5px; right: -5px; bottom: -5px; background: var(--base-color-blue); z-index: -1; pointer-events: none; transform: scale(.8); opacity: 0; transition: opacity, transform; transition-timing-function: var(--ttf-2); transition-duration: 400ms; transform-origin: center top; } nav.header .menu > li:focus-within .sub-menu-wrapper::after, nav.header .menu > li:hover .sub-menu-wrapper::after { opacity: 1; transform: none; } nav.header .sub-menu > li + li { margin-top: calc(var(--gap) / 3); } nav.header .sub-menu { --highlight-color: var(--base-color-yellow); } nav.header .sub-menu a { display: block; white-space: nowrap; max-width: 25ch; overflow: hidden; text-overflow: ellipsis; } nav.header .sub-menu-wrapper.depth-2 { display: none; } .flyout-menu { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; z-index: 150; background: var(--base-color-dark-blue); color: var(--base-color-white); opacity: 0; pointer-events: none; --columns: 3; --rows: 2; visibility: hidden; transition: opacity 800ms; transition-timing-function: var(--ttf); } nav.flyout .sub-menu-wrapper.depth-2 { display: none; } nav.flyout .btn-search { display: none; } nav.flyout svg { display: none; } .flyout-menu .row-3 { display: none; } @media (min-width: 501px) { .flyout-menu > .inner { display: flex; flex-flow: column nowrap; height: 100%; } .flyout-menu .row-1 { height: 100%; } nav.flyout, nav.flyout > .inner, nav.flyout > .inner > div, nav.flyout ul.menu { height: 100%; } nav.flyout ul.menu { display: flex; flex-flow: row wrap; } nav.flyout ul.menu > li:nth-child(1) { --index: 0; } nav.flyout ul.menu > li:nth-child(2) { --index: 1; } nav.flyout ul.menu > li:nth-child(3) { --index: 2; } nav.flyout ul.menu > li:nth-child(4) { --index: 3; } nav.flyout ul.menu > li:nth-child(5) { --index: 4; } nav.flyout ul.menu > li:nth-child(6) { --index: 5; } nav.flyout ul.menu > li { width: calc(100% / var(--columns)); min-height: calc(100% / var(--rows)); background: linear-gradient(135deg, #00308f, #003090, #003191, #003193, #003295, #003396, #003397); box-sizing: border-box; padding: max(38px, calc(var(--page-padding-left) * 0.75)) calc(var(--page-padding-left) / 2); padding-right: 2em; } nav.flyout ul.menu > li > * { display: block; transition: transform, opacity; transition-duration: 800ms; transition-timing-function: var(--ttf); transition-delay: 800ms; opacity: 0; transform: translateX(-10px); } nav.flyout .menu > li > a > span { display: block; } nav.flyout .sub-menu-wrapper.depth-1 { margin-top: 1em; } nav.flyout .sub-menu > li + li { margin-top: 0.4em; } nav.flyout .sub-menu > li .title-wrap { width: 100%; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flyout-menu nav li > a:hover, .flyout-menu nav li > a:focus, .flyout-menu nav li.current-menu-any > a { text-decoration: underline; } .flyout-menu .row-2 { padding: 1.3em calc(var(--page-padding-left) / 2); background: #003db5; } .flyout-menu nav.legal ul.menu { display: flex; flex-flow: row nowrap; } .flyout-menu nav.legal .btn-search { margin-right: auto; } .flyout-menu nav.legal .btn-search a { display: inline-block; } .flyout-menu nav.legal .btn-search span.icon-wrap { margin-right: 0.75em; } .flyout-menu nav.legal svg { width: 1em; height: auto; margin-bottom: -2px; } .flyout-menu nav.legal svg path { fill: var(--base-color-white); } } @media (max-width: 1100px) { nav.header { display: none; } .flyout-menu { visibility: visible; } body.menu .flyout-menu { opacity: 1; pointer-events: all; } body.menu nav.flyout ul.menu > li > * { transform: none; opacity: 1; transition-delay: calc((var(--index) * 50ms) + 100ms); } .btn-menu { display: block; } .btn-menu .bar { transform-origin: center center; transition: transform, top; transition-timing-function: var(--ttf); transition-duration: 250ms; } body.menu .btn-menu .bar-1 { top: 48%; transform: rotate(45deg); } body.menu .btn-menu .bar-2 { transform: scaleX(0); } body.menu .btn-menu .bar-3 { top: 48%; transform: rotate(-45deg); } header.main .language { display: flex; flex-flow: row nowrap; position: absolute; right: calc(var(--page-padding-right) + 40px); top: calc(50% + 2px); transform: translateY(-50%); align-items: center; } header.main .language a { display: block; color: var(--base-color-dark-blue); text-align: center; padding: 0.5em 1em 0.5em 0; font-size: 18px; } header.main .language .lang a .title-wrap { transform: translateY(2px); display: inline-block; } } @media (max-width: 800px) { .flyout-menu { --columns: 2; --rows: 3; } } @media (max-width: 600px) { .flyout-menu .row-2 { display: none; } } @media (max-width: 500px) { .flyout-menu { overflow: auto; clip-path: inset(-2% -2% 100% -2%); opacity: 1; transition: clip-path 500ms; transition-timing-function: var(--ttf); } body.menu .flyout-menu { clip-path: inset(-2%); } .flyout-menu > .inner { padding: calc(40 * var(--base-unit-mobile)) var(--page-padding-left); } .flyout-menu .row-1, .flyout-menu .row-2 { opacity: 0; transform: translateY(-20px); transition: transform, opacity; transition-duration: 500ms; transition-timing-function: var(--ttf); } body.menu .flyout-menu .row-1, body.menu .flyout-menu .row-2 { transform: none; opacity: 1; } nav.flyout .menu > li > a { font-size: calc(18 * var(--base-unit-mobile)); display: block; padding: calc(16 * var(--base-unit-mobile)) 0; } nav.flyout .menu > li { border-bottom: 1px solid #0043c8; position: relative; } nav.flyout .sub-menu-wrapper.depth-1 { font-size: calc(14 * var(--base-unit-mobile)); max-height: 0px; opacity: 0; transform: translateY(-15px); overflow: hidden; position: relative; transition: max-height, opacity, transform; transition-timing-function: var(--ttf); transition-duration: 500ms; } nav.flyout li.open .sub-menu-wrapper.depth-1 { opacity: 1; transform: none; max-height: var(--max-height, 500px); } nav.flyout .sub-menu.depth-1 { padding-bottom: calc(25 * var(--base-unit-mobile)); } nav.flyout .sub-menu.depth-1 > li + li { margin-top: 0.8em; } nav.flyout .sub-menu > li > a { display: block; } nav.flyout .menu > li > a > span { display: block; position: relative; } nav.flyout svg { display: block; pointer-events: none; position: absolute; right: 0; top: 50%; width: calc(15 * var(--base-unit-mobile)); height: auto; transform: translateY(-50%); transform-origin: center center; transition: transform; transition-timing-function: var(--ttf); transition-duration: 500ms; } nav.flyout svg path { fill: var(--base-color-white); } nav.flyout li.open svg { transform: rotate(180deg) translateY(50%); } nav.flyout .btn-donate svg { display: none; } .flyout-menu .row-2 { display: block; margin-top: calc(30 * var(--base-unit-mobile)); padding-bottom: var(--header-height); } .flyout-menu nav.legal .btn-search { display: block !important; } .flyout-menu nav.legal .btn-search .icon-wrap { display: none; } .flyout-menu nav.legal ul.menu > li { display: block; padding: 0; } .flyout-menu nav.legal .menu > li::before { display: none; } .flyout-menu nav.legal a { font-size: calc(14 * var(--base-unit-mobile)); display: block; } .flyout-menu nav.legal li + li { margin-top: 0.3em; } .flyout-menu .row-3 { display: block; position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; background: #002266; padding: 0 var(--page-padding-left); line-height: var(--header-height); height: var(--header-height); } .flyout-menu nav.social svg { height: 1.5em; width: auto; vertical-align: middle; } .flyout-menu nav.social svg path, .flyout-menu nav.social svg circle { fill: var(--base-color-white); } .flyout-menu nav.social ul { display: flex; flex-flow: row nowrap; justify-content: center; } .flyout-menu nav.social li { margin: 0 .8em; } .flyout-menu nav.social .title-wrap { display: none; } header.main .language a { font-size: 14px; } } /* FOOTER */ footer.main { border-bottom: max(15px, calc(50 * var(--base-unit))) solid var(--base-color-dark-blue); color: var(--base-color-dark-blue); position: relative; z-index: 2; } footer.main > .inner { padding-top: calc(150 * var(--base-unit)); padding-bottom: calc(100 * var(--base-unit)); } .footer-site-title img { width: max(150px, calc(200 * var(--base-unit))); height: auto; } footer.main .row-2 { margin-top: calc(60 * var(--base-unit)); } footer.main .row-3 { margin-top: calc(46 * var(--base-unit)); display: flex; flex-flow: row nowrap; } footer.main .row-3 .col-1 { margin-right: auto; } nav.footer .menu { justify-content: space-between; } nav.footer .menu > li { width: calc(100% / 5); box-sizing: border-box; padding-right: 1.5em; } nav.footer .menu > li > a { font-family: var(--base-font-1-bold); } nav.footer .menu > li > .sub-menu-wrapper { margin-top: 1.4rem; } nav.footer .sub-menu.depth-1 > li + li { margin-top: 0.6em; } nav.footer li.btn-search { display: none; } nav.footer .sub-menu-wrapper.depth-2 { display: none; } nav.legal { --bullet-padding: 0.6em; } footer.main nav.legal li.btn-search { display: none; } nav.legal .menu > li { padding-right: var(--bullet-padding); display: inline; } nav.legal .menu > li:nth-child(n+3)::before { content: '·'; padding-right: var(--bullet-padding); } .btn-back-to-top svg path { fill: var(--base-color-dark-blue); } @media (max-width: 700px) { footer.main .row-2 { display: none; } footer.main .row-3 { margin-top: 50px; } footer.main > .inner { position: relative; padding-bottom: calc(150 * var(--base-unit)); } footer.main .row-3 .col-2 { position: absolute; right: var(--page-padding-right); top: calc((150 * var(--base-unit)) + 10px); } } @media (max-width: 600px) { nav.legal .menu > li { display: block; padding-right: 0; } nav.legal .menu > li::before { display: none; } }/* Theme Name: Schwarzkopf-Stiftung Author: SUPERNOVÆ Author URI: https://www.supernov.ae/ Version: 2021 */ /* META */ .meta-date { color: var(--base-color-blue); } /* GRID */ #grid { position: fixed; top: 0; left: var(--page-padding-left); right: 0; bottom: 0; z-index: 999; pointer-events: none; display: none; } #grid > span { position: absolute; top: 0; bottom: 0; left: calc(var(--grid-1) * var(--index)); width: var(--grid-column); background: rgba(255,40,40,0.08); } /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (max-width: 1600px) { #breakpoints::after { content: '1600px'; } } /* 1600 */ @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { } /* ========================================================================== Helper classes ========================================================================== */ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Print styles ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 1cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .cookie-bar, .btn-wp-edit { display: none !important; } header.main, footer.main { display: none; } } /* BREADCRUMB */ .breadcrumb-wrap { margin-bottom: 4.6875rem; } nav.breadcrumb { color: var(--base-color-gray); } nav.breadcrumb ol { display: flex; flex-flow: row wrap; } nav.breadcrumb li > span { padding-right: 0.5em; } nav.breadcrumb li + li > span { padding-left: 0.5em; } nav.breadcrumb li + li::before { content: '/'; } nav.breadcrumb a:hover { text-decoration: underline; } @media (max-width: 800px) { .breadcrumb-wrap { margin-top: 1em; margin-bottom: 2em; } } @media (max-width: 500px) { .breadcrumb-wrap { margin-top: 2em; } .breadcrumb-wrap.cpy-14 { --min-font-size: 12px; } nav.breadcrumb { margin-left: calc(var(--page-padding-left) * -1); margin-right: calc(var(--page-padding-right) * -1); } nav.breadcrumb > .inner { overflow: hidden; overflow-x: scroll; width: 100%; box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none; } nav.breadcrumb > .inner::-webkit-scrollbar { display: none; } nav.breadcrumb ol { flex-flow: row nowrap; white-space: nowrap; width: fit-content; padding: 0 var(--page-padding-left); } } /* EVENTS */ article.event-article { --padding-y: max(1.875em, calc(50 * var(--base-unit))); } article.upcoming-event-article { display: flex; flex-flow: column nowrap; height: 100%; --padding-y: 1.875em; } article.event-article .article-date { border-bottom: 2px solid var(--base-color-dark-blue); } article.event-article .article-body { padding: var(--padding-y) 0; border-bottom: 2px solid var(--base-color-dark-blue); flex-grow: 1; display: flex; flex-flow: column nowrap; } article.event-article .article-footer { padding-top: var(--padding-y); } article.event-article .headline a:hover { text-decoration: underline; } article.upcoming-event-article .meta-list { padding-top: max(15px, calc(45 * var(--base-unit))); margin-top: auto; } article.upcoming-event-article .meta-date-and-time > * { display: inline; } article.event-article .meta-guest { color: var(--base-color-blue); } article.upcoming-event-article .meta-place { color: var(--base-color-blue); opacity: 0.6; } article.upcoming-event-article .meta-list > li + li { margin-top: 0.5em; } article.event-article .headline a { display: block; } .meta-date-and-time .start-date .meta-time, .meta-date-and-time .end-date { color: var(--base-color-blue); opacity: 0.6; } article.event-article .meta-date { margin-right: 0.2em; } article.event-article .end-date { margin-bottom: 0.4em; } article.event-article .meta-time { white-space: nowrap; } article.large-event-article .event-article-col-set { display: flex; flex-flow: row nowrap; --col-1-width: 360px; } article.large-event-article .event-article-col-set > .col-1 { width: var(--col-1-width); margin-right: auto; } article.large-event-article .event-article-col-set > .col-2 { width: calc(100% - var(--col-1-width) - var(--grid-1-)); } article.large-event-article .excerpt { margin-top: max(16px, calc(40 * var(--base-unit))); } article.large-event-article .meta-guest { margin-top: max(16px, calc(20 * var(--base-unit))); } article.large-event-article .meta-place { margin-bottom: max(16px, calc(20 * var(--base-unit))); } article.large-event-article .article-body { padding-bottom: 0; border-bottom: 0 } @media (max-width: 1100px) { article.large-event-article .event-article-col-set { --col-1-width: 25vw; } } @media (max-width: 900px) { article.large-event-article .event-article-col-set { --col-1-width: 30vw; } article.large-event-article { margin-left: calc(var(--page-padding-left) * -1); } article.large-event-article .event-article-col-set > .col-2 { width: calc(100% - var(--col-1-width) - (var(--page-padding-left) / 2)); } } @media (max-width: 600px) { article.event-article { --padding-y: 25px; } article.event-article .article-body, article.event-article .article-date { border-bottom-width: 1px; } article.event-article .article-body { border: 0; padding-bottom: 20px; } article.event-article .article-footer { padding-top: 0; } article.upcoming-event-article .meta-list > li + li { margin-top: 0; } article.large-event-article { margin-left: 0; } article.large-event-article .event-article-col-set { --col-1-width: 100%; flex-flow: column nowrap; } article.large-event-article .event-article-col-set > .col-1 { max-width: 250px; } article.large-event-article .event-article-col-set > .col-2 { width: 100%; padding-top: 20px; } article.large-event-article .headline.hdln-38 { --min-font-size: 22px; } article.large-event-article .meta-place.cpy-20 { --min-font-size: 14px; } } .generic-articles-list { --margin: max(2rem, calc(100 * var(--base-unit))); } .generic-articles-list > li { display: block; } .generic-articles-list > li + li { margin-top: var(--margin); } article.generic-article.has-no-image { max-width: 840px; width: calc(840 * var(--base-unit)); } article.generic-article.has-image { max-width: var(--grid-11-); } article.generic-article .headline { color: var(--base-color-blue); } article.generic-article .headline + .copy { margin-top: 1.5em; } article.generic-article .headline a:hover { text-decoration: underline; } article.generic-article .btn-set { margin-top: max(1rem, calc(40 * var(--base-unit))); } article.generic-article.has-image { display: flex; flex-flow: row nowrap; } article.generic-article.has-image figure { width: var(--grid-3); margin-right: auto; } article.generic-article.has-image .article-body { width: var(--grid-7); } .empty-state { padding-left: 2em; position: relative; max-width: var(--grid-7); } .empty-state .icon { position: absolute; left: 0; margin-top: -2px; } .empty-state .icon svg { width: 1.4em; height: auto; } @media (max-width: 1300px) { article.generic-article.has-no-image { max-width: 680px; width: auto; } } @media (max-width: 1200px) { .empty-state { max-width: 630px; } } /* MODULE MARGINS */ .modules::before { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.4; background-image: linear-gradient(-19deg, rgba(255,255,255,0.00) 60%, #003399 150%); pointer-events: none; } .mrgn-100 { margin-bottom: var(--module-margin); } .mrgn-50 { margin-bottom: calc(var(--module-margin) / 2); } .mrgn-0-if-last:last-child { margin-bottom: 0; } /* MODULE COLUMNS */ .module-col-set, .image-copy-teaser-col-set { display: flex; flex-flow: row nowrap; } .module-col-set > .col-1, .image-copy-teaser-col-set > .col-1 { width: var(--grid-4-); margin-right: auto; } .module-col-set > .col-2, .image-copy-teaser-col-set > .col-2 { width: var(--grid-8-); } @media (max-width: 900px) { .module-col-set { display: block; } .module-col-set > .col-1, .module-col-set > .col-2 { width: 100%; margin-right: 0; } .module-col-set .module-header.col-1 { margin-bottom: max(50px, calc(50 * var(--base-unit))); } .module-header .headline.spanned > span { display: inline; } } /* MODULE HEADERS */ .module-header-a { margin-bottom: max(50px, calc(100 * var(--base-unit))); } .module-header-b { margin-bottom: max(50px, calc(150 * var(--base-unit))); } .module-header-c { margin-bottom: max(50px, calc(50 * var(--base-unit))); } .module-header .headline { color: var(--base-color-blue); } /* MODULE FOOTERS */ .module-footer-a { margin-top: max(50px, calc(120 * var(--base-unit))); } article.news-article { position: relative; } article.news-article figure { position: absolute; top: 50%; left: calc(var(--grid-4) * -1); width: var(--grid-4-); pointer-events: none; transform: translateY(-50%); } article.news-article figure img { display: block; position: relative; width: 100%; height: auto; opacity: 0; transform: scale(0.95); transform-origin: center center; transition: transform, opacity; transition-duration: 750ms; transition-timing-function: var(--ttf-2); } html.no-touchevents article.news-article:hover figure img { opacity: 1; transform: none; } article.news-article::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: var(--grid-3-); height: 2px; background: var(--base-color-dark-blue); } article.news-article .article-date { margin-bottom: .625em; } article.news-article .article-body { margin-bottom: 1.5625em; } article.news-article .article-footer { text-align: right; } article.news-article .headline, .search-results-item .headline { margin-bottom: 1.25em; } article.news-article .headline a:hover, .search-results-item .headline a:hover { text-decoration: underline; } .news-list > li + li article.news-article, .press-list > li + li article.news-article { padding-top: var(--margin); } @media (max-width: 900px) { article.news-article::after { display: none; } article.news-article .article-footer { text-align: left; } } .module-pagination { margin-top: max(50px, calc(150 * var(--base-unit))); background: #f2f5fa; padding: 1em; padding-left: 2em; } nav.pagination { display: flex; flex-flow: row wrap; align-items: center; } nav.pagination .col-counter { margin-right: auto; padding-top: 3px; } nav.pagination .col-counter .divider { padding: 0 0.1em; } nav.pagination .col-counter .label { padding-right: 0.2em; } nav.pagination[data-is-last-page="true"] .col-more { pointer-events: none; opacity: 0; } nav.pagination[data-has-single-pages] .col-pages { flex-grow: 1; --font-size: 22; --min-font-size: 18px; --max-font-size: 22px; } nav.pagination[data-has-single-pages] .col-pages > * { padding: 0 0.3em; position: relative; color: var(--base-color-dark-blue); isolation: isolate; margin: 0 0.2em; } nav.pagination[data-has-single-pages] .col-pages > *.current { color: var(--base-color-white); } nav.pagination[data-has-single-pages] .col-pages > *::after { content: ''; position: absolute; inset: -3px; top: -6px; display: block; background: var(--base-color-white); z-index: -1; border-radius: 3px; } nav.pagination[data-has-single-pages] .col-pages > *.current::after { background: var(--base-color-dark-blue); } nav.pagination[data-has-single-pages] .lnk .label span.arrow { display: none; } @media (max-width: 800px) { nav.pagination[data-has-single-pages] .lnk .label span.arrow { display: inline-block; padding: 0 0.5em; } nav.pagination[data-has-single-pages] .lnk .label span.arrow + span { display: none; } } @media (max-width: 600px) { .module-pagination { padding: .5em; padding-left: 1em; } .module-pagination .cpy-20 { --min-font-size: 14px; } nav.pagination[data-has-single-pages] .col-pages { display: none; } nav.pagination[data-has-single-pages] .lnk .label span.arrow { display: none; } nav.pagination[data-has-single-pages] .lnk .label span.arrow + span { display: inline-block; } nav.pagination[data-has-single-pages] .col-next { margin-left: auto; } } /* STICKY SITE NAV */ .sticky-site-nav { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 102; --padding-x: 1.25em; --padding-y: 1.4375em; --icon-size: 1.25em; color: var(--base-color-white); text-align: center; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); } .sticky-site-nav nav.social { background: var(--base-color-blue); border-radius: 3px 0 0 0; } .sticky-site-nav nav.social svg { display: block; width: auto; max-width: var(--icon-size); height: var(--icon-size); margin: 0 auto; } .sticky-site-nav nav.social svg path, .sticky-site-nav nav.social svg circle { fill: currentColor; } .sticky-site-nav nav.social a, .sticky-site-nav nav.social span { display: block; } .sticky-site-nav nav.social span.title-wrap { display: none; } .sticky-site-nav nav.social a { padding: calc(var(--padding-y) / 2) var(--padding-x); } .sticky-site-nav nav.social li:first-child a { padding-top: var(--padding-y); } .sticky-site-nav nav.social li:last-child a { padding-bottom: var(--padding-y); } .sticky-site-nav .language { background: var(--base-color-dark-blue); border-radius: 0 0 0 3px; } .sticky-site-nav .language a { display: block; padding: calc(var(--padding-y) / 2) var(--padding-x); font-family: var(--base-font-1-medium); } @media (max-width: 1100px) { .sticky-site-nav { --padding-x: .625em; --padding-y: 1.1em; --icon-size: 1.1em; } .sticky-site-nav .language .title-wrap { font-size: 14px; } } @media (max-width: 500px) { .sticky-site-nav { display: none; } } .module-blockquote { position: relative; } .module-blockquote .module-inner { position: relative; z-index: 2; } .module-blockquote > .background { position: absolute; top: calc(-150 * var(--base-unit)); left: 0; right: 0; bottom: calc(-75 * var(--base-unit)); z-index: 1; pointer-events: none; transform: translateY(calc(var(--parallax-y, 0) * -5vh)); } .module-blockquote > .background .slant { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-color); z-index: 1; clip-path: polygon(0% var(--slant-angle), 100% 0, 100% calc(100% - var(--slant-angle)), 0% 100%); } .module-blockquote .module-wrap { max-width: var(--grid-10-fixed-); box-sizing: border-box; padding-left: var(--grid-1); position: relative; } .module-blockquote blockquote { color: var(--base-color-dark-blue); position: relative; } .module-blockquote blockquote p { --scale-breakpoint: 1200; } .module-blockquote .quotation-mark { display: block; position: absolute; top: 50%; left: calc(var(--grid-1-) * -1); pointer-events: none; transform: translateY(-50%); } .module-blockquote blockquote svg { width: calc(31 * var(--base-unit)); height: auto; } .module-blockquote blockquote svg path { fill: var(--base-color-dark-blue); } .module-blockquote figcaption { margin-top: calc(40 * var(--base-unit)); } @media (max-width: 500px) { .module-blockquote > .background { top: calc(-140 * var(--base-unit)); bottom: calc(-140 * var(--base-unit)); } .module-blockquote > .background .slant { clip-path: unset; transform: skewY(-3deg); } } .contact-persons-list { display: flex; flex-flow: row wrap; --columns: 2; --item-width: calc((100% - (var(--item-gap) * var(--columns))) / var(--columns)); --item-gap: var(--grid-gap); --margin: var(--item-gap); margin-right: calc(var(--margin) * -1); margin-bottom: calc(var(--item-gap) * -1); } .contact-persons-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); display: flex; flex-flow: column nowrap; } article.contact-persons-article { background: var(--base-color-lightest-blue); --padding: 1.25em; padding: var(--padding); display: flex; flex-flow: row nowrap; flex-grow: 1; } article.contact-persons-article figure { width: 35.48387096774193548300%; margin-right: var(--padding); flex-shrink: 0; } article.contact-persons-article .article-body { width: 100%; padding-top: calc(16 * var(--base-unit)); } article.contact-persons-article .meta-role { margin-top: 0.4em; } article.contact-persons-article .contact-links { margin-top: calc(30 * var(--base-unit)); } article.contact-persons-article .contact-links > li { display: block; } article.contact-persons-article .contact-links > li + li { margin-top: 0.35em; } @media (max-width: 900px) { .contact-persons-list { --columns: 1; } article.contact-persons-article figure { width: 150px; } } @media (max-width: 600px) { article.contact-persons-article { flex-flow: column nowrap; } article.contact-persons-article .lnk-contact span.icon { display: none; } article.contact-persons-article .article-body { padding-top: 15px; } article.contact-persons-article .meta-role, article.contact-persons-article .contact-links { margin-top: 10px; } article.contact-persons-article { padding-bottom: calc(var(--padding) * 1.25); } } .content-module-reference { height: 0; user-select: none; pointer-events: none; overflow: hidden; position: relative; } .module-content-with-sidebar.has-sidebar .module-wrap { display: flex; flex-flow: row nowrap; } .module-content-with-sidebar .content-wrap { width: 100%; max-width: var(--grid-7); } .module-content-with-sidebar.has-no-sidebar .content-wrap { max-width: var(--grid-7-fixed); } .module-content-with-sidebar.has-sidebar .sidebar-wrap { width: var(--grid-4); margin-left: auto; } .content-module:not(.content-module-reference) + * { margin-top: var(--mrgn-30); } .content-module:not(.content-module-reference) + .content-module-buttons { margin-top: calc(var(--mrgn-30) / 2); } .content-module:not(.content-module-reference) + .content-module-footnotes { margin-top: calc(var(--mrgn-30) * 2); } .sidebar-wrap .content-module:not(:last-child) { margin-bottom: var(--mrgn-30); } .sidebar-wrap { display: flex; flex-flow: column nowrap; } .content-module-header { margin-bottom: 1.5em; } /* SLANTED BACKGROUND STYLE */ .content-module.has-slanted-background { position: relative; --offset-x: 2em; --offset-y: calc(var(--offset-x) * 1.5); padding-top: var(--offset-y); padding-bottom: var(--offset-y); } .content-module.has-slanted-background .content-module-inner { position: relative; z-index: 2; } .content-module.has-slanted-background::before { content: ''; display: block; position: absolute; top: calc(var(--offset-y) * -0.15); left: calc(var(--offset-x) * -1); right: calc(var(--offset-x) * -1); bottom: calc(var(--offset-y) * -0.05); background: var(--background-color, var(--base-color-lightest-blue)); z-index: 1; transform: rotate(-3deg); pointer-events: none; } /* IMAGE, VIDEO */ .content-module-image img { width: 100%; } .content-module-image[data-position="content"] { margin-left: calc(var(--page-padding-left) * -1); } .content-module-image[data-position="content"] figcaption, .content-module-slideshow[data-position="content"] figcaption { padding-left: var(--page-padding-left); } .image-with-caption figcaption, .content-module-audio figcaption, .content-module-video figcaption, .module-pdf-viewer figcaption { margin-top: 1em; box-sizing: border-box; max-width: var(--grid-6-fixed-); } .content-wrap .image-with-caption figcaption, .content-wrap .content-module-audio figcaption, .content-wrap .content-module-video figcaption, { max-width: var(--grid-6-fixed-); } .module-pdf-viewer figcaption { max-width: none; } .content-module-video video, .content-module-video iframe { display: block; width: 100%; } .content-module-audio audio { display: block; max-width: 100%; } /* SLIDESHOW */ .content-module-slideshow .content-module-inner { position: relative; } .content-module-slideshow .splide-wrap { margin-left: calc(var(--page-padding-left) * -1); } .content-module-slideshow .splide-nav { position: absolute; top: calc(var(--splide-nav-top, 100%) + (var(--grid-gap) / 2)); right: 0; z-index: 5; } .content-module-slideshow img { max-width: none; width: 100%; } .content-with-sidebar-splide.has-nav.has-no-captions { padding-bottom: 5em; } /* BUTTONS */ .content-module-buttons .content-module-header { margin-bottom: 0.75em; } .content-module-buttons .btn-wrap { margin-top: 1.5em; } .content-module-buttons .btn-wrap + .btn-wrap { margin-top: 1em; } .content-module-buttons[data-position="content"] .outer-btn-wrap { display: flex; flex-flow: row wrap; } .content-module-buttons[data-position="content"] .btn-wrap { margin-top: 0; margin-bottom: 1em; margin-right: 1em; } .content-module-buttons[data-position="content"] p + .outer-btn-wrap .btn-wrap { margin-top: 1.5em; } .content-module-buttons p.event-ticket-limit-hint { margin-top: 1em; line-height: 1.4; } /* DOWNLOAD */ .content-module-download { display: block; background: #eeeeee; border-radius: 3px; position: relative; padding: 1em var(--padding-x); padding-left: 0; overflow: hidden; isolation: isolate; --icon-box-width: 60px; --padding-x: 1.25em; max-width: 360px; } .content-wrap .content-module-download { max-width: none; } .content-wrap .content-module-download + .content-module-download { margin-top: 10px; } .content-module-download::before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: var(--icon-box-width); background: #e6e6e6; z-index: -1; pointer-events: none; } .content-module-download .meta { margin-top: 0.2em; color: var(--base-color-gray); } .content-module-download .icon { width: var(--icon-box-width); position: absolute; top: 0; left: 0; height: 100%; } .content-module-download .icon svg { display: block; position: absolute; top: 50%; left: 50%; width: calc(var(--icon-box-width) * .42); height: auto; transform: translate(-50%, -50%); } .content-module-download .copy { padding-left: calc(var(--icon-box-width) + var(--padding-x)); } .module-content-with-sidebar[data-stacked="true"] .sidebar-wrap .content-module:not(.is-stacked) { opacity: 0; } /* FACTS & FIGURES */ .content-module-facts-and-figures .headline { margin-bottom: 1em; } .facts-and-figures-list > li { display: flex; flex-flow: row nowrap; } .facts-and-figures-list > li + li { margin-top: 1.25em; } .facts-and-figures-list .icon { padding-right: 1em; display: block; } .facts-and-figures-list .icon svg { width: max(20px, calc(40 * var(--base-unit))); height: auto; } .facts-and-figures-list .icon svg path { fill: currentColor; } .facts-and-figures-list .copy { display: block; padding-top: calc(8 * var(--base-unit)); } /* COPY */ :is(.content-module-copy, .content-module-faqs) .wysiwyg .headline { color: var(--base-color-blue); margin-bottom: .68571428571428571428em; margin-top: -0.4em; } .content-module-faqs .headline { color: var(--base-color-blue); margin-bottom: .68571428571428571428em; } :is(.content-module-copy, .content-module-faqs) .wysiwyg .headline:not(:first-child), :is(.content-module-copy, .content-module-faqs) .wysiwyg .subheadline:not(:first-child) { margin-top: var(--mrgn-30); } .content-module-copy .wysiwyg strong, .content-module-faqs .wysiwyg strong { font-weight: normal; font-family: var(--base-font-1-bold); } /* FAQS */ .content-module-faqs .accordion-list { display: flex; flex-flow: column nowrap; border-top: 1px solid var(--base-color-light-blue); } .content-module-faqs .accordion-list > li { border-bottom: 1px solid var(--base-color-light-blue); } .content-module-faqs .accordion-header { position: relative; padding-block: 1em; } .content-module-faqs .accordion-header > div { position: relative; padding-right: 50px; } .content-module-faqs .accordion-header button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .content-module-faqs .accordion-header .icon { position: absolute; right: 0; top: 0.4em; } .content-module-faqs .accordion-header .icon svg { display: block; position: relative; transition: transform 1s var(--ttf-2); } .content-module-faqs [data-accordion-state="opened"] .accordion-header .icon svg { transform: rotate(-180deg); } .content-module-faqs .accordion-header .icon path { fill: currentColor; } .content-module-faqs .accordion-body { max-height: 0px; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-40px); transition: 1s var(--ttf-2); transition-property: max-height, opacity, transform; } .content-module-faqs .accordion-body > div { padding-top: 1em; padding-bottom: 3em; } .content-module-faqs [data-accordion-state="opened"] .accordion-body { max-height: var(--max-height, 5000px); opacity: 1; transform: none; pointer-events: all; } .content-module-faqs .wysiwyg { max-width: 700px; } /* META */ .sidebar-meta-list > li + li { margin-top: 2.25rem; } .sidebar-meta-list > li > .value { margin-top: .625em; } .sidebar-meta-list .meta-date-and-time { line-height: 1.1; } .sidebar-meta-list .meta-date-and-time .start-date > span { display: block; } .sidebar-meta-list .meta-date-and-time .end-date { margin-top: .625em; } .generic-items-list > li + li { margin-top: 1.25em; } .generic-items-list > li { display: flex; flex-flow: row nowrap; } .generic-items-list .col-1 { width: calc(var(--grid-1) + var(--grid-gap)); min-width: 100px; padding-right: calc(var(--grid-gap) / 2); box-sizing: border-box; flex-shrink: 0; margin-right: auto; } .generic-items-list .col-2 { width: 100%; } .generic-items-list .col-1 + .col-2 { padding-top: 1em; } @media (max-width: 1000px) { .sidebar-meta-list { display: flex; flex-flow: row wrap; } .sidebar-meta-list > li { margin-top: 2.25rem !important; width: 50%; } .generic-items-list .col-1 { padding-right: var(--grid-gap); } } @media (max-width: 500px) { .sidebar-meta-list > li { margin-top: 0 !important; margin-bottom: 1.75em; width: 100%; } } /* LINK LIST * LOGO */ .content-module-link-list .logo + .link-list { margin-top: 2.5em; } .content-module-link-list .logo > div { width: 100%; max-width: 208px; } .content-module-link-list .logo img { width: 100%; height: auto; } /* FOOTNOTES */ a.footnote { box-shadow: none !important; display: inline-block; position: relative; padding: 0 0.25em; } a.footnote span, .footnotes-list li::before { position: relative; z-index: 2; font-size: 80%; font-family: var(--base-font-2); color: var(--base-color-blue); display: inline-block; } a.footnote, .footnotes-list { --size: 1.15em; } a.footnote::after, .footnotes-list li::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; margin-top: calc(var(--size) / -2); margin-left: calc(var(--size) / -2); width: var(--size); height: var(--size); border-radius: 50%; transition: background 500ms, transform 500ms; transition-timing-function: var(--ttf); z-index: -1; } a.footnote:hover::after, a.footnote:focus::after, .footnotes-list li::after { transform: scale(1.2); } .footnotes-list { counter-reset: supernovae; } .footnotes-list li + li { margin-top: 0.5em; } .footnotes-list li { position: relative; padding-left: 1.5em; scroll-margin-top: 50vh; } .footnotes-list li::before { content: counter(supernovae); counter-increment: supernovae; position: absolute; left: calc((var(--size) / -3) + 1px); top: 0.1em; width: var(--size); text-align: center; } .footnotes-list li::after { top: 0.22em; left: calc(var(--size) / -3); margin: 0; } .footnotes-list li:target { font-family: var(--base-font-1-bold); } @media (max-width: 1000px) { .module-content-with-sidebar .sidebar-wrap { display: none; } .module-content-with-sidebar .content-wrap { max-width: none; } .content-module-reference { height: auto; user-select: auto; pointer-events: all; overflow: visible; position: relative; } .content-module-reference:first-child { margin-top: 0; } .content-module + * { margin-top: var(--mrgn-30); } .content-module-link-list .logo > div { max-width: 150px; } .content-module-slideshow .splide-nav { top: calc(var(--splide-nav-top, 100%) + 20px); } .splide-nav button + button { margin-left: 10px; } .content-module.has-single-headline + .content-module { margin-top: 0 !important; } } @media (max-width: 700px) { .content-module-reference { float: none; margin: 0; } .content-module + * { margin-top: var(--mrgn-30); } .content-module.has-slanted-background { --offset-x: 1em; --offset-y: calc(var(--offset-x) * 2.5); } } @media (max-width: 500px) { .content-module.has-slanted-background { --offset-x: var(--page-padding-left); --offset-y: calc(1.5em * 2.5); padding-bottom: calc(var(--offset-y) * 0.8); } .content-module.has-slanted-background::before { transform: skewY(-3deg); } } .coordinators-list { --columns: 2; --margin: max(40px, calc(72 * var(--base-unit))); --item-width: calc((100% - (var(--item-gap) * var(--columns))) / var(--columns)); --item-gap: var(--grid-gap); margin-bottom: calc(var(--margin) * -1); margin-right: calc(var(--item-gap) * -1); display: flex; flex-flow: row wrap; } .coordinators-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); } article.coordinators-article { display: flex; flex-flow: row nowrap; --col-1-width: 167px; --gap: var(--grid-gap); --slant-offset: 6px; } article.coordinators-article figure { width: var(--col-1-width); margin-right: var(--gap); position: relative; } article.coordinators-article figure > div { position: relative; } article.coordinators-article figure .slant { position: absolute; top: calc(100% + 3px); left: calc(var(--slant-offset) * -1); z-index: 2; width: calc(100% + var(--slant-offset)); pointer-events: none; transform: translateY(-50%); } article.coordinators-article figure .slant svg { width: 100%; height: auto; } article.coordinators-article figure .slant svg path { fill: var(--base-color-light-green); } article.coordinators-article .article-body { width: calc(100% - var(--col-1-width) - var(--gap)); } article.coordinators-article .article-body > div { padding-right: var(--grid-gap); } article.coordinators-article .copy { margin-top: .9375rem; } article.coordinators-article.has-placeholder-image figure img { filter: hue-rotate(-95deg) brightness(2) saturate(0.3); } @media (max-width: 1200px) { article.coordinators-article { --col-1-width: calc(150 * var(--base-unit)); } } @media (max-width: 700px) { .coordinators-list { --columns: 1; } article.coordinators-article { --col-1-width: 80px; --gap: calc(var(--page-padding-left) / 2); } article.coordinators-article .copy { margin-top: 10px; } } .module-divider { height: calc(249 * var(--base-unit)); } .module-divider > div { background-color: var(--color, transparent); clip-path: polygon(0% calc(0% + (var(--slant-angle) * 0.495)), 100% 0%, 100% 100%, 0% calc(100% - (var(--slant-angle) * 0.495))); height: 100%; width: 49.5%; margin-left: auto; } .module-divider[data-alignment="left"] > div { margin-left: 0; margin-right: auto; clip-path: polygon(0% 0%, 100% calc(0% + (var(--slant-angle) * 0.495)), 100% calc(100% - (var(--slant-angle) * 0.495)), 0% 100%); } .module-divider.is-transparent > div { background: var(--hero-background-image) no-repeat center top / cover; background-attachment: fixed; } html.touchevents .module-divider.is-transparent > div { background-image: none; background-color: var(--color, transparent); } .documents-overview-list { --columns: 3; --item-gap: var(--grid-gap); --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns)); --margin: calc(75 * var(--base-unit)); display: flex; flex-flow: row wrap; margin-bottom: calc(var(--margin) * -1); margin-right: calc(var(--item-gap) * -1); } .documents-overview-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); display: flex; flex-flow: column nowrap; } article.document-article { --padding: 1.25em; position: relative; flex-grow: 1; display: flex; flex-flow: column nowrap; } article.document-article::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; right: 0; top: calc(var(--padding) * 2); background: #f2f5fa; } article.document-article a { display: block; position: relative; padding: var(--padding); padding-top: 0; z-index: 2; flex-grow: 1; } article.document-article a:hover .headline, article.document-article a:focus .headline { text-decoration: underline; } article.document-article figure { width: calc(160 * var(--base-unit)); min-width: 90px; margin-bottom: max(20px, calc(25 * var(--base-unit))); } article.document-article figure img, article.document-article figure svg { width: 100%; height: auto; } article.document-article .excerpt { margin-top: max(15px, calc(20 * var(--base-unit))); } @media (max-width: 1100px) { .documents-overview-list { --columns: 2; } } @media (max-width: 600px) { .documents-overview-list { --columns: 1; } } .events-overview-list { --margin: max(70px, calc(100 * var(--base-unit))); margin-bottom: calc(var(--margin) * -1); } .events-overview-list > li { margin-bottom: var(--margin); } .module-hero, .module-hero-navigation { position: relative; z-index: 101; } .module-hero-navigation { z-index: 102; } .module-hero { pointer-events: none; margin-top: -1px; } .module-hero .module-wrap { position: relative; z-index: 2; padding-top: max(100px, calc(110 * var(--base-unit))); padding-bottom: max(100px, calc(180 * var(--base-unit))); max-width: var(--grid-9); margin: 0 auto; } .module-hero .module-wrap > * { pointer-events: all; } .module-hero .background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--base-color-dark-blue); z-index: 1; pointer-events: all; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-angle)), 0% 100%); } .module-hero .headline-1 { color: var(--base-color-light-green); } .module-hero .headline-2 { color: var(--base-color-rose); margin-top: max(25px, calc(25 * var(--base-unit))); } .module-hero .btn-set { margin-top: max(40px, calc(62 * var(--base-unit))); } .module-hero-slant { background: var(--hero-background-image) no-repeat center var(--header-height) / cover; background-attachment: fixed; clip-path: polygon(0 calc(0% + var(--slant-angle)), 100% 0, 100% calc(100% - var(--slant-angle)), 0% 100%); margin-top: calc((var(--slant-angle) + 0.1vw) * -1); height: 100vmin; } html.touchevents .module-hero-slant { background-position: center top; background-attachment: scroll; } .module-hero-navigation { background: var(--base-color-dark-blue); } @media (max-width: 1100px) { .module-hero-navigation { display: none; } .module-hero { margin-top: var(--header-height); z-index: 99; } } @media (max-width: 700px) { .module-hero .module-wrap { max-width: 473px; } } @media (max-width: 500px) { .module-hero .hdln-52 { line-height: 1.63636363636363636363; } .module-hero .module-wrap { padding-top: 50px; padding-bottom: 60px; } } .icon-columns-list { --columns: 3; --item-gap: var(--grid-gap); --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns)); --margin: max(30px, calc(50 * var(--base-unit))); margin-bottom: calc(var(--margin) * -1); margin-right: calc(var(--item-gap) * -1); display: flex; flex-flow: row wrap; } .icon-columns-list > li { margin-bottom: var(--margin); width: var(--item-width); margin-right: var(--item-gap); } .icon-column-item .icon { margin-bottom: max(10px, calc(25 * var(--base-unit))); } .icon-column-item svg { width: max(35px, calc(60 * var(--base-unit))); height: auto; } .icon-column-item svg path, .icon-column-item svg circle { fill: var(--icon-color); } @media (max-width: 900px) { .icon-columns-list { --columns: 2; --item-gap: var(--page-padding-left); } } @media (max-width: 600px) { .icon-columns-list { --columns: 1; --margin: 1.25em; } .icon-column-item { display: flex; flex-flow: row nowrap; } .icon-column-item .icon { margin-bottom: 0; margin-right: 1em; flex-shrink: 0; } .icon-column-item svg { width: max(20px, calc(40 * var(--base-unit))); } } .module-image-copy-teaser { --margin-y: 3.125em; position: relative; } .module-image-copy-teaser.is-before-newsletter { z-index: 2; } .module-image-copy-teaser .module-header { position: relative; z-index: 2; } .module-image-copy-teaser .module-header .headline { position: relative; width: var(--grid-7-); transform: translateY(calc(var(--parallax-y, 0) * 5vh)); } .module-image-copy-teaser .module-header .kicker + .headline { margin-top: .80645161290322580645em; } .module-image-copy-teaser .widescreen-copy { margin-top: var(--margin-y); display: none; } .module-image-copy-teaser .module-body figure + .regular-copy { margin-top: var(--margin-y); } .module-image-copy-teaser .module-body .copy p { column-count: 2; column-gap: var(--grid-gap); } .module-image-copy-teaser .btn-set { margin-top: var(--margin-y); } @media (max-height: 70vw) and (min-width: 900px) and (max-width: 1900px) { .module-image-copy-teaser .widescreen-copy { display: block; } .module-image-copy-teaser .regular-copy { display: none; } } @media (max-height: 1150px) and (min-width: 1901px) { .module-image-copy-teaser .widescreen-copy { display: block; } .module-image-copy-teaser .regular-copy { display: none; } } @media (max-width: 900px) { .module-image-copy-teaser .module-body .copy p { column-count: 1; } } @media (max-width: 600px) { .module-image-copy-teaser { --margin-y: 30px; } .image-copy-teaser-col-set { display: block; } .image-copy-teaser-col-set > .col-1 { width: 100%; margin-right: 0; } .image-copy-teaser-col-set > .col-2 { width: 100%; margin-top: var(--margin-y); } .module-image-copy-teaser .module-header .headline { width: auto; transform: none; } .module-image-copy-teaser .module-header .kicker + .headline { margin-top: .25em; } } .module-networks { position: relative; overflow: hidden; } .module-networks .module-inner { padding-bottom: calc(320 * var(--base-unit)); } .module-networks > .background { position: absolute; top: calc(135 * var(--base-unit)); left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; } .module-networks > .background .slant { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color-dark-blue); z-index: 1; clip-path: polygon(0% var(--slant-angle), 100% 0, 100% calc(100% - var(--slant-angle)), 0% 100%); } .module-networks > .background .star { display: block; position: absolute; z-index: 2; top: -1vw; left: -6vw; width: calc(230 * var(--base-unit)); } .module-networks > .background .star svg { display: block; width: 100%; height: auto; } .module-networks > .background .star-2 { left: auto; right: -4vw; top: -2.15vw; } .module-networks > .background .star-3 { left: auto; top: auto; right: 10.8vw; bottom: 7.8vw; } .module-networks > .background .star svg path { fill: var(--base-color-blue); } .module-networks > .background .star-2 svg path { fill: var(--base-color-light-green); } .module-networks > .background .star-3 svg path { fill: var(--base-color-rose); } .module-networks .module-inner { position: relative; z-index: 2; } .networks-list { --columns: 3; --margin: 0; --item-gap: var(--grid-gap); --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns)); margin-right: calc(var(--item-gap) * -1); margin-bottom: calc(var(--margin) * -1); display: flex; flex-flow: row wrap; } .networks-list > li:nth-child(1) { --factor: 3; } .networks-list > li:nth-child(2) { --factor: 1; } .networks-list > li:nth-child(3) { --factor: 2; } .networks-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); flex-shrink: 0; transform: translateY(calc(var(--parallax-y, 0) * 5vh * var(--factor))); } article.network-article { display: flex; flex-flow: column nowrap; color: #fff; height: 100%; position: relative; transition: filter 750ms; transition-timing-function: var(--ttf); } article.network-article.hover { filter: brightness(1.1); } article.network-article .article-body { flex-grow: 1; display: flex; flex-flow: column nowrap; padding: 1.5625em; } article.network-article .btn-set { margin-top: auto; padding-top: max(20px, calc(32 * var(--base-unit))); } article.network-article .headline { margin-bottom: .625em; } article.network-article figure img { max-height: 320px; object-fit: cover; } @media (max-width: 1000px) { .networks-list { --columns: 1; --margin: var(--grid-gap); } .networks-list > li { transform: none; } article.network-article { flex-flow: row nowrap; } article.network-article figure { width: 250px; flex-shrink: 0; } article.network-article figure img { height: 100%; object-fit: cover; } article.network-article .article-body { width: 100%; box-sizing: border-box; } } @media (max-width: 700px) { .module-networks + .module-hero-slant { opacity: 0; pointer-events: none; user-select: none; height: var(--module-margin); } .module-networks .module-body { overflow: hidden; overflow-x: auto; margin-left: calc(var(--page-padding-left) * -1); margin-right: calc(var(--page-padding-right) * -1); scroll-snap-type: x mandatory; } .module-networks .module-header-b { margin-bottom: 100px; } .module-networks > .background { top: calc(400 * var(--base-unit)); } .networks-list { --item-width: calc(100vw - var(--page-padding-left) - var(--page-padding-right)); --margin: 0; flex-flow: row nowrap; padding-left: var(--page-padding-left); padding-right: var(--page-padding-right); width: fit-content; } .networks-list > li { scroll-snap-align: center; } article.network-article { flex-flow: column nowrap; } article.network-article figure { width: 100%; } article.network-article figure img { height: auto; } } @media (max-width: 500px) { article.network-article figure img { height: 60vw; object-fit: cover; } } .news-list { max-width: 1114px; width: 100%; } .news-list article.news-article { display: flex; flex-flow: row nowrap; } .news-list article.news-article figure { position: relative; top: auto; left: auto; transform: none; pointer-events: all; width: 250px; margin-right: 50px; flex-shrink: 0; } .news-list article.news-article figure img { opacity: 1; transform: none; } .news-list article.news-article::after { left: 300px; width: var(--grid-2-); } @media (max-width: 1600px) { .news-list { max-width: calc((1114 * 100/1600) * 1vw); } } @media (max-width: 1300px) { .news-list { max-width: 906px; } } @media (max-width: 900px) { .news-list article.news-article { --col-1-width: 30vw; margin-left: calc(var(--page-padding-left) * -1); } .news-list article.news-article figure { display: block; width: var(--col-1-width); margin-right: auto; } .news-list article.news-article .copy-wrap { width: calc(100% - var(--col-1-width) - (var(--page-padding-left) / 2)); } } @media (max-width: 600px) { .news-list article.news-article figure { display: none; } .news-list article.news-article { margin-left: 0; } .news-list article.news-article .copy-wrap { width: 100%; } } .module-news-teaser, .module-news-overview, .module-press-overview { --margin: 4.5em; } .module-news-teaser .module-header { position: relative; z-index: 2; } .module-newsletter { position: relative; --slant-top: calc(-150 * var(--base-unit)); z-index: 1; } .module-newsletter.has-big-slant { --slant-top: calc(var(--image-copy-teaser-height) * -1px); } .module-newsletter.has-big-slant::before { content: ''; display: block; position: absolute; top: -1px; left: var(--page-padding-left); right: var(--page-padding-right); height: 2px; background: var(--base-color-white); pointer-events: none; z-index: 2; } .module-newsletter .module-inner { position: relative; z-index: 2; --padding-y: calc(150 * var(--base-unit)); padding-top: var(--padding-y); padding-bottom: var(--padding-y); } .module-newsletter > .background { position: absolute; top: var(--slant-top); left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; } .module-newsletter > .background .slant { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color-light-blue); z-index: 1; clip-path: polygon(0% var(--slant-angle), 100% 0, 100% 100%, 0% 100%); } .newsletter-form-col-set { display: flex; flex-flow: row nowrap; } .newsletter-form-col-set > * { width: var(--grid-4-); } .newsletter-form-col-set .col-1 { margin-right: auto; } @media (max-width: 900px) { .newsletter-form-col-set > * { width: calc((100% - var(--grid-gap) * 2) / 2); } } @media (max-width: 600px) { .newsletter-form-col-set { flex-flow: row wrap; } .newsletter-form-col-set > * { width: 100%; } .newsletter-form-col-set > .col-2 { margin-top: 20px; } .module-newsletter .module-col-set .module-header.col-1 { margin-bottom: 20px; } .module-newsletter .cpy-20 { --min-font-size: 14px; } } .module-page-title { position: relative; --slant-height: calc(650 * var(--base-unit)); padding-top: calc(var(--header-height) + var(--slant-height)); } .module-page-title[data-slant-type="color"] { --slant-height: calc(135 * var(--base-unit)); } .module-page-title .headline { color: var(--base-color-blue); } .module-page-title .intro-copy { margin-top: max(32px, calc(50 * var(--base-unit))); } .module-page-title .intro-copy .cpy-20 { font-family: var(--base-font-1-bold); } .module-page-title .content-wrap { max-width: var(--grid-7); } .module-page-title .slant { position: absolute; top: var(--header-height); left: 0; width: 100%; height: var(--slant-height); background-repeat: no-repeat; background-position: center top var(--header-height); background-attachment: fixed; background-size: 100% auto; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--slant-angle))); } html.touchevents .module-page-title .slant { background-attachment: scroll; background-position: center top; background-size: cover; } @media (max-width: 1200px) { .module-page-title .content-wrap { max-width: 630px; } } @media (max-width: 500px) { .module-page-title[data-slant-type="color"] { --slant-height: calc(195 * var(--base-unit)); } } .partners-list { --columns: 6; --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns)); --item-gap: var(--grid-gap); --margin: var(--item-gap); margin-bottom: calc(var(--margin) * -1); margin-right: calc(var(--item-gap) * -1); display: flex; flex-flow: row wrap; width: calc(100% + var(--item-gap)); } .partners-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); display: flex; flex-flow: column nowrap; aspect-ratio: 1 / 1; } .partners-list div.partner { border: 1px solid var(--base-color-gray); flex-grow: 1; background: #fff; } .partners-list div.partner figure { height: 100%; } .partners-list div.partner img { display: block; height: 100%; width: 100%; box-sizing: border-box; padding: max(10px, calc(20 * var(--base-unit))); object-fit: contain; } .partners-list div.partner a { display: block; height: 100%; } @media (max-width: 1100px) { .partners-list { --columns: 5; } } @media (max-width: 700px) { .partners-list { --columns: 4; } } @media (max-width: 400px) { .partners-list { --columns: 3; } } .module-pdf-viewer iframe { width: 100%; height: calc(100vh - 250px); display: block; border: 1px solid var(--base-color-gray); } .module-pdf-viewer .module-header { max-width: max(630px, var(--grid-7)); } .module-pdf-viewer .module-header > h2 { color: var(--base-color-blue); margin-bottom: 0.6857142857142857em; margin-top: -0.4em; } .personalities-teasers-list { display: flex; flex-flow: row wrap; --columns: 3; --margin: 50px; --item-width: calc((100% - (var(--item-gap) * var(--columns))) / var(--columns)); --item-gap: var(--grid-gap); margin-bottom: calc(var(--margin) * -1); margin-right: calc(var(--item-gap) * -1); } .personalities-teasers-list > li { margin-bottom: var(--margin); width: var(--item-width); margin-right: var(--item-gap); } .personality-teaser-article { height: 100%; --slant-offset: 11px; } .personality-teaser-article a { display: flex; flex-flow: column nowrap; height: 100%; } .personality-teaser-article .name-wrap { margin-bottom: max(36px, calc(45 * var(--base-unit))); margin-top: -0.2em; padding-left: 20px; position: relative; z-index: 2; } .personality-teaser-article figure { position: relative; } .personality-teaser-article figure .slant { position: absolute; top: calc(100% + 2px); left: calc(var(--slant-offset) * -1); z-index: 2; width: calc(100% + var(--slant-offset)); pointer-events: none; transform: translateY(-50%); } .personality-teaser-article figure .slant svg { width: 100%; height: auto; } .personality-teaser-article figure .slant svg path { fill: var(--base-color-light-yellow); } .personality-teaser-article .btn-set { margin-top: auto; padding-top: max(20px, calc(50 * var(--base-unit))); } @media (max-width: 900px) { .personalities-teasers-list { --columns: 2; --item-gap: var(--page-padding-left); } .personality-teaser-article figure { max-width: 250px; } } @media (max-width: 600px) { .personalities-teasers-list { --columns: 1; } .personality-teaser-article figure { max-width: 350px; } } .module-press-overview article.news-article figure { display: none; } .module-press-overview .module-wrap { max-width: 928px; width: calc(928 * var(--base-unit)); } @media (max-width: 1300px) { .module-press-overview .module-wrap { max-width: 750px; width: auto; } } .module-rsvp-form { position: relative; --slant-top: calc(-150 * var(--base-unit)); z-index: 1; } .module-rsvp-form .module-inner { position: relative; z-index: 2; --padding-y: calc(150 * var(--base-unit)); padding-top: var(--padding-y); padding-bottom: var(--padding-y); } .module-rsvp-form > .background { position: absolute; top: var(--slant-top); left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; } .module-rsvp-form > .background .slant { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color-sand); z-index: 1; clip-path: polygon(0% var(--slant-angle), 100% 0, 100% 100%, 0% 100%); } .module-rsvp-form .outer-form-wrap { max-width: 570px; } .module-rsvp-form .intro-copy { margin-bottom: 4rem; } .module-rsvp-form .intro-copy, .module-rsvp-form .success-copy { max-width: 840px; } .module-rsvp-form .wysiwyg .headline { color: var(--base-color-blue); margin-bottom: 0.75em; } @media (max-width: 1000px) { .module-rsvp-form .module-inner { padding-top: calc(var(--padding-y) * 1.75); } } @media (max-width: 500px) { .module-rsvp-form .module-inner { padding-top: calc(var(--padding-y) * 2.25); } } body.view-search .module-page-title .breadcrumb-wrap { display: none; } body.view-search .module-page-title { margin-bottom: 0; padding-bottom: calc(var(--module-margin) / 2); background: var(--base-color-light-blue); } body.view-search .module-page-title .slant { display: none; } .module-search-form { position: relative; padding-bottom: calc(var(--module-margin) / 2); background: var(--base-color-light-blue); } .module-search-form form, .search-results-empty-state { max-width: var(--grid-6-fixed-); } .search-form-list .styled-search { display: block; } .search-form-list .styled-search input { width: 100%; } .search-form-list > li.submit { margin-top: 2em; } .search-form-list label { display: none; } .search-results-list { --margin: 5.5em; margin-bottom: calc(var(--margin) * -1); max-width: 928px; width: calc(928 * var(--base-unit)); } .search-results-item { margin-bottom: var(--margin); } .search-results-list[data-grid-list] .grid-col { width: calc(50% - var(--grid-gap)); margin-right: auto; } .search-results-list[data-grid-list] .grid-col[data-col="2"] { margin-right: 0; } .search-results-item .excerpt { margin-top: 0.5em; } .search-results-item .btn-set { margin-top: 1.5625em; } .search-results-item .wysiwyg strong { font-weight: normal; font-family: var(--base-font-1-bold); } @media (max-width: 1300px) { .search-results-list { max-width: 750px; width: auto; } } @media (max-width: 600px) { .search-results-list { --margin: max(70px, calc(80 * var(--base-unit))); } } .module-share { position: relative; --padding-y: 100px; margin-bottom: -7vw; overflow: hidden; } @media (min-width: 1920px) { .module-share { --padding-y: 5.20833333333333333333vw; margin-bottom: -6.5vw; } } .module-share .module-wrap { position: relative; z-index: 2; } .module-share .module-inner { padding-top: var(--padding-y); padding-bottom: var(--padding-y); } .module-share .background, .module-share .background .slant { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; } .module-share .background svg { height: 100%; width: auto; } .module-share .label { margin-right: 2rem; } .share-links-list { display: flex; flex-flow: row nowrap; } .share-links-list a svg { width: 2rem; height: auto; } .share-links-list > li + li { margin-left: 1.5rem; } .share-col-set { display: flex; flex-flow: row nowrap; align-items: center; } @media (max-width: 1000px) { .module-share { --padding-y: 6vw; margin-bottom: -7vw; } .share-col-set { display: block; } .module-share .label { margin-right: 0; margin-bottom: max(8px, 1.6vw); } .share-links-list a svg { width: max(18px, 3.2vw); } } @media (max-width: 600px) { .module-share { --padding-y: 40px; } } .module-subpage-teasers { position: relative; } .module-subpage-teasers + .module { position: relative; z-index: 2; } .module-subpage-teasers .module-inner { position: relative; z-index: 2; } .module-subpage-teasers > .background { position: absolute; top: calc(-150 * var(--base-unit)); left: 0; right: 0; bottom: calc(-100 * var(--base-unit)); z-index: 1; pointer-events: none; } .module-subpage-teasers:nth-last-child(2) > .background { bottom: calc(-350 * var(--base-unit)); } .module-subpage-teasers > .background .slant { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color-sand); z-index: 1; clip-path: polygon(0% var(--slant-angle), 100% 0, 100% calc(100% - var(--slant-angle)), 0% 100%); } .subpage-teasers-list { --columns: 3; --item-gap: var(--grid-gap); --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns)); margin-right: calc(var(--item-gap) * -1); --margin: max(40px, calc(100 * var(--base-unit))); margin-bottom: calc(var(--margin) * -1); display: flex; flex-flow: row wrap; } .subpage-teasers-list.has-no-images { --margin: var(--grid-gap); } .subpage-teasers-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); display: flex; flex-flow: column nowrap; } article.subpage-teaser-article a { display: block; pointer-events: none; } article.subpage-teaser-article figure, article.subpage-teaser-article .headline, article.subpage-teaser-article .copy, article.subpage-teaser-article .lnk { pointer-events: all; } article.subpage-teaser-article .headline { color: var(--base-color-blue); --scale-breakpoint: 1600; } article.subpage-teaser-article.has-no-image .headline { color: var(--base-color-white); } article.subpage-teaser-article figure { margin-bottom: 1em; } article.subpage-teaser-article .headline + .copy { margin-top: 0.8em; } article.subpage-teaser-article .btn-set { margin-top: max(20px, calc(40 * var(--base-unit))); } article.subpage-teaser-article.has-no-image .btn-set { margin-top: 1.25em; } article.subpage-teaser-article.has-no-image { flex-grow: 1; } article.subpage-teaser-article.has-no-image a { background: var(--base-color-dark-blue); color: var(--base-color-white); pointer-events: all; padding: 1.875em; box-sizing: border-box; min-height: calc(280 * var(--base-unit)); display: flex; flex-flow: column nowrap; justify-content: flex-end; height: 100%; transition: filter 750ms; transition-timing-function: var(--ttf); } article.subpage-teaser-article.has-no-image a:hover { filter: brightness(1.1); } @media (max-width: 900px) { .subpage-teasers-list { --columns: 2; --item-gap: var(--page-padding-left); } .subpage-teasers-list.has-no-images { --item-gap: var(--grid-gap); } } @media (max-width: 600px) { .subpage-teasers-list { --columns: 1; } article.subpage-teaser-article.has-no-image a { padding: 1.4em 1.2em; } article.subpage-teaser-article.has-no-image .btn-set { margin-top: 0.6em; } .module-subpage-teasers:nth-last-child(2) > .background { bottom: calc(-600 * var(--base-unit)); } } .team-list { --columns: 3; --item-gap: var(--grid-gap); --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns)); --margin: var(--page-padding-left); margin-right: calc(var(--item-gap) * -1); margin-bottom: calc(var(--margin) * -1); display: flex; flex-flow: row wrap; } .team-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); flex-shrink: 0; } article.team-article figure { max-width: var(--grid-3-fixed-); position: relative; margin-bottom: 1.875em; } article.team-article .image-copyright { position: absolute; bottom: 1px; left: 10px; z-index: 3; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } .image-copyright .icon { display: inline-block; cursor: pointer; vertical-align: middle; margin-right: 3px; } .image-copyright .icon span { font-size: 24px; bottom: -6px; position: relative; } .image-copyright .text { opacity: 0; transform: translateX(-10px); transition: all 250ms; pointer-events: none; font-size: 14px; } .image-copyright:hover .text { opacity: 1; transform: none; pointer-events: all; } article.team-article figure > span { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity 500ms; transition-timing-function: var(--ttf-2); } article.team-article:hover figure > span { opacity: 1; } article.team-article .name-and-role + .bio { margin-top: 1em; padding-top: 1.5em; position: relative; } article.team-article .name-and-role + .bio::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: var(--grid-1-fixed-); height: 1px; background: var(--base-color-gray); pointe-events: none; } article.team-article .meta-role { color: var(--base-color-gray); margin-top: .25em; } article.team-article .article-footer > div { padding-top: 1.875em; } article.team-article .btn-icon-only { --size: 1.5em; } article.team-article .toggle-more { display: block; } article.team-article.is-expanded .toggle-more { display: none; } article.team-article *[data-max-height-on-demand] { transition: 750ms var(--ttf); transition-property: transform, opacity, max-height; } article.team-article:not(.is-expanded) *[data-max-height-on-demand] { max-height: 0px; overflow: hidden; transform: translateY(-20px); opacity: 0; } article.team-article:not(.is-expanded) .article-footer[data-max-height-on-demand] { transform: none; } article.team-article.is-expanded *[data-max-height-on-demand] { opacity: 1; transform: none; max-height: var(--max-height, 500px); } @media (max-width: 900px) { .team-list { --columns: 2; } article.team-article figure { max-width: 220px; } } @media (max-width: 600px) { .module-team .module-body { margin-left: calc(var(--page-padding-left) * -1); margin-right: calc(var(--page-padding-right) * -1); overflow: hidden; overflow-x: auto; scroll-snap-type: x mandatory; } .team-list { --columns: 1; --margin: 0; --item-gap: var(--page-padding-left); --item-width: calc(100vw - (var(--page-padding-left) * 2) - (var(--page-padding-right) * 2)); flex-flow: row nowrap; padding-left: var(--page-padding-left); padding-right: var(--page-padding-right); width: fit-content; } .team-list > li { scroll-snap-align: center; } article.team-article figure { max-width: none; margin-bottom: 1.2em; } article.team-article .name-and-role + .bio { padding-top: 0; } article.team-article .name-and-role + .bio::after { display: none; } article.team-article .toggle-more { display: none; } article.team-article:not(.is-expanded) *[data-max-height-on-demand] { max-height: none; opacity: 1; transform: none; } } .topics-list { display: flex; flex-flow: row wrap; --columns: 2; --gap: var(--grid-gap); --column-width: calc((100% - (var(--columns) * var(--gap))) / var(--columns)); --margin: max(50px, calc(70 * var(--base-unit))); margin-right: calc(var(--gap) * -1); } .topics-list > li { width: var(--column-width); margin-right: var(--gap); margin-bottom: var(--margin); } @media (max-width: 1200px) { .topics-list { --columns: 1; } } @media (max-width: 900px) { .topics-list { --gap: var(--page-padding-left); --columns: 2; } } @media (max-width: 600px) { .topics-list { --columns: 1; } } .topics-list .btn-set { padding-top: max(20px, calc(35 * var(--base-unit))); margin-top: auto; } .topics-list .copy { margin-top: 1.625rem; } .topics-list .headline span { background: var(--color); box-shadow: 0 0 0 4px var(--color), 0 -3px 0 4px var(--color); } .topics-list article { display: flex; flex-flow: column nowrap; height: 100%; } .upcoming-events-list { --columns: 3; --margin: 0; --item-gap: var(--grid-gap); --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns)); margin-right: calc(var(--item-gap) * -1); margin-bottom: calc(var(--margin) * -1); display: flex; flex-flow: row wrap; } .upcoming-events-list > li { width: var(--item-width); margin-right: var(--item-gap); margin-bottom: var(--margin); } @media (max-width: 900px) { .upcoming-events-list { --item-gap: var(--page-padding-left); --columns: 2; } .upcoming-events-list > li:nth-child(3) { display: none; } } @media (max-width: 600px) { .upcoming-events-list { --columns: 1; --margin: 50px; } .upcoming-events-list > li:nth-child(3) { display: block; } } .module-winners .splide-wrap { margin-left: calc(var(--page-padding-left) * -1); margin-right: calc(var(--page-padding-right) * -1); } .winners-splide .splide__slide { width: var(--grid-4-); } div.winner figure { margin-bottom: 1.5625em; } div.winner .copy { padding-right: var(--grid-gap); } .module-winners .splide-nav { margin-top: calc(50 * var(--base-unit)); } @media (max-width: 1100px) { .winners-splide .splide__slide { width: calc((100vw - var(--page-padding-left) - var(--page-padding-right) - var(--grid-gap)) / 2); } } @media (max-width: 600px) { .winners-splide .splide__slide { width: calc(100vw - (var(--page-padding-left) * 2) - (var(--page-padding-right) * 2)); } }