@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: AdelleSansHEBRegular, sans-serif; font-size: min(max(2rem, 1.875vw), 3rem); font-size: clamp(2rem, 1.875vw, 3rem); } @media (min-width: 125em) { .default { line-height: 1.35; } } .noclamp .default { font-size: 32px; } @media (min-width: 125em) { .noclamp .default { font-size: 48px; } } .t-h1 { line-height: 0.86; font-family: AdelleThin, sans-serif; font-size: min(max(4rem, 3.90625vw), 6.25rem); font-size: clamp(4rem, 3.90625vw, 6.25rem); } @media (min-width: 125em) { .t-h1 { line-height: 0.85; } } .noclamp .t-h1 { font-size: 64px; } @media (min-width: 125em) { .noclamp .t-h1 { font-size: 100px; } } .t-h2 { line-height: 1.15; font-family: AdelleThin, sans-serif; font-size: min(max(2.5rem, 2.734375vw), 4.375rem); font-size: clamp(2.5rem, 2.734375vw, 4.375rem); } @media (min-width: 125em) { .t-h2 { line-height: 1.1; } } .noclamp .t-h2 { font-size: 40px; } @media (min-width: 125em) { .noclamp .t-h2 { font-size: 70px; } } .t-h3 { line-height: 1.19; font-family: AdelleThin, sans-serif; font-size: min(max(2.625rem, 2.5vw), 4rem); font-size: clamp(2.625rem, 2.5vw, 4rem); } @media (min-width: 125em) { .t-h3 { line-height: 1.2; } } .noclamp .t-h3 { font-size: 42px; } @media (min-width: 125em) { .noclamp .t-h3 { font-size: 64px; } } .t-h4, .htmleditor h2, .htmleditor h3 { line-height: 1.27; font-family: AdelleRegular, sans-serif; font-size: min(max(1.375rem, 1.09375vw), 1.75rem); font-size: clamp(1.375rem, 1.09375vw, 1.75rem); } @media (min-width: 125em) { .t-h4, .htmleditor h2, .htmleditor h3 { line-height: 1.21; } } .noclamp .t-h4, .noclamp .htmleditor h2, .htmleditor .noclamp h2, .noclamp .htmleditor h3, .htmleditor .noclamp h3 { font-size: 22px; } @media (min-width: 125em) { .noclamp .t-h4, .noclamp .htmleditor h2, .htmleditor .noclamp h2, .noclamp .htmleditor h3, .htmleditor .noclamp h3 { font-size: 28px; } } .t-h5 { line-height: 1.27; font-family: AdelleSansHEBRegular, sans-serif; font-size: min(max(1.375rem, 1.09375vw), 1.75rem); font-size: clamp(1.375rem, 1.09375vw, 1.75rem); } @media (min-width: 125em) { .t-h5 { line-height: 1.21; } } .noclamp .t-h5 { font-size: 22px; } @media (min-width: 125em) { .noclamp .t-h5 { font-size: 28px; } } .t-p2 { line-height: 1.5; font-family: AdelleSansHEBRegular, sans-serif; font-size: min(max(1rem, 0.78125vw), 1.25rem); font-size: clamp(1rem, 0.78125vw, 1.25rem); } .noclamp .t-p2 { font-size: 16px; } @media (min-width: 125em) { .noclamp .t-p2 { font-size: 20px; } } .t-p3, .menu-overlay #chapter-nav, .btn { line-height: 1.5; font-family: AdelleRegular, sans-serif; font-size: min(max(1rem, 0.78125vw), 1.25rem); font-size: clamp(1rem, 0.78125vw, 1.25rem); } .noclamp .t-p3, .noclamp .menu-overlay #chapter-nav, .menu-overlay .noclamp #chapter-nav, .noclamp .btn { font-size: 16px; } @media (min-width: 125em) { .noclamp .t-p3, .noclamp .menu-overlay #chapter-nav, .menu-overlay .noclamp #chapter-nav, .noclamp .btn { font-size: 20px; } } .t-trk-mono { line-height: 1.5; font-family: ibmplexmono, sans-serif; font-size: min(max(1rem, 0.78125vw), 1.25rem); font-size: clamp(1rem, 0.78125vw, 1.25rem); } .noclamp .t-trk-mono { font-size: 16px; } @media (min-width: 125em) { .noclamp .t-trk-mono { font-size: 20px; } } .t-trk-mono-heb { line-height: 1.5; font-family: Cousine, sans-serif; font-size: min(max(1rem, 0.78125vw), 1.25rem); font-size: clamp(1rem, 0.78125vw, 1.25rem); } .noclamp .t-trk-mono-heb { font-size: 16px; } @media (min-width: 125em) { .noclamp .t-trk-mono-heb { font-size: 20px; } } .t-caption-1 { line-height: 1.43; font-family: AdelleRegular, sans-serif; font-size: min(max(0.875rem, 0.625vw), 1rem); font-size: clamp(0.875rem, 0.625vw, 1rem); } @media (min-width: 125em) { .t-caption-1 { line-height: 1.5; } } .noclamp .t-caption-1 { font-size: 14px; } @media (min-width: 125em) { .noclamp .t-caption-1 { font-size: 16px; } } .t-caption-2 { line-height: 1.33; font-family: AdelleSansHEBRegular, sans-serif; font-size: min(max(0.75rem, 0.546875vw), 0.875rem); font-size: clamp(0.75rem, 0.546875vw, 0.875rem); } @media (min-width: 125em) { .t-caption-2 { line-height: 1.21; } } .noclamp .t-caption-2 { font-size: 12px; } @media (min-width: 125em) { .noclamp .t-caption-2 { font-size: 14px; } } .t-caption-3 { line-height: 1.4; font-family: AdelleRegular, sans-serif; font-size: min(max(0.625rem, 0.46875vw), 0.75rem); font-size: clamp(0.625rem, 0.46875vw, 0.75rem); } @media (min-width: 125em) { .t-caption-3 { line-height: 1.5; } } .noclamp .t-caption-3 { font-size: 10px; } @media (min-width: 125em) { .noclamp .t-caption-3 { font-size: 12px; } } /* * Ab hier sind nur noch Funktionen, Mixins, oder Generation von Klassen * */ @font-face { font-family: "AdelleSansHEBRegular"; font-weight: 600; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/fonts/AdelleSansHEB-Regular-web/AdelleSansHEB-Regular.woff2") format("woff2"); } @font-face { font-family: "AdelleRegular"; font-weight: 600; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/fonts/Adelle_Regular-web/Adelle-Regular.woff2") format("woff2"); } @font-face { font-family: "AdelleThin"; font-weight: 400; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/fonts/Adelle_Thin-web/Adelle-Thin.woff2") format("woff2"); } @font-face { font-family: "ibmplexmono"; font-weight: 400; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/fonts/ibm-plex-mono/ibm-plex-mono-v20-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2") format("woff2"); } @font-face { font-family: "Cousine"; font-weight: 400; font-style: normal; font-display: swap; src: local(""),url("/_resources/themes/mysite/dist/fonts/fonts/Cousine/c488dd1e4590529bbb268e696c94f171.woff2") format("woff2"); } .row__inner { position: relative; margin: 0 auto; max-width: 1140px; padding: 0 15px; } .row__inner--xs { margin: 0 auto; max-width: 606px; } .row__inner--s { margin: 0 auto; max-width: 680px; } .row__inner--full { margin: 0 auto; max-width: 100%; padding: 0; } /* .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: "AdelleSansHEBRegular, sans-serif"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } .bg-multi-annelie-avraham { background: red; } .bg-multi-annelie-avraham-chanan { background: red; } .bg-multi-annelie-avraham-chanan-noomi { background: red; } .bg-multi-annelie-chanan { background: red; } .bg-multi-annelie-chanan-noomi { background: red; } .bg-annelie--inner p.marker-highlight { background-image: -webkit-gradient(linear, left top, right top, from(rgb(237, 237, 154)), to(rgb(237, 237, 154))); background-image: linear-gradient(to right, rgb(237, 237, 154) 0%, rgb(237, 237, 154) 100%); } .bg-avraham--inner p.marker-highlight { background-image: -webkit-gradient(linear, left top, right top, from(rgb(185, 240, 221)), to(rgb(185, 240, 221))); background-image: linear-gradient(to right, rgb(185, 240, 221) 0%, rgb(185, 240, 221) 100%); } .bg-chanan--inner p.marker-highlight { background-image: -webkit-gradient(linear, left top, right top, from(rgb(206, 186, 212)), to(rgb(206, 186, 212))); background-image: linear-gradient(to right, rgb(206, 186, 212) 0%, rgb(206, 186, 212) 100%); } .bg-noomi--inner p.marker-highlight { background-image: -webkit-gradient(linear, left top, right top, from(rgb(250, 160, 130)), to(rgb(250, 160, 130))); background-image: linear-gradient(to right, rgb(250, 160, 130) 0%, rgb(250, 160, 130) 100%); } /* * Ab hier sind nur noch Funktionen, Mixins, oder Generation von Klassen */ :root { --color-black: #000000; --color-white: #ffffff; --color-bg-1: #F7F4E1; --color-bg-2: #C8DEDB; --color-bg-3: #F0FFE3; --color-annelie: #EDED9A; --color-avraham: #B9F0DD; --color-chanan: #CEBAD4; --color-noomi: #FAA082; --color-ecke: #D6D0A9; --color-title-text: #4f4b3b; --color-text-1: #2C2C2C; --color-stroke: #DAD7C7; --color-beige: #FFFDF6; } .c-black { color: #000000; color: var(--color-black); } .bg-black { background-color: #000000; background-color: var(--color-black); } .c-white { color: #ffffff; color: var(--color-white); } .bg-white { background-color: #ffffff; background-color: var(--color-white); } .c-bg-1 { color: #F7F4E1; color: var(--color-bg-1); } .bg-bg-1 { background-color: #F7F4E1; background-color: var(--color-bg-1); } .c-bg-2 { color: #C8DEDB; color: var(--color-bg-2); } .bg-bg-2 { background-color: #C8DEDB; background-color: var(--color-bg-2); } .c-bg-3 { color: #F0FFE3; color: var(--color-bg-3); } .bg-bg-3 { background-color: #F0FFE3; background-color: var(--color-bg-3); } .c-annelie { color: #EDED9A; color: var(--color-annelie); } .bg-annelie { background-color: #EDED9A; background-color: var(--color-annelie); } .c-avraham { color: #B9F0DD; color: var(--color-avraham); } .bg-avraham { background-color: #B9F0DD; background-color: var(--color-avraham); } .c-chanan { color: #CEBAD4; color: var(--color-chanan); } .bg-chanan { background-color: #CEBAD4; background-color: var(--color-chanan); } .c-noomi { color: #FAA082; color: var(--color-noomi); } .bg-noomi { background-color: #FAA082; background-color: var(--color-noomi); } .c-ecke { color: #D6D0A9; color: var(--color-ecke); } .bg-ecke { background-color: #D6D0A9; background-color: var(--color-ecke); } .c-title-text { color: #4f4b3b; color: var(--color-title-text); } .bg-title-text { background-color: #4f4b3b; background-color: var(--color-title-text); } .c-text-1 { color: #2C2C2C; color: var(--color-text-1); } .bg-text-1 { background-color: #2C2C2C; background-color: var(--color-text-1); } .c-stroke { color: #DAD7C7; color: var(--color-stroke); } .bg-stroke { background-color: #DAD7C7; background-color: var(--color-stroke); } .c-beige { color: #FFFDF6; color: var(--color-beige); } .bg-beige { background-color: #FFFDF6; background-color: var(--color-beige); } .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: #ffffff; background: var(--color-white); } .hamburger { z-index: 10; border: 1px solid #828255; border-radius: 50%; width: 50px; height: 50px; background: #ffffff; background: var(--color-white); } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 20px; height: 3px; } .hamburger-box { width: 20px; position: absolute; top: 12px; } .hamburger-inner::before { top: -8px; } .hamburger-inner::after { bottom: -8px; } .hamburger-open .hamburger-inner { background: none; } .hamburger-open .burger-icon:before { opacity: 1; right: 0%; top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); visibility: visible; } .hamburger-open .burger-icon:after { opacity: 1; right: 0%; top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); visibility: visible; } .m-xs { margin: 0.9375rem; margin: min(max(0.3125rem, 0.5859375vw), 0.9375rem); margin: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .m-xs { margin: 0.3125rem; margin: min(max(0.625rem, 0.625rem), 0.3125rem); margin: 0.625rem; } } .m-s { margin: 3.125rem; margin: min(max(1.25rem, 1.953125vw), 3.125rem); margin: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .m-s { margin: 1.25rem; margin: min(max(1.875rem, 1.875rem), 1.25rem); margin: 1.875rem; } } .m-m { margin: 5rem; margin: min(max(2.5rem, 3.125vw), 5rem); margin: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .m-m { margin: 2.5rem; margin: min(max(3.75rem, 3.75rem), 2.5rem); margin: 3.75rem; } } .m-l { margin: 7.5rem; margin: min(max(3.75rem, 4.6875vw), 7.5rem); margin: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .m-l { margin: 3.75rem; margin: min(max(5.625rem, 5.625rem), 3.75rem); margin: 5.625rem; } } .m-xl { margin: 10rem; margin: min(max(5rem, 6.25vw), 10rem); margin: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .m-xl { margin: 5rem; margin: min(max(7.5rem, 7.5rem), 5rem); margin: 7.5rem; } } .mt-xs { margin-top: 0.9375rem; margin-top: min(max(0.3125rem, 0.5859375vw), 0.9375rem); margin-top: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .mt-xs { margin-top: 0.3125rem; margin-top: min(max(0.625rem, 0.625rem), 0.3125rem); margin-top: 0.625rem; } } .mt-s { margin-top: 3.125rem; margin-top: min(max(1.25rem, 1.953125vw), 3.125rem); margin-top: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .mt-s { margin-top: 1.25rem; margin-top: min(max(1.875rem, 1.875rem), 1.25rem); margin-top: 1.875rem; } } .mt-m { margin-top: 5rem; margin-top: min(max(2.5rem, 3.125vw), 5rem); margin-top: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .mt-m { margin-top: 2.5rem; margin-top: min(max(3.75rem, 3.75rem), 2.5rem); margin-top: 3.75rem; } } .mt-l { margin-top: 7.5rem; margin-top: min(max(3.75rem, 4.6875vw), 7.5rem); margin-top: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .mt-l { margin-top: 3.75rem; margin-top: min(max(5.625rem, 5.625rem), 3.75rem); margin-top: 5.625rem; } } .mt-xl { margin-top: 10rem; margin-top: min(max(5rem, 6.25vw), 10rem); margin-top: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .mt-xl { margin-top: 5rem; margin-top: min(max(7.5rem, 7.5rem), 5rem); margin-top: 7.5rem; } } .mr-xs { margin-right: 0.9375rem; margin-right: min(max(0.3125rem, 0.5859375vw), 0.9375rem); margin-right: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .mr-xs { margin-right: 0.3125rem; margin-right: min(max(0.625rem, 0.625rem), 0.3125rem); margin-right: 0.625rem; } } .mr-s { margin-right: 3.125rem; margin-right: min(max(1.25rem, 1.953125vw), 3.125rem); margin-right: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .mr-s { margin-right: 1.25rem; margin-right: min(max(1.875rem, 1.875rem), 1.25rem); margin-right: 1.875rem; } } .mr-m { margin-right: 5rem; margin-right: min(max(2.5rem, 3.125vw), 5rem); margin-right: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .mr-m { margin-right: 2.5rem; margin-right: min(max(3.75rem, 3.75rem), 2.5rem); margin-right: 3.75rem; } } .mr-l { margin-right: 7.5rem; margin-right: min(max(3.75rem, 4.6875vw), 7.5rem); margin-right: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .mr-l { margin-right: 3.75rem; margin-right: min(max(5.625rem, 5.625rem), 3.75rem); margin-right: 5.625rem; } } .mr-xl { margin-right: 10rem; margin-right: min(max(5rem, 6.25vw), 10rem); margin-right: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .mr-xl { margin-right: 5rem; margin-right: min(max(7.5rem, 7.5rem), 5rem); margin-right: 7.5rem; } } .mb-xs { margin-bottom: 0.9375rem; margin-bottom: min(max(0.3125rem, 0.5859375vw), 0.9375rem); margin-bottom: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .mb-xs { margin-bottom: 0.3125rem; margin-bottom: min(max(0.625rem, 0.625rem), 0.3125rem); margin-bottom: 0.625rem; } } .mb-s { margin-bottom: 3.125rem; margin-bottom: min(max(1.25rem, 1.953125vw), 3.125rem); margin-bottom: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .mb-s { margin-bottom: 1.25rem; margin-bottom: min(max(1.875rem, 1.875rem), 1.25rem); margin-bottom: 1.875rem; } } .mb-m { margin-bottom: 5rem; margin-bottom: min(max(2.5rem, 3.125vw), 5rem); margin-bottom: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .mb-m { margin-bottom: 2.5rem; margin-bottom: min(max(3.75rem, 3.75rem), 2.5rem); margin-bottom: 3.75rem; } } .mb-l { margin-bottom: 7.5rem; margin-bottom: min(max(3.75rem, 4.6875vw), 7.5rem); margin-bottom: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .mb-l { margin-bottom: 3.75rem; margin-bottom: min(max(5.625rem, 5.625rem), 3.75rem); margin-bottom: 5.625rem; } } .mb-xl { margin-bottom: 10rem; margin-bottom: min(max(5rem, 6.25vw), 10rem); margin-bottom: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .mb-xl { margin-bottom: 5rem; margin-bottom: min(max(7.5rem, 7.5rem), 5rem); margin-bottom: 7.5rem; } } .ml-xs { margin-left: 0.9375rem; margin-left: min(max(0.3125rem, 0.5859375vw), 0.9375rem); margin-left: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .ml-xs { margin-left: 0.3125rem; margin-left: min(max(0.625rem, 0.625rem), 0.3125rem); margin-left: 0.625rem; } } .ml-s { margin-left: 3.125rem; margin-left: min(max(1.25rem, 1.953125vw), 3.125rem); margin-left: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .ml-s { margin-left: 1.25rem; margin-left: min(max(1.875rem, 1.875rem), 1.25rem); margin-left: 1.875rem; } } .ml-m { margin-left: 5rem; margin-left: min(max(2.5rem, 3.125vw), 5rem); margin-left: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .ml-m { margin-left: 2.5rem; margin-left: min(max(3.75rem, 3.75rem), 2.5rem); margin-left: 3.75rem; } } .ml-l { margin-left: 7.5rem; margin-left: min(max(3.75rem, 4.6875vw), 7.5rem); margin-left: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .ml-l { margin-left: 3.75rem; margin-left: min(max(5.625rem, 5.625rem), 3.75rem); margin-left: 5.625rem; } } .ml-xl { margin-left: 10rem; margin-left: min(max(5rem, 6.25vw), 10rem); margin-left: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .ml-xl { margin-left: 5rem; margin-left: min(max(7.5rem, 7.5rem), 5rem); margin-left: 7.5rem; } } .p-xs { padding: 0.9375rem; padding: min(max(0.3125rem, 0.5859375vw), 0.9375rem); padding: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .p-xs { padding: 0.3125rem; padding: min(max(0.625rem, 0.625rem), 0.3125rem); padding: 0.625rem; } } .p-s { padding: 3.125rem; padding: min(max(1.25rem, 1.953125vw), 3.125rem); padding: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .p-s { padding: 1.25rem; padding: min(max(1.875rem, 1.875rem), 1.25rem); padding: 1.875rem; } } .p-m { padding: 5rem; padding: min(max(2.5rem, 3.125vw), 5rem); padding: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .p-m { padding: 2.5rem; padding: min(max(3.75rem, 3.75rem), 2.5rem); padding: 3.75rem; } } .p-l { padding: 7.5rem; padding: min(max(3.75rem, 4.6875vw), 7.5rem); padding: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .p-l { padding: 3.75rem; padding: min(max(5.625rem, 5.625rem), 3.75rem); padding: 5.625rem; } } .p-xl { padding: 10rem; padding: min(max(5rem, 6.25vw), 10rem); padding: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .p-xl { padding: 5rem; padding: min(max(7.5rem, 7.5rem), 5rem); padding: 7.5rem; } } .pt-xs { padding-top: 0.9375rem; padding-top: min(max(0.3125rem, 0.5859375vw), 0.9375rem); padding-top: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .pt-xs { padding-top: 0.3125rem; padding-top: min(max(0.625rem, 0.625rem), 0.3125rem); padding-top: 0.625rem; } } .pt-s { padding-top: 3.125rem; padding-top: min(max(1.25rem, 1.953125vw), 3.125rem); padding-top: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .pt-s { padding-top: 1.25rem; padding-top: min(max(1.875rem, 1.875rem), 1.25rem); padding-top: 1.875rem; } } .pt-m { padding-top: 5rem; padding-top: min(max(2.5rem, 3.125vw), 5rem); padding-top: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .pt-m { padding-top: 2.5rem; padding-top: min(max(3.75rem, 3.75rem), 2.5rem); padding-top: 3.75rem; } } .pt-l { padding-top: 7.5rem; padding-top: min(max(3.75rem, 4.6875vw), 7.5rem); padding-top: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .pt-l { padding-top: 3.75rem; padding-top: min(max(5.625rem, 5.625rem), 3.75rem); padding-top: 5.625rem; } } .pt-xl { padding-top: 10rem; padding-top: min(max(5rem, 6.25vw), 10rem); padding-top: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .pt-xl { padding-top: 5rem; padding-top: min(max(7.5rem, 7.5rem), 5rem); padding-top: 7.5rem; } } .pr-xs { padding-right: 0.9375rem; padding-right: min(max(0.3125rem, 0.5859375vw), 0.9375rem); padding-right: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .pr-xs { padding-right: 0.3125rem; padding-right: min(max(0.625rem, 0.625rem), 0.3125rem); padding-right: 0.625rem; } } .pr-s { padding-right: 3.125rem; padding-right: min(max(1.25rem, 1.953125vw), 3.125rem); padding-right: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .pr-s { padding-right: 1.25rem; padding-right: min(max(1.875rem, 1.875rem), 1.25rem); padding-right: 1.875rem; } } .pr-m { padding-right: 5rem; padding-right: min(max(2.5rem, 3.125vw), 5rem); padding-right: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .pr-m { padding-right: 2.5rem; padding-right: min(max(3.75rem, 3.75rem), 2.5rem); padding-right: 3.75rem; } } .pr-l { padding-right: 7.5rem; padding-right: min(max(3.75rem, 4.6875vw), 7.5rem); padding-right: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .pr-l { padding-right: 3.75rem; padding-right: min(max(5.625rem, 5.625rem), 3.75rem); padding-right: 5.625rem; } } .pr-xl { padding-right: 10rem; padding-right: min(max(5rem, 6.25vw), 10rem); padding-right: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .pr-xl { padding-right: 5rem; padding-right: min(max(7.5rem, 7.5rem), 5rem); padding-right: 7.5rem; } } .pb-xs { padding-bottom: 0.9375rem; padding-bottom: min(max(0.3125rem, 0.5859375vw), 0.9375rem); padding-bottom: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .pb-xs { padding-bottom: 0.3125rem; padding-bottom: min(max(0.625rem, 0.625rem), 0.3125rem); padding-bottom: 0.625rem; } } .pb-s { padding-bottom: 3.125rem; padding-bottom: min(max(1.25rem, 1.953125vw), 3.125rem); padding-bottom: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .pb-s { padding-bottom: 1.25rem; padding-bottom: min(max(1.875rem, 1.875rem), 1.25rem); padding-bottom: 1.875rem; } } .pb-m { padding-bottom: 5rem; padding-bottom: min(max(2.5rem, 3.125vw), 5rem); padding-bottom: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .pb-m { padding-bottom: 2.5rem; padding-bottom: min(max(3.75rem, 3.75rem), 2.5rem); padding-bottom: 3.75rem; } } .pb-l { padding-bottom: 7.5rem; padding-bottom: min(max(3.75rem, 4.6875vw), 7.5rem); padding-bottom: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .pb-l { padding-bottom: 3.75rem; padding-bottom: min(max(5.625rem, 5.625rem), 3.75rem); padding-bottom: 5.625rem; } } .pb-xl { padding-bottom: 10rem; padding-bottom: min(max(5rem, 6.25vw), 10rem); padding-bottom: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .pb-xl { padding-bottom: 5rem; padding-bottom: min(max(7.5rem, 7.5rem), 5rem); padding-bottom: 7.5rem; } } .pl-xs { padding-left: 0.9375rem; padding-left: min(max(0.3125rem, 0.5859375vw), 0.9375rem); padding-left: clamp(0.3125rem, 0.5859375vw, 0.9375rem); } @media (min-width: md) { .pl-xs { padding-left: 0.3125rem; padding-left: min(max(0.625rem, 0.625rem), 0.3125rem); padding-left: 0.625rem; } } .pl-s { padding-left: 3.125rem; padding-left: min(max(1.25rem, 1.953125vw), 3.125rem); padding-left: clamp(1.25rem, 1.953125vw, 3.125rem); } @media (min-width: md) { .pl-s { padding-left: 1.25rem; padding-left: min(max(1.875rem, 1.875rem), 1.25rem); padding-left: 1.875rem; } } .pl-m { padding-left: 5rem; padding-left: min(max(2.5rem, 3.125vw), 5rem); padding-left: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .pl-m { padding-left: 2.5rem; padding-left: min(max(3.75rem, 3.75rem), 2.5rem); padding-left: 3.75rem; } } .pl-l { padding-left: 7.5rem; padding-left: min(max(3.75rem, 4.6875vw), 7.5rem); padding-left: clamp(3.75rem, 4.6875vw, 7.5rem); } @media (min-width: md) { .pl-l { padding-left: 3.75rem; padding-left: min(max(5.625rem, 5.625rem), 3.75rem); padding-left: 5.625rem; } } .pl-xl { padding-left: 10rem; padding-left: min(max(5rem, 6.25vw), 10rem); padding-left: clamp(5rem, 6.25vw, 10rem); } @media (min-width: md) { .pl-xl { padding-left: 5rem; padding-left: min(max(7.5rem, 7.5rem), 5rem); padding-left: 7.5rem; } } /* 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: AdelleSansHEBRegular, sans-serif; font-size: min(max(2rem, 1.875vw), 3rem); font-size: clamp(2rem, 1.875vw, 3rem); color: #4f4b3b; color: var(--color-title-text); } @media (min-width: 125em) { body { line-height: 1.35; } } .noclamp body { font-size: 32px; } @media (min-width: 125em) { .noclamp body { font-size: 48px; } } .t-h1 { line-height: 0.86; font-family: AdelleThin, sans-serif; font-size: min(max(4rem, 3.90625vw), 6.25rem); font-size: clamp(4rem, 3.90625vw, 6.25rem); } @media (min-width: 125em) { .t-h1 { line-height: 0.85; } } .noclamp .t-h1 { font-size: 64px; } @media (min-width: 125em) { .noclamp .t-h1 { font-size: 100px; } } .htmleditor p + p, .htmleditor p + ul, .htmleditor ul + p { margin-top: 1em; } .htmleditor h3 + p, .htmleditor h2 + p, .htmleditor h3 + ul, .htmleditor h2 + ul, .htmleditor h4 + ul, .htmleditor p + h2, .htmleditor p + h3, .htmleditor p + h4 { margin-top: 1em; } .htmleditor h2, .htmleditor h3 { text-align: center; } .htmleditor a { text-decoration: underline; } .htmleditor a:hover, .htmleditor a:focus { text-decoration: none; } .htmleditor ul { list-style: disc; margin-left: 2em; } .t-c { text-align: center; } .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); } .breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; display: none; padding-top: 6rem; padding-left: 15px; z-index: 99; position: absolute; } @media (min-width: 48em) { .breadcrumb { display: block; position: fixed; left: 15px; top: 2rem; padding: 0; } } .breadcrumb li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .breadcrumb li:after { content: ">"; margin: 0 10px; font-size: 0.5em; } .breadcrumb li:last-of-type:after { content: ""; } @media (min-width: 48em) { .main { padding-top: 0rem; } } .header__fixed { top: 2rem; right: 2rem; position: fixed; z-index: 99; display: -webkit-box; display: -ms-flexbox; display: flex; } .filter-toggle { 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; } .filter-toggle__avatars { display: none; } .filter-toggle__image { width: 25px !important; height: 25px !important; margin-left: 0; } .filter-toggle__image.is-hidden { display: none; } .filter-toggle .filter-toggle__avatars .filter-toggle__image:not(.is-hidden) { margin-left: -10px; } .filter-toggle .filter-toggle__avatars :nth-child(1 of .filter-toggle__image:not(.is-hidden)) { margin-left: 0; } .filter-toggle .filter-toggle__avatars .filter-toggle__image.is-hidden { display: none; } .filter-toggle__close { display: none; } .filter-toggle .icon--person { width: 25px; height: 25px; } .filter-toggle-wrapper { background: #ffffff; background: var(--color-white); z-index: 100; border-radius: 50%; border: 1px solid #828255; width: 50px; height: 50px; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .filter-toggle-wrapper.with-persons { width: -webkit-max-content; width: -moz-max-content; width: max-content; border-radius: 30px; padding-left: 3px; min-width: 50px; } .filter-toggle-wrapper.with-persons .icon--person { display: none; } .filter-toggle-wrapper.with-persons .filter-toggle__avatars { display: -webkit-box; display: -ms-flexbox; display: flex; } .filter-toggle-wrapper.with-persons .filter-toggle__close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 7px 0 5px; } .no-scroll { overflow: hidden; } .menu-overlay { position: fixed; top: 6rem; right: 2rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; border: 2px solid rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.85); z-index: 10; border-radius: 20px; padding: 2rem; text-align: center; display: none; } .menu-overlay.is-open { display: block; } .menu-overlay__header { padding-bottom: 2rem; } .menu-overlay__header div:first-of-type { margin-bottom: 1rem; } .menu-overlay .lang-nav { margin-bottom: 0.75rem; } .menu-overlay .lang-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .menu-overlay .lang-nav li { margin-right: 0.75rem; } .menu-overlay .lang-nav li:last-of-type { margin-right: 0; } .menu-overlay .lang-nav a { display: block; padding: 0.25rem 0.75rem; border: 1px solid #4f4b3b; border: 1px solid var(--color-title-text); } .menu-overlay .lang-nav a:hover, .menu-overlay .lang-nav a:focus, .menu-overlay .lang-nav a.current { background: #4f4b3b; background: var(--color-title-text); color: #ffffff; color: var(--color-white); } .menu-overlay .chapter-dropdown { width: -webkit-max-content; width: -moz-max-content; width: max-content; position: relative; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .menu-overlay .chapter-dropdown .icon--chapter { position: absolute; right: 1rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .menu-overlay #chapter-nav { background-color: #4f4b3b; background-color: var(--color-title-text); color: #ffffff; color: var(--color-white); padding: 0.5rem 3rem 0.5rem 1rem; border: none; border-radius: 6px; cursor: pointer; position: relative; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .menu-overlay .secondary-nav { margin-top: 2rem; } .menu-overlay .third-nav { margin-top: 2rem; } .menu-overlay__footer { margin-top: 2rem; } .menu-overlay__footer img { display: block; margin: 0 auto; max-width: 100px; } .footer { padding-top: 2em; padding-bottom: 2em; } .footer .row__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 15px; padding-right: 15px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 48em) { .footer .row__inner { -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; -ms-flex-line-pack: center; align-content: center; } } .footer__logo { display: block; max-width: 115px; height: auto; margin-bottom: 1em; } @media (min-width: 48em) { .footer__logo { margin-bottom: 0; } } .footer__logo img { display: block; width: 100%; height: auto; } .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; } .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success { background: #0F6148 !important; font-weight: 900; } .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn { background: #4F4F4F !important; font-weight: 900; } .klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a { color: #0F6148 !important; font-weight: 900; } .slick-track { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .slick-slide { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; /* wichtig: selbst auch Flex-Item sein */ height: auto !important; } .slick-slide > div { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; /* streckt sich auf Slide-Höhe */ } .slick-slide .el-bot__entry { height: 100%; } :root { --swal2-background: rgba(255,255,255,.8); --swal2-confirm-button-background-color: var(--color-bg-1); --swal2-confirm-button-color: var(--color-text-1); --swal2-border-radius: 35px; } .my-swal-icon { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .btn { width: auto; } .btn-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; /* nur so breit wie Inhalt */ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; justify-content: center; align-items: center; -ms-flex-line-pack: center; align-content: center; background: #F7F4E1; background: var(--color-bg-1); border-radius: 20px; padding: 0.25em 0.5em; } .btn-icon .svg-item { width: 1em; height: 1em; display: block; -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; } .btn-icon[aria-expanded=true] .svg-item { -webkit-transform: rotate(180deg); transform: rotate(180deg); -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; } .btn-text-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; /* nur so breit wie Inhalt */ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; justify-content: center; align-items: center; -ms-flex-line-pack: center; align-content: center; background: #F7F4E1; background: var(--color-bg-1); border-radius: 20px; padding: 0.25em 0.5em; } .btn-text-icon .svg-item { width: 1em; height: 1em; display: block; margin-left: 0.5em; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .btn-text-icon .btn__text { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .btn-text-icon .btn__icon { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .btn-icon-text .svg-item { margin-right: 0.5em; margin-left: 0; } .btn-icon-text .btn__text { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .btn-icon-text .btn__icon { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .btn--bookmark { width: 50px; height: 50px; border-radius: 50%; z-index: 100; margin-left: 1rem; margin-right: 1rem; background: #ffffff; background: var(--color-white); border-radius: 50%; border: 1px solid #828255; display: -webkit-box; display: -ms-flexbox; display: flex; } .btn--bookmark__count { padding-left: 5px; display: none; } .btn--bookmark.with-count { width: -webkit-max-content; width: -moz-max-content; width: max-content; } .btn--bookmark.with-count .btn--bookmark__count { display: block; } .btn--bookmark .svg-item { width: 18px; height: 18px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; min-width: 18px; min-height: 18px; } .bookBtn:hover, .bookBtn:focus { cursor: pointer; } .bookBtn .hide { display: none; } .icon--person { stroke: #828255; fill: none; } .icon--chapter { fill: #ffffff; fill: var(--color-white); width: 0.75rem; height: 0.75rem; } .icon--timeline { height: 1em; width: 1em; } .icon--more { height: 1em; width: 1em; } .icon--more--left { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .icon--close { width: 15px; height: 15px; } .icon--warning { width: 40px; height: 40px; fill: #2C2C2C; fill: var(--color-text-1); } .btn-cta { width: 25px; height: 25px; padding: 5px; border-radius: 50%; background: #F7F4E1; background: var(--color-bg-1); } @media (min-width: 48em) { .btn-cta { width: 50px; height: 50px; padding: 10px; } } .btn-cta .svg-item { display: block; width: 100%; } .content-wrapper { padding: 15px; } .el-c .content-wrapper { padding: 15px; } @media (min-width: 48em) { .el-c .content-wrapper { padding: 80px; } } .el-images img { display: block; width: 100%; height: auto; } .el-images .img-figure__caption { 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: 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; margin-top: 1em; } .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-acc__entry { border-bottom: 1px solid black; } .el-acc__entry:first-of-type { border-top: 1px solid black; } .el-acc__entry__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 1rem 15px; } .el-acc__entry__btn[aria-expanded=true] { border-bottom: none; } .el-acc__entry__btn[aria-expanded=true] .icon--arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); -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; } .el-acc__entry .svg-item { width: 40px; display: block; fill: black; -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; } .el-acc__entry__section { padding-bottom: 2rem; } .el-home { padding-top: 8rem; } @media (min-width: 48em) { .el-home { padding-top: 6rem; } } .el-home__title { text-align: center; } .el-home .ratio--16-9 { position: relative; padding-bottom: 56.25%; } .ratio--16-9--reset .el-home .ratio--16-9 { padding-bottom: 0 !important; } .el-home iframe, .el-home video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .el-filter__wrapper { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23DAD7C7' stroke-width='13' stroke-dasharray='15' stroke-dashoffset='10' stroke-linecap='butt'/%3e%3c/svg%3e"); border-radius: 36px; overflow: hidden; } .el-filter__header { background: #FFFDF6; background: var(--color-beige); padding: 2em 15px 1.5em 15px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: -1; -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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 48em) { .el-filter__header { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .el-filter__header .svg-item { width: 1em; height: 1em; display: block; margin-bottom: 0.5em; } @media (min-width: 48em) { .el-filter__header .svg-item { margin-right: 0.5em; margin-bottom: 0; } } .el-filter__btns { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 1em; gap: 1em; padding: 1em; } @media (min-width: 48em) { .el-filter__btns { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: inherit; gap: inherit; grid-template-columns: inherit; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 2em 2em; } } .el-filter__btns:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #F7F4E1; background: var(--color-bg-1); z-index: -1; } .el-filter__name { text-align: center; display: block; padding-top: 0.5em; } .el-filter__entry { max-width: 172px; } @media (min-width: 48em) { .el-filter__entry { width: inherit; margin-right: 1em; } } .el-filter__entry:last-of-type { margin-right: 0; } .el-filter__image { display: block; height: auto; border-radius: 50%; aspect-ratio: 1/1; overflow: hidden; width: 80px; margin: 0 auto; } @media (min-width: 48em) { .el-filter__image { width: 100%; margin: 0; } } .el-filter__image img { display: block; width: 100%; height: auto; } .el-filter .bg-annelie--hover:hover .el-filter__image, .el-filter .bg-annelie--hover:hover .el-filter__name span { background: #EDED9A; background: var(--color-annelie); } .el-filter .bg-annelie--hover.is-active .el-filter__image, .el-filter .bg-annelie--hover.is-active .el-filter__name span { background: #EDED9A; background: var(--color-annelie); } .el-filter .bg-annelie--hover:focus:not(.is-active) { outline: 2px solid var(--color- var(--color-annelie)); } .el-filter .bg-annelie--hover:focus:not(.is-active) .el-filter__image, .el-filter .bg-annelie--hover:focus:not(.is-active) .el-filter__name span { background: none !important; } .el-filter .bg-avraham--hover:hover .el-filter__image, .el-filter .bg-avraham--hover:hover .el-filter__name span { background: #B9F0DD; background: var(--color-avraham); } .el-filter .bg-avraham--hover.is-active .el-filter__image, .el-filter .bg-avraham--hover.is-active .el-filter__name span { background: #B9F0DD; background: var(--color-avraham); } .el-filter .bg-avraham--hover:focus:not(.is-active) { outline: 2px solid var(--color- var(--color-avraham)); } .el-filter .bg-avraham--hover:focus:not(.is-active) .el-filter__image, .el-filter .bg-avraham--hover:focus:not(.is-active) .el-filter__name span { background: none !important; } .el-filter .bg-chanan--hover:hover .el-filter__image, .el-filter .bg-chanan--hover:hover .el-filter__name span { background: #CEBAD4; background: var(--color-chanan); } .el-filter .bg-chanan--hover.is-active .el-filter__image, .el-filter .bg-chanan--hover.is-active .el-filter__name span { background: #CEBAD4; background: var(--color-chanan); } .el-filter .bg-chanan--hover:focus:not(.is-active) { outline: 2px solid var(--color- var(--color-chanan)); } .el-filter .bg-chanan--hover:focus:not(.is-active) .el-filter__image, .el-filter .bg-chanan--hover:focus:not(.is-active) .el-filter__name span { background: none !important; } .el-filter .bg-noomi--hover:hover .el-filter__image, .el-filter .bg-noomi--hover:hover .el-filter__name span { background: #FAA082; background: var(--color-noomi); } .el-filter .bg-noomi--hover.is-active .el-filter__image, .el-filter .bg-noomi--hover.is-active .el-filter__name span { background: #FAA082; background: var(--color-noomi); } .el-filter .bg-noomi--hover:focus:not(.is-active) { outline: 2px solid var(--color- var(--color-noomi)); } .el-filter .bg-noomi--hover:focus:not(.is-active) .el-filter__image, .el-filter .bg-noomi--hover:focus:not(.is-active) .el-filter__name span { background: none !important; } .el-filter .close-personen-filter-tastatur { display: none; } /* fixes opo up*/ .filter-popup { position: fixed; z-index: 101; width: -webkit-max-content; width: -moz-max-content; width: max-content; left: 0px; top: 0px; width: 100%; display: none; } .filter-popup .close-personen-filter-tastatur { display: inherit; } .el-page-teaser__wrapper { border-radius: 36px; background: #F7F4E1; background: var(--color-bg-1); padding: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .el-page-teaser__text { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .el-page-teaser__image { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; border-top-left-radius: 32px; border-top-right-radius: 32px; overflow: hidden; position: relative; } .el-page-teaser__image img { display: block; width: 100%; height: auto; } .el-page-teaser__cta { position: absolute; } .el-page-teaser__text { display: -webkit-box; display: -ms-flexbox; display: flex; -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: 48em) { .el-page-teaser__text { display: -webkit-box; display: -ms-flexbox; display: flex; -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; } } .el-page-teaser__col { padding: 0.5em 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 48em) { .el-page-teaser__col { border-bottom-left-radius: 32px; width: 48%; } } .el-page-teaser__col:first-of-type { background: #ffffff; background: var(--color-white); text-align: center; } .el-page-teaser__col:last-of-type { background: #F7F4E1; background: var(--color-bg-1); } .el-page-teaser__text--nocol .el-page-teaser__col { width: 100%; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; background: #ffffff; background: var(--color-white); text-align: center; } .el-page-teaser .btn-cta { position: absolute; bottom: 1em; right: 1em; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .el-page-teaser__wrapper:hover, .el-page-teaser__wrapper:focus { -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06); } .el-page-teaser__wrapper:hover .btn-cta, .el-page-teaser__wrapper:focus .btn-cta { width: 40px; height: 40px; padding: 10px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media (min-width: 48em) { .el-page-teaser__wrapper:hover .btn-cta, .el-page-teaser__wrapper:focus .btn-cta { width: 80px; height: 80px; padding: 20px; } } .el-page-teaser .icon--more { height: auto; } .el-page-teaser .btn-book { position: absolute; top: 2rem; right: 2rem; } .el-page-teaser .hide { display: none; } .el-btn .row__inner { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .el-btn .row__inner .btn { margin-right: 1em; } .el-btn .row__inner .btn:last-of-type { margin-right: 0; } .el-chapter .row__inner--full { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .el-chapter__figure { width: 100%; display: block; height: auto; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .el-chapter__figure img { display: block; width: 100%; height: auto; } .el-chapter__content { position: relative; margin: 0 auto; text-align: center; 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-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media (min-width: 48em) { .el-chapter__content { position: absolute; left: 50%; top: 70%; margin: inherit; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 738px; width: 90%; } } .el-chapter__title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .el-chapter__chapter { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-top: 2em; } .el-timeline__wrapper { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23DAD7C7' stroke-width='13' stroke-dasharray='15' stroke-dashoffset='10' stroke-linecap='butt'/%3e%3c/svg%3e"); border-radius: 36px; overflow: hidden; pointer-events: none; } .el-timeline__header { background: #FFFDF6; background: var(--color-beige); position: relative; z-index: -1; padding: 1em 0; } .el-timeline__header__content { text-align: center; padding: 0 1em; } .el-timeline__entries { position: relative; z-index: -1; 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: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; -webkit-transition: height 0.4s ease; transition: height 0.4s ease; padding-top: 2rem; padding-bottom: 2rem; -webkit-box-sizing: border-box; box-sizing: border-box; } .el-timeline__entries .entries-inner { overflow: hidden; -webkit-transition: height 0.4s ease; transition: height 0.4s ease; height: 300px; /* eingeklappte Höhe */ } .el-timeline__entries .entries-inner:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; /* mehr Höhe für sanften Verlauf */ pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, from(rgba(249, 246, 235, 0)), color-stop(60%, rgba(249, 246, 235, 0.9)), to(rgb(249, 246, 235))); background: linear-gradient(to bottom, rgba(249, 246, 235, 0) 0%, rgba(249, 246, 235, 0.9) 60%, rgb(249, 246, 235) 100%); opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .el-timeline__entries .entries-inner.expanded:after { opacity: 0 !important; } .el-timeline__title { text-align: center; 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-bottom: 0.35em; } .el-timeline__date { background: #ffffff; background: var(--color-white); position: relative; } .el-timeline__date:after { content: ""; position: absolute; display: block; width: 5px; height: 8px; bottom: -8px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #ffffff; background: var(--color-white); } .el-timeline__entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .el-timeline__content { border-radius: 15px; border: 5px solid #ffffff; border: 5px solid var(--color-white); padding: 0.5em; margin-bottom: 50px; position: relative; margin-top: 5px; } .el-timeline__content:after { content: ""; position: absolute; display: block; width: 5px; height: 57px; bottom: -57px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #ffffff; background: var(--color-white); } .el-timeline__entry:last-child .el-timeline__content:after { display: none; } .el-timeline__toggle { position: absolute; z-index: 10; right: 3em; top: 2em; } .el-chapter-title { padding-top: 3.5em; } @media (min-width: 48em) { .el-chapter-title { padding-top: 5em; } } .el-chapter-title .row__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .el-chapter-title__chapter { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; text-align: center; } .el-chapter-title__title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: 0.5em; text-align: center; } .el-chapter-title .bookBtn { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 2em auto; } .el-glossar { padding-top: 6rem; } .el-glossar__letter { text-align: center; } .el-glossar__list { margin-top: 2.5rem; margin-bottom: 4rem; } .el-glossar__dt { margin-bottom: 0.5em; } .el-glossar__dd { margin-bottom: 2em; } .el-qrcode { margin-bottom: 4rem; } .el-qrcode__wrapper { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23DAD7C7' stroke-width='13' stroke-dasharray='15' stroke-dashoffset='10' stroke-linecap='butt'/%3e%3c/svg%3e"); border-radius: 36px; overflow: hidden; } .el-qrcode__header { padding: 2em 1em 1.5em 1em; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 48em) { .el-qrcode__header { padding: 2em 0 1.5em 0; } } .el-qrcode__header:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFFDF6; background: var(--color-beige); z-index: -1; } .el-qrcode__content { padding: 2em 0 1.5em 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -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; } .el-qrcode__content:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #F7F4E1; background: var(--color-bg-1); z-index: -1; } .el-qrcode img { width: 80%; max-width: 450px; display: block; height: auto; margin: 0 auto; } .el-qrcode .btn { margin-top: 1rem; } /* .ei11 { } */ /*# sourceMappingURL=screen.css.map */