@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.28; font-family: hind, sans-serif; font-size: min(max(1.125rem, 1.171875vw), 1.875rem); font-size: clamp(1.125rem, 1.171875vw, 1.875rem); } @media (min-width: 87.5em) { .default { line-height: 1.47; } } .noclamp .default { font-size: 18px; } @media (min-width: 87.5em) { .noclamp .default { font-size: 30px; } } .defaultbold { line-height: 1.28; font-family: hindbold, sans-serif; font-size: min(max(1.125rem, 1.171875vw), 1.875rem); font-size: clamp(1.125rem, 1.171875vw, 1.875rem); } @media (min-width: 87.5em) { .defaultbold { line-height: 1.47; } } .noclamp .defaultbold { font-size: 18px; } @media (min-width: 87.5em) { .noclamp .defaultbold { font-size: 30px; } } .t-xs { line-height: 1.29; font-family: hind, sans-serif; font-size: min(max(0.875rem, 0.625vw), 1rem); font-size: clamp(0.875rem, 0.625vw, 1rem); } @media (min-width: 87.5em) { .t-xs { line-height: 1.38; } } .noclamp .t-xs { font-size: 14px; } @media (min-width: 87.5em) { .noclamp .t-xs { font-size: 16px; } } .t-s { line-height: 1.38; font-family: hind, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); } @media (min-width: 87.5em) { .t-s { line-height: 1.36; } } .noclamp .t-s { font-size: 16px; } @media (min-width: 87.5em) { .noclamp .t-s { font-size: 22px; } } .t-nav { line-height: 1.38; font-family: hind, sans-serif; font-size: min(max(1rem, 0.859375vw), 1.375rem); font-size: clamp(1rem, 0.859375vw, 1.375rem); } @media (min-width: 87.5em) { .t-nav { line-height: 1.27; } } .noclamp .t-nav { font-size: 16px; } @media (min-width: 87.5em) { .noclamp .t-nav { font-size: 22px; } } .t-nav-s { line-height: 1.38; font-family: hind, sans-serif; font-size: min(max(1rem, 0.625vw), 1rem); font-size: clamp(1rem, 0.625vw, 1rem); } .noclamp .t-nav-s { font-size: 16px; } @media (min-width: 87.5em) { .noclamp .t-nav-s { font-size: false; } } .t-footer { line-height: 1.38; font-family: hind, sans-serif; font-size: min(max(1rem, 0.625vw), 1rem); font-size: clamp(1rem, 0.625vw, 1rem); } .noclamp .t-footer { font-size: 16px; } @media (min-width: 87.5em) { .noclamp .t-footer { font-size: false; } } .t-h1 { line-height: 1.13; font-family: eczarbold, sans-serif; font-size: min(max(1.875rem, 2.5390625vw), 4.0625rem); font-size: clamp(1.875rem, 2.5390625vw, 4.0625rem); } @media (min-width: 87.5em) { .t-h1 { line-height: 1.11; } } .noclamp .t-h1 { font-size: 30px; } @media (min-width: 87.5em) { .noclamp .t-h1 { font-size: 65px; } } .t-h2 { line-height: 1.36; font-family: eczarbold, sans-serif; font-size: min(max(1.5625rem, 1.5625vw), 2.5rem); font-size: clamp(1.5625rem, 1.5625vw, 2.5rem); } @media (min-width: 87.5em) { .t-h2 { line-height: 1.15; } } .noclamp .t-h2 { font-size: 25px; } @media (min-width: 87.5em) { .noclamp .t-h2 { font-size: 40px; } } .t-h2--reg { line-height: 1.36; font-family: hind, sans-serif; font-size: min(max(1.5625rem, 1.5625vw), 2.5rem); font-size: clamp(1.5625rem, 1.5625vw, 2.5rem); } @media (min-width: 87.5em) { .t-h2--reg { line-height: 1.15; } } .noclamp .t-h2--reg { font-size: 25px; } @media (min-width: 87.5em) { .noclamp .t-h2--reg { font-size: 40px; } } .t-h3 { line-height: 1.28; font-family: eczarbold, sans-serif; font-size: min(max(1.125rem, 1.25vw), 2rem); font-size: clamp(1.125rem, 1.25vw, 2rem); } @media (min-width: 87.5em) { .t-h3 { line-height: 1.34; } } @media (min-width: 131.25em) { .t-h3 { line-height: 1.25; } } @media (min-width: 87.5em) { .t-h3 { font-size: min(max(2.1875rem, 1.25vw), 2rem); font-size: clamp(2.1875rem, 1.25vw, 2rem); } } .noclamp .t-h3 { font-size: 18px; } @media (min-width: 87.5em) { .noclamp .t-h3 { font-size: 35px; } } @media (min-width: 131.25em) { .noclamp .t-h3 { font-size: 32px; } } .t-h3--reg { line-height: 1.28; font-family: hind, sans-serif; font-size: min(max(1.125rem, 1.25vw), 2rem); font-size: clamp(1.125rem, 1.25vw, 2rem); } @media (min-width: 87.5em) { .t-h3--reg { line-height: 1.34; } } @media (min-width: 131.25em) { .t-h3--reg { line-height: 1.25; } } @media (min-width: 87.5em) { .t-h3--reg { font-size: min(max(2.1875rem, 1.25vw), 2rem); font-size: clamp(2.1875rem, 1.25vw, 2rem); } } .noclamp .t-h3--reg { font-size: 18px; } @media (min-width: 87.5em) { .noclamp .t-h3--reg { font-size: 35px; } } @media (min-width: 131.25em) { .noclamp .t-h3--reg { font-size: 32px; } } /* * Ab hier sind nur noch Funktionen, Mixins, oder Generation von Klassen * */ @font-face { font-family: "hind"; font-style: normal; font-display: swap; src: url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-regular.eot"); /* IE9 Compat Modes */ src: local(""),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-regular.eot") format("embedded-opentype"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-regular.woff2") format("woff2"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-regular.woff") format("woff"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-regular.ttf") format("ttf"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-regular.svg#hind") format("svg"); } @font-face { font-family: "hindbold"; font-style: normal; font-display: swap; src: url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-600.eot"); /* IE9 Compat Modes */ src: local(""),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-600.eot") format("embedded-opentype"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-600.woff2") format("woff2"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-600.woff") format("woff"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-600.ttf") format("ttf"),url("/_resources/themes/mysite/dist/fonts/hind-v9-latin/hind-v9-latin-600.svg#hindbold") format("svg"); } @font-face { font-family: "eczar"; font-style: normal; font-display: swap; src: url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-regular.eot"); /* IE9 Compat Modes */ src: local(""),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-regular.eot") format("embedded-opentype"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-regular.woff2") format("woff2"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-regular.woff") format("woff"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-regular.ttf") format("ttf"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-regular.svg#eczar") format("svg"); } @font-face { font-family: "eczarbold"; font-style: normal; font-display: swap; src: url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-600.eot"); /* IE9 Compat Modes */ src: local(""),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-600.eot") format("embedded-opentype"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-600.woff2") format("woff2"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-600.woff") format("woff"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-600.ttf") format("ttf"),url("/_resources/themes/mysite/dist/fonts/eczar-v7-latin/eczar-v7-latin-600.svg#eczarbold") format("svg"); } .row__inner { position: relative; margin: 0 auto; max-width: 960px; padding: 0 15px; } @media (min-width: 48em) { .row__inner { padding: 0 30px; } } @media (min-width: 87.5em) { .row__inner { padding: 0; } } @media (min-width: 131.25em) { .row__inner { max-width: 1200px; } } .row__inner--header { margin: 0 auto; max-width: 960px; padding: 0 15px; } @media (min-width: 48em) { .row__inner--header { padding: 0 30px; } } @media (min-width: 87.5em) { .row__inner--header { padding: 0; } } @media (min-width: 131.25em) { .row__inner--header { max-width: 1200px; } } .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: "hind, sans-serif"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } /* * Ab hier sind nur noch Funktionen, Mixins, oder Generation von Klassen */ :root { --color-black: #000000; --color-white: #ffffff; --color-red: #c53b33; --color-beige: #d8b585; --color-braun: #7d6b53; --color-gruen: #a8c3b1; --color-grey: #f9f9f9; --color-grey-dark: #333333; --color-gelb: #d8c68c; --color-primary: #a8c3b1; } .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-red { color: #c53b33; color: var(--color-red); } .bg-red { background-color: #c53b33; background-color: var(--color-red); } .c-beige { color: #d8b585; color: var(--color-beige); } .bg-beige { background-color: #d8b585; background-color: var(--color-beige); } .c-braun { color: #7d6b53; color: var(--color-braun); } .bg-braun { background-color: #7d6b53; background-color: var(--color-braun); } .c-gruen { color: #a8c3b1; color: var(--color-gruen); } .bg-gruen { background-color: #a8c3b1; background-color: var(--color-gruen); } .c-grey { color: #f9f9f9; color: var(--color-grey); } .bg-grey { background-color: #f9f9f9; background-color: var(--color-grey); } .c-grey-dark { color: #333333; color: var(--color-grey-dark); } .bg-grey-dark { background-color: #333333; background-color: var(--color-grey-dark); } .c-gelb { color: #d8c68c; color: var(--color-gelb); } .bg-gelb { background-color: #d8c68c; background-color: var(--color-gelb); } .c-primary { color: #a8c3b1; color: var(--color-primary); } .bg-primary { background-color: #a8c3b1; background-color: var(--color-primary); } .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); } @media (min-width: 48em) { .menu-toggle { display: none; } } .m-s { margin: 1.25rem; margin: min(max(0.625rem, 0.78125vw), 1.25rem); margin: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .m-s { margin: 0.625rem; margin: min(max(0.9375rem, 0.9375rem), 0.625rem); margin: 0.9375rem; } } .m-m { margin: 2.5rem; margin: min(max(1.25rem, 1.5625vw), 2.5rem); margin: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .m-m { margin: 1.25rem; margin: min(max(1.875rem, 1.875rem), 1.25rem); margin: 1.875rem; } } .m-l { margin: 5rem; margin: min(max(2.5rem, 3.125vw), 5rem); margin: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .m-l { margin: 2.5rem; margin: min(max(3.75rem, 3.75rem), 2.5rem); margin: 3.75rem; } } .mt-s { margin-top: 1.25rem; margin-top: min(max(0.625rem, 0.78125vw), 1.25rem); margin-top: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .mt-s { margin-top: 0.625rem; margin-top: min(max(0.9375rem, 0.9375rem), 0.625rem); margin-top: 0.9375rem; } } .mt-m { margin-top: 2.5rem; margin-top: min(max(1.25rem, 1.5625vw), 2.5rem); margin-top: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .mt-m { margin-top: 1.25rem; margin-top: min(max(1.875rem, 1.875rem), 1.25rem); margin-top: 1.875rem; } } .mt-l { 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-l { margin-top: 2.5rem; margin-top: min(max(3.75rem, 3.75rem), 2.5rem); margin-top: 3.75rem; } } .mr-s { margin-right: 1.25rem; margin-right: min(max(0.625rem, 0.78125vw), 1.25rem); margin-right: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .mr-s { margin-right: 0.625rem; margin-right: min(max(0.9375rem, 0.9375rem), 0.625rem); margin-right: 0.9375rem; } } .mr-m { margin-right: 2.5rem; margin-right: min(max(1.25rem, 1.5625vw), 2.5rem); margin-right: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .mr-m { margin-right: 1.25rem; margin-right: min(max(1.875rem, 1.875rem), 1.25rem); margin-right: 1.875rem; } } .mr-l { 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-l { margin-right: 2.5rem; margin-right: min(max(3.75rem, 3.75rem), 2.5rem); margin-right: 3.75rem; } } .mb-s { margin-bottom: 1.25rem; margin-bottom: min(max(0.625rem, 0.78125vw), 1.25rem); margin-bottom: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .mb-s { margin-bottom: 0.625rem; margin-bottom: min(max(0.9375rem, 0.9375rem), 0.625rem); margin-bottom: 0.9375rem; } } .mb-m { margin-bottom: 2.5rem; margin-bottom: min(max(1.25rem, 1.5625vw), 2.5rem); margin-bottom: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .mb-m { margin-bottom: 1.25rem; margin-bottom: min(max(1.875rem, 1.875rem), 1.25rem); margin-bottom: 1.875rem; } } .mb-l { 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-l { margin-bottom: 2.5rem; margin-bottom: min(max(3.75rem, 3.75rem), 2.5rem); margin-bottom: 3.75rem; } } .ml-s { margin-left: 1.25rem; margin-left: min(max(0.625rem, 0.78125vw), 1.25rem); margin-left: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .ml-s { margin-left: 0.625rem; margin-left: min(max(0.9375rem, 0.9375rem), 0.625rem); margin-left: 0.9375rem; } } .ml-m { margin-left: 2.5rem; margin-left: min(max(1.25rem, 1.5625vw), 2.5rem); margin-left: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .ml-m { margin-left: 1.25rem; margin-left: min(max(1.875rem, 1.875rem), 1.25rem); margin-left: 1.875rem; } } .ml-l { 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-l { margin-left: 2.5rem; margin-left: min(max(3.75rem, 3.75rem), 2.5rem); margin-left: 3.75rem; } } .p-s { padding: 1.25rem; padding: min(max(0.625rem, 0.78125vw), 1.25rem); padding: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .p-s { padding: 0.625rem; padding: min(max(0.9375rem, 0.9375rem), 0.625rem); padding: 0.9375rem; } } .p-m { padding: 2.5rem; padding: min(max(1.25rem, 1.5625vw), 2.5rem); padding: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .p-m { padding: 1.25rem; padding: min(max(1.875rem, 1.875rem), 1.25rem); padding: 1.875rem; } } .p-l { padding: 5rem; padding: min(max(2.5rem, 3.125vw), 5rem); padding: clamp(2.5rem, 3.125vw, 5rem); } @media (min-width: md) { .p-l { padding: 2.5rem; padding: min(max(3.75rem, 3.75rem), 2.5rem); padding: 3.75rem; } } .pt-s { padding-top: 1.25rem; padding-top: min(max(0.625rem, 0.78125vw), 1.25rem); padding-top: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .pt-s { padding-top: 0.625rem; padding-top: min(max(0.9375rem, 0.9375rem), 0.625rem); padding-top: 0.9375rem; } } .pt-m, .primary__sub__inner { padding-top: 2.5rem; padding-top: min(max(1.25rem, 1.5625vw), 2.5rem); padding-top: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .pt-m, .primary__sub__inner { padding-top: 1.25rem; padding-top: min(max(1.875rem, 1.875rem), 1.25rem); padding-top: 1.875rem; } } .pt-l { 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-l { padding-top: 2.5rem; padding-top: min(max(3.75rem, 3.75rem), 2.5rem); padding-top: 3.75rem; } } .pr-s { padding-right: 1.25rem; padding-right: min(max(0.625rem, 0.78125vw), 1.25rem); padding-right: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .pr-s { padding-right: 0.625rem; padding-right: min(max(0.9375rem, 0.9375rem), 0.625rem); padding-right: 0.9375rem; } } .pr-m, .primary__sub__inner { padding-right: 2.5rem; padding-right: min(max(1.25rem, 1.5625vw), 2.5rem); padding-right: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .pr-m, .primary__sub__inner { padding-right: 1.25rem; padding-right: min(max(1.875rem, 1.875rem), 1.25rem); padding-right: 1.875rem; } } .pr-l { 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-l { padding-right: 2.5rem; padding-right: min(max(3.75rem, 3.75rem), 2.5rem); padding-right: 3.75rem; } } .pb-s { padding-bottom: 1.25rem; padding-bottom: min(max(0.625rem, 0.78125vw), 1.25rem); padding-bottom: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .pb-s { padding-bottom: 0.625rem; padding-bottom: min(max(0.9375rem, 0.9375rem), 0.625rem); padding-bottom: 0.9375rem; } } .pb-m, .primary__sub__inner { padding-bottom: 2.5rem; padding-bottom: min(max(1.25rem, 1.5625vw), 2.5rem); padding-bottom: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .pb-m, .primary__sub__inner { padding-bottom: 1.25rem; padding-bottom: min(max(1.875rem, 1.875rem), 1.25rem); padding-bottom: 1.875rem; } } .pb-l { 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-l { padding-bottom: 2.5rem; padding-bottom: min(max(3.75rem, 3.75rem), 2.5rem); padding-bottom: 3.75rem; } } .pl-s { padding-left: 1.25rem; padding-left: min(max(0.625rem, 0.78125vw), 1.25rem); padding-left: clamp(0.625rem, 0.78125vw, 1.25rem); } @media (min-width: md) { .pl-s { padding-left: 0.625rem; padding-left: min(max(0.9375rem, 0.9375rem), 0.625rem); padding-left: 0.9375rem; } } .pl-m, .primary__sub__inner { padding-left: 2.5rem; padding-left: min(max(1.25rem, 1.5625vw), 2.5rem); padding-left: clamp(1.25rem, 1.5625vw, 2.5rem); } @media (min-width: md) { .pl-m, .primary__sub__inner { padding-left: 1.25rem; padding-left: min(max(1.875rem, 1.875rem), 1.25rem); padding-left: 1.875rem; } } .pl-l { 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-l { padding-left: 2.5rem; padding-left: min(max(3.75rem, 3.75rem), 2.5rem); padding-left: 3.75rem; } } /* 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.28; font-family: hind, sans-serif; font-size: min(max(1.125rem, 1.171875vw), 1.875rem); font-size: clamp(1.125rem, 1.171875vw, 1.875rem); } @media (min-width: 87.5em) { body { line-height: 1.47; } } .noclamp body { font-size: 18px; } @media (min-width: 87.5em) { .noclamp body { font-size: 30px; } } .t-h1 { line-height: 1.13; font-family: eczarbold, sans-serif; font-size: min(max(1.875rem, 2.5390625vw), 4.0625rem); font-size: clamp(1.875rem, 2.5390625vw, 4.0625rem); } @media (min-width: 87.5em) { .t-h1 { line-height: 1.11; } } .noclamp .t-h1 { font-size: 30px; } @media (min-width: 87.5em) { .noclamp .t-h1 { font-size: 65px; } } .t-up { text-transform: uppercase; } .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 { margin-top: 1em; } .htmleditor a { text-decoration: underline; } .htmleditor a:hover, .htmleditor a:focus { text-decoration: none; } .htmleditor ul { list-style: disc; margin-left: 2em; } .htmleditor strong { line-height: 1.28; font-family: hindbold, sans-serif; font-size: min(max(1.125rem, 1.171875vw), 1.875rem); font-size: clamp(1.125rem, 1.171875vw, 1.875rem); } @media (min-width: 87.5em) { .htmleditor strong { line-height: 1.47; } } .noclamp .htmleditor strong { font-size: 18px; } @media (min-width: 87.5em) { .noclamp .htmleditor strong { font-size: 30px; } } .htmleditor h2 { line-height: 1.36; font-family: eczarbold, sans-serif; font-size: min(max(1.5625rem, 1.5625vw), 2.5rem); font-size: clamp(1.5625rem, 1.5625vw, 2.5rem); } @media (min-width: 87.5em) { .htmleditor h2 { line-height: 1.15; } } .noclamp .htmleditor h2 { font-size: 25px; } @media (min-width: 87.5em) { .noclamp .htmleditor h2 { font-size: 40px; } } .htmleditor h3 { line-height: 1.28; font-family: eczarbold, sans-serif; font-size: min(max(1.125rem, 1.25vw), 2rem); font-size: clamp(1.125rem, 1.25vw, 2rem); } @media (min-width: 87.5em) { .htmleditor h3 { line-height: 1.34; } } @media (min-width: 131.25em) { .htmleditor h3 { line-height: 1.25; } } @media (min-width: 87.5em) { .htmleditor h3 { font-size: min(max(2.1875rem, 1.25vw), 2rem); font-size: clamp(2.1875rem, 1.25vw, 2rem); } } .noclamp .htmleditor h3 { font-size: 18px; } @media (min-width: 87.5em) { .noclamp .htmleditor h3 { font-size: 35px; } } @media (min-width: 131.25em) { .noclamp .htmleditor h3 { font-size: 32px; } } .main { padding-top: 75px; } @media (min-width: 48em) { .main { padding-top: 115px; } } :target { scroll-margin-top: 110px; /* Platz oberhalb des Anchors */ } .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); } .social-list { display: -webkit-box; display: -ms-flexbox; display: flex; } .social-list li { margin-right: 1em; } .social-list li:last-of-type { margin-right: 0; } .social-list li a { display: block; width: 40px; height: 40px; } .social-list li a svg, .social-list li a img { display: block; width: 100%; } .social-list li a svg { fill: #333333; fill: var(--color-grey-dark); } .social-list li a:hover svg, .social-list li a:focus svg { fill: #a8c3b1; fill: var(--color-gruen); } #BetterNavigator { display: none; } .header { background: #ffffff; background: var(--color-white); height: 75px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); position: fixed; z-index: 1000; width: 100%; } @media (min-width: 48em) { .header { height: 115px; } } .header__middle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; padding-top: 0.5rem; padding-bottom: 0.5rem; } .header .logo { display: block; width: 150px; } @media (min-width: 48em) { .header .logo { width: 300px; } } .header .logo img { display: block; width: 100%; height: auto; } .header__top { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0.5rem 30px; } @media (min-width: 48em) { .header__top { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 87.5em) { .header__top { padding-left: 0; padding-right: 0; } } .header__top--nav { display: -webkit-box; display: -ms-flexbox; display: flex; } .header__top--nav__list { display: none; } @media (min-width: 48em) { .header__top--nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .header__top--nav__list li { margin-right: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; } .primary { display: none; } @media (min-width: 48em) { .primary { display: -webkit-box; display: -ms-flexbox; display: flex; } } .primary li { margin-right: 2em; } @media (min-width: 131.25em) { .primary li { margin-right: 1em; } } .primary li:last-of-type { margin-right: 0; } .primary a { text-transform: uppercase; display: block; } .primary a:hover, .primary a:focus { text-decoration: none; color: #7d6b53; color: var(--color-braun); } .primary a.current, .primary a.section { color: #7d6b53; color: var(--color-braun); } .primary__sub { display: none; position: absolute; top: 100%; right: 0; white-space: nowrap; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; padding-top: 2em; z-index: 1; } .primary__sub__inner { background: #f9f9f9; background: var(--color-grey); position: relative; } .primary__sub__inner:after { content: ""; position: absolute; top: -10px; right: 10%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f9f9f9; border-bottom: 10px solid var(--color-grey); z-index: 2; } .primary__sub a { padding-bottom: 0.5em; } .primary__sub a:hover, .primary__sub a:focus { color: #7d6b53; color: var(--color-braun); } .primary__sub .primary__subnav__link--h { margin-bottom: 0.75em; display: inline-block; position: relative; } .primary__sub .primary__subnav__link--h:last-of-type { padding-top: 1.25em; } .primary__sub .primary__subnav__link--h:after { content: ""; height: 2px; background: #a8c3b1; background: var(--color-gruen); width: 100%; position: absolute; bottom: 0; left: 0; } .primary__list { position: relative; } .primary__list:hover .primary__sub, .primary__list:focus .primary__sub { display: block; } .lang-switcher { display: none; } @media (min-width: 48em) { .lang-switcher { display: -webkit-box; display: -ms-flexbox; display: flex; } } .lang-switcher ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .lang-switcher ul li { margin-right: 1em; position: relative; } .lang-switcher ul li:after { content: ""; position: absolute; right: -0.5em; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 14px; width: 1px; background: #000000; background: var(--color-black); } .lang-switcher ul li:last-of-type { margin-right: 0; } .lang-switcher ul li:last-of-type:last-of-type:after { display: none; } .lang-switcher ul a { display: block; } .lang-switcher ul a:hover, .lang-switcher ul a:focus { text-decoration: none; color: #7d6b53; color: var(--color-braun); } .lang-switcher ul a.active, .lang-switcher ul a.current { color: #7d6b53; color: var(--color-braun); } .header__top-nav__link a { display: block; } .header__top-nav__link a:hover, .header__top-nav__link a:focus { text-decoration: none; color: #7d6b53; color: var(--color-braun); } .header__top-nav__link a.current, .header__top-nav__link a.section { color: #7d6b53; color: var(--color-braun); } .footer { padding: 2rem 0; } @media (min-width: 48em) { .footer__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } } .footer__col { margin-bottom: 2rem; } .footer__col:last-of-type { margin-bottom: 0; } @media (min-width: 48em) { .footer__col { margin-bottom: 0; } } .mob-nav--wrapper { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: #a8c3b1; background-color: var(--color-gruen); height: 100vh; height: 100dvh; left: 0; position: fixed; text-transform: uppercase; top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: hidden; width: 100%; z-index: 2; padding-top: 6em; } @media (min-width: /16em) { .mob-nav--wrapper { display: none; } } .mob-nav--wrapper .mob-nav__inner { overflow-x: scroll; height: 100%; } .mob-nav--wrapper .mob-nav__inner__navs { padding-bottom: 3em; } .mob-nav .mob-nav__primary, .mob-nav .mob-nav__secondary { padding: 0 15px; } .mob-nav .mob-nav__primary a, .mob-nav .mob-nav__secondary a { color: #000000; color: var(--color-black); display: block; margin-bottom: 1em; } .mob-nav .mob-nav__primary a:hover, .mob-nav .mob-nav__primary a:focus, .mob-nav .mob-nav__primary a.section, .mob-nav .mob-nav__primary a.current, .mob-nav .mob-nav__secondary a:hover, .mob-nav .mob-nav__secondary a:focus, .mob-nav .mob-nav__secondary a.section, .mob-nav .mob-nav__secondary a.current { color: #7d6b53; color: var(--color-braun); } .mob-nav .mob-nav__sub { padding-left: 2em; } .mob-nav.open { -webkit-transform: translateY(0%); transform: translateY(0%); visibility: visible; -webkit-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .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-list.draggable { padding: 0 !important; } .slick-dots { bottom: -50px; } .slick-dots li button .slick-dot-icon:before { font-size: 20px; color: #a8c3b1; color: var(--color-gruen); } .btn, .userform input.action { width: auto; } .btn--primary, .userform input.action { text-align: center; background: #7d6b53; background: var(--color-braun); padding: 0.5em 1em; display: inline-block; color: #ffffff; color: var(--color-white); border: 1px solid #7d6b53; border: 1px solid var(--color-braun); } .btn--primary:hover, .userform input.action:hover, .btn--primary:focus, .userform input.action:focus { background: #ffffff; background: var(--color-white); border: 1px solid #7d6b53; border: 1px solid var(--color-braun); color: #7d6b53; color: var(--color-braun); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .checkbox-fieldset { width: 100%; } .checkbox-fieldset__flex .checkbox-fieldset__legend { margin-bottom: 2em; } @media (min-width: 48em) { .checkbox-fieldset__flex .checkbox-fieldset__legend { position: absolute; left: 0; margin-bottom: 0; } } .checkbox-fieldset__flex .checkbox-fieldset__checkboxes { position: relative; left: 0em; } @media (min-width: 48em) { .checkbox-fieldset__flex .checkbox-fieldset__checkboxes { left: 5em; } } .checkbox-fieldset__checkboxes { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .checkbox-fieldset__checkboxes.grid { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 1em; } @media (min-width: 48em) { .checkbox-fieldset__checkboxes.grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 87.5em) { .checkbox-fieldset__checkboxes.grid { grid-template-columns: repeat(4, 1fr); } } .checkbox-fieldset__item { margin-right: 1em; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .checkbox-fieldset__item:last-of-type { margin-right: 0; } .checkbox-fieldset__item input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; } .checkbox-fieldset__item label { position: relative; padding-left: 2rem; cursor: pointer; line-height: 1.2; color: #333; } .checkbox-fieldset__item label:before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1em; height: 1em; border: 2px solid #a8c3b1; border: 2px solid var(--color-gruen); border-radius: 50%; background: white; -webkit-box-sizing: border-box; box-sizing: border-box; } .checkbox-fieldset__item input[type=checkbox]:checked + label::before { background-color: #a8c3b1; background-color: var(--color-gruen); } .userform .field.text { margin-bottom: 2rem; } .userform label { padding-bottom: 0.35rem; display: block; } .userform input.text, .userform textarea { display: block; width: 100%; max-width: 35em; padding: 0.35em; border: none; border-bottom: 2px solid #a8c3b1; border-bottom: 2px solid var(--color-gruen); } .userform .field.field { margin-top: 2rem; margin-bottom: 2rem; } .userform .field.checkbox label { display: inline-block; } .userform input.action { margin-top: 2rem; } .el-btn .row__inner { text-align: center; } .el-images img { display: block; width: 100%; height: auto; } .el-images .or-1 { max-height: 450px; width: auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; max-width: 100%; } @media (min-width: 48em) { .el-images .or-1 { max-height: 600px; } } @media (min-width: 131.25em) { .el-images .or-1 { max-height: 800px; } } .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 #a8c3b1; border-bottom: 1px solid var(--color-gruen); } .el-acc__entry:first-of-type { border-top: 1px solid #a8c3b1; border-top: 1px solid var(--color-gruen); } .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: #a8c3b1; fill: var(--color-gruen); -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-teaser__image { position: relative; width: 100%; height: auto; display: block; } .el-teaser__image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; } .el-teaser__title { position: absolute; bottom: 1em; color: #ffffff; color: var(--color-white); width: 100%; padding-left: 15px; padding-right: 15px; margin: 0 auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } @media (min-width: 48em) { .el-teaser__title { padding: 0; width: 100%; padding-left: 30px; padding-right: 30px; } } @media (min-width: 61.875em) { .el-teaser__title { max-width: 960px; } } @media (min-width: 87.5em) { .el-teaser__title { padding-left: 0; padding-right: 0; } } @media (min-width: 131.25em) { .el-teaser__title { width: 1200px; max-width: inherit; } } .el-teaser--typewriter { /* Für Screenreader sichtbare Inhalte verstecken */ /* Bewegung bei prefers-reduced-motion reduzieren oder ausschalten */ } .el-teaser--typewriter .typewriter-cursor { display: inline-block; width: 1ch; -webkit-animation: blink 1s steps(1) infinite; animation: blink 1s steps(1) infinite; /* 1 Blink/Sekunde -> barrierearm */ } @-webkit-keyframes blink { 50% { opacity: 0; } } @keyframes blink { 50% { opacity: 0; } } .el-teaser--typewriter .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .el-teaser--typewriter .typewriter-cursor { -webkit-animation: none; animation: none; } } .el-f-i__inner { padding: 2rem; } .el-f-i__duration { padding-top: 1em; } .el-breadcrumbs ol { display: -webkit-box; display: -ms-flexbox; display: flex; } .el-breadcrumbs ol li { margin-right: 1em; } .el-breadcrumbs ol li:last-of-type { margin-right: 0; } .el-breadcrumbs .breadcrumb-item { position: relative; } .el-breadcrumbs .breadcrumb-item:after { content: ">"; right: -0.75em; position: absolute; } .el-breadcrumbs .breadcrumb-item:last-of-type:after { display: none; } .el-breadcrumbs a:hover, .el-breadcrumbs a:focus { text-decoration: underline; color: #7d6b53; color: var(--color-braun); } .el-up__inner { padding-left: 2rem; padding-right: 2rem; } .el-up ol { padding-left: 0; padding-top: 0.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .el-up ol li { margin-bottom: 1em; margin-right: 0.35em; } .el-ctc__filter { position: relative; } .el-ctc__grid { padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 48em) { .el-ctc__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; } } .el-ctc__grid__item { position: relative; margin-bottom: 2rem; display: block; } @media (min-width: 48em) { .el-ctc__grid__item { margin-bottom: 0; } } .el-ctc__grid__item:hover, .el-ctc__grid__item:focus { background: #a8c3b1; background: var(--color-gruen); } .el-ctc__grid__item:hover:before, .el-ctc__grid__item:focus:before { content: ""; width: calc(100% + 40px); position: absolute; left: -20px; top: -20px; border: 20px solid #a8c3b1; border: 20px solid var(--color-gruen); height: calc(100% + 40px); } .el-ctc__grid__image { display: block; width: 100%; height: auto; } .el-ctc__grid__title { padding-top: 0.5em; } .el-coop__title { border-bottom: 1px solid #a8c3b1; border-bottom: 1px solid var(--color-gruen); } @media (min-width: 48em) { .el-coop__content { display: -webkit-box; display: -ms-flexbox; display: flex; } } .el-coop__col { width: 100%; margin-bottom: 1rem; } @media (min-width: 48em) { .el-coop__col { width: 28%; margin-bottom: 0; } .el-coop__col:last-of-type { width: 72%; } } .el-coop img { padding-right: 2em; -o-object-fit: contain; object-fit: contain; } @media (min-width: 48em) { .el-next__wrapper ol { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; } } .el-next__entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .el-next__entry__title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .el-next__entry__date { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .el-next__entry__link { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } @media (min-width: 48em) { .el-blog-ov__wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; } } @media (min-width: 87.5em) { .el-blog-ov__wrapper { grid-template-columns: repeat(3, 1fr); } } .el-blog-ov__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; margin-bottom: 2rem; } @media (min-width: 48em) { .el-blog-ov__item { margin-bottom: 0; } } .el-blog-ov__item:hover, .el-blog-ov__item:focus { background: #a8c3b1; background: var(--color-gruen); } .el-blog-ov__item:hover:before, .el-blog-ov__item:focus:before { content: ""; width: calc(100% + 40px); position: absolute; left: -20px; top: -20px; border: 20px solid #a8c3b1; border: 20px solid var(--color-gruen); height: calc(100% + 40px); } .el-blog-ov__title { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .el-blog-ov__img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; display: block; width: 100%; height: auto; } .el-blog-ov__date { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 0.5em; } /* .ei11 { } */ /*# sourceMappingURL=screen.css.map */