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;
font-family: 'CircularXX';
}
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;
}
a {
color: inherit;
}
@font-face {
font-family: 'Akko Rounded W01';
src: url('../../assets/fonts/') format('woff2'),
url('../../assets/fonts/AkkoRoundedW01-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Akko Rounded W01';
src: url('../../assets/fonts/AkkoRoundedW01-Medium.woff2') format('woff2'),
url('../../assets/fonts/AkkoRoundedW01-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Light.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Thin.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Regular.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Black.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX ExtraBlack';
src: url('../../assets/fonts/CircularXX-ExtraBlack.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-ExtraBlack.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Book.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Book.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Medium.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Bold.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* italic */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-MediumItalic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
} */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-LightItalic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
} */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-BoldItalic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
} */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-BookItalic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-BookItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
} */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-ThinItalic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-ThinItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
font-display: swap;
} */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-BlackItalic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
} */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-ExtraBlackItalic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-ExtraBlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
} */
/* @font-face {
font-family: 'CircularXX';
src: url('../../assets/fonts/CircularXX-Italic.woff2') format('woff2'),
url('../../assets/fonts/CircularXX-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
} */
section {
padding-left: 32px;
padding-right: 32px;
}
section.fullwidth {
padding-left: 0;
padding-right: 0;
}
.styleguide-section .container > h3 {
display: flex;
margin-top: 80px;
margin-bottom: 32px;
}
.styleguide-section .newsletter-holder {
margin-top: 64px;
}
/*section color*/
.section-bgc-style--dark {
background: var(--mediumgrey);
}
/* Section Spacing Top */
.section-space-top--ultrasmall {
padding-top: 48px;
}
.section-space-top--supersmall {
padding-top: 64px;
}
.section-space-top--small {
padding-top: 80px;
}
.section-space-top--medium {
padding-top: 120px;
}
.section-space-top--large {
padding-top: 240px;
}
/* Section Spacing Bottom */
.section-space-bottom--ultrasmall {
padding-bottom: 48px;
}
.section-space-bottom--supersmall {
padding-bottom: 64px;
}
.section-space-bottom--small {
padding-bottom: 80px;
}
.section-space-bottom--medium {
padding-bottom: 120px;
}
.section-space-bottom--large {
padding-bottom: 240px;
}
@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) {
/* Section Spacing Top */
.section-space-top--supersmall {
padding-top: 56px;
}
.section-space-top--small {
padding-top: 75px;
}
.section-space-top--medium {
padding-top: 100px;
}
.section-space-top--large {
padding-top: 232px;
}
/* Section Spacing Bottom */
.section-space-bottom--supersmall {
padding-bottom: 56px;
}
.section-space-bottom--small {
padding-bottom: 75px;
}
.section-space-bottom--medium {
padding-bottom: 100px;
}
.section-space-bottom--large {
padding-bottom: 232px;
}
}
@media screen and (max-width: 768px) {
/* Section Spacing Top */
.section-space-top--supersmall {
padding-top: 48px;
}
.section-space-top--small {
padding-top: 70px;
}
.section-space-top--medium {
padding-top: 80px;
}
.section-space-top--large {
padding-top: 224px;
}
/* Section Spacing Bottom */
.section-space-bottom--supersmall {
padding-bottom: 48px;
}
.section-space-bottom--small {
padding-bottom: 70px;
}
.section-space-bottom--medium {
padding-bottom: 80px;
}
.section-space-bottom--large {
padding-bottom: 224px;
}
}
@media screen and (max-width: 660px) {
section {
padding-left: 24px;
padding-right: 24px;
}
/* Section Spacing Top */
.section-space-top--ultrasmall {
padding-top: 32px;
}
.section-space-top--supersmall {
padding-top: 40px;
}
.section-space-top--small {
padding-top: 64px;
}
.section-space-top--medium {
padding-top: 64px
}
.section-space-top--large {
padding-top: 216px;
}
/* Section Spacing Bottom */
.section-space-bottom--ultrasmall {
padding-bottom: 32px;
}
.section-space-bottom--supersmall {
padding-bottom: 40px;
}
.section-space-bottom--small {
padding-bottom: 64px;
}
.section-space-bottom--medium {
padding-bottom: 64px
}
.section-space-bottom--large {
padding-bottom: 216px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
*,
*:before,
*:after {
box-sizing: border-box;
font-family: 'CircularXX';
}
html {
overflow-x: hidden;
width: 100vw;
hyphenate-character: "-";
-webkit-hyphenate-character: "-";
}
body {
width: 100vw;
position: relative;
}
.clear {
clear: both;
}
.bg-watermark-cnt {
position: absolute;
inset: 0;
z-index: -99999;
width: 100%;
height: 100%;
}
.bg-watermark {
margin: 0 auto;
height: 100%;
max-width: 1500px;
background-image: url('../../assets/img/gb_bg.svg'), url('../../assets/img/gb_bg.svg');
background-repeat: repeat-y;
background-position: left 650px, right 0;
background-size: 270px 1300px;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[data-numbering] {
display: flex;
align-items: center;
}
[data-numbering]:before {
content: attr(data-numbering);
display: block;
background: var(--black);
height: 56px;
width: 56px;
border-radius: 50%;
font-weight: bold;
font-size: 24px;
color: var(--white);
text-align: center;
line-height: 56px;
flex-shrink: 0;
margin-right: 24px;
}
h1 {
font-family: 'Akko Rounded W01';
font-weight: 500;
font-size: 80px;
color: var(--white);
text-shadow: 0 5px 10px rgba(0,0,0,0.20);
line-height: 80px;
}
h2 {
font-family: 'Akko Rounded W01';
font-weight: 500;
font-size: 48px;
line-height: 56px;
}
h3 {
font-family: 'Akko Rounded W01';
font-size: 32px;
line-height: 1.3;
}
h4 {
font-size: 28px;
line-height: 36px;
}
h5 {
font-weight: bold;
font-size: 24px;
line-height: 32px;
}
h6 {
font-size: 15px;
line-height: 16px;
}
h6.small {
font-weight: bold;
font-size: 14px;
letter-spacing: 1.4px;
line-height: 16px;
}
p.big {
font-size: 20px;
letter-spacing: 0.44px;
line-height: 32px;
color: var(--blackopacity);
}
.faq-acc-sub ul li,
.faq-acc-sub ol li,
.description ul li,
.description ol li,
p {
font-size: 18px;
letter-spacing: 0.4px;
line-height: 28px;
color: var(--blackopacity);
}
.faq-acc-sub ul,
.description ul {
list-style-type: disc;
padding-left: 24px;
margin-top: 16px;
}
.faq-acc-sub ol,
.description ol {
list-style-type: decimal;
padding-left: 32px;
margin-top: 16px;
}
.faq-acc-sub ul:first-child,
.faq-acc-sub ol:first-child,
.description ul:first-child,
.description ol:first-child {
margin-top: 0;
}
p strong {
font-weight: bold;
}
@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) {
h1.big {
font-size: 68.00px;
line-height: 68.00px;
}
h1,h2 {
font-size: 42.67px;
line-height: 50.67px;
}
h3 {
font-size: 29.33px;
line-height: 36.00px;
}
h4 {
font-size:25.33px;
line-height:33.33px;
}
h5 {
font-size: 22.67px;
line-height: 30.67px;
}
p.big {
font-size:19.33px;
letter-spacing:0.41px;
line-height:30.67px;
}
p {
font-size: 17.33px;
letter-spacing: 0.39px;
line-height: 26.67px;
}
}
@media screen and (max-width: 768px) {
h1.big {
font-size: 56.00px;
line-height: 56.00px;
}
h1,h2 {
font-size: 37.33px;
line-height: 45.33px;
}
h3 {
font-size: 26.67px;
line-height: 32.00px;
}
h4 {
font-size:22.67px;
line-height:30.67px;
}
h5 {
font-size: 21.33px;
line-height: 29.33px;
}
p.big {
font-size:18.67px;
letter-spacing:0.39px;
line-height:29.33px;
}
p {
font-size: 16.67px;
letter-spacing: 0.37px;
line-height: 25.33px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
h1.big {
font-size: 44.00px;
line-height: 44.00px;
}
h1,h2 {
font-size: 32.00px;
line-height:40.00px;
}
h3 {
font-size: 24.00px;
letter-spacing: 0px;
}
h4 {
font-size:20.00px;
line-height:28.00px;
}
h5 {
font-size: 20px;
line-height: 28px;
}
p.big {
font-size:18.00px;
letter-spacing:0.36px;
line-height:28.00px;
}
p {
font-size: 16px;
letter-spacing: 0.36px;
line-height: 24px;
}
}
@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) {
}
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.container--size-xxs {
max-width: 736px;
}
.container--size-xs {
max-width: 748px;
}
.container--size-s {
max-width: 784px;
}
.container--size-ml {
max-width: 792px;
}
.container--size-m {
max-width: 1200px;
}
.container--size-l {
max-width: 1440px;
}
@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) {
}
.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}
.noui_slider_cnt .noUi-connect {
background-color: #f7323e;
}
.noui_slider_cnt .noUi-handle {
border: none;
box-shadow: none;
width: 11px;
height: 11px;
background-color: #f7323e;
border-radius: 100px;
right: 0px;
top: -5px;
}
.noui_slider_cnt .noUi-handle::before,
.noui_slider_cnt .noUi-handle::after {
content: none;
}
.noui_slider_cnt.noUi-target,
.noui_slider_cnt.noUi-horizontal {
background-color: #d6d6d6;
height: 1px;
border: none;
}
.noui_slider_cnt .noUi-touch-area {
transform: scale(3);
}
.filter-trigger-options .noui_slider_cnt ~ input[type="range"] {
display: block;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.img-holder {
overflow: hidden;
position: relative;
width: 100%;
}
.img-holder:before {
content: '';
display: block;
height: 308px;
}
.news_filter_target .img-holder:before {
content: none;
}
.img-holder img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.news_filter_target .img-holder img {
position: static;
}
:root {
--white: #ffffff;
--black: #000000;
--blackopacity: rgba(0,0,0,0.72);
--blue: #083c6b;
--bluedark: #08355e;
--holz: #bda17c;
--darkgrey: #191616;
--grey: #909090;
--lightgrey: #FBF9F9;
--mediumgrey: #F9F7F7;
--bordergrey: #D4D4D4;
--green: #1EDA9A;
--gradblue: linear-gradient(45deg, var(--blue) 0%, #2b659b 100%);
--gradholz: linear-gradient(45deg, #a78b64 0%, #bca07b 100%);
--bgcsoft: rgba(255,255,255,0.12);
}
body {
background-color: var(--white);
color: var(--black);
}
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.info-trigger-holder {
position: relative;
display: flex;
align-items: center;
transition: .2s;
}
.info-trigger-holder:hover {
opacity: 0.6;
}
.info-trigger-holder p {
color: var(--blue);
opacity: 1;
font-weight: bold;
letter-spacing: 0.2px;
line-height: 20px;
}
.info-trigger-holder svg {
flex-shrink: 0;
transition: .2s;
}
.info-trigger-holder:hover svg {
transform: scale(1.1);
}
.info-trigger-holder svg ~ p {
margin-left: 8px;
}
.about-teaser-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 48px;
grid-row-gap: 48px;
}
@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) {
.about-teaser-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
.about-teaser-grid {
grid-column-gap: 24px;
grid-row-gap: 24px;
}
.about-teaser-grid {
grid-template-columns: 1fr;
grid-column-gap: 0;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.collection-wave-teasers-grid {
display: flex;
mask-size: 100% auto;
mask-position: center bottom, center top;
mask-image: url('../../assets/img/wave-top.svg'), url('../../assets/img/wave-bottom.svg');
mask-repeat: no-repeat;
mask-composite: intersect;
image-rendering: auto;
}
.collection-wave-teasers-grid .teaser-bgc {
width: 100%;
}
.collection-wave-teasers-grid .teaser-bgc + .teaser-bgc {
margin-left: 2px;
}
.collection-wave-teasers-grid .teaser-bgc .img-holder:before {
padding-top: 560px;
}
.collection-wave-teasers-grid .teaser-bgc:nth-child(2) .bgcteaser-text-holder {
padding-bottom: 66px;
}
.collection-wave-teasers-grid .teaser-bgc:nth-child(3) .bgcteaser-text-holder {
padding-bottom: 128px;
}
.collection-wave-teasers-grid .teaser-bgc:nth-child(4) .bgcteaser-text-holder {
padding-bottom: 158px;
}
.collection-wave-teasers-grid .teaser-bgc:nth-child(5) .bgcteaser-text-holder {
padding-bottom: 168px;
}
/*head & bottom infos*/
.compare-basic-holder {
display: flex;
width: 100%;
}
.compare-basic-holder.sticky-compare {
position: sticky;
top: 50px;
/* bottom: 100px; */
z-index: 10;
}
.compare-basic-holder > div:first-child {
width: 100%;
}
.compare-icon-head {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 32px;
padding-bottom: 32px;
background: var(--mediumgrey);
width: 196px;
flex-shrink: 0;
}
.compare-icon-head ~ .compare-icon-head {
margin-left: 16px;
}
.compare-icon-head svg {
width: 32px;
height: 32px;
margin-bottom: 16px;
}
.compare-basic-holder p.big {
opacity: 1;
font-weight: bold;
}
.compare-basic-holder.bottom .compare-icon-head {
padding-bottom: 24px;
}
.compare-basic-holder.bottom > div:first-child {
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding-top: 46px;
}
.compare-basic-holder.bottom > div:first-child p {
font-weight: bold;
opacity: 1;
}
/*middle info / table*/
.compare-holder {
display: flex;
}
.compare-holder ~ .compare-holder {
border-top: 1px solid rgba(0,0,0,0.16);
}
.compare-holder .fact-s-holder:first-of-type {
width: 100%;
}
.compare-holder .fact-s-holder:last-of-type {
display: none;
}
.compare-holder .fact-s-holder {
padding-top: 8px;
padding-bottom: 8px;
hyphens: auto;
-webkit-hyphens: auto;
}
.compare-icon-holder {
background: var(--mediumgrey);
display: flex;
align-items: center;
justify-content: center;
min-width: 196px;
}
.compare-icon-holder ~ .compare-icon-holder {
margin-left: 16px;
}
[data-option-one-mobile="false"] .compare-icon-holder:nth-child(2) svg [stroke],
[data-option-two-mobile="false"] .compare-icon-holder:nth-child(3) svg [stroke] {
stroke: var(--blue);
}
.compare-icon-holder.opacity svg {
opacity: 0.24;
}
.compare-table-value {
font-weight: bold;
font-size: 18px;
}
@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) {
.compare-basic-holder {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 0px;
}
.compare-basic-holder > div:first-child {
display: none
}
.compare-icon-head {
padding-bottom: 28px;
width: auto;
}
.compare-icon-head ~ .compare-icon-head {
margin-left: 0;
}
.compare-icon-head svg {
width: 24px;
height: 24px;
margin-bottom: 12px;
}
.compare-basic-holder.bottom > div:first-child {
display: none;
}
.compare-basic-holder.bottom .compare-icon-head {
padding-bottom: 28px;
padding-top: 24px;
}
.compare-holder {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 0px;
}
.compare-holder .fact-s-holder {
background: var(--mediumgrey);
padding-top: 16px;
padding-bottom: 16px;
padding-left: 20px;
padding-right: 20px;
min-width: 0;
min-height: 0;
}
.compare-holder .fact-s-holder ~ .fact-s-holder {
margin-left: 0;
}
.compare-holder .fact-s-holder p {
margin-top: 8px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: calc(100% - 24px);
hyphens: auto;
-webkit-hyphens: auto;
}
.compare-icon-holder {
padding-left: 64px;
padding-right: 64px;
padding-top: 24px;
padding-bottom: 24px;
}
.compare-holder .fact-s-holder:first-of-type,
.compare-holder .fact-s-holder:last-of-type {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.compare-icon-holder {
display: none
}
.compare-holder .facticon-holder {
margin-right: 0;
}
[data-option-one-mobile="false"] .fact-s-holder:first-child,
[data-option-two-mobile="false"] .fact-s-holder:last-child {
justify-content: center;
}
[data-option-one-mobile="false"] .fact-s-holder:first-child > *,
[data-option-two-mobile="false"] .fact-s-holder:last-child > * {
display: none;
}
[data-option-one-mobile="false"] .fact-s-holder:first-child:before,
[data-option-two-mobile="false"] .fact-s-holder:last-child:before {
content: '–';
}
.compare-holder .fact-s-holder p ~ .info-trigger-holder {
margin-left: 0;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.equipment-container ~ .equipment-container {
margin-top: 48px;
}
.equipment-headline {
margin-bottom: 32px;
}
.facts-equipment-grid--columns_1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
.facts-equipment-grid--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
.facts-equipment-grid--columns_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 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) {
.facts-equipment-grid--columns_2,
.facts-equipment-grid--columns_3 {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 36px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.teaser-grid {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
column-gap: 40px;
margin-bottom: -48px;
}
.teaser-grid.teaser-grid--columns_1 > div {
width: 100%;
}
.teaser-grid.teaser-grid--columns_2 > div {
width: calc(50% - 16px);
flex-shrink: 0;
margin-bottom: 48px;
}
.teaser-grid.teaser-grid--columns_3 > div {
width: calc(33.3333% - 21.33px);
flex-shrink: 0;
margin-bottom: 48px;
}
/*1 to 2 columns*/
.teaser-grid--columns_1_2 {
gap: 40px;
}
.teaser-grid--columns_1_2 > div:first-child {
width: 100%;
/* margin-bottom: 24px; */
}
.teaser-grid--columns_1_2 > div:first-child .img-holder:before {
padding-top: 52%;
height: auto;
}
.teaser-grid--columns_1_2 > div:nth-child(2) {
width: calc(50% - 20px);
flex-shrink: 0;
/* margin-bottom: 48px; */
/* margin-top: 48px; */
}
.teaser-grid--columns_1_2 > div:nth-child(3) {
width: calc(50% - 20px);
flex-shrink: 0;
/* margin-bottom: 48px; */
}
.teaser-grid--columns_1_2 > div:nth-child(2) .img-holder:before,
.teaser-grid--columns_1_2 > div:nth-child(3) .img-holder:before {
padding-top: 65%;
height: auto;
}
.teaser-grid--columns_4 > div {
width: calc(25% - 36px);
flex-shrink: 0;
margin-bottom: 48px;
}
.teaser-grid--columns_4 > div .img-holder:before {
padding-top: 125%;
height: 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) {
.teaser-grid.teaser-grid--columns_3 > div {
width: calc(50% - 16px);
}
.teaser-grid--columns_4 > div {
width: calc(50% - 16px);
}
}
@media screen and (max-width: 768px) {
.teaser-grid.teaser-grid--columns_2 {
margin-bottom: -40px;
}
.teaser-grid.teaser-grid--columns_2 > div,
.teaser-grid.teaser-grid--columns_3 > div {
display: block;
width: 100%;
margin-bottom: 40px;
}
.teaser-grid--columns_4 > div {
width: 100%;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
.teaser-grid--columns_1_2 > div:first-child {
margin: 0;
}
.teaser-grid--columns_1_2 > div:nth-child(2),
.teaser-grid--columns_1_2 > div:nth-child(3) {
width: 100%;
margin: 0;
margin-top: 32px
}
.teaser-grid--columns_1_2 > div:first-child .img-holder:before,
.teaser-grid--columns_1_2 > div:nth-child(2) .img-holder:before,
.teaser-grid--columns_1_2 > div:nth-child(3) .img-holder:before {
padding-top: 63%;
}
}
@media screen and (max-width: 330px) {
}
.share-section {
margin-bottom: -1px;
}
.share-section .container {
max-width: 792px;
margin: 0 auto;
}
.share-holder {
display: flex;
justify-content: space-between;
padding-top: 24px;
padding-bottom: 24px;
border-top: 1px solid rgba(0,0,0,0.16);
border-bottom: 1px solid rgba(0,0,0,0.16);
}
.share-date-holder {
display: flex;
align-items: center;
}
.share-date-holder h6 {
margin-left: 12px;
opacity: 0.72;
font-size: 15px;
color: var(--black);
letter-spacing: 0.33px;
line-height: 24px;
}
.author-holder {
display: flex;
align-items: center;
}
.author-img-holder {
overflow: hidden;
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
}
.author-img-holder img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.author-holder h6 {
opacity: 0.72;
font-size: 15px;
color: var(--black);
letter-spacing: 0.33px;
line-height: 24px;
margin-left: 16px;
}
.author-some-holder {
display: flex;
}
.author-some-holder .some ~ .some {
margin-left: 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) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
.share-holder {
flex-direction: column;
justify-content: flex-start;
padding-top: 23.5px;
padding-bottom: 23.5px;
border-top: 1px solid rgba(0,0,0,0.16);
border-bottom: 1px solid rgba(0,0,0,0.16);
}
.share-holder > * ~ * {
margin-top: 24px
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.newsletter-holder {
position: relative;
background-image: var(--gradholz);
padding-top: 120px;
padding-bottom: 80px;
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
}
.newsletter-holder.newsletter-redirect {
background-color: transparent;
padding-bottom: 120px;
}
.newsletter-deco {
height: 120px;
width: 120px;
position: absolute;
left: 80px;
top: -60px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--white);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
}
.newsletter-headline {
width: 100%;
opacity: 1;
transition: opacity .3s;
}
.newsletter-headline h2 {
color: #fff;
}
.newsletter-headline h2 ~ p {
margin-top: 16px;
}
.newsletter-form {
flex-shrink: 0;
margin-left: 80px;
opacity: 1;
transition: opacity .3s;
}
.input-elements {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 16px;
grid-row-gap: 16px;
}
/*
.input-elements > div:first-child { grid-area: 1 / 1 / 2 / 2; }
.input-elements > div:nth-child(2n) { grid-area: 1 / 2 / 2 / 3; }
.input-elements > div:last-child { grid-area: 2 / 1 / 3 / 3; } */
.newsletter-holder .input-holder--text input {
background-color: var(--white);
}
.newsletter-cb-holder {
margin-top: 40px;
margin-bottom: 40px;
}
.newsletter-cb-holder .input-holder--checkbox ~ .input-holder--checkbox {
margin-top: 20px;
}
.newsletter-holder--submit .newsletter-headline,
.newsletter-holder--submit .newsletter-form {
opacity: 0;
}
/*submit state / success-message*/
.newsletter-holder.newsletter-holder--submit {
/* align-items: center; */
}
.success-message {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
background-image: var(--gradholz);
transition: opacity .3s;
}
.newsletter-holder--submit .success-message {
opacity: 1;
pointer-events: auto;
}
.success-message svg {
/* width: 64px; */
/* height: 64px; */
}
.success-message h2 {
margin-top: 64px;
margin-bottom: 16px;
}
.success-message p {
max-width: 690px;
font-size: 18px;
font-weight: normal;
color: #fff;
letter-spacing: 0.4px;
line-height: 24px;
text-align: center;
}
@media screen and (max-width: 1024px) {
.newsletter-holder {
padding-top: 80px;
padding-bottom: 80px;
padding-left: 32px;
padding-right: 32px;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.newsletter-deco {
height: 96px;
width: 96px;
top: -60px;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-50%);
}
.newsletter-deco > svg {
width: 40px;
height: 40px;
}
.newsletter-form {
margin-left: 0;
margin-top: 32px
}
.input-elements {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0;
grid-row-gap: 12px;
}
.input-elements > div:first-child { grid-area: 1 / 1 / 2 / 3; }
.input-elements > div:nth-child(2n) { grid-area: 2 / 1 / 3 / 3; }
.input-elements > div:last-child { grid-area: 3 / 1 / 4 / 3; }
.newsletter-cb-holder {
margin-top: 32px;
margin-bottom: 32px;
}
.newsletter-cb-holder .input-holder--checkbox ~ .input-holder--checkbox {
margin-top: 12px;
}
.newsletter-holder .input-holder--text input {
height: 56px;
}
.newsletter-holder .cta {
width: 100%;
}
/*submit state / success-message*/
.success-message {
margin-left: 0;
margin-top: 32px;
}
}
@media screen and (max-width: 660px) {
.newsletter-holder {
padding-top: 80px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.newsletter-headline h2,
.newsletter-headline p {
text-align: center
}
}
.about-icon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 48px;
grid-row-gap: 48px;
}
@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) {
.about-icon-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 36px;
grid-row-gap: 36px;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.about-icon-grid {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 0;
grid-row-gap: 16px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.facts-feature-grid--columns_1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
.facts-feature-grid--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
.facts-feature-grid--columns_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 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) {
.facts-feature-grid--columns_2,
.facts-feature-grid--columns_3 {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 24px;
}
}
@media screen and (max-width: 660px) {
.facts-feature-grid--columns_2,
.facts-feature-grid--columns_3 {
grid-row-gap: 16px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.rent-teaser-grid--columns_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 48px;
grid-row-gap: 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) {
.rent-teaser-grid--columns_3 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 56px;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.rent-teaser-grid--columns_3 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 56px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.faq-acc-wrapper {
padding-bottom: 16px;
padding-top: 16px;
transition: 0.2s;
cursor: pointer;
}
.faq-acc-wrapper:hover .faq-head-style {
color: var(--blue);
}
.faq-acc-wrapper:first-child:only-child {
border-top: 1px solid rgba(0,0,0,0.16);
border-bottom: 1px solid rgba(0,0,0,0.16);
}
.faq-acc-wrapper:first-child {
border-top: 1px solid rgba(0,0,0,0.16);
}
.faq-acc-wrapper:last-child {
border-bottom: 1px solid rgba(0,0,0,0.16);
}
.faq-acc-wrapper ~ .faq-acc-wrapper {
border-top: 1px solid rgba(0,0,0,0.16);
}
.faq-acc-wrapper.open {
padding-top: 32px;
padding-bottom: 32px;
}
.faq-acc-head {
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.2s;
}
.faq-acc-wrapper svg {
transition: 0.2s;
flex-shrink: 0;
}
.faq-acc-wrapper.open svg {
transform: rotate(45deg);
}
.faq-head-style {
font-weight: bold;
font-size: 20px;
color: var(--black);
line-height: 28px;
padding-right: 16px;
transition: 0.2s;
}
.faq-acc-sub {
opacity: 0.72;
padding-top: 16px;
}
.faq-acc-holder {
background-color: #fff;
}
@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) {
.faq-head-style {
font-size: 16.67px;
line-height: 24.00px;
}
}
@media screen and (max-width: 768px) {
.faq-head-style {
font-size: 18.33px;
line-height: 26.00px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
.faq-head-style {
/*font-size: 15px;
letter-spacing: 0.17px;
line-height: 22px;*/
}
.faq-acc-holder p {
font-size: 15px;
letter-spacing: 0.33px;
line-height: 22px;
}
}
@media screen and (max-width: 330px) {
}
.collection-tab-holder {
display: flex;
flex-direction: column;
}
.costs-tabsystem-holder {
background: var(--mediumgrey);
padding-left: 24px;
padding-right: 24px;
position: relative;
}
.costs-tabsystem-holder .cost-holder {
padding-left: 0;
}
.tab-container > svg {
height: 100%;
width: auto;
flex-shrink: 0;
}
.costs-tabsystem-holder .tab-sub {
width: 240px;
flex-shrink: 0;
padding-left: 28px;
}
.tab-container {
display: flex;
align-items: center;
}
.tab-head {
background: var(--white);
border: 1px solid var(--bordergrey);
display: inline-flex;
padding: 4px;
margin-right: 28px;
width: 100%;
position: relative;
}
.tab-head > li.active {
/*background: var(--blue);*/
}
.tab-head:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: calc(33.33% + 4px);
border: 4px solid white;
background-color: var(--blue);
transition: .3s;
}
.tab-head[data-tab="tab1"]:before {
transform: translateX(100%) translateX(-8px);
}
.tab-head[data-tab="tab2"]:before {
transform: translateX(200%) translateX(-12px);
}
.tab-head > li {
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: 0.2s;
position: relative;
}
.tab-head > li:hover h6 {
color: var(--blue);
}
.tab-head li.active h6 {
color: var(--white);
opacity: 1;
}
.tab-head h6:first-of-type {
display: block;
}
.tab-head h6:last-of-type {
display: none;
}
.tab-head h6 {
margin-top: 8px;
text-align: center;
font-size: 15px;
letter-spacing: 0.33px;
line-height: 20px;
color: var(--black);
transition: 0.2s;
opacity: 0.72;
}
.tab-head > li svg [stroke="#000000"] {
transition: .2s;
}
.tab-head > li:hover svg [stroke="#000000"] {
stroke: var(--blue);
}
.tab-head > li.active svg [stroke="#000000"] {
stroke: var(--white);
}
.tab-container > svg:last-of-type {
display: none;
}
.tab-head {
padding: 4px;
}
.collection-tab-holder .info-trigger-holder {
margin-top: 32px;
align-self: 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) {
.costs-tabsystem-holder {
padding: 20px 12px;
}
.tab-container {
flex-wrap: wrap;
}
.costs-tabsystem-holder .tab-sub,
.tab-head {
width: 100%;
margin: 0;
}
.tab-head h6:first-of-type {
display: none;
}
.tab-head h6:last-of-type {
display: block;
}
.tab-container > svg:first-of-type {
display: none;
}
.tab-container > svg:last-of-type {
display: block;
width: calc(100% + 24px);
margin-left: -12px;
}
.tab-container > svg {
margin-top: 20px;
width: 100%;
}
.mobiledivider {
display: block;
}
.costs-tabsystem-holder .cost-holder {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 16px;
grid-row-gap: 0px;
padding: 0;
}
.costs-tabsystem-holder .tab-sub {
padding: 0;
padding-top: 16px;
padding-left: 8px
}
}
@media screen and (max-width: 660px) {
.collection-tab-holder .info-trigger-holder {
margin-top: 32px;
align-self: flex-start;
align-items: flex-start;
}
.collection-tab-holder .info-trigger-holder svg {
margin-top: 4px
}
}
@media screen and (max-width: 480px) {
.costs-tabsystem-holder .cost-holder {
grid-template-columns: 132px 1fr;
grid-column-gap: 4px;
}
}
@media screen and (max-width: 330px) {
}
.facts-simple-grid--columns_1 {
display: grid;
grid-template-columns: repeat(1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 16px;
}
.facts-simple-grid--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
.facts-simple-grid--columns_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 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) {
.facts-simple-grid--columns_2,
.facts-simple-grid--columns_3 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.about-text-holder {
color: var(--white);
position: relative;
}
.about-text-holder h6 {
opacity: 0.64;
font-weight: bold;
font-size: 14px;
letter-spacing: 2px;
line-height: 20px;
text-transform: uppercase;
text-align: center;
}
.about-text-holder h6:only-child {
margin-bottom: 40px;
}
.about-text-holder h6 ~ h2 {
margin-top: 20px;
}
.about-text-holder h6 ~ h2.small {
margin-top: 24px;
}
.about-text-holder h2 {
text-align: center;
}
.about-text-holder h2:not(.small) {
margin-bottom: 56px;
}
.about-text-holder h2.small {
font-size: 40px;
text-align: center;
line-height: 56px;
}
@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) {
.about-text-holder h2.small {
font-size:33.33px;
line-height:46.67px;
}
}
@media screen and (max-width: 768px) {
.about-text-holder h2.smal {
font-size:26.67px;
line-height:37.33px;
}
}
@media screen and (max-width: 660px) {
.about-text-holder h2.small {
font-weight: bold;
font-size: 20px;
line-height: 28px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.cost-grid--columns_1 {
display: grid;
grid-template-columns: repeat(1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.cost-grid--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 0px;
}
.cost-grid--columns_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 0px;
}
@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) {
.cost-grid--columns_2,
.cost-grid--columns_3 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 32px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.facts-m-grid--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 24px;
}
.facts-m-grid--columns_1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 0;
}
.facts-m-grid--columns_2 .fact-m-holder ~ .fact-m-holder {
margin-top: 0;
}
.fact-holder-lead {
margin-bottom: 32px;
opacity: 0.72;
font-size: 18px;
color: var(--black);
letter-spacing: 0.4px;
line-height: 28px;
}
@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) {
.facts-m-grid--columns_2 {
display: grid;
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.facts-holder ~ .travel-holder {
margin-top: 48px;
}
@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) {
.facts-holder ~ .travel-holder {
margin-top: 32px;
}
}
@media screen and (max-width: 330px) {
}
.facts-grid-s {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 24px;
}
.facts-grid-s + .divider {
margin-top: 56px;
}
.divider {
display: flex;
align-items: center;
padding-bottom: 32px;
}
.divider h6 {
text-transform: uppercase;
color: var(--black);
opacity: 0.24;
margin-right: 16px;
}
.divider > div {
height: 1px;
width: 100%;
background: rgba(0,0,0,0.16);
}
@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) {
.facts-grid-s {
display: grid;
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.renter-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 48px;
grid-row-gap: 48px;
}
@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) {
.renter-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
.renter-grid {
grid-template-columns: 1fr;
grid-column-gap: 0;
grid-row-gap: 24px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.slider-overflow-cut {
width: 100%;
}
.slider-container {
position: relative;
}
.slider {
width: calc(100% + 48px);
margin-left: -24px;
}
.slider .slick-list {
overflow: visible;
}
.slider .slick-slide {
transition: opacity .3s;
margin-left: 24px;
margin-right: 24px;
}
.slider .slick-slide:not(.slick-active) {
opacity: 0.4;
}
.slider-container .slider-prev {
position: absolute;
top: 130px;
right: calc(100% + 24px);
transform: translateY(-50%) rotate(180deg);
transition: .2s;
}
.slider-container .slider-next {
position: absolute;
top: 130px;
left: calc(100% + 24px);
transform: translateY(-50%);
transition: .2s;
}
.slider-container .slider-prev[aria-disabled="true"],
.slider-container .slider-next[aria-disabled="true"] {
opacity: 0;
visibility: hidden;
}
.slick-dots {
display: block;
width: 100%;
text-align: center;
margin-top: 40px;
}
.slick-dots li{
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
border: 2px solid black;
border-radius: 50%;
margin-left: 4px;
margin-right: 4px;
transition: .2s;
}
.slick-dots li.slick-active {
background-color: var(--blue);
border-color: var(--blue);
}
.slick-dots li button {
display: none;
}
.slider--style-bright .slick-dots li {
border: 2px solid white;
}
.slider--style-bright .slick-dots li.slick-active {
background-color: var(--blue);
border-color: var(--blue);
}
@media screen and (max-width: 1920px) {
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1366px) {
.slider-container .slider-prev {
position: absolute;
top: 50%;
right: auto;
left: -12px;
transform: translateY(-50%) rotate(180deg);
}
.slider-container .slider-next {
position: absolute;
top: 50%;
left: auto;
right: -12px;
transform: translateY(-50%);
}
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
.slider {
width: calc(100% + 24px);
margin-left: -12px;
}
.slider .slick-slide {
margin-left: 12px;
margin-right: 12px;
}
}
@media screen and (max-width: 768px) {
.slider-container .slider-prev,
.slider-container .slider-next {
display: none !important;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.mobile-crosslinking {
position: relative;
background-color: var(--mediumgrey);
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
}
.cross-main-holder {
display: flex;
align-items: center;
}
.mobile-crosslinking:hover .cross-txt {
color: var(--blue);
opacity: 1;
}
.cross-txt {
opacity: 0.72;
font-weight: bold;
font-size: 18px;
color: var(--black);
letter-spacing: 0.4px;
line-height: 24px;
transition: 0.2s;
}
.mobile-crosslinking .icon-transparent {
margin-right: 0;
transition: 0.2s;
}
.mobile-crosslinking:hover .icon-transparent {
transform: translateX(8px);
}
.mobile-crosslinking ~ .mobile-crosslinking {
margin-top: 16px;
}
@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) {
}
.teaser-grid ~ .rating-holder {
margin-top: 56px;
}
.rating-holder {
background: var(--mediumgrey);
display: flex;
align-items: center;
position: relative;
width: 100%;
}
.position-holder {
position: relative;
height: 100%;
}
.rating-content-holder {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
}
/*img holder*/
.rating-img-holder {
position: relative;
width: 420px;
height: 296px;
transform: scale(1.1);
transform-origin: left bottom;
}
.rating-img-holder img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/*emoji*/
.emoji-grid {
display: flex;
padding-top: 41px;
padding-bottom: 32px;
}
.emoji-grid > * ~ * {
margin-left: 16px;
}
.rating-holder .cta {
color: var(--black);
opacity: 0.24;
font-weight: bold;
font-size: 16px;
letter-spacing: 0.18px;
line-height: 20px;
}
.rating-holder .cta svg {
height: 11px;
}
.rating-holder .cta svg [stroke]{
stroke: var(--black);
}
@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) {
.rating-img-holder {
display: none
}
.teaser-grid ~ .rating-holder {
margin-top: 64px;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.rating-content-holder {
padding-top: 32px;
padding-bottom: 32px;
padding-left: 24px;
padding-right: 24px;
}
.emoji-grid {
padding-top: 24px;
padding-bottom: 24px;
}
.emoji-grid > * ~ * {
margin-left: 8px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.rating-thx {
display: none;
align-items: center;
padding: 32px 0;
}
.rating-thx-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid var(--green);
flex-shrink: 0;
margin-right: 24px;
}
.rating-thx-icon svg {
width: 18px;
height: 18px;
display: block;
}
.rating-content-holder.sent .emoji-grid {
display: none;
}
.rating-content-holder.sent .rating-thx {
display: flex;
}
.fact-distance-holder--columns_1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
.fact-grid--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 24px;
}
.fact-grid--columns_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 24px;
}
.facts-holder br {
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: 1024px) {
}
@media screen and (max-width: 768px) {
.facts-holder {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 24px;
grid-row-gap: 16px;
}
.facts-holder br {
display: block;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.testimonial-slider-container {
position: relative;
}
.testimonial-slider {
position: relative;
}
.testimonial-slider .testimonial-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 11;
pointer-events: none;
opacity: 0;
transform: scale(1.1);
transition: .4s;
}
.testimonial-slider .testimonial-holder.active {
position: relative;
pointer-events: auto;
opacity: 1;
transform: scale(1);
}
.testimonial-slider .testimonial-holder.active {
z-index: 10;
}
.testimonial-slider .testimonial-holder.active ~ .testimonial-holder {
z-index: 7;
transform: translateY(-96px) scale(0.80);
opacity: 0;
}
.testimonial-slider .testimonial-holder.active + .testimonial-holder {
z-index: 9;
transform: translateY(-24px) scale(0.95);
opacity: 0.5;
}
.testimonial-slider .testimonial-holder.active + .testimonial-holder + .testimonial-holder {
z-index: 8;
transform: translateY(-48px) scale(0.9);
opacity: 0.4;
}
.testimonial-slider .testimonial-holder.active + .testimonial-holder + .testimonial-holder + .testimonial-holder {
z-index: 8;
transform: translateY(-72px) scale(0.85);
opacity: 0.3;
}
/* dots */
.testimonial-slider-dots {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
}
.testimonial-slider-dot {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid black;
margin-left: 4px;
margin-right: 4px;
cursor: pointer;
transition: .2s;
}
.testimonial-slider-dot.active {
background-color: var(--blue);
border-color: var(--blue);
}
/* ARROWS */
.testimonial-slider-next,
.testimonial-slider-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
transition: .2s;
}
.testimonial-slider-next {
right: -40px;
}
.testimonial-slider-prev {
left: -40px;
}
.testimonial-slider-next.disable,
.testimonial-slider-prev.disable {
opacity: 0;
pointer-events: none;
}
.testimonial-slider-container .slider-overflow-cut {
display: none;
}
.testimonial-slider-container .slick-track {
display: flex;
}
.testimonial-slider-container .slick-slide {
height: 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) {
.testimonial-slider-container .slider-overflow-cut {
display: block
}
.testimonial-slider,
.testimonial-slider-dots,
.testimonial-slider-next,
.testimonial-slider-prev
{
display: none;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.description p ~ p {
margin-top: 32px;
}
.description p ~ .cta {
margin-top: 32px;
}
.description .cta ~ .facts-holder {
margin-top: 32px;
}
.description p ~ .facts-holder {
margin-top: 32px;
margin-bottom: 32px;
}
.mosaik-holder ~ .description {
margin-top: 48px;
}
.lightbox-section {
position: fixed;
z-index: 99999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(29,29,29,.8);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
transition: .2s;
}
.lightbox-section.open {
opacity: 1;
visibility: visible;
}
.lightbox-container {
max-width: 480px;
background-color: var(--white);
padding-top: 64px;
padding-bottom: 64px;
padding-left: 48px;
padding-right: 48px;
position: relative;
margin-top: auto;
margin-bottom: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.lightbox-container > svg {
height: 64px;
width: 64px;
}
.lightbox-img-holder {
width: 192px;
height: 192px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.lightbox-img-holder img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.lightbox-section h5 {
margin-top: 40px;
margin-bottom: 32px;
text-align: center;
}
.lightbox-section p {
color: var(--black);
line-height: 28px;
margin-bottom: 32px;
text-align: center;
}
/* closer */
.lb-closer {
position: absolute;
right: 32px;
top: 32px;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
transition: 0.2s;
}
.lb-closer:after {
content: '';
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 24px;
height: 2px;
background-color: var(--black);
}
.lb-closer:before {
content: '';
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 24px;
height: 2px;
background-color: var(--black);
}
.lb-closer:hover:before,
.lb-closer:hover:after {
transition: 0.2s;
background-color: var(--blue);
}
@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) {
.lightbox-section {
padding-left: 0;
padding-right: 0;
}
.lightbox-container {
max-width: 100%;
padding-top: 64px;
padding-bottom: 64px;
padding-left: 24px;
padding-right: 24px;
}
.lightbox-section h5 {
margin-top: 24px;
margin-bottom: 16px;
}
.lb-closer {
position: absolute;
right: 24px;
top: 24px;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
transition: 0.2s;
}
.lb-closer:after {
width: 18px;
height: 2px;
background-color: var(--black);
}
.lb-closer:before {
width: 18px;
height: 2px;
background-color: var(--darkgrey);
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.about-hero {
color: var(--white);
text-align: center;
}
.about-hero h1.big {
text-transform: uppercase;
font-size: 120px;
letter-spacing: 2.67px;
line-height: 120px;
}
.about-hero h2 {
margin-bottom: 48px;
font-size: 48px;
line-height: 56px;
}
.about-hero p {
color: var(--white);
font-size: 32px;
letter-spacing: 0.2px;
line-height: 32px;
}
.about-scroll-indicator {
width: 30px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 120px;
}
.about-scroll-indicator.mobile {
display: none;
margin-bottom: 0;
}
.about-scroll-indicator > div + div{
margin-top: 3px;
}
.about-scroll-indicator > div {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #FFF;
animation: scrollIndicator 1.8s ease-in-out infinite;
}
.about-scroll-indicator > div:nth-child(2) {
animation-delay: .2s;
}
.about-scroll-indicator > div:first-child {
animation-delay: .4s;
}
@keyframes scrollIndicator {
0% {
opacity: 0.3;
}
50% {
opacity: 1;
transform: translateY(-12px);
}
100% {
opacity: 0.3;
}
}
@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) {
.about-hero h1.big {
font-size: 93.33px;
letter-spacing: 2.08px;
line-height: 96.33px;
}
.about-hero h2 {
font-size:38.67px;
line-height:46.67px;
}
.about-hero p {
font-size:18.67px;
letter-spacing:0.41px;
line-height:28.67px;
}
}
@media screen and (max-width: 768px) {
.about-hero h1.big {
font-size: 66.67px;
letter-spacing: 1.48px;
line-height: 72.67px;
}
.about-hero h2 {
font-size:29.33px;
line-height:37.33px;
}
.about-scroll-indicator {
margin-bottom: 64px;
width: 20px;
}
.about-scroll-indicator.mobile {
display: block;
margin-bottom: 4px;
}
.about-scroll-indicator > div {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 13px solid #FFF;
}
.about-scroll-indicator:not(.mobile) > div:first-child {
animation-delay: .1s;
}
.about-scroll-indicator:not(.mobile) > div:nth-child(2) {
animation-delay: .2s;
}
.about-scroll-indicator:not(.mobile) > div:nth-child(3) {
animation-delay: .3s;
}
}
@media screen and (max-width: 660px) {
.about-hero h1.big {
font-size: 40px;
letter-spacing: 0.89px;
line-height: 49px;
font-weight: 900;
}
.about-hero h2 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
/*head & bottom infos*/
.office-list-basic-holder {
display: flex;
width: 100%;
}
.office-list-basic-holder.sticky-office-list {
position: sticky;
top: 50px;
/* bottom: 100px; */
z-index: 10;
}
.office-list-basic-holder > div:first-child {
width: 100%;
}
.office-list-icon-head {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 32px;
padding-bottom: 32px;
background: var(--mediumgrey);
width: 196px;
flex-shrink: 0;
}
.office-list-icon-head ~ .office-list-icon-head {
margin-left: 16px;
}
.office-list-icon-head svg {
width: 32px;
height: 32px;
margin-bottom: 16px;
}
.office-list-basic-holder p.big {
opacity: 1;
font-weight: bold;
}
.office-list-basic-holder.bottom .office-list-icon-head {
padding-bottom: 24px;
}
.office-list-basic-holder.bottom > div:first-child {
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding-top: 46px;
}
.office-list-basic-holder.bottom > div:first-child p {
font-weight: bold;
opacity: 1;
}
/*middle info / table*/
.office-list-holder {
display: flex;
}
.office-list-holder ~ .office-list-holder {
border-top: 1px solid rgba(0,0,0,0.16);
}
.office-list-holder .fact-s-holder:first-of-type {
width: 100%;
}
.office-list-holder .fact-s-holder:last-of-type {
display: none;
}
.office-list-holder .fact-s-holder {
padding-top: 8px;
padding-bottom: 8px;
hyphens: auto;
-webkit-hyphens: auto;
}
.office-list-icon-holder {
background: var(--mediumgrey);
display: flex;
align-items: center;
justify-content: center;
min-width: 196px;
}
.office-list-icon-holder ~ .office-list-icon-holder {
margin-left: 16px;
}
[data-option-one-mobile="false"] .office-list-icon-holder:nth-child(2) svg [stroke],
[data-option-two-mobile="false"] .office-list-icon-holder:nth-child(3) svg [stroke] {
stroke: var(--blue);
}
.office-list-icon-holder.opacity svg {
opacity: 0.24;
}
.office-list-table-value {
font-weight: bold;
font-size: 18px;
}
@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) {
.office-list-basic-holder {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 0px;
}
.office-list-basic-holder > div:first-child {
display: none
}
.office-list-icon-head {
padding-bottom: 28px;
width: auto;
}
.office-list-icon-head ~ .office-list-icon-head {
margin-left: 0;
}
.office-list-icon-head svg {
width: 24px;
height: 24px;
margin-bottom: 12px;
}
.office-list-basic-holder.bottom > div:first-child {
display: none;
}
.office-list-basic-holder.bottom .office-list-icon-head {
padding-bottom: 28px;
padding-top: 24px;
}
.office-list-holder {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 0px;
}
.office-list-holder .fact-s-holder {
background: var(--mediumgrey);
padding-top: 16px;
padding-bottom: 16px;
padding-left: 20px;
padding-right: 20px;
min-width: 0;
min-height: 0;
}
.office-list-holder .fact-s-holder ~ .fact-s-holder {
margin-left: 0;
}
.office-list-holder .fact-s-holder p {
margin-top: 8px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: calc(100% - 24px);
hyphens: auto;
-webkit-hyphens: auto;
}
.office-list-icon-holder {
padding-left: 64px;
padding-right: 64px;
padding-top: 24px;
padding-bottom: 24px;
}
.office-list-holder .fact-s-holder:first-of-type,
.office-list-holder .fact-s-holder:last-of-type {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.office-list-icon-holder {
display: none
}
.office-list-holder .facticon-holder {
margin-right: 0;
}
[data-option-one-mobile="false"] .fact-s-holder:first-child,
[data-option-two-mobile="false"] .fact-s-holder:last-child {
justify-content: center;
}
[data-option-one-mobile="false"] .fact-s-holder:first-child > *,
[data-option-two-mobile="false"] .fact-s-holder:last-child > * {
display: none;
}
[data-option-one-mobile="false"] .fact-s-holder:first-child:before,
[data-option-two-mobile="false"] .fact-s-holder:last-child:before {
content: '–';
}
.office-list-holder .fact-s-holder p ~ .info-trigger-holder {
margin-left: 0;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.menu-link-holder {
position: relative;
}
.menu-link-holder .img-holder {
border: 1px solid var(--black);
}
.menu-link-holder .img-holder:before {
padding-top: 141%;
}
.menu-link-holder .img-holder ~ .cta {
margin-top: 16px;
}
.menu-link-holder .cta {
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: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.menu-link-holder .cta {
margin-top: 32px;
display: block;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.collection-team-holder {
color: var(--white);
}
.collection-team-holder h3 {
margin-bottom: 32px;
}
.collection-team-holder p {
color: var(--white);
}
.about-team-grid {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.about-team-grid.teaser-grid--columns_5 > div {
width: calc(20% - 19.2px);
flex-shrink: 0;
margin-bottom: 18px;
}
.about-team-grid.teaser-grid--columns_3 > div {
width: calc(33.333% - 21.33px);
flex-shrink: 0;
margin-bottom: 18px;
}
.collection-team-holder .cta-style--text {
color: var(--white);
font-size: 16px;
letter-spacing: 0.18px;
line-height: 20px;
font-weight: bold;
border-bottom: 2px solid var(--white);
padding-bottom: 8px;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
display: none;
}
.collection-team-holder .cta-style--text svg [stroke] {
stroke: var(--white);
}
@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) {
.about-team-grid.teaser-grid--columns_5 > div {
width: calc(25% - 18px);
margin-right: 24px;
}
.about-team-grid.teaser-grid--columns_5 > div:nth-child(4n),
.about-team-grid.teaser-grid--columns_3 > div:nth-child(4n) {
margin-right: 0;
}
.about-team-grid.teaser-grid--columns_3 > div {
width: calc(25% - 18px);
margin-right: 24px;
}
.about-team-grid {
justify-content: flex-start;
}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
.collection-team-holder .cta-style--text {
display: flex;
}
}
@media screen and (max-width: 660px) {
.about-team-grid.teaser-grid--columns_5 > div {
width: calc(50% - 12px);
margin-right: 0;
}
.about-team-grid.teaser-grid--columns_3 > div {
width: calc(50% - 12px);
margin-right: 0;
}
.about-team-grid {
justify-content: space-between;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
/*basics*/
.elements-list-holder {
display: flex;
align-items: center;
justify-content: space-between;
}
.elements-list-holder + .elements-list-holder {
margin-top: 24px;
}
.elements-list-holder .cta {
white-space: normal;
}
.list-element-holder {
display: flex;
align-items: center;
}
.elements-list-holder .list-img-holder ~ .list-text-holder {
padding-left: 40px;
}
.elements-list-holder svg ~ .list-text-holder {
padding-left: 40px;
}
.list-element-holder .list-text-holder {
padding-left: 0;
padding-right: 40px;
}
.list-element-holder > svg {
flex-shrink: 0;
max-height: 40px;
}
.list-text-holder p {
max-width: 352px;
}
.elements-list-holder p {
font-size: 16px;
color: rgba(0,0,0,0.72);
letter-spacing: 0.4px;
line-height: 24px;
max-width: 352px;
}
.list-img-holder img {
width: 168px;
height: auto;
}
/*whitebgc*/
.list-style--white {
padding-top: 30px;
padding-bottom: 30px;
padding-right: 40px;
padding-left: 40px;
background: var(--white);
}
.list-style--white .list-element-holder > svg {
width: 32px;
height: 32px;
}
.list-style--white h5 {
margin-bottom: 5px;
}
/*img*/
.list-style--img {
padding-top: 24px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 40px;
background: var(--mediumgrey);
}
.list-style--img h5 {
margin-bottom: 12px;
}
/*small*/
.list-style--small {
padding-top: 30px;
padding-bottom: 30px;
padding-right: 40px;
padding-left: 40px;
background: var(--mediumgrey);
}
.list-style--small h5 {
margin-bottom: 12px;
}
.list-style--small .cta {
align-self: right;
}
@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) {
.elements-list-holder {
flex-direction: column;
align-items: flex-start;
}
.list-element-holder {
flex-direction: column;
align-items: flex-start;
}
.elements-list-holder .list-img-holder ~ .list-text-holder {
padding-left: 0;
}
.elements-list-holder svg ~ .list-text-holder {
padding-left: 0;
}
.list-element-holder .list-text-holder {
padding: 0;
}
.list-element-holder {
margin-bottom: 16px;
}
.list-element-holder > svg {
margin-bottom: 24px;
}
/*img*/
.list-style--img .list-img-holder {
margin-bottom: 16px;
}
.list-style--img .list-text-holder {
padding: 0;
margin-bottom: 24px;
}
/*whitebgc*/
.list-style--white .list-element-holder {
flex-direction: row;
align-items: center
}
.list-style--white .list-element-holder > svg {
margin-right: 16px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
/*img*/
.list-style--img {
padding: 24px;
}
.list-style--img .cta {
width: max-content;
max-width: 100%;
}
}
@media screen and (max-width: 330px) {
}
.about-icontext-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 60px;
grid-row-gap: 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) {
.about-icontext-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 32px;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.travel-holder {
background: var(--mediumgrey);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 56px;
padding-bottom: 56px;
padding-left: 24px;
padding-right: 24px;
min-height: 376px;
}
.travel-holder > * {
max-width: 480px;
}
.travel-lead-holder {
display: flex;
align-items: center;
margin-bottom: 32px;
}
.travel-lead-holder svg {
width: 20px;
height: 20px;
margin-right: 16px;
flex-shrink: 0;
}
.travel-holder .form-element {
background: var(--white);
width: 100%;
}
.travel-holder .form-element svg [stroke] {
stroke: var(--blue);
}
.travel-status--filled .travel-link-holder {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 16px;
grid-row-gap: 0px;
width: 100%;
margin-top: 40px;
}
.travel-link-holder {
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: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.travel-holder {
min-height: auto;
padding-top: 40px;
padding-bottom: 40px;
align-items: flex-start;
}
.travel-holder > * {
max-width: 100%;
}
.travel-lead-holder {
margin-bottom: 24px;
}
.travel-lead-holder svg {
width: 16px;
height: 16px;
margin-right: 8px;
}
.travel-status--filled .travel-link-holder {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 16px;
grid-row-gap: 16px;
margin-top: 32px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.icontext-grid--columns_1 {
display: grid;
grid-template-columns: repeat(1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 16px;
}
.icontext-grid--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
.icontext-grid--columns_3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
.icontext-grid--columns_2 > div,
.icontext-grid--columns_3 > div {
min-width: 0;
min-height: 0;
/* hyphens: auto;
-webkit-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) {
.icontext-grid--columns_2,
.icontext-grid--columns_3 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.section--hero {
padding-left: 48px;
padding-right: 48px;
}
.section--hero .container {
position: relative;
}
.section--hero h1 {
padding-top: 80px;
padding-bottom: 120px;
width: 100%;
text-align: center;
color: #000;
text-shadow: none;
}
.section--hero.reduce h1, .section--hero.reduce .h1 {
padding-top: 56px;
padding-bottom: 80px;
padding-left: 56px;
padding-right: 56px;
width: 100%;
text-align: center;
font-size: 48px;
line-height: 56px;
}
.section--hero.reduce .h1 h1 {
padding: 0;
}
.section--hero--imageholder {
width: 100%;
position: relative;
height: calc(100vh - 120px);
max-height: 748px;
min-height: 580px;
opacity: 1;
transition: 1.5s;
}
.section--hero--imageholder-watermark {
top: -7px !important;
right: -10px !important;
left: auto !important;
display: block;
width: 270px !important;
height: 318px !important;
}
.section--hero--imageholder.loading {
opacity: 0;
}
@media screen and (min-width: 2000px) {
.section--hero--imageholder {
max-height: 1100px;
}
}
.section--hero.reduce .section--hero--imageholder {
max-height: 560px;
}
.section--hero--imageholder img,
.section--hero--imageholder video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.section--hero--imageholder:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 5%, rgba(0,0,0,0.23) 87%);
transition: 1.5s;
transition-timing-function: ease-in-out;
border: 0px solid white;
}
.section--hero--imageholder.loading:after {
border: 50px solid white;
}
.section--hero--imageholder ~ h1 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: var(--white);
text-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}
.section--hero--imageholder ~ h1.withsubline {
bottom: 16px;
}
.section--hero p.subline {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 80px 0;
text-align: center;
font-size: 24px;
line-height: 36px;
color: var(--white);
text-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}
.hero-logo {
position: absolute;
right: 32px;
top: 32px;
background: var(--white);
padding-top: 20px;
padding-bottom: 24px;
display: flex;
align-items: center;
flex-direction: column;
padding-left: 32px;
padding-right: 32px;
}
.hero-logo h6 {
opacity: 0.72;
font-size: 15px;
color: var(--black);
letter-spacing: 0.33px;
text-align: center;
line-height: 24px;
margin-bottom: 15px;
}
.hero-logo img {
width: 120px;
}
@media screen and (max-width: 1024px) {
.section--hero.reduce h1, .section--hero.reduce .h1 {
font-size: 42.67px;
line-height: 50.67px;
}
}
@media screen and (max-width: 768px) {
.section--hero--imageholder-watermark {
width: 135px !important;
height: 159px !important;
}
.section--hero {
padding-left: 24px;
padding-right: 24px;
}
.section--hero h1 {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 24px;
padding-right: 24px;
}
.section--hero.reduce h1, .section--hero.reduce .h1 {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 0;
padding-right: 0;
font-size: 37.33px;
line-height: 45.33px;
}
.section--hero.reduce .section--hero--imageholder ~ h1 {
text-align: center;
}
.section--hero--imageholder ~ h1.withsubline {
bottom: 48px;
}
.section--hero p.subline {
padding: 32px 0;
font-size: 16px;
line-height: 24px;
}
}
@media screen and (max-width: 660px) {
.section--hero.reduce h1, .section--hero.reduce .h1 {
font-size: 32.00px;
line-height:40.00px;
}
.section--hero.reduce .section--hero--imageholder,
.section--hero--imageholder {
height: calc(100vh - 120px);
max-height: 512px;
min-height: unset;
}
.hero-logo {
display: none
}
}
.hero-storer {
position: absolute;
top: 64px;
left: 64px;
z-index: 10;
width: 184px;
height: 184px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 9999px;
background-color: #fff;
transform: rotate(-16deg);
font-size: 18px;
line-height: 24px;
font-weight: bold;
text-decoration: none;
text-align: center;
cursor: pointer;
}
.hero-storer svg {
width: 24px;
height: 24px;
}
@media screen and (max-width: 660px) {
.hero-storer {
top: 32px;
left: 32px;
width: 120px;
height: 120px;
gap: 12px;
}
.hero-storer svg {
width: 20px;
height: 20px;
}
}
.legal-section h2 {
margin-bottom: 48px;
}
.legal-section h3 {
margin-bottom: 24px;
}
.block-holder p ~ p {
margin-top: 2px;
}
.legal-section .cta {
margin-top: 16px;
}
.block-holder ~ .block-holder {
margin-top: 64px;
}
.block-holder ~ .textblock-holder {
margin-top: 64px;
}
.textblock-holder ~ .textblock-holder {
margin-top: 64px;
}
.textblock-holder p ~ p {
margin-top: 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) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.legal-section h2 {
margin-bottom: 32px;
}
.legal-section h3 {
margin-bottom: 16px;
}
.block-holder ~ .block-holder {
margin-top: 32px;
}
.block-holder ~ .textblock-holder {
margin-top: 32px;
}
.textblock-holder ~ .textblock-holder {
margin-top: 32px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.story-teaser {
padding-bottom: 0;
}
.story-teaser .teaser-grid {
margin-bottom: 0;
}
.story-teaser .teaser-grid--columns_1 {
margin-bottom: 48px;
}
.story-teaser .teaser-grid--columns_1 .teaser-holder .img-holder {
margin-bottom: 0;
}
.story-teaser .teaser-grid--columns_1 .teaser-holder .img-holder::before {
height: auto;
padding-top: 50.5%;
}
.story-teaser .teaser-grid.teaser-grid--columns_2 > div,
.story-teaser .teaser-grid.teaser-grid--columns_3 > div {
margin-bottom: 48px;
}
.story-teaser .teaser-grid ~ .teaser-grid {
margin-top: 0;
}
.story-teaser .teaser-grid.teaser-grid--columns_2 > div {
width: calc(50% - 24px);
}
.story-teaser .teaser-grid--columns_2 .teaser-holder .img-holder::before {
height: auto;
padding-top: 68.75%;
}
.story-teaser .teaser-grid.teaser-grid--columns_3 > div {
width: calc(33.3333% - 32px);
}
.story-teaser .teaser-grid--columns_3 .teaser-holder .img-holder::before {
height: auto;
padding-top: 69.25%;
}
@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) {
.story-teaser .teaser-grid--columns_1 .teaser-holder .img-holder {
margin-bottom: 28px;
}
.story-teaser .teaser-grid.teaser-grid--columns_2 {
margin-bottom: 0;
}
.story-teaser .teaser-grid.teaser-grid--columns_3 > div {
width: calc(50% - 24px);
}
.story-teaser .teaser-grid--columns_3 .teaser-holder .img-holder::before {
padding-top: 68.75%;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.story-teaser .teaser-grid.teaser-grid--columns_2 > div,
.story-teaser .teaser-grid.teaser-grid--columns_3 > div {
width: 100%
}
.story-teaser .teaser-grid--columns_2 .teaser-holder .img-holder::before,
.story-teaser .teaser-grid--columns_3 .teaser-holder .img-holder::before {
padding-top: 50.5%;
}
}
@media screen and (max-width: 480px) {
.story-teaser {
padding-bottom: 64px;
}
.story-teaser .teaser-grid--columns_1 .teaser-holder .img-holder::before,
.story-teaser .teaser-grid--columns_2 .teaser-holder .img-holder::before,
.story-teaser .teaser-grid--columns_3 .teaser-holder .img-holder::before {
padding-top: 56.25%;
}
.story-teaser .teaser-grid.teaser-grid--columns_1,
.story-teaser .teaser-grid.teaser-grid--columns_2 > div,
.story-teaser .teaser-grid.teaser-grid--columns_3 > div {
margin-bottom: 32px;
}
}
@media screen and (max-width: 330px) {
}
.section--notification {
padding-left: 48px;
padding-right: 48px;
height: 80px;
background-color: var(--black);
position: sticky;
z-index: 300;
top: 0;
left: 0;
width: 100%;
top: 0;
margin-bottom: 104px;
margin-top: -104px;
}
.section--notification .container {
display: flex;
align-items: center;
height: 100%;
}
.section--notification .container > div:first-child,
.section--notification .container > div:last-child {
flex-shrink: 0;
}
.section--notification .container > div:nth-child(2) {
width: 100%;
padding-left: 16px;
padding-right: 16px;
}
.section--notification span {
font-weight: 500;
font-size: 18px;
color: var(--white);
letter-spacing: 0.4px;
line-height: 24px;
}
.section--notification--close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.section--notification svg {
display: block;
width: 16px;
height: 16px;
transition: .2s;
}
.section--notification--close:hover svg {
transform: rotate(90deg);
}
/* move other elements */
.section--notification ~ .section--navigation {
top: 80px;
}
.section--notification ~ .section--subnav {
top: 184px;
}
@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) {
.section--notification {
top: auto;
bottom: 0;
height: auto;
padding-top: 24px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 12px;
position: fixed;
margin: 0;
}
.section--notification ~ .section--navigation {
top: 0px;
}
.section--notification ~ .section--subnav {
top: 72px;
}
.section--notification .container {
align-items: flex-start;
}
.section--notification .container > div:first-child {
position: relative;
top: 4px;
}
.section--notification--close {
position: relative;
top: -8px;
}
.section--notification span {
font-size: 15px;
line-height: 20px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.detail-hero {
padding-top: 56px;
padding-bottom: 40px;
}
.detail-hero .container {
max-width: 792px;
margin: 0 auto;
}
.detail-hero h6 {
margin-bottom: 24px;
font-weight: bold;
font-size: 14px;
color: var(--blue);
letter-spacing: 1.4px;
line-height: 16px;
text-transform: uppercase;
}
.detail-hero h1:not(:last-child) {
margin-bottom: 24px;
}
.detail-hero h1 {
font-size: 48px;
line-height: 56px;
color: var(--black);
text-shadow: 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) {
.detail-hero h1 {
font-size: 42.67px;
line-height: 50.67px;
}
}
@media screen and (max-width: 768px) {
.detail-hero h1 {
font-size: 37.33px;
line-height: 45.33px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
.detail-hero h1 {
font-size: 32.00px;
line-height:40.00px;
}
}
@media screen and (max-width: 330px) {
}
.event-section > .container {
display: flex;
}
.event-detail-left {
width: 100%;
}
.event-detail-right {
width: 368px;
margin-left: 48px;
padding-bottom: 24px;
flex-shrink: 0;
}
.event-detail-right .sticky {
position: sticky;
top: calc(104px + 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) {
.event-section > .container {
display: block;
}
.event-section > .container > .event-detail-right {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 420px;
padding-bottom: 48px;
}
}
@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) {
}
.singly-bgc-section {
position: relative;
padding-left: 48px;
padding-right: 48px;
}
.singly-bgc-section > .container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.bgc-img-holder {
width: 100%;
position: relative;
height: calc(100vh - 120px);
max-height: 560px;
}
.bgc-img-holder img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.bgc-img-holder:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, rgba(0,0,0,0.56) 0%, rgba(0,0,0,0.00) 100%);
}
.bgc-info-holder {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: var(--white);
z-index: 1;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 100px;
}
.bgc-info-holder .cta {
margin-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) {
.singly-bgc-section {
position: relative;
padding-left: 24px;
padding-right: 24px;
}
.bgc-info-holder {
padding-left: 64px;
}
}
@media screen and (max-width: 660px) {
.bgc-info-holder {
padding-left: 32px;
padding-right: 32px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.big404 {
font-family: 'Akko Rounded W01';
font-weight: 500;
font-size: 200px;
color: rgba(0, 0, 0, 0.1);
letter-spacing: 0;
text-align: center;
position: relative;
}
.big404 img {
position: absolute;
height: 100%;
left: 50%;
top: 50%;
width: auto;
transform: translate(-50%, -50%);
}
.error404 {
text-align: center;
}
.ctas404 {
display: flex;
align-items: center;
justify-content: center;
margin-top: 48px;
}
.ctas404 .cta {
margin-left: 12px;
margin-right: 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) {
.error404 h2 {
margin-bottom: 16px;
}
.big404 {
font-size: 150px;
}
.ctas404 {
display: block;
max-width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 24px
}
.ctas404 .cta {
width: 100%;
margin: 0;
}
.ctas404 .cta + .cta {
margin-top: 24px
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.section--phasen {
padding-left: 0;
padding-right: 0;
}
.section--phasen > .container {
background-image: url('../../assets/img/panorama.png');
background-repeat: no-repeat;
background-position: 0 8%;
background-size: contain;
}
.section--phasen .container > svg {
display: block;
width: 100%;
height: auto;
}
.section--phasen .container--size-m {
padding-left: 24px;
padding-right: 24px;
max-width: 1248px;
}
.section-phase-textholder {
max-width: 480px;
margin-bottom: 40px;
}
.section-phase-textholder h2 + p{
margin-top: 16px;
}
.section--phasen .collection-wave-teasers {
margin-top: calc(-14.3% + 24px);
}
.section--phasen .big-teaser-wave {
margin-top: calc(-8.3% + 32px);
}
.section--phasen--mobile-teasers {
display: none;
}
@media screen and (max-width: 1024px) {
.section--phasen .big-teaser-wave {
margin-top: 1px;
}
.section--phasen .container > svg {
display: none
}
.collection-wave-teasers {
display: none
}
.section--phasen--mobile-teasers {
display: block
}
}
.event-bgc-section ~ .newsletter-section {
margin-top: -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) {
.event-bgc-section ~ .newsletter-section {
margin-top: -114px;
}
}
@media screen and (max-width: 768px) {
.event-bgc-section ~ .newsletter-section {
margin-top: -106px;
}
}
@media screen and (max-width: 660px) {
.event-bgc-section ~ .newsletter-section {
margin-top: -100px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.event-container {
margin-top: -24px;
}
.event-timeline-holder {
position: relative;
padding-left: 48px;
padding-top: 24px;
padding-bottom: 24px;
}
.event-container > .event-timeline-holder:last-child {
padding-bottom: 0;
}
.event-timeline-holder-timeline {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.event-timeline-holder-timeline div {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--black);
flex-shrink: 0;
margin-top: 24px;
margin-bottom: 24px;
}
.event-timeline-holder-timeline:before,
.event-timeline-holder-timeline:after {
content: '';
display: block;
width: 2px;
background-color: var(--black);
opacity: .16;
height: 100%;
}
/* first and last */
.event-timeline-holder:first-child .event-timeline-holder-timeline:before,
.event-timeline-holder:last-child .event-timeline-holder-timeline:after {
opacity: 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) {
.event-container {
margin-top: -12px;
}
.event-timeline-holder {
padding-left: 0px;
padding-top: 12px;
padding-bottom: 12px;
}
.event-timeline-holder-timeline {
display: none
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.filterbar {
padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
position: relative;
margin-bottom: 48px;
display: flex;
}
.filter-trigger-holder {
display: inline-flex;
position: relative;
z-index: 10;
}
.filter-trigger-holder + .filter-trigger-holder {
margin-left: 8px;
}
.filter-trigger-holder.sort {
margin-left: auto;
}
.filter-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
font-size: 15px;
color: rgba(0,0,0,0.72);
letter-spacing: 0.33px;
line-height: 24px;
height: 40px;
background-color: var(--mediumgrey);
border: 1px solid var(--bordergrey);
padding-left: 16px;
padding-right: 16px;
cursor: pointer;
position: relative;
transition: .2s;
}
.filter-trigger:hover,
.filter-trigger.open,
.filter-trigger.active {
background-color: var(--white);
}
.filter-trigger > svg {
width: 16px;
height: 16px;
opacity: 0.72;
margin-right: 12px;
}
.filter-trigger-close {
margin-left: 12px;
width: 16px;
height: 16px;
cursor: pointer;
display: none;
}
.filter-trigger.active .filter-trigger-close {
display: block;
}
.filter-trigger-close svg {
width: 16px;
height: 16px;
}
.filter-trigger-options {
width: 400px;
background-color: var(--white);
/*border: 1px solid red;*/
box-shadow: 0 16px 40px 4px rgb(0 0 0 / 12%);
padding: 32px;
position: absolute;
top: calc(100% + 12px);
transform: translateX(32px);
left: 0;
opacity: 0;
visibility: hidden;
transition: .2s;
}
.filter-trigger-holder.sort .filter-trigger-options {
left: auto;
right: 0;
}
.filter-trigger.open ~ .filter-trigger-options {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.filter-trigger-options-desc {
opacity: 0.72;
font-size: 15px;
color: var(--black);
letter-spacing: 0.33px;
line-height: 24px;
margin-bottom: 12px;
}
.filter-trigger-options-close {
width: 16px;
height: 16px;
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
}
.filter-trigger-options-close svg {
width: 100%;
height: 100%;
display: block;
}
.filter-trigger-options input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.filter-trigger-options label {
cursor: pointer;
font-weight: bold;
font-size: 15px;
color: var(--black);
letter-spacing: 0.17px;
line-height: 22px;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* .filter-trigger-options label:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.16);
}
.filter-trigger-options input[type="checkbox"]:checked + label {
color: var(--blue);
}
.filter-trigger-options label svg {
opacity: 0;
transform: translateX(16px);
transition: .2s;
}
.filter-trigger-options input[type="checkbox"]:checked + label svg {
transform: translateX(0px);
opacity: 1;
} */
.filter-range-holder {
height: 40px;
position: relative;
overflow: hidden;
}
/* .filter-range-holder:before {
content: '';
position: absolute;
top: calc(50% - 0.5px);
left: 0;
right: 0;
height: 1px;
background-color: var(--blue);
pointer-events: none;
}
.filter-range-holder input {
position: absolute;
top: 0;
left: 0;
right: 0;
} */
.filter-trigger-options input[type="range"] {
margin: 0;
padding: 0;
display: block;
-webkit-appearance: none;
width: 100%;
background: transparent;
pointer-events: none;
}
.filter-trigger-options input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
box-shadow: none;
}
.filter-trigger-options input[type=range]:focus {
outline: none;
}
.filter-trigger-options input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
pointer-events: none;
}
/* THUMBS */
.filter-trigger-options input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: var(--blue);
border-radius: 50%;
cursor: pointer;
width: 40px;
height: 40px;
pointer-events: auto;
/*outline: 6px solid white;*/
border: 12px solid white;
}
.filter-trigger-options input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
background: var(--blue);
border-radius: 50%;
cursor: pointer;
width: 40px;
height: 40px;
pointer-events: auto;
/*outline: 6px solid white;*/
border: 12px solid white;
}
.filter-trigger-options input[type=range]::-ms-thumb {
-webkit-appearance: none;
background: var(--blue);
border-radius: 50%;
cursor: pointer;
width: 40px;
height: 40px;
pointer-events: auto;
/*outline: 6px solid white;*/
border: 12px solid white;
}
/* GHOST */
.min-ghost,
.max-ghost {
height: 1px;
background-color: var(--grey);
width: 100%;
position: absolute;
top: calc(50% - 0.5px);
right: 100%;
}
.max-ghost {
right: auto;
left: 100%;
}
.input-holder--text.filter-sort {
height: 40px;
position: absolute;
top: 0;
right: 0;
}
.input-holder--text.filter-sort input,
.input-holder--text.filled.filter-sort input {
height: 40px;
padding-top: 0;
border: none;
}
.input-holder--text.filled.filter-sort label {
display: none;
}
.filter-replace-content section {
padding-left: 0;
padding-right: 0;
}
.range-text-display {
display: flex;
width: 100%;
height: 48px;
border: 1px solid #D4D4D4;
text-align: right;
font-size: 15px;
color: #909090;
letter-spacing: 0;
line-height: 24px;
align-items: center;
justify-content: flex-end;
padding-right: 16px;
}
.range-text-display span {
font-weight: bold;
font-size: 18px;
color: #000000;
letter-spacing: 0.2px;
line-height: 24px;
margin-right: 8px;
}
.range-text-display-separator {
font-size: 15px;
color: #909090;
letter-spacing: 0;
text-align: center;
line-height: 24px;
flex-shrink: 0;
margin-left: 12px;
margin-right: 12px;
}
.range-text-display-holder {
display: flex;
align-items: center;
margin-top: 24px;
}
.filter-label {
opacity: 0.4;
font-size: 15px;
color: #000000;
letter-spacing: 0.33px;
line-height: 24px;
display: inline-flex;
align-items: center;
margin-right: 32px;
}
.filter-label svg {
width: 16px;
height: 16px;
margin-right: 12px;
}
.filter-mobile-trigger-bar {
display: none;
}
.filter-close-mobile-trigger {
display: none;
}
.filter-open-mobile-trigger {
display: none;
}
.filter-mobile-border {
display: none;
}
.filter-trigger-ctas {
display: flex;
align-items: center;
}
.filter-trigger-ctas {
margin-top: 32px;
}
.filter-trigger-ctas > button {
width: 100%;
padding: 0;
height: 48px;
font-size: 16px;
}
.filter-trigger-ctas > button + button {
margin-left: 16px;
}
@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) {
.filter-trigger-options {
width: 300px;
}
}
@media screen and (max-width: 992px) {
.filterbar {
background-color: #FFF;
position: fixed;
top: 0;
width: 100vw;
z-index: 99999;
bottom: 0;
margin: 0;
display: block;
padding: 24px;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
transition: .3s;
left: -100vw;
padding-top: 120px;
}
.filterbar:before {
content: '';
display: flex;
position: fixed;
top: 0;
right: 0;
left: 0;
height: 80px;
z-index: 99;
background-color: white;
transform: translateX(-100vw);
box-shadow: 0px 4px 16px 0px rgb(0 0 0 / 20%);
opacity: 0;
transition: .3s;
}
.filterbar.open:before {
opacity: 1;
transform: translateX(0vw);
}
.filterbar.open {
left: 0vw;
}
.filterbar:after {
content: '';
display: block;
width: 100%;
height: 128px;
}
.filter-label {
margin-bottom: 32px;
opacity: 1;
font-weight: bold;
font-size: 20px;
line-height: 28px;
position: fixed;
z-index: 999;
top: 26px;
left: 26px;
/*display: none;*/
transform: translateX(-100vw);
transition: .3s;
}
.filterbar.open .filter-label{
display: flex;
transform: translateX(0vw);
}
.filter-trigger-holder {
display: block;
}
.filter-trigger-holder + .filter-trigger-holder {
margin-left: 0;
margin-top: 32px;
}
.filter-trigger {
display: none
}
.filter-trigger-options {
position: relative;
top: 0;
transform: none;
opacity: 1;
visibility: visible;
width: 100%;
padding: 0;
border: none;
box-shadow: none;
}
.filter-trigger-options-close {
display: none;
}
.filter-mobile-trigger-bar {
display: block;
background: #FFFFFF;
box-shadow: 0 -16px 48px -16px rgba(0,0,0,0.08);
height: 96px;
width: 100%;
position: fixed;
bottom: 0;
width: 100vw;
z-index: 999;
display: flex;
align-items: center;
padding-left: 0;
padding-right: 24px;
left: -100vw;
transition: .3s;
}
.filterbar.open .filter-mobile-trigger-bar {
left: 0vw;
}
.filter-mobile-trigger-bar button {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.filter-mobile-trigger-bar button.cta-style--secondarylight {
background-color: transparent;
color: black;
opacity: 0.24;
transition: .2s;
}
.filter-open-mobile-trigger.active ~ .filterbar .filter-mobile-trigger-bar button.cta-style--secondarylight {
opacity: 1
}
.filter-mobile-trigger-bar button.cta-style--secondarylight:hover {
opacity: .7;
}
.filter-mobile-trigger-bar button.cta-style--secondarylight svg [stroke] {
stroke: var(--black);
}
.filter-close-mobile-trigger {
display: block;
position: absolute;
top: 30px;
right: 24px;
font-weight: 500;
font-size: 16px;
color: #000000;
letter-spacing: 0;
line-height: 20px;
display: flex;
align-items: center;
cursor: pointer;
position: fixed;
z-index: 999;
transition: .3s;
transform: translateX(-100vw);
}
.filterbar.open .filter-close-mobile-trigger {
display: flex;
transform: translateX(0vw);
}
.filter-close-mobile-trigger svg {
width: 20px;
height: 20px;
margin-left: 12px
}
.filter-open-mobile-trigger {
display: block;
background: #F9F7F7;
border: 1px solid #D4D4D4;
height: 48px;
display: flex;
align-items: center;
cursor: pointer;
font-size: 15px;
color: rgba(0, 0, 0, 0.72);
letter-spacing: 0.33px;
line-height: 24px;
padding-left: 16px;
padding-right: 16px;
}
.filter-open-mobile-trigger.active {
background-color: #FFF;
}
.filter-open-mobile-trigger svg {
width: 16px;
height: 16px;
margin-right: 12px;
}
.filter-open-mobile-trigger span:empty {
display: none;
}
.filter-open-mobile-trigger span {
width: 24px;
height: 24px;
border-radius: 50%;
font-weight: bold;
font-size: 16px;
background-color: var(--blue);
color: #FFF;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
}
.filter-mobile-border {
display: block;
height: 1px;
background-color: #000;
opacity: 0.16;
margin-top: 16px;
margin-bottom: 32px;
}
.filter-trigger-ctas {
display: none
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.filter_checkbox_line {
display: flex;
justify-content: space-between;
align-items: center;
}
.filter_checkbox_line + .filter_checkbox_line {
border-top: 1px solid rgba(0,0,0,0.16);
}
.filter_checkbox_line > label {
flex: 1;
}
.filter_checkbox_line:not(:last-child) {
border-bottom: none;
}
.filter_checkbox_line .input-holder--checkbox label {
width: 32px;
height: 32px;
}
.filter_checkbox_line .input-holder--checkbox label .pseudo-checkbox {
margin-right: 0;
}
.filter-trigger-holder.sort .filter_checkbox_line .input-holder--checkbox label .pseudo-checkbox,
.filter-trigger-holder.sort .filter_checkbox_line .input-holder--checkbox label .pseudo-checkbox::after {
border-radius: 100px;
}
.section--ankernavigation {
padding-left: 48px;
padding-right: 48px;
}
.section--ankernavigation .container {
display: flex;
}
.section--ankernavigation .container > div:not(.slider) {
width: 100%;
}
.section--ankernavigation .container > div:nth-child(2) {
width: 368px;
margin-left: 48px;
flex-shrink: 0;
}
.section--ankernavigation .container > div.section--ankernavigation--leftside {
width: calc(100% - 416px);
}
.section--ankernavigation .container .sticky, .content-section .container .sticky {
position: sticky;
top: 0px;
z-index: 11;
transition: .3s;
}
.section--navigation.hide.scroll-up ~ .section--ankernavigation .container .sticky, .section--navigation.hide.scroll-up ~ .content-section .container .sticky {
transform: translateY(104px);
}
.section--navigation.hide.scroll-up ~ .section--ankernavigation .container .section--ankernavigation--rightside .sticky {
transform: translateY(154px);
}
.section--navigation.hide.scroll-down ~ .section--ankernavigation .container .section--ankernavigation--rightside .sticky {
transform: translateY(50px);
}
.section--navigation:not(.scroll-down):not(.scroll-up) ~ .section--ankernavigation .container .sticky, .section--navigation:not(.scroll-down):not(.scroll-up) ~ .content-section .container .sticky {
top: 154px;
}
.section--notification ~ .section--ankernavigation .container .sticky, .section--notification ~ .content-section .container .sticky {
top: 184px;
}
.section--ankernavigation--nav {
height: 50px;
background-color: var(--white);
border-bottom: 1px solid rgba(0,0,0,0.16);
display: flex;
align-items: center;
}
.section--ankernavigation--nav:empty {
opacity: 0;
visibility: hidden;
margin-bottom: -114px;
}
.section--ankernavigation--nav--item {
font-size: 15px;
color: rgba(0, 0, 0, 0.72);
letter-spacing: 0.33px;
line-height: 24px;
text-decoration: none;
transition: .2s color;
position: relative;
height: 50px;
display: inline-flex;
align-items: center;
}
.section--ankernavigation--nav--item + .section--ankernavigation--nav--item {
margin-left: 24px;
}
.section--ankernavigation--nav--item.active {
color: var(--blue);
font-weight: bold;
}
.section--ankernavigation--nav--item:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: -8px;
right: -8px;
height: 1px;
border-left: 8px solid white;
border-right: 8px solid white;
background-color: var(--blue);
transform: scaleX(0);
transition: .2s;
}
.section--ankernavigation--nav--item.active:after {
transform: scaleX(1.0);
}
/*.section--ankernavigation--leftside--content > div:first-child {
padding-top: 64px;
}
*/
/*.section--ankernavigation--leftside--content > div > h2 {
margin-bottom: 48px;
}*/
.section--ankernavigation--rightside .sticky > h3 {
display: none;
}
.section--ankernavigation--rightside .sticky > h3,
.section--ankernavigation--leftside--content > div > h3 {
margin-bottom: 32px;
}
/*.section--ankernavigation--leftside--content {
overflow: hidden;
}*/
/* Slider Correction */
.section--ankernavigation--leftside .slider-overflow-cut {
width: calc(100% + 48px);
margin-left: -24px;
padding-left: 24px;
padding-right: 24px;
overflow: hidden;
}
.section--ankernavigation--leftside .slider-container {
width: calc(100% + 48px);
margin-left: -24px;
max-width: unset;
}
.section--ankernavigation--leftside .slider {
width: 100%;
margin-left: 0;
}
.section--ankernavigation--leftside .slider-container .slider-prev {
right: auto;
left: 0;
}
.section--ankernavigation--leftside .slider-container .slider-next {
left: auto;
right: 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: 1180px) {
.section--ankernavigation .container {
display: block;
}
.section--ankernavigation .container.reverse-mobile {
display: flex;
flex-direction: column-reverse;
}
.section--ankernavigation .container > div:nth-child(2) {
margin-left: auto;
margin-right: auto;
width: 100%;
/*max-width: 420px;*/
padding-bottom: 48px;
padding-top: 64px;
}
.section--ankernavigation .container > div.section--ankernavigation--leftside {
width: 100%;
}
.section--ankernavigation--leftside .slider-overflow-cut {
width: 100%;
overflow: visible;
margin: 0;
padding: 0;
}
.section--ankernavigation--rightside .sticky > h3 {
display: block;
}
}
@media screen and (max-width: 1024px) {
.section--ankernavigation--leftside .slider-container {
width: calc(100% + 24px);
margin-left: -12px;
}
.section--ankernavigation {
padding-left: 24px;
padding-right: 24px;
}
.section--ankernavigation--nav {
margin-left: -24px;
margin-right: -24px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.section--ankernavigation--nav:before,
.section--ankernavigation--nav:after {
content: '';
display: inline-flex;
height: 1px;
width: 24px;
}
/*.section--ankernavigation--nav--item:before {
content: '';
display: block;
position: absolute;
left: -18px;
right: -18px;
bottom: 1px;
height: 1px;
background-color: rgba(0, 0, 0, 0.16);
}*/
.section--ankernavigation--nav--item:after {
bottom: -.5px;
height: 2px
}
.section--ankernavigation--nav--item {
margin-left: 24px;
}
.section--ankernavigation .container > div:nth-child(2) {
padding-top: 56px;
}
}
@media screen and (max-width: 768px) {
.section--ankernavigation--leftside .slider-overflow-cut {
width: 100%;
overflow: visible;
padding: 0;
margin: 0;
}
.section--ankernavigation {
padding-left: 24px;
padding-right: 24px;
}
.section--ankernavigation .container > div:first-child .sticky, .content-section .container > div:first-child .sticky {
top: 0;
}
.section--ankernavigation--leftside--content .testimonial-slider-container {
padding-left: 24px;
padding-right: 24px;
margin-left: -24px;
margin-right: -24px;
overflow: hidden;
}
.section--ankernavigation .container > div:nth-child(2) {
padding-top: 48px;
}
.section--ankernavigation--nav {
transition: .3s;
}
.section--navigation.hide.scroll-up ~ .section--ankernavigation .container > div:first-child .sticky, .section--navigation.hide.scroll-up ~ .content-section .container > div:first-child .sticky {
transform: translateY(0px);
}
.section--navigation.hide.scroll-up ~ .section--ankernavigation .section--ankernavigation--nav, .section--navigation.hide.scroll-up ~ .content-section .section--ankernavigation--nav {
transform: translateY(72px);
}
.section--ankernavigation .container.reverse-mobile > div:nth-child(2) {
padding-top: 0
}
}
@media screen and (max-width: 660px) {
.section--ankernavigation--leftside--content > div:first-child {
padding-top: 0px;
}
.section--ankernavigation .container > div:nth-child(2) {
padding-top: 40px;
}
.section--ankernavigation--nav:empty {
display: none
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.sidebar_help_logo {
display: block;
width: 200px;
height: 110px;
margin: 0 auto 44px;
}
.news_filter_bar {
display: flex;
align-items: center;
border-bottom: 1px solid rgba(0,0,0,0.16);
margin-bottom: 48px;
flex-wrap: wrap;
padding-left: 120px;
}
.news_filter_bar p {
display: none;
align-items: center;
width: 120px;
margin-left: -120px;
margin-bottom: 16px;
opacity: 0.4;
font-size: 15px;
color: #000000;
letter-spacing: 0.33px;
line-height: 24px;
}
.news_filter_bar p svg {
height: 16px;
width: 16px;
margin-right: 12px;
}
.news_filter_bar button {
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
background: #F9F7F7;
border: 1px solid #D4D4D4;
height: 40px;
padding-left: 16px;
padding-right: 16px;
font-size: 15px;
color: rgba(0, 0, 0, 0.72);
letter-spacing: 0.33px;
line-height: 24px;
display: flex;
align-items: center;
flex-shrink: 0;
margin-bottom: 16px;
transition: .2s;
margin-right: 8px;
}
.news_filter_bar button:hover {
opacity: 0.6;
}
.news_filter_bar button.active {
background-color: white;
opacity: 1;
border-color: rgba(0, 0, 0, 1);
}
.news_filter_bar button svg {
width: 16px;
height: 16px;
margin-right: 12px;
}
.news_filter_target section {
padding: 0;
}
.teaser-section:not(.section-bgc-style--dark) .teaser-holder .img-holder:after,
.news_filter_target .teaser-holder .img-holder:after {
background: linear-gradient(-67deg, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.03) 100%);
opacity: 1;
}
.pagination_cnt {
margin-bottom: 72px;
}
.pagination_cnt,
.pagi_num_cnt {
display: flex;
align-items: center;
justify-content: center;
}
.pagination_cnt button {
appearance: none;
-webkit-appearance: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
width: 32px;
height: 32px;
cursor: pointer;
background-color: var(--white);
font-size: 16px;
color: var(--black);
letter-spacing: 0.18px;
text-align: center;
line-height: 20px;
}
.pagi_num_cnt button {
margin-left: 4px;
margin-right: 4px;
background-color: var(--lightgrey);
}
.pagination_cnt svg,
.pagi_num_cnt svg {
width: 100%;
height: 100%;
display: block;
}
.pagi_num_cnt button.active {
background-color: var(--blue);
color: var(--white);
}
.pagination_cnt > button:first-child {
margin-right: 4px;
}
.pagination_cnt > button:last-child {
margin-left: 4px;
}
.no-results {
font-size: 20px;
color: rgba(0,0,0,0.70);
letter-spacing: 0.44px;
text-align: center;
line-height: 32px;
}
.no-results a {
color: #F7323E;
text-decoration: none;
position: relative;
display: inline-block;
}
.no-results a:before {
content: '';
position: absolute;
display: block;
bottom: 0;
height: 2px;
background-color: #F7323E;
right: 0;
width: 0;
transition: .2s;
}
.no-results a:hover:before {
right: auto;
left: 0;
width: 100%;
}
.news_filter_bar-scroll-wrapper-mobile {
position: relative;
padding: 0 12px;
}
.tab-nav-links__btn {
position: absolute;
top: 4px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 40px;
padding: 0;
background-color: #fff;
border: none;
cursor: pointer;
opacity: 0;
transition: opacity .5s, transform .5s;
}
.tab-nav-links__btn::before {
content: '';
display: block;
width: 24px;
height: 100%;
position: absolute;
z-index: 9;
top: 0;
}
.tab-nav-links__btn svg {
width: 15px;
height: 15px;
}
.tab-nav-links__btn_left {
left: 0;
border-right: 1px solid #d4d4d4;
transform: translateY(-4px) translateX(-50px);
}
.tab-nav-links__btn_left::before {
right: -25px;
background-image: linear-gradient(90deg, rgba(255,255,255,1) 33%, rgba(255,255,255,0) 100%);
}
.tab-nav-links__btn_right {
right: 0;
border-left: 1px solid #d4d4d4;
transform: translateY(-4px) translateX(50px);
}
.tab-nav-links__btn_right::before {
left: -25px;
background-image: linear-gradient(-90deg, rgba(255,255,255,1) 33%, rgba(255,255,255,0) 100%);
}
.tab-nav-links__btn.shown {
opacity: 1;
transform: translateY(-4px) translateX(0px);
}
@media screen and (min-width: 768px) {
.tab-nav-links__btn {
display: none;
}
}
@media screen and (max-width: 768px) {
.news_filter_bar-scroll-wrapper-mobile {
position: relative;
margin-left: -32px;
margin-right: -32px;
}
/* .news_filter_bar-scroll-wrapper-mobile:after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
top: 0;
width: 80px;
background: linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%);
z-index: 1;
pointer-events: none;
} */
.news_filter_bar {
padding-left: 0;
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.news_filter_bar:before,
.news_filter_bar:after {
content: '';
flex-shrink: 0;
display: block;
width: 32px;
height: 1px;
}
.news_filter_bar p {
width: auto;
margin-left: 0;
margin-right: 32px;
}
.news_filter_bar button:last-child {
margin-right: 0
}
}
@media screen and (max-width: 660px) {
.news_filter_bar-scroll-wrapper-mobile {
margin-left: -24px;
margin-right: -24px;
}
.news_filter_bar:before,
.news_filter_bar:after {
width: 24px;
}
}
@media screen and (min-width: 768px) {
.news_filter_bar p {
display: flex;
}
}
.hubspot-section .container {
position: relative;
}
.hubspot-form {
margin-top: 24px;
}
.hubspot-form .input-elements {
margin-bottom: 24px;
}
.hubspot-section .success-message {
background-color: #fff;
background-image: none;
}
.hubspot-section .success-message p {
color: #000;
}
.hubspot-section .form_button {
display: flex;
justify-content: end;
}
.content-section h3 {
margin-bottom: 32px;
}
body {
padding-top: 104px;
}
.section--navigation {
position: fixed;
z-index: 200;
top: 0;
left: 0;
right: 0;
height: 104px;
background-color: var(--white);
padding-left: 48px;
padding-right: 48px;
transition:
0.3s box-shadow,
0.3s transform;
}
.section--navigation.shadow {
box-shadow: 0px 4px 16px 0px rgb(0 0 0 / 20%);
}
.section--subnav.active ~ .section--navigation.shadow {
box-shadow: 0px 4px 16px 0px rgb(0 0 0 / 0%);
}
.section--navigation.scroll-down.hide:not(.open-main) {
transform: translateY(-100%);
box-shadow: 0px 4px 16px 0px rgb(0 0 0 / 0%);
}
.section--navigation .container {
height: 100%;
display: flex;
align-items: center;
}
.section--navigation--logo {
display: inline-flex;
}
.section--navigation--logo svg {
height: 40px;
width: auto;
}
.section--navigation--right {
display: flex;
align-items: center;
margin-right: 0;
margin-left: auto;
}
.section--navigation--right--navitems {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.section--navigation--right--navitems--top a {
font-weight: normal;
font-size: 14px;
color: var(--black);
letter-spacing: 0;
line-height: 20px;
text-decoration: none;
transition: 0.2s;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.section--navigation--right--navitems--top a svg:first-child {
width: 13px;
margin-left: 0;
margin-right: 8px;
}
.section--navigation--right--navitems--top a svg {
width: 16px;
height: 16px;
margin-left: 8px;
}
.section--navigation--right--navitems--top a svg [stroke="#000000"] {
transition: 0.2s;
}
.section--navigation--right--navitems--top a svg [fill="#000000"] {
transition: 0.2s;
}
.section--navigation--right--navitems--top a:hover svg [stroke="#000000"] {
stroke: var(--blue);
}
.section--navigation--right--navitems--top a:hover svg [fill="#000000"] {
fill: var(--blue);
}
.section--navigation--right--navitems--top a:hover {
color: var(--blue);
}
.section--navigation--right--navitems--top a + a {
margin-left: 24px;
}
.section--navigation--right--navitems--bottom {
margin-top: 12px;
}
.section--navigation--right--navitems--bottom a {
font-weight: 500;
font-size: 18px;
color: var(--black);
letter-spacing: 0;
text-decoration: none;
line-height: 20px;
transition: 0.2s;
position: relative;
}
.section--navigation--right--navitems--bottom a.active,
.section--navigation--right--navitems--bottom a.subactive {
color: var(--blue);
}
.section--navigation--right--navitems--bottom a:hover {
color: var(--blue);
}
.section--navigation--right--navitems--bottom a svg {
display: none;
}
.section--navigation--right--navitems--bottom a + a {
margin-left: 32px;
}
.section--navigation--right--navitems--bottom a:after {
content: "";
display: block;
position: absolute;
bottom: -26px;
left: -8px;
right: -8px;
height: 1.5px;
background-color: var(--blue);
border-left: 8px solid white;
border-right: 8px solid white;
transform: scaleX(0);
transition: 0.2s;
}
.section--navigation--right--navitems--bottom a.subactive:after {
transform: scaleX(1);
}
.section--navigation--right--search {
border-left: 2px solid rgba(0, 0, 0, 0.08);
margin-left: 32px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-left: 16px;
position: relative;
}
.section--navigation--right--search--trigger {
cursor: pointer;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
z-index: 10;
transition: 0.2s;
}
.section--navigation--right--search--darkener {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.48);
z-index: 5;
opacity: 0;
visibility: hidden;
transition: 0.2s;
}
.section--navigation--right--search--trigger.active ~ .section--navigation--right--search--darkener {
opacity: 1;
visibility: visible;
}
.section--navigation--right--search--trigger svg {
width: 16px;
height: 16px;
}
.section--navigation--right--search--trigger svg:last-child,
.section--navigation--right--search--trigger.active svg:first-child {
display: none;
}
.section--navigation--right--search--trigger.active svg:last-child {
display: block;
}
.section--navigation--right--search--results {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 460px;
background-color: #fff;
box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.08);
z-index: 20;
opacity: 0;
visibility: hidden;
transition: 0.2s;
transform: translateX(16px);
}
.section--navigation--right--search--results:empty {
display: none;
}
.section--navigation--right--search--trigger.active ~ .section--navigation--right--search--results {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.section--navigation--right--search--results .input-holder--text input {
border: none;
}
.section--navigation--right--search--results--replace {
padding-left: 24px;
padding-right: 24px;
}
.section--navigation--right--search--results--replace .teaser--nav--search {
padding-top: 16px;
padding-bottom: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.16);
}
.section--navigation--right--navburger {
display: none;
}
.header-search-empty {
display: grid;
justify-items: center;
padding: 48px 24px;
}
.header-search-empty.header-search-empty-hidden {
display: none;
}
.header-search-empty > svg {
width: 40px;
height: 40px;
margin-bottom: 40px;
}
.header-search-empty-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}
.header-search-empty-title-new {
font-size: 20px;
font-weight: 600;
line-height: 32px;
text-align: center;
opacity: 0.72;
margin-bottom: 40px;
}
.header-search-empty-subline {
font-size: 15px;
margin-bottom: 32px;
opacity: 0.72;
}
.header-search-empty-link {
font-size: 18px;
line-height: 18px;
font-weight: 600;
color: #f7323e;
text-decoration: none;
display: flex;
justify-content: center;
gap: 8px;
}
.header-search-empty-link + .header-search-empty-link {
margin-top: 16px;
}
.header-search-empty-link svg {
width: 16px;
height: 16px;
}
.section--subnav {
position: fixed;
z-index: 190;
top: 104px;
left: 0;
right: 0;
padding-top: 48px;
padding-bottom: 48px;
background-color: var(--white);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
transition: 0.3s;
padding-left: 24px;
padding-right: 24px;
}
.section--subnav.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.section--subnav--darkener {
position: fixed;
z-index: 180;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.48);
opacity: 0;
visibility: hidden;
transition: 0.2s;
}
.section--subnav.active ~ .section--subnav--darkener {
opacity: 1;
visibility: visible;
}
.section--subnav:before {
content: "";
display: block;
top: 0;
left: 8px;
right: 8px;
height: 1px;
position: absolute;
background-color: rgba(0, 0, 0, 0.16);
}
.section--subnav .container {
position: relative;
overflow: hidden;
}
.section--subnav .container > div {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translateY(32px);
transition: 0.2s;
display: flex;
}
.section--subnav .container > div.wrap-sub {
flex-wrap: wrap;
margin-bottom: -48px;
}
.section--subnav .container > div.active {
opacity: 1;
visibility: visible;
position: relative;
transform: translateY(0);
transition-delay: 0.2s;
}
.section--subnav--item {
width: 100%;
position: relative;
}
.wrap-sub .section--subnav--item {
width: calc(25% - 36px);
margin-bottom: 48px;
}
.section--subnav--item a.coverlink {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.section--subnav--item + .section--subnav--item {
margin-left: 48px;
}
.wrap-sub .section--subnav--item:nth-child(4n + 2) {
margin-left: 0;
}
.section--subnav--item span {
font-weight: bold;
font-size: 20px;
color: var(--black);
letter-spacing: 0;
line-height: 28px;
transition: 0.2s;
}
.section--subnav--item:hover span {
color: var(--blue);
}
.section--subnav--item--imageholder {
position: relative;
height: 330px;
overflow: hidden;
transform: translate3d(0, 0, 0);
margin-bottom: 20px;
}
.wrap-sub .section--subnav--item--imageholder {
height: auto;
aspect-ratio: 4/3;
}
.section--subnav--item--imageholder img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.2s;
}
.section--subnav--item:hover .section--subnav--item--imageholder img {
transform: scale(1.05);
}
.section--subnav--item > svg {
display: none;
}
.section--subnav--item--mobileicon {
display: none;
}
.section--subnav--back {
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) {
.section--subnav--item + .section--subnav--item {
margin-left: 24px;
}
}
@media screen and (max-width: 1024px) {
.section--navigation {
padding-left: 24px;
padding-right: 24px;
}
.section--navigation--logo svg {
height: 28px;
}
.section--navigation--right--navitems--top a + a {
margin-left: 12px;
}
.section--navigation--right--navitems--bottom a + a {
margin-left: 16px;
}
.section--subnav {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
max-height: calc(100% - 104px);
padding-top: 24px;
padding-bottom: 24px;
}
.section--subnav .container > div {
flex-wrap: wrap;
justify-content: space-between;
}
.section--subnav--item,
.wrap-sub .section--subnav--item {
width: calc(50% - 12px);
margin-bottom: 24px;
}
.wrap-sub .section--subnav--item,
.section--subnav--item + .section--subnav--item {
margin-left: 0;
}
.wrap-sub .section--subnav--item--imageholder {
height: 330px;
aspect-ratio: unset;
}
}
@media screen and (max-width: 1024px) {
html.scrollLock,
html.scrollLock body {
height: 100vh;
overflow: hidden;
}
body {
padding-top: 72px;
}
.section--navigation {
height: 72px;
}
.section--navigation--left {
margin-right: auto;
}
.section--navigation--right--search {
height: 32px;
border-left: none;
border-right: 2px solid rgba(0, 0, 0, 0.08);
margin: 0;
width: auto;
position: absolute;
top: calc(50% - 16px);
right: 64px;
transform: translateY(-100%);
transition: 0.2s;
opacity: 0;
}
.section--navigation--right {
position: fixed;
top: 72px;
bottom: 0;
left: 0;
right: 0;
background-color: var(--white);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
align-items: flex-start;
transform: translate3d(0, 0, 0) translateX(100%);
transition: 0.2s;
}
.section--navigation.open-main .section--navigation--right {
transform: translate3d(0, 0, 0) translateX(0%);
}
.section--navigation--right--navitems {
flex-direction: column-reverse;
align-items: flex-start;
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 24px;
padding-right: 24px;
}
.section--navigation--right--navitems--bottom {
margin-top: 0;
width: 100%;
}
.section--navigation--right--navitems--bottom a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 88px;
font-weight: bold;
font-size: 20px;
color: var(--black);
letter-spacing: 0;
line-height: 28px;
padding-left: 24px;
padding-right: 24px;
background-color: var(--mediumgrey);
}
.section--navigation--right--navitems--bottom a:after {
display: none;
}
.section--navigation--right--navitems--bottom a + a {
margin-left: 0;
margin-top: 16px;
}
.section--navigation--right--navitems--bottom a svg {
display: block;
width: 16px;
height: 16px;
}
.section--navigation--right--navitems--bottom a svg [fill="#000000"] {
transition: 0.2s;
}
.section--navigation--right--navitems--bottom a svg [stroke="#000000"] {
transition: 0.2s;
}
.section--navigation--right--navitems--bottom a.active svg [fill="#000000"],
.section--navigation--right--navitems--bottom a:hover svg [fill="#000000"] {
fill: var(--blue);
}
.section--navigation--right--navitems--bottom a.active svg [stroke="#000000"],
.section--navigation--right--navitems--bottom a:hover svg [stroke="#000000"] {
stroke: var(--blue);
}
.section--navigation--right--navitems--top {
margin-top: 64px;
padding-left: 24px;
margin-top: 32px;
}
.section--navigation--right--navitems--top a {
display: flex;
width: max-content;
font-size: 16px;
line-height: 32px;
}
.section--navigation--right--navitems--top a + a {
margin-left: 0;
margin-top: 16px;
}
.section--navigation--right--navburger {
display: flex;
align-items: center;
margin-left: 24px;
cursor: pointer;
height: 32px;
}
.section--navigation--right--navburger span {
font-weight: 500;
font-size: 16px;
color: var(--black);
letter-spacing: 0;
line-height: 20px;
transition: 0.2s;
}
.section--navigation--right--navburger .burger {
width: 16px;
height: 16px;
margin-left: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
padding-top: 1.5px;
padding-bottom: 1.5px;
}
.section--navigation--right--navburger .burger .petty {
width: 100%;
height: 2px;
border-radius: 2px;
background-color: var(--black);
transition: 0.2s;
}
.section--navigation--right--navburger .burger .petty:last-child {
width: 70%;
}
.section--navigation.open-main .section--navigation--right--search {
transform: translateY(0);
opacity: 1;
}
.section--navigation.open-main .section--navigation--right--navburger .burger .petty,
.section--navigation--right--navburger:hover .burger .petty {
width: 100%;
}
.section--navigation.open-main .section--navigation--right--navburger span {
transform: translateY(100%);
opacity: 0;
}
.section--navigation.open-main .section--navigation--right--navburger .burger .petty:nth-child(2) {
transform: translateX(50%);
opacity: 0;
}
.section--navigation.open-main .section--navigation--right--navburger .burger .petty:first-child {
transform: translateY(5.5px) rotate(-45deg);
}
.section--navigation.open-main .section--navigation--right--navburger .burger .petty:last-child {
transform: translateY(-5.5px) rotate(45deg);
}
.section--subnav {
top: 72px;
height: calc(100% - 72px);
max-height: unset;
z-index: 210;
transform: translateX(100%);
}
.section--subnav.active {
transform: translateX(0%);
}
.section--subnav .container > div {
transition: 0s;
display: block;
padding-top: 48px;
padding-bottom: 48px;
}
.section--subnav .container > div.active {
transition: 0s;
}
.section--subnav--item {
width: 100%;
height: 88px;
display: flex;
align-items: center;
padding-left: 24px;
padding-right: 24px;
background-color: var(--mediumgrey);
margin-bottom: 0;
}
.section--subnav--item + .section--subnav--item {
margin-top: 16px;
}
.section--subnav--item span {
opacity: 0.72;
font-size: 18px;
letter-spacing: 0.4px;
line-height: 24px;
}
.section--subnav--item > svg {
display: block;
width: 16px;
height: 16px;
margin-left: auto;
}
.section--subnav--item--imageholder {
display: none;
}
.section--subnav--item--mobileicon {
flex-shrink: 0;
display: block;
background-color: var(--black);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
}
.section--subnav--item--mobileicon svg {
width: 16px;
height: 16px;
}
.section--subnav--back {
display: block;
font-weight: bold;
font-size: 20px;
color: var(--black);
letter-spacing: 0;
line-height: 28px;
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 32px;
}
.section--subnav--back svg {
display: block;
width: 16px;
height: 16px;
margin-right: 16px;
}
.section--navigation--right--search--trigger.active {
transform: translateX(100%) translateX(10px);
z-index: 22;
background-color: var(--black);
}
.section--navigation--right--search--trigger.active svg [stroke="#000000"] {
stroke: var(--white);
}
.section--navigation--right--search--trigger.active svg [fill="#000000"] {
fill: var(--white);
}
.section--navigation--right--search {
z-index: 20;
}
.section--navigation--right--search--results {
width: 100vw;
right: -66px;
top: -21px;
height: 100vh;
border-top: 1px solid rgba(0, 0, 0, 0.16);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.section--navigation--right--search--darkener {
position: absolute;
left: auto;
right: -66px;
top: -20px;
}
.section--subnav:before {
display: none;
}
.wrap-sub .section--subnav--item {
width: 100%;
}
.section--navigation--right--search--results .form-element:after {
content: "";
display: block;
height: 1px;
left: 24px;
right: 80px;
bottom: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.16);
}
.section--navigation--right--search--results--replace .teaser--nav--search:first-child {
border-top: 0;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.meet-twp-grid {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.meet-twp-grid > div:first-child {
width: 100%;
}
.meet-twp-grid > div:nth-child(2) {
width: calc(100% - 464px);
flex-shrink: 0;
margin-left: 96px;
}
.meet-twp-grid h2 {
margin-bottom: 16px;
margin-top: 24px;
}
.meet-tpw-section .teaser-grid {
margin-bottom: 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) {
.meet-twp-grid > div:nth-child(2) {
width: calc(100% - 400px);
}
}
@media screen and (max-width: 1024px) {
.meet-twp-grid > div:nth-child(2) {
width: 100%;
margin-left: 0
}
.meet-twp-grid {
display: block;
}
.meet-txt-holder {
margin-bottom: 32px
}
.meet-twp-grid h2 {
margin-top: 0;
}
.meet-txt-holder h2 br,
.meet-txt-holder p br {
display: none;
}
.meet-tpw-section .teaser-sub-holder h5 br {
display: none;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.history-info-holder {
background: var(--mediumgrey);
display: flex;
flex-direction: column;
align-items: center;
padding-top: 104px;
padding-bottom: 104px;
padding-left: 24px;
padding-right: 24px;
}
.history-info-holder span svg {
height: 64px;
width: 64px;
}
.history-info-holder h2 {
margin-top: 56px;
margin-bottom: 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) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.history-info-holder {
align-items: flex-start;
padding-top: 64px;
padding-bottom: 64px;
}
.history-info-holder span svg {
height: 56px;
width: 56px;
}
.history-info-holder h2 {
margin-top: 32px;
margin-bottom: 48px;
}
.history-info-holder h2 br {
display: none
}
}
@media screen and (max-width: 480px) {
.history-info-holder .cta {
width: 100%
}
}
@media screen and (max-width: 330px) {
}
.iframe-embed-temp {
width: 100%;
position: relative;
left: 50%;
height: 14820px;
transform: translateX(-50%);
margin-bottom: -120px;
margin-top: -64px;
margin-left: 0;
margin-right: 0;
}
@media screen and (max-width: 1920px) {
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1440px) {
.iframe-embed-temp {
height: 16100px;
}
}
@media screen and (max-width: 1366px) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
.iframe-embed-temp {
margin-bottom: -100px;
margin-top: -56px;
}
}
@media screen and (max-width: 992px) {
.iframe-embed-temp {
height: 36500px;
}
}
@media screen and (max-width: 768px) {
.iframe-embed-temp {
height: 41300px;
}
}
@media screen and (max-width: 660px) {
.iframe-embed-temp {
margin-bottom: -64px;
margin-top: -40px;
}
}
@media screen and (max-width: 324px) {
.iframe-embed-temp {
margin-bottom: -64px;
margin-top: -40px;
height: 42300px;
}
}
@media screen and (max-width: 330px) {
}
.special-teaser-section .mobile-crosslinking-holder {
display: none;
}
@media screen and (max-width: 768px) {
.special-teaser-section .mobile-crosslinking-holder {
display: block;
}
.special-teaser-section .teaser-grid--columns_4.special {
display: none
}
.special-teaser-section.section-space-top--medium {
padding-top: 48px;
}
}
.special-teaser-section .teaser-grid--columns_4 > div {
width: calc(33% - 34px);
}
.full_width_teaser_cnt {
position: relative;
background-image: var(--gradblue);
text-align: center;
padding: 64px 32px;
}
.full_width_teaser_inner {
max-width: 480px;
margin: 0 auto;
}
.full_width_teaser h2,
.full_width_teaser p {
color: #fff;
}
.full_width_teaser p {
margin-top: 16px;
margin-bottom: 32px;
}
.full_width_teaser .cta {
margin: 0 auto;
}
.section--footer {
background-color: var(--blue);
padding-top: 88px;
padding-bottom: 88px;
padding-left: 24px;
padding-right: 24px;
}
.section--subfooter {
background-color: var(--bluedark);
padding-top: 36px;
padding-bottom: 36px;
padding-left: 24px;
padding-right: 24px;
}
.section--footer .container {
display: flex;
}
.section--footer-left {
width: 100%;
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
margin-bottom: -72px;
}
.section--footer-left > div {
flex-shrink: 0;
width: 33.333%;
display: flex;
flex-direction: column;
align-items: flex-start;
order: 4;
}
.section--footer-left > div:nth-child(1) {
order: 1;
}
.section--footer-left > div:nth-child(2) {
order: 2;
}
.section--footer-left > div.section--footer--newsletter-cnt {
order: 3;
}
.section--footer-left > div.section--footer--contact {
order: 6;
}
.section--footer-right > div {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.section--footer-left > div + div {
margin-bottom: 72px;
}
.section--footer--link {
color: var(--white);
font-weight: 300;
font-size: 15px;
letter-spacing: 0.33px;
line-height: 24px;
text-decoration: none;
display: flex;
/* width: max-content; */
cursor: pointer;
position: relative;
align-content: flex-start;
}
.section--footer--link svg {
width: 16px;
height: 16px;
margin-right: 16px;
position: relative;
top: 4px;
}
.section--footer--link:after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 1px;
background-color: var(--white);
transition: .2s;
}
.section--footer--link:hover:after {
right: auto;
left: 0;
width: 100%;
}
.section--footer--link + .section--footer--link {
margin-top: 16px;
}
.section--footer-right {
width: 33.33%;
flex-shrink: 0;
}
.section--footer-right > div + div {
margin-top: 56px;
}
.section--footer h5 {
color: var(--white);
margin-bottom: 32px;
}
.section--footer--newsletter.sent {
display: none;
}
.section--footer--newsletter > div {
margin-bottom: 16px;
}
.section--footer--newsletter button {
width: 100%;
height: 56px;
}
.section--footer--newsletter--grid {
display: flex;
}
.section--footer--newsletter--grid > div {
width: 100%;
}
.section--footer--newsletter--grid > div + div {
margin-left: 16px;
}
.section--footer--newsletter .input-holder--text input,
.section--footer--newsletter .input-holder--email input {
color: var(--white);
border-color: rgba(255,255,255,0.24);
height: 56px;
}
.section--footer--newsletter .input-holder--text label,
.section--footer--newsletter .input-holder--email label {
color: rgba(255,255,255,0.24);
}
.section--footer--newsletter-sent {
font-weight: 300;
font-size: 15px;
color: var(--white);
letter-spacing: 0.33px;
line-height: 24px;
display: flex;
align-items: center;
display: none;
}
.section--footer--newsletter.sent ~ .section--footer--newsletter-sent {
display: flex;
}
.section--footer--newsletter-sent-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid var(--blue);
flex-shrink: 0;
margin-right: 24px;
}
.section--footer--newsletter-sent-icon svg {
width: 24px;
height: 24px;
display: block;
}
.section--subfooter .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.section--subfooter .container > div .section--footer--link {
display: inline-flex;
margin-left: 20px;
margin-right: 20px;
margin-top: 0;
}
.section--subfooter .container > div:nth-child(2) .input-holder--text.select {
display: none;
}
.section--subfooter--logo {
position: relative;
}
.section--subfooter--logo a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.section--subfooter--logo svg {
height: 30px;
width: auto;
display: block;
}
.section--subfooter--logo [fill="#EB0000"] {
fill: #FFFFFF;
}
.section--subfooter--logo [stroke="#EB0000"] {
stroke: #FFFFFF;
}
.section--subfooter--logo [fill="#000000"] {
fill: #FFFFFF;
}
.section--subfooter--logo [stroke="#000000"] {
stroke: #FFFFFF;
}
.footer_some_cnt {
display: flex;
gap: 16px;
}
.section--footer--link-some {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: .2s;
}
.section--footer--link-some:hover {
opacity: 0.5;
}
.section--footer--link-some svg {
width: 20px;
height: 20px;
}
.section--subfooter .input-holder--text.select {
width: 120px;
}
.section--subfooter .input-holder--text.select input {
color: var(--white);
border-color: rgba(255,255,255,0.24);
height: 46px;
padding-top: 0;
padding-left: 16px;
padding-right: 16px;
font-weight: 300;
font-size: 14px;
letter-spacing: 0.4px;
line-height: 24px;
}
.section--subfooter .input-holder--text.select label {
display: none;
}
.section--subfooter .input-holder--text.select svg {
right: 16px;
}
.section--subfooter .input-holder--text.select svg [fill="#000000"] {
fill: #FFFFFF;
}
.section--subfooter .input-holder--text.select svg [stroke="#000000"] {
stroke: #FFFFFF;
}
@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) {
.section--subfooter .container {
flex-wrap: wrap;
margin-bottom: -24px;
}
.section--subfooter .container > div {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.section--subfooter .container > div {
margin-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.section--footer {
padding-top: 40px;
padding-bottom: 40px;
}
.section--footer .container {
display: block;
}
.section--footer-left {
width: 100%;
margin-bottom: 0;
}
.section--footer-left > div {
width: 50%;
}
.section--footer-left > div,
.section--footer-left > div:nth-child(1),
.section--footer-left > div:nth-child(2) {
order: 1;
}
.section--footer-left > div + div {
margin-bottom: 56px;
}
.section--footer-right {
width: 100%;
display: flex
}
.section--footer-right > div {
width: 50%;
flex-shrink: 0;
}
.section--footer-right > div:first-child {
padding-right: 32px
}
.section--footer-right > div + div {
margin-top: 0;
}
.section--footer--newsletter--grid {
display: block;
}
.section--footer--newsletter--grid > div + div {
margin-left: 0;
margin-top: 16px;
}
.section--subfooter {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
.section--subfooter .container {
margin-bottom: 0;
flex-direction: column-reverse;
}
.section--subfooter .container > div {
width: 100%;
margin-bottom: 0;
padding-top: 32px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.24);
}
.section--subfooter .container > div + div {
}
.section--subfooter .container > div:last-child {
display: none
}
.section--subfooter .container > div:nth-child(2) .input-holder--text.select {
display: block;
margin-left: 16px;
margin-right: 16px;
}
.section--subfooter .container > div .section--footer--link {
margin-left: 16px;
margin-right: 16px;
}
.section--subfooter .input-holder--text.select {
width: 80px;
}
.section--subfooter .input-holder--text.select input {
padding-left: 0;
padding-right: 0;
height: 24px;
border: none;
}
.section--subfooter .input-holder--text.select svg {
right: 0;
}
.section--footer--link-some {
margin-left: 16px;
margin-right: 16px;
}
.section--footer--link-some svg {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 660px) {
.section--footer h5 {
margin-bottom: 24px;
}
.section--footer-left > div {
width: 100%;
}
.section--footer-left > div + div {
margin-bottom: 0;
margin-top: 32px;
}
.section--footer-right {
flex-direction: column-reverse;
}
.section--footer-right > div:first-child {
padding-right: 0;
}
.section--footer-right > div {
width: 100%;
margin-top: 32px;
}
.section--footer-right > div + div {
margin-top: 32px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.community-section .container {
background-color: var(--mediumgrey);
padding: 84px;
position: relative;
}
.community-text-holder {
max-width: 368px;
}
.community-text-holder p:not(:first-child) {
margin-top: 16px;
}
.community-text-holder .cta {
margin-top: 32px;
}
.community_image {
position: absolute;
top: 0;
bottom: 0;
right: 0;
display: block;
width: calc(100% - 590px);
height: 100%;
object-fit: cover;
}
@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) {
.community-section .container {
padding: 80px 64px;
}
.community-text-holder {
max-width: 338px;
}
.community_image {
width: calc(100% - 450px);
}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
.community-text-holder {
padding: 0 48px;
max-width: 100%;
}
.community-text-holder .cta {
margin-top: 24px;
}
.community-section .container {
padding: 48px 0 0 0;
}
.community_image {
position: relative;
width: 100%;
margin-top: 64px;
}
}
@media screen and (max-width: 660px) {
.community-section .container {
padding: 32px 0 0 0;
overflow: hidden;
}
.community_image {
margin-top: 48px;
width: calc(100% + 80px);
margin-left: -40px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.only-text-section p {
margin-bottom: 32px;
max-width: 736px;
}
.contact-section {
display: flex;
padding-left: 0;
padding-right: 0;
}
.container-contact-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
min-height: max(50vh, 640px);
}
.container-contact-info > div {
display: flex;
flex-direction: column;
max-width: max-content;
}
.container-contact-info .cta svg:first-child,
.container-contact-info .cta.reverse:hover svg:first-child,
.container-contact-info .btn-hover-reverse:hover .cta.reverse svg:first-child {
margin-right: 24px;
margin-left: -28px;
opacity: 0;
visibility: hidden;
}
.contact-section h3 {
margin-bottom: 56px;
}
.contact-section .cta ~ .cta {
margin-top: 24px;
}
/*map*/
.map-holder {
width: 100%;
background-color: #FBF8F8;
position: relative;
}
.map-holder:before {
content: '';
display: block;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/*.mapboxgl-ctrl.mapboxgl-ctrl-group,*/
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-bottom-left {
opacity: 0;
}
.mapboxgl-popup-content {
padding: 0 !important;
}
.mapboxgl-popup-close-button {
font-size: 1.4rem !important;
right: 0.7rem !important;
top: 0.55rem !important;
}
@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) {
.contact-section {
flex-direction: column;
padding-top: 64px;
}
.container-contact-info {
padding-bottom: 64px;
padding-left: 32px;
align-items: flex-start;
min-height: unset;
}
.map-holder:before {
padding-top: 50vh
}
.contact-section h3 {
margin-bottom: 32px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
.contact-section {
flex-direction: column;
padding-top: 40px;
}
}
@media screen and (max-width: 330px) {
}
.extra-class--darkbgc{
background: var(--mediumgrey);
}
.teaser-news-section .teaser-grid.teaser-grid--columns_3 > div {
width: calc(33.3333% - 32px);
flex-shrink: 0;
margin-bottom: 48px;
}
.teaser-news-section h2 {
text-align: center;
margin-bottom: 64px;
}
.teaser-news-section .cta-style--secondarylight {
margin: 0 auto;
margin-top: 68px;
}
.teaser-news-section .teaser-holder .img-holder:before {
height: auto;
padding-top: 68%;
}
@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) {
.teaser-news-section h2 {
text-align: left;
margin-bottom: 40px
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
.teaser-news-section .cta-style--secondarylight {
display: none;
}
}
@media screen and (max-width: 330px) {
}
.event-bgc-section > .img-holder {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-left: 32px;
padding-right: 32px;
padding-top: 120px;
padding-bottom: 240px;
}
.event-bgc-section > .img-holder:before {
height: auto;
}
.event-bgc-section h2 {
position: relative;
color: var(--white);
z-index: 1;
text-align: center;
margin-bottom: 80px;
}
.event-bgc-section .cta-style--secondarydark {
margin: 0 auto;
margin-top: 64px;
}
.event-teaser--small .event-info-holder {
width: 100%;
}
/*.event-bgc-section*/ .slick-track {
display: flex;
}
/*.event-bgc-section*/ .slick-slide {
height: auto;
}
/*.event-bgc-section*/ .slick-slide .event-teaser-holder {
height: 100%;
justify-content: flex-start;
}
@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) {
.event-bgc-section > .img-holder {
padding-top: 100px;
padding-bottom: 232px;
}
.event-bgc-section h2 {
margin-bottom: 66px;
}
}
@media screen and (max-width: 768px) {
.event-bgc-section > .img-holder {
padding-top: 80px;
padding-bottom: 224px;
}
.event-bgc-section h2 {
margin-bottom: 53px;
}
}
@media screen and (max-width: 660px) {
.event-bgc-section > .img-holder {
padding-top: 64px;
padding-bottom: 216px;
}
.event-bgc-section h2 {
margin-bottom: 40px;
text-align: left
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.teaser-section {
overflow: hidden;
}
.teaser-section .teaser-grid.teaser-grid--columns_3 > div {
width: calc(33.3333% - 32px);
flex-shrink: 0;
margin-bottom: 48px;
}
.teaser-section h2 {
text-align: center;
margin-bottom: 64px;
}
.teaser-section .cta-style--secondarylight {
margin: 0 auto;
margin-top: 68px;
}
.teaser-section .teaser-holder .img-holder:before {
height: auto;
padding-top: 68%;
}
.teaser-section .img-holder:before {
}
@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) {
.teaser-section h2 {
text-align: left;
margin-bottom: 40px
}
}
@media screen and (max-width: 660px) {
.teaser-section .slider-container {
padding-left: 24px;
padding-right: 24px;
}
.teaser-section .cta-style--secondarylight {
margin-top: 48px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.teaser-holder {
position: relative;
}
.teaser-holder .teaser-top-info {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.teaser-holder .teaser-top-info h6.small {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1.2px;
}
.teaser-holder h6:not(.small) {
color: var(--grey);
}
.teaser-holder .teaser-top-info div {
width: 2px;
height: 2px;
background: var(--grey);
margin-left: 8px;
margin-right: 8px;
}
.teaser-holder .img-holder {
margin-bottom: 28px;
}
.teaser-holder img {
transition: 0.2s;
}
.news_filter_target .teaser-holder img.img-vorstand {
aspect-ratio: 1 / 1;
}
.teaser-holder p {
margin-top: 12px;
}
.teaser-holder p ~ .cta {
margin-top: 20px;
}
.teaser-holder h5 ~ .cta {
margin-top: 16px;
}
.teaser-holder h5 {
transition: 0.2s;
}
.teaser-holder .img-holder:after {
content: '';
display: block;
background: rgba(0,0,0,0.32);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: 0.2s;
}
@media screen and (min-width: 769px) {
.teaser-holder.btn-hover:hover {
cursor: pointer;
}
.teaser-holder.btn-hover:hover h5 {
color: var(--blue);
}
.teaser-holder.btn-hover:hover img {
transform: scale(1.05);
}
.teaser-holder.btn-hover:hover .img-holder:after {
opacity: 1;
}
}
/* singly / 1 column */
.teaser-grid--columns_1 .teaser-holder {
display: flex;
justify-content: space-between;
align-items: center;
}
.teaser-grid--columns_1 .teaser-sub-holder {
padding-left: 48px;
}
.teaser-price {
color: var(--blue);
font-weight: bold;
letter-spacing: 0.2px;
line-height: 20px;
opacity: 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) {
.teaser-grid--columns_1 .teaser-holder {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.teaser-grid--columns_1 .teaser-sub-holder {
padding-left: 0;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.teaser-event-sidebar {
background-color: var(--mediumgrey);
padding: 40px;
}
.teaser-event-sidebar h5 {
margin-bottom: 24px;
}
.teaser-event-sidebar-fact {
display: flex;
align-items: flex-start;
}
.teaser-event-sidebar-fact + .teaser-event-sidebar-fact {
margin-top: 20px;
}
.teaser-event-sidebar-fact svg {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-right: 16px;
position: relative;
top: 4px;
}
.teaser-event-sidebar-fact span {
opacity: 0.72;
font-size: 18px;
color: var(--black);
letter-spacing: 0.4px;
line-height: 24px;
}
.teaser-event-sidebar .cta {
width: 100%;
margin-top: 40px;
}
.teaser-event-sidebar-link {
display: flex;
margin-left: auto;
margin-right: auto;
width: max-content;
font-size: 15px;
color: var(--black);
letter-spacing: 0.17px;
line-height: 26px;
transition: .2s;
text-decoration: none;
border-bottom: 1px solid var(--black);
opacity: 0.4;
margin-top: 24px;
}
.teaser-event-sidebar-link:hover {
opacity: 1;
}
.equipment-holder {
background: var(--lightgrey);
height: 320px;
padding-top: 32px;
padding-left: 30px;
padding-right: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.equipment-info {
text-align: center;
}
.equipment-info h5 {
margin-bottom: 8px;
}
.equipment-img-holder {
overflow: hidden;
position: relative;
width: 100%;
height: 200px;
}
.equipment-img-holder img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.equipment-holder p {
font-size: 15px;
color: var(--darkgrey);
text-align: center;
line-height: 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) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
.equipment-holder {
flex-direction: row-reverse;
height: 120px;
padding: 0;
justify-content: flex-end;
padding-right: 32px;
}
.equipment-img-holder {
height: 100%;
width: 120px;
min-width: 120px;
}
.equipment-holder p {
text-align: left;
}
.equipment-info {
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.equipment-img-holder img {
padding-left: 12px;
padding-right: 12px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.icon-travel {
background: var(--white);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
padding-top: 20px;
padding-bottom: 16px;
padding-left: 4px;
padding-right: 4px;
align-items: center;
position: relative;
width: 100%;
}
.icon-travel svg {
margin-bottom: 12px;
flex-shrink: 0;
}
.icon-travel p {
font-weight: bold;
opacity: 1;
transition: 0.2s;
}
.icon-travel:hover p {
color: var(--blue);
}
@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) {
.icon-travel {
flex-direction: row;
align-items: center;
padding: 16px
}
.icon-travel svg {
margin-bottom: 0;
margin-right: 16px;
}
.icon-travel p {
line-height: 22px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.about-teaser-holder {
position: relative;
color: var(--white);
display: flex;
align-items: center;
}
.about-teaser-holder .img-holder:before {
padding-top: 132%;
height: auto;
}
.about-teaser-holder .img-holder {
flex-shrink: 0;
width: 150px;
}
.about-teaser-info {
padding-left: 32px;
padding-right: 32px;
}
.about-teaser-info h5 {
margin-bottom: 24px;
}
.about-teaser-info .cta-style--text {
color: var(--white);
font-weight: bold;
font-size: 18px;
letter-spacing: 0.2px;
line-height: 20px;
border-bottom: 2px solid var(--white);
padding-bottom: 8px;
}
.about-teaser-info .cta-style--text svg [stroke] {
stroke: var(--white);
}
@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) {
.about-teaser-info h5 {
margin-bottom: 16px;
}
.about-teaser-info {
align-self: center;
padding-bottom: 0;
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.about-teaser-holder .img-holder:before {
padding-top: 68%;
}
.about-teaser-holder .img-holder {
max-width: 50%;
}
}
@media screen and (max-width: 480px) {
.about-teaser-holder .img-holder {
max-width: 100%;
}
.about-teaser-holder .img-holder:before {
padding-top: 132%;
}
}
@media screen and (max-width: 330px) {
}
.cookiebanner {
position: fixed;
bottom: 32px;
left: 32px;
background-color: #fff;
z-index: 999;
padding: 24px;
width: calc(100% - 64px);
max-width: 720px;
box-shadow: 0 16px 40px 4px rgb(0 0 0 / 12%);
transition: .3s;
transform: translateY(100%);
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
}
.cookiebanner p {
font-size: 15px;
line-height: 24px;
}
.cookiebanner-ctas {
flex-shrink: 0;
display: flex;
align-items: center;
}
.cookiebanner-ctas .cta {
width: 100%;
font-size: 16px;
height: 48px;
}
.cookiebanner-ctas .cta + .cta {
margin-left: 24px;
}
.cookiebanner.active {
transform: translateY(0px);
opacity: 1;
visibility: visible;
}
@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) {
.cookiebanner {
display: block;
}
.cookiebanner-ctas {
margin-top: 12px;
}
}
@media screen and (max-width: 660px) {
.cookiebanner {
left: 0;
bottom: 0;
width: 100%;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.teaser--nav--search {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.teaser--nav--search a.coverlink {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.teaser--nav--search img {
width: 96px;
height: 64px;
object-fit: cover;
margin-right: 16px;
flex-shrink: 0;
}
.teaser--nav--search--textholder {
margin-right: 16px;
width: 100%;
}
.teaser--nav--search svg {
width: 16px;
height: 16px;
transition: .2s;
flex-shrink: 0;
}
.teaser--nav--search:hover svg {
transform: translateX(6px);
}
.teaser--nav--search--textholder--title {
font-weight: bold;
font-size: 16px;
color: var(--darkgrey);
letter-spacing: 0.2px;
line-height: 24px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
transition: .2s;
}
.teaser--nav--search:hover .teaser--nav--search--textholder--title {
color: var(--blue);
}
.teaser--nav--search--textholder--text {
font-size: 15px;
color: var(--grey);
letter-spacing: 0;
line-height: 24px;
margin-top: 8px;
transition: .2s;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.teaser-holder {
position: relative;
}
.teaser-holder .teaser-top-info {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.teaser-holder .teaser-top-info h6.small {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1.2px;
}
.teaser-holder h6:not(.small) {
color: var(--grey);
}
.teaser-holder .teaser-top-info div {
width: 2px;
height: 2px;
background: var(--grey);
margin-left: 8px;
margin-right: 8px;
}
.teaser-holder .img-holder {
margin-bottom: 28px;
}
.teaser-holder img {
transition: 0.2s;
}
.news_filter_target .teaser-holder img {
aspect-ratio: 16 / 9;
}
.teaser-holder p {
margin-top: 12px;
}
.teaser-holder p ~ .cta {
margin-top: 20px;
}
.teaser-holder h5 ~ .cta {
margin-top: 16px;
}
.teaser-holder h5 {
transition: 0.2s;
}
.teaser-holder .img-holder:after {
content: '';
display: block;
background: rgba(0,0,0,0.32);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: 0.2s;
}
@media screen and (min-width: 769px) {
.teaser-holder.btn-hover:hover {
cursor: pointer;
}
.teaser-holder.btn-hover:hover h5 {
color: var(--blue);
}
.teaser-holder.btn-hover:hover img {
transform: scale(1.05);
}
.teaser-holder.btn-hover:hover .img-holder:after {
opacity: 1;
}
}
/* singly / 1 column */
.teaser-grid--columns_1 .teaser-holder {
display: flex;
justify-content: space-between;
align-items: center;
}
.teaser-grid--columns_1 .teaser-sub-holder {
padding-left: 48px;
}
.teaser-price {
color: var(--blue);
font-weight: bold;
letter-spacing: 0.2px;
line-height: 20px;
opacity: 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) {
.teaser-grid--columns_1 .teaser-holder {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.teaser-grid--columns_1 .teaser-sub-holder {
padding-left: 0;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.about-icon-holder {
background-color: var(--bgcsoft);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
color: var(--white);
display: flex;
align-items: center;
padding-top: 36px;
padding-bottom: 36px;
padding-left: 48px;
padding-right: 48px;
}
.about-icon-holder svg {
height: 48px;
width: 48px;
margin-right: 48px;
}
.about-icon-holder h3 {
font-family: 'CircularXX';
font-weight: bold;
margin-bottom: 8px;
}
.about-icon-holder h6 {
opacity: 0.72;
letter-spacing: 0.33px;
line-height: 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) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.about-icon-holder {
padding-left: 24px;
padding-right: 24px;
}
.about-icon-holder h3 {
font-size: 28px;
}
.about-icon-holder svg {
margin-right: 24px;
}
.about-icon-holder h3 {
margin-bottom: 0;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
/* basic styles */
.event-teaser-holder {
background: var(--mediumgrey);
display: flex;
position: relative;
overflow: hidden;
cursor: pointer;
}
.event-teaser-holder ~ .event-teaser-holder {
margin-top: 48px;
}
.event-teaser-holder p {
opacity: 0.72;
}
/* banner */
.banner {
background: var(--blue);
color: var(--white);
position: absolute;
right: -42px;
top: 40px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
z-index: 1;
width: 200px;
transform: rotate(45deg);
}
.banner h6 {
font-weight: 500;
align-items: center;
white-space: nowrap;
}
.event-teaser-holder img {
transition: 0.2s;
}
.event-teaser-holder:hover img {
transform: scale(1.05);
}
/* left */
.content-holder {
height: 100%;
}
.img-holder {
height: 100%;
}
.event-teaser-holder .img-holder:before {
height: auto;
}
.img-holder img {
width: 100%;
}
.date-holder {
box-shadow: 0 8px 48px -8px rgba(0,0,0,0.12);
background: var(--white);
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
width: 84px;
height: 96px;
align-items: center;
justify-content: center;
margin-top: 8px;
margin-left: 8px;
width: 80px;
height: 88px;
}
.date-holder span {
line-height: 30px;
}
.date-holder span:first-child {
font-family: 'Akko Rounded W01';
font-size: 48px;
color: var(--blue);
letter-spacing: -2px;
line-height: 56px;
margin-top: 15px;
}
.date-holder span:last-child {
text-transform: uppercase;
color: var(--blue);
opacity: .48;
font-size: 14px;
letter-spacing: 1.4px;
line-height: 16px;
}
/* right */
.event-info-holder {
padding-top: 36px;
padding-left: 40px;
padding-right: 40px;
height: 100%;
width: 100%;
}
.event-info-holder h5 ~ p {
margin-top: 20px;
max-width: 368px;
}
.event-info-holder h5 {
transition: 0.2s;
}
.event-teaser-holder:hover h5 {
color: var(--blue);
}
.event-info-holder ul {
padding-top: 24px;
padding-bottom: 36px;
}
.event-info-holder ul li {
display: flex;
}
.event-info-holder ul li ~ li {
margin-top: 12px;
}
.event-info-holder li svg {
margin-top: 4px;
display: inline-block;
vertical-align: top;
opacity: 0.72;
flex-shrink: 0;
}
.event-info-holder ul li div {
padding-left: 16px;
display: inline-block;
font-size: 18px;
color: var(--black);
letter-spacing: 0.4px;
line-height: 24px;
}
/* cta */
.event-teaser-holder .cta {
margin-left: 0;
margin-right: auto;
margin-bottom: 36px;
}
/* big teaser */
.event-teaser--big .content-holder {
width: 100%;
height: auto;
}
/*.event-teaser--big .img-holder {
min-height: 344px;
}*/
.event-teaser--big .event-info-holder {
width: 100%;
}
/* small teaser */
.event-teaser--small {
background: var(--white);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
max-width: 576px;
padding: 0;
justify-content: center;
}
.event-teaser--small .content-holder {
width: 100%;
height: auto;
}
.event-teaser--small .event-info-holder {
width: 356px;
flex-shrink: 0;
}
.event-teaser--small .event-info-holder ul {
padding-top: 20px;
}
.slider.slider--2 .event-teaser--small .event-info-holder {
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) {
.slider.slider--2 .event-teaser--small .event-info-holder {
width: 100%;
}
.event-teaser-holder {
flex-direction: column;
align-items: flex-start;
height: 100%;
}
.event-teaser--big.event-teaser-holder .img-holder:before {
padding-top: 48%;
}
.event-teaser--big .event-info-holder {
/* width: auto;*/
}
.event-teaser--big .event-info-holder ul {
padding-top: 12px;
padding-bottom: 64px;
}
.event-teaser--big .event-info-holder ul li ~ li {
margin-top: 8px;
}
.event-teaser--big .content-holder,
.event-teaser--small .content-holder {
width: 100%;
}
.event-teaser--big {
max-width: 100%;
}
.event-teaser--big .event-info-holder {
padding-top: 24px;
padding-left: 24px;
padding-right: 24px;
}
.event-teaser--big .event-teaser-holder .cta {
bottom: 24px;
right: 24px;
}
.event-teaser-holder .cta {
margin-right: 24px;
margin-bottom: 24px;
}
/* small */
.event-teaser--small.event-teaser-holder .img-holder:before {
padding-top: 67%;
}
.event-teaser--small .event-info-holder {
width: 100%;
}
.event-info-holder {
padding-top: 24px;
padding-left: 24px;
width: 100%;
height: 100%;
}
.event-teaser--small .event-info-holder ul {
padding-top: 12px;
padding-bottom: 16px;
}
.event-info-holder ul li ~ li {
margin-top: 8px;
}
}
@media screen and (max-width: 660px) {
.event-teaser--big .date-holder span:first-child {
font-size: 40px;
letter-spacing: -1.67px;
line-height: 48px;
}
.event-teaser--big .event-info-holder h5 ~ p {
display: none;
}
.banner {
transform: rotate(45deg) translate(30%, -90px);
}
.event-teaser--big.event-teaser-holder .img-holder:before {
padding-top: 59%;
}
.event-teaser--big .date-holder {
width: 76px;
height: 80px;
padding: 0;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.cost-holder {
background: var(--mediumgrey);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 24px;
padding-right: 24px;
}
.detail-wrapper h6 {
opacity: 0.72;
line-height: 24px;
}
.detail-wrapper h6 ~ span {
opacity: 1;
font-size: 12px;
color: var(--grey);
letter-spacing: 0.27px;
line-height: 24px;
margin-top: 0;
}
.top-info-holder {
margin-top: 6px;
}
.top-info-holder span {
font-weight: bold;
color: var(--black);
}
.top-info-holder span:first-child {
font-size: 22px;
line-height: 32px;
}
.top-info-holder span:last-child {
font-size: 40px;
line-height: 56px;
}
.bottom-info-holder {
display: flex;
}
.bottom-info-holder span {
opacity: 0.24;
font-size: 12px;
color: var(--black);
letter-spacing: 0.27px;
line-height: 12px;
display: flex;
align-items: flex-end;
}
.bottom-info-holder h6 {
line-height: 15px;
margin-left: 5px;
margin-right: 5px;
font-weight: bold;
}
.detail-wrapper h6 br {
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: 1024px) {
.top-info-holder span:last-child {
font-size: 36.00px;
line-height: 49.00px;
}
.top-info-holder span:first-child {
font-size: 20.67px;
line-height: 32.00px;
}
.detail-wrapper h6 {
margin-top: 6px;
}
}
@media screen and (max-width: 768px) {
.top-info-holder span:last-child {
font-size: 32.00px;
line-height: 42.00px;
}
.top-info-holder span:first-child {
font-size: 19.33px;
line-height: 32.00px;
}
.detail-wrapper h6 br {
display: block;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
.cost-holder {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 16px;
grid-row-gap: 0px;
padding: 16px;
}
.top-info-holder span:first-child {
font-size:18.00px;
line-height:32.00px;
}
.top-info-holder span:last-child {
font-size:28.00px;
line-height:35.00px;
}
.detail-wrapper h6 {
font-size: 15px;
line-height: 22px;
}
.bottom-info-holder {
white-space: nowrap;
}
}
@media screen and (max-width: 330px) {
}
/*basics*/
.fact-features {
width: 100%;
background: var(--mediumgrey);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 136px;
padding: 32px;
}
.fact-features.large {
padding-bottom: 20px;
}
.fact-features .img-holder {
margin-bottom: 16px;
}
.fact-features svg {
width: 100%;
height: 32px;
}
.fact-features h6 {
letter-spacing: 0.33px;
line-height: 24px;
}
.fact-features h6 ~ h6 {
opacity: 0.24;
}
.fact-features h6:only-child {
opacity: 0.72;
}
/*small*/
.fact-features.fact-features--small {
justify-content: center;
padding: 0;
}
.fact-features.fact-features--small svg {
height: 22px;
margin-bottom: 24px;
}
.fact-features.fact-features--small h6 {
margin: 0;
}
/*large*/
.fact-features.fact-features--large {
justify-content: center;
padding: 0;
}
.fact-features.fact-features--large svg {
height: 22px;
margin-bottom: 12px;
}
.fact-features.fact-features--small h6 {
margin: 0;
}
.fact-features.fact-features--large .features-info {
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) {
.fact-features {
flex-direction: row;
height: 72px;
padding: 0;
}
.fact-icon-holder {
width: 75px;
display: flex;
align-items: center;
justify-content: center;
padding-left: 16px;
padding-right: 16px
}
.features-info {
width: calc(100% - 75px);
}
.fact-features svg {
width: auto;
height: 16px;
}
.fact-features.fact-features--large .features-info {
text-align: left;
}
.fact-features.fact-features--large svg {
height: 16px;
margin-bottom: 0;
}
.fact-features.fact-features--small svg {
height: 16px;
margin-bottom: 0;
}
}
@media screen and (max-width: 330px) {
}
/*MAIN STYLES*/
.cta {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: auto;
width: max-content;
height: 64px;
margin: 0;
padding-left: 24px;
padding-right: 24px;
transform: translate3d(0, 0, 0);
font-size: 18px;
line-height: 20px;
font-weight: bold;
letter-spacing: 0.2px;
appearance: none;
-webkit-appearance: none;
text-decoration: none;
background: none;
border: none;
cursor: pointer;
transition: color .2s;
}
.cta span {
white-space: nowrap;
}
.cta[disabled] {
pointer-events: none;
opacity: .5;
}
.cta svg {
flex-shrink: 0;
width: 16px;
height: 16px;
transition: .2s;
}
.cta svg:first-child,
.cta.reverse:hover svg:first-child {
margin-right: 12px;
margin-left: -28px;
opacity: 0;
visibility: hidden;
}
.cta:hover svg:first-child,
.cta.reverse:not(:hover) svg:first-child {
opacity: 1;
visibility: visible;
margin-left: 0;
}
.cta svg:last-child,
.cta.reverse:hover svg:last-child {
margin-left: 12px;
}
.cta:hover svg:last-child,
.cta.reverse:not(:hover) svg:last-child {
margin-left: -16px;
opacity: 0;
visibility: hidden;
transform: translateX(28px);
}
.cta.reverse:hover svg:last-child {
opacity: 1;
visibility: visible;
margin-left: 12px;
transform: translateX(0);
}
.cta.cta--icononly svg:first-child {
margin-right: 0;
}
@media screen and (min-width: 769px) {
.btn-hover-reverse:hover .cta.reverse svg:first-child {
margin-right: 12px;
margin-left: -28px;
opacity: 0;
visibility: hidden;
}
.btn-hover:hover .cta svg:first-child,
.btn-hover-reverse:not(:hover) .cta.reverse svg:first-child {
opacity: 1;
visibility: visible;
margin-left: 0;
}
.btn-hover-reverse:hover .cta.reverse svg:last-child {
margin-left: 12px;
}
.btn-hover:hover .cta svg:last-child,
.btn-hover-reverse:not(:hover) .cta.reverse svg:last-child {
margin-left: -16px;
opacity: 0;
visibility: hidden;
transform: translateX(28px);
}
.btn-hover-reverse:hover .cta.reverse svg:last-child
{
opacity: 1;
visibility: visible;
margin-left: 12px;
transform: translateX(0);
}
}
/*link inside text*/
p > a {
color: var(--blue);
opacity: 1;
text-decoration: none;
position: relative;
}
p > a:after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 1.5px;
background-color: var(--blue);
transition: .2s;
}
p > a:hover:after {
right: auto;
left: 0;
width: 100%;
}
.cta-style--primary {
background: var(--gradblue);
color: var(--white);
font-weight: bold;
}
.cta-style--primary.gold {
background: var(--gradblue);
color: var(--white);
font-weight: bold;
}
.cta-style--primary svg [stroke] {
stroke: var(--white);
}
.cta-style--secondarylight {
background: var(--lightgrey);
color: var(--blue);
}
.cta-style--secondarylight svg [stroke] {
stroke: var(--blue);
}
.cta-style--secondarydark {
background: var(--black);
color: var(--white);
background: #363433;
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
}
.cta-style--white {
background: #fff;
color: var(--blue);
font-weight: bold;
}
.cta-style--white svg [stroke] {
stroke: var(--blue);
}
.cta-style--speciallight {
background: var(--bgcsoft);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
color: var(--white);
}
.cta-style--speciallight svg [stroke] {
stroke: var(--white);
}
.cta-style--secondarydark svg [stroke] {
stroke: var(--white);
}
.cta-style--text {
padding: 0;
color: var(--blue);
height: auto;
}
.cta-style--text:hover {
color: var(--holz);
}
.cta-style--text svg [stroke] {
stroke: var(--blue);
}
.cta-style--text:hover svg [stroke] {
stroke: var(--holz);
}
.cta-style--text.secondary {
padding: 0;
color: var(--white);
height: auto;
}
.cta-style--text.secondary svg [stroke] {
stroke: var(--white);
}
.cta-style--text.columns_2 {
align-items: flex-start;
line-height: 24px;
}
.cta-style--text.columns_2 svg {
margin-top: 4px;
}
/*.cta-style--text svg:first-child {
margin-right: 8px;
}
.cta-style--text svg:last-child {
margin-left: 8px;
}*/
/* slider btns */
.cta-style--right-icon-dark,
.cta-style--right-icon-dark,
.cta-style--right-icon-bright,
.cta-style--right-icon-brigth {
width: 64px;
height: 64px;
padding: 0;
}
.cta-style--right-icon-dark {
background: var(--black);
}
/*.cta.cta-style--right-icon-dark svg:first-child,
.cta.cta-style--right-icon-dark svg:last-child,
.cta.cta-style--left-icon-dark svg:first-child,
.cta.cta-style--left-icon-dark svg:last-child,
.cta-style--right-icon-bright svg:first-child,
.cta-style--right-icon-bright svg:last-child,
.cta-style--left-icon-bright svg:first-child,
.cta-style--left-icon-bright svg:last-child {
margin-left: 0;
margin-right: 0;
}*/
.cta-style--right-icon-dark svg [stroke],
.cta-style--left-icon-dark svg [stroke] {
stroke: var(--white);
}
.cta-style--left-icon-dark {
background: var(--black);
}
.cta-style--right-icon-bright,
.cta-style--left-icon-bright {
box-shadow: 0 8px 48px -8px rgba(0,0,0,0.12);
background: var(--white);
}
.cta-style--right-icon-bright svg [stroke],
.cta-style--left-icon-bright svg [stroke] {
stroke: var(--black);
}
.cover-link {
position: absolute;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 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) {
}
@media screen and (max-width: 480px) {
.cta-style--text {
font-size: 16px;
letter-spacing: 0.18px;
line-height: 20px;
}
}
@media screen and (max-width: 330px) {
}
.pointer-events-none {
pointer-events: none;
}
.contact-section .cta.btn-offnungszeiten {
margin-top: 0;
color: var(--grey);
font-weight: normal;
}
.rent-teaser-holder {
position: relative;
}
.rent-detail-holder {
padding-top: 32px;
padding-bottom: 24px;
}
.rent-teaser-holder:hover h5 {
color: var(--blue);
}
.rent-detail-holder h5 {
margin-bottom: 20px;
transition: 0.2s;
}
.rent-teaser-holder .img-holder {
height: 256px;
}
.rent-facts-holder {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 12px;
}
.rent-facts-holder li {
display: flex;
align-items: center;
}
.rent-facts-holder h6 {
margin-left: 12px;
opacity: 0.72;
font-weight: normal;
font-size: 15px;
letter-spacing: 0.33px;
line-height: 24px;
}
.rent-teaser-holder img {
transition: 0.2s;
cursor: pointer;
}
.rent-teaser-holder:hover img {
transform: scale(1.05);
}
.rent-teaser-holder svg {
max-height: 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) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.rent-teaser-holder .img-holder {
height: 184px;
}
.rent-detail-holder {
padding-top: 24px;
padding-bottom: 16px;
}
.rent-detail-holder h5 {
margin-bottom: 16px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.teaser-bgc-line {
position: relative;
cursor: pointer;
}
.teaser-bgc-line-holder {
position: absolute;
left: 24px;
width: 12px;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.teaser-bgc-line-holder:before,
.teaser-bgc-line-holder:after {
content: '';
display: block;
width: 2px;
background-color: var(--white);
height: 100%;
}
.teaser-bgc-line-holder span {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--white);
display: block;
flex-shrink: 0;
margin-top: 16px;
margin-bottom: 16px;
}
.teaser-bgc-line:first-child .teaser-bgc-line-holder:before,
.teaser-bgc-line:last-child .teaser-bgc-line-holder:after {
opacity: 0;
}
.teaser-bgc-line:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.40);
}
.teaser-bgc-line .img-holder:before {
padding-top: 0px;
height: 160px;
}
.bgc-line-text-holder {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
padding-left: 60px;
padding-right: 24px;
z-index: 4;
}
.bgc-line-text-holder h5 {
color: var(--white);
}
.bgc-line-text-holder p {
color: var(--white);
margin-top: 4px;
margin-bottom: 0px;
}
.teaser-bgc-line .cover-link {
z-index: 10;
}
@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) {
.section--phasen--mobile-teasers > .teaser-bgc-line ~ .teaser-bgc-line {
margin-top: 1px
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
/*basic form elements*/
.input-holder--text,
.input-holder--date,
.input-holder--email {
position: relative;
}
.input-holder--text input,
.input-holder--date input,
.input-holder--email input {
border-radius: 0;
border: 1px solid #D4D4D4;
outline: none;
width: 100%;
background-image: none;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
transform: translateY(0);
z-index: 1;
font-weight: bold;
font-size: 18px;
color: var(--black);
letter-spacing: 0.2px;
line-height: 24px;
padding-left: 24px;
height: 64px;
padding-right: 50px;
}
.input-holder--text.filled input,
.input-holder--date.filled input,
.input-holder--email.filled input {
padding-top: 22px;
}
.input-holder--text label,
.input-holder--date label,
.input-holder--email label {
outline: none;
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
transition: 0.2s;
font-size: 18px;
color: var(--grey);
line-height: 24px;
pointer-events: none;
}
.input-holder--text.filled label,
.input-holder--date.filled label,
.input-holder--email.filled label {
font-size: 15px;
color: var(--grey);
line-height: 24px;
transform: translateY(-50%) translateY(-12px);
}
.input-holder--text svg,
.input-holder--date svg,
.input-holder--email svg {
width: 16px;
height: 16px;
position: absolute;
top: calc(50% - 8px);
right: 24px;
z-index: 2;
cursor: pointer;
}
.errorMsg {
display: none;
}
.error .errorMsg {
display: block;
}
.custom_select_options {
display: none;
}
.input-holder--text.select select {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0;
}
@media screen and (max-width: 660px) {
.input-holder--text.filled label,
.input-holder--date.filled label,
.input-holder--email.filled label {
font-size: 12px;
line-height: 24px;
transform: translateY(-50%) translateY(-12px);
}
}
.grid-span-2 {
grid-column: 1 / -1;
}
.pt-4 {
padding-top: 16px;
}
.input-holder--checkbox {
display: flex;
align-items: center;
}
.input-holder--checkbox label {
cursor: pointer;
}
.input-holder--checkbox input ~ label {
font-size: 15px;
color: var(--grey);
letter-spacing: 0.17px;
line-height: 24px;
display: flex;
align-items: center;
position: relative;
}
.input-holder--checkbox input:checked ~ label {
font-weight: bold;
font-size: 15px;
color: var(--black);
letter-spacing: 0.17px;
line-height: 24px;
}
.input-holder--checkbox input {
display: none;
}
.input-holder--checkbox input ~ label .pseudo-checkbox {
position: relative;
flex-shrink: 0;
width: 32px;
height: 32px;
background-color: var(--white);
border: 1px solid var(--bordergrey);
margin-right: 12px;
overflow: hidden;
}
.input-holder--checkbox input ~ label .pseudo-checkbox::after {
content: '';
display: block;
top: 1px;
left: 1px;
height: 30px;
width: 30px;
background-color: var(--white);
position: absolute;
transition: .2s;
}
.input-holder--checkbox input:checked ~ label .pseudo-checkbox::after {
transform-origin: right center;
transform: scaleX(0);
}
.input-holder--checkbox input ~ label:active .pseudo-checkbox,
.input-holder--checkbox input ~ label:active .pseudo-checkbox::after {
transform: scale(0.9);
transition: 0s;
}
.input-holder--checkbox svg {
position: absolute;
left: 8px;
top: 8px;
transition: 0.2s;
}
.checkbox-texts .sublabel {
font-size: 13px;
}
.checkbox-texts .sublabel,
.input-holder--checkbox input:checked ~ label .checkbox-texts .sublabel {
font-weight: 300;
}
.simple-fact-holder {
display: flex;
align-items: center;
flex-direction: column;
background: var(--mediumgrey);
padding: 32px;
}
.simple-fact-holder h3 {
font-family: 'CircularXX';
margin-bottom: 16px;
font-weight: bold;
font-size: 32px;
color: var(--black);
text-align: center;
line-height: 32px;
}
.simple-fact-holder h6 {
opacity: 0.72;
text-align: center;
line-height: 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) {
}
@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) {
}
.about-text-holder {
color: var(--white);
}
.about-text-holder h6 {
opacity: 0.64;
font-weight: bold;
font-size: 14px;
letter-spacing: 2px;
line-height: 20px;
text-transform: uppercase;
text-align: center;
}
.about-text-holder h6 ~ h2 {
margin-top: 20px;
}
.about-text-holder h6 ~ h2.small {
margin-top: 24px;
}
.about-text-holder h2 {
text-align: center;
}
.about-text-holder h2.small {
font-size: 40px;
text-align: center;
line-height: 56px;
}
@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) {
.about-text-holder h2.small {
font-size:33.33px;
line-height:46.67px;
}
}
@media screen and (max-width: 768px) {
.about-text-holder h2.smal {
font-size:26.67px;
line-height:37.33px;
}
}
@media screen and (max-width: 660px) {
.about-text-holder h2.small {
font-weight: bold;
font-size: 20px;
line-height: 28px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
z-index: 1;
}
select::-ms-expand {
display: none;
}
.fact-m-holder {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.fact-m-holder ~ .fact-m-holder {
margin-top: 24px;
}
.fact-m-holder p {
margin-top: 8px;
}
/*basics*/
.mosaik-holder {
position: relative;
}
.mosaik-holder + .mosaik-holder {
margin-top: 32px;
}
/*ratios*/
.mosaik-style--360 .img-holder:before {
padding-top: 50.5%;
}
.mosaik-style--big .img-holder:before {
padding-top: 50.5%;
}
.mosaik-style--columns_2 .img-holder:before {
padding-top: 56.8%;
height: auto;
}
.mosaik-style--video .img-holder:before {
padding-top: 50.5%;
}
/*2columns*/
.mosaik-style--columns_2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 32px;
grid-row-gap: 32px;
}
/*360*/
.mosaik-holder.mosaik-style--360 {
cursor: pointer;
z-index: 1;
}
.mosaik-holder.mosaik-style--360 .img-holder:before,
.mosaik-holder.mosaik-style--360 .img-holder:after {
transition: .2s;
}
.mosaik-holder.mosaik-style--360:active .img-holder:before,
.mosaik-holder.mosaik-style--360:active .img-holder:after {
opacity: 0;
}
.mosaik-holder.mosaik-style--360 iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.mosaik-style--360 .img-holder:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 28%, rgba(0,0,0,0.50) 100%);
z-index: 2;
pointer-events: none;
}
.mosaik-holder.mosaik-style--360 img {
z-index: -1;
}
.mosaik-holder.mosaik-style--360 svg {
height: 52px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 32px;
z-index: 4;
pointer-events: none;
}
/*video */
.mosaik-holder.mosiak-style--video {
cursor: pointer;
}
.mosaik-style--video img {
cursor: pointer;
}
.mosaik-style--video:hover .cta {
background: var(--blue);
}
.mosaik-style--video .cta {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
transition: 0.2s;
}
@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) {
/*2columns*/
.mosaik-style--columns_2 {
grid-column-gap: 12px;
grid-row-gap: 32px;
}
.mosaik-style--columns_1_2 {
grid-column-gap: 12px;
grid-row-gap: 12px;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
.mosaik-style--columns_2 {
grid-template-columns: 1fr;
}
.mosaik-style--video .cta {
width: 56px;
height: 56px;
}
/*ratios*/
.mosaik-style--big .img-holder:before,
.mosaik-style--columns_2 .img-holder:before,
.mosaik-style--video .img-holder:before,
.mosaik-style--columns_1_2 > .img-holder:nth-child(2):before,
.mosaik-style--columns_1_2 > .img-holder:nth-child(3):before,
.mosaik-style--columns_1_2 > .img-holder:nth-child(1):before {
padding-top: 56.25%;
}
}
@media screen and (max-width: 330px) {
}
.fact-s-holder {
display: flex;
align-items: center;
position: relative;
}
.facticon-info.false {
display: none;
}
.facticon-info svg {
margin-left: 8px;
cursor: pointer;
transition: 0.2s;
}
.facticon-info:hover svg {
transform: scale(1.1);
}
.fact-s-holder p ~ .info-trigger-holder {
margin-left: 8px;
}
.fact-s-holder .info-trigger-holder {
position: static;
}
@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) {
}
.facticon-holder.round {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--black);
border-radius: 50%;
min-width: 40px;
}
.facticon-holder {
margin-right: 16px;
}
.facticon-holder svg {
width: 16px;
height: 16px;
}
.simple-fact-holder {
display: flex;
align-items: center;
flex-direction: column;
background: var(--mediumgrey);
padding: 32px;
}
.simple-fact-holder h3 {
font-family: 'CircularXX';
margin-bottom: 16px;
font-weight: bold;
font-size: 32px;
color: var(--black);
text-align: center;
line-height: 32px;
}
.simple-fact-holder h6 {
opacity: 0.72;
}
@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) {
}
.renter-holder {
border: 1px solid rgba(0,0,0,0.16);
padding: 32px;
}
.renter-logo-holder {
height: 160px;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.renter-holder h6 {
margin-top: 8px;
opacity: 0.72;
font-weight: normal;
font-size: 15px;
color: var(--black);
letter-spacing: 0.33px;
line-height: 24px;
}
.renter-cta-holder {
margin-top: 20px;
margin-bottom: 24px;
}
.renter-cta-holder .cta {
color: var(--black);
opacity: 0.72;
font-size: 15px;
letter-spacing: 0.33px;
line-height: 24px;
font-weight: normal;
}
.renter-cta-holder .cta svg [stroke] {
stroke: var(--black);
}
.renter-cta-holder .cta ~ .cta {
margin-top: 12px;
}
.input-holder--radio {
display: flex;
align-items: center;
}
.input-holder--radio label {
cursor: pointer;
}
.input-holder--radio input ~ label {
font-size: 15px;
color: var(--grey);
letter-spacing: 0.17px;
line-height: 24px;
display: flex;
align-items: center;
position: relative;
}
.input-holder--radio input:checked ~ label {
font-weight: bold;
font-size: 15px;
color: var(--black);
letter-spacing: 0.17px;
line-height: 24px;
}
.input-holder--radio input {
display: none;
}
.input-holder--radio input ~ label:before {
content: '';
background: var(--white);
border: 1px solid var(--bordergrey);
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 12px;
transition: 0.2s;
}
.input-holder--radio input ~ label:active:before {
transform: scale(0.9);
}
.input-holder--radio input:checked ~ label svg {
opacity: 1;
}
.input-holder--radio svg {
opacity: 0;
position: absolute;
left: 8px;
top: 8px;
transition: 0.2s;
}
/*.input-holder--radio input:checked label:before {
border: 8px solid var(--blue);
}*/
.input-holder--radio input:checked ~ label:before {
border: 8px solid var(--blue);
}
.input-holder--radio label:hover:before {
border: 1px solid var(--blue);
}
.icon-transparent {
width: 16px;
height: 16px;
}
/*basics*/
.testimonial-holder {
background: var(--lightgrey);
}
.testimonial-holder h5 {
margin-bottom: 24px;
font-weight: 500;
font-size: 18px;
line-height: 24px;
}
.testimonial-holder p.small {
font-size: 15px;
}
.testimonial-holder br {
display: none;
}
/* text only */
.testimonial--text {
padding: 56px;
}
.testimonial--text h4 {
margin-bottom: 32px;
font-weight: 500;
}
.testimonial--text .textholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 480px;
margin: 0 auto;
text-align: center;
}
.testimonial-holder p {
opacity: 0.24;
line-height: 24px;
}
/* text image */
.testimonial--image {
display: flex;
/*height: 400px;*/
}
.testimonial--image {
display: flex;
height: 100%;
}
.testimonial--image .textholder {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 40px;
width: calc(100% - 312px);
min-height: 400px;
}
.testimonial--image .img-holder {
width: 312px;
height: auto;
}
.testimonial--image .img-holder img {
object-position: center top;
}
.testimonial--image .img-holder:before {
/*padding-top: 118%;*/
}
@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) {
.testimonial--image .textholder {
padding: 40px;
}
}
@media screen and (max-width: 660px) {
.testimonial--image {
display: flex;
flex-direction: column-reverse;
height: auto;
}
.testimonial--image .img-holder {
width: 100%;
}
.testimonial--image .img-holder:before {
padding-top: 69%
}
.testimonial--image .textholder {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 24px;
width: 100%;
height: 100%;
min-height: unset;
}
.testimonial--image h4 {
margin-bottom: 24px
}
}
@media screen and (max-width: 480px) {
.testimonial-holder br {
display: block;
}
.testimonial--text {
padding: 24px;
}
.testimonial--text .textholder {
align-items: flex-start;
justify-content: flex-start;
text-align: left
}
}
@media screen and (max-width: 330px) {
}
.fact-distance-holder {
display: flex;
align-items: center;
}
.icon-transparent {
margin-right: 16px;
}
/*basics*/
.google_360 {
position: relative;
width: 100%;
height: 480px;
border: 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) {
}
@media screen and (max-width: 480px) {
.google_360 {
heigth: 320px;
}
}
@media screen and (max-width: 330px) {
}
/* basics */
.contact-holder {
background-color: var(--mediumgrey);
padding-top: 48px;
display: flex;
}
.contact-holder .img-holder {
border-radius: 50%;
width: 192px;
height: 192px;
}
.contact-info-holder {
margin-top: 32px;
margin-bottom: 40px;
}
.contact-holder.reduced .cta {
width: 100%;
}
.contact-holder h6 ~ h5 {
margin-bottom: 8px;
}
.contact-holder h6 {
opacity: 0.72;
line-height: 24px;
}
.contact-link-holder {
margin-top: 24px;
}
.contact-link-holder .cta ~ .cta {
margin-top: 16px;
}
/* full version */
.contact-holder.full {
padding-bottom: 48px;
}
.contact-holder.full .img-holder {
margin-right: 32px;
}
.contact-holder.full .contact-info-holder {
margin: 0;
align-self: center;
}
.contact-holder.full {
flex-direction: column;
}
.contact-holder.full .cta {
align-self: center;
}
.contact-holder.full .contact-link-holder {
margin-top: 24px;
display: flex;
flex-direction: column;
}
.contact-holder.full > div {
display: flex;
text-align: center;
justify-content: center;
margin-bottom: 48px;
}
/* reduced version */
.contact-holder.reduced {
padding-bottom: 40px;
flex-direction: column;
align-items: center;
text-align: center;
padding-left: 40px;
padding-right: 40px;
}
.contact-holder.reduced > div {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-holder.reduced .img-holder {
align-self: 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) {
.contact-holder.reduced {
padding-top: 40px;
padding-bottom: 32px;
padding-left: 24px;
padding-right: 24px;
}
.contact-holder.full {
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 40px;
padding-bottom: 32px;
padding-left: 24px;
padding-right: 24px;
}
.contact-holder.full > div {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-holder.full .img-holder {
align-self: center;
}
.contact-holder.full .img-holder {
margin-right: 0;
}
.contact-holder.full .contact-info-holder {
margin-top: 32px;
margin-bottom: 40px;
}
.contact-holder.full > div {
display: flex;
text-align: center;
justify-content: center;
margin-bottom: 0;
}
.contact-holder.full .cta {
width: 100%;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.teaser-bgc {
position: relative;
cursor: pointer;
}
.teaser-bgc:hover:after {
background: rgba(0,0,0,0.64);
}
.teaser-bgc:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.40);
transition: 0.2s;
}
.teaser-bgc .img-holder:before {
padding-top: 66%;
}
.teaser-bgc .img-holder img {
transition: .2s;
}
.teaser-bgc:hover .img-holder img {
transform: scale(1.05);
}
.bgcteaser-text-holder {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 56px;
z-index: 4;
}
.bgcteaser-text-holder h5 {
color: var(--white);
font-size: 22px;
}
.bgcteaser-text-holder p {
color: var(--white);
margin-top: 12px;
margin-bottom: 20px;
}
.teaser-bgc .cover-link {
z-index: 10;
}
@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) {
}
.some {
width: 40px;
height: 40px;
background-color: var(--mediumgrey);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.some svg [fill] {
transition: 0.2s;
}
.some:hover svg [fill] {
fill: var(--blue);
}
.team-holder {
color: var(--white);
}
.team-holder .img-holder {
border: 2px solid var(--white);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
margin-bottom: 12px;
}
.team-holder .img-holder:before {
width: 120px;
height: 120px;
padding-top: 100%;
}
.team-holder p {
margin-bottom: 8px;
opacity: 1;
font-weight: bold;
line-height: 24px;
}
.about-team-info {
min-height: 100px;
}
.about-team-info sub {
font-size: 15px;
line-height: 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) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.about-team-info {
min-height: unset;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.about-icontext-holder {
display: flex;
flex-direction: column;
}
.about-icontext-holder > div:first-child {
background: var(--bgcsoft);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
flex-shrink: 0;
}
.about-icontext-holder svg {
height: 24px;
width: 24px;
}
.about-icontext-holder > div:last-child {
display: flex;
flex-direction: column;
}
.about-icontext-holder h5 {
color: var(--white);
margin-bottom: 12px;
}
.about-icontext-holder p {
font-size: 20px;
color: var(--white);
letter-spacing: 0.20px;
line-height: 28px;
opacity: 1;
font-weight: 400;
}
@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) {
.about-icontext-holder {
flex-direction: row;
}
.about-icontext-holder > div:first-child {
margin-right: 24px;
width: 64px;
height: 64px;
}
.about-icontext-holder 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) {
}
.big-teaser-wave {
height: auto;
-webkit-mask-size: 100% auto;
-webkit-mask-position: center bottom, center top;
-webkit-mask-image: url('../../assets/img/wave-top.svg'), url('../../assets/img/wave-bottom.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-composite: source-in, destination-over;
image-rendering: auto;
position: relative;
}
.big-teaser-wave:before,
.big-teaser-wave:after {
content: '';
display: block;
padding-top: 8%;
}
.big-teaser-wave-imageholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.big-teaser-wave-imageholder img {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: .2s;
}
.big-teaser-wave:hover .big-teaser-wave-imageholder img {
transform: scale(1.05);
}
.big-teaser-wave-imageholder:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.40);
transition: .2s;
}
.big-teaser-wave:hover .big-teaser-wave-imageholder:after {
background: rgba(0,0,0,0.64);
}
.big-teaser-wave-content {
position: relative;
text-align: center;
padding-bottom: 52px;
}
.big-teaser-wave-content h5 {
color: var(--white);
margin-bottom: 16px;
}
.big-teaser-wave-content .cta.cta-style--text {
margin-left: auto;
margin-right: auto;
color: var(--white);
}
.big-teaser-wave-content .cta.cta-style--text [fill="#FFFFFF"] {
fill: var(--white);
}
.big-teaser-wave-content .cta.cta-style--text [stroke="#FFFFFF"] {
stroke: var(--white);
}
@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) {
.big-teaser-wave {
mask: none;
-webkit-mask: none;
overflow: hidden;
padding-top: 64px;
padding-bottom: 64px;
}
.big-teaser-wave:before,
.big-teaser-wave:after {
display: none
}
.big-teaser-wave-content {
padding-bottom: 0
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.rating-emoji-holder {
background: var(--white);
box-shadow: 0 16px 48px -16px rgb(0 0 0 / 8%);
border-radius: 50%;
width: 90px;
height: 90px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transform: translate3d(0, 0, 0) scale(1);
transition: 0.2s;
}
.rating-emoji-holder:hover {
transform: translate3d(0, 0, 0) scale(1.1);
}
.rating-emoji-holder svg {
height: 36px;
overflow: visible;
margin-top: 8px;
display: block;
transition: 0.2s;
}
.emoji-grid .rating-emoji-holder:first-child > svg {
height: 32px;
}
.rating-emoji-holder:hover svg {
}
@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) {
.rating-emoji-holder {
width: 64px;
height: 64px;
padding-top: 21px;
}
.rating-emoji-holder svg {
height: 30px;
margin-top: 1px;
}
}
@media screen and (max-width: 330px) {
}
.catering-sidebar {
background-color: var(--mediumgrey);
padding: 40px;
}
.catering-sidebar h5 {
margin-bottom: 24px;
}
.catering-sidebar-fact {
display: flex;
align-items: flex-start;
}
.catering-sidebar-fact + .catering-sidebar-fact {
margin-top: 20px;
}
.catering-sidebar-fact svg {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-right: 16px;
position: relative;
top: 4px;
}
.catering-sidebar-fact span {
opacity: 0.72;
font-size: 18px;
color: var(--black);
letter-spacing: 0.4px;
line-height: 24px;
}
/*closed*/
.catering-sidebar.catering-opening--closed h6 {
color: var(--blue);
}
.catering-sidebar.catering-opening--closed h6:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 12px;
background-color: var(--blue);
}
/*normal*/
.catering-sidebar h6 {
font-weight: bold;
font-size: 16px;
color: var(--green);
letter-spacing: 0.18px;
line-height: 20px;
margin-top: 12px;
margin-bottom: 20px;
display: flex;
align-items: center;
margin-left: 32px;
}
.catering-sidebar.catering-opening--open h6:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 12px;
background-color: var(--green);
}
.catering-sidebar-link {
display: flex;
margin-left: auto;
margin-right: auto;
width: max-content;
font-size: 15px;
color: var(--black);
letter-spacing: 0.17px;
line-height: 26px;
transition: .2s;
text-decoration: none;
border-bottom: 1px solid var(--black);
opacity: 0.24;
margin-top: 32px;
}
.catering-sidebar-link:hover {
opacity: 1;
}
.catering-sub-holder {
margin-top: 32.5px;
border-top: 1px solid rgba(0,0,0,0.16);
padding-top: 32.5px;
}
.catering-sub-holder p {
font-weight: bold;
margin-bottom: 24px;
}
.catering-sub-holder .cta ~ .cta {
margin-top: 16px;
}
@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) {
}
.input-holder--textarea {
position: relative;
}
.input-holder--textarea label {
outline: none;
position: absolute;
left: 24px;
top: 20px;
transition: 0.2s;
font-size: 18px;
color: var(--grey);
line-height: 24px;
pointer-events: none;
}
.input-holder--textarea.filled label {
font-size: 15px;
color: var(--grey);
line-height: 24px;
top: 12px;
}
.input-holder--textarea textarea {
-webkit-appearance: none;
appearance: none;
width: 100%;
resize: none;
outline: none;
border: none;
border: 1px solid #D4D4D4;
font-size: 18px;
letter-spacing: 0.2px;
line-height: 24px;
padding-left: 20px;
padding-right: 20px;
background: transparent;
font-weight: bold;
color: var(--black);
padding-top: 20px;
padding-bottom: 20px;
}
.input-holder--textarea.filled textarea{
padding-top: 34px;
}
.icon-text-holder {
}
.icon-frame-holder {
background-color: var(--lightgrey);
padding-top: 31px;
padding-bottom: 31px;
padding-left: 28px;
padding-right: 28px;
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.icon-frame-holder .icon-transparent {
margin-right: 0;
}
.icon-frame-holder .icon-transparent {
height: 24px;
width: 24px;
}
.icon-frame-holder svg {
height: 24px;
width: 24px;
}
.icon-text-holder h5 {
margin-bottom: 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) {
.icon-text-holder {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.icon-frame-holder {
padding: 0;
height: 64px;
width: 64px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-text-holder .text {
width: calc(100% - 64px);
padding-left: 24px;
}
.icon-text-holder h5 {
margin-bottom: 6px;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}