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;
} */
/* 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;
}
*,
*: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;
}
@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) {
}
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;
}
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) {
}
.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;
}
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) {
}
:root {
--white: #ffffff;
--black: #000000;
--blackopacity: rgba(0,0,0,0.72);
--red: #F7323E;
--darkgrey: #191616;
--grey: #909090;
--lightgrey: #FBF9F9;
--mediumgrey: #F9F7F7;
--bordergrey: #D4D4D4;
--green: #1EDA9A;
--bgcred: linear-gradient(45deg, #F7323E 0%, #FA5963 100%);
--bgcsoft: rgba(255,255,255,0.12);
}
body {
background: var(--white);
color: var(--black);
}
.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) {
}
.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) {
}
.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(--red);
}
.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) {
}
.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) {
}
.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(--red);
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) {
}
.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(--red);*/
}
.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(--red);
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(--red);
}
.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(--red);
}
.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) {
}
/*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) {
}
.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) {
}
.faq-acc-wrapper {
padding-bottom: 16px;
padding-top: 16px;
transition: 0.2s;
cursor: pointer;
}
.faq-acc-wrapper:hover .faq-head-style {
color: var(--red);
}
.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) {
}
.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) {
}
.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) {
}
.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) {
}
.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) {
}
.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(--red);
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;
}
.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) {
}
.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;
}
.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;
}
.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) {
}
.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(--red);
}
@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) {
}
.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) {
}
.newsletter-holder {
position: relative;
background-color: var(--mediumgrey);
padding-top: 120px;
padding-bottom: 80px;
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
}
.newsletter-deco {
height: 120px;
width: 120px;
background-color: var(--white);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.08);
position: absolute;
left: 80px;
top: -60px;
display: flex;
align-items: center;
justify-content: center;
}
.newsletter-headline {
width: 100%;
opacity: 1;
transition: opacity .3s;
}
.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: 16px;
}
.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;
transition: opacity .3s;
}
.newsletter-holder--submit .success-message {
opacity: 1;
}
.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: var(--black);
letter-spacing: 0.4px;
line-height: 24px;
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) {
.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;
left: 50%;
transform: translateX(-50%);
top: -60px;
display: flex;
align-items: center;
justify-content: center;
}
.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: 768px) {
}
@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
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.collection-wave-teasers-grid {
display: flex;
-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;
}
.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: 88px;
}
.collection-wave-teasers-grid .teaser-bgc:nth-child(3) .bgcteaser-text-holder {
padding-bottom: 130px;
}
.collection-wave-teasers-grid .teaser-bgc:nth-child(4) .bgcteaser-text-holder {
padding-bottom: 130px;
}
.collection-wave-teasers-grid .teaser-bgc:nth-child(5) .bgcteaser-text-holder {
padding-bottom: 150px;
}
.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) {
}
.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(--red);
border-color: var(--red);
}
/* 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) {
}
.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) {
}
.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) {
}
.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) {
}
/*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(--red);
}
.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) {
}
.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(--red);
border-color: var(--red);
}
.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(--red);
border-color: var(--red);
}
@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) {
}
.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-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) {
}
.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) {
}
.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) {
}
.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) {
}
.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) {
}
.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) {
}
.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) {
}
/*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) {
}
.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) {
}
.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) {
}
.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) {
}
.fact-distance-holder {
display: flex;
align-items: center;
}
.icon-transparent {
margin-right: 16px;
}
.rent-teaser-holder {
position: relative;
}
.rent-detail-holder {
padding-top: 32px;
padding-bottom: 24px;
}
.rent-teaser-holder:hover h5 {
color: var(--red);
}
.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) {
}
/* 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(--red);
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(--red);
letter-spacing: -2px;
line-height: 56px;
margin-top: 15px;
}
.date-holder span:last-child {
text-transform: uppercase;
color: var(--red);
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(--red);
}
.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) {
}
.icon-transparent {
width: 16px;
height: 16px;
}
.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) {
}
.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:before {
content: '';
background: var(--white);
border: 1px solid var(--bordergrey);
width: 32px;
height: 32px;
margin-right: 12px;
}
.input-holder--checkbox input ~ label: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:after {
transform: scaleX(0);
transform-origin: right center;
}
.input-holder--checkbox input ~ label:active:before,
.input-holder--checkbox input ~ label:active:after {
transform: scale(0.9);
transition: 0s;
}
.input-holder--checkbox svg {
position: absolute;
left: 8px;
top: 8px;
transition: 0.2s;
}
.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;
}
.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) {
}
.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;
}
.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) {
}
.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(--red);
}
.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(--red);
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) {
}
/*basics*/
.testimonial-holder {
background: var(--lightgrey);
}
.testimonial-holder h5 {
font-weight: 500;
margin-bottom: 48px;
}
.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: 48px;
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) {
}
.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) {
}
.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(--red);
}
@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) {
}
/*MAIN STYLES*/
.cta {
appearance: none;
-webkit-appearance: none;
background: none;
border: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
width: auto;
width: max-content;
transform: translate3d(0, 0, 0);
cursor: pointer;
text-decoration: none;
font-size: 18px;
letter-spacing: 0.2px;
line-height: 20px;
font-weight: bold;
padding-left: 24px;
padding-right: 24px;
height: 64px;
}
.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(--red);
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(--red);
transition: .2s;
}
p > a:hover:after {
right: auto;
left: 0;
width: 100%;
}
.cta-style--primary {
background: var(--bgcred);
color: var(--white);
font-weight: bold;
}
.cta-style--primary svg [stroke] {
stroke: var(--white);
}
.cta-style--secondarylight {
background: var(--lightgrey);
color: var(--red);
}
.cta-style--secondarylight svg [stroke] {
stroke: var(--red);
}
.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--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(--red);
height: auto;
}
.cta-style--text svg [stroke] {
stroke: var(--red);
}
.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;
}
.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) {
}
.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) {
}
.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) {
}
.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(--red);
}
.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;
}
/*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(--red);
}
.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) {
}
/* 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) {
}
.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(--red);
}*/
.input-holder--radio input:checked ~ label:before {
border: 8px solid var(--red);
}
.input-holder--radio label:hover:before {
border: 1px solid var(--red);
}
.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(--red);
}
.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) {
}
.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) {
}
.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;
}
.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;
}
.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(--red);
}
.catering-sidebar.catering-opening--closed h6:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 12px;
background-color: var(--red);
}
/*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) {
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
z-index: 1;
}
select::-ms-expand {
display: none;
}
/*basic form elements*/
.input-holder--text {
position: relative;
}
.input-holder--text 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 {
padding-top: 22px;
}
.input-holder--text 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 {
font-size: 15px;
color: var(--grey);
line-height: 24px;
transform: translateY(-50%) translateY(-12px);
}
.input-holder--text 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: 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) {
.input-holder--text.filled label {
font-size: 12px;
line-height: 24px;
transform: translateY(-50%) translateY(-12px);
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.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;
}
.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: 100vh;
}
.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) {
}
.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(--red);
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;
}
}
#starfield {
position: absolute;
top: 0;
left: 0;
}
/* BASE */
.tesla {
position: absolute;
background-repeat: no-repeat;
background-size: contain;
}
/* Tesla */
.tesla {
left: 12%; /* SET HORIZONTAL POSITION */
top: 16%; /* SET VERTICAL POSITION */
width: 184px;
height: 111px;
background-image: url('../../assets/img/about/tesla.png');
}
/* Astronaut */
.astronaut {
position: absolute;
right: 5%; /* SET HORIZONTAL POSITION */
bottom: 12%; /* SET VERTICAL POSITION */
width: 200px;
height: 204px;
}
.astronaut::before, .astronaut::after {
content: '';
position: absolute;
transform: scale(.64);
background-repeat: no-repeat;
}
.astronaut::before {
top: -4px;
width: 100%;
height: 100%;
background: url("../../assets/img/about/body.png");
background-size: 100% 100%;
}
.astronaut::after {
width: 100%;
height: 100%;
background: url("../../assets/img/about/spritesheet.png");
background-size: 600% 400%;
animation: playX 0.2s steps(5) infinite alternate-reverse, playY 0.6s steps(3) infinite alternate-reverse;
}
@keyframes playX {
100% {
background-position-x: 100%;
}
}
@keyframes playY {
100% {
background-position-y: 100%;
}
}
/* ANIMATION */
@keyframes tesla-animation {
0% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
20% {
margin-left: -20px;
animation-timing-function: ease-in-out;
}
33% {
transform: rotate(8deg);
animation-timing-function: ease-in-out;
}
40% {
margin-top: -40px;
animation-timing-function: ease-in-out;
}
60% {
margin-left: 40px;
animation-timing-function: ease-in-out;
}
66% {
transform: rotate(-8deg);
animation-timing-function: ease-in-out;
}
80% {
margin-top: 20px;
animation-timing-function: ease-out;
}
100% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}
@keyframes astronaut-animation {
0% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
20% {
margin-left: 20px;
animation-timing-function: ease-in-out;
}
33% {
transform: rotate(8deg);
animation-timing-function: ease-in-out;
}
40% {
margin-top: 40px;
animation-timing-function: ease-in-out;
}
60% {
margin-left: -40px;
animation-timing-function: ease-in-out;
}
66% {
transform: rotate(-8deg);
animation-timing-function: ease-in-out;
}
80% {
margin-top: -20px;
animation-timing-function: ease-out;
}
100% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}
.tesla {
animation: tesla-animation 40s linear infinite;
}
.astronaut {
animation: astronaut-animation 24s ease-in infinite;
}
/* BLINK */
.tesla::before, .tesla::after {
content: '';
position: absolute;
display: block;
background-color: #DDD39A;
border-radius: 100%;
position: absolute;
animation: tesla-blink 1000ms ease-in-out infinite;
box-shadow: 0px 0px 0px 5px rgba(255,0,0,0.5);
filter: blur(1px);
}
.tesla::before {
top: 63%;
left: 20%;
width: 4px;
height: 8px;
transform: rotate(-15deg);
}
.tesla::after {
top: 58%;
left: 2.4%;
width: 3px;
height: 6px;
transform: rotate(-15deg);
opacity: .8;
}
@keyframes tesla-blink {
0% {
background-color: rgba(221,211,154,1);
box-shadow: 0px 0px 8px 4px rgba(221,211,154,0.64);
}
23% {
background-color: rgba(221,211,154,1);
box-shadow: 0px 0px 8px 4px rgba(221,211,154,0.64);
}
27% {
background-color: rgba(221,211,154,0);;
box-shadow: 0px 0px 8px 4px rgba(221,211,154,0);
}
73% {
background-color: rgba(221,211,154,0);;
box-shadow: 0px 0px 8px 4px rgba(221,211,154,0);
}
77% {
background-color: rgba(221,211,154,1);
box-shadow: 0px 0px 8px 4px rgba(221,211,154,0.64);
}
100% {
background-color: rgba(221,211,154,1);
box-shadow: 0px 0px 8px 4px rgba(221,211,154,0.64);
}
}
@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) {
.tesla {
top: 5%;
}
.astronaut {
right: -13%;
width: 160px;
height: 177px;
}
}
@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(--red);
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) {
}
.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) {
}
.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) {
}
.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) {
}
.about-hero-section {
background-image: url("../../assets/img/TPW_About_Base-v2.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
.about-wrapper {
overflow: hidden;
position: relative;
z-index: 1;
}
.about-wrapper:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: calc(100% - 100vh);
background-image: linear-gradient(180deg, #060719 0%, #404566 50%, #8eabd0 100%);
z-index: -1;
}
.about-wrapper ~ .section--footer,
.about-wrapper ~ .section--subfooter {
display: none;
}
.about-wrapper section {
min-height: 100vh;
padding-top: 60px;
padding-bottom: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.cloud1 {
position: absolute;
z-index: 99;
top: 55%;
left: 0%;
height: 30vw;
width: auto;
pointer-events: none;
}
.cloud2 {
position: absolute;
z-index: 99;
top: 25%;
right: 0%;
height: 30vw;
width: auto;
pointer-events: none;
}
.about-hero-section .cloud1 {
top: 0%;
right: 30%;
left: auto;
}
@media screen and (max-width: 1920px) {
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1366px) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
.cloud1,
.cloud2 {
height: 60vw;
}
.cloud1 {
left: -30%;
}
.cloud2 {
right: -40%;
}
}
@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) {
}
.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) {
}
.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) {
}
.about-text-section {
position: relative;
}
/* BASE */
.drone {
position: absolute;
width: 101px;
height: 33px;
transform: translateY(0px) rotate(-10deg);
background-image: url('../../assets/img/about/drone.webp');
background-repeat: no-repeat;
background-size: contain;
}
/* BLINK */
.drone::after {
content: '';
position: absolute;
display: block;
top: 52%;
right: 31%;
width: 6px;
height: 6px;
background-color: red;
border-radius: 100%;
position: absolute;
animation: drone-blink 0.5s ease-in-out infinite;
box-shadow: 0px 0px 0px 5px rgba(255,0,0,0.5);
}
@keyframes drone-blink {
0% {
background-color: rgba(255,0,0,1);
box-shadow: 0px 0px 5px 5px rgba(255,0,0,0.75);
}
50% {
background-color: rgba(255,0,0,0.25);;
box-shadow: 0px 0px 5px 5px rgba(255,0,0,0.25);
}
100% {
background-color: rgba(255,0,0,1);;
box-shadow: 0px 0px 5px 5px rgba(255,0,0,0.75);
}
}
/* ANIMATION */
@keyframes drone-animation-1 {
0% {
transform: translateY(0px) rotate(-10deg) scale(1.2);
animation-timing-function: ease-in;
}
25% {
transform: translateY(3px) rotate(-8deg) scale(1.2);
animation-timing-function: ease-out;
}
50% {
transform: translateY(6px) rotate(-10deg) scale(1.2);
animation-timing-function: ease-in;
}
75% {
transform: translateY(3px) rotate(-12deg) scale(1.2);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px) rotate(-10deg) scale(1.2);
animation-timing-function: ease-in;
}
}
@keyframes drone-animation-2 {
0% {
transform: translateY(0px) rotate(-10deg) scaleX(-.64) scaleY(.64);
animation-timing-function: ease-in;
}
25% {
transform: translateY(3px) rotate(-8deg) scaleX(-.64) scaleY(.64);
animation-timing-function: ease-out;
}
50% {
transform: translateY(6px) rotate(-10deg) scaleX(-.78) scaleY(.64);
animation-timing-function: ease-in;
}
75% {
transform: translateY(3px) rotate(-12deg) scaleX(-.64) scaleY(.64);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px) rotate(-10deg) scaleX(-.64) scaleY(.64);
animation-timing-function: ease-in;
}
}
@keyframes drone-animation-2-vertical {
0% {
margin-top: 0px;
}
100% {
margin-top: 200px;
}
}
@keyframes drone-animation-3 {
0% {
transform: translateY(0px) rotate(15deg) scale(0.56);
}
100% {
transform: translateY(0px) rotate(0deg) scale(0.56);
}
}
@keyframes drone-animation-4 {
0% {
margin-top: 400px;
transform: translateY(0px) rotate(-10deg) scaleX(-1);
}
40% {
transform: translateY(0px) rotate(2deg) scaleX(-1);
}
100% {
margin-top: 0px;
transform: translateY(0px) rotate(6deg) scaleX(-1);
}
}
@keyframes drone-lefttoright {
0% {
left: -200px;
animation-timing-function: ease-in;
}
80% {
left: calc(100% + 200px);
animation-timing-function: ease-in;
}
100% {
left: calc(100% + 200px);
}
}
@keyframes drone-righttoleft {
0% {
left: calc(100% + 200px);
animation-timing-function: ease-in;
}
80% {
left: -200px;
animation-timing-function: ease-in;
}
100% {
left: -200px;
}
}
.drone-1 {
animation: drone-animation-1 500ms ease-in-out infinite, drone-lefttoright 5000ms linear infinite;
top: 100px; /* SET VERTICAL POSITION */
}
.drone-2 {
animation: drone-animation-2 600ms ease-in-out infinite, drone-animation-2-vertical 4000ms linear infinite, drone-righttoleft 4000ms linear infinite;
top: 120px; /* SET VERTICAL POSITION */
filter: blur(2px);
opacity: .9;
}
.drone-3 {
animation: drone-animation-3 2500ms ease-out infinite, drone-lefttoright 2500ms ease-out infinite;
top: 640px; /* SET VERTICAL POSITION */
filter: blur(3px);
opacity: .8;
}
.drone-4 {
animation: drone-animation-4 1500ms ease-in infinite, drone-righttoleft 1500ms ease-in infinite;
top: 480px; /* SET VERTICAL POSITION */
}
.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(--red);
}
.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(--red);
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(--red);
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(--red);
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(--red);
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(--red);
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::before {
margin-right: 0;
}
.filter-trigger-holder.sort .filter_checkbox_line .input-holder--checkbox label::before,
.filter-trigger-holder.sort .filter_checkbox_line .input-holder--checkbox label::after {
border-radius: 100px;
}
.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) {
}
.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) {
}
.about-team-section {
display: flex;
}
.about-team {
position: relative;
}
.about-team-section > div:first-child {
width: 62%;
padding-right: 48px;
}
.about-team-section > div:last-child {
width: 38%;
border-left: 2px solid rgba(255, 255, 255, 0.24);
padding-left: 48px;
}
.shooting-star {
position: absolute;
width: 190px;
height: 8px;
background-image: url('../../assets/img/shooting-star.webp');
background-repeat: no-repeat;
background-size: contain;
}
/* ANIMATION */
@keyframes shooting-star-animation-1 {
0% {
margin-top: 0px;
left: -190px;
transform: rotate(25deg) scaleX(-1);
opacity: 0;
}
1% {
opacity: 0.65;
}
8% {
margin-top: 1200px;
left: 1900px;
transform: rotate(25deg) scaleX(-1);
opacity: 0;
}
100% {
margin-top: 1200px;
left: 1900px;
transform: rotate(25deg) scaleX(-1);
opacity: 0;
}
}
.shooting-star-1 {
animation: shooting-star-animation-1 12s linear infinite;
top: 0px;
}
.about-team .cloud1,
.about-team .cloud2 {
z-index: -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) {
.about-team-section {
display: flex;
flex-direction: column-reverse;
}
.about-team-section > div:first-child,
.about-team-section > div:last-child {
width: 100%;
padding: 0;
border: none;
}
.about-team-section > div:first-child {
border-top: 2px solid rgba(255, 255, 255, 0.24);
border-left: none;
padding-top: 36px;
margin-top: 32px
}
.collection-team-holder .cta-style--text {
display: flex;
}
}
@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) {
}
.content-section h3 {
margin-bottom: 32px;
}
.section-about-icontext {
position: relative;
}
/* BASE */
.plane {
position: absolute;
background-repeat: no-repeat;
background-size: contain;
}
/* PLANE 1 */
.plane-1 {
width: 160px;
height: 50px;
background-image: url('../../assets/img/about/plane-1.png');
}
/* PLANE 2 */
.plane-2 {
width: 339px;
height: 138px;
background-image: url('../../assets/img/about/plane-2.png');
}
/* ANIMATION */
@keyframes plane-animation-1 {
0% {
transform: scale(.64);
left: calc(100% + 160px);
}
80% {
transform: scale(.8);
left: -160px;
}
100% {
transform: scale(.8);
left: -160px;
}
}
@keyframes plane-animation-2 {
0% {
transform: scale(.4);
margin-top: -140px;
right: 1080px;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
transform: scale(1);
margin-top: 160px;
right: -340px;
}
100% {
transform: scale(1);
right: -340px;
}
}
.plane-1 {
animation: plane-animation-1 12s linear infinite;
bottom: 15%;
}
.plane-2 {
animation: plane-animation-2 8s ease-in infinite;
top: 0px;
}
.section-about-icontext .cloud1 {
left: -20%;
}
.section-about-icontext .cloud2.cloud3 {
right: 20%;
top: 66%;
z-index: -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) {
}
@media screen and (max-width: 660px) {
.section-about-icontext .cloud2.cloud3 {
right: -40%;
top: 66%;
z-index: -1;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.section-about-icon {
position: relative;
}
/* BASE */
.rocket {
position: absolute;
width: 100px;
height: 400px;
}
/* BODY */
.rocket::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: auto 100%;
background-repeat: no-repeat;
}
.rocket-1::after {
background-image: url("../../assets/img/about/rocket-1.png");
}
.rocket-2::after {
background-image: url("../../assets/img/about/rocket-2.png");
}
/* FIRE */
.rocket::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 1300% 100%;
background-repeat: no-repeat;
animation: play 0.5s steps(12) infinite;
}
@keyframes play {
100% {
background-position: 100%;
}
}
.rocket-1::before {
background: url("../../assets/img/about/rocket-1-spritesheet.png") 0px 0px;
}
.rocket-2::before {
background: url("../../assets/img/about/rocket-2-spritesheet.png") 0px 0px;
}
/* ANIMATION */
@keyframes rocket-animation-1 {
0% {
right: -240px;
margin-top: 1200px;
}
80% {
opacity: 1;
}
90% {
right: 150px;
margin-top: -320px;
opacity: 0;
}
100% {
right: 150px;
opacity: 0;
margin-top: -320px;
}
}
@keyframes rocket-animation-2 {
0% {
left: -400px;
margin-top: 1200px;
}
30% {
opacity: 1;
}
35% {
opacity: 0;
}
40% {
left: 560px;
margin-top: -400px;
opacity: 0;
}
100% {
left: 560px;
margin-top: -400px;
opacity: 0;
}
}
.rocket-1 {
animation: rocket-animation-1 16s linear infinite;
top: 0px;
transform: rotate(-15deg) scale(.4);
filter: blur(1px);
}
.rocket-2 {
animation: rocket-animation-2 10s linear infinite;
top: 0px;
transform: rotate(25deg) scale(.8);
}
.section-about-icon .cloud1 {
left: -35%;
}
@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) {
.section-about-icon .cloud1 {
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.background-animation-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -99999;
pointer-events: none;
overflow: hidden;
}
.background-animation-layer {
position: relative;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.decoration-animation-wrapper:first-child {
position: absolute;
left: 5%;
top: 10%;
transform: rotate(-90deg);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(2) {
position: absolute;
left: 50%;
top: 10%;
transform: rotate(0deg);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(3) {
position: absolute;
left: 15%;
bottom: 25%;
transform: rotate(-180deg);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(4) {
position: absolute;
right: 15%;
bottom: 15%;
transform: rotate(-90deg);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(5) {
position: absolute;
left: 0%;
bottom: 0%;
transform: rotate(-90deg) translateX(50%) translateX(-10px);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(6) {
position: absolute;
right: 15%;
bottom: 0%;
transform: rotate(-90deg) translateX(50%) translateX(-10px);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(7) {
position: absolute;
right: 20%;
bottom: 5%;
transform: rotate(-90deg) translateX(50%) translateX(-10px);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(8) {
position: absolute;
right: 15%;
top: 15%;
transform: rotate(-90deg);
transform-origin: center top;
}
.decoration-animation-wrapper:nth-child(9) {
position: absolute;
left: 25%;
top: 10%;
}
.decoration-animation-wrapper:nth-child(10) {
position: absolute;
left: 40%;
bottom: 20%;
}
/* Decoration 1 Arrow */
@keyframes decoration-arrow-1-trim {
0% { transform: translate(-66px, 0px); }
100% { transform: translate(0px, 0px); }
}
.decoration-arrow-1 {
padding: 0;
margin: 0;
width: 50px;
height: 24px;
overflow: hidden;
margin-bottom: 5px;
}
.decoration-arrow-1::before {
transform: translate(-150px, 0px);
background-image: url("../../assets/img/tpw-arrow-1.svg");
background-repeat: no-repeat;
width: 198px;
height: 24px;
display: block;
content: '';
animation-name: decoration-arrow-1-trim;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-timing-function: linear;
}
/* Decoration 2 Arrow */
@keyframes decoration-arrow-2-trim {
0% { transform: translate(-250px, 0px); }
100% { transform: translate(275px, 0px); }
}
@keyframes decoration-arrow-2-position {
0% { transform: translate(-66px, 0px); }
100% { transform: translate(0px, 0px); }
}
.decoration-arrow-2 {
padding: 0;
margin: 0;
width:250px;
height: 9px;
overflow: hidden;
background-repeat: no-repeat;
animation-name: decoration-arrow-2-position;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-timing-function: cubic-bezier(.6,.18,.39,.98);
}
.decoration-arrow-2::before {
transform: translate(-150px, 0px);
background-image: url("../../assets/img/tpw-arrow-2.svg");
background-repeat: no-repeat;
width: 212px;
height: 9px;
display: block;
content: '';
animation-name: decoration-arrow-2-trim;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-timing-function: cubic-bezier(.6,.18,.39,.98);
}
.decoration-animation-wrapper:nth-child(2) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(2) .decoration-arrow-2::before {
animation-delay: -.5s;
}
.decoration-animation-wrapper:nth-child(3) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(3) .decoration-arrow-2::before {
animation-delay: -1s;
}
.decoration-animation-wrapper:nth-child(4) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(4) .decoration-arrow-2::before {
animation-delay: -1.5s;
}
.decoration-animation-wrapper:nth-child(5) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(5) .decoration-arrow-2::before {
animation-delay: -2s;
}
.decoration-animation-wrapper:nth-child(6) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(6) .decoration-arrow-2::before {
animation-delay: -2.5s;
}
.decoration-animation-wrapper:nth-child(7) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(7) .decoration-arrow-2::before {
animation-delay: -3s;
}
.decoration-animation-wrapper:nth-child(8) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(8) .decoration-arrow-2::before {
animation-delay: -3.5s;
}
.decoration-animation-wrapper:nth-child(9) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(9) .decoration-arrow-2::before {
animation-delay: -4s;
}
.decoration-animation-wrapper:nth-child(10) .decoration-arrow-2,
.decoration-animation-wrapper:nth-child(10) .decoration-arrow-2::before {
animation-delay: -4.5s;
}
@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) {
.decoration-animation-wrapper:nth-child(3) {
left: -32px;
}
.decoration-animation-wrapper:nth-child(4) {
right: 0;
}
.decoration-animation-wrapper:nth-child(5) {
transform-origin: left top;
transform: rotate(-90deg) translateX(0%) translateX(-10px);
}
.decoration-animation-wrapper:nth-child(6) {
right: 0;
transform-origin: right bottom;
}
.decoration-animation-wrapper:nth-child(8) {
display: none
}
.decoration-animation-wrapper:first-child,
.decoration-animation-wrapper:nth-child(2),
.decoration-animation-wrapper:nth-child(7),
.decoration-animation-wrapper:nth-child(9),
.decoration-animation-wrapper:nth-child(10) {
display: none
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.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 {
position: sticky;
top: 0px;
z-index: 11;
transition: .3s;
}
.section--navigation.hide.scroll-up ~ .section--ankernavigation .container .sticky {
transform: translateY(104px);
}
.section--notification ~ .section--ankernavigation .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(--red);
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(--red);
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 {
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 {
transform: translateY(0px);
}
.section--navigation.hide.scroll-up ~ .section--ankernavigation .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) {
}
.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) {
}
.about-logos-holder {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.about-logos-holder img {
height: 110px;
width: auto;
margin-left: 12px;
margin-right: 12px;
margin-bottom: 24px;
}
.section-about-logos {
position: relative;
}
/* BASE */
.space-station {
position: absolute;
background-repeat: no-repeat;
background-size: contain;
}
/* space-station 1 */
.space-station-1 {
left: -16px; /* SET HORIZONTAL POSITION */
top: 6%; /* SET VERTICAL POSITION */
width: 320px;
height: 267px;
background-image: url('../../assets/img/about/space-station-1.png');
}
/* space-station 2 */
.space-station-2 {
right: 8%; /* SET HORIZONTAL POSITION */
bottom: -4%; /* SET VERTICAL POSITION */
width: 255px;
height: 140px;
background-image: url('../../assets/img/about/space-station-2.png');
}
/* ANIMATION */
@keyframes space-station-animation-1 {
0% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
20% {
margin-left: 20px;
animation-timing-function: ease-in-out;
}
33% {
transform: rotate(8deg);
animation-timing-function: ease-in-out;
}
40% {
margin-top: 40px;
animation-timing-function: ease-in-out;
}
60% {
margin-left: -40px;
animation-timing-function: ease-in-out;
}
66% {
transform: rotate(-8deg);
animation-timing-function: ease-in-out;
}
80% {
margin-top: -20px;
animation-timing-function: ease-out;
}
100% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}
@keyframes space-station-animation-2 {
0% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
20% {
margin-left: -20px;
animation-timing-function: ease-in-out;
}
33% {
transform: rotate(8deg);
animation-timing-function: ease-in-out;
}
40% {
margin-top: -40px;
animation-timing-function: ease-in-out;
}
60% {
margin-left: 40px;
animation-timing-function: ease-in-out;
}
66% {
transform: rotate(-8deg);
animation-timing-function: ease-in-out;
}
80% {
margin-top: 20px;
animation-timing-function: ease-out;
}
100% {
margin-top: 0;
margin-left: 0;
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}
.space-station-1 {
animation: space-station-animation-1 24s linear infinite;
}
.space-station-2 {
animation: space-station-animation-2 40s ease-in infinite;
}
.section-about-logos .cloud1{
top: 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) {
.space-station-1 {
top: 0;
left: -50%;
}
.space-station-2 {
right: -37%
}
}
@media screen and (max-width: 660px) {
.about-logos-holder img {
height: auto;
margin-left: 12px;
margin-right: 12px;
width: calc(50% - 24px);
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.section--phasen {
padding-left: 0;
padding-right: 0;
}
.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(-8.3% + 24px);
}
.section--phasen .big-teaser-wave {
margin-top: calc(-8.3% + 32px);
}
.section--phasen--mobile-teasers {
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) {
.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
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}
.section--footer {
background-color: var(--darkgrey);
padding-top: 88px;
padding-bottom: 88px;
padding-left: 24px;
padding-right: 24px;
}
.section--subfooter {
background-color: var(--black);
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--contact {
order: 3;
}
.section--footer-left > div.section--footer--extra {
order: 5;
}
.section--footer-right > div {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.section--footer-left > div + div {
margin-bottom: 72px;
}
.section--footer--eyecatcher {
display: block;
border-radius: 50%;
width: 140px;
height: auto;
overflow: hidden;
}
.section--footer--eyecatcher img {
display: block;
width: 100%;
height: auto;
}
.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(--red);
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: 48px;
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) {
}
.only-text-section p {
margin-bottom: 32px;
max-width: 736px;
}
.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) {
}
.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) {
}
.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) {
}
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: .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: .2s;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.section--navigation--right--navitems--top a svg {
height: 16px;
width: 16px;
margin-left: 6px;
}
.section--navigation--right--navitems--top a svg [stroke="#000000"] {
transition: .2s;
}
.section--navigation--right--navitems--top a svg [fill="#000000"] {
transition: .2s;
}
.section--navigation--right--navitems--top a:hover svg [stroke="#000000"] {
stroke: var(--red);
}
.section--navigation--right--navitems--top a:hover svg [fill="#000000"] {
fill: var(--red);
}
.section--navigation--right--navitems--top a:hover {
color: var(--red);
}
.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: .2s;
position: relative;
}
.section--navigation--right--navitems--bottom a.active,
.section--navigation--right--navitems--bottom a.subactive {
color: var(--red);
}
.section--navigation--right--navitems--bottom a:hover {
color: var(--red);
}
.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(--red);
border-left: 8px solid white;
border-right: 8px solid white;
transform: scaleX(0);
transition: .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: .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: .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: .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-subline {
font-size: 15px;
margin-bottom: 32px;
opacity: .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: .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: .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: .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: .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: .2s;
}
.section--subnav--item:hover span {
color: var(--red);
}
.section--subnav--item--eyecatcher {
display: block;
width: 140px;
height: auto;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.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: .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--eyecatcher {
display: none;
}
.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: .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: .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: .2s;
}
.section--navigation--right--navitems--bottom a svg [stroke="#000000"] {
transition: .2s;
}
.section--navigation--right--navitems--bottom a.active svg [fill="#000000"],
.section--navigation--right--navitems--bottom a:hover svg [fill="#000000"] {
fill: var(--red);
}
.section--navigation--right--navitems--bottom a.active svg [stroke="#000000"],
.section--navigation--right--navitems--bottom a:hover svg [stroke="#000000"] {
stroke: var(--red);
}
.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: .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: .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) {
}
.special-teaser-section .mobile-crosslinking-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) {
.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;
}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 480px) {
}
@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) {
}
.community-section .container {
background-color: var(--mediumgrey);
padding: 84px;
position: relative;
}
.community-text-holder {
max-width: 368px;
}
.community-text-holder p {
margin-top: 16px;
}
.community-text-holder .cta {
margin-top: 32px;
}
.community_image {
position: absolute;
bottom: 0;
right: 0;
display: block;
width: calc(100% - 590px);
max-height: 480px;
object-fit: contain;
}
@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_image {
width: calc(100% - 450px);
}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
.community-text-holder {
max-width: 100%;
}
.community-text-holder .cta {
margin-top: 24px;
}
.community-section .container {
padding: 48px;
padding-bottom: 0;
}
.community_image {
position: relative;
width: 100%;
margin-top: 64px;
}
}
@media screen and (max-width: 660px) {
.community-section .container {
padding: 32px;
padding-bottom: 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) {
}
.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) {
}
.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--eyecatcher--container {
display: inline-block;
position: relative;
padding-top: 30px;
}
.section--hero--eyecatcher {
position: absolute;
top: 0;
right: -280px;
display: block;
width: 120px;
border-radius: 50%;
overflow: hidden;
}
@media screen and (max-width: 1200px) {
.section--hero--eyecatcher {
right: -220px;
}
}
@media screen and (max-width: 1000px) {
.section--hero--eyecatcher {
right: -160px;
}
}
.section--hero--eyecatcher img {
display: block;
width: 100%;
height: auto;
}
.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.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%);
}
.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: 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--hero.reduce h1, .section--hero.reduce .h1 {
font-size: 42.67px;
line-height: 50.67px;
}
}
@media screen and (max-width: 768px) {
.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;
}
}
@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
}
.section--hero--eyecatcher--container {
padding-top: 0;
}
.section--hero--eyecatcher {
position: relative;
right: auto;
width: 70px;
margin: 20px auto 0;
}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 330px) {
}