/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Text alignment */ .typo--align-left { text-align: left; } .typo--align-center { text-align: center; } .typo--align-right { text-align: right; } .shadow-dark { box-shadow: 0 0 30px -10px rgba(68,44,19,0.40); } .shadow-light { box-shadow: 0 8px 24px 0 rgba(61,30,0,0.15); } .section--padding-mobile-s { padding-left: 12px; padding-right: 12px; } .section--padding-mobile-m { padding-left: 32px; padding-right: 32px; } /* Space Top */ .section--space-top-1 { padding-top: calc(1 * 20px); } .section--space-top-2 { padding-top: calc(2 * 20px); } .section--space-top-3 { padding-top: calc(3 * 20px); } .section--space-top-4 { padding-top: calc(4 * 20px); } .section--space-top-5 { padding-top: calc(5 * 20px); } .section--space-top-6 { padding-top: calc(6 * 20px); } .section--space-top-7 { padding-top: calc(7 * 20px); } .section--space-top-8 { padding-top: calc(8 * 20px); } .section--space-top-9 { padding-top: calc(9 * 20px); } .section--space-top-10 { padding-top: calc(10 * 20px); } /* Space Bottom */ .section--space-bottom-1 { padding-bottom: calc(1 * 20px); } .section--space-bottom-2 { padding-bottom: calc(2 * 20px); } .section--space-bottom-3 { padding-bottom: calc(3 * 20px); } .section--space-bottom-4 { padding-bottom: calc(4 * 20px); } .section--space-bottom-5 { padding-bottom: calc(5 * 20px); } .section--space-bottom-6 { padding-bottom: calc(6 * 20px); } .section--space-bottom-7 { padding-bottom: calc(7 * 20px); } .section--space-bottom-8 { padding-bottom: calc(8 * 20px); } .section--space-bottom-9 { padding-bottom: calc(9 * 20px); } .section--space-bottom-10 { padding-bottom: calc(10 * 20px); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1680px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { /* Space Top */ .section--space-top-1 { padding-top: calc(1 * 16.9px); } .section--space-top-2 { padding-top: calc(2 * 16.9px); } .section--space-top-3 { padding-top: calc(3 * 16.9px); } .section--space-top-4 { padding-top: calc(4 * 16.9px); } .section--space-top-5 { padding-top: calc(5 * 16.9px); } .section--space-top-6 { padding-top: calc(6 * 16.9px); } .section--space-top-7 { padding-top: calc(7 * 16.9px); } .section--space-top-8 { padding-top: calc(8 * 16.9px); } .section--space-top-9 { padding-top: calc(9 * 16.9px); } .section--space-top-10 { padding-top: calc(10 * 16.9px); } /* Space Bottom */ .section--space-bottom-1 { padding-bottom: calc(1 * 16.9px); } .section--space-bottom-2 { padding-bottom: calc(2 * 16.9px); } .section--space-bottom-3 { padding-bottom: calc(3 * 16.9px); } .section--space-bottom-4 { padding-bottom: calc(4 * 16.9px); } .section--space-bottom-5 { padding-bottom: calc(5 * 16.9px); } .section--space-bottom-6 { padding-bottom: calc(6 * 16.9px); } .section--space-bottom-7 { padding-bottom: calc(7 * 16.9px); } .section--space-bottom-8 { padding-bottom: calc(8 * 16.9px); } .section--space-bottom-9 { padding-bottom: calc(9 * 16.9px); } .section--space-bottom-10 { padding-bottom: calc(10 * 16.9px); } } @media screen and (max-width: 768px) { /* Space Top */ .section--space-top-1 { padding-top: calc(1 * 13.8px); } .section--space-top-2 { padding-top: calc(2 * 13.8px); } .section--space-top-3 { padding-top: calc(3 * 13.8px); } .section--space-top-4 { padding-top: calc(4 * 13.8px); } .section--space-top-5 { padding-top: calc(5 * 13.8px); } .section--space-top-6 { padding-top: calc(6 * 13.8px); } .section--space-top-7 { padding-top: calc(7 * 13.8px); } .section--space-top-8 { padding-top: calc(8 * 13.8px); } .section--space-top-9 { padding-top: calc(9 * 13.8px); } .section--space-top-10 { padding-top: calc(10 * 13.8px); } /* Space Bottom */ .section--space-bottom-1 { padding-bottom: calc(1 * 13.8px); } .section--space-bottom-2 { padding-bottom: calc(2 * 13.8px); } .section--space-bottom-3 { padding-bottom: calc(3 * 13.8px); } .section--space-bottom-4 { padding-bottom: calc(4 * 13.8px); } .section--space-bottom-5 { padding-bottom: calc(5 * 13.8px); } .section--space-bottom-6 { padding-bottom: calc(6 * 13.8px); } .section--space-bottom-7 { padding-bottom: calc(7 * 13.8px); } .section--space-bottom-8 { padding-bottom: calc(8 * 13.8px); } .section--space-bottom-9 { padding-bottom: calc(9 * 13.8px); } .section--space-bottom-10 { padding-bottom: calc(10 * 13.8px); } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { /* Space Top */ .section--space-top-1 { padding-top: calc(1 * 10.67px); } .section--space-top-2 { padding-top: calc(2 * 10.67px); } .section--space-top-3 { padding-top: calc(3 * 10.67px); } .section--space-top-4 { padding-top: calc(4 * 10.67px); } .section--space-top-5 { padding-top: calc(5 * 10.67px); } .section--space-top-6 { padding-top: calc(6 * 10.67px); } .section--space-top-7 { padding-top: calc(7 * 10.67px); } .section--space-top-8 { padding-top: calc(8 * 10.67px); } .section--space-top-9 { padding-top: calc(9 * 10.67px); } .section--space-top-10 { padding-top: calc(10 * 10.67px); } /* Space Bottom */ .section--space-bottom-1 { padding-bottom: calc(1 * 10.67px); } .section--space-bottom-2 { padding-bottom: calc(2 * 10.67px); } .section--space-bottom-3 { padding-bottom: calc(3 * 10.67px); } .section--space-bottom-4 { padding-bottom: calc(4 * 10.67px); } .section--space-bottom-5 { padding-bottom: calc(5 * 10.67px); } .section--space-bottom-6 { padding-bottom: calc(6 * 10.67px); } .section--space-bottom-7 { padding-bottom: calc(7 * 10.67px); } .section--space-bottom-8 { padding-bottom: calc(8 * 10.67px); } .section--space-bottom-9 { padding-bottom: calc(9 * 10.67px); } .section--space-bottom-10 { padding-bottom: calc(10 * 10.67px); } } @media screen and (max-width: 330px) { } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } /*! Lity - v2.4.1 - 2020-04-26 * http://sorgalla.com/lity/ * Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.9);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:0;top:0;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:1px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none} .embla { overflow: hidden; } .embla__container { display: flex; } .embla__slide { position: relative; /* flex: 0 0 100%; */ } /* INFO: grid has always to be in a container */ .grid { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 24px); margin-bottom: -24px; } .grid + .grid { margin-top: 24px; } .grid > div { margin-bottom: 24px; margin-right: 24px; } /* align items vertical */ .grid--item-valign-top { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .grid--item-valign-center { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* align items horizontal */ .grid--item-valign-bottom { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .grid--item-halign-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .grid--item-halign-right { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } /* strech items */ .grid--item-stretch > div { align-self: stretch; } /* grid direction */ .grid--direction-ltr { /*direction: ltr;*/ } .grid--direction-rtl { flex-direction: row-reverse; } /* Columns */ .grid--columns-5 > div{ width: calc(20% - 24px); } .grid--columns-4 > div { width: calc(25% - 24px); } .grid--columns-3 > div { width: calc(33.33% - 24px); } .grid--columns-2 > div { width: calc(50% - 24px); } .grid--columns-1 > div { width: calc(100% - 24px); } /* grid demo */ .gridDemo1 { height: 64px; border-radius: 8px; } .gridDemo2 { height: 128px; border-radius: 8px; } .gridDemo3 { min-height: 64px; border-radius: 8px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { /* preset for grid logics */ .grid--columns-5 > div{ width: calc(20% - 24px); } .grid--columns-4 > div, .grid--wrap-4322 > div, .grid--wrap-4321 > div { width: calc(25% - 24px); } .grid--columns-3 > div { width: calc(33.33% - 24px); } .grid--columns-2 > div { width: calc(50% - 24px); } .grid--columns-1 > div { width: calc(100% - 24px); } } @media screen and (max-width: 1024px) { /* preset for grid logics */ .grid--columns-5 > div{ width: calc(20% - 24px); } .grid--columns-4 > div { width: calc(25% - 24px); } .grid--columns-3 > div, .grid--wrap-4322 > div, .grid--wrap-4321 > div { width: calc(33.33% - 24px); } .grid--columns-2 > div, .grid--wrap-3221 > div { width: calc(50% - 24px); } .grid--columns-1 > div, .grid--wrap-2111 > div { width: calc(100% - 24px); } } @media screen and (max-width: 768px) { .grid { width: calc(100% + 12px); margin-bottom: -12px; } .grid + .grid { margin-top: 12px; } .grid > div { margin-bottom: 12px; margin-right: 12px; } /* preset for grid logics */ .grid--columns-5 > div{ width: calc(20% - 12px); } .grid--columns-4 > div { width: calc(25% - 12px); } .grid--columns-3 > div { width: calc(33.33% - 12px); } .grid--columns-2 > div, .grid--wrap-4321 > div, .grid--wrap-4322 > div, .grid--wrap-3322 > div, .grid--wrap-3321 > div, .grid--wrap-3221 > div { width: calc(50% - 12px); } .grid--columns-1 > div, .grid--wrap-2211 > div, .grid--wrap-2111 > div { width: calc(100% - 12px); } } @media screen and (max-width: 660px) { /* preset for grid logics */ .grid--columns-5 > div{ width: calc(20% - 12px); } .grid--columns-4 > div { width: calc(25% - 12px); } .grid--columns-3 > div { width: calc(33.33% - 12px); } .grid--columns-2 > div, .grid--wrap-4322 > div, .grid--wrap-3322 > div { width: calc(50% - 12px); } .grid--columns-1 > div, .grid--wrap-4321 > div, .grid--wrap-3321 > div, .grid--wrap-3221 > div, .grid--wrap-2211 > div, .grid--wrap-2111 > div { width: calc(100% - 12px); } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .container { width: 100%; margin: 0 auto; } .container--size-xs { max-width: 742px; } .container--size-s { max-width: 1000px; } .container--size-m { max-width: 1200px; } .container--size-l { max-width: 1440px; } .container--algin-left { margin-left: 0; } .container--algin-right { margin-right: 0; } .container--demo { background-color: black; height: 64px; color: white; } .container--demo + .container--demo { margin-top: 32px; } .bgc-brown { background-color: #9F662D; } .bgc-blue { background-color: #2D376B; } .bgc-yellow { background-color: #E38D2D; } .bgc-red { background-color: #B20D29; } .bgc-black { background-color: #1D1D1B; } .bgc-white { background-color: #FFFFFF; } .bgc-cream { background-color: #FBF9F4; } .c-brown { color: #9F662D !important; } .c-blue { color: #2D376B !important; } .c-yellow { color: #E38D2D !important; } .c-red { color: #B20D29 !important; } .c-black { color: #1D1D1B !important; } .c-white { color: #FFFFFF !important; } .c-cream { color: #FBF9F4 !important; } .colorDemo { width: 128px; height: 128px; border-radius: 8px; float: left; margin-right: 24px; } *, *:before, *:after { box-sizing: border-box; } body { overflow-x: hidden; } body, html { width: 100vw; } body.no-scroll { position: absolute; height: 100%; overflow: hidden; } .clear { clear: both; } .content { z-index: 1; position: relative; min-height: 100vh; overflow-x: hidden; box-shadow: 0 24px 24px -24px rgb(61 30 0 / 15%); } .divider { border-width: 0; height: 1px; background-color: rgba(29, 29, 27, 0.16); } .g-recaptcha-holder { margin-bottom: 20px; } .g-recaptcha { display: inline-block; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .content { box-shadow: 0 8px 24px 0 rgba(61,30,0,0.15); } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .title-icon { margin-left: 12px; margin-bottom: 24px; } .title-icon svg { width: 64px; height: 64px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .title-icon { margin-left: 6px; margin-bottom: 12px; } .title-icon svg { width: 40px; height: 40px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .close { display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; background-color: #F8F8F8; border-radius: 50px; cursor: pointer; } .close svg { width: 30px; height: 30px; transition: transform 150ms ease; } .close svg > g > g { stroke-width: 1; } .close:hover svg { transform: rotate(90deg); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .chevron { display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; background-color: #fff; border-radius: 50px; cursor: pointer; } .chevron svg { width: 30px; height: 60px; } .direction--left { transform: rotate(180deg); } .chevron svg > g { stroke-linecap: round; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .tabs { transition: background 250ms ease-in-out; } .tabs__title { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 36px; } .tabs-nav--active .tabs__title { padding: 0 32px; } .tabs__list { position: relative; display: flex; justify-content: center; align-items: stretch; width: 100%; border-bottom: 1px solid rgba(29, 29, 27, 0.2); } .section--padding-mobile-m .tabs__list { padding: 0; } .section--padding-mobile-m .tabs-nav--active .tabs__list { padding: 0 32px; } .tabs__list__arrow { position: absolute; right: 32px; top: 27px; display: none; transform: rotate(-90deg); } .tabs-nav--active .tabs__list__arrow { transform: rotate(90deg); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .tabs__title { margin-bottom: 12px; } .tabs__list { z-index: 4; height: 73px; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0 32px; border-bottom: none; overflow: hidden; background-color: transparent; } .tabs-nav--active { z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-top: 35vh; overflow: hidden; } .tabs-nav--active .tabs__list { overflow: visible; } .tabs__list__arrow { display: block; } } @media screen and (max-width: 660px) { .tabs-nav--active { padding-top: 25vh; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .slider { position: relative; } .slider__content { padding: 32px calc((100vw - 1200px) / 2); } .slider__item { position: relative; flex: 0 0 100%; display: flex; align-items: center; margin-right: 24px; padding: 40px; border-radius: 8px; } .slider__item:last-of-type { margin-right: 0; } .slider__item::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 12px 12px 0 12px; border-color: #fff transparent transparent transparent; } .slider__item__image { flex-basis: 40%; width: 40%; max-width: 100%; height: 300px; margin-right: 32px; border-radius: 8px; object-fit: cover; object-position: center; } .slider__item__content { flex-basis: 60%; width: 60%; padding-left: 32px; } .slider__item__content__title { margin-bottom: 24px; } .slider__buttons__button { z-index: 6; position: absolute; top: 50%; transform: translateY(-50%); } .slider__buttons__button.button--prev { left: 32px; } .slider__buttons__button.button--next { right: 32px; } .slider__buttons__button[disabled="disabled"] { display: none; } .slider__navigation { height: 20px; overflow: hidden; } .slider__navigation__container { display: flex; } .slider__navigation__dot { flex: 0 0 20px; height: 20px; position: relative; justify-content: center; display: flex; width: 20px; margin-right: 110px; align-items: center; } .slider__navigation__dot__dot { height: 8px; width: 8px; border-radius: 50%; background-color: transparent; cursor: pointer; transition: background 250ms, height 250ms, width 250ms, flex 250ms; } .slider__navigation__dot.is-active .slider__navigation__dot__dot, .slider__navigation__dot__dot:hover { height: 20px; width: 20px; margin-top: 0; margin-bottom: 0; border: none; } .slider__navigation__dot__line { content: ''; position: absolute; right: -100px; top: 50%; transform: translateY(-50%); width: 85px; height: 2px; } .slider__navigation__dot:last-of-type .slider__navigation__dot__line { display: none; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .slider__item { flex: 0 0 90%; } } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .slider__buttons__button { display: none; } } @media screen and (max-width: 660px) { .slider__item { display: block; flex: 0 0 75%; padding: 0; border-radius: 6px; } .slider__item__image { height: 160px; width: 100%; margin-right: 0; border-radius: 6px; } .slider__item__content { width: 100%; padding: 18px 24px 24px 24px; } .slider__item__content__title { margin-bottom: 6px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .short-facts { display: flex; justify-content: space-between; align-items: center; padding: 32px 45px; border-bottom: 1px solid rgba(29, 29, 27, 0.2); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .short-facts { padding: 24px 32px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { .short-facts { flex-wrap: wrap; } .short-facts .fact { flex-basis: 35%; } } @media screen and (max-width: 480px) { .short-facts { padding: 24px 0 12px; } .short-facts .fact { flex-basis: 40%; } } @media screen and (max-width: 400px) { .short-facts .fact { flex-basis: 50%; } } .products { align-items: stretch; } .products--centered { justify-content: center; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .products__column { width: calc(50% - 24px) !important; } } @media screen and (max-width: 768px) { .products { width: 100%; padding: 30px 0; flex-direction: column !important; } .products__column { width: 100% !important; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .product-slider { display: block !important; flex-wrap: wrap; position: relative; margin: -12px 0; width: 100vw; } .product-slider__content { padding: 60px 0; align-items: stretch; } .product-slider__item { position: relative; flex: 0 0 385px; width: 385px; margin-right: 24px; } .product-slider__item:first-of-type { padding-left: calc((100vw - 1200px) / 2); flex: 0 0 calc(((100vw - 1200px) / 2) + 385px); } .product-slider__item:last-of-type { margin-right: 0; padding-right: calc((100vw - 1200px) / 2); flex: 0 0 calc(((100vw - 1200px) / 2) + 385px); } .product-slider__button { z-index: 5; position: absolute; top: 50%; transform: translateY(-50%); pointer-events: all; } .product-slider__button.button--prev { left: 32px; } .product-slider__button.button--next { right: 32px; } .product-slider__button[disabled="disabled"] { display: none; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1201px) { .product-slider__item:first-of-type { flex: 0 0 417px; width: 417px; padding-left: 32px; } .product-slider__item:last-of-type { flex: 0 0 417px; width: 417px; padding-right: 32px; } } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .product-slider__button { display: none; } .product-slider__item { flex: 0 0 260px; width: 260px; margin-right: 12px; } .product-slider__item:first-of-type { flex: 0 0 292px; width: 292px; padding-left: 32px; } .product-slider__item:last-of-type { flex: 0 0 292px; width: 292px; padding-right: 32px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .nutrition-data__table__title, .nutrition-data__text__title { margin-bottom: 24px; } .nutrition-data__table { padding-right: 32px; } .nutrition-data__text { padding-left: 32px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .nutrition-data__grid > div:first-of-type { margin-bottom: 32px; } .nutrition-data__grid > div { width: 100%; } .nutrition-data__table { padding-right: 0; } .nutrition-data__text { padding-left: 0; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .navigation-level { display: flex; } .navigation-level.level--1 { z-index: 100; display: flex; justify-content: flex-end; width: 100%; padding: 0 50px; border-bottom: 1px solid transparent; transition: background 350ms ease-in-out 300ms, border-color 300ms ease-in-out 200ms; } .header--christmas .navigation-level.level--1 { padding: 30px 50px 0; } .header--scroll .navigation-level.level--1 { border-bottom: 1px solid rgba(29,29,27,0.16); } .navigation-level.level--1.parent--active { background-color: #fff; border-bottom: 1px solid rgba(29,29,27,0.16); transition: background 300ms ease-in-out 0ms, border-color 300ms ease-in-out 0ms; } .navigation-level.level--2 { z-index: -1; position: absolute; top: 0; left: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; width: 100%; padding: 125px 90px 40px 260px; pointer-events: none; } .header--christmas .navigation-level.level--2 { padding: 155px 90px 40px 260px; } .navigation-level.level--2.level--active { pointer-events: all; } .navigation-level.level--2.level--active::before { top: 0; } .navigation-level.level--2 .level--parent { display: none; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .header--christmas .navigation-level.level--1 { padding: 20px 50px 0; } } @media screen and (max-width: 1024px) { .navigation-level.level--2 { padding: 125px 90px 40px 230px; } .header--christmas .navigation-level.level--2 { padding: 155px 90px 40px 230px; } } @media screen and (max-width: 768px) { .navigation-level.level--1 { opacity: 0.4; transform: translateY(-25%) rotateX(35deg); width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: flex-start; padding: 30vh 50px 20px 50px; background-color: transparent; transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), opacity 700ms cubic-bezier(0.65, 0, 0.35, 1); } .mobile--active .navigation-level.level--1 { opacity: 1; transform: rotateX(0deg) translateZ(100px); background-color: transparent; transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), opacity 700ms cubic-bezier(0.65, 0, 0.35, 1), background 350ms ease-in-out 300ms; } .navigation-level.level--1.parent--active { background-color: transparent; transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), opacity 700ms cubic-bezier(0.65, 0, 0.35, 1), background 350ms ease-in-out 300ms; } .navigation-level.level--2 { z-index: 120; position: absolute; transform: translate(110%, 0%); flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding: 30vh 32px 32px 32px; background-color: #FBF9F4; overflow-y: scroll; box-shadow: 0 8px 24px 0 rgb(61 30 0 / 15%) !important; transition: transform 1000ms cubic-bezier(0.25, 1, 0.5, 1); } .header--christmas .navigation-level.level--1 { padding: 30vh 50px 20px 50px; } .header--christmas .navigation-level.level--2 { padding: 25vh 32px 32px 32px; } .navigation-level.level--2.level--active { transform: translate(0%, 0%); } .navigation-level.level--2 .level--parent { display: flex; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .masonry-grid { margin-bottom: -24px; transition: 0.3s opacity; } .masonry-grid.loading { opacity: 0; } .masonry-grid-item { width: calc(33% - 16px); margin-bottom: 24px; } .masonry-grid-item-size--2 { width: calc(66% - 8px); } .masonry-grid-item-size--1 .teaser--landscape:before { padding-top: 60%; } .masonry-grid-item-size--1 .teaser--portrait:before { padding-top: calc(120% + 24px); } .masonry-grid-item-size--2 .teaser--landscape:before { padding-top: calc(60% + 8px); } @media screen and (max-width: 660px) { .teaser.teaser-wettbewerb { padding-top: calc(40% + 24px); } } @media screen and (max-width: 1024px) { .masonry-grid-item-size--1, .masonry-grid-item-size--2 { width: calc(50% - 12px); } .masonry-grid-item-size--2 .teaser--landscape:before { padding-top: 60%; } } @media screen and (max-width: 660px) { .masonry-grid-item-size--1, .masonry-grid-item-size--2 { width: 100%; } .masonry-grid-item-size--2 .teaser--landscape:before, .masonry-grid-item-size--1 .teaser--portrait:before { padding-top: 60%; } } .ingredients__note { display: flex; align-items: flex-start; gap: 12px; margin-top: 48px; margin-left: calc((100% / 5) * 0.2); line-height: 1.2em; } .ingredients__note svg { height: 20px; width: 20px; min-height: 20px; min-width: 20px; } .ingredients__note svg [stroke]:not([stroke="none"]) { stroke: rgba(29, 29, 27, 0.48); } .ingredients__note span { padding-top: 1px; color: rgba(29, 29, 27, 0.48); } @media screen and (max-width: 1280px) { .ingredients__note { margin-top: 64px; margin-left: calc((100% / 4) * 0.2); } } @media screen and (max-width: 1024px) { .ingredients__note { margin-left: calc((100% / 3) * 0.2); } } @media screen and (max-width: 768px) { .ingredients__note { margin-left: calc((100% / 2) * 0.25); } } @media screen and (max-width: 480) { .ingredients__note { margin-left: 0; padding: 0 24px; } } .ingredients-facts { margin-bottom: -80px; } .ingredients-facts > div { margin-bottom: 80px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .ingredients-facts { margin-bottom: -48px; } .ingredients-facts > div { margin-bottom: 48px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .teaser { width: 100%; position: relative; background-color: #fff; transform: translate3d(0,0,0); } .teaser--overflow { overflow: hidden; border-radius: 8px; position: absolute; transform: translate3d(0,0,0); top: 0; left: 0; right: 0; bottom: 0; } .teaser:before { content: ''; display: block; padding-top: 55%; } .teaser--portrait:before { padding-top: 130%; } .teaser--wide:before { padding-top: 42%; } .teaser--image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; transition: 5s transform; } .teaser--overlay { display: block; position: absolute; z-index: 3; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 29%, #000000 70%); opacity: 0.64; transition: 5s opacity; } .teaser--light { box-shadow: 0 8px 24px 0 rgba(61,30,0,0.15); border-radius: 8px; } .teaser--light .teaser--overlay { display: none; } .teaser--text { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 40px; z-index: 4; } .teaser--light .teaser--text .typo--small { color: #9F662D; } .teaser--dark .teaser--text h3, .teaser--dark .teaser--text--text { color: #fff; } .teaser--text .typo--small { font-family: 'Public'; text-transform: uppercase; font-weight: 800; font-size: 16px; margin-bottom: 0.5em; letter-spacing: 0.1em; } .teaser--dark .teaser--text h3 { margin-bottom: .25em; } .teaser--text--text{ font-weight: 500; } .teaser--dark .teaser--text h3, .teaser--dark .teaser--text--text { text-shadow: 0 1px 4px rgba(0,0,0,0.32); } .teaser--link { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; } .teaser--link:hover ~ .teaser--image { transform: scale(1.1); } .teaser--link:hover ~ .teaser--overlay { opacity: .85; } .teaser--link ~ .teaser--text { padding-right: 100px; } .teaser--link > svg { position: absolute; height: 24px; width: auto; bottom: 50px; right: 40px; } .teaser--link > .playbutton { position: absolute; bottom: 34px; right: 40px; } .teaser--text--callout { width: 390px; height: 95px; position: absolute; bottom: -12px; right: 106px; z-index: 10; transform: rotate(5deg); } .teaser--text--callout img { display: block; height: 100%; width: auto; margin: 0 auto; } .teaser--text--callout--title { font-weight: bold; position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%) rotate(-2deg); padding-left: 32px; padding-right: 32px; } .teaser--inlinevideo-holder { position: absolute; width: calc(100% - 120px); top: 40px; left: 60px; border-radius: 50%; overflow: hidden; transform: translate3d(0,0,0); } .teaser--inlinevideo-holder:before { content: ''; display: block; padding-top: 100%; } .teaser--inlinevideo { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .teaser-past-events .teaser--link > svg { display: none; } .teaser-past-events .teaser--text { top: 50%; transform: translateY(-50%); text-align: center; padding: 0; bottom: auto; } .teaser-past-events .teaser--text h3 { font-family: "Hug Script"; font-size: 64px; line-height: 1em; margin: 0; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { .teaser--portrait.teaser--inlinevideo-parent:before { padding-top: 40px; } .teaser--inlinevideo-holder { position: relative; top: 0; left: 0; margin-left: 40px; width: calc(100% - 80px); } .teaser--inlinevideo-parent .teaser--overflow, .teaser--inlinevideo-parent .teaser--text{ position: relative; } .teaser--link > .playbutton { bottom: 24px; right: 24px; } .teaser--text--callout { right: 75px; width: auto; height: 65px; } .teaser--text--callout--title { font-size: 14px; padding-left: 24px; padding-right: 24px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { .teaser--text--callout { right: 40px; width: auto; bottom: -6px; height: 65px; } .teaser--link > .playbutton { transform: scale(0.7); bottom: 8px; right: 8px; } .teaser--text--callout .typo--text{ font-size: 14px; } } .teaser-halfpage { position: relative; border-radius: 8px; overflow: hidden; background-color: #000; transform: translate3d(0,0,0); } .teaser-halfpage:before { content: ''; display: block; padding-top: 78%; } .teaser-halfpage--text { position: absolute; top: 0; left: 0; right: 0; padding-left: 24px; padding-right: 24px; } .teaser-halfpage > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0,0,0); transition: 5s transform; } .teaser-halfpage > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; } .teaser-halfpage--text h3 { margin-top: 1.8em; margin-bottom: 0.6em; } .teaser-halfpage--text.c-white h3 { color: #fff; } .teaser-halfpage--text.c-white .button { color: #fff; } .teaser-halfpage--text.c-white .button [fill="#1D1D1B"] { fill: #ffffff; } .teaser-halfpage--text.c-white .button [stroke="#1D1D1B"] { stroke: #ffffff; } .teaser-halfpage:hover > img { transform: scale(1.1); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .teaser-halfpage:before { padding-top: 100%; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { .teaser-halfpage:before { padding-top: 110%; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { .teaser-halfpage:before { padding-top: 140%; } } .tab { position: relative; display: block; max-width: 175px; padding: 0 20px 32px; cursor: pointer; } .tab__icon { margin: 0 auto 12px auto; text-align: center; } .tab__title { width: 100%; font-size: 20px; font-weight: 500; text-align: center; letter-spacing: 0.4px; line-height: 28px; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; transition: color 250ms; } .tab::after { content: ''; opacity: 0; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background-color: #000; transition: opacity 250ms, width 250ms; } .tab--active .tab__title, .tab:hover .tab__title { color: #000; } .tab--active .tab__title, .tab:hover .tab__title { color: #000; } .tab--active::after, .tab:hover::after { opacity: 1; width: 60%; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .tab { display: flex; align-items: center; max-width: none; width: 100%; padding: 18px 0; } .tab:last-of-type { border-bottom: none; } .tab::after { content: none; } .tab__icon { margin-bottom: 0; margin-right: 24px; } .tab__icon svg { width: 32px; height: 32px; } .tab--active { order: -1; } .tab__title { width: 100%; font-size: 18px; font-weight: 600; text-align: left; letter-spacing: 0.36px; line-height: 28px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .search-item { margin-bottom: 10px; } .search-item__link { display: flex; align-items: center; text-decoration: none; } .search-item__link:hover { text-decoration: none; } .type--product .search-item__link__image { height: 100px; width: 120px; min-width: 120px; object-fit: contain; } .type--other .search-item__link__image { width: 120px; height: 80px; margin-right: 24px; border-radius: 6px; object-fit: cover; object-position: center; } .search-item__link__text { width: 100%; padding-right: 24px; font-size: 16px; } .search-item__link__text__title { margin-bottom: 5px; font-size: 20px; } .search-item__link__text__description { font-size: 16px; } .search-item__link__arrow svg { height: 22px; width: 22px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .search-item__link:hover { text-decoration: none; } .type--product .search-item__link__image { height: 90px; width: 68px; min-width: 68px; } .type--other .search-item__link__image { width: 68px; height: 45px; margin-right: 18px; } .search-item__link__text { padding-right: 18px; } .search-item__link__arrow svg { height: 16px; width: 16px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .scroll { appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; padding: 0; border: none; outline: none; width: 48px; height: 48px; display: block; position: relative; background-color: #fff; border-radius: 50%; position: relative; transition: 0.2s transform; } .scroll:hover { transform: scale(1.05); } .scroll:before, .scroll:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid #1D1D1B; } .scroll:before { width: 14px; height: 22px; border-radius: 10px; } .scroll:after { width: 5px; height: 5px; border-radius: 50%; animation-name: scrollWheel; animation-duration: 2.3s; animation-iteration-count: infinite; opacity: 0; } @keyframes scrollWheel { 0% { transform: translate(-50%, -50%) translateY(-3px); } 20% { opacity: 1; } 30% { transform: translate(-50%, -50%) translateY(-3px); } 80% { transform: translate(-50%, -50%) translateY(3px); opacity: 1; } 100% { transform: translate(-50%, -50%) translateY(3px); opacity: 0; } } .quote { padding: 64px; border-radius: 8px; } .quote.invert { background-color: #fff; } .quote svg { height: 52px; width: auto; display: block; } .quote h3 { margin-top: 1.37em; margin-bottom: 0.75em; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .quote { padding: 52px; } } @media screen and (max-width: 768px) { .quote { padding: 42px; } .quote svg { height: 44px; } } @media screen and (max-width: 660px) { .quote { padding: 32px; } .quote svg { height: 40px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .produkt-reise-content h3 { margin-bottom: 0.75em; } .produkt-reise-content--media-holder { position: relative; padding-top: 63%; background-color: #fff; border-radius: 8px; transform: translate3d(0,0,0); overflow: hidden; } .produkt-reise-content--media-holder img, .produkt-reise-content--media-holder video { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .produkt-reise-content--media-holder .playbutton { position: absolute; bottom: 40px; right: 40px; } .produkt-reise-content--text-holder { padding-left: 120px; padding-right: 120px; } .produkt-reise-content--text-holder .wysiwyg:not(:last-child) { margin-bottom: 40px; } .produkt-reise-content--text-holder .produkt-reise-content-videos:not(:last-child) { margin-bottom: 16px; } .produkt-reise-content-videos p { font-weight: bold; text-align: center; margin-top: 8px; } .produkt-reise-content-videos-imageholder { padding-top: 76%; border-radius: 8px; overflow: hidden; position: relative; } .produkt-reise-content-videos-imageholder img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .produkt-reise-content-videos-imageholder .playbutton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.7); pointer-events: none; } .produkt-reise-content-videos-imageholder:hover .playbutton { transform: translate(-50%, -50%) scale(0.8); } .produkt-reise-content--text-holder p.typo--small.year { display: none; font-weight: bold; margin-bottom: -0.7em; margin-top: 0.2em; color: #9F662D; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .produkt-reise-content--text-holder { padding-left: 64px; padding-right: 64px; } .produkt-reise h1 { margin-bottom: .75em; } .produkt-reise-content:nth-child(3) { margin-top: 0px; } .produkt-reise-content { margin-top: 64px; } } @media screen and (max-width: 1024px) { .produkt-reise-content--text-holder { padding: 0; } .produkt-reise-content h3 { margin-top: 0.75em; } .produkt-reise-content--text-holder p.typo--small.year { display: block; } } @media screen and (max-width: 768px) { .produkt-reise-content { margin-top: 48px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .product { position: relative; display: block; width: 100%; height: 100%; width: 100%; border-radius: 8px; text-decoration: none; background-color: #fff; transition: transform 400ms cubic-bezier(0.33, 1, 0.68, 1); } .product__inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 32px 45px; } .product__inner__image { z-index: 6; height: auto; width: 100%; object-fit: contain; object-position: center bottom; margin: 0 auto; } .product__inner__text__title { margin-top: 12px; margin-bottom: 12px; font-size: 22px; font-weight: 500; text-align: center; letter-spacing: 0.025em; line-height: 1.65em; } .product__inner__text__description { text-align: center; font-size: 16px; } .product__inner__samples { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .product__inner__sample { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 90px; width: 90px; object-fit: contain; object-position: center; transition: transform 700ms cubic-bezier(.36,1.69,.65,1.05), opacity 150ms 50ms; } .product .product__inner__sample:nth-child(1) { height: 120px; width: 120px; } .product .product__inner__sample:nth-child(2) { height: 140px; width: 140px; } .product .product__inner__sample:nth-child(3) { height: 110px; width: 110px; } .product:hover { z-index: 6; transform: scale(1.15); text-decoration: none; } .product:hover .product__inner__sample:nth-child(1) { opacity: 1; transform: translate(-180%, -80%); transition: transform 500ms cubic-bezier(.36,1.69,.65,1.05), opacity 150ms 50ms; } .product:hover .product__inner__sample:nth-child(2) { opacity: 1; transform: translate(60%, -150%); transition: transform 500ms cubic-bezier(.36,1.69,.65,1.05), opacity 150ms 50ms; } .product:hover .product__inner__sample:nth-child(3) { opacity: 1; transform: translate(35%, 10%); transition: transform 500ms cubic-bezier(.36,1.69,.65,1.05), opacity 150ms 50ms; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .product:hover { transform: none; } .product__inner__samples { display: none; } } @media screen and (max-width: 768px) { .product__inner { padding: 24px; } .product__inner__text__title { margin-bottom: 6px; font-size: 16px; line-height: 1.6em; margin-bottom: 6px; } .product__inner__text__description { font-size: 14px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .playbutton { appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; padding: 0; border: none; outline: none; cursor: pointer; background-color: #fff; width: 48px; height: 48px; border-radius: 50%; position: relative; display: block; transition: 0.2s transform, 0.2s background, 0.2s box-shadow; } .playbutton:hover { transform: scale(1.05); } .playbutton:before, .playbutton:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center center; transition: 0.2s opacity, 0.2s transform; } .playbutton:before { background-image: url(../../img/iconbase/play.svg); background-size: 13px auto; transform: translate3d(0,0,0); /* Fix animation */ } .playbutton:after { opacity: 0; transform: translate3d(0,0,0) scale(0); background-image: url(../../img/iconbase/pause.svg); background-size: auto 15px; } .playbutton[data-state="2"] { background-color: rgba(255,255,255,0.16); box-shadow: 0 0 30px -10px rgba(68,44,19,0.1); } .playbutton[data-state="2"]:before { opacity: 0; transform: translate3d(0,0,0) scale(0); } .playbutton[data-state="2"]:after { opacity: 1; transform: translate3d(0,0,0) scale(1); } .overlay { pointer-events: none; opacity: 0; z-index: 500; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background-color: rgba(29,29,27,0.48); transition: opacity 300ms; } .overlay--show { opacity: 1; pointer-events: all; } .overlay__lightbox { pointer-events: none; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 64px); padding: 72px 32px 32px 32px; background-color: #fff; border-radius: 8px; overflow-y: auto; transition: opacity 300ms 200ms; width: 100%; max-width: 856px; } .overlay--show .overlay__lightbox { opacity: 1; pointer-events: all; } .overlay__lightbox__close { position: absolute; top: 32px; right: 32px; width: 56px; height: 56px; } .overlay__lightbox__content { height: 100%; width: 100%; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .overlay__lightbox { height: 100%; width: 100%; max-height: none; max-width: 100%; border-radius: 0; } .overlay__lightbox__close { top: 24px; right: 24px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .nutrition-table-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-top: 1px solid rgba(29, 29, 27, 0.12); } .nutrition-table-row:last-of-type { border-bottom: 1px solid rgba(29, 29, 27, 0.12); } .navigation-item { margin-right: 40px; } .navigation-item:last-of-type { margin-right: 0; } .navigation-item__link { position: relative; display: block; text-decoration: none; } .navigation-item__arrow { display: none; } .navigation-item__link:hover { text-decoration: none; } .navigation-item.level--1 > .navigation-item__link { padding: 30px 0; font-size: 18px; font-weight: 500; line-height: 1.35em; transition: color 250ms ease-in-out, opacity 300ms ease-in-out; } .navigation-item.level--1 > .navigation-item__link::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background-color: transparent; box-shadow: none; transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1), background 400ms cubic-bezier(0.22, 1, 0.36, 1); } .navigation-item.level--1 > .navigation-item__link.link--active::after, .header--scroll .navigation-item.level--1 > .navigation-item__link:hover::after { width: 60%; } .navigation-item.level--2 { opacity: 0; margin: 0; transition: opacity 300ms ease-in-out 0s; } .navigation-level.level--2.level--active .navigation-item { opacity: 1; transition: opacity 300ms ease-in-out 800ms; } .navigation-item.level--2 .navigation-item__link { min-width: 125px; margin: 0 25px; font-size: 20px; font-weight: 500; line-height: 1.2em; letter-spacing: 0.02em; } .navigation-item.level--2 .navigation-item__icon { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; } .navigation-item.level--2 .navigation-item__icon svg #Fill { fill: transparent; transition: fill 250ms; } .navigation-item.level--2 .navigation-item__label { display: block; text-align: center; color: #1D1D1B; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } .header--light .navigation-item__link, .header--christmas .navigation-item__link { color: #fff; } .header--scroll .navigation-item__link, .nav--active .navigation-item__link, .mobile--active .navigation-item__link { color: #1D1D1B; } .header:not(.header--scroll) .main-navigation:not(.nav--active) .navigation-item.level--1 > .navigation-item__link:hover { opacity: 0.5; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .navigation-item.level--2 .navigation-item__link { width: 100px; min-width: 100px; margin: 0 10px; font-size: 16px; line-height: 1.3em; letter-spacing: 0.02em; } } @media screen and (max-width: 768px) { .navigation-item { margin: 0; } .navigation-item.level--1 > .navigation-item__link { padding: 20px 0; font-size: 18px; line-height: 1.33em; letter-spacing: 0.01em; text-align: center; } .navigation-item.level-1 .navigation-item__label, .level--parent .navigation-item__label { order: 2; } .navigation-item__arrow { display: flex; align-items: center; margin-left: 24px; } .level--parent { display: flex; margin-bottom: 32px; font-size: 18px; font-weight: 500; line-height: 1.33em; letter-spacing: 0.01em; } .level--parent .navigation-item__arrow { order: 1; margin-left: 0; margin-right: 24px; transform: rotate(180deg); } .navigation-item.level--1 .navigation-item__link { display: flex; } .navigation-item.level--1 > .navigation-item__link.link--active::after, .navigation-item.level--1 > .navigation-item__link:hover::after { content: none; } .navigation-item.level--2 { width: 100%; margin-bottom: 10px; } .navigation-level.level--2.level--active .navigation-item { opacity: 1; transition: opacity 0ms ease-in-out 0ms; } .navigation-item.level--2 .navigation-item__link { display: flex; align-items: center; width: 100%; margin: 0; padding: 24px 32px; background-color: #fff; border-radius: 7px; } .navigation-item.level--2 .navigation-item__icon { margin-bottom: 0; height: 32px; width: 32px; } .navigation-item.level--2 .navigation-item__label { width: 100%; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .line-fact { width: 266px; background-image: url(../../img/iconbase/etikette_single.png); background-size: contain; background-position: center top; position: relative; background-repeat: no-repeat; transform-origin: center top; animation-duration: 1s; animation-name: etiketteBambelns; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; cursor: pointer; } .line-facts-3 .line-fact { width: 428px; background-image: url(../../img/iconbase/etikette_single_big.png); } .line-facts-3 .line-fact::after { top: 12px; left: -5%; height: 86px; background-image: url(../../img/iconbase/masche_klein.png); } .line-fact-cnt { position: absolute; top: 130px; left: 0; right: 0; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 80px; } .line-fact-icon { width: 160px; height: 160px; background-color: #fbf9f3; border-radius: 80px; display: grid; place-content: center; margin-bottom: 42px; } .line-fact-icon img { width: 120px; height: 120px; } .line-fact-noa-title { font-size: 24px; line-height: 32px; letter-spacing: 0.6px; color: #9f662d; font-weight: 500; } .line-fact-noa-text { font-size: 18px; line-height: 28px; letter-spacing: 0.18px; margin-top: 16px; } .line-fact-noa-text a { font-size: 18px; line-height: 28px; letter-spacing: 0.18px; color: #9f662d; font-weight: bold; } .line-fact::before { content: ''; display: block; padding-top: 135%; } .line-fact::after { content: ''; display: block; position: absolute; top: 0; left: -7%; right: 0; height: 144px; background-image: url(../../img/iconbase/masche.png); background-size: auto 100%; background-position: 5% 0; background-repeat: no-repeat; transform-origin: center top; animation-duration: 1s; animation-delay: 1s; animation-name: etiketteBambelns; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .line-fact > svg { height: 48px; display: block; position: absolute; width: auto; top: 124px; left: calc(50% - 24px); } .line-fact--title.typo--text { font-weight: bold; text-transform: uppercase; text-align: center; align-items: center; justify-content: center; position: absolute; top: 180px; left: 12%; right: 12%; font-size: 16px; bottom: 100px; display: flex; overflow-x: hidden; word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } .line-fact--more { display: block; width: 40px; height: 40px; cursor: pointer; border-radius: 50%; background-image: url(../../img/iconbase/etikette_plus.svg); background-size: contain; background-position: center center; background-repeat: no-repeat; position: absolute; left: calc(50% - 20px); bottom: 50px; transition: 0.2s transform; } .line-fact--more:hover { transform: rotate(90deg) scale(1.05); } .line-fact:nth-child(2) { animation-delay: .3s; } .line-fact:nth-child(2):after { animation-delay: 1.3s; } .line-fact:nth-child(3) { animation-delay: -.3s; } .line-fact:nth-child(3):after { animation-delay: 0.7s; } .line-fact:nth-child(4) { animation-delay: .9s; } .line-fact:nth-child(4):after { animation-delay: 1.9s; } @keyframes etiketteBambelns { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .line-fact { width: 175px; } .line-fact > svg { height: 30px; top: 80px; left: calc(50% - 15px); } .line-fact--title.typo--text { top: 120px; font-size: 11px; bottom: 60px; } .line-fact--more { width: 30px; height: 30px; left: calc(50% - 15px); bottom: 26px; } .line-fact:after { height: 95px; left: -6.5%; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .input { display: block; position: relative; } .input input, .input select, .input textarea { display: block; width: 100%; border-radius: 8px; font-weight: 400; font-size: 16px; letter-spacing: 0.01em; line-height: 1.75em; border: none; margin: 0; -webkit-appearance: none; text-align: left; white-space: normal; text-indent: 16px; outline: none; border: 2px solid transparent; padding: 9px 0; } .input select { text-indent: 0; padding-right: 44px; padding-left: 16px; } .input textarea { text-indent: 0; padding: 10px 16px; resize: none; min-height: 144px; } .input select:empty { color: rgba(0, 0, 0, 0.5); } .input input::placeholder { color: rgba(0, 0, 0, 0.5); } .input input[type='checkbox'] { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .input--file input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; overflow: hidden; z-index: 1; cursor: pointer; } .input--file { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; border-radius: 8px; border: dashed 1.5px black; padding: 24px; } .input--file .input__file__label, .input--file .input__file__filled_name { font-size: 16px; font-weight: 500; line-height: 16px; } .input--file .input__file__label__suffix { font-size: 12px; font-weight: 400; line-height: 16px; margin-top: 3px; } .input__file__filled { position: absolute; inset: 0; z-index: 2; display: none; justify-content: center; align-items: center; gap: 12px; border-radius: 8px; background-color: #fff; color: #9F662D; margin: -1px; border: 1.5px solid rgba(159, 102, 45, 0.4); } .input__file__filled:has(.input__file__filled_name:not(:empty)) { display: flex; } .input__file__filled_clear { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; border: 1.5px solid rgba(159, 102, 45, 0.4); background-color: #fff; } .wettbewerb_formular_ipt_group .input--file .input__file__filled_clear svg { width: 16px; height: 16px; } .input--select svg { position: absolute; top: 50%; right: 15px; height: 20px; width: auto; margin-top: -9px; transform: rotate(90deg); } .input--checkbox { position: relative; padding-left: 36px; cursor: pointer; } .input--checkbox input + span { position: absolute; top: 50%; left: 0; margin-top: -12px; display: block; border: 2px solid #000; border-radius: 8px; width: 24px; height: 24px; text-align: center; background: #fff; line-height: 26px; transition: background 0.1s; } .input--checkbox input + span svg { display: inline-block; width: 15px; height: auto; } .input--checkbox input + span svg polyline { stroke: #fff; } .input--checkbox input:checked + span { background: #000; } .input--small { display: inline-block; } .input--small input, .input--small select, .input--small textarea { font-size: 14px; border-width: 1px; padding-top: 7px; padding-bottom: 7px; } .input--outline input, .input--outline select, .input--outline textarea { background: transparent !important; border-color: #dbdbda; } .input--outline svg { opacity: 0.5; } .input--error input, .input--error select, .input--error textarea { border-color: red !important; } .ingredient--holder { text-align: center; width: 100%; max-width: 220px; margin: 0 auto; } .ingredient--imageholder { position: relative; width: 100%; max-width: 202px; margin: 0 auto; } .ingredient--imageholder:before { content: ''; display: block; padding-top: 100%; } .ingredient--imageholder:after { content: ''; display: block; position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; background-color: black; border-radius: 50%; } .ingredient--imageholder.invert:after { background-color: #fff; } .ingredient--image { display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .ingredient--holder p { padding-bottom: 0.5em; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { .ingredient--holder { max-width: 100%; position: relative; text-align: center; } .ingredient--imageholder { margin: 0 auto; /*max-width: 26%;*/ } .ingredient--holder p { padding-left: 1em; padding-bottom: 0; position: absolute; left: 26%; top: 50%; right: 0; transform: translateY(-50%); } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .ingredient-fact { text-align: center; } .ingredient-facts--icon { max-width: 160px; width: 100%; display: block; margin: 0 auto; background-color: #fff; border-radius: 50%; position: relative; } .ingredient-facts--icon svg { position: absolute; top: 50%; left: 50%; width: 40%; height: auto; transform: translate(-50%, -50%); } .ingredient-facts--icon:before { content: ''; display: block; padding-top: 100%; } .ingredient-fact .ingredient-fact--title { font-size: 20px; font-weight: 500; margin-top: 1.6em; margin-bottom: 1.2em; } .ingredient-fact--lightbox--content { text-align: center; padding: 0 24px 48px 24px; } .ingredient-fact--lightbox--content > svg { display: block; width: 64px; height: auto; margin: 0 auto; } .ingredient-fact--lightbox--content h4 { margin-top: 2em; margin-bottom: 0.66em; } .ingredient-fact--lightbox--content--description { margin-bottom: 2.66em; } .ingredient-fact--lightbox--content--description:last-child { margin-bottom: 0; } .ingredient-fact--lightbox--content--buttons .button { margin-left: 6px; margin-right: 6px; margin-bottom: 12px; } .geschichteAnimation tspan { font-family: 'Circular', Calibri; font-weight: bold; } .fact { display: inline-block; font-weight: 700; font-size: 18px; letter-spacing: 0; line-height: 1.25em; vertical-align: middle; } .fact svg { position: relative; top: -2px; height: 48px; width: auto; display: inline-block; margin-right: 14px; vertical-align: middle; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .fact { font-size: 12px; } .fact svg { height: 25px; margin-right: 5px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { .fact { margin-bottom: 12px; padding-left: 12px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { .fact { font-size: 10px; } } .event { padding-left: 160px; position: relative; } .event h3 { margin-bottom: 1em; } .event > svg { width: 96px; height: auto; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .event { padding-left: 0; text-align: center; } .event > svg { position: relative; top: 0; transform: none; height: 72px; } .event h3 { margin-top: 1em; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .decoBodymovin { position: relative; transform: translate3d(0,0,0); width: 100px; height: 100px; } .decoBodymovin svg { width: 100%; height: 100%; display: block; } #cookiemessage { position: fixed; z-index: 100; bottom: 0; left: 0; height: 200px; } #cookiemessage svg { width: auto !important; } #cookie-yes { cursor: pointer; } #cookie-no { cursor: pointer; } #datenschutz { cursor: pointer; } #cookiemessage.hide { pointer-events: none; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { #cookiemessage { height: 140px; left: -23px; bottom: -10px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .certification { position: relative; padding-left: 104px; min-height: 80px; line-height: 80px; } .certification p { display: inline-block; width: 100%; vertical-align: middle; } .certification img { width: 80px; height: auto; position: absolute; top: 0; left: 0; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .certification { min-height: 40px; line-height: 40px; padding-left: 56px; } .certification img { width: 40px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .calculator__title { display: flex; align-items: center; margin-bottom: 24px; } .calculator__title__text { margin-right: 24px; } .calculator__counter__text__label { display: inline-flex; } .unit--singular .calculator__counter__text__label__plural { display: none; } .calculator__counter { display: flex; align-items: center; } .calculator__counter__button { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; cursor: pointer; user-select: none; } .calculator__counter__text { margin: 0 24px; font-size: 24px; font-weight: 500; letter-spacing: 0.9px; line-height: 32px; } .calculator__ingredients__ingredient { display: flex; padding: 12px 0; border-bottom: 1px solid rgba(29, 29, 27, 0.2); } .calculator__ingredients__ingredient__amount { width: 120px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { .calculator__title { flex-direction: column; justify-content: center; } .calculator__title__text { margin-right: 0; margin-bottom: 12px; } .calculator__ingredients__ingredient__amount { min-width: 70px; width: 70px; } } @media screen and (max-width: 330px) { } .button { appearance: none; -webkit-appearance: none; text-decoration: none; cursor: pointer; outline: none; border: none; padding: 0; margin: 0; display: inline-block; background: none; border-radius: 8px; font-family: "Circular"; font-weight: 700; font-size: 18px; color: #000; letter-spacing: 0; line-height: 24px; padding: 16px 24px; vertical-align: middle; } .button[disabled] { opacity: 0.5; pointer-events: none; } .button--style-filled { background-color: #000; color: #fff; } .button--style-outline { padding: 14px 24px; border: 2px solid #000; color: #000; } .button--style-transparent { padding: 0; } .button svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; height: 16px; width: auto; } .button svg:first-child { margin-right: 14px; } .button svg:last-child { margin-left: 14px; } .article--imageholder { display: block; padding-top: 62%; position: relative; } .article--image { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 8px; object-fit: cover; } .article h4 { margin-top: 1.33em; margin-bottom: 0.66em; } .wettbewerb_formular h2, .wettbewerb_formular_form_thx h2 { font-size: 40px; line-height: 52px; letter-spacing: 0.4px; text-align: center; } .wettbewerb_formular > p, .wettbewerb_formular_form_thx p { font-size: 18px; line-height: 28px; letter-spacing: 0.18px; text-align: center; margin-top: 16px; } .wettbewerb_formular_form { position: relative; background-color: #fff; padding: 24px; border-radius: 8px; } .wettbewerb_formular_form.show_thx { overflow: hidden; } .wettbewerb_formular_ipt_group { display: grid; gap: 16px; margin-bottom: 48px; } .plz_ort_split { display: grid; grid-template-columns: 1fr 3fr; gap: 16px; } .wettbewerb_formular_title { font-size: 24px; line-height: 28px; letter-spacing: 0.25px; font-weight: bold; margin-top: 48px; margin-bottom: 24px; } .wettbewerb_formular_title:first-of-type { margin-top: 0; } .wettbewerb_formular_radio_group { display: grid; gap: 16px; margin-bottom: 16px; } .wettbewerb_formular_radio { cursor: pointer; } .wettbewerb_formular_radio input { position: absolute; top: 0; display: block; width: 1px; height: 1px; opacity: 0; } .wettbewerb_formular_radio_inner { height: 64px; display: flex; justify-content: start; align-items: center; gap: 16px; padding-left: 16px; position: relative; border-radius: 8px; background-color: #fbf9f3; border: 2px solid #fbf9f3; transition: border .2s; overflow: hidden; } .wettbewerb_formular_radio input:checked ~ .wettbewerb_formular_radio_inner { border: 2px solid #9F662D; } .wettbewerb_formular_radio_inner_corner { width: 40px; height: 40px; position: absolute; top: 0; right: 0; transform: translate(40px, -40px); transition: transform .3s; } .wettbewerb_formular_radio input:checked ~ .wettbewerb_formular_radio_inner .wettbewerb_formular_radio_inner_corner { transform: translate(0px, 0px); } .wettbewerb_formular_radio_inner_corner::before { content: ''; display: block; position: absolute; inset: 0; border-top-style: solid; border-left-style: solid; border-top-color: #9f662d; border-top-width: 40px; border-left-width: 40px; border-left-color: transparent; border-right-color: transparent; } .wettbewerb_formular_radio_inner_corner svg { width: 12px; height: 12px; position: absolute; top: 6px; right: 6px; } .wettbewerb_formular_radio_inner_text { font-size: 16px; line-height: 28px; letter-spacing: 0.32px; font-weight: 500; transition: color .3s; } .wettbewerb_formular_radio input:checked ~ .wettbewerb_formular_radio_inner .wettbewerb_formular_radio_inner_text { color: #9F662D; } .wettbewerb_formular_radio input ~ .wettbewerb_formular_radio_inner > svg g path:nth-child(1) { fill: transparent; transition: fill .3s; } .wettbewerb_formular_radio input:checked ~ .wettbewerb_formular_radio_inner > svg g path:nth-child(1) { fill: #A46429; } .wettbewerb_formular_footer { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .wettbewerb_formular_footer button { margin-top: 32px; width: 100%; } .wettbewerb_formular_ipt_group .input--file { justify-content: center; } .wettbewerb_formular_ipt_group .input--file svg { width: 26px; height: 26px; } .wettbewerb_formular_form_thx { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s; } .wettbewerb_formular_form.show_thx .wettbewerb_formular_form_thx { opacity: 1; pointer-events: auto; } .wettbewerb_formular_form_thx_icon { width: 80px; height: 80px; display: grid; place-content: center; border-radius: 40px; border: 1px solid rgba(0, 157, 89, 0.40); background: rgba(0, 157, 89, 0.12); } .wettbewerb_formular_form_thx_icon svg { width: 32px; height: 32px; } @media screen and (min-width: 768px) { .wettbewerb_formular_form { padding: 42px; } .wettbewerb_formular_ipt_group { grid-template-columns: 1fr 1fr; } .wettbewerb_formular_ipt_group .input--span-full { grid-column: 1 / 3; } .wettbewerb_formular_radio_inner { height: 120px; flex-direction: column; justify-content: center; gap: 8px; padding-left: 0; } .wettbewerb_formular_radio_group { grid-template-columns: repeat(5, 1fr); } .wettbewerb_formular_footer { flex-direction: row; } .wettbewerb_formular_footer button { margin-top: 0; width: auto; } } .wettbewerb-lightbox .container { position: relative; } .wettbewerb-lightbox--trigger { display: block; width: 135px; height: 135px; position: absolute; left: 0; top: 0; transform: translateY(-50%); z-index: 8; cursor: pointer; transition: .2s; } .wettbewerb-lightbox--trigger:hover { transform: translateY(-50%) scale(1.1) rotate(5deg); } .wettbewerb-lightbox--trigger img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; } .wettbewerb-lightbox--content h2 { margin-bottom: .75em; } .wettbewerb-lightbox--code { display: inline-block; border: 2px dashed #A46429; border-radius: 8px; margin-top: 52px; margin-bottom: 1em; font-weight: 500; font-size: 40px; color: #A46429; letter-spacing: 0.01em; text-align: center; line-height: 1em; padding: 1.2em; } .wettbewerb-lightbox--content .decoBodymovin { position: absolute; top: 55px; left: 35px; pointer-events: none; } .wettbewerb-lightbox--content .decoBodymovin:nth-of-type(2) { top: auto; left: auto; bottom: 5px; right: 15px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .wettbewerb-lightbox--trigger { position: relative; transform: none; margin: 0 auto; } .wettbewerb-lightbox--trigger:hover { transform: scale(1.1) rotate(5deg); } .wettbewerb-lightbox--content .decorations { display: none; } } @media screen and (max-width: 768px) { .wettbewerb-lightbox--code { font-size: 22px; margin-top: 22px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .teaser-halfpage-section { padding-left: 12px; padding-right: 12px; } .teaser-halfpage-grid:after { content: ''; display: block; clear: both; } .teaser-halfpage-grid { margin-bottom: -12px; } .teaser-halfpage-grid > .teaser-halfpage { width: calc(50% - 6px); float: left; margin-bottom: 12px; } .teaser-halfpage-grid > .teaser-halfpage:nth-child(2n) { margin-left: 12px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { .teaser-halfpage-grid > .teaser-halfpage { width: 100%; } .teaser-halfpage-grid > .teaser-halfpage:nth-child(2n) { margin-left: 0; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .teaser-fullpage { padding: 12px; } .teaser-fullpage .container { border-radius: 8px; overflow: hidden; width: 100%; display: flex; flex-flow: row; flex-wrap: wrap; } .teaser-fullpage--text { flex-grow: 0; margin: auto; width: 56%; padding-left: 120px; padding-right: 120px; } .teaser-fullpage--image { width: 44%; flex-grow: 0; border-radius: 8px; position: relative; } .teaser-fullpage--image:before { content: ''; display: block; padding-top: 125%; } .teaser-fullpage--image-teaser { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; object-position: center; } .teaser-fullpage--image-stoerer { position: absolute; top: 0; right: 0; width: 120px; top: 25%; right: 15%; } .teaser-fullpage h4 { margin-bottom: 1.77em; } .teaser-fullpage--text--text { margin-top: 0.88em; margin-bottom: 2.22em; } .teaser-fullpage .container { position: relative; } .teaser-fullpage .decorations .decoBodymovin { position: absolute; pointer-events: none; z-index: 5; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(1) { top: 80px; left: 80px; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(2) { top: 120px; right: 80px; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(3) { bottom: 80px; left: 50%; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .teaser-fullpage .decorations .decoBodymovin:nth-of-type(1) { top: 60px; left: 60px; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(2) { top: 40px; right: 40px; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(3) { bottom: 20px; left: 45%; } } @media screen and (max-width: 1024px) { .teaser-fullpage--text { padding-left: 60px; padding-right: 60px; } .teaser-fullpage--image-stoerer { width: 80px; } } @media screen and (max-width: 768px) { .teaser-fullpage--image { width: 100%; } .teaser-fullpage--image:before { padding-top: 80%; } .teaser-fullpage--image-stoerer { width: 60px; } .teaser-fullpage--text { padding: 32px; width: 100%; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(1) { top: 30px; left: 30px; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(2) { top: 40%; right: 20px; } .teaser-fullpage .decorations .decoBodymovin:nth-of-type(3) { display: none; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .tabs { width: 100%; } .tabs__navigation { transition: background 250ms ease-in-out; } .tabs__navigation__inner { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; border-bottom: 1px solid rgba(29, 29, 27, 0.2); } .tabs__content { position: relative; padding-top: 32px; } .tabs__content__group { display: none; } .tabs__content .grid + .grid { margin-top: 0; } .group--active { display: block; } .tabs__navigation__arrow { position: absolute; right: 32px; top: 27px; display: none; transform: rotate(-90deg); transition: transform 150ms; } .tabs-nav--active .tabs__navigation__arrow { transform: rotate(90deg); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .tabs__navigation__inner { z-index: 4; height: 72px; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0 32px; border-bottom: none; overflow: hidden; background-color: transparent; } .tabs-nav--active { z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-top: 35vh; overflow: hidden; } .tabs-nav--active .tabs__navigation__inner { overflow: visible; } .tabs__navigation__arrow { display: block; } .tabs__content { padding-top: 0; } } @media screen and (max-width: 660px) { .tabs-nav--active { padding-top: 25vh; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .tab-overview { width: 100%; } .tab-overview__content { position: relative; padding-top: 32px; } .tab-overview__content__group { display: none; } .tab-overview__content .grid + .grid { margin-top: 0; } .group--active { display: block; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { header.header + section.tab-overview > .container { padding-top: 116px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .storytelling-video--holder { position: relative; padding-top: 55%; overflow: hidden; border-radius: 8px; } .storytelling-video--link { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .storytelling-video--link .playbutton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .storytelling-video--link:hover .playbutton, .storytelling-video--link .playbutton:hover { transform: translate(-50%,-50%) scale(1.1); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .storytelling-video--holder { padding-top: 60%; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .section-mosaik--imageholder { width: 100%; position: relative; overflow: hidden; border-radius: 8px; margin-top: 24px; float: left; } .section-mosaik--imageholder:first-child { margin-top: 0; } .section-mosaik--imageholder:before { content: ''; display: block; padding-top: 55%; } .section-mosaik--image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; } .section-mosaik--imageholder:nth-child(2):before { padding-top: calc(110% + 24px); } .section-mosaik--imageholder:nth-child(2) { margin-right: 24px; } .section-mosaik--imageholder:nth-child(2), .section-mosaik--imageholder:nth-child(3), .section-mosaik--imageholder:nth-child(4) { width: calc(50% - 12px); } .section-mosaik + .section-mosaik { margin-top: 24px; } .section-mosaik--imagecount-2 .section-mosaik--imageholder { width: calc(50% - 12px); margin-top: 0; margin-right: 0; } .section-mosaik--imagecount-2 .section-mosaik--imageholder:first-child { margin-right: 24px; } .section-mosaik--imagecount-2 .section-mosaik--imageholder:before { padding-top: calc(110% + 24px); } .section-mosaik--imagecount-3 .section-mosaik--imageholder:nth-child(3):before { padding-top: calc(110% + 24px); } .storytelling-image--holder { padding-top: 46%; position: relative; border-radius: 8px; background-color: #000; } .storytelling-image--holder a { position: absolute; z-index: 2; display: block; top: 0; left: 0; right: 0; bottom: 0; } .storytelling-image--image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: 1s opacity; } .storytelling-image--holder a:hover ~ .storytelling-image--image { opacity: 0.7; } .storytelling-image--callout { position: absolute; top: -40px; right: -40px; width: 458px; } .storytelling-image--callout img { width: 100%; } .storytelling-image--callout h2 { font-family: "Public"; font-size: 40px; color: #FFFFFF; letter-spacing: 0.01em; text-align: center; line-height: 1.3em; position: absolute; left: 0; right: 0; padding-left: 32px; padding-right: 32px; top: 50%; transform: translateY(-50%) rotate(-2deg); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .storytelling-image--callout { width: 300px; } .storytelling-image--callout h2 { font-size: 25px; } } @media screen and (max-width: 768px) { .storytelling-image--holder { padding-top: 65%; } } @media screen and (max-width: 660px) { .storytelling-image--callout { width: 250px; } .storytelling-image--callout h2 { font-size: 20px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .social { text-align: center; } .social > span { font-family: 'Public', sans-serif; font-weight: bold; font-size: 16px; color: #1D1D1B; letter-spacing: 0.16em; line-height: 1.75em; text-transform: uppercase; opacity: 0.2; display: inline-block; vertical-align: middle; margin-right: 20px; } .social--link { display: inline-block; vertical-align: middle; line-height: 48px; margin-left: 10px; } .social--link svg { display: inline-block; vertical-align: middle; height: 48px; width: auto; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { .social > span { display: block; margin: 0 0 6px 0; } .social--link { margin-left: 5px; margin-top: 5px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .smart-verpackt-holder { display: flex; flex-flow: row; flex-wrap: wrap; } .smart-verpackt-holder > div:first-child { width: 358px; position: relative; } .smart-verpackt-holder > div:last-child { width: calc(100% - 358px); padding-left: 160px; margin: auto; } .smart-verpackt h3 { margin-bottom: .75em; } .smart-verpackt--product-image { width: 100%; max-width: 320px; display: block; margin: 0 auto; height: auto; position: relative; z-index: 1; } .smart-verpackt-holder .recycle { display: block; width: 100%; position: absolute; bottom: -15%; left: 0; right: 0; animation-name: recycleAnimation; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes recycleAnimation { 0% { transform: rotate(0); } 30% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .smart-verpackt-holder > div:last-child { padding-left: 80px; } } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .smart-verpackt-holder > div:first-child { width: 100%; max-width: 250px; margin: 0 auto; } .smart-verpackt-holder .recycle { bottom: -10%; } .smart-verpackt-holder > div:last-child { width: 100%; padding-left: 0; } .smart-verpackt h3 { margin-top: 2em; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .recipe__title { margin-bottom: 80px; text-align: center; } .recipe__subline { margin-top: 18px; } .recipe__grid { padding-top: 80px; } .recipe__method__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 42px; } .recipe__method { padding-left: 24px; } .storytelling-image--community { background-color: #fff; position: absolute; top: 20px; right: 0; z-index: 1; padding: 6px 16px; font-family: 'Public'; font-size: 14px; line-height: 28px; text-transform: uppercase; letter-spacing: 2.33px; color: #9f662d; border-radius: 8px 0 0 8px; } @media screen and (max-width: 1024px) { .recipe__title { margin-bottom: 32px; } .recipe__grid { padding-top: 32px; } .recipe__grid__column { width: 100% !important; } .recipe__calculator { margin-bottom: 32px; } .recipe__method { padding-left: 0; } .recipe__method__header { margin-bottom: 24px; } } @media screen and (max-width: 480px) { .recipe__subline { margin-top: 12px; } } @media screen and (min-width: 768px) { .storytelling-image--community { top: 40px; } } .produkt-reise .produkt-reise-content { position: relative; z-index: 1; } .produkt-reise .produktReiseAnimation { max-width: 1024px; margin: 0 auto; } .produkt-reise .produktReiseAnimation:first-child { margin-left: 0; } .produkt-reise .produktReiseAnimation:before, .produkt-reise .produktReiseAnimation:after { content: ''; display: block; width: 100%; } .produkt-reise .produktReiseAnimation:before { margin-top: -20%; } .produkt-reise .produktReiseAnimation:after { margin-top: -20%; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .produkt-reise .produktReiseAnimation { display: none; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { header.header + section.section--space-top-10:not(.product-overview-intro) > .container > h1 { padding-top: 56px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .product-slider__title { text-align: center; } .product-overview-intro { position: relative; } .product-overview-intro img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; } .product-overview-intro h1 { position: relative; z-index: 2; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .product-overview-intro { margin-bottom: -130px; } .product-overview-intro .container { padding-top: 56px; padding-bottom: 86px; } .product-overview-intro h1 { padding: 0; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .product-now { position: relative; } .product-now__background { position: absolute; width: 100%; height: calc(100% - 100px); background-size: cover; background-position: center center; background-repeat: no-repeat; } .product-now__celestial-cycle__line { position: relative; height: 152px; margin-bottom: 75px; } .product-now__celestial-cycle__line svg { position: absolute; left: 50%; transform: translateX(-50%); width: 110%; height: auto; overflow: visible; } .product-now__celestial-cycle__line svg #Array { opacity: 0.75; } .product-now__celestial-cycle__objects__sun, .product-now__celestial-cycle__objects__moon { display: none; height: 160vw; margin: 0 auto; width: 150px; transform-origin: center bottom; } @keyframes celestialCycle { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } } .product-now__celestial-cycle__objects { position: absolute; width: 100%; top: 30px; } .celestial--active { display: block; animation-name: celestialCycle; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; } .product-now__celestial-cycle__objects__sun__icon, .product-now__celestial-cycle__objects__moon__icon { height: 150px; width: 150px; } .product-now__time { display: flex; align-items: flex-end; width: 50%; margin-bottom: 32px; } .product-now__time__speechbubble { position: relative; display: table; margin-bottom: 30px; } .product-now__time__speechbubble__text { position: absolute; top: 40%; transform: translateY(-50%) rotate(350deg); width: 100%; font-family: 'Public', sans-serif; font-size: 24px; font-weight: 500; color: #fff; text-align: center; letter-spacing: 0.01em; line-height: 52px; } .product-now__container { position: relative; } .product-now__inner { position: relative; transform: translate3d(0,0,0); } .product-now__inner__headline { max-width: 50%; margin-bottom: 48px; } .product-now__inner__product { z-index: 2; position: absolute; bottom: 0; right: 0; width: 50%; padding-top: 50%; max-width: 100%; } .product-now__arm-target { z-index: 2; position: absolute; bottom: 0; right: 0; width: 50%; padding-top: 50%; max-width: 100%; } .product-now__arm { z-index: 4; pointer-events: none; width: 335%; height: 335%; position: absolute; top: -95%; left: -45%; transform: translate3d(0,0,0); } .product-now__inner__products__icon { position: absolute; } .product-now__inner__products__icon:nth-of-type(1) { top: 20%; left: -50px; } .product-now__inner__products__icon:nth-of-type(2) { top: 40%; right: -50px; transform: rotate(-40deg); } .product-now__inner__products__icon:nth-of-type(3) { bottom: -50px; left: 50px; } .product-now__corner { position: absolute; bottom: 0; right: 0; width: 50%; height: 0; padding-top: 15%; overflow: hidden; } .product-now__corner__paper { position: absolute; bottom: 0; right: 0; width: 100%; height: 0; padding-top: 25%; background-image: url(../../img/textures/paper-texture.jpg); background-repeat: repeat; background-size: 450px 246px; clip-path: polygon(100% 100%, 0% 100%, 100% 0); } .product-now__corner__rope { position: absolute; width: 110%; bottom: 36%; right: -4%; transform: rotate(-14deg); height: 25px; background-image: url(../../img/textures/rope-texture.png); background-size: auto 100%; background-position: left center; background-repeat: repeat-x; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { .product-now__celestial-cycle__line { margin-bottom: 50px; } } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .product-now__inner__products__icon:nth-of-type(2) { right: 25px; } .product-now__corner__rope { right: -5%; } } @media screen and (max-width: 1024px) { .product-now__background { height: calc(100% - 85px); } .product-now__celestial-cycle__line svg { height: 175px; width: 120%; } .product-now__celestial-cycle__line { margin-bottom: 32px; } .product-now__celestial-cycle__objects { top: 70px; } .product-now__celestial-cycle__objects__sun, .product-now__celestial-cycle__objects__moon { width: 100px; } .product-now__celestial-cycle__objects__sun__icon, .product-now__celestial-cycle__objects__moon__icon { height: 100px; width: 100px; } .celestial--active { animation-duration: 10s; } .product-now__time__speechbubble { position: relative; margin-bottom: 10px; margin-left: 10px; transform: rotate(5deg); } .product-now__corner__rope { right: -8%; } } @media screen and (max-width: 992px) { .product-now__corner__rope { right: -9%; } } @media screen and (max-width: 768px) { .product-now__background { height: calc(100% - 69px); } .product-now__inner { z-index: 1; top: -50px; display: flex; flex-direction: column; align-items: center; margin-bottom: -40px; } .product-now__inner__headline { max-width: none; width: 100%; margin-bottom: 24px; text-align: center; } .product-now__celestial-cycle__line svg #Array { stroke-dasharray: 15; } .product-now__celestial-cycle__line svg #Dash { stroke-width: 3; } .product-now__inner__product { position: relative; display: block; width: 60%; margin-bottom: 24px; margin-top: 0; } .product-now__arm-target { width: 60%; bottom: auto; top: 0; left: 50%; transform: translateX(-50%); } .product-now__inner__products__icon:nth-of-type(2) { top: 0; right: 0; } .product-now__inner__products__icon:nth-of-type(1) { display: none; } .product-now__inner__products__icon:nth-of-type(3) { bottom: 0; left: 0; } .product-now__time { width: 100%; justify-content: center; margin-bottom: 0; } .product-now__inner__button { width: 100%; text-align: center; } .product-now__corner { width: 100%; padding-top: 37%; } .product-now__corner__rope { right: -8%; bottom: 32%; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 600px) { .product-now__corner__rope { right: -8%; bottom: 30%; } } @media screen and (max-width: 480px) { .product-now__background { height: calc(100% - 53px); } .product-now__celestial-cycle__line svg #Array { stroke-dasharray: 20; } .product-now__celestial-cycle__line svg #Dash { stroke-width: 5; } .product-now__celestial-cycle__line { margin-bottom: 12px; } .product-now__celestial-cycle__line svg { height: 175px; } .product-now__celestial-cycle__objects { top: 75px; } .product-now__celestial-cycle__objects__sun, .product-now__celestial-cycle__objects__moon { width: 100px; } .product-now__celestial-cycle__objects__sun__icon, .product-now__celestial-cycle__objects__moon__icon { height: 75px; width: 75px; } .product-now__time { margin-bottom: 0; } .product-now__time__speechbubble__image { height: 80px; } .product-now__time__speechbubble__text { top: 36%; font-size: 20px; } .product-now__inner__product { width: 100%; margin-bottom: 12px; } .product-now__arm-target { top: 32px; width: 100%; } .product-now__arm { width: 500%; height: 500%; top: -180%; left: -145%; } .product-now__corner__rope { right: -8%; bottom: 30%; } } @media screen and (max-width: 400px) { .product-now__corner__rope { right: -9%; bottom: 30%; } } @media screen and (max-width: 370px) { .product-now__corner__rope { right: -8%; bottom: 28%; } } .product-hero { width: 100vw; overflow: hidden; position: relative; } #product-hero--bodymovin-holder { position: relative; min-width: 1600px; left: 50%; height: calc(100vh - 200px); max-height: 1000px; transform: translateX(-50%); margin-bottom: -6%; } #product-hero--bodymovin-holder.rotate { max-height: 750px; } .product-hero--progresstracker { position: absolute; top: 50%; height: 100px; left: 48%; width: auto; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; /*background-color: red;*/ } .product-hero--progresstracker.rotate { width: 60px; } #Interactive { cursor: pointer; opacity: 0; } .product-hero h2, .product-hero--description { text-align: center; max-width: 720px; margin: 0 auto; } .product-hero--description { max-width: 548px; padding-left: 24px; padding-right: 24px; } .product-hero h2 { margin-bottom: 0.4em; } .product-hero svg { display: block; position: relative; width: 100%; } .product-hero--fallbackimage { width: auto; height: 700px; max-height: calc(100vh - 350px); display: block; margin: 0 auto; } .product-hero--form .product-hero--fallbackimage { max-width: 1200px; height: auto; border-radius: 8px; object-fit: cover; object-position: center; } .product-hero--mobile-tracker { position: absolute; top: 0; left: 0; width: 70px; height: 60px; transform: translate(-50%,-50%); cursor: pointer; display: none; transition: .3s opacity; } .product-hero--mobile-tracker.rotate { transform: translate(-50%,-50%) rotate(90deg); } .product-hero--mobile-tracker img { display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .product-hero--mobile-tracker.hide { opacity: 0; pointer-events: none; } .product-hero .decorations .decoBodymovin { position: absolute; pointer-events: none; z-index: 5; } .product-hero .decorations .decoBodymovin:nth-of-type(1) { top: 20%; left: calc(50% - 400px); } .product-hero .decorations .decoBodymovin:nth-of-type(2) { top: 10%; left: calc(50% + 300px); } .product-hero .decorations .decoBodymovin:nth-of-type(3) { bottom: 10%; left: calc(50% - 450px); } .product-hero .decorations .decoBodymovin:nth-of-type(4) { bottom: 40%; left: calc(50% + 550px); } .product-hero .decorations .decoBodymovin:nth-of-type(5) { bottom: 5%; left: calc(50% + 400px); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .product-hero--form .product-hero--fallbackimage { max-width: 100%; border-radius: 0; } } @media screen and (max-width: 768px) { #product-hero--bodymovin-holder { min-width: 1000px; height: calc(100vh - 300px); margin-top: 100px; } #product-hero--bodymovin-holder.rotate { min-width: 130vw; height: auto; } .product-hero--mobile-tracker { display: block; } .product-hero .decorations .decoBodymovin:nth-of-type(1) { top: 20%; left: calc(50% - 250px); } .product-hero .decorations .decoBodymovin:nth-of-type(2) { top: 10%; left: calc(50% + 200px); } .product-hero .decorations .decoBodymovin:nth-of-type(3) { bottom: 10%; left: calc(50% - 300px); } .product-hero .decorations .decoBodymovin:nth-of-type(4) { bottom: 40%; left: calc(50% + 350px); } .product-hero .decorations .decoBodymovin:nth-of-type(5) { bottom: 5%; left: calc(50% + 200px); } } @media screen and (max-width: 660px) { .product-hero .decorations .decoBodymovin:nth-of-type(1) { top: 10%; left: calc(50% - 150px); } .product-hero .decorations .decoBodymovin:nth-of-type(2) { top: 5%; left: calc(50% + 50px); } .product-hero .decorations .decoBodymovin:nth-of-type(3) { bottom: 10%; left: calc(50% - 180px); } .product-hero .decorations .decoBodymovin:nth-of-type(4) { bottom: 20%; left: calc(50% + 100px); } .product-hero .decorations .decoBodymovin:nth-of-type(5) { display: none; } .product-hero--form.section--space-top-10 h2 { padding-top: 56px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .past-events-intro { position: relative; } .past-events-intro h2 { margin-top: 1em; } .past-events-intro img { height: 110px; width: auto; display: block; margin: 0 auto; } .backbutton { width: 60px; height: 60px; display: inline-block; position: absolute; top: 40px; left: 40px; border-radius: 50%; } .backbutton svg { height: 16px; position: absolute; display: block; width: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .past-events-intro img { height: 80px; } .backbutton { top: 24px; left: 24px; width: 48px; height: 48px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .next_draw_cnt { position: relative; } .next_draw { height: 560px; } .next_draw_overlay { position: absolute; inset: 0; background-image: linear-gradient(180deg, #0000 35%, #0000007f 100%); } .next_draw_img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .next_draw_text { position: absolute; right: 0; bottom: 0; left: 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0.48px; padding: 0 24px 24px; color: #fff; } .next_draw_bubble { position: absolute; top: -35px; right: -39px; transform-origin: top right; transform: scale(0.8,0.8); } .next_draw_bubble > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; font-family: 'Public'; transform: rotateZ(-2deg); } .next_draw_bubble_preline { font-size: 28px; line-height: 52px; letter-spacing: 0.25px; } .next_draw_bubble_text { font-size: 40px; line-height: 52px; letter-spacing: 0.4px; } @media screen and (min-width: 600px) { .next_draw_bubble { transform: scale(1,1); } } @media screen and (min-width: 1000px) { .next_draw_text { padding: 0 56px 44px; } } .logo-bar { text-align: center; } .logo-bar.bgc-white .container { border-top: 1px solid rgba(29,29,27,0.2); } .logo-bar h4 { font-weight: bold; display: inline-block; vertical-align: middle; opacity: 0.24; } .logo-bar img { height: 120px; display: inline-block; vertical-align: middle; margin-left: 24px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .logo-bar h4 { display: block; margin-bottom: 1em; } .logo-bar img { height: 100px; margin: 12px; } } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .line-facts-section { background-image: linear-gradient(180deg, #FBF9F4 0%, #FFFFFF 70%); } .line-facts--holder { padding-top: 48px; padding-bottom: 48px; overflow: hidden; width: 100vw; } .line-facts { text-align: center; position: relative; width: 100vw; transform: rotate(-3deg); } .line-facts-3 .line-facts::before { top: 48px; height: 23px; } .line-facts:nth-child(2n) { transform: rotate(3deg); } .line-facts-3 > h2 { text-align: center; } .line-facts::before { content: ''; display: block; position: absolute; top: 63px; left: -50vw; right: -50vw; height: 35px; background-image: url(../../img/textures/rope-texture.png); background-size: auto 100%; background-position: left center; } .line-facts--aligner { display: inline-block; white-space: nowrap; width: 100%; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .line-facts--aligner .overlay { display: none; } .line-facts--aligner > div { white-space: normal; } .line-facts .line-fact{ display: inline-block; vertical-align: top; } .line-facts + .line-facts { margin-top: 64px; } .line-facts--aligner::before, .line-facts--aligner::after { content: ''; display: inline-block; height: 1px; width: 128px; } .line-facts .decorations { position: absolute; top: 0; left: 0; right: 0; } .line-facts .decorations .decoBodymovin { position: absolute; pointer-events: none; animation-duration: 1s; animation-name: animationBambelns; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transform-origin: center top; } .line-facts .decorations .decoBodymovin::before { content: ''; display: block; position: absolute; bottom: calc(100% - 35px); left: 0; right: 0; height: 30px; background-image: url(../../assets/img/knoten.svg); background-repeat: no-repeat; background-position: center top; background-size: 38px auto; } .line-facts .decorations .decoBodymovin:nth-of-type(1)::before { height: 90px; } .line-facts .decorations .decoBodymovin:nth-of-type(1) { top: 120px; left: 56px; } .line-facts .decorations .decoBodymovin:nth-of-type(2) { top: 55px; right: 56px; animation-delay: .3s; } .line-facts:nth-child(2) .decorations .decoBodymovin:nth-of-type(2)::before { height: 50px; } .line-facts:nth-child(2) .decorations .decoBodymovin:nth-of-type(2) { top: 80px; animation-delay: .3s; } .line-facts:nth-child(1) .decorations .decoBodymovin:nth-of-type(1) { animation-delay: 1.3s; } @keyframes animationBambelns { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } } @media screen and (max-width: 1280px) { .line-facts .decorations .decoBodymovin:nth-of-type(1) { left: 0; } .line-facts .decorations .decoBodymovin:nth-of-type(2) { right: 0; } } @media screen and (max-width: 768px) { .line-facts--holder { padding-top: 24px; padding-bottom: 24px; } .line-facts + .line-facts { margin-top: 24px; } .line-facts::before { height: 25px; top: 40px; } .line-facts--aligner::before, .line-facts--aligner::after { width: 64px; } .line-facts { transform: rotate(-1.5deg); } .line-facts:nth-child(2n) { transform: rotate(1.5deg); } .line-facts .decorations .decoBodymovin:nth-of-type(1) { top: 93px; } .line-facts .decorations .decoBodymovin:nth-of-type(2) { top: 33px; } .line-facts:nth-child(2) .decorations .decoBodymovin:nth-of-type(2) { top: 53px; } } @media screen and (max-width: 660px) { .line-facts--aligner::before, .line-facts--aligner::after { width: calc(50vw - 87.5px); } } @media screen and (max-width: 660px) { .line-facts-3 .line-facts--aligner::before { content: none; } } .landing-hero { width: 100%; height: 1300px; max-height: calc(100vh - 100px); position: relative; } .landing-hero:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; background-color: rgba(0,0,0,0.16); background-image: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.00) 16%); } .landing-hero video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; transform: translate3d(0,0,0); } .landing-hero video.mobile { display: none; } .landing-hero--textholder { position: absolute; bottom: 80px; left: 0; right: 0; text-align: center; z-index: 9; } .landing-hero .scroll { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); z-index: 9; } @media screen and (max-width: 1920px) { .landing-hero { height: 1000px; } } @media screen and (max-width: 1600px) { .landing-hero { height: 820px; } } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .landing-hero video.desktop { display: none; } .landing-hero video.mobile { display: block; } .landing-hero--textholder { bottom: 70px; padding-left: 24px; padding-right: 24px; } } @media screen and (max-width: 660px) { .landing-hero--textholder .typo--title { font-size: 42px; } .landing-hero { max-height: calc(100vh - 160px); } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .inspirationen-preview h2 { margin-bottom: 1.2em; } .image-gallery { position: relative; } .image-gallery h2 { margin-bottom: 1.4em; } .image-gallery-container { display: none; } .image-gallery-container.active { display: block; } .image-gallery-image-holder { padding-top: 62%; position: relative; overflow: hidden; border-radius: 8px; } .image-gallery-image-holder img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .image-gallery-image-holder:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.08); pointer-events: none; } .pagination_cnt { background: #FFFFFF; box-shadow: 0 0 30px -10px rgba(68,44,19,0.40); border-radius: 8px; display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; } .pagination_cnt > button { display: inline-block; vertical-align: middle; } .pagi_num_cnt { display: inline-block; vertical-align: middle; } .pagi_num_ele { appearance: none; -webkit-appearance: none; outline: none; box-shadow: none; border: none; margin: 0; padding: 0; width: 28px; height: 28px; border-radius: 8px; color: #9F662D; background-color: white; cursor: pointer; font-family: 'Circular', Calibri, sans-serif; font-size: 16px; letter-spacing: 0.16px; text-align: center; line-height: 24px; transition: .2s opacity; } .pagi_num_ele:hover{ opacity: 0.7; } .pagi_num_ele.active { background-color: #9F662D; color: white; } .pagi_button { appearance: none; -webkit-appearance: none; outline: none; box-shadow: none; border: none; background: none; margin: 0; padding: 0; white-space: nowrap; width: auto; height: 28px; line-height: 28px; cursor: pointer; } .pagi_button[disabled] { opacity: 0.3; pointer-events: none; } .pagi_button svg { height: 16px; display: inline-block; vertical-align: middle; } .pagi_button svg:nth-child(2) { margin-left: -17px; } .pagi_button_first, .pagi_button_left { position: relative; transform: rotate(180deg); } .image-gallery-pagination { margin-top: 40px; text-align: center; } .image-gallery .decorations img { pointer-events: none; position: absolute; z-index: 2; } .image-gallery .decorations img:first-child { top: -20px; right: 70px; width: 130px; height: auto; } .image-gallery .decorations img:nth-child(2) { width: 66px; height: auto; right: 220px; top: -40px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .image-gallery .decorations img:first-child { top: -20px; right: 0px; width: 80px; height: auto; } .image-gallery .decorations img:nth-child(2) { width: 46px; height: auto; right: 80px; top: -30px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .hug-script-intro { height: 550px; background-color: #000; position: relative; } .hug-script-intro img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .hug-script-intro:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.32); background-image: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.00) 26%); z-index: 1; } .hug-script-intro h1 { position: absolute; z-index: 2; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-family: "Hug Script"; color: white; padding-left: 32px; padding-right: 32px; padding-top: 120px; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .hug-script-intro { height: calc(100vh - 100px); max-height: 800px; } .hug-script-intro h1 { padding-top: 96px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .produkt-reise.geschichte .produktReiseAnimation:first-child { margin: 0 auto; margin-top: -20%; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .produkt-reise.geschichte .produktReiseAnimation:first-child { margin-top: -30%; } } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .formular-micropage-holder { background: #FFFFFF; box-shadow: 0 8px 24px 0 rgba(61,30,0,0.15); border-radius: 8px; padding: 80px 104px; max-width: 742px; margin-left: auto; margin-right: auto; } .formular-micropage-holder .wpcf7-form-control-wrap { display: block; } .formular-micropage-holder .wpcf7-form-control-wrap:first-child { margin-top: 0; } .formular-micropage-holder .wpcf7-list-item { margin: 0; } .formular-micropage-holder .wpcf7-form-control-wrap + br { display: none; } .formular-micropage-holder .wpcf7-not-valid-tip { display: none; } .formular-micropage-holder input.wpcf7-not-valid { border-color: red; } .formular-micropage-holder .form-spacer { height: 24px; } .formular-micropage-holder form { display: grid; gap: 16px; line-height: 1.4; letter-spacing: 0.2px; } .formular-micropage-holder form a { font-weight: 500; text-decoration: none; border-bottom: 1.5px solid #000; } .yikes-easy-mailchimp-contact_form_7-checkbox, .wpcf7-acceptance > span, .wpcf7-checkbox > span, .mc4wp-checkbox { position: relative; display: inline-block; padding-left: 36px; } .yikes-easy-mailchimp-contact_form_7-checkbox label, .wpcf7-acceptance > span label, .wpcf7-checkbox > span label, .mc4wp-checkbox label { color: #000; cursor: pointer; } .yikes-easy-mailchimp-contact_form_7-checkbox input[type="checkbox"], .wpcf7-acceptance input[type="checkbox"], .wpcf7-checkbox input[type="checkbox"], .mc4wp-checkbox input[type="checkbox"] { --checkbox-width: 24px; --checkbox-bg: #FFFFFF; --checkbox-radius: 8px; --checkbox-border-color: #000; --checkbox-hover-border-color: #000; --checkbox-checked-bg: #000; position: absolute; left: 0; top: 0; width: var(--checkbox-width); height: var(--checkbox-width); margin: 0; background: var(--checkbox-checked-bg); border: none; border-radius: var(--checkbox-radius); transition: .3s; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .yikes-easy-mailchimp-contact_form_7-checkbox input[type=checkbox]:hover, .wpcf7-acceptance input[type="checkbox"]:hover, .wpcf7-checkbox input[type="checkbox"]:hover, .mc4wp-checkbox input[type="checkbox"]:hover { --checkbox-border-color: var(--checkbox-hover-border-color); } .yikes-easy-mailchimp-contact_form_7-checkbox input[type=checkbox]::before, .wpcf7-acceptance input[type="checkbox"]::before, .wpcf7-checkbox input[type="checkbox"]::before, .mc4wp-checkbox input[type="checkbox"]::before { content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='14px' height='12px' viewBox='0 0 14 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Check%3C/title%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Form/Input/Checkbox/Item/Active' transform='translate(-5.000000, -6.000000)' stroke='%23FFFFFF' stroke-width='2'%3E%3Cg id='Path-3' transform='translate(4.000000, 4.000000)'%3E%3Cpolyline transform='translate(7.696354, 6.409414) rotate(-45.000000) translate(-7.696354, -6.409414) ' points='2.25697903 4 1.69635374 8.81882821 13.6963537 8.81882821'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); position: absolute; top: calc(50% + 1.5px); left: 50%; transform: translate(-50%, -50%) scale(1); } .yikes-easy-mailchimp-contact_form_7-checkbox input[type=checkbox]::after, .wpcf7-acceptance input[type="checkbox"]::after, .wpcf7-checkbox input[type="checkbox"]::after, .mc4wp-checkbox input[type="checkbox"]::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--checkbox-bg); border-radius: inherit; box-shadow: inset 0 0 0 2px var(--checkbox-border-color); transition: opacity .1s; } .yikes-easy-mailchimp-contact_form_7-checkbox input[type=checkbox]:checked::after, .wpcf7-acceptance input[type="checkbox"]:checked::after, .wpcf7-checkbox input[type="checkbox"]:checked::after, .mc4wp-checkbox input[type="checkbox"]:checked::after { opacity: 0; } .wpcf7-hint { display: flex; align-items: start; font-size: 14px; gap: 8px; } .wpcf7-hint i { display: flex; align-items: center; } .formular-micropage-holder .wpcf7 form .wpcf7-response-output { margin: 0; margin-top: 24px; padding: 18px; border-radius: 8px; font-size: 18px; line-height: 1.3em; } .formular-micropage-legal { opacity: 0.48; font-size: 14px; color: #1D1D1B; letter-spacing: 0.14px; line-height: 24px; text-align: center; max-width: 742px; margin-left: auto; margin-right: auto; margin-top: 24px; } .formular-micropage-holder .input.input--select { position: relative; } .formular-micropage-holder .input.input--select:before { content: ''; display: block; position: absolute; z-index: 1; transform: rotate(90deg); top: calc(50% - 8px); pointer-events: none; right: 16px; width: 16px; height: 16px; background-image: url(/wp-content/themes/hug_retail/components/img/iconbase/Default-Iconography/List.svg); background-repeat: no-repeat; background-position: 100% center; background-size: 16px auto; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .formular-micropage-holder { padding-left: 32px; padding-right: 32px; padding-top: 48px; padding-bottom: 48px; } } @media screen and (max-width: 660px) { .formular-micropage-holder { padding-left: 24px; padding-right: 24px; padding-top: 32px; padding-bottom: 32px; margin-left: -32px; margin-right: -32px; border-radius: 0; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .faq h2 { margin-bottom: 1.4em; } .faq .teaser--overlay { opacity: 0.2; } .faq .teaser--link:hover ~ .teaser--overlay { opacity: 0.4; } .family-signatur .container { position: relative; } .family-signatur--text { max-width: 480px; padding-right: 32px; } .family-signatur--text h3 { margin-bottom: .8em; } .family-signatur--signatur { width: 50%; float: left; } .family-signatur--signatur img { height: 120px; width: auto; } .family-signatur--signatur-holder { margin-top: 82px; } .family-signatur--image { position: absolute; left: 480px; height: calc(100% + 30px); bottom: 0; width: auto; z-index: 2; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .family-signatur--text { width: 100%; max-width: 100%; padding-right: 0; } .family-signatur--signatur-holder { margin-top: 32px; } .family-signatur--signatur img { height: 80px; } .family-signatur--image { position: relative; display: block; height: auto; width: 100%; left: 0; max-width: 600px; margin: 0 auto; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .event-section { position: relative; } .event-section .decorations img { position: absolute; pointer-events: none; width: 140px; height: auto; z-index: 1; } .event-section .decorations img:first-child { top: 50%; left: calc(50% - 600px); } .event-section .decorations img:nth-child(2) { top: 5%; right: calc(50% - 650px); } .event-section .decorations img:nth-child(3) { bottom: -80px; right: calc(50% - 500px); } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .event-section .decorations img { width: 120px; } .event-section .decorations img:first-child { top: 70%; left: calc(50% - 500px); } .event-section .decorations img:nth-child(2) { top: 0%; right: calc(50% - 350px); } .event-section .decorations img:nth-child(3) { bottom: -80px; right: calc(50% - 400px); } } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .event-section .decorations img { width: 70px; } .event-section .decorations img:first-child { top: 10%; left: 30px; } .event-section .decorations img:nth-child(2) { top: 0%; right: 40px; } .event-section .decorations img:nth-child(3) { bottom: -20px; right: 55px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .error-status { background-repeat: no-repeat; background-size: contain; background-position: center; } .error-status__content { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60vh; } .error-status__content__code { display: block; font-size: 200px; font-weight: 500; margin-bottom: 42px; opacity: 0.48; text-align: center; } .error-status__content__title { margin-bottom: 24px; text-align: center; } .error-status__content__text { margin-bottom: 32px; text-align: center; } .error-status__content__link { text-align: center; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { .error-status__content__code { font-size: 100px; margin-bottom: 32px; } .error-status__content__title { margin-bottom: 12px; text-align: center; } } @media screen and (max-width: 330px) { } .certifications-section h2{ margin-bottom: 1.4em; } .certifications-section .container.section--space-top-3{ border-top: 1px solid rgba(29,29,27,0.2); } .card-slider__title { display: flex; justify-content: center; margin-bottom: 24px; } .card-slider__title__text { text-align: center; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .card-slider__title { margin-bottom: 24px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .articles-section h2 { margin-bottom: 1.4em; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .articles { margin: 0; width: calc(100% + 64px); margin-left: -32px; flex-wrap: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; } .articles:before, .articles:after { content: ''; display: block; height: 1px; padding-left: 26px; } .articles > div { width: calc(100% - 74px); margin: 0; flex-shrink: 0; margin-left: 6px; margin-right: 6px; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .about-us-teaser-section h2 { margin-bottom: 1.4em; } .about-us-teaser { position: relative; background-color: #000; border-radius: 8px; } .about-us-teaser:before { content: ''; display: block; padding-top: 60%; } .about-us-teaser--size-big:before { padding-top: 45%; } .grid--columns-3 > div.about-us-teaser--size-big { width: 100%; } .about-us-teaser > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: 8px; transition: 1s opacity; } .about-us-teaser:hover > img { opacity: 0.8; } .about-us-teaser:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(50% 117%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.40) 100%); border-radius: 8px; } .about-us-teaser > a { display: block; z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .about-us-teaser--speachbubble { position: absolute; top: 0; right: 0; width: 270px; z-index: 4; pointer-events: none; } .about-us-teaser--size-big .about-us-teaser--speachbubble { width: 460px; } .about-us-teaser--speachbubble:before { content: ''; display: block; padding-top: 43%; } .about-us-teaser--speachbubble img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } .about-us-teaser--speachbubble--text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) rotate(-2deg); text-align: center; z-index: 4; color: #FFFFFF; font-family: "Public"; font-size: 40px; letter-spacing: 0.01em; line-height: 1.3em; padding-left: 32px; padding-right: 32px; } .about-us-teaser--speachbubble--count-2 .about-us-teaser--speachbubble--text{ transform: translateY(-25%) rotate(-2deg); } .about-us-teaser--size-small .about-us-teaser--speachbubble--text { font-size: 32px; } .about-us-teaser--size-big .about-us-teaser--speachbubble { top: -40px; right: -40px; } .about-us-teaser--size-small .about-us-teaser--speachbubble--count-1 { bottom: -30px; left: -30px; top: auto; right: auto; } .about-us-teaser--size-small .about-us-teaser--speachbubble--count-2 { bottom: -30px; top: auto; right: 10px; } .about-us-teaser--size-small .about-us-teaser--speachbubble--count-3 { top: auto; bottom: -30px; right: -30px; } .small_only .about-us-teaser:before { padding-top: 145%; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .about-us-teaser--size-big .about-us-teaser--speachbubble { width: 300px; } .about-us-teaser--speachbubble { width: 230px; } .about-us-teaser--speachbubble--text { font-size: 22px; } .about-us-teaser--size-small .about-us-teaser--speachbubble--text { font-size: 22px; } .about-us-teaser--size-small .about-us-teaser--speachbubble--count-1 { bottom: -8px; left: -8px; } .about-us-teaser--size-small .about-us-teaser--speachbubble--count-2 { bottom: -8px; right: 0px; } .about-us-teaser--size-small .about-us-teaser--speachbubble--count-3 { bottom: -8px; right: -8px; } .small_only .about-us-teaser:before { padding-top: 60%; } } @media screen and (max-width: 660px) { .about-us-teaser--size-big .about-us-teaser--speachbubble { width: 200px; } .about-us-teaser--speachbubble { width: 180px; } .about-us-teaser--speachbubble--text { font-size: 16px; } .about-us-teaser--size-small .about-us-teaser--speachbubble--text { font-size: 18px; } } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .search { display: flex; align-items: center; } .search__icon { display: flex; align-items: center; padding: 7px 0 7px 42px; border-left: 1px solid rgba(29,29,27,0.16); cursor: pointer; } .search__icon svg { width: 22px; height: 22px; transition: opacity 300ms ease-in-out; } .search__icon svg > g > g { stroke-width: 1; transition: stroke 300ms ease-in-out; } .search__icon__text { display: none; font-size: 20px; font-weight: 500; letter-spacing: 0.02em; line-height: 32px; } .search__close { position: absolute; top: -75px; right: 0; opacity: 0; pointer-events: none; transition: opacity 250ms; } .search__close .close { background-color: #fff; box-shadow: 0 8px 24px 0 rgb(61 30 0 / 15%); } .search--active .search__close { opacity: 1; pointer-events: all; cursor: pointer; } .search__overlay { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(29,29,27,0.48); transition: opacity 600ms cubic-bezier(0.33, 1, 0.68, 1); } .search--active .search__overlay { opacity: 1; pointer-events: all; z-index: 4; } .search__inner { pointer-events: none; position: fixed; top: 90px; right: 32px; width: 550px; border-radius: 7px; } .header--christmas .search__inner { top: 120px; } .search--active .search__inner { pointer-events: all; } .search__inner__search-bar { position: relative; border-radius: 7px; border-bottom: 1px solid rgba(29,29,27,0.16); } .search__inner__search-bar__icon { position: absolute; top: 50%; left: 24px; transform: translateY(-50%); } .search__inner__search-bar__icon svg { width: 32px; height: 32px; } .search__inner__search-bar__icon svg > g > g { stroke-width: 1; } .header--light .search__icon svg > g > g, .header--christmas .search__icon svg > g > g { stroke: #fff; } .header--light .search__icon, .header--christmas .search__icon { border-color: #fff; } .header--light:not(.header--scroll) .main-navigation:not(.nav--active) .search__icon:hover svg, .header--christmas:not(.header--scroll) .main-navigation:not(.nav--active) .search__icon:hover svg { opacity: 0.5; } .header--scroll .search__icon { border-color: rgba(29,29,27,0.16); } .header--scroll .search__icon svg > g > g, .nav--active .search__icon svg > g > g { stroke: #1D1D1B; } .nav--active .search__icon { border-color: rgba(29,29,27,0.16); } .mobile--active .search__icon svg > g > g { stroke: #9f662d; } .search__inner__search-bar__input { width: 100%; padding: 20px 62px 20px 84px; font-size: 32px; letter-spacing: 0.02em; line-height: 1.25em; border: none; border-radius: 7px; } .search__inner__search-bar__input:focus { outline: none; } .search__inner__search-bar__reset { opacity: 0; pointer-events: none; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); height: 18px; width: 18px; cursor: pointer; } .reset--active { opacity: 1; pointer-events: all; } .search__inner__results { display: none; max-height: calc(100vh - 250px); padding: 20px; overflow-y: auto; } .show--results.search__inner__results { display: block; } .search__inner__results__title { margin-bottom: 24px; } .search__inner__results__empty { display: none; } .no--dividers .search__inner__results__title, .no--dividers .search__inner__results__divider { display: none; } .no--results :not(.search__inner__results__empty) { display: none; } .no--results .search__inner__results__empty { display: block; } .search__inner__results__divider { margin: 24px 0; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .search__icon { margin-top: 30px; padding: 0; border-left: none; } .search__icon svg { height: 18px; width: 18px; margin-right: 12px; margin-bottom: 2px; } .search__icon svg > g > g { stroke-width: 1.5; } .search__icon__text { display: block; font-size: 18px; } .search__overlay { opacity: 1; background-color: transparent; } .search__inner { opacity: 1; top: 0; left: 0; transform: translate(110%, 0%); height: 100%; width: 100%; transition: transform 1000ms cubic-bezier(0.25, 1, 0.5, 1); } .header--christmas .search__inner { top: 0; } .search--active .search__inner { transform: translate(0%, 0%); } .search__inner__search-bar { border-bottom: none; } .search__inner__search-bar__input { padding: 24px 135px 24px 62px; font-size: 18px; letter-spacing: 0; line-height: 1.35em; } .search__inner__search-bar__icon svg { width: 18px; height: 18px; } .search__inner__search-bar__icon svg > g > g { stroke-width: 2; } .search__inner__search-bar__reset { right: 90px; } .search__inner__results { max-height: none; } .search__close { top: 9px; right: 0; } .header--christmas .search__close { top: 9px; } .search__close .close { width: 65px; border-radius: 0; box-shadow: none; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .error-status { background-repeat: no-repeat; background-size: contain; background-position: center; } .error-status__content { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60vh; padding-top: 30vh; } .error-status__content__code { display: block; font-size: 200px; font-weight: 500; margin-bottom: 42px; opacity: 0.48; text-align: center; } .error-status__content__title { margin-bottom: 24px; text-align: center; } .error-status__content__text { margin-bottom: 32px; text-align: center; } .error-status__content__link { text-align: center; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { .error-status__content__code { font-size: 100px; margin-bottom: 32px; } .error-status__content__title { margin-bottom: 12px; text-align: center; } } @media screen and (max-width: 330px) { } body { background-color: #FBF9F4; font-family: 'Circular', Calibri, sans-serif; } .content { background-color: #FBF9F4; overflow: hidden; } .wysiwyg { font-size: 18px; color: #1d1d1b; font-weight: 400; letter-spacing: 0.1px; line-height: 1.6em; } .wysiwyg .typo--title, .wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5 { margin-bottom: 14px; } .wysiwyg p { margin-bottom: 14px; } .remove_extra_spacing .wysiwyg p { margin-bottom: 0; } .wysiwyg a { display: inline-block; position: relative; color: #9f662d; font-weight: 600; letter-spacing: 0.01em; line-height: 1.6em; text-decoration: none; } .wysiwyg a::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: 0; left: 0; background-color: #9f662d; transform-origin: bottom right; transition: transform 0.25s ease-out; } .wysiwyg a:hover::after { transform: scaleX(1); transform-origin: bottom left; } .wysiwyg ul { list-style-type: none; padding-left: 40px; margin-bottom: 14px; } .wysiwyg li { font-family: 'Circular', Calibri, sans-serif; color: #1d1d1b; font-weight: 400; letter-spacing: 0.01em; line-height: 1.6em; } .wysiwyg li::before { content: '\2022'; display: inline-block; width: 40px; margin-left: -40px; text-align: start; color: #9F662D; } .wysiwyg b, .wysiwyg strong { font-weight: bold; } .wysiwyg em, .wysiwyg i { font-style: italic; } .wysiwyg sub, .wysiwyg super { font-size: smaller; line-height: normal; } .wysiwyg sub { vertical-align: sub; } .wysiwyg super { vertical-align: super; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .wysiwyg { font-size: 16px; } .wysiwyg ul { padding-left: 24px; } .wysiwyg li { font-size: 16px; } .wysiwyg li::before { width: 24px; margin-left: -24px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } /* Circular */ @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-black.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-black.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-black.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-black.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-blackitalic.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-blackitalic.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-blackitalic.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-blackitalic.woff") format("woff"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-bold.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-bold.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-bold.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-bolditalic.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-bolditalic.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-bolditalic.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-bolditalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-book.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-book.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-book.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-book.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-bookitalic.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-bookitalic.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-bookitalic.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-bookitalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-regular.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-regular.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-regular.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-regularitalic.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-regularitalic.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-regularitalic.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-regularitalic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-medium.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-medium.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-medium.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Circular"; src: url("../../assets/fonts/circular/lineto-circular-pro-mediumitalic.eot"); src: url("../../assets/fonts/circular/lineto-circular-pro-mediumitalic.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/circular/lineto-circular-pro-mediumitalic.woff2") format("woff2"), url("../../assets/fonts/circular/lineto-circular-pro-mediumitalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } /* Public */ @font-face { font-family: "Public"; src: url("../../assets/fonts/public/public-medium.eot"); src: url("../../assets/fonts/public/public-medium.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/public/public-medium.woff2") format("woff2"), url("../../assets/fonts/public/public-medium.woff") format("woff"); font-display: swap; } /* Hug Script */ @font-face { font-family: "Hug Script"; src: url("../../assets/fonts/hugscript/hug-script.eot"); src: url("../../assets/fonts/hugscript/hug-script.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/hugscript/hug-script.woff2") format("woff2"), url("../../assets/fonts/hugscript/hug-script.woff") format("woff"); font-display: swap; } /* Headline typography */ .typo--title { font-family: 'Public', Calibri, sans-serif; font-size: 100px; color: #1d1d1b; font-weight: 500; letter-spacing: 0.01em; line-height: 1.44em; } h1, .typo--h1 { font-family: 'Public', Calibri, sans-serif; font-size: 64px; color: #1d1d1b; font-weight: 500; letter-spacing: 0.035em; line-height: 1.25em; } h2, .typo--h2 { font-family: 'Circular', Calibri, sans-serif; font-size: 40px; color: #1d1d1b; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3em; } h3, .typo--h3 { font-family: 'Circular', Calibri, sans-serif; font-size: 32px; color: #1d1d1b; font-weight: 500; letter-spacing: 0.02em; line-height: 1.25em; } h4, .typo--h4 { font-family: 'Circular', Calibri, sans-serif; font-size: 24px; color: #1d1d1b; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35em; } h5, .typo--h5 { font-family: 'Circular', Calibri, sans-serif; font-size: 20px; color: #1d1d1b; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35em; } .typo--preline, .typo--subline { font-family: 'Public', Calibri, sans-serif; font-size: 18px; color: #1d1d1b; font-weight: 800; letter-spacing: 0.17em; line-height: 1.6em; } /* Text typography */ .typo--text { font-family: 'Circular', Calibri, sans-serif; font-size: 18px; color: #1d1d1b; font-weight: 400; letter-spacing: 0.01em; line-height: 1.6em; } .typo--small { font-family: 'Circular', Calibri, sans-serif; font-size: 16px; color: #1d1d1b; font-weight: 400; letter-spacing: 0.01em; line-height: 1.3em; } /* List typography */ .typo--list { list-style-type: none; padding-left: 40px; } .typo--list li { font-family: 'Circular', Calibri, sans-serif; font-size: 18px; color: #1d1d1b; font-weight: 400; letter-spacing: 0.01em; line-height: 1.6em; } .typo--list li::before { content: '\2022'; display: inline-block; width: 40px; margin-left: -40px; text-align: start; color: #9F662D; } /* Misc typography */ .typo--font-accent { font-family: 'Public', Calibri, sans-serif; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { /* Headline typography */ .typo--title { font-size: 56px; letter-spacing: 0.05em; line-height: 1.45em; } h1, .typo--h1 { font-size: 44px; letter-spacing: 0.01em; line-height: 60px; } h2, .typo--h2 { font-size: 24px; } h3, .typo--h3 { font-size: 22px; line-height: 1.4em; } h4, .typo--h4 { font-size: 20px; } h5, .typo--h5 { font-size: 18px; } /* Text typography */ .typo--text { font-size: 16px; } /* List typography */ .typo--list { padding-left: 24px; } .typo--list li { font-size: 16px; } .typo--list li::before { width: 24px; margin-left: -24px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 330px) { } .chevron svg #Stroke-3 { stroke: #9F662D; } .title-icon { transform: rotate(30deg); } .slider__navigation__dot__dot { border: 1px solid #1d1d1b; } .slider__navigation__dot.is-active .slider__navigation__dot__dot, .slider__navigation__dot__dot:hover { background-color: #9F662D; } .slider__navigation__dot__line { background-color: rgba(29, 29, 27, 0.2); } .tabs__list__arrow svg > g > #Stroke-3 { stroke: #9F662D; } @media screen and (max-width: 768px) { .tabs-nav--active { background-color: #FBF9F4; } } .button { color: #9F662D; transition: .2s background-color, 0.2s border-color, 0.2s color; } .button--style-filled { background-color: #9F662D; color: #fff; box-shadow: 0 10px 30px -10px rgba(68,44,19,0.40); } .button--style-filled:hover, .teaser-wettbewerb .teaser--overflow > a:hover ~ .teaser--text button { background-color: #50351A; } .button--style-outline { border: 2px solid #9F662D; color: #9F662D; } .button--style-outline:hover { border-color: #50351A; color: #50351A; } .button--style-transparent:hover { color: #50351A; } .button svg [stroke="#1D1D1B"] { stroke: #9F662D; transition: 0.2s stroke; } .button--style-outline:hover svg [stroke="#1D1D1B"], .button--style-transparent:hover svg [stroke="#1D1D1B"] { stroke: #50351A; } .button--style-filled svg [stroke="#1D1D1B"] { stroke: #FFFFFF; } .calculator__counter__button { border: 2px solid #9F662D; } .calculator__counter__button svg > g > g { stroke: #9F662D; } .fact { font-family: "Circular"; color: #1D1D1B; } .fact svg :not([fill="#9F662D"]) { fill: #9F662D; } .ingredient--imageholder:after { background-color: #FBF9F4; } .input { font-family: "Circular", Calibri, sans-serif; } .input input, .input select, .input textarea { background: #fbf9f4; font-family: "Circular", Calibri, sans-serif; color: #1d1d1b; } .input input:focus, .input textarea:focus { border-color: #9f662d; } .input--file { border-color: rgba(159, 102, 45, 0.4); } .input--file .input__file__label { color: #9F662D; } .input--file .input__file__label__suffix { color: rgba(159, 102, 45, 0.4); } .input--checkbox input + span { border: 2px solid #9f662d; } .input--checkbox input:checked + span { background: #9f662d; } label p > a { color: #9f662d; } .navigation-item__link { font-family: 'Circular', Calibri, sans-serif; color: #1D1D1B; } .header--scroll .navigation-item.level--1 > .navigation-item__link:hover, .nav--active .navigation-item.level--1 > .navigation-item__link:hover, .navigation-item.level--1 > .navigation-item__link.link--active, .navigation-item.level--1 > .navigation-item__link.link--page-active { color: #9f662d; } .navigation-item.level--1 > .navigation-item__link.link--active::after, .navigation-item.level--1 > .navigation-item__link:hover::after { background-color: #9f662d; } .navigation-item.level--2 .navigation-item__link:hover .navigation-item__icon svg #Fill, .navigation-item.level--2 .navigation-item__link.link--page-active .navigation-item__icon svg #Fill, .navigation-item.level--2 .navigation-item__link:focus .navigation-item__icon svg #Fill { fill: #9f662d; } @media screen and (max-width: 768px) { .navigation-item.level--1 > .navigation-item__link { font-family: 'Circular', Calibri, sans-serif; color: #1d1d1b; } .navigation-item.level--1 > .navigation-item__link.link--page-active { color: #1d1d1b; } .level--parent { color: #1d1d1b; font-family: 'Circular', Calibri, sans-serif; } .navigation-item.level--1 > .navigation-item__link.link--active { color: #1d1d1b; } .navigation-item.level--2 .navigation-item__icon svg #Fill { fill: #9f662d; } .navigation-item.level--2 .navigation-item__link.link--page-active { color: #9f662d; } } .product__inner__text__title { font-family: 'Circular', Calibri, sans-serif; color: #9F662D; } .quote { background-color: rgba(159,102,45,0.04); } .search-item__link__arrow svg > g > g { stroke: #9f662d; } .search-item__link__text__description { color: #1D1D1B; } .tab::after { background-color: #9F662D; } .tab__title { font-family: 'Circular', Calibri, sans-serif; color: #1D1D1B; } .tab__icon svg #Fill { fill: transparent; transition: fill 250ms; } .tab:hover svg #Fill { fill: #A46429; } .tab--active .tab__title, .tab:hover .tab__title { color: #9F662D; } .tab--active .tab__icon svg #Fill { fill: #9F662D; } @media screen and (max-width: 1024px) { .tab { border-bottom: 1px solid rgba(29, 29, 27, 0.07); } .tab--active { border-bottom: 1px solid rgba(29, 29, 27, 0.2) !important; } } .teaser-wettbewerb { } .teaser-wettbewerb .teaser--text { inset: 0; display: flex; flex-direction: column; } .teaser-wettbewerb .teaser--link ~ .teaser--text { padding: 40px; } .teaser-wettbewerb .button { text-align: center; } .teaser-wettbewerb h3 { margin-bottom: 12px; } .teaser--text-stretch { flex: 1; } .teaser--community { background-color: #fff; position: absolute; top: 24px; right: 0; z-index: 1; padding: 6px 16px; font-family: 'Public'; font-size: 14px; line-height: 28px; text-transform: uppercase; letter-spacing: 2.33px; color: #9f662d; border-radius: 8px 0 0 8px; } .wettbewerb_banner_cnt { position: relative; } .wettbewerb_banner_win { position: absolute; top: -25px; left: -14px; } .wettbewerb_banner_win img { display: block; width: 127px; height: 126px; } .wettbewerb_banner_win div { display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; font-family: 'Public'; font-size: 40px; line-height: 52px; text-transform: uppercase; letter-spacing: 4px; color: #fff; transform: rotateZ(2deg); } .wettbewerb_banner { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px 0 rgba(61,30,0,0.15); } .wettbewerb_banner_img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .wettbewerb_banner_content { display: flex; flex-direction: column; padding: 40px; } .wettbewerb_banner_preline { font-family: 'Public'; font-size: 16px; line-height: 28px; letter-spacing: 2.67px; color: #9f662d; } .wettbewerb_banner h3 { margin-top: 8px; margin-bottom: 12px; } .wettbewerb_banner_text { font-size: 18px; line-height: 28px; } .wettbewerb_banner_content_stretch { flex: 1; } .wettbewerb_banner .button { text-align: center; margin-top: 35px; } .teaser-gewinnerrezept { display: grid; gap: 24px; } .teaser-gewinnerrezept-text-cnt h2 { margin-bottom: 16px; } .teaser-wernli { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; background-color: #fff; box-shadow: 0 8px 24px 0 rgba(61,30,0,0.15); border-radius: 8px; } .teaser-wernli img { display: block; width: 100%; } .teaser-wernli-text-cnt h3 { margin-bottom: 12px; } .teaser-wernli .button { margin-top: 40px; } @media screen and (min-width: 1000px) { .wettbewerb_banner_win { position: absolute; top: -28px; left: -28px; } .wettbewerb_banner_win img { width: 150px; height: 149px; } .wettbewerb_banner { display: grid; grid-template-columns: 2fr 1fr; } .wettbewerb_banner_img { aspect-ratio: unset; height: 500px; } .teaser-gewinnerrezept { grid-template-columns: 1fr 2fr; } .teaser-wernli { flex-direction: row; gap: 60; padding: 44px 88px; } } .formular-micropage-holder form { color: rgba(29, 29, 27, 0.64); } .formular-micropage-holder form a { color: #9F662D; border-color: #9F662D; } .yikes-easy-mailchimp-contact_form_7-checkbox label, .wpcf7-acceptance > span label, .wpcf7-checkbox > span label, .mc4wp-checkbox label { color: #1d1d1b; } .yikes-easy-mailchimp-contact_form_7-checkbox input[type="checkbox"], .wpcf7-acceptance input[type="checkbox"], .wpcf7-checkbox input[type="checkbox"], .mc4wp-checkbox input[type="checkbox"] { --checkbox-width: 24px; --checkbox-bg: #FFFFFF; --checkbox-radius: 8px; --checkbox-border-color: #9F662D; --checkbox-hover-border-color: #50351A; --checkbox-checked-bg: #9F662D; } .formular-micropage-holder .wpcf7-checkbox .wpcf7-list-item-label:before { border-color: #9f662d; } .mc4wp-checkbox input[type="checkbox"] { /* margin-top: -4px; */ } .product-now { background-color: #fbf9f4; } .product-now__time__icon #Clock, .product-now__time__icon #Hour, .product-now__time__icon #Minute { fill: #9f662d; } .social--link svg [stroke="#9F662D"], .social--link svg [fill="#9F662D"] { transition: .2s; } .social--link:hover svg [stroke="#9F662D"] { stroke: #50351A; } .social--link:hover svg [fill="#9F662D"] { fill: #50351A; } .tabs__navigation__arrow svg > g > #Stroke-3 { stroke: #9F662D; } @media screen and (max-width: 768px) { .tabs-nav--active { background-color: #FBF9F4; } } .tabs__navigation__arrow svg > g > #Stroke-3 { stroke: #9F662D; } @media screen and (max-width: 768px) { .tabs-nav--active { background-color: #FBF9F4; } } .header { z-index: 10; position: fixed; top: 0; left: 0; width: 100%; width: 100vw; } .header__notification { width: 100%; padding: 20px; background-color: #9F662D; color: #fff; font-weight: 700; font-size: 16px; text-align: center; line-height: 1.3em; position: relative; z-index: 100; } .header__content { width: 100%; position: relative; } .header__logo { z-index: 101; position: absolute; top: 0; left: 0; width: 25%; height: 0; padding-top: 9.997917%; transition: width 500ms ease; max-width: 500px; } .header__logo__background { pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-top: 36.99791667%; background-image: url('../../img/textures/paper-texture.jpg'); background-repeat: repeat; background-size: 450px 246px; clip-path: polygon(0 0, 0 100%, 100% 0); } .header--christmas .header__logo__background { background-image: url('../../img/textures/gingerbread-texture.png'); background-size: 175px 175px; } .header__logo__rope { pointer-events: none; position: absolute; width: 110%; top: 38%; left: -4%; transform: rotate(-20deg); height: 25px; background-image: url(../../img/textures/rope-texture.png); background-size: auto 100%; background-position: left center; background-repeat: repeat-x; transition: top 500ms ease; } .header--christmas .header__logo__rope { width: 120%; top: 3vw; left: -5%; height: 45px; background-image: url(../../img/textures/ribbon-texture.png); background-position: center center; transform: rotate(160deg); transition: top 250ms, height 250ms; } .header__logo__etiquette { position: absolute; top: 16%; left: 14%; height: 0; width: 50%; padding-top: 70%; will-change: transform; transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1); } .header--christmas .header__logo__etiquette { top: 20%; } @keyframes swingToSmall { 0% { transform: rotate(-13deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-13deg); } } @keyframes swingToLarge { 0% { transform: rotate(-13deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-13deg); } } .header__logo__etiquette__image { position: absolute; top: 0; height: 0; width: 100%; height: 100%; background-size: contain; background-position: center top; background-repeat: no-repeat; animation-duration: 1.5s; animation-name: swingToLarge; animation-timing-function: ease; transform-origin: center 22.972972973%; transform: rotate(-13deg) scale(1); } .header__logo__bow { pointer-events: none; position: absolute; top: 26%; left: 9%; background-image: url(../../img/iconbase/masche.png); background-size: contain; background-position: center top; background-repeat: no-repeat; width: 50%; padding-top: 24%; transform: rotate(-20deg); filter: drop-shadow(-5px 2px 2px rgba(29, 29, 28, 0.2)); transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1), top 500ms, left 500ms; } .header--christmas .header__logo__bow { background-image: url(../../img/images/christmas_ribbon.png); height: 0; transform: rotate(0deg); padding-top: 40%; width: 50%; } .header__logo__frame { position: fixed; top: 0; left: 0; width: 100%; padding-top: 9.5%; pointer-events: none; } .header__logo__frame__left { position: absolute; left: 0; width: 12%; top: 0; height: 108%; background-image: url(../../img/textures/icing-texture_left.svg); background-repeat: no-repeat; background-size: auto 100%; } .header__logo__frame__right { position: absolute; right: 0; background-image: url(../../img/textures/icing-texture_right.svg); background-repeat: no-repeat; background-size: auto 100%; width: 10%; top: 0; height: 108%; } .header__logo__frame__center { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80.1%; height: 30%; background-image: url(../../img/textures/icing-texture_repeat.svg); background-repeat: repeat-x; background-size: 30% auto; } .header--scroll .header__logo__etiquette { transform: scale(0.75) translateY(-10%); } .header--scroll.header--christmas .header__logo__etiquette { transform: scale(0.75) translateY(-8%); } .header--scroll .header__logo__bow { transform: rotate(-20deg) scale(1); } .header--scroll.header--christmas .header__logo__bow { transform: scale(1) rotate(0deg); } .header--scroll.header--christmas .header__logo__image { transform: scale(1.15); top: 0; left: 0; } .header--scroll .header__logo__etiquette__image { transform: rotate(-13deg) scale(1); animation-duration: 1.5s; animation-name: swingToSmall; animation-timing-function: ease; } .header--hidden { z-index: 0; } @media screen and (min-width: 2000px) { .header__logo__rope { top: 76px; left: -20px; } .header--christmas .header__logo__rope { top: 60px; left: -15px; } .header__logo__etiquette { top: 32px; left: 70px; } .header--christmas .header__logo__etiquette { top: 40px; } .header__logo__bow { top: 52px; left: 45px; } .header--christmas .header__logo__bow { top: 36px; left: 65px; } } @media screen and (min-width: 2000px) { .header__logo__rope { top: 76px; left: -20px; } .header--christmas .header__logo__rope { top: 60px; left: -15px; } .header__logo__etiquette { top: 32px; left: 70px; } .header--christmas .header__logo__etiquette { top: 40px; } .header__logo__bow { top: 52px; left: 45px; } .header--christmas .header__logo__bow { top: 36px; left: 65px; } } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1700px) { .header__logo__rope { top: 36%; } .header__logo__etiquette { top: 18%; } } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1450px) { .header__logo__bow { top: 27%; } } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { .header__logo { width: 30%; } .header__logo__rope { top: 45%; height: 20px; } .header__logo__bow { top: 31%; } } @media screen and (max-width: 1024px) { .header__logo__rope { top: 42%; } .header--christmas .header__logo__rope { height: 35px; } .header__logo__etiquette { top: 24%; left: 10%; } .header--christmas .header__logo__etiquette { top: 24%; } .header__logo__bow { top: 37%; left: 4%; } .header--christmas .header__logo__bow { top: 27%; left: 8%; } } @media screen and (max-width: 925px) { .header--scroll .header__logo__etiquette, .header--scroll.header--christmas .header__logo__etiquette { transform: scale(1) translateY(0); } .header--christmas .header__logo__rope { left: -5%; } } @media screen and (max-width: 768px) { /* .header { position: static; } */ .header__content:before { content: ''; display: block; position: absolute; z-index: -1; left: 0; width: 100%; height: 60px; transition: opacity 0.2s; border-bottom: 1px solid rgba(29,29,27,0.16); opacity: 0; background: #fff; } .header--scroll .header__content:before { opacity: 1; } /* .header__logo { position: fixed; } */ .header__logo { width: 55%; } .header--scroll .header__logo { width: 45%; } .header__logo__frame { padding-top: 22%; } .header__logo__frame__right { width: 24%; height: 108%; } .header__logo__frame__left { width: 24%; height: 108%; } .header__logo__frame__center { width: 53.1%; background-size: 100% auto; } .header__logo__rope { top: 85%; } .header--christmas .header__logo__rope { top: 6vw; } .header--scroll .header__logo__rope { top: 65%; } .header--scroll.header--christmas .header__logo__rope { top: 45%; height: 35px; } .header__logo__etiquette { width: 35%; padding-top: 49%; top: 60%; left: 20%; } .header--christmas .header__logo__etiquette { top: 60%; } .header__logo__bow { top: 60%; left: 8%; } .header--scroll .header__logo__bow { top: 48%; left: 8%; } .header--christmas .header__logo__bow { top: 35%; left: 12%; } .header--scroll.header--christmas .header__logo__bow { top: 30%; } } @media screen and (max-width: 660px) { .header__logo__rope { top: 80%; } .header--christmas .header__logo__rope, .header--scroll.header--christmas .header__logo__rope { height: 30px; } .header--scroll .header__logo__etiquette { transform: scale(1.25) translateY(4%); } } @media screen and (max-width: 560px) { .header__logo__rope { top: 75%; } .header--scroll .header__logo__rope { top: 60%; } .header--scroll .header__logo__etiquette { transform: scale(1.25) translateY(4%); } } @media screen and (max-width: 480px) { .header__logo__rope { top: 75%; } .header--christmas .header__logo__rope { top: 60%; height: 25px; } .header--scroll .header__logo__rope { top: 58%; } .header--scroll.header--christmas .header__logo__rope { top: 45%; height: 25px; } } @media screen and (max-width: 400px) { .header--scroll .header__logo__etiquette { transform: scale(1.25) translateY(3%); } .header__logo__rope { top: 78%; height: 15px; } .header--scroll .header__logo__rope { top: 60%; } .header__logo__etiquette { width: 50%; padding-top: 70%; top: 45%; left: 15%; } .header--christmas .header__logo__etiquette { top: 40%; } } @media screen and (max-width: 330px) { .header__logo__rope { top: 76%; } .header--scroll .header__logo__rope { top: 58%; } .header--christmas .header__logo__rope { height: 20px; } .header--scroll.header--christmas .header__logo__rope { height: 20px; } } .main-footer { position: relative; padding: 200px 32px 52px; overflow: hidden; width: 100%; /*background-color: red;*/ } .main-footer__background { z-index: -2; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: transparent; background-image: url('../../img/textures/paper-texture.jpg'); background-repeat: repeat; background-position: bottom; background-size: 450px 246px; } .main-footer__background-top { z-index: -2; position: absolute; bottom: calc(50% - 1px); left: 0; height: 0; width: 100%; /*padding-top: 15.5%;*/ padding-top: 15.5vw; background-color: transparent; background-image: url('../../img/textures/paper-texture.jpg'); background-repeat: repeat; background-position: bottom; background-size: 450px 246px; clip-path: polygon(100% 0%, -1% 100%, 100% 100%); } .main-footer__background-rope { z-index: -1; position: absolute; left: -15px; bottom: calc(50% + 7.55vw); height: 35px; width: 110%; background-color: transparent; background-image: url(../../img/textures/rope-texture.png); background-size: auto 100%; background-position: left center; background-repeat: repeat-x; transform: rotate(-8.8deg); } .main-footer__inner { padding: 42px; border-radius: 7px; } .main-footer__inner__title { margin-bottom: 24px; } .main-footer__inner__divider { margin: 48px 0 32px; } .main-footer__inner__column .button--style-transparent { display: block; padding: 10px 0; } .main-footer__inner__column .button--style-transparent svg { height: 20px; } .main-footer__sub__grid { display: flex; align-items: center; } .main-footer__sub__grid__column { flex-basis: 33.33333%; } .main-footer__sub__links__link { position: relative; display: inline-block; margin-right: 32px; font-family: 'Circular', Calibri, sans-serif; color: rgba(29, 29, 27, 0.48); font-size: 14px; text-decoration: none; } .main-footer__sub__links__link:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: -5px; left: 0; background-color: rgba(29, 29, 27, 0.48);; transform-origin: bottom right; transition: transform 0.25s ease-out; } .main-footer__sub__links__link:hover:after { transform: scaleX(1); transform-origin: bottom left; } .main-footer__sub__social-media { display: flex; justify-content: center; align-items: center; margin: 0 auto; } .main-footer__sub__social-media__link { padding: 10px 20px; } .main-footer__sub__social-media__link__icon svg > g > g { fill: #1D1D1B; transition: fill 250ms ease; } .main-footer__sub__social-media__link:hover .main-footer__sub__social-media__link__icon svg > g > g { fill: #9F662D; } .main-footer__sub__lang { text-align: right; } /* contact overlay */ .contact__inner { padding: 32px 100px 64px; } .contact__title { margin-bottom: 12px; text-align: center; } .contact__description { text-align: center; font-size: 20px; } .contact__form { position: relative; } /* contact form specifics */ .contact__form .form__wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 24px; } .contact__form .form__wrapper .input--span-full { grid-column: 1 / 3; } .contact__form input[type="number"] { -moz-appearance: textfield; } .contact__form .input__label-suffix { background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; transform: translateY(-50%); right: 15px; font-size: 11px; border-radius: 9999px; padding: 5px 14.5px; border: 1px solid rgba(29, 29, 27, 0.16); font-style: italic; color: rgba(29, 29, 27, 0.4); } .contact__form div.form__wrapper__firstname{ height: 0; overflow: hidden; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* contact form specifics */ .contact__form__icons__icon { position: absolute; } .contact__form__icons__icon:nth-of-type(1) { left: -80px; top: 40%; } .contact__form__icons__icon:nth-of-type(2) { right: -64px; top: -42px; transform: rotate(35deg); } .contact__icon { text-align: center; } .contact__button { text-align: center; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { .main-footer__background-rope { bottom: calc(60% + 7.25vw); } .main-footer__background-top { bottom: calc(60% - 1px); } .main-footer__background { height: 60%; } } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .main-footer { padding: 150px 32px 52px; } .main-footer__background-rope { bottom: calc(80% + 10vw); left: -15px; width: 105%; transform: rotate(-12.5deg); } .main-footer__background-top { bottom: calc(80% - 1px); padding-top: 23vw; } .main-footer__background { height: 80%; } .grid--columns-4 > div { width: calc(50% - 24px); margin-bottom: 32px; } } @media screen and (max-width: 768px) { .main-footer__background-rope { bottom: calc(78% + 9.5vw); } .main-footer__background-top { bottom: calc(78% - 1px); } .main-footer__background { height: 78%; } .grid--columns-4 > div { width: calc(50% - 12px); margin-bottom: 32px; } .main-footer__inner__title { margin-bottom: 12px; } .main-footer__inner__column .button--style-transparent { padding: 6px 0; font-size: 16px; line-height: 1.75em; letter-spacing: 0.01em; } .main-footer__inner__divider { margin: 24px 0; } .main-footer__sub__grid { flex-direction: column; } .main-footer__sub__grid__column:last-of-type { order: 1; margin-bottom: 12px; } .main-footer__sub__grid__column:first-of-type { order: 2; } .main-footer__sub__lang { display: none; } .main-footer__sub__links { display: flex; justify-content: space-between; } .main-footer__sub__links__link { margin-right: 12px; } .main-footer__sub__links__link:last-of-type { margin-right: 0; } .contact__form .form__wrapper { grid-template-columns: repeat(1, minmax(0, 1fr)); } .contact__form .form__wrapper .input--span-full { grid-column: unset; } .contact__form .input__label-suffix { display: none; } } @media screen and (max-width: 660px) { .main-footer__background-rope { bottom: calc(82% + 9vw); } .main-footer__background-top { bottom: calc(82% - 1px); } .main-footer__background { height: 82%; } .grid--columns-4 > div { width: 100%; } .contact__inner { padding: 32px 0 32px; } .contact__form__icons { display: none; } } @media screen and (max-width: 480px) { .main-footer__background-rope { bottom: calc(85% + 8vw); } .main-footer__background-top { bottom: calc(85% - 1px); } .main-footer__background { height: 85%; } } @media screen and (max-width: 400px) { .main-footer__background-rope { bottom: calc(85% + 7vw); left: -10px; } } @media screen and (max-width: 330px) { .main-footer__background-rope { bottom: calc(86% + 7vw); } .main-footer__background-top { bottom: calc(86% - 1px); } .main-footer__background { height: 86%; } .main-footer__inner__column .input input { font-size: 14px; } .main-footer__inner__column .button--style-transparent, .main-footer__inner__column .button--style-filled { font-size: 14px; } } .main-navigation { width: 100%; transition: background 250ms, box-shadow 250ms; } .header--scroll .main-navigation { background-color: #fff; } .main-navigation::after { opacity: 0; pointer-events: none; content: ''; position: fixed; width: 100%; height: 100%; top: 0; z-index: -4; background-color: rgba(29,29,27,0.48); transition: opacity 600ms cubic-bezier(0.33, 1, 0.68, 1) 300ms; } .main-navigation.nav--active::after { opacity: 1; pointer-events: all; } .main-navigation__mobile-toggler { display: none; } .main-navigation__background { z-index: -3; position: absolute; top: 0; left: 0; width: 100%; height: 0; transform: translateY(-100%); background-color: #fff; transition: transform 800ms cubic-bezier(0.37, 0, 0.63, 1) 100ms, height 350ms ease; } .main-navigation__background.background--active { transform: translateY(0); transition: transform 800ms cubic-bezier(0.37, 0, 0.63, 1) 300ms, height 350ms ease; } .main-navigation__lang { display: none; padding-top: 32px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { .main-navigation { z-index: 97; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; background-color: #FBF9F4; transition: opacity 600ms cubic-bezier(0.65, 0, 0.35, 1); } .mobile--active { opacity: 1; pointer-events: all; } .header--scroll .main-navigation { background-color: #FBF9F4; } .main-navigation::after { content: none; } .main-navigation__mobile-toggler { z-index: 98; opacity: 1; /* position: fixed; */ position: absolute; top: 40px; right: 32px; display: flex; align-items: center; transition: opacity 50ms, top 250ms; } .header--christmas .main-navigation__mobile-toggler { top: 50px; right: 50px; } .header--scroll .main-navigation__mobile-toggler { top: 18px; } .header--scroll.header--christmas .main-navigation__mobile-toggler { top: 50px; right: 50px; } /* .main-navigation__mobile-toggler::before { opacity: 0; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #fff; border-bottom: 1px solid rgba(29,29,27,0.16); transition: opacity 250ms; } .header--scroll.header--christmas .main-navigation__mobile-toggler::before { height: 90px; } .header--scroll .main-navigation__mobile-toggler::before { opacity: 1; } .toggler--active.main-navigation__mobile-toggler::before { opacity: 0; } */ .main-navigation__mobile-toggler__label { z-index: 1; font-family: 'Circular', Calibri, sans-serif; font-size: 18px; font-weight: 500; color: black; line-height: 1.35em; } .main-navigation__mobile-toggler__label::before { content:attr(data-open); } .toggler--active .main-navigation__mobile-toggler__label::before { content:attr(data-close); } .main-navigation__mobile-toggler__icon { position: relative; height: 16px; width: 16px; margin-left: 8px; } .main-navigation__mobile-toggler__hamburger { position: absolute; height: 100%; width: 100%; } .main-navigation__mobile-toggler__icon__hamburger__line, .main-navigation__mobile-toggler__icon__cross__line { display: block; background-color: #1d1d1b; border-radius: 2px; transition: width 250ms, height 250ms; } .main-navigation__mobile-toggler__icon__hamburger__line { position: relative; width: 18px; height: 2px; top: 0; right: 0; margin: 0 0 5px; } .main-navigation__mobile-toggler__icon__hamburger__line:last-of-type { margin-bottom: 0; } .main-navigation__mobile-toggler__icon__hamburger__line:nth-child(1) { transition-delay: 500ms; } .main-navigation__mobile-toggler__icon__hamburger__line:nth-child(2) { left: 6px; width: 12px; transition-delay: 625ms; } .main-navigation__mobile-toggler__icon__hamburger__line:nth-child(3) { transition-delay: 750ms; } .main-navigation__mobile-toggler__icon__cross { position: absolute; top: 0; height: 100%; width: 100%; transform: rotate(45deg); } .main-navigation__mobile-toggler__icon__cross__line:nth-child(1) { position: absolute; height: 0; width: 2px; top: -3px; left: 9px; transition-delay: 0ms; } .main-navigation__mobile-toggler__icon__cross__line:nth-child(2) { position: absolute; height: 2px; width: 0; top: 5px; left: 1px; transition-delay: 150ms; } .header--light .main-navigation__mobile-toggler__icon__hamburger__line, .header--light .main-navigation__mobile-toggler__icon__cross__line, .header--christmas .main-navigation__mobile-toggler__icon__hamburger__line, .header--christmas .main-navigation__mobile-toggler__icon__cross__line { background-color: #fff; } .header--light .main-navigation__mobile-toggler__label, .header--christmas .main-navigation__mobile-toggler__label { color: #fff; } .header--scroll .main-navigation__mobile-toggler__icon__hamburger__line, .header--scroll .main-navigation__mobile-toggler__icon__cross__line { background-color: #1D1D1B; } .header--scroll .main-navigation__mobile-toggler__label { color: #1D1D1B; } .toggler--active .main-navigation__mobile-toggler__icon__hamburger__line { width: 0; } .toggler--active .main-navigation__mobile-toggler__icon__hamburger__line { width: 0; } .toggler--active .main-navigation__mobile-toggler__icon__hamburger__line, .toggler--active .main-navigation__mobile-toggler__icon__cross__line { background-color: #1D1D1B; } .toggler--active .main-navigation__mobile-toggler__icon__hamburger__line:nth-child(2) { transition-delay: 125ms; } .toggler--active .main-navigation__mobile-toggler__icon__hamburger__line:nth-child(3) { transition-delay: 250ms; } .toggler--active .main-navigation__mobile-toggler__icon__cross__line:nth-child(1) { height: 18px; transition-delay: 500ms; } .toggler--active .main-navigation__mobile-toggler__icon__cross__line:nth-child(2) { width: 18px; transition-delay: 650ms; } .toggler--active .main-navigation__mobile-toggler__label { color: #1D1D1B; } .toggler--active.main-navigation__mobile-toggler { top: 40px; } .header--christmas .toggler--active.main-navigation__mobile-toggler { top: 40px; } .toggler--hidden { opacity: 0; pointer-events: none; } .main-navigation__lang { display: list-item; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { .header--christmas .main-navigation__mobile-toggler { top: 40px; right: 32px; } .header--scroll.header--christmas .main-navigation__mobile-toggler { top: 25px; right: 32px; } .header--scroll.header--christmas .toggler--active.main-navigation__mobile-toggler { top: 40px; } .header--scroll.header--christmas .main-navigation__mobile-toggler::before { height: 62px; } } @media screen and (max-width: 330px) { } .search__icon__text { font-family: 'Circular', Calibri, sans-serif; color: #9f662d; } .nav--active .search__icon:hover svg > g > g, .header--scroll .search__icon:hover svg > g > g { stroke: #9f662d; } .search__inner__search-bar { background-color: #fff; } .search__inner__search-bar__input { color: #1d1d1b; caret-color: #1d1d1b; } @media screen and (max-width: 768px) { .search__icon svg > g > g { stroke: #9f662d; } .search__inner { background-color: #FBF9F4; box-shadow: 0 8px 24px 0 rgb(61 30 0 / 15%); } .search__close { border-left: 1px solid rgba(29,29,27,0.16); } } .sub-footer { position: sticky; bottom: 0; left: 0; width: 100%; padding: 64px 0; } .sub-footer__banner { position: relative; } .sub-footer__banner__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; padding: 10px 24px; background-color: #fff; border: 1px solid rgba(29,29,27,0.16); border-radius: 30px; } .sub-footer__banner__content__text { font-family: 'Circular', Calibri, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.25em; color: #2D376B; white-space: nowrap; } .sub-footer__banner__content__icon-wrapper { margin: 0 10px; padding: 2px; border: 2px solid #2D376B; border-radius: 50%; } .sub-footer__banner__content__icon-wrapper__icon { height: 17px; width: 17px; } .sub-footer__banner__line { width: 100%; height: 1px; background-color: rgba(29,29,27,0.16); } .sub-footer__grid { display: flex; margin-top: 72px; padding: 42px; } .sub-footer__about { display: flex; flex-basis: 66.6666%; padding-right: 50px; border-right: 1px solid rgba(29,29,27,0.16); } .sub-footer__about__image { flex-basis: 25%; } .sub-footer__about__description { flex-basis: 75%; padding-left: 24px; } .sub-footer__about__description__links { display: flex; flex-wrap: wrap; } .sub-footer__about__description__link { display: block; flex-basis: 50%; padding: 10px 0; } .sub-footer__about__description__link svg [stroke="#1D1D1B"] { stroke: #2D376B !important; } .sub-footer__about__description__title__image { display: none; } .sub-footer__about__description__title__text { color: #2D376B; margin-bottom: 24px; } .sub-footer__about__description__text { margin-bottom: 32px; font-family: 'Circular', Calibri, sans-serif; font-size: 18px; letter-spacing: 0.01em; line-height: 1.5em; color: rgba(45,55,107,0.8); } .sub-footer__family { flex-basis: 33.33333%; padding-left: 42px; } .sub-footer__family__title { color: #2D376B; margin-bottom: 24px; } .sub-footer__family__grid { display: flex; flex-wrap: wrap; margin: 0 -6px -12px; } .sub-footer__family__grid__column { width: 50%; padding: 0 6px 12px; } .sub-footer__family__brand { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 16px; border-radius: 4px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.24); } .sub-footer__family__brand img { min-width: 25%; max-height: 90px; } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { .sub-footer { position: static; } .sub-footer__grid { display: block; margin-top: 24px; padding: 32px; } .sub-footer__about { display: block; padding-right: 0; padding-bottom: 50px; border-right: none; border-bottom: 1px solid rgba(29,29,27,0.16); } .sub-footer__about__description { padding-left: 0; } .sub-footer__about__image { display: none; } .sub-footer__about__description__title { display: flex; align-items: center; margin-bottom: 24px; } .sub-footer__about__description__title__image { display: block; height: 52px; width: auto; } .sub-footer__about__description__title__text { margin-left: 24px; margin-bottom: 0; font-size: 20px; letter-spacing: 0.33px; line-height: 24px; } .sub-footer__about__description__text { font-size: 16px; letter-spacing: 0.16px; line-height: 24px; } .sub-footer__family { padding-left: 0; padding-top: 50px; } } @media screen and (max-width: 768px) { .sub-footer__about__description__link { padding: 6px 0; font-size: 16px; line-height: 1.75em; letter-spacing: 0.01em; } } @media screen and (max-width: 660px) { } @media screen and (max-width: 480px) { .sub-footer__about__description__link { flex-basis: 100%; } } @media screen and (max-width: 330px) { }