@charset "UTF-8"; /** * adds resets for buttons that are not covered by reset-and-normalize base */ [role=button], input[type=button], input[type=reset], input[type=submit], button { -webkit-appearance: button; -moz-appearance: button; appearance: button; background: none; border: 0; font: inherit; font-size: 100%; padding: 0; text-align: inherit; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [role=button]:-moz-focusring, input[type=button]:-moz-focusring, input[type=reset]:-moz-focusring, input[type=submit]:-moz-focusring, button:-moz-focusring { outline: none; } [role=button]:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, button:focus { outline: none; } /** * adds resets for links that are not covered by reset-and-normalize base */ a { color: inherit; text-decoration: none; } a:-moz-focusring, a:focus { outline: none; } /** * Based on * * - reset.css 2.0 by Eric Meyer (public domain) * http://meyerweb.com/eric/tools/css/reset/ * * - normalize.css 8.0.1 by Nicolas Gallagher and Jonathan Neal * (licensed under MIT) * https://github.com/necolas/normalize.css * * - Based on Reboot from Bootstrap 4.2.1 * (licensed under MIT) * https://github.com/twbs/bootstrap */ /** * IE10+ doesn't honor `` in some cases */ @-ms-viewport { width: device-width; } /** * general reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } /** * HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary { display: block; } /** * inherit box model for all elements */ *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } /** * html root rules * 1. set border-box for inheritance * 2. avoid 300ms click delay on touch devices that support the `touch-action` * CSS property * 3. Prevent adjustments of font size after orientation changes in IE, on * Windows Phone and iOS. * 4. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. * 5. Change the default tap highlight to be completely transparent in iOS. */ html { /* 1 */ -webkit-box-sizing: border-box; box-sizing: border-box; /* 2 */ /* 3 */ /* 4 */ /* 5 */ -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-touch-action: manipulation; touch-action: manipulation; } /** * body rules * 3. Set an explicit initial text-align value so that we can later use the * `inherit` value on things like `` elements. */ body { text-align: left; } /** * Lists */ ol, ul { list-style: none; } /** * Quotes */ blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } /** * Tables */ table { border-collapse: collapse; border-spacing: 0; } caption { caption-side: bottom; } /** * Table Headers * 1. Matches default `` alignment by inheriting from the ``, or the * closest parent with a set `text-align`. */ th { /* 1 */ text-align: inherit; } /** * Horizontal Lines * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { /* 1 */ -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; /* 2 */ overflow: visible; } /** * Preformatted Text * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Don't allow content to break outside * 3. We have @viewport set which causes scrollbars to overlap content in IE11 * and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to * counteract. */ pre, code, kbd, samp { /* 1 */ font-family: monospace, monospace; } pre { /* 2 */ overflow: auto; /* 3 */ -ms-overflow-style: scrollbar; } /** * Links * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { /* 1 */ background-color: transparent; /* 2 */ -webkit-text-decoration-skip: objects; } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. * 3. Add explicit cursor to indicate changed behavior. * 4. Prevent the text-decoration to be skipped. */ abbr[title] { /* 1 */ /*border-bottom: none;*/ cursor: help; /* 2 */ text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 3 */ /* 4 */ -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 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; } sub { bottom: -0.25em; } sup { top: -0.5em; } /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /** * Hide SVG overflow in IE */ svg:not(:root) { overflow: hidden; } /** * Remove the default `border-radius` that macOS Chrome adds. * Details at https://github.com/twbs/bootstrap/issues/24093 */ button { border-radius: 0; } /** * Work around a Firefox/IE bug where the transparent `button` background * results in a loss of the default `button` focus styles. * Credit: https://github.com/suitcss/base/ */ button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } /** * form element resets * 1. Remove the margin in Firefox and Safari * 2. inherit font rules */ input, button, select, optgroup, textarea { font-family: inherit; font-size: inherit; line-height: inherit; /* 1 */ margin: 0; /* 2 */ } /** * 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, [type=reset], [type=submit], [type=button] { /* 2 */ -webkit-appearance: button; } /** * Remove the default appearance of temporal inputs to avoid a Mobile Safari * bug where setting a custom line-height prevents text from being vertically * centered within the input. * See https://bugs.webkit.org/show_bug.cgi?id=139848 * and https://github.com/twbs/bootstrap/issues/11266 */ input[type=date], input[type=time], input[type=datetime-local], input[type=month] { -webkit-appearance: listbox; } /** * 1. Remove the default vertical scrollbar in IE. * 2. Textareas should really only resize vertically so they don't break their * (horizontal) containers. */ textarea { overflow: auto; resize: vertical; } /** * Show the overflow in IE. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. */ button, select { text-transform: none; } /** * Remove the inheritance of word-wrap in Safari. * See https://github.com/twbs/bootstrap/issues/24990 */ select { word-wrap: normal; } /** * Remove inner border and padding from Firefox, but don't restore the outline * like Normalize. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * 1. Add the correct box sizing in IE 10- * 2. Remove the padding in IE 10- */ input[type=radio], input[type=checkbox] { /* 1 */ -webkit-box-sizing: border-box; box-sizing: border-box; /* 2 */ padding: 0; } /** * Suppress the focus outline on elements that cannot be accessed via keyboard. * This prevents an unwanted focus outline from appearing around elements that * might still respond to pointer events. * Credit: https://github.com/suitcss/base */ [tabindex="-1"]:focus { outline: 0 !important; } /** * Browsers set a default `min-width: min-content` on fieldsets, * unlike e.g. `
`s, which have `min-width: 0` by default. * So we reset that to ensure fieldsets behave more like a standard block element. * See https://github.com/twbs/bootstrap/issues/12359 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */ fieldset { min-width: 0; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Set display to block for all browsers */ legend { /* 2 */ color: inherit; /* 3 */ display: block; /* 1 */ max-width: 100%; white-space: normal; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { /* 1 */ -webkit-box-sizing: border-box; box-sizing: border-box; /* 2 */ padding: 0; } /** * 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] { /* 1 */ -webkit-appearance: textfield; /* 2 */ outline-offset: -2px; } /** * 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 { /* 1 */ -webkit-appearance: button; /* 2 */ font: inherit; } /** * Correct element display for output */ output { display: inline-block; } /** * Add the correct display in IE 10+. */ template { display: none; } [hidden] { display: none; } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: linear; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * 3DX */ .hamburger--3dx .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dx .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dx-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dxy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg); transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { -webkit-transition-property: none; transition-property: none; } .hamburger--boring.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -10px, 0) rotate(45deg); transform: translate3d(0, -10px, 0) rotate(45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 2px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 10px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 20px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(135deg); transform: translate3d(0, 10px, 0) rotate(135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(-270deg); transform: translate3d(0, -20px, 0) rotate(-270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 2px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 10px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 20px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(-135deg); transform: translate3d(0, 10px, 0) rotate(-135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(270deg); transform: translate3d(0, -20px, 0) rotate(270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic .hamburger-inner::after { top: 10px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -80px; top: -80px; -webkit-transform: translate3d(80px, 80px, 0) rotate(45deg); transform: translate3d(80px, 80px, 0) rotate(45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -80px; top: -80px; -webkit-transform: translate3d(-80px, 80px, 0) rotate(-45deg); transform: translate3d(-80px, 80px, 0) rotate(-45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r .hamburger-inner::after { top: 10px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -80px; top: 80px; -webkit-transform: translate3d(80px, -80px, 0) rotate(-45deg); transform: translate3d(80px, -80px, 0) rotate(-45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -80px; top: 80px; -webkit-transform: translate3d(-80px, -80px, 0) rotate(45deg); transform: translate3d(-80px, -80px, 0) rotate(45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { -webkit-transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; -webkit-transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner::before { top: 10px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { -webkit-transform: rotate(-45deg) translate3d(-5.7142857143px, -6px, 0); transform: rotate(-45deg) translate3d(-5.7142857143px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg); transform: translate3d(0, -20px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner::before { top: 10px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg); transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { -webkit-transform: rotate(45deg) translate3d(5.7142857143px, -6px, 0); transform: rotate(45deg) translate3d(5.7142857143px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(90deg); transform: translate3d(0, -20px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { -webkit-transform: rotate(225deg); transform: rotate(225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 2px; -webkit-transition: background-color 0s 0.13s linear; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg); transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { -webkit-transform: rotate(90deg); transform: rotate(90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { -webkit-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease; transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex.is-active .hamburger-inner { -webkit-transform: rotate(765deg); transform: rotate(765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { opacity: 0; top: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex-r.is-active .hamburger-inner { -webkit-transform: rotate(-765deg); transform: rotate(-765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* stylelint-disable */ /**** **** font-family und font-faces **** */ /* stylelint-enable */ /* erstellt automatisch klassen aus den font-type */ .default { line-height: 1.38; font-family: regular, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); } @media (min-width: 75em) { .default { line-height: 1.36; } } .noclamp .default { font-size: 16px; } @media (min-width: 75em) { .noclamp .default { font-size: 22px; } } .t-strong { line-height: 1.38; font-family: rubik500, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); } @media (min-width: 75em) { .t-strong { line-height: 1.36; } } .noclamp .t-strong { font-size: 16px; } @media (min-width: 75em) { .noclamp .t-strong { font-size: 22px; } } .t-m { line-height: 1.33; font-family: regular, sans-serif; font-size: min(max(1.125rem, 0.703125vw), 1.125rem); font-size: clamp(1.125rem, 0.703125vw, 1.125rem); } .noclamp .t-m { font-size: 18px; } .t-m--b, .config-option__title { line-height: 1.33; font-family: rubik500, sans-serif; font-size: min(max(1.125rem, 0.703125vw), 1.125rem); font-size: clamp(1.125rem, 0.703125vw, 1.125rem); } .noclamp .t-m--b, .noclamp .config-option__title { font-size: 18px; } .t-sub { line-height: 1.33; font-family: rubik500, sans-serif; font-size: min(max(1.125rem, 0.703125vw), 1.125rem); font-size: clamp(1.125rem, 0.703125vw, 1.125rem); } .noclamp .t-sub { font-size: 18px; } @media (min-width: 75em) { .noclamp .t-sub { font-size: false; } } .t-h1 { line-height: 1.13; font-family: rubik500, sans-serif; font-size: min(max(2.5rem, 2.34375vw), 3.75rem); font-size: clamp(2.5rem, 2.34375vw, 3.75rem); } @media (min-width: 75em) { .t-h1 { line-height: 1.08; } } .noclamp .t-h1 { font-size: 40px; } @media (min-width: 75em) { .noclamp .t-h1 { font-size: 60px; } } .t-h2 { line-height: 1.17; font-family: rubik500, sans-serif; font-size: min(max(1.5rem, 1.5625vw), 2.5rem); font-size: clamp(1.5rem, 1.5625vw, 2.5rem); } @media (min-width: 75em) { .t-h2 { line-height: 1.13; } } .noclamp .t-h2 { font-size: 24px; } @media (min-width: 75em) { .noclamp .t-h2 { font-size: 40px; } } .t-label { line-height: 1.31; font-family: rubik500, sans-serif; font-size: min(max(1rem, 0.625vw), 1rem); font-size: clamp(1rem, 0.625vw, 1rem); } .noclamp .t-label { font-size: 16px; } .t-s, .p--co label.field-radio, .server-summary__list .server-summary__item { line-height: 1.31; font-family: regular, sans-serif; font-size: min(max(1rem, 0.625vw), 1rem); font-size: clamp(1rem, 0.625vw, 1rem); } .noclamp .t-s, .noclamp .p--co label.field-radio, .p--co .noclamp label.field-radio, .noclamp .server-summary__list .server-summary__item, .server-summary__list .noclamp .server-summary__item { font-size: 16px; } .t-sf-p { line-height: 1.31; font-family: rubik500, sans-serif; font-size: min(max(1rem, 1.5625vw), 2.5rem); font-size: clamp(1rem, 1.5625vw, 2.5rem); } @media (min-width: 48em) { .t-sf-p { line-height: 1.02; } } .noclamp .t-sf-p { font-size: 16px; } @media (min-width: 48em) { .noclamp .t-sf-p { font-size: 40px; } } .t-xs, .p--co label { line-height: 1.17; font-family: regular, sans-serif; font-size: min(max(0.75rem, 0.46875vw), 0.75rem); font-size: clamp(0.75rem, 0.46875vw, 0.75rem); } .noclamp .t-xs, .noclamp .p--co label, .p--co .noclamp label { font-size: 12px; } .t-xs--b { line-height: 1.17; font-family: rubik500, sans-serif; font-size: min(max(0.75rem, 0.46875vw), 0.75rem); font-size: clamp(0.75rem, 0.46875vw, 0.75rem); } .noclamp .t-xs--b { font-size: 12px; } .t-btn { line-height: 1.17; font-family: rubik500, sans-serif; font-size: min(max(0.75rem, 0.46875vw), 0.75rem); font-size: clamp(0.75rem, 0.46875vw, 0.75rem); } .noclamp .t-btn { font-size: 12px; } .t-s--title { line-height: 1.22; font-family: rubik500, sans-serif; font-size: min(max(1.125rem, 0.703125vw), 1.125rem); font-size: clamp(1.125rem, 0.703125vw, 1.125rem); } .noclamp .t-s--title { font-size: 18px; } .t-s--b, .el-sform .el-sform__range-selector .noUi-value-large { line-height: 1.31; font-family: rubik500, sans-serif; font-size: min(max(1rem, 0.625vw), 1rem); font-size: clamp(1rem, 0.625vw, 1rem); } .noclamp .t-s--b, .noclamp .el-sform .el-sform__range-selector .noUi-value-large, .el-sform .el-sform__range-selector .noclamp .noUi-value-large { font-size: 16px; } .t-h3 { line-height: 1.13; font-family: rubik500, sans-serif; font-size: min(max(2.5rem, 1.5625vw), 2.5rem); font-size: clamp(2.5rem, 1.5625vw, 2.5rem); } .noclamp .t-h3 { font-size: 40px; } .t-h4 { line-height: 1.38; font-family: rubik500, sans-serif; font-size: min(max(1rem, 1.171875vw), 1.875rem); font-size: clamp(1rem, 1.171875vw, 1.875rem); } @media (min-width: 75em) { .t-h4 { line-height: 1.17; } } .noclamp .t-h4 { font-size: 16px; } @media (min-width: 75em) { .noclamp .t-h4 { font-size: 30px; } } .desktopnav { line-height: 1.38; font-family: rubik500, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); } @media (min-width: 75em) { .desktopnav { line-height: 1.36; } } .noclamp .desktopnav { font-size: 16px; } @media (min-width: 75em) { .noclamp .desktopnav { font-size: 22px; } } /* * Ab hier sind nur noch Funktionen, Mixins, oder Generation von Klassen * */ @font-face { font-family: "rubik300"; font-weight: 300; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/rubik-v28-latin/rubik-v28-latin-300.woff2") format("woff2"); } @font-face { font-family: "rubik500"; font-weight: 500; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/rubik-v28-latin/rubik-v28-latin-500.woff2") format("woff2"); } @font-face { font-family: "rubik700"; font-weight: 700; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/rubik-v28-latin/rubik-v28-latin-700.woff2") format("woff2"); } @font-face { font-family: "regular"; font-weight: 400; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/rubik-v28-latin/rubik-v28-latin-regular.woff2") format("woff2"); } .row__inner { position: relative; margin: 0 auto; max-width: 1760px; padding: 0 15px; } @media (min-width: 48em) { .row__inner { padding: 0 96px; } } .row__inner--sm { margin: 0 auto; max-width: 750px; } @media (min-width: 75em) { .row__inner--sm { margin: 0 auto; max-width: 80%; } } .row__inner--blog { margin: 0 auto; max-width: 1038px; } .row__inner--tw { margin: 0 auto; max-width: 1500px; } .row__inner--full { max-width: inherit; } /* .col-1{ width:span(12); @include breakpoint(small){ width:span(10); } @include breakpoint(medium){ width:susy-span(6 of 12); width: percentage(2/12); } @include breakpoint(lg){ width:span(2); } }*/ /* * Ab hier sind nur noch Funktionen, Mixins, oder Generation von Klassen * */ *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: "regular, sans-serif"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } /* * Ab hier sind nur noch Funktionen, Mixins, oder Generation von Klassen */ :root { --color-blacklogo: #001937; --color-blue: #135AA1; --color-bluelight: #E7EEF6; --color-blue2: #0F4B87; --color-white: #fff; --color-orange: #EC6726; --color-grey: #A1A5A7; --color-greydark: #646363; --color-bluedusty: #89ACD0; --color-success: #AFD79E; } .c-blacklogo { color: #001937; color: var(--color-blacklogo); } .bg-blacklogo { background-color: #001937; background-color: var(--color-blacklogo); } .c-blue { color: #135AA1; color: var(--color-blue); } .bg-blue { background-color: #135AA1; background-color: var(--color-blue); } .c-bluelight { color: #E7EEF6; color: var(--color-bluelight); } .bg-bluelight { background-color: #E7EEF6; background-color: var(--color-bluelight); } .c-blue2 { color: #0F4B87; color: var(--color-blue2); } .bg-blue2 { background-color: #0F4B87; background-color: var(--color-blue2); } .c-white { color: #fff; color: var(--color-white); } .bg-white { background-color: #fff; background-color: var(--color-white); } .c-orange { color: #EC6726; color: var(--color-orange); } .bg-orange { background-color: #EC6726; background-color: var(--color-orange); } .c-grey { color: #A1A5A7; color: var(--color-grey); } .bg-grey { background-color: #A1A5A7; background-color: var(--color-grey); } .c-greydark { color: #646363; color: var(--color-greydark); } .bg-greydark { background-color: #646363; background-color: var(--color-greydark); } .c-bluedusty { color: #89ACD0; color: var(--color-bluedusty); } .bg-bluedusty { background-color: #89ACD0; background-color: var(--color-bluedusty); } .c-success { color: #AFD79E; color: var(--color-success); } .bg-success { background-color: #AFD79E; background-color: var(--color-success); } .bg-white .hamburger-inner, .bg-white .hamburger-inner:after, .bg-white .hamburger-inner:before, .bg-white .hamburger-inner, .bg-white .hamburger-inner:after, .bg-white .hamburger-inner:before { background: #fff; background: var(--color-white); } .menu-toggle { background-color: #135AA1; background-color: var(--color-blue); color: white; padding: 0.375rem 0.75rem; border: none; border-radius: 9999px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 0.75em; gap: 0.75em; font-weight: bold; font-size: 1rem; cursor: pointer; } @media (min-width: 75em) { .menu-toggle { display: none; } } .menu-toggle .svg-item { width: 24px; height: 24px; } .menu-toggle .svg-item line { stroke: white; stroke-width: 1; stroke-linecap: round; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #menu-toggle .svg-item { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #menu-toggle .svg-item line { -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform-origin: center; transform-origin: center; } #menu-toggle.hamburger-open .svg-item .line1 { -webkit-transform: rotate(45deg) translate(0, 6px); transform: rotate(45deg) translate(0, 6px); } #menu-toggle.hamburger-open .svg-item .line2 { opacity: 0; } #menu-toggle.hamburger-open .svg-item .line3 { -webkit-transform: rotate(-45deg) translate(0, -6px); transform: rotate(-45deg) translate(0, -6px); } /* svg-item line { stroke: white; stroke-width: 2; stroke-linecap: round; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: 50% 50%; } .hamburger-open .svg-item .line1 { transform: rotate(45deg) translate(2px, 2px); } .hamburger-open .svg-item .line2 { opacity: 0; } .hamburger-open .svg-item .line3 { transform: rotate(-45deg) translate(2px, -2px); } */ .m-s { margin: 20px; margin: 1.25rem; margin: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .m-s { margin: 30px; margin: 1.875rem; margin: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .m-s { margin: 40px; margin: 2.5rem; margin: clamp(2.5rem, 2.5rem, 2.5rem); } } .m-m { margin: 64px; margin: 4rem; margin: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .m-m { margin: 80px; margin: 5rem; margin: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .m-m { margin: 144px; margin: 9rem; margin: clamp(9rem, 9rem, 9rem); } } .m-l { margin: 75px; margin: 4.6875rem; margin: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .m-l { margin: 96px; margin: 6rem; margin: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .m-l { margin: 180px; margin: 11.25rem; margin: clamp(11.25rem, 11.25rem, 11.25rem); } } .mt-s { margin-top: 20px; margin-top: 1.25rem; margin-top: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .mt-s { margin-top: 30px; margin-top: 1.875rem; margin-top: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .mt-s { margin-top: 40px; margin-top: 2.5rem; margin-top: clamp(2.5rem, 2.5rem, 2.5rem); } } .mt-m { margin-top: 64px; margin-top: 4rem; margin-top: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .mt-m { margin-top: 80px; margin-top: 5rem; margin-top: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .mt-m { margin-top: 144px; margin-top: 9rem; margin-top: clamp(9rem, 9rem, 9rem); } } .mt-l { margin-top: 75px; margin-top: 4.6875rem; margin-top: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .mt-l { margin-top: 96px; margin-top: 6rem; margin-top: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .mt-l { margin-top: 180px; margin-top: 11.25rem; margin-top: clamp(11.25rem, 11.25rem, 11.25rem); } } .mr-s { margin-right: 20px; margin-right: 1.25rem; margin-right: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .mr-s { margin-right: 30px; margin-right: 1.875rem; margin-right: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .mr-s { margin-right: 40px; margin-right: 2.5rem; margin-right: clamp(2.5rem, 2.5rem, 2.5rem); } } .mr-m { margin-right: 64px; margin-right: 4rem; margin-right: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .mr-m { margin-right: 80px; margin-right: 5rem; margin-right: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .mr-m { margin-right: 144px; margin-right: 9rem; margin-right: clamp(9rem, 9rem, 9rem); } } .mr-l { margin-right: 75px; margin-right: 4.6875rem; margin-right: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .mr-l { margin-right: 96px; margin-right: 6rem; margin-right: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .mr-l { margin-right: 180px; margin-right: 11.25rem; margin-right: clamp(11.25rem, 11.25rem, 11.25rem); } } .mb-s { margin-bottom: 20px; margin-bottom: 1.25rem; margin-bottom: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .mb-s { margin-bottom: 30px; margin-bottom: 1.875rem; margin-bottom: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .mb-s { margin-bottom: 40px; margin-bottom: 2.5rem; margin-bottom: clamp(2.5rem, 2.5rem, 2.5rem); } } .mb-m { margin-bottom: 64px; margin-bottom: 4rem; margin-bottom: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .mb-m { margin-bottom: 80px; margin-bottom: 5rem; margin-bottom: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .mb-m { margin-bottom: 144px; margin-bottom: 9rem; margin-bottom: clamp(9rem, 9rem, 9rem); } } .mb-l { margin-bottom: 75px; margin-bottom: 4.6875rem; margin-bottom: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .mb-l { margin-bottom: 96px; margin-bottom: 6rem; margin-bottom: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .mb-l { margin-bottom: 180px; margin-bottom: 11.25rem; margin-bottom: clamp(11.25rem, 11.25rem, 11.25rem); } } .ml-s { margin-left: 20px; margin-left: 1.25rem; margin-left: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .ml-s { margin-left: 30px; margin-left: 1.875rem; margin-left: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .ml-s { margin-left: 40px; margin-left: 2.5rem; margin-left: clamp(2.5rem, 2.5rem, 2.5rem); } } .ml-m { margin-left: 64px; margin-left: 4rem; margin-left: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .ml-m { margin-left: 80px; margin-left: 5rem; margin-left: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .ml-m { margin-left: 144px; margin-left: 9rem; margin-left: clamp(9rem, 9rem, 9rem); } } .ml-l { margin-left: 75px; margin-left: 4.6875rem; margin-left: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .ml-l { margin-left: 96px; margin-left: 6rem; margin-left: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .ml-l { margin-left: 180px; margin-left: 11.25rem; margin-left: clamp(11.25rem, 11.25rem, 11.25rem); } } .p-s { padding: 20px; padding: 1.25rem; padding: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .p-s { padding: 30px; padding: 1.875rem; padding: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .p-s { padding: 40px; padding: 2.5rem; padding: clamp(2.5rem, 2.5rem, 2.5rem); } } .p-m { padding: 64px; padding: 4rem; padding: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .p-m { padding: 80px; padding: 5rem; padding: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .p-m { padding: 144px; padding: 9rem; padding: clamp(9rem, 9rem, 9rem); } } .p-l { padding: 75px; padding: 4.6875rem; padding: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .p-l { padding: 96px; padding: 6rem; padding: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .p-l { padding: 180px; padding: 11.25rem; padding: clamp(11.25rem, 11.25rem, 11.25rem); } } .pt-s { padding-top: 20px; padding-top: 1.25rem; padding-top: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .pt-s { padding-top: 30px; padding-top: 1.875rem; padding-top: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .pt-s { padding-top: 40px; padding-top: 2.5rem; padding-top: clamp(2.5rem, 2.5rem, 2.5rem); } } .pt-m { padding-top: 64px; padding-top: 4rem; padding-top: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .pt-m { padding-top: 80px; padding-top: 5rem; padding-top: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .pt-m { padding-top: 144px; padding-top: 9rem; padding-top: clamp(9rem, 9rem, 9rem); } } .pt-l { padding-top: 75px; padding-top: 4.6875rem; padding-top: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .pt-l { padding-top: 96px; padding-top: 6rem; padding-top: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .pt-l { padding-top: 180px; padding-top: 11.25rem; padding-top: clamp(11.25rem, 11.25rem, 11.25rem); } } .pr-s { padding-right: 20px; padding-right: 1.25rem; padding-right: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .pr-s { padding-right: 30px; padding-right: 1.875rem; padding-right: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .pr-s { padding-right: 40px; padding-right: 2.5rem; padding-right: clamp(2.5rem, 2.5rem, 2.5rem); } } .pr-m { padding-right: 64px; padding-right: 4rem; padding-right: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .pr-m { padding-right: 80px; padding-right: 5rem; padding-right: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .pr-m { padding-right: 144px; padding-right: 9rem; padding-right: clamp(9rem, 9rem, 9rem); } } .pr-l { padding-right: 75px; padding-right: 4.6875rem; padding-right: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .pr-l { padding-right: 96px; padding-right: 6rem; padding-right: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .pr-l { padding-right: 180px; padding-right: 11.25rem; padding-right: clamp(11.25rem, 11.25rem, 11.25rem); } } .pb-s { padding-bottom: 20px; padding-bottom: 1.25rem; padding-bottom: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .pb-s { padding-bottom: 30px; padding-bottom: 1.875rem; padding-bottom: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .pb-s { padding-bottom: 40px; padding-bottom: 2.5rem; padding-bottom: clamp(2.5rem, 2.5rem, 2.5rem); } } .pb-m { padding-bottom: 64px; padding-bottom: 4rem; padding-bottom: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .pb-m { padding-bottom: 80px; padding-bottom: 5rem; padding-bottom: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .pb-m { padding-bottom: 144px; padding-bottom: 9rem; padding-bottom: clamp(9rem, 9rem, 9rem); } } .pb-l { padding-bottom: 75px; padding-bottom: 4.6875rem; padding-bottom: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .pb-l { padding-bottom: 96px; padding-bottom: 6rem; padding-bottom: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .pb-l { padding-bottom: 180px; padding-bottom: 11.25rem; padding-bottom: clamp(11.25rem, 11.25rem, 11.25rem); } } .pl-s { padding-left: 20px; padding-left: 1.25rem; padding-left: clamp(1.25rem, 1.25rem + 0.78125vw, 2.5rem); } @media (min-width: 768px) { .pl-s { padding-left: 30px; padding-left: 1.875rem; padding-left: clamp(1.875rem, 1.875rem, 2.5rem); } } @media (min-width: 1200px) { .pl-s { padding-left: 40px; padding-left: 2.5rem; padding-left: clamp(2.5rem, 2.5rem, 2.5rem); } } .pl-m { padding-left: 64px; padding-left: 4rem; padding-left: clamp(4rem, 4rem + 3.125vw, 9rem); } @media (min-width: 768px) { .pl-m { padding-left: 80px; padding-left: 5rem; padding-left: clamp(5rem, 5rem, 9rem); } } @media (min-width: 1200px) { .pl-m { padding-left: 144px; padding-left: 9rem; padding-left: clamp(9rem, 9rem, 9rem); } } .pl-l { padding-left: 75px; padding-left: 4.6875rem; padding-left: clamp(4.6875rem, 4.6875rem + 4.1015625vw, 11.25rem); } @media (min-width: 768px) { .pl-l { padding-left: 96px; padding-left: 6rem; padding-left: clamp(6rem, 6rem, 11.25rem); } } @media (min-width: 1200px) { .pl-l { padding-left: 180px; padding-left: 11.25rem; padding-left: clamp(11.25rem, 11.25rem, 11.25rem); } } /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ /* Hide visually and from screenreaders, but maintain layout */ .block { display: block; height: auto; width: 100%; } body { line-height: 1.38; font-family: regular, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); color: #001937; color: var(--color-blacklogo); } @media (min-width: 75em) { body { line-height: 1.36; } } .noclamp body { font-size: 16px; } @media (min-width: 75em) { .noclamp body { font-size: 22px; } } .primary__link { line-height: 1.38; font-family: rubik500, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); color: #001937; color: var(--color-blacklogo); } @media (min-width: 75em) { .primary__link { line-height: 1.36; } } .noclamp .primary__link { font-size: 16px; } @media (min-width: 75em) { .noclamp .primary__link { font-size: 22px; } } .t-label { text-transform: uppercase; } .t-c { text-align: center; } .footer { line-height: 1.31; font-family: regular, sans-serif; font-size: min(max(1rem, 0.625vw), 1rem); font-size: clamp(1rem, 0.625vw, 1rem); color: #fff; color: var(--color-white); } .noclamp .footer { font-size: 16px; } .footer__heading, .footer .accordion__trigger { line-height: 1.31; font-family: rubik500, sans-serif; font-size: min(max(1rem, 0.625vw), 1rem); font-size: clamp(1rem, 0.625vw, 1rem); color: #fff; color: var(--color-white); } .noclamp .footer__heading, .noclamp .footer .accordion__trigger { font-size: 16px; } .htmleditor p + p, .htmleditor p + ul, .htmleditor ul + p { margin-top: 1em; } .htmleditor h1 + p, .htmleditor h1 + ul, .htmleditor h1 + ol, .htmleditor h1 + blockquote, .htmleditor h1 + pre, .htmleditor h1 + table, .htmleditor h2 + p, .htmleditor h2 + ul, .htmleditor h2 + ol, .htmleditor h2 + blockquote, .htmleditor h2 + pre, .htmleditor h2 + table, .htmleditor h3 + p, .htmleditor h3 + ul, .htmleditor h3 + ol, .htmleditor h3 + blockquote, .htmleditor h3 + pre, .htmleditor h3 + table, .htmleditor h4 + p, .htmleditor h4 + ul, .htmleditor h4 + ol, .htmleditor h4 + blockquote, .htmleditor h4 + pre, .htmleditor h4 + table, .htmleditor h5 + p, .htmleditor h5 + ul, .htmleditor h5 + ol, .htmleditor h5 + blockquote, .htmleditor h5 + pre, .htmleditor h5 + table, .htmleditor h6 + p, .htmleditor h6 + ul, .htmleditor h6 + ol, .htmleditor h6 + blockquote, .htmleditor h6 + pre, .htmleditor h6 + table { margin-top: 1em; } .htmleditor p + h1, .htmleditor p + h2, .htmleditor p + h3, .htmleditor p + h4, .htmleditor p + h5, .htmleditor p + h6, .htmleditor p p, .htmleditor ul + h1, .htmleditor ul + h2, .htmleditor ul + h3, .htmleditor ul + h4, .htmleditor ul + h5, .htmleditor ul + h6, .htmleditor ul p, .htmleditor ol + h1, .htmleditor ol + h2, .htmleditor ol + h3, .htmleditor ol + h4, .htmleditor ol + h5, .htmleditor ol + h6, .htmleditor ol p, .htmleditor blockquote + h1, .htmleditor blockquote + h2, .htmleditor blockquote + h3, .htmleditor blockquote + h4, .htmleditor blockquote + h5, .htmleditor blockquote + h6, .htmleditor blockquote p, .htmleditor pre + h1, .htmleditor pre + h2, .htmleditor pre + h3, .htmleditor pre + h4, .htmleditor pre + h5, .htmleditor pre + h6, .htmleditor pre p, .htmleditor table + h1, .htmleditor table + h2, .htmleditor table + h3, .htmleditor table + h4, .htmleditor table + h5, .htmleditor table + h6, .htmleditor table p { margin-top: 2em; } .htmleditor ol + p { margin-top: 2em; } .htmleditor a { text-decoration: underline; } .htmleditor a:hover, .htmleditor a:focus { text-decoration: none; } .htmleditor ul, .htmleditor ol { list-style: none; margin-left: 2em; } .htmleditor ol { list-style: decimal; } .htmleditor ul li { position: relative; } .htmleditor ul li:before { content: ""; position: absolute; left: 0; top: 0.5em; width: 1rem; height: 1rem; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22icon--right%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23001937%22%20d%3D%22M14.03%2019.28l6.75-6.75a.748.748%200%20000-1.06l-6.75-6.75a.75.75%200%2010-1.06%201.06l5.47%205.47H3.75a.75.75%200%20100%201.5h14.69l-5.47%205.47a.75.75%200%20101.06%201.06z%22%2F%3E%3C%2Fsvg%3E'); background-size: contain; background-repeat: no-repeat; -webkit-transform: translate(-150%, -30%); transform: translate(-150%, -30%); } .htmleditor h2 { line-height: 1.17; font-family: rubik500, sans-serif; font-size: min(max(1.5rem, 1.5625vw), 2.5rem); font-size: clamp(1.5rem, 1.5625vw, 2.5rem); } @media (min-width: 75em) { .htmleditor h2 { line-height: 1.13; } } .noclamp .htmleditor h2 { font-size: 24px; } @media (min-width: 75em) { .noclamp .htmleditor h2 { font-size: 40px; } } .htmleditor h2 strong { font-weight: inherit; line-height: 1.17; font-family: rubik500, sans-serif; font-size: min(max(1.5rem, 1.5625vw), 2.5rem); font-size: clamp(1.5rem, 1.5625vw, 2.5rem); } @media (min-width: 75em) { .htmleditor h2 strong { line-height: 1.13; } } .noclamp .htmleditor h2 strong { font-size: 24px; } @media (min-width: 75em) { .noclamp .htmleditor h2 strong { font-size: 40px; } } .htmleditor h3 { line-height: 1.38; font-family: rubik500, sans-serif; font-size: min(max(1rem, 1.171875vw), 1.875rem); font-size: clamp(1rem, 1.171875vw, 1.875rem); } @media (min-width: 75em) { .htmleditor h3 { line-height: 1.17; } } .noclamp .htmleditor h3 { font-size: 16px; } @media (min-width: 75em) { .noclamp .htmleditor h3 { font-size: 30px; } } .htmleditor strong, .htmleditor h4, .htmleditor h5, .htmleditor h6 { line-height: 1.38; font-family: rubik500, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); } @media (min-width: 75em) { .htmleditor strong, .htmleditor h4, .htmleditor h5, .htmleditor h6 { line-height: 1.36; } } .noclamp .htmleditor strong, .noclamp .htmleditor h4, .noclamp .htmleditor h5, .noclamp .htmleditor h6 { font-size: 16px; } @media (min-width: 75em) { .noclamp .htmleditor strong, .noclamp .htmleditor h4, .noclamp .htmleditor h5, .noclamp .htmleditor h6 { font-size: 22px; } } .main { margin-top: 5em; } #BetterNavigator { display: none; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; margin: -1px; } #klaro-cookie-notice { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; will-change: transform; } #klaro-cookie-notice.is-visible { -webkit-transform: translateY(0); transform: translateY(0); } .grid--4 { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; gap: 1rem; } @media (min-width: 48em) { .grid--4 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 75em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } .header { position: fixed; top: 0; left: 0; width: 100%; height: 5em; padding-top: 15px; padding-bottom: 15px; z-index: 10; } .header__inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header__col { display: -webkit-box; display: -ms-flexbox; display: flex; } .header__logo, .p--co__logo { width: 156px; } @media (min-width: 48em) { .header__logo, .p--co__logo { width: 176px; } } .header__logo__link { display: block; width: 100%; } .header__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header__nav { display: none; } @media (min-width: 75em) { .header__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .header .btn--profil { display: none; } @media (min-width: 48em) { .header .btn--profil { display: block; } } .header .btn--contact { display: none; } @media (min-width: 75em) { .header .btn--contact { display: block !important; } } .primary { display: none; } @media (min-width: 75em) { .primary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .primary__entry { margin-right: 2rem; } .primary__entry:last-of-type { margin-right: 0; } .primary__link { text-transform: uppercase; } .primary__link--sub { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .primary__link--sub span { display: block; padding-right: 0.5rem; } .primary__link--sub .svg-item { width: 0.75em; } .primary__link:hover, .primary__link:focus, .primary__link.current { color: #0F4B87; color: var(--color-blue2); } .primary .primary__sub { display: none; } .primary__entry { position: relative; } .primary__entry:hover .primary__sub, .primary__entry:focus .primary__sub { display: block; position: absolute; top: 0; padding-top: 2rem; left: 0; width: auto; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; } .primary__entry:hover .primary__sub__inner, .primary__entry:focus .primary__sub__inner { padding: 1.5rem 1rem; background: #001937; background: var(--color-blacklogo); border-radius: 0.5rem; } .primary__entry:hover .primary__sub a, .primary__entry:focus .primary__sub a { color: #fff; color: var(--color-white); display: block; margin-bottom: 0.5rem; } .bg-lg { background: -webkit-gradient(linear, left top, right top, from(#135AA1), to(#0F4B87)); background: linear-gradient(90deg, #135AA1 0%, #0F4B87 100%); background: -webkit-gradient(linear, left top, right top, from(var(--color-blue)), to(var(--color-blue2))); background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-blue2) 100%); } .bg-lg.el-teaser { color: #fff; color: var(--color-white); } .footer a:hover, .footer a:focus { color: #89ACD0; color: var(--color-bluedusty); } .footer a.current, .footer a.section { color: #89ACD0; color: var(--color-bluedusty); } .p-config .footer { padding-bottom: 10rem; } .footer__info .icon--logo { display: block; max-width: 12em; } .footer__mob { padding: 4rem 0; } @media (min-width: 75em) { .footer__mob { display: none; } } .footer__mob .footer__info { padding-top: 4rem; padding-bottom: 3rem; position: relative; } .footer__mob .footer__info .footer__copyright { margin-top: 2rem; } .footer__mob .scroll-top { position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .footer__mob .accordion .js-accordion__panel { border-top: 1px solid #E7EEF6; border-top: 1px solid var(--color-bluelight); } .footer__mob .accordion .js-accordion__panel:last-of-type { border-bottom: 1px solid #E7EEF6; border-bottom: 1px solid var(--color-bluelight); } .footer__mob .accordion .accordion__trigger.icon--text { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1em 0; width: 100%; } .footer__mob .accordion .accordion__content { padding-top: 2em; padding-bottom: 2em; } .footer__mob .accordion .footer__mob__list li { margin-bottom: 1em; } .footer__mob .accordion .footer__mob__list li:last-of-type { margin-bottom: 0; } .footer__desk { display: none; } @media (min-width: 75em) { .footer__desk { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .footer__desk .footer__desk__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer__desk__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__desk__nav .footer__desk__col { margin-right: 8rem; } .footer__desk__nav .footer__desk__col:last-of-type { margin-right: 0; } .footer__desk__nav .footer__desk__nav__short { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .footer__heading { margin-bottom: 2em; } .footer__list li { margin-bottom: 1em; } .footer__list li:last-of-type { margin-bottom: 0; } .footer .scroll-top { display: block; width: 2rem; height: 2rem; } .mob-nav { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; height: auto; position: absolute; visibility: hidden; width: 100%; right: 0; z-index: 5; background: #001937; background: var(--color-blacklogo); -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; color: #fff; color: var(--color-white); top: 0; padding-top: 5em; height: 100vh; overflow: scroll; } @media (min-width: 75em) { .mob-nav { display: none; } } .mob-nav.open { -webkit-transform: translateY(0%); transform: translateY(0%); visibility: visible; position: fixed; -webkit-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .mob-nav__inner { padding: 2rem; height: 100%; } .mob-nav__primary__list { border-bottom: 1px solid #E7EEF6; border-bottom: 1px solid var(--color-bluelight); } .mob-nav__primary__link { padding: 0.5rem 0; display: block; } .mob-nav__primary__link:hover, .mob-nav__primary__link:focus { color: #89ACD0; color: var(--color-bluedusty); } .mob-nav .btn--profil { display: block; fill: white; border-color: white; } .mob-nav__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 1rem; } .mob-nav .mob-nav__primary__sub { display: none; } .mob-nav .mob-nav__primary__sub.is-open { display: block; } .mob-nav .mob-nav__primary__link--sub { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mob-nav .mob-nav__primary__link--sub .svg-item { width: 1rem; height: 1rem; fill: #fff; fill: var(--color-white); } .mob-nav .mob-nav__primary__subnav__list { padding: 0.5rem 0 0.5rem 1rem; } .mob-nav .mob-nav__primary__subnav__link { color: #fff; color: var(--color-white); } .mob-nav .mob-nav__primary__subnav__link:hover, .mob-nav .mob-nav__primary__subnav__link:focus { color: #89ACD0; color: var(--color-bluedusty); } .mob-nav .is-open .svg-item { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all ease-in-out 0.4s; transition: all ease-in-out 0.4s; } body.nav-open { height: 100vh; overflow: hidden; } .htmleditor img { max-width: 100%; height: auto; } .htmleditor img.leftAlone { float: left; margin-right: 100%; margin-bottom: 10px; clear: both; } .htmleditor img.rightAlone { float: right; margin-left: 100%; margin-bottom: 10px; clear: both; } .htmleditor img.center { float: none; margin-left: auto; margin-right: auto; display: block; margin-bottom: 10px; clear: both; } .btn { width: auto; } .btn--profil { border-radius: 50%; width: 1.5rem; height: 1.5rem; border: 1px solid #001937; border: 1px solid var(--color-blacklogo); padding: 3px; margin-right: 1em; position: relative; } .btn--profil .svg-item { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn--main { border-width: 1px; border-style: solid; padding: 1em 2em; border-radius: 40px; text-transform: uppercase; min-width: 120px; text-align: center; } .btn--bluedark { border-color: #001937; border-color: var(--color-blacklogo); } .btn--bluedark:hover, .btn--bluedark:focus, .btn--bluedark.active { background: #001937; background: var(--color-blacklogo); color: #E7EEF6; color: var(--color-bluelight); } .btn--blue { border-color: #135AA1; border-color: var(--color-blue); background: #135AA1; background: var(--color-blue); color: #fff; color: var(--color-white); } .btn--blue:hover, .btn--blue:focus, .btn--blue.active { background: transparent; color: #135AA1; color: var(--color-blue); } .btn--primary { border: 1px solid #001937; border: 1px solid var(--color-blacklogo); padding: 1em 2em; border-radius: 40px; text-transform: uppercase; } .btn--primary.el-blog-holder__cat { padding: 0.5em 1em; } .btn--primary:hover, .btn--primary:focus, .btn--primary.active { background: #001937; background: var(--color-blacklogo); color: #E7EEF6; color: var(--color-bluelight); } .btn--sec { border: 1px solid #001937; border: 1px solid var(--color-blacklogo); background: #001937; background: var(--color-blacklogo); color: #fff; color: var(--color-white); padding: 1em 2em; border-radius: 1rem; text-transform: uppercase; } .btn--sec:hover, .btn--sec:focus { background: #fff; background: var(--color-white); color: #001937; color: var(--color-blacklogo); } .btn--third { border: 1px solid #135AA1; border: 1px solid var(--color-blue); background: #135AA1; background: var(--color-blue); color: #fff; color: var(--color-white); border-radius: 1rem; text-transform: uppercase; line-height: 1; } .btn--third span { position: relative; top: -1px; line-height: 1; } .btn--third:hover, .btn--third:focus { background: #001937; background: var(--color-blacklogo); color: #135AA1; color: var(--color-blue); } .btn--pk { border: 1px solid #EC6726; border: 1px solid var(--color-orange); background: #EC6726; background: var(--color-orange); color: #fff; color: var(--color-white); border-radius: 1rem; text-transform: uppercase; line-height: 1; display: none; } @media (min-width: 75em) { .btn--pk { display: -webkit-box; display: -ms-flexbox; display: flex; } } .btn--pk span { position: relative; top: -1px; line-height: 1; } .btn--pk:hover, .btn--pk:focus { background: #001937; background: var(--color-blacklogo); border: 1px solid #001937; border: 1px solid var(--color-blacklogo); color: #fff; color: var(--color-white); } .header .btn--pk { margin-left: 1em; } .mob-nav__inner .btn--pk { display: block; margin-left: 1em; } .mob-nav__inner .btn--pk:hover, .mob-nav__inner .btn--pk:focus, .mob-nav__inner .btn--pk.active { border: 1px solid #fff; border: 1px solid var(--color-white); } .btn--success { border: 1px solid #AFD79E; border: 1px solid var(--color-success); background: #AFD79E; background: var(--color-success); color: #001937; color: var(--color-blacklogo); padding: 0.5rem 1rem; margin: 1rem 0; border-radius: 1rem; text-transform: inherit; line-height: 1; display: inline-block; } .btn--contact { padding: 0.35rem 0.75rem; background: #135AA1; background: var(--color-blue); } .form-checkbox-container { white-space: wrap; width: 100%; } .icon--text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .icon--text--rev span { padding-right: 0.5em; } .icon--logo__lwl { fill: #135AA1; fill: var(--color-blue); } .icon--logo__com { fill: #001937; fill: var(--color-blacklogo); } .footer .icon--logo .icon--logo__lwl, .footer .icon--logo .icon--logo__com { fill: #fff; fill: var(--color-white); } .p--co .icon--logo .icon--logo__lwl { fill: #135AA1; fill: var(--color-blue); } .p--co .icon--logo .icon--logo__com { fill: #001937; fill: var(--color-blacklogo); } .icon--profil { width: 1em; margin-left: 0; } .icon--left { fill: #001937; fill: var(--color-blacklogo); } button:hover .icon--left, button:focus .icon--left { fill: #E7EEF6; fill: var(--color-bluelight); } .icon--right { fill: #001937; fill: var(--color-blacklogo); } button:hover .icon--right, button:focus .icon--right { fill: #E7EEF6; fill: var(--color-bluelight); } .icon--text .icon--right { width: 1em; } .icon--rocket { fill: #001937; fill: var(--color-blacklogo); width: 2.5rem; display: block; } .icon--check { stroke: #001937; stroke: var(--color-blacklogo); width: 1em; } .icon--quote { fill: #135AA1; fill: var(--color-blue); width: 3rem; } .icon--scrolltop { width: 2.5rem; } .icon--scrolltop__circle { fill: #135AA1; fill: var(--color-blue); } .scroll-top:hover .icon--scrolltop__circle { fill: #fff; fill: var(--color-white); } .icon--scrolltop__arrow { fill: #fff; fill: var(--color-white); } .scroll-top:hover .icon--scrolltop__arrow { fill: #135AA1; fill: var(--color-blue); } .icon--up { stroke: #fff; stroke: var(--color-white); width: 2.5rem; } .icon--down { stroke: #fff; stroke: var(--color-white); width: 2.5rem; } .server-summary .icon--down { fill: #fff; fill: var(--color-white); stroke: #001937; stroke: var(--color-blacklogo); } .icon--cart { fill: #135AA1; fill: var(--color-blue); } .icon--more { stroke: #001937; stroke: var(--color-blacklogo); width: 3rem; } .svg-item--circle { border: 1px solid #001937; border: 1px solid var(--color-blacklogo); border-radius: 50%; padding: 0.85em; } .img-figure img { border-radius: 0.5rem; overflow: hidden; display: block; width: 100%; } .accordion__content[aria-hidden=true] { display: none; } .accordion .icon--down { margin-right: 1em; -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .accordion .accordion__trigger[aria-expanded=true] .icon--down { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .accordion__trigger__title { width: 80%; color: #001937; color: var(--color-blacklogo); } .accordion .svg-item.icon--more.svg-item--circle { width: 48px; margin-left: 10px; } .bg-img--1 { position: relative; z-index: 1; overflow: hidden; } .bg-img--1::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--1.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--2 { position: relative; z-index: 1; overflow: hidden; } .bg-img--2::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--2.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--3 { position: relative; z-index: 1; overflow: hidden; } .bg-img--3::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--3.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--4 { position: relative; z-index: 1; overflow: hidden; } .bg-img--4::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--4.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--5 { position: relative; z-index: 1; overflow: hidden; } .bg-img--5::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--5.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--6 { position: relative; z-index: 1; overflow: hidden; } .bg-img--6::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--6.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--7 { position: relative; z-index: 1; overflow: hidden; } .bg-img--7::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--7.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--8 { position: relative; z-index: 1; overflow: hidden; } .bg-img--8::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--8.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--9 { position: relative; z-index: 1; overflow: hidden; } .bg-img--9::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--9.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--10 { position: relative; z-index: 1; overflow: hidden; } .bg-img--10::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--10.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--11 { position: relative; z-index: 1; overflow: hidden; } .bg-img--11::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--11.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--12 { position: relative; z-index: 1; overflow: hidden; } .bg-img--12::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--12.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--13 { position: relative; z-index: 1; overflow: hidden; } .bg-img--13::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--13.svg"); background-repeat: no-repeat; background-position: top; pointer-events: none; height: 100%; width: 100%; } .bg-img--1:after { background-position: 0 0; background-image: url("/_resources/themes/mysite/dist/images/img-single/bg-img--1.png"); } @media (min-width: 48em) { .bg-img--1:after { margin-left: 96px; } } @media (min-width: 75em) { .bg-img--1:after { margin: 0; max-width: 1760px; background-image: url("/_resources/themes/mysite/dist/images/img-single/bg-img--1__desktop.png"); } } .bg-img--2:after { background-position: 0 0; background-image: url("/_resources/themes/mysite/dist/images/img-single/bg-img--2.png"); } @media (min-width: 48em) { .bg-img--2:after { margin-left: 96px; } } @media (min-width: 75em) { .bg-img--2:after { margin: 0; max-width: 1760px; background-image: url("/_resources/themes/mysite/dist/images/img-single/bg-img--2__desktop.png"); } } .bg-img--3:after { background-position: top right; } @media (min-width: 48em) { .bg-img--3:after { margin-left: 96px; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--3__tablet.svg"); background-position: center right; } } @media (min-width: 48em) { .bg-img--3:after { margin-left: 96px; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--3__desktop.svg"); background-position: center right; background-size: contain; } } .bg-img--4:after { background-position: top left; } @media (min-width: 48em) { .bg-img--4:after { margin-left: 96px; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--4__tablet.svg"); background-position: center right; } } @media (min-width: 48em) { .bg-img--4:after { margin-left: 96px; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--4__desktop.svg"); background-position: center right; background-size: contain; } } .bg-img--5:after { background-position: top left; } @media (min-width: 75em) { .bg-img--5:after { background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--5__desktop.svg"); background-position: top left; } } .bg-img--6 { overflow: hidden !important; } .bg-img--6:after { top: 2em; background-position: top right; background-size: contain; } @media (min-width: 48em) { .bg-img--6:after { background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--6__tablet.svg"); background-position: top right; background-size: cover; } } @media (min-width: 75em) { .bg-img--6:after { background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--6__desktop.svg"); background-position: top right; background-size: contain; } } @media (min-width: 112.5em) { .bg-img--6:after { background-size: cover; } } .bg-img--7:after { top: 2em; background-position: top right; } @media (min-width: 48em) { .bg-img--7:after { background-size: cover; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--7__tablet.svg"); } } @media (min-width: 48em) { .bg-img--7:after { top: 4em; background-size: contain; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--7__desktop.svg"); } } .bg-img--8:after { top: 2em; background-position: top right; } @media (min-width: 48em) { .bg-img--8:after { background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--8__tablet.svg"); } } @media (min-width: 75em) { .bg-img--8:after { top: 4em; background-size: cover; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--8__desktop.svg"); } } .bg-img--9:after { top: 3em; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--6.svg"); background-position: top right; } @media (min-width: 48em) { .bg-img--9:after { background-size: contain; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--9__tablet.svg"); } } @media (min-width: 75em) { .bg-img--9:after { background-size: cover; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--9__desktop.svg"); } } .bg-img--10:after { top: 3em; background-position: top right; } @media (min-width: 48em) { .bg-img--10:after { background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--10__tablet.svg"); } } @media (min-width: 75em) { .bg-img--10:after { background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--10__desktop.svg"); } } .bg-img--11:after { top: 6em; background-position: top right; } @media (min-width: 48em) { .bg-img--11:after { top: 3em; background-size: inherit; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--11__tablet.svg"); } } @media (min-width: 75em) { .bg-img--11:after { background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--11__desktop.svg"); } } .bg-img--12:after { background-position: top right; } @media (min-width: 48em) { .bg-img--12:after { top: 3em; background-size: inherit; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--12__tablet.svg"); } } @media (min-width: 48em) { .bg-img--12:after { top: 2em; background-size: contain; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--12__desktop.svg"); } } .bg-img--13:after { background-position: top right; } @media (min-width: 48em) { .bg-img--13:after { background-position: top left; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--13__tablet.svg"); } } @media (min-width: 75em) { .bg-img--13:after { background-position: top left; background-image: url("/_resources/themes/mysite/dist/images/svg-single/bg-img--13__desktop.svg"); } } .info-popup { position: absolute; background: #E7EEF6; background: var(--color-bluelight); border-radius: 6px; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 1rem; max-width: 300px; z-index: 9999; } .info-popup:after { content: ""; position: absolute; top: -8px; /* über der Box */ left: 50%; left: var(--arrow-position, 50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #E7EEF6; border-bottom: 8px solid var(--color-bluelight); } .info-popup.above:after { top: auto; /* top löschen */ bottom: -8px; /* Pfeil unten positionieren */ border-bottom: none; /* unten keinen Pfeil mehr */ border-top: 8px solid #E7EEF6; border-top: 8px solid var(--color-bluelight); /* oben den neuen Pfeil */ -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); /* Schatten nach unten */ } .info-popup__content { font-size: 0.9rem; color: #333; } .info-trigger { cursor: pointer; } .el__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .el__title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .el__label { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 0.5em; } .el-images { padding-top: 2em; padding-bottom: 2em; } .el-images .img-figure__caption { padding-top: 1em; } .el-images .img-figure--h img { max-height: 400px; width: auto; margin: 0 auto; } @media (min-width: 48em) { .el-images .img-figure--h img { max-height: 500px; } } @media (min-width: 75em) { .el-images .img-figure--h img { max-height: 600px; } } .el-images .el-images__slider { padding-bottom: 1em; } .el-images .slick-nav { top: inherit; bottom: 1em; border: 1px solid #001937; border: 1px solid var(--color-blacklogo); border-radius: 50%; padding: 0.85em; height: 30px; width: 30px; z-index: 10; } .el-images .slick-prev { left: inherit; right: 43px; } .el-images .slick-next { right: 0; } .el-video .row__inner--full { max-width: 960px; margin: 0 auto; } .el-video .ratio--16-9 { position: relative; padding-bottom: 56.25%; } .ratio--16-9--reset .el-video .ratio--16-9 { padding-bottom: 0 !important; } .el-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .el-teaser { padding: 4rem 0; height: 459px; } @media (min-width: 75em) { .el-teaser { height: 561px; } } .el-teaser__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 100%; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .el-teaser__title { padding-bottom: 0.55em; } @media (min-width: 48em) { .el-teaser__col { width: 40%; } } @media (min-width: 75em) { .el-teaser__col { width: 40%; } } .el-slider { overflow: hidden; } .el-slider .row__inner { overflow: visible; position: relative; display: block; } .el-slider .el-slider__wrapper-outer { margin-right: calc(-1 * (100vw - 100%) / 2); overflow: visible; } .el-slider .el-slider__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 4rem; position: relative; } @media (min-width: 48em) { .el-slider .el-slider__wrapper { padding-top: 2rem; } } .el-slider .el-slider__entry { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100% - 3rem) / 4.5); flex: 0 0 calc((100% - 3rem) / 4.5); height: 100%; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .el-slider .slick-slide { margin-right: 1rem; min-width: 13em; height: auto; } .el-slider .slick-slide > div { height: 100%; } .el-slider .slick-track { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .el-slider .slick-prev { left: 0; top: 2rem; } @media (min-width: 48em) { .el-slider .slick-prev { left: inherit; right: 14vw; -webkit-transform: translate(0, -200%); transform: translate(0, -200%); } } @media (min-width: 75em) { .el-slider .slick-prev { right: 12vw; } } .el-slider .slick-next { right: inherit; left: 3rem; top: 2rem; } @media (min-width: 48em) { .el-slider .slick-next { left: inherit; right: 8vw; -webkit-transform: translate(0, -200%); transform: translate(0, -200%); } } .el-slider .slick-nav { border-radius: 50%; border-width: 1px; border-style: solid; padding: 0.25rem; width: 2rem; height: 2rem; } .el-slider--cart__entry { border-radius: 0.5rem; overflow: hidden; background: #fff; background: var(--color-white); } .el-slider--cart__header { background: #EC6726; background: var(--color-orange); text-align: center; padding: 0.35em 0; } .el-slider--cart__content { padding: 1em; height: 100%; } .el-slider--cart__title { padding-top: 0.25em; } .el-slider--cart__price { padding: 1em 0; } .el-slider--cart__price__text { color: #A1A5A7; color: var(--color-grey); } .el-slider--cart__features { padding-top: 2em; } .el-slider--cart__features-list { padding: 1em 0; } .el-slider--cart__features-list li { padding-bottom: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .el-slider--cart__features-list .svg-item { margin-right: 1em; } .el-slider--cart__cta { text-transform: uppercase; } .el-slider--cart__cta:hover, .el-slider--cart__cta:focus { text-decoration: underline; } .el-slider--quote .slick-slide { width: 100%; } @media (min-width: 75em) { .el-slider--quote .slick-slide div { height: 100%; } .el-slider--quote .slick-slide .el-slider--quote__entry { height: 100%; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (min-width: 75em) { .el-slider--quote .slick-slide { aspect-ratio: inherit; } } .el-slider--quote__count--1 { width: 100%; margin-right: 0; } .el-slider--quote__count--1 .el-slider--quote__wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .el-slider--quote__count--1 .el-slider--quote__wrapper .slick-track { max-width: 90%; } @media (min-width: 48em) { .el-slider--quote__count--1 .el-slider--quote__wrapper .slick-track { min-width: 35em; } } .el-slider--quote__count--1 .el-slider--quote__wrapper .slick-track .slick-slide { width: 100% !important; } .el-slider--quote .el__title { padding-bottom: 0.5em; } @media (min-width: 48em) { .el-slider--quote .el__title { padding-bottom: 2em; } } .el-slider--quote__entry { background: #fff; background: var(--color-white); border-radius: 0.5rem; } .el-slider--quote__inner { padding: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: justify; align-content: space-between; } .el-slider--quote__text { padding-top: 0.5em; } .el-slider--quote__figc { padding-top: 3em; } .el-slider--quote__figc__inner { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .el-slider--quote__avatar { width: 5em; height: auto; border-radius: 50%; } .el-slider--quote__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-left: 1.5em; } /* slick farben */ .slick-nav { border-color: #001937; border-color: var(--color-blacklogo); } .slick-nav:hover, .slick-nav:focus { border-color: #001937; border-color: var(--color-blacklogo); background: #001937; background: var(--color-blacklogo); } .slick-nav.slick-disabled { border: 1px solid #A1A5A7; border: 1px solid var(--color-grey); } .slick-nav.slick-disabled:hover, .slick-nav.slick-disabled:focus { pointer-events: none; /* verhindert Interaktion */ background: none; } .slick-nav.slick-disabled:hover .svg-item, .slick-nav.slick-disabled:focus .svg-item { fill: #A1A5A7; fill: var(--color-grey); } .slick-nav.slick-disabled .svg-item { fill: #A1A5A7; fill: var(--color-grey); } .bg-img--6 .slick-nav.slick-disabled { border: 1px solid #fff; border: 1px solid var(--color-white); } .bg-img--6 .slick-nav.slick-disabled:hover, .bg-img--6 .slick-nav.slick-disabled:focus { border: 1px solid #fff; border: 1px solid var(--color-white); background: none; } .bg-img--6 .slick-nav.slick-disabled .svg-item { fill: #fff; fill: var(--color-white); } .el-textimg__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 48em) { .el-textimg__wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media (min-width: 48em) { .el-textimg__col { width: 48%; } } .el-textimg__col--text { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media (min-width: 48em) { .el-textimg__col--text { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .el-textimg__col--text__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .el-textimg__col--img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding-bottom: 2rem; } @media (min-width: 48em) { .el-textimg__col--img { padding-bottom: 0; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .el-textimg__col--img img { max-width: 35em; max-height: 35em; height: auto; } @media (min-width: 48em) { .el-textimg--rev .el-textimg__col--text { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .el-textimg--rev .el-textimg__col--img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .el-textimg__content { padding: 2em 0; } .el-textimg--boxed .el-textimg__wrapper { -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; } @media (min-width: 48em) { .el-textimg--boxed .el-textimg__col { width: 50%; } } .el-textimg--boxed .el-textimg__col--img { padding-bottom: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .el-textimg--boxed .el-textimg__col--img img { border-radius: 0.5rem 0.5rem 0 0; max-width: inherit; max-height: inherit; } @media (min-width: 48em) { .el-textimg--boxed .el-textimg__col--img img { border-radius: 0.5rem 0 0 0.5rem; } } .el-textimg--boxed .el-textimg__col--text { border-radius: 0 0 0.5rem 0.5rem; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media (min-width: 48em) { .el-textimg--boxed .el-textimg__col--text { border-radius: 0 0.5rem 0.5rem 0; } } .el-textimg--boxed .el-textimg__col--text__inner { padding: 2rem; } @media (min-width: 48em) { .el-textimg--boxed .el-textimg__col--text__inner { padding: 0 2rem 0 4rem; } } .el-textimg--boxed .el-textimg__cta { padding-top: 2em; } .el-logos__list { display: grid; grid-gap: 1rem; gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 48em) { .el-logos__list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 75em) { .el-logos__list { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 112.5em) { .el-logos__list { grid-template-columns: repeat(9, 1fr); } } .el-logos__wrapper { padding: 2em 0; } .el-logos img { display: block; width: 100%; height: auto; } .el-textcol__wrapper { padding-top: 2rem; } @media (min-width: 75em) { .el-textcol__wrapper { display: grid; grid-gap: 2em 15em; grid-template-columns: repeat(2, 1fr); } } .el-textcol__entry { padding-bottom: 3em; } .el-textcol__entry__title { padding-bottom: 1em; } .el-acc--v .el__header { padding-bottom: 2rem; } .el-acc--v .js-accordion__panel { background: #fff; background: var(--color-white); border-radius: 0.5rem; position: relative; padding: 2rem; margin-bottom: 2rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .el-acc--v .js-accordion__panel__icon { fill: #135AA1; fill: var(--color-blue); display: block; } .el-acc--v .js-accordion__panel .accordion__trigger { width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .el-acc--v .js-accordion__panel .svg-item { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .el-acc--v .js-accordion__panel.open { background: #001937; background: var(--color-blacklogo); color: #fff; color: var(--color-white); width: auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .el-acc--v .js-accordion__panel.open .accordion__trigger__title { color: #fff; color: var(--color-white); } .el-acc--v .js-accordion__panel.open .svg-item { stroke: #fff; stroke: var(--color-white); border: 1px solid #fff; border: 1px solid var(--color-white); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .el-acc--v .js-accordion__panel .accordion__content { padding: 1rem 0; } .el-acc--h .el-acc__title { padding-bottom: 3rem; } .el-acc--h__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 75em) { .el-acc--h__wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .el-acc--h .js-accordion__panel { background: #fff; background: var(--color-white); border-radius: 0.5rem; position: relative; padding-bottom: 5rem; margin-bottom: 2rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 75em) { .el-acc--h .js-accordion__panel { margin-bottom: 0; margin-right: 2rem; width: 17rem; } .el-acc--h .js-accordion__panel:last-of-type { margin-right: 0; } } .el-acc--h .js-accordion__panel__icon { width: 3.5rem; fill: #135AA1; fill: var(--color-blue); display: block; } .el-acc--h .js-accordion__panel.open { background: #001937; background: var(--color-blacklogo); color: #fff; color: var(--color-white); width: auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .el-acc--h .js-accordion__panel.open .accordion__trigger__title { color: #fff; color: var(--color-white); } .el-acc--h .js-accordion__panel.open .svg-item { fill: #fff; fill: var(--color-white); } .el-acc--h .js-accordion__panel.open .icon--more { stroke: #fff; stroke: var(--color-white); border-color: #fff; border-color: var(--color-white); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .el-acc--h .js-accordion__panel.open .accordion__content { display: block !important; } .el-acc--h .accordion__trigger { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .el-acc--h .accordion__trigger__title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 0.35em; -ms-hyphens: auto; hyphens: auto; } .el-acc--h .accordion__trigger .svg-item { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .el-acc--h .accordion__content { padding: 1rem; } .el-acc--h .accordion__content__cta { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1em; text-transform: uppercase; } .el-acc--h .icon--more { position: absolute; bottom: 1em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .el-acc .accordion__trigger__title { -ms-hyphens: auto; hyphens: auto; } .el-team { padding: 2rem 0; } .el-team__title { padding-bottom: 1rem; } .el-team__entry { margin-bottom: 1.5rem; } .el-team .picture { border-radius: 0.5rem; overflow: hidden; display: block; margin-bottom: 1rem; } .el-team img { display: block; width: 100%; height: auto; } .el-blog-holder__cats { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .el-blog-holder__cats .btn { margin-right: 1em; margin-bottom: 1em; } @media (min-width: 75em) { .el-sform__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .el-sform__wrapper .el-sform__col:first-of-type { width: 65%; } .el-sform__wrapper .el-sform__col:last-of-type { width: 32%; } } .el-sform__col--config { background: #fff; background: var(--color-white); border-radius: 0.5rem; padding: 2rem 1rem; } .el-sform__fieldset { margin-bottom: 4rem; border: none; padding: 0; } .el-sform__fieldset .config-group__legend { margin-bottom: 1rem; } .el-sform__fieldset .config-group__legend .el-sform__step { display: block; margin-bottom: 0.25rem; } .el-sform__fieldset .config-group__legend .el-sform__title { display: block; } .el-sform .toggle-segmented { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border: 1px solid #001937; border: 1px solid var(--color-blacklogo); border-radius: 40px; overflow: hidden; } .el-sform .toggle-segmented input[type=radio] { display: none; } .el-sform .toggle-segmented label { padding: 0.7rem 1.5rem; cursor: pointer; background: #fff; background: var(--color-white); color: #001937; color: var(--color-blacklogo); -webkit-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 40px; /* &:first-of-type { border-radius: 999px 0 0 999px; } &:last-of-type { border-radius: 0 999px 999px 0; } */ } .el-sform .toggle-segmented label:last-of-type { border-right: none; } .el-sform .toggle-segmented input[type=radio]:checked + label { background: #135AA1; background: var(--color-blue); color: #fff; color: var(--color-white); } .el-sform .config-options { margin: 1rem 0; } @media (min-width: 48em) { .el-sform .config-options .grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; } } @media (min-width: 48em) { .el-sform .config-options .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; } } .el-sform .config-option { display: inline-block; width: 100%; margin: 0.5rem 0; vertical-align: top; cursor: pointer; } .el-sform .config-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .el-sform .config-option .config-option__card { aspect-ratio: 31/16; border: 1px solid #A1A5A7; border: 1px solid var(--color-grey); border-radius: 16px; padding: 1rem; background: #fff; background: var(--color-white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.2s; transition: border-color 0.3s, -webkit-box-shadow 0.2s; transition: border-color 0.3s, box-shadow 0.2s; transition: border-color 0.3s, box-shadow 0.2s, -webkit-box-shadow 0.2s; position: relative; } .el-sform .config-option .config-option__card .config-option__title { color: #001937; color: var(--color-blacklogo); padding-bottom: 0.5rem; } .el-sform .config-option .config-option__card .config-option__desc { color: #001937; color: var(--color-blacklogo); } .el-sform .config-option .config-option__card .config-option__price { margin-top: auto; } .el-sform .config-option .config-option__card .info-trigger { width: 1.5rem; position: absolute; right: 1rem; top: 1rem; } .el-sform .config-option .config-option__card .info-trigger svg { display: block; } .el-sform .config-option input[type=radio]:checked + .config-option__card { border-color: #135AA1; border-color: var(--color-blue); border-width: 2px; -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); } .el-sform .el-sform__range-selector { padding-top: 3rem; } .el-sform .el-sform__range-selector .noUi-pips.noUi-pips-horizontal { -webkit-transform: translate(0, -150%); transform: translate(0, -150%); height: 2rem; padding: 0; } .el-sform .el-sform__range-selector .noUi-marker-large, .el-sform .el-sform__range-selector .noUi-marker-normal { display: none; } .el-sform .el-sform__range-selector .noUi-value-large { color: #135AA1; color: var(--color-blue); height: 14px; } .el-sform .el-sform__range-selector .noUi-value-large.first { -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } .el-sform .el-sform__range-selector .noUi-value-large.last { -webkit-transform: translate(-100%, 50%); transform: translate(-100%, 50%); } .el-sform .el-sform__range-selector #bandwidth-slider { height: 12px; border: 4px solid #fff; border: 4px solid var(--color-white); border-radius: 0; background: #A1A5A7; background: var(--color-grey); } .el-sform .el-sform__range-selector .noUi-connect { background: #135AA1; background: var(--color-blue); } .el-sform .el-sform__range-selector .noUi-handle.noUi-handle-lower { width: 20px; height: 20px; border-radius: 50%; border-color: #135AA1; border-color: var(--color-blue); } .el-sform .el-sform__range-selector .noUi-handle.noUi-handle-lower:after, .el-sform .el-sform__range-selector .noUi-handle.noUi-handle-lower:before { display: none; } .el-sform .el-sform__range-selector .noUi-target { -webkit-box-shadow: none; box-shadow: none; } .el-sform .el-sform__range-selector .el-sform__bandwidth-output { padding-top: 1rem; } .el-sform .el-sform__range-price { margin-top: 1rem; color: #A1A5A7; color: var(--color-grey); } .el-sform .noUi-horizontal .noUi-handle { right: -9px; top: -8px; } .server-summary { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; background: var(--color-white); border-radius: 0.5rem; padding: 2rem 1rem; overflow: hidden; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } @media (min-width: 75em) { .server-summary { position: static; max-height: inherit; border-radius: 0.5rem; } } .server-summary__inner { padding: 1rem; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 75em) { .server-summary__inner { padding: 0; } } .server-summary__toggle { position: absolute; top: 0.5rem; right: 1rem; width: 2rem; height: 2rem; background: none; border: none; cursor: pointer; } @media (min-width: 75em) { .server-summary__toggle { display: none; } } .server-summary__toggle svg { display: block; width: 100%; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .server-summary__content { display: none; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; } @media (min-width: 75em) { .server-summary__content { display: block; opacity: 1; visibility: visible; overflow-y: auto; margin-top: 1rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } } .server-summary__footer { padding-top: 1rem; } .server-summary__action { padding-top: 1rem; } .server-summary.is-open { max-height: 80vh; } .server-summary.is-open .server-summary__toggle svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .server-summary.is-open .server-summary__content { display: block; opacity: 1; visibility: visible; overflow-y: auto; margin-top: 1rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .server-summary__subheading { padding-top: 1rem; } .server-summary__list { padding: 0.5rem 0; } .server-summary__list .server-summary__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 0.5em; } .server-summary__list .server-summary__label { padding-right: 2rem; } .el-blog--teaser__bg { padding: 4rem 0; height: 459px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 75em) { .el-blog--teaser__bg { height: 561px; } } .el-blog--teaser__inner { padding-top: 4rem; padding-bottom: 4rem; } .el-blog--teaser__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: left; -ms-flex-align: left; align-items: left; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: left; } @media (min-width: 48em) { .el-blog--teaser__info { text-align: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .el-blog--teaser__title { padding-top: 1em; padding-bottom: 1em; } @media (min-width: 48em) { .el-blog--teaser__title { width: 65%; } } .el-blog--teaser__label { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media (min-width: 48em) { .el-blog--teaser__label { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .el-blog--teaser .btn { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 2em; } @media (min-width: 48em) { .el-blog--teaser .btn { margin-bottom: 0; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media (min-width: 48em) { .el-blog--teaser__content { width: 65%; } } .el-blog--content { padding-top: 2em; padding-bottom: 2em; } .p--co { background: #E7EEF6; background: var(--color-bluelight); padding-bottom: 12rem; min-height: 100vh; /*radios*/ } .p--co__header { padding: 1rem 0; } .p--co__logo { display: block; width: 45%; max-width: 176px; } .p--co__logo .svg-item { display: block; } .p--co__btn-cancel { width: 45%; padding: 0.5rem 0.35rem; text-align: center; max-width: 120px; } .p--co__nav { display: none; } .p--co__header__row:first-of-type { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 48em) { .p--co__header__row .p--co__nav { display: block; margin: 3rem 0; } .p--co__header__row .p--co__nav .p--co__steps { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: #135AA1; color: var(--color-blue); } .p--co__header__row .p--co__nav .p--co__step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 0.5rem; gap: 0.5rem; color: #135AA1; color: var(--color-blue); position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-right: 1rem; } .p--co__header__row .p--co__nav .p--co__step:last-of-type { -webkit-box-flex: inherit; -ms-flex-positive: inherit; flex-grow: inherit; margin-right: 0; } .p--co__header__row .p--co__nav .p--co__step::before { content: ""; height: 100%; width: 60%; position: absolute; left: 0; top: 0; z-index: 2; background-color: #E7EEF6; background-color: var(--color-bluelight); } .p--co__header__row .p--co__nav .p--co__step::after { content: ""; height: 1px; width: 100%; position: absolute; left: 0; z-index: 1; background-color: #135AA1; background-color: var(--color-blue); } .p--co__header__row .p--co__nav .p--co__step span { position: relative; z-index: 3; } .p--co__header__row .p--co__nav .p--co__step span.p--co__step-data { background: #E7EEF6; background: var(--color-bluelight); padding-right: 0.25rem; } .p--co__header__row .p--co__nav .p--co__step:last-child::after { display: none; } .p--co__header__row .p--co__nav .p--co__step-number { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid #135AA1; border: 1px solid var(--color-blue); border-radius: 50%; margin-right: 1rem; } .p--co__header__row .p--co__nav .p--co__step.is-active .p--co__step-number { background-color: #001937; background-color: var(--color-blacklogo); color: #fff; } } @media (min-width: 75em) { .p--co__header__row .p--co__nav .p--co__step:before { width: 40%; } } @media (min-width: 75em) { .p--co__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .p--co__grid__col:first-of-type { width: 65%; } .p--co__grid__col:last-of-type { width: 32%; } } .p--co__form-section { padding: 1rem; border-radius: 0.5rem; background: #fff; background: var(--color-white); } .p--co__form { padding: 1rem 0; } .p--co__form__submit { padding: 0.75rem 1rem; } .p--co__form-toggle { padding: 1rem 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 48em) { .p--co__form-toggle { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; gap: 2rem; } } .p--co__form-toggle label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 1rem; gap: 1rem; padding: 0.5rem 1rem; margin-bottom: 1rem; border: 2px solid #A1A5A7; border: 2px solid var(--color-grey); border-radius: 0.5rem; cursor: pointer; -webkit-transition: border-color 0.3s, background-color 0.3s; transition: border-color 0.3s, background-color 0.3s; position: relative; } .p--co__form-grid { margin-top: 1rem; } @media (min-width: 48em) { .p--co__form-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; gap: 2rem; } } .p--co__form__info { margin: 2rem 0; } .p--co input[type=radio] { display: none; } .p--co input[type=radio]:checked + label { border-color: #002b5b; border-color: var(--color-primary, #002b5b); } .p--co input[type=radio]:checked + label::before { background: #002b5b; background: var(--color-primary, #002b5b); -webkit-box-shadow: inset 0 0 0 4px #fff; box-shadow: inset 0 0 0 4px #fff; border-color: #002b5b; border-color: var(--color-primary, #002b5b); } .p--co label { display: block; margin-bottom: 0.5rem; } .p--co label.field-radio { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 1rem; grid-gap: 1rem; gap: 1rem; padding: 0.5rem 1rem; margin-bottom: 1rem; border-radius: 0.5rem; cursor: pointer; -webkit-transition: border-color 0.3s, background-color 0.3s; transition: border-color 0.3s, background-color 0.3s; position: relative; } .p--co label.field-radio:before { content: ""; display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid #ccc; border-radius: 50%; background: #fff; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: background 0.3s, border-color 0.3s; transition: background 0.3s, border-color 0.3s; } .p--co .form-group { margin-bottom: 1rem; } .p--co .form-group input, .p--co .form-group select { border: 2px solid #A1A5A7; border: 2px solid var(--color-grey); border-radius: 0.5rem; width: 100%; padding: 0.5rem 1rem; } .p--co .form-group input:focus, .p--co .form-group select:focus { border-color: #002b5b; border-color: var(--color-primary, #002b5b); outline: none; } .p--co .form-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='30,50 70,90 110,50' fill='none' stroke='%23000' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; cursor: pointer; } .p--co .form-group select:focus { border-color: #002b5b; border-color: var(--color-primary, #002b5b); outline: none; } .p--co__payment { background: #fff; background: var(--color-white); border-radius: 0.5rem; padding: 1rem; } .p--co__payment__title { margin-bottom: 1rem; } .p--co__payment-form { margin-top: 1rem; } .p--co__payment .payment-option { border: 1px solid #A1A5A7; border: 1px solid var(--color-grey); border-radius: 0.5rem; padding: 0.5rem 1rem; margin-bottom: 1rem; } .p--co__payment label.field-radio { position: relative; } .p--co__payment .payment-option__label__icons { position: absolute; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p--co__payment .payment-option__label__icons img { margin-right: 0.5rem; } .p--co__payment .payment-option__label__icons img:last-of-type { margin-right: 0; } @media (min-width: 48em) { .p--co__payment .form-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; gap: 2rem; } } /* .ei11 { } */ /*# sourceMappingURL=screen.css.map */