:root {
--color-orange: #E55813;
--color-orange-d: #D54300;
--color-blue-l: #a5e1dd;
--color-blue: #8ED9D4;
--color-blue-d: #6AC6C1;
--color-green-l: #8cbc83;
--color-green: #5e945c;
--color-grey-l: #74726a;
--color-grey: #2D2D28;
--color-beige: #EFEBD9;
--color-beige-d: #DED8BE;
--color-beige-dd: #A5A291;
--color-olive: #AD9F62;
--color-white: #ffffff;
}        .hamburger {
padding: 12px 12px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.9;
}
.hamburger.is-active:hover {
opacity: 0.9;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: var(--color-grey);
}
.hamburger-box {
width: 24px;
height: 16px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -1px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 24px;
height: 2px;
background-color: var(--color-grey);
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -7px;
}
.hamburger-inner::after {
bottom: -7px;
} .hamburger--3dx .hamburger-box {
perspective: 48px;
}
.hamburger--3dx .hamburger-inner {
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx.is-active .hamburger-inner {
background-color: transparent !important;
transform: rotateY(180deg);
}
.hamburger--3dx.is-active .hamburger-inner::before {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--3dx.is-active .hamburger-inner::after {
transform: translate3d(0, -7px, 0) rotate(-45deg);
} .hamburger--3dx-r .hamburger-box {
perspective: 48px;
}
.hamburger--3dx-r .hamburger-inner {
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx-r.is-active .hamburger-inner {
background-color: transparent !important;
transform: rotateY(-180deg);
}
.hamburger--3dx-r.is-active .hamburger-inner::before {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--3dx-r.is-active .hamburger-inner::after {
transform: translate3d(0, -7px, 0) rotate(-45deg);
} .hamburger--3dy .hamburger-box {
perspective: 48px;
}
.hamburger--3dy .hamburger-inner {
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy.is-active .hamburger-inner {
background-color: transparent !important;
transform: rotateX(-180deg);
}
.hamburger--3dy.is-active .hamburger-inner::before {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--3dy.is-active .hamburger-inner::after {
transform: translate3d(0, -7px, 0) rotate(-45deg);
} .hamburger--3dy-r .hamburger-box {
perspective: 48px;
}
.hamburger--3dy-r .hamburger-inner {
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy-r.is-active .hamburger-inner {
background-color: transparent !important;
transform: rotateX(180deg);
}
.hamburger--3dy-r.is-active .hamburger-inner::before {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--3dy-r.is-active .hamburger-inner::after {
transform: translate3d(0, -7px, 0) rotate(-45deg);
} .hamburger--3dxy .hamburger-box {
perspective: 48px;
}
.hamburger--3dxy .hamburger-inner {
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy.is-active .hamburger-inner {
background-color: transparent !important;
transform: rotateX(180deg) rotateY(180deg);
}
.hamburger--3dxy.is-active .hamburger-inner::before {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--3dxy.is-active .hamburger-inner::after {
transform: translate3d(0, -7px, 0) rotate(-45deg);
} .hamburger--3dxy-r .hamburger-box {
perspective: 48px;
}
.hamburger--3dxy-r .hamburger-inner {
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy-r.is-active .hamburger-inner {
background-color: transparent !important;
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
}
.hamburger--3dxy-r.is-active .hamburger-inner::before {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--3dxy-r.is-active .hamburger-inner::after {
transform: translate3d(0, -7px, 0) rotate(-45deg);
} .hamburger--arrow.is-active .hamburger-inner::before {
transform: translate3d(-4.8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger--arrow.is-active .hamburger-inner::after {
transform: translate3d(-4.8px, 0, 0) rotate(45deg) scale(0.7, 1);
} .hamburger--arrow-r.is-active .hamburger-inner::before {
transform: translate3d(4.8px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger--arrow-r.is-active .hamburger-inner::after {
transform: translate3d(4.8px, 0, 0) rotate(-45deg) scale(0.7, 1);
} .hamburger--arrowalt .hamburger-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt .hamburger-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt.is-active .hamburger-inner::before {
top: 0;
transform: translate3d(-4.8px, -6px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.hamburger--arrowalt.is-active .hamburger-inner::after {
bottom: 0;
transform: translate3d(-4.8px, 6px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
} .hamburger--arrowalt-r .hamburger-inner::before {
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt-r .hamburger-inner::after {
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
top: 0;
transform: translate3d(4.8px, -6px, 0) rotate(45deg) scale(0.7, 1);
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
bottom: 0;
transform: translate3d(4.8px, 6px, 0) rotate(-45deg) scale(0.7, 1);
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
} .hamburger--arrowturn.is-active .hamburger-inner {
transform: rotate(-180deg);
}
.hamburger--arrowturn.is-active .hamburger-inner::before {
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger--arrowturn.is-active .hamburger-inner::after {
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
} .hamburger--arrowturn-r.is-active .hamburger-inner {
transform: rotate(-180deg);
}
.hamburger--arrowturn-r.is-active .hamburger-inner::before {
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger--arrowturn-r.is-active .hamburger-inner::after {
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
} .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
transition-property: none;
}
.hamburger--boring.is-active .hamburger-inner {
transform: rotate(45deg);
}
.hamburger--boring.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
}
.hamburger--boring.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
} .hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -14px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -7px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--collapse-r .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse-r .hamburger-inner::after {
top: -14px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse-r .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse-r.is-active .hamburger-inner {
transform: translate3d(0, -7px, 0) rotate(45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse-r.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse-r.is-active .hamburger-inner::before {
top: 0;
transform: rotate(90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--elastic .hamburger-inner {
top: 1px;
transition-duration: 0.275s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic .hamburger-inner::before {
top: 7px;
transition: opacity 0.125s 0.275s ease;
}
.hamburger--elastic .hamburger-inner::after {
top: 14px;
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic.is-active .hamburger-inner {
transform: translate3d(0, 7px, 0) rotate(135deg);
transition-delay: 0.075s;
}
.hamburger--elastic.is-active .hamburger-inner::before {
transition-delay: 0s;
opacity: 0;
}
.hamburger--elastic.is-active .hamburger-inner::after {
transform: translate3d(0, -14px, 0) rotate(-270deg);
transition-delay: 0.075s;
} .hamburger--elastic-r .hamburger-inner {
top: 1px;
transition-duration: 0.275s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic-r .hamburger-inner::before {
top: 7px;
transition: opacity 0.125s 0.275s ease;
}
.hamburger--elastic-r .hamburger-inner::after {
top: 14px;
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic-r.is-active .hamburger-inner {
transform: translate3d(0, 7px, 0) rotate(-135deg);
transition-delay: 0.075s;
}
.hamburger--elastic-r.is-active .hamburger-inner::before {
transition-delay: 0s;
opacity: 0;
}
.hamburger--elastic-r.is-active .hamburger-inner::after {
transform: translate3d(0, -14px, 0) rotate(270deg);
transition-delay: 0.075s;
} .hamburger--emphatic {
overflow: hidden;
}
.hamburger--emphatic .hamburger-inner {
transition: background-color 0.125s 0.175s ease-in;
}
.hamburger--emphatic .hamburger-inner::before {
left: 0;
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}
.hamburger--emphatic .hamburger-inner::after {
top: 7px;
right: 0;
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}
.hamburger--emphatic.is-active .hamburger-inner {
transition-delay: 0s;
transition-timing-function: ease-out;
background-color: transparent !important;
}
.hamburger--emphatic.is-active .hamburger-inner::before {
left: -48px;
top: -48px;
transform: translate3d(48px, 48px, 0) rotate(45deg);
transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic.is-active .hamburger-inner::after {
right: -48px;
top: -48px;
transform: translate3d(-48px, 48px, 0) rotate(-45deg);
transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
} .hamburger--emphatic-r {
overflow: hidden;
}
.hamburger--emphatic-r .hamburger-inner {
transition: background-color 0.125s 0.175s ease-in;
}
.hamburger--emphatic-r .hamburger-inner::before {
left: 0;
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}
.hamburger--emphatic-r .hamburger-inner::after {
top: 7px;
right: 0;
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}
.hamburger--emphatic-r.is-active .hamburger-inner {
transition-delay: 0s;
transition-timing-function: ease-out;
background-color: transparent !important;
}
.hamburger--emphatic-r.is-active .hamburger-inner::before {
left: -48px;
top: 48px;
transform: translate3d(48px, -48px, 0) rotate(-45deg);
transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic-r.is-active .hamburger-inner::after {
right: -48px;
top: 48px;
transform: translate3d(-48px, -48px, 0) rotate(45deg);
transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
} .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear;
}
.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
opacity: 0;
transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear;
}
.hamburger--minus.is-active .hamburger-inner::before {
top: 0;
}
.hamburger--minus.is-active .hamburger-inner::after {
bottom: 0;
} .hamburger--slider .hamburger-inner {
top: 1px;
}
.hamburger--slider .hamburger-inner::before {
top: 7px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.hamburger--slider .hamburger-inner::after {
top: 14px;
}
.hamburger--slider.is-active .hamburger-inner {
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--slider.is-active .hamburger-inner::before {
transform: rotate(-45deg) translate3d(-3.4285714286px, -5px, 0);
opacity: 0;
}
.hamburger--slider.is-active .hamburger-inner::after {
transform: translate3d(0, -14px, 0) rotate(-90deg);
} .hamburger--slider-r .hamburger-inner {
top: 1px;
}
.hamburger--slider-r .hamburger-inner::before {
top: 7px;
transition-property: transform, opacity;
transition-timing-function: ease;
transition-duration: 0.15s;
}
.hamburger--slider-r .hamburger-inner::after {
top: 14px;
}
.hamburger--slider-r.is-active .hamburger-inner {
transform: translate3d(0, 7px, 0) rotate(-45deg);
}
.hamburger--slider-r.is-active .hamburger-inner::before {
transform: rotate(45deg) translate3d(3.4285714286px, -5px, 0);
opacity: 0;
}
.hamburger--slider-r.is-active .hamburger-inner::after {
transform: translate3d(0, -14px, 0) rotate(90deg);
} .hamburger--spin .hamburger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--spin-r .hamburger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin-r .hamburger-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin-r .hamburger-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin-r.is-active .hamburger-inner {
transform: rotate(-225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin-r.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin-r.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--spring .hamburger-inner {
top: 1px;
transition: background-color 0s 0.13s linear;
}
.hamburger--spring .hamburger-inner::before {
top: 7px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring .hamburger-inner::after {
top: 14px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.22s;
background-color: transparent !important;
}
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 7px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 7px, 0) rotate(-45deg);
} .hamburger--spring-r .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring-r .hamburger-inner::after {
top: -14px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear;
}
.hamburger--spring-r .hamburger-inner::before {
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring-r.is-active .hamburger-inner {
transform: translate3d(0, -7px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spring-r.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear;
}
.hamburger--spring-r.is-active .hamburger-inner::before {
top: 0;
transform: rotate(90deg);
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--stand .hamburger-inner {
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}
.hamburger--stand .hamburger-inner::before {
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand .hamburger-inner::after {
transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand.is-active .hamburger-inner {
transform: rotate(90deg);
background-color: transparent !important;
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}
.hamburger--stand.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-45deg);
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--stand.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(45deg);
transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--stand-r .hamburger-inner {
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}
.hamburger--stand-r .hamburger-inner::before {
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand-r .hamburger-inner::after {
transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand-r.is-active .hamburger-inner {
transform: rotate(-90deg);
background-color: transparent !important;
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}
.hamburger--stand-r.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-45deg);
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--stand-r.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(45deg);
transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
} .hamburger--vortex .hamburger-inner {
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
transition-duration: 0s;
transition-delay: 0.1s;
transition-timing-function: linear;
}
.hamburger--vortex .hamburger-inner::before {
transition-property: top, opacity;
}
.hamburger--vortex .hamburger-inner::after {
transition-property: bottom, transform;
}
.hamburger--vortex.is-active .hamburger-inner {
transform: rotate(765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
transition-delay: 0s;
}
.hamburger--vortex.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
}
.hamburger--vortex.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(90deg);
} .hamburger--vortex-r .hamburger-inner {
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
transition-duration: 0s;
transition-delay: 0.1s;
transition-timing-function: linear;
}
.hamburger--vortex-r .hamburger-inner::before {
transition-property: top, opacity;
}
.hamburger--vortex-r .hamburger-inner::after {
transition-property: bottom, transform;
}
.hamburger--vortex-r.is-active .hamburger-inner {
transform: rotate(-765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
transition-delay: 0s;
}
.hamburger--vortex-r.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
}
.hamburger--vortex-r.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
overflow-wrap: break-word;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
scroll-padding-top: 105px;
}
@media (max-width: 768px) {
html {
scroll-padding-top: 89px;
}
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--color-beige);
}
@media (max-width: 992px) {
body.no-scroll {
overflow-y: hidden;
}
}
img, picture, figure, video, canvas, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input, button, textarea, select {
font: inherit;
}
html {
font-family: "Inter Tight", sans-serif;
}
body {
font-size: 1.8rem;
overflow-x: clip;
}
a {
color: var(--color-orange);
text-decoration: none;
font-family: "Inter", sans-serif;
transition: color 0.3s ease-in-out;
}
.lexteria-icons {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
::-moz-selection { color: white;
background: var(--color-orange-d);
}
::selection {
color: white;
background: var(--color-orange-d);
}
.content p {
margin: 2.4rem 0;
}
.content p + h1, .content p + h2, .content p + h3, .content p + h4, .content p + h5, .content p + h6 {
margin-top: 4.8rem;
}
.content h1, .content h2, .content h3 {
margin: 2.4rem 0;
}
.content h4, .content h5, .content h6 {
margin-top: 2.4rem;
}
.content ul {
padding-left: 3.2rem;
}
.content ul.checklist {
font-weight: 500;
color: var(--color-thirtiary);
}
.content ul.checklist li {
color: var(--color-thirtiary);
list-style-type: none;
position: relative;
margin-bottom: 8px;
}
.content ul.checklist li:before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 10L4 12L10 18L20 8L18 6L10 14L6 10Z' fill='%23EA6D41'/%3E%3C/svg%3E%0A");
width: 24px;
height: 24px;
position: absolute;
display: block;
left: -30px;
top: 2px;
}
.content li {
margin-bottom: 0.8rem;
color: var(--color-grey);
}
.content li::marker {
color: var(--color-orange);
}
.content img {
border-radius: 1.2rem;
}
.content a:hover {
color: var(--color-orange-d);
}
.content table {
font-size: 1.5rem;
text-align: left;
border-collapse: collapse;
color: var(--color-text);
border-top: 1px solid var(--color-secondary-dd);
margin: 2.4rem 0;
width: 100%;
}
@media (max-width: 480px) {
.content table {
font-size: 1.4rem;
}
}
.content table tr {
border-bottom: 1px solid var(--color-secondary-dd);
}
.content table th, .content table td {
padding: 0.8rem 0;
padding-right: 0.4rem;
vertical-align: top;
}
.content table th {
color: var(--color-thirtiary);
font-weight: 500;
}
.nav-margin {
padding-top: 125px;
}
@media (max-width: 1200px) {
.nav-margin {
padding-top: 110px;
}
}
@media (max-width: 992px) {
.nav-margin {
padding-top: 90px;
}
}
.has-youtube .fancybox__content, .has-vimeo .fancybox__content, .has-html5video .fancybox__content {
width: 1600px !important;
height: auto !important;
max-width: 100%;
max-height: 100%;
}
hr {
border: none;
border-top: 3px solid var(--color-orange);
margin: 4rem 0;
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 0 2.4rem;
}
@media (max-width: 480px) {
.container {
padding: 0 1.6rem;
}
}
@media (min-width: 1400px) {
.container {
padding: 0 6.4rem;
}
}
.container.-lg {
max-width: 1200px;
}
.container.-md {
max-width: 960px;
}
.container.-sm {
max-width: 800px;
}
.container.-xl {
max-width: none;
}
.flexible-block {
margin: 8.8rem 0;
}
@media (max-width: 768px) {
.flexible-block {
margin: 6.4rem 0;
}
}
.flexible-block.-background {
background-color: var(--color-secondary);
padding: 8.8rem 0;
margin: 0;
}
@media (max-width: 768px) {
.flexible-block.-background {
padding: 6.4rem 0;
}
}
.flexible-block.-line {
border-bottom: 1px solid var(--color-secondary-d);
margin-top: 8.8rem;
padding-bottom: 8.8rem;
margin: 0;
}
@media (max-width: 768px) {
.flexible-block.-line {
margin-top: 6.4rem;
padding-bottom: 6.4rem;
}
}
.-ta-center {
text-align: center;
}
.-tt-lowercase {
text-transform: lowercase;
}
.rounded-block {
margin-top: 10rem;
margin-bottom: 10rem;
}
@media (max-width: 992px) {
.rounded-block {
margin-top: 8rem;
margin-bottom: 8rem;
}
}
@media (max-width: 768px) {
.rounded-block {
margin-top: 6rem;
margin-bottom: 6rem;
}
}
.rounded-block-wrapper {
position: relative;
padding-top: 8rem;
padding-bottom: 8rem;
}
@media (max-width: 768px) {
.rounded-block-wrapper {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.rounded-block-wrapper:after {
content: "";
position: absolute;
height: 100%;
top: 0;
z-index: -2;
}
.rounded-block-wrapper.-white {
background-color: var(--color-white);
}
.rounded-block-wrapper.-white:after {
background-color: var(--color-white);
}
.rounded-block-wrapper.-grey {
background-color: var(--color-grey);
color: var(--color-white);
}
.rounded-block-wrapper.-grey:after {
background-color: var(--color-grey);
}
.rounded-block-wrapper.-left {
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
}
.rounded-block-wrapper.-left:after {
left: -200%;
width: 200%;
}
.rounded-block-wrapper.-right {
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
}
.rounded-block-wrapper.-right:after {
right: -200%;
width: 200%;
}
.rounded-block:has(> .-right) {
margin-left: 2.4rem;
}
@media (max-width: 480px) {
.rounded-block:has(> .-right) {
margin-left: 1.6rem;
}
}
@media (min-width: 1400px) {
.rounded-block:has(> .-right) {
margin-left: 6.4rem;
}
}
.rounded-block:has(> .-left) {
margin-right: 2.4rem;
}
@media (max-width: 480px) {
.rounded-block:has(> .-left) {
margin-right: 1.6rem;
}
}
@media (min-width: 1400px) {
.rounded-block:has(> .-left) {
margin-right: 6.4rem;
}
}
.-padding-0 {
padding: 0;
}
.-beige-d {
background-color: var(--color-beige-d);
}
.-orange-blob {
position: relative;
overflow: hidden;
}
.-orange-blob > * {
position: relative;
z-index: 1;
}
.-orange-blob:before {
content: "";
position: absolute;
background-color: var(--color-orange-d);
width: 100%;
min-width: 400px;
max-width: 1200px;
right: -20%;
top: 40%;
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
transform: rotate(24deg);
}
@media (max-width: 768px) {
.-orange-blob:before {
top: auto;
bottom: -20%;
}
}
.-margin-md {
margin-top: 6rem;
margin-bottom: 6rem;
}
@media (max-width: 768px) {
.-margin-md {
margin-top: 4rem;
margin-bottom: 4rem;
}
}
@media (max-width: 480px) {
.-margin-md {
margin-top: 4rem;
margin-bottom: 4rem;
}
}
.-margin-lg {
margin-top: 10rem;
margin-bottom: 10rem;
}
@media (max-width: 992px) {
.-margin-lg {
margin-top: 8rem;
margin-bottom: 8rem;
}
}
@media (max-width: 768px) {
.-margin-lg {
margin-top: 6rem;
margin-bottom: 6rem;
}
}
@media (max-width: 480px) {
.-margin-lg {
margin-top: 6rem;
margin-bottom: 6rem;
}
}
.-margin-b-0 {
margin-bottom: 0 !important;
}
.-margin-t-0 {
margin-top: 0 !important;
}
.-padding-md {
padding-top: 6rem;
padding-bottom: 6rem;
}
@media (max-width: 768px) {
.-padding-md {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
@media (max-width: 480px) {
.-padding-md {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.-padding-lg {
padding-top: 10rem !important;
padding-bottom: 10rem !important;
}
@media (max-width: 992px) {
.-padding-lg {
padding-top: 8rem !important;
padding-bottom: 8rem !important;
}
}
@media (max-width: 768px) {
.-padding-lg {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
}
@media (max-width: 480px) {
.-padding-lg {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
}
.hidden {
display: none;
}
h1, h2, h3, h4, h5, h6 {
line-height: 110%;
color: var(--color-grey);
font-weight: 300;
margin: 0;
font-family: "Inter Tight", sans-serif;
text-transform: uppercase;
}
.type-display {
font-size: clamp(3.2rem, calc(3.2rem - 0.0258064516 * 36rem) + 100vw * 0.0258064516, 6.4rem);
}
@media (max-height: 800px) and (min-width: 800px) {
.type-display {
font-size: clamp(3.2rem, calc(3.2rem - 0.0258064516 * 36rem) + 100vw * 0.0258064516, 6.4rem);
}
}
h1, .type-1 {
font-size: clamp(3.2rem, calc(3.2rem - 0.0258064516 * 36rem) + 100vw * 0.0258064516, 6.4rem);
}
h2, .type-2 {
font-size: clamp(2.8rem, calc(2.8rem - 0.0177419355 * 36rem) + 100vw * 0.0177419355, 5rem);
}
h3, .type-3 {
font-size: clamp(2rem, calc(2rem - 0.0064516129 * 36rem) + 100vw * 0.0064516129, 2.8rem);
}
h4, .type-4 {
font-size: clamp(1.8rem, calc(1.8rem - 0.0024193548 * 36rem) + 100vw * 0.0024193548, 2.1rem);
}
h5, .type-5 {
font-size: clamp(1.6rem, calc(1.6rem - 0.0016129032 * 36rem) + 100vw * 0.0016129032, 1.8rem);
}
h6, .type-6 {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 1px;
}
p, li {
font-size: clamp(1.8rem, calc(1.8rem - 0.0024193548 * 36rem) + 100vw * 0.0024193548, 2.1rem);
line-height: 150%;
color: var(--color-grey);
}
a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6 {
color: var(--color-primary);
}
.bold, strong, b {
font-weight: 800;
}
.button {
display: inline-block;
padding: 1.4rem 3.2rem;
text-transform: uppercase;
border: 1px solid white;
border-radius: 100px;
color: white;
font-size: 2.1rem;
transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
@media (max-width: 768px) {
.button {
font-size: 2rem;
}
}
.button:hover, .button:active, .button:focus {
border-color: var(--color-white);
background-color: var(--color-white);
color: var(--color-grey);
}
.button--dark {
color: var(--color-grey);
border-color: var(--color-grey);
}
.button.-white {
background-color: white;
color: var(--color-orange);
border: none;
}
.button.-white:hover, .button.-white:active, .button.-white:focus {
background-color: var(--color-orange);
color: white;
border: none;
}
.button.-beige {
background-color: var(--color-beige);
color: var(--color-grey);
border: 1px solid var(--color-white);
}
.button.-beige:hover, .button.-beige:active, .button.-beige:focus {
background-color: var(--color-white);
}
.button.-lg {
font-size: 2.4rem;
padding: 1.6rem 3.2rem;
}
.button.-orange {
background-color: var(--color-orange);
color: white;
border: none;
}
.button.-orange:hover, .button.-orange:active, .button.-orange:focus {
background-color: var(--color-orange-d);
color: white;
}
@media (max-width: 768px) {
.button.-mobile-sm {
font-size: 1.6rem;
padding: 0.8rem 2rem;
}
}
.button--icon {
all: unset;
width: 6.2rem;
height: 6.2rem;
flex: 0 0 auto;
}
.button--icon.-sm {
width: 4.8rem;
height: 4.8rem;
}
.button--icon.-sm:after {
background-size: 12px 12px;
}
@media (max-width: 768px) {
.button--icon {
width: 4.8rem;
height: 4.8rem;
}
.button--icon:after {
background-size: 12px 12px;
}
}
.button--icon.-dark-bg .squircle {
color: var(--color-grey-l);
}
.button--icon.-dark-bg.-prev:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.14371 0.0424804L9.58789 1.48666L3.50207 7.57248L9.58789 13.6583L8.14371 15.1025L0.613714 7.57248L8.14371 0.0424804Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.button--icon.-dark-bg.-next:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.14371 0.0424804L9.58789 1.48666L3.50207 7.57248L9.58789 13.6583L8.14371 15.1025L0.613714 7.57248L8.14371 0.0424804Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.button--icon.-prev {
position: relative;
}
.button--icon.-prev:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.14371 0.0424804L9.58789 1.48666L3.50207 7.57248L9.58789 13.6583L8.14371 15.1025L0.613714 7.57248L8.14371 0.0424804Z' fill='%232D2D28'/%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
.button--icon.-next {
position: relative;
}
.button--icon.-next:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
height: 100%;
width: 100%;
transform: rotate(180deg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.14371 0.0424804L9.58789 1.48666L3.50207 7.57248L9.58789 13.6583L8.14371 15.1025L0.613714 7.57248L8.14371 0.0424804Z' fill='%232D2D28'/%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
.button--icon:hover .squircle {
color: var(--color-orange);
}
.button--icon .squircle {
color: var(--color-beige-d);
transition: 0.3s ease-in-out;
}
.button-bar {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
margin: 3.2rem 0;
}
.form__title {
margin-bottom: 1.6rem;
}
.form__text {
margin-bottom: 3.2rem;
}
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield select,
body .gform_wrapper .gform_body .gform_fields .gfield textarea,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] {
border: 1px solid var(--color-grey);
block-size: 50px;
border-radius: 30px;
font-size: clamp(1.6rem, calc(1.6rem - 0.0024193548 * 36rem) + 100vw * 0.0024193548, 1.9rem);
}
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:active, body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:active,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:active,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:active,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:active,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus {
box-shadow: 0 0 0 3px rgba(229, 88, 19, 0.3);
border-color: var(--color-orange);
outline-color: transparent !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]::placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield select::placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield textarea::placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]::placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]::placeholder {
color: var(--color-grey-l);
opacity: 1; }
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]::-ms-input-placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield select::-ms-input-placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield textarea::-ms-input-placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]::-ms-input-placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]::-ms-input-placeholder { color: var(--color-grey-l);
}
.gform-theme--foundation .gform_fields {
row-gap: 20px;
}
.gform-button {
font-family: "Inter Tight", sans-serif !important;
font-size: 1.8rem !important;
text-transform: uppercase !important;
border-radius: 80px !important;
border: 1px solid var(--color-white) !important;
background-color: transparent !important;
padding: 1.6rem 2.4rem !important;
}
.gform-button:hover, .gform-button:active, .gform-button:focus {
background-color: var(--color-orange-d) !important;
}
@media (max-width: 768px) {
.gform-button {
inline-size: 100% !important;
}
}
body .gform_wrapper .gform_footer input[type=submit] {
border-radius: 100px !important;
padding: 1.6rem 2.4rem !important;
display: inline-flex !important;
font-size: 1.6rem !important;
font-weight: 500 !important;
align-items: center !important;
transition: all 0.3s ease-in-out !important;
text-decoration: none !important;
background-color: var(--primary-400) !important;
color: var(--color-grey) !important;
position: relative !important;
border: 1px solid var(--color-grey) !important;
font-family: "Inter Tight", sans-serif, sans-serif !important;
position: relative !important;
background-color: transparent !important;
overflow: hidden !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
body .gform_wrapper .gform_footer input[type=submit]:hover, body .gform_wrapper .gform_footer input[type=submit]:active, body .gform_wrapper .gform_footer input[type=submit]:focus {
background-color: var(--color-blue) !important;
border-color: var(--color-blue) !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {
color: #da4141;
}
body .gform_wrapper .gform_validation_errors {
display: none;
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
color: var(--color-grey);
font-size: 2.1rem;
font-weight: 600;
margin-bottom: 0.8rem;
}
body .gform_wrapper {
width: 100%;
}
.gform-theme--foundation .gform_fields {
grid-row-gap: 20px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_drop_area {
border-color: var(--color-text);
border-radius: 8px;
box-shadow: none;
background-color: transparent;
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files {
border: 2px solid var(--neutral-300);
color: white;
padding: 1.2rem 2.4rem;
font-weight: 500;
border-radius: 40px;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
background-color: var(--color-text);
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files:hover {
opacity: 0.8;
}
.gfield_description.gform_fileupload_rules {
color: var(--color-text) !important;
}
.gform_drop_instructions {
color: white !important;
}
body .gform-theme--framework .gfield:where(.gfield--type-fileupload, .gfield--input-type-fileupload) .gform_drop_area::before {
color: white !important;
}
.gform_required_legend {
display: none;
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox] {
border: 1px solid var(--color-grey);
border-radius: 4px;
width: 18px;
height: 18px;
justify-self: center;
align-self: center;
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox]:active, body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox]:focus {
box-shadow: 0 0 0 3px rgba(229, 88, 19, 0.3);
outline-color: transparent !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox input[type=checkbox]::before {
color: var(--color-orange);
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox label {
font-size: clamp(1.6rem, calc(1.6rem - 0.0024193548 * 36rem) + 100vw * 0.0024193548, 1.9rem);
color: var(--color-grey);
}
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text],
body #gform_wrapper_1 .gform_body .gform_fields .gfield select,
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel] {
border: none;
border-bottom: 1px solid var(--color-white);
block-size: 50px;
border-radius: 0;
background-color: transparent;
color: var(--color-text-l);
font-size: clamp(1.8rem, calc(1.8rem - 0.0048387097 * 36rem) + 100vw * 0.0048387097, 2.4rem);
box-shadow: none;
padding-left: 0;
}
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text]:active, body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text]:focus,
body #gform_wrapper_1 .gform_body .gform_fields .gfield select:active,
body #gform_wrapper_1 .gform_body .gform_fields .gfield select:focus,
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea:active,
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea:focus,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email]:active,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email]:focus,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel]:active,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel]:focus {
border-bottom-color: white !important;
}
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text]::placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield select::placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea::placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email]::placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel]::placeholder {
color: var(--color-white);
opacity: 1; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text]::-ms-input-placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield select::-ms-input-placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea::-ms-input-placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email]::-ms-input-placeholder,
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel]::-ms-input-placeholder { color: var(--color-white);
}
.gform-theme--foundation .gform_fields {
row-gap: 20px;
}
.gform-button {
font-family: "Inter Tight", sans-serif !important;
font-size: 1.8rem !important;
text-transform: uppercase !important;
border-radius: 80px !important;
border: 1px solid var(--color-white) !important;
background-color: transparent !important;
padding: 1.6rem 2.4rem !important;
}
.gform-button:hover, .gform-button:active, .gform-button:focus {
background-color: var(--color-orange-d) !important;
}
@media (max-width: 768px) {
.gform-button {
inline-size: 100% !important;
}
}
body #gform_wrapper_1 .gform_footer input[type=submit] {
border-radius: 100px !important;
padding: 1.6rem 2.4rem !important;
display: inline-flex !important;
font-size: 1.6rem !important;
font-weight: 500 !important;
align-items: center !important;
transition: all 0.3s ease-in-out !important;
text-decoration: none !important;
background-color: var(--primary-400) !important;
color: white !important;
position: relative !important;
border: none !important;
font-family: "Poppins", sans-serif !important;
position: relative !important;
background-color: var(--color-primary) !important;
overflow: hidden !important;
}
body #gform_wrapper_1 .gform_footer input[type=submit] span {
z-index: 1 !important;
}
body #gform_wrapper_1 .gform_footer input[type=submit]:before {
content: "" !important;
top: 0 !important;
right: -100px !important;
width: 120px !important;
height: 400% !important;
position: absolute !important;
background: linear-gradient(270deg, rgba(230, 193, 119, 0) 0%, rgba(230, 193, 119, 0.7) 49.87%, rgba(230, 193, 119, 0) 100%) !important;
transform: rotate(-20deg) translateY(-50%) !important;
transition: 1.5s cubic-bezier(0.76, 0, 0.24, 1) !important;
}
body #gform_wrapper_1 .gform_footer input[type=submit]:hover, body #gform_wrapper_1 .gform_footer input[type=submit]:active, body #gform_wrapper_1 .gform_footer input[type=submit]:focus {
background-color: var(--color-primary-d) !important;
}
body #gform_wrapper_1 .gform_footer input[type=submit]:hover:before, body #gform_wrapper_1 .gform_footer input[type=submit]:active:before, body #gform_wrapper_1 .gform_footer input[type=submit]:focus:before {
right: 60% !important;
width: 300px !important;
}
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error .validation_message {
color: #da4141;
}
body #gform_wrapper_1 .gform_validation_errors {
display: none;
}
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {
color: white;
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 0;
}
body #gform_wrapper_1 {
width: 100%;
}
.gform-theme--foundation .gform_fields {
grid-row-gap: 20px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_drop_area {
border-color: var(--color-text);
border-radius: 8px;
box-shadow: none;
background-color: transparent;
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files {
border: 2px solid var(--neutral-300);
color: white;
padding: 1.2rem 2.4rem;
font-weight: 500;
border-radius: 40px;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
background-color: var(--color-text);
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files:hover {
opacity: 0.8;
}
.gfield_description.gform_fileupload_rules {
color: var(--color-text) !important;
}
.gform_drop_instructions {
color: white !important;
}
body .gform-theme--framework .gfield:where(.gfield--type-fileupload, .gfield--input-type-fileupload) .gform_drop_area::before {
color: white !important;
}
.gform_required_legend {
display: none;
}
.gform_confirmation_message {
font-size: 2rem;
text-align: center;
}
#gform_confirmation_message_2, .gform_confirmation_message_2 {
font-size: 2rem;
text-align: center;
color: var(--color-orange);
}
.nav {
background-color: var(--color-white);
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 999;
min-height: 90px;
transition: transform 0.2s ease-in-out;
}
.nav.hidden {
transform: translateY(-100%);
}
.nav__logo {
transition: 0.3s ease-in-out;
}
.nav__logo svg {
width: 260px;
height: auto;
position: relative;
top: -10%;
}
@media (max-width: 1200px) {
.nav__logo svg {
width: 200px;
}
}
@media (max-width: 1200px) {
.nav__logo svg {
width: 160px;
}
}
.nav__logo:hover {
opacity: 0.8;
}
.nav__wrapper {
display: flex;
justify-content: space-between;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
}
.nav__right {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 1.6rem;
flex-shrink: 0;
}
@media (max-width: 992px) {
.nav__right {
flex-direction: row;
align-items: center;
}
}
.nav__right__top-menu {
display: flex;
justify-content: flex-end;
gap: 2.4rem;
align-items: center;
}
@media (max-width: 992px) {
.nav__right__top-menu .top-menu {
display: none;
}
}
.nav__right__top-menu .top-menu ul {
display: flex;
justify-content: flex-end;
list-style-type: none;
margin: 0;
padding: 0;
gap: 2.4rem;
}
.nav__right__top-menu .top-menu ul li a {
font-size: 1.6rem;
color: var(--color-grey);
}
.nav__right__top-menu .top-menu ul li a:hover {
color: var(--color-orange);
}
.nav .language-switch {
display: inline;
color: var(--color-grey);
font-family: "Inter", sans-serif;
font-size: 1.5rem;
}
@media (max-width: 992px) {
.nav .main-menu {
position: absolute;
left: 0;
top: 0;
width: 100%;
visibility: hidden;
pointer-events: none;
opacity: 0;
z-index: -1;
}
.nav .main-menu.show-menu {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
}
.nav .main-menu ul {
display: flex;
gap: 2.8rem;
margin: 0;
padding: 0;
}
@media (max-width: 1200px) {
.nav .main-menu ul {
gap: 2.4rem;
}
}
@media (max-width: 992px) {
.nav .main-menu ul {
flex-direction: column;
gap: 0;
margin-top: 89px;
max-height: calc(100vh - 89px);
overflow-y: auto;
}
}
.nav .main-menu ul li {
list-style-type: none;
}
@media (max-width: 992px) {
.nav .main-menu ul li:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: scale(1);
transform: translate3D(0, 0, 0);
transform-origin: top left;
}
}
.nav .main-menu ul li a {
color: var(--color-grey);
font-weight: 600;
font-size: 2rem;
font-family: "Inter Tight", sans-serif;
transition: 0.2s color ease-in-out;
padding: 2.4rem 0;
}
@media (max-width: 992px) {
.nav .main-menu ul li a {
padding: 1.6rem 2.4rem;
background-color: var(--color-beige);
display: block;
border-bottom: 1px solid var(--color-beige-d);
transition: 0.2s ease-in-out;
}
}
.nav .main-menu ul li a:hover, .nav .main-menu ul li a:active .nav .main-menu ul li a:focus {
color: var(--color-orange);
}
.nav .main-menu .menu-item-has-children {
position: relative;
}
.nav .main-menu .menu-item-has-children:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: scale(1);
transform: translate3D(0, 0, 0);
transform-origin: top left;
}
@media (max-width: 992px) {
.nav .main-menu .menu-item-has-children .dropdown-toggle {
position: absolute;
right: 0;
top: 0;
padding: 3.1rem;
background-color: var(--color-beige-d);
transition: transform 0.3s ease;
}
.nav .main-menu .menu-item-has-children .dropdown-toggle:after {
content: "";
position: absolute;
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/chevron.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: transform 0.3s ease;
}
.nav .main-menu .menu-item-has-children .dropdown-toggle.open:after {
transform: rotate(180deg);
}
}
.nav .main-menu .menu-item-has-children > a {
padding-right: 2.4rem;
}
@media (max-width: 992px) {
.nav .main-menu .menu-item-has-children > a {
padding-right: 8.4rem;
}
}
.nav .main-menu .menu-item-has-children > a:after {
content: "";
vertical-align: middle;
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/chevron.svg);
background-repeat: no-repeat;
background-position: center;
height: 100%;
right: 0;
}
@media (max-width: 992px) {
.nav .main-menu .menu-item-has-children > a:after {
display: none;
}
}
.nav .main-menu .menu-item-has-children .sub-menu {
position: absolute;
left: 0;
top: 3rem;
margin: 0;
padding: 0;
background-color: var(--color-white);
border-radius: 12px;
min-width: 250px;
max-width: 300px;
padding: 1.2rem 0;
margin-top: 2rem;
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: hidden;
display: block;
transform: translate3D(0, -5px, 0);
transform-origin: top left;
transition: 0.2s ease-in-out;
}
@media (max-width: 992px) {
.nav .main-menu .menu-item-has-children .sub-menu {
position: static;
opacity: 1;
visibility: visible;
border-radius: 0;
max-width: none;
padding: 0;
margin-top: 0;
box-shadow: none;
transform: translate3D(0, 0, 0);
display: none;
}
.nav .main-menu .menu-item-has-children .sub-menu li a {
background-color: var(--color-beige-d);
border-bottom: 1px solid #d3ceb6;
padding: 1.6rem 2.4rem !important;
}
.nav .main-menu .menu-item-has-children .sub-menu li a:hover {
background-color: #d3ceb6 !important;
}
.nav .main-menu .menu-item-has-children .sub-menu.active {
display: block;
}
}
.nav .main-menu .menu-item-has-children .sub-menu li a {
display: block;
padding: 1.2rem 3.2rem;
font-weight: 500;
}
.nav .main-menu .menu-item-has-children .sub-menu li a:hover, .nav .main-menu .menu-item-has-children .sub-menu li a:focus {
background-color: var(--color-beige);
color: var(--color-orange);
}
.hamburger {
display: none;
}
@media (max-width: 992px) {
.hamburger {
display: block;
}
}
.wpml-ls-legacy-dropdown-click {
width: auto;
}
.wpml-ls-legacy-dropdown-click .js-wpml-ls-item-toggle {
font-size: 1.6rem;
color: var(--color-grey);
border: none;
}
.wpml-ls-legacy-dropdown-click .js-wpml-ls-item-toggle:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23E55813' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
border: none !important;
height: 10px;
width: 12px;
}
.wpml-ls-legacy-dropdown-click .js-wpml-ls-item-toggle:hover {
color: var(--color-orange) !important;
background-color: transparent !important;
}
.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu {
color: var(--color-grey);
}
.wpml-ls-legacy-dropdown-click .wpml-ls-link {
font-size: 1.6rem;
}
.mobile-menu {
position: absolute;
left: 0;
width: 100%;
visibility: hidden;
pointer-events: none;
opacity: 0;
z-index: -4;
max-height: calc(100vh - 89px);
overflow-y: auto;
}
@media (max-width: 992px) {
.mobile-menu.show-menu {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
}
.mobile-menu ul {
display: flex;
gap: 2.8rem;
margin: 0;
padding: 0;
}
@media (max-width: 1200px) {
.mobile-menu ul {
gap: 2.4rem;
}
}
@media (max-width: 992px) {
.mobile-menu ul {
flex-direction: column;
gap: 0;
}
}
.mobile-menu ul li {
list-style-type: none;
position: relative;
}
@media (max-width: 992px) {
.mobile-menu ul li:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: scale(1);
transform: translate3D(0, 0, 0);
transform-origin: top left;
}
}
.mobile-menu ul li.menu-item-has-children .dropdown-toggle {
position: absolute;
right: 0;
top: 0;
padding: 3.1rem;
background-color: var(--color-beige-d);
transition: transform 0.3s ease;
}
.mobile-menu ul li.menu-item-has-children .dropdown-toggle:after {
content: "";
position: absolute;
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/chevron.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: transform 0.3s ease;
}
.mobile-menu ul li.menu-item-has-children .dropdown-toggle.open:after {
transform: rotate(180deg);
}
.mobile-menu ul li a {
color: var(--color-grey);
font-weight: 600;
font-size: 2rem;
font-family: "Inter Tight", sans-serif;
transition: 0.2s color ease-in-out;
padding: 2.4rem 0;
}
@media (max-width: 1200px) {
.mobile-menu ul li a {
font-size: 1.6rem;
}
}
@media (max-width: 992px) {
.mobile-menu ul li a {
padding: 1.6rem 2.4rem;
background-color: var(--color-beige);
display: block;
border-bottom: 1px solid var(--color-beige-d);
transition: 0.2s ease-in-out;
}
}
.mobile-menu ul li a:hover, .mobile-menu ul li a:active .mobile-menu ul li a:focus {
color: var(--color-orange);
}
.mobile-menu ul li .sub-menu {
position: absolute;
left: 0;
top: 3rem;
margin: 0;
padding: 0;
background-color: var(--color-white);
border-radius: 12px;
min-width: 250px;
max-width: 300px;
padding: 1.2rem 0;
margin-top: 2rem;
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: hidden;
display: block;
transform: translate3D(0, -5px, 0);
transform-origin: top left;
transition: 0.2s ease-in-out;
}
@media (max-width: 992px) {
.mobile-menu ul li .sub-menu {
position: static;
opacity: 1;
visibility: visible;
border-radius: 0;
max-width: none;
padding: 0;
margin-top: 0;
box-shadow: none;
transform: translate3D(0, 0, 0);
display: none;
}
.mobile-menu ul li .sub-menu li a {
background-color: var(--color-beige-d);
border-bottom: 1px solid #d3ceb6;
padding: 1.6rem 2.4rem !important;
}
.mobile-menu ul li .sub-menu li a:hover {
background-color: #d3ceb6 !important;
}
.mobile-menu ul li .sub-menu.active {
display: block;
}
}
.mobile-menu ul li .sub-menu li a {
display: block;
padding: 1.2rem 3.2rem;
font-weight: 500;
}
.mobile-menu ul li .sub-menu li a:hover, .mobile-menu ul li .sub-menu li a:focus {
background-color: var(--color-beige);
color: var(--color-orange);
}
.hero {
background-color: var(--color-orange);
display: flex;
align-items: center;
overflow: hidden;
position: relative;
z-index: 1;
min-height: fit-content;
}
.hero.-blue {
background-color: var(--color-blue);
}
.hero.-blue .hero__text {
color: var(--color-grey);
}
.hero.-blue .hero__text p {
margin-bottom: 2.4rem;
}
.hero.-blue .hero__subtitle {
margin-top: 1.2rem;
}
.hero.-orange .content p, .hero.-orange .content li {
color: var(--color-white) !important;
}
.hero.-green {
background-color: var(--color-green);
}
.hero.-green .content p, .hero.-green .content li {
color: var(--color-white) !important;
}
@media (max-width: 768px) {
.hero {
align-items: flex-start;
}
}
.hero__wrapper {
height: 100%;
width: 100%;
display: flex;
align-items: center;
min-height: fit-content;
gap: 4rem;
justify-content: space-between;
}
@media (max-width: 768px) {
.hero__wrapper {
flex-direction: column;
justify-content: flex-start;
gap: 4rem;
}
}
.hero__wrapper > * {
flex: 0 0 40%;
}
.hero__content {
position: relative;
z-index: 1;
width: 100%;
margin: 4rem 0;
}
@media (max-width: 768px) {
.hero__content {
margin: 2rem 0;
}
}
.hero__button {
margin-top: 1.6rem;
display: inline-flex;
align-items: center;
gap: 0.8rem;
}
.hero__button .play-button {
transition: 0.3s ease-in-out;
}
.hero__button:hover .play-button, .hero__button:active .play-button, .hero__button:focus .play-button {
fill: var(--color-grey);
}
.hero__button__icon {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 4px;
}
.hero__logo {
max-width: 300px;
width: 60%;
min-width: 120px;
height: auto;
}
@media (max-width: 768px) {
.hero__logo {
max-width: 200px;
}
}
.hero__image {
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
@media (max-width: 768px) {
.hero__image {
height: auto;
width: 100%;
height: 100%;
position: static;
}
}
.hero__image__wrapper {
aspect-ratio: 1;
margin: 4rem 0;
max-width: 500px;
}
@media (max-width: 768px) {
.hero__image__wrapper {
height: auto;
width: 100%;
height: 100%;
position: static;
}
}
.hero__image img, .hero__image video {
object-fit: cover;
height: 100%;
width: 100%;
}
.hero__title {
color: var(--color-white);
}
.hero__text {
color: var(--color-white);
margin: 2.4rem 0;
}
.hero__scroll-link {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 6rem;
}
.hero__scroll-icon span {
width: 30px;
height: 30px;
display: block;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
transform: rotate(45deg);
margin: -15px;
animation: animate 3s infinite;
}
.hero__scroll-icon span:nth-child(2) {
animation-delay: -0.2s;
}
.hero__scroll-icon span:nth-child(3) {
animation-delay: -0.4s;
}
.hero__logo-bar {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.8rem;
flex-wrap: wrap;
margin-top: 3.2rem;
align-items: flex-start;
}
.hero__logo-bar__eyebrow {
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-white);
}
.hero__logo-bar__logos {
display: flex;
flex-direction: row;
gap: 2.4rem;
align-items: center;
background-color: var(--color-white);
padding: 1.6rem 3.2rem;
border-radius: 100px;
align-items: center;
position: relative;
}
.hero__logo-bar__logos img {
max-height: 50px;
height: auto;
width: auto;
max-width: 100%;
flex-shrink: 0;
display: block;
}
.hero__logo-bar__logos img.logo-eu {
width: 60%;
}
.hero__logo-bar__logos img.logo-vlaio {
width: 30%;
}
.hero__spotlight {
width: 100%;
max-width: 500px;
margin: 4rem 0;
}
.hero__spotlight-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-grow: 1;
}
.hero__spotlight__eyebrow {
color: var(--color-white);
text-transform: uppercase;
font-size: 1.6rem;
letter-spacing: 0.5px;
margin-bottom: 1.6rem;
display: block;
}
.hero__spotlight__title {
text-transform: unset;
color: white;
margin-bottom: 1.6rem;
}
.hero__spotlight__title-link-wrapper:hover {
color: var(--color-white) !important;
transform: translateX(10px);
}
.hero__spotlight__image {
aspect-ratio: 1;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
border-radius: 12px;
overflow: hidden;
}
.hero__spotlight__image-link-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.hero__spotlight__image-link-wrapper:hover img {
transform: scale(1.03);
}
.hero__spotlight__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.3s ease-in-out;
}
.hero__spotlight__image .button {
margin-bottom: 2.4rem;
position: relative;
z-index: 1;
}
.hero__spotlight__image .button .play-button {
transition: 0.3s ease-in-out;
height: 100%;
}
.hero__spotlight__image .button:hover .play-button, .hero__spotlight__image .button:active .play-button, .hero__spotlight__image .button:focus .play-button {
fill: var(--color-white);
}
.hero__button--secondary {
display: none;
}
@media (max-width: 768px) {
.hero__button--secondary[data-link-type=page] {
display: block;
margin-bottom: 15rem;
margin-top: 0;
flex: 0 0 auto;
}
.hero__button--primary[data-link-type=page] {
display: none;
}
}
@keyframes animate {
0% {
opacity: 0;
}
25% {
opacity: 1;
transform: rotate(45deg) translate(10px, 10px);
}
75% {
opacity: 1;
transform: rotate(45deg) translate(10px, 10px);
}
100% {
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
}
}
.footer {
background-color: var(--color-grey);
}
.footer .column {
padding-right: 2.4rem;
}
.footer .column:first-child {
order: -1;
}
@media (max-width: 480px) {
.footer .column:first-child {
flex-basis: 100%;
}
}
.footer .column:last-child {
padding-right: 0;
text-align: right;
}
@media (max-width: 768px) {
.footer .column:last-child {
order: -1;
}
}
@media (max-width: 480px) {
.footer .column:last-child {
flex-basis: 100%;
text-align: left;
}
}
.footer__text {
color: var(--color-grey-l);
font-size: 1.8rem;
}
.footer__link {
color: var(--color-orange);
font-size: clamp(1.8rem, calc(1.8rem - 0.0048387097 * 36rem) + 100vw * 0.0048387097, 2.4rem);
}
.footer__link:hover, .footer__link:focus, .footer__link:active {
color: var(--color-orange-d);
}
.footer__top {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
row-gap: 4rem;
padding-top: 8.4rem;
padding-bottom: 8.4rem;
}
.footer__top > * {
flex: 0 0 25%;
}
@media (max-width: 768px) {
.footer__top > * {
flex: 0 0 50%;
}
}
.footer__logo {
width: 200px;
}
.footer__title {
font-size: 1.4rem;
font-weight: 400;
text-transform: uppercase;
color: var(--color-orange);
letter-spacing: 0.2rem;
margin-bottom: 3.2rem;
display: inline-block;
}
.footer__menu {
margin: 0;
padding: 0;
}
.footer__menu li {
list-style-type: none;
}
.footer__menu li a {
color: var(--color-beige);
margin-bottom: 0.8rem;
display: inline-block;
}
.footer__menu li a:hover {
color: var(--color-orange);
}
.footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.2rem;
font-size: 1.5rem;
color: var(--color-grey-l);
padding-top: 3.2rem;
padding-bottom: 3.2rem;
}
.footer__bottom a {
color: var(--color-beige);
}
.footer__bottom a:hover, .footer__bottom a:focus, .footer__bottom a:active {
color: var(--color-orange);
}
.footer__bottom__right {
display: flex;
flex-wrap: wrap;
column-gap: 2.4rem;
row-gap: 1.2rem;
}
.footer__logo-bar-wrapper {
background-color: var(--color-beige);
padding: 2.4rem 0;
}
.footer__logo-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 2.4rem;
flex-wrap: wrap;
}
.footer__logo-bar__eyebrow {
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-beige-dd);
}
.footer__logo-bar__logos {
display: flex;
flex-direction: row;
gap: 2.4rem;
align-items: center;
flex-wrap: wrap;
}
.footer__logo-bar__logos img {
height: 45px;
width: auto;
flex-shrink: 1;
}
.footer__logo-bar__right, .footer__logo-bar__left {
display: flex;
flex-direction: column;
row-gap: 1.6rem;
}
.page-header {
background-color: var(--color-orange);
padding: 8rem 0;
}
@media (max-width: 768px) {
.page-header {
padding: 4rem 0;
}
}
.page-header p {
color: var(--color-white);
}
.page-header--course .page-header__title {
text-transform: initial;
font-weight: 800;
}
.page-header.-blue {
background-color: var(--color-blue);
}
.page-header.-blue p {
color: var(--color-grey);
}
.page-header.-green {
background-color: var(--color-green);
}
.page-header__wrapper {
display: flex;
gap: 2.4rem;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) {
.page-header__wrapper {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.6rem;
}
}
.page-header__content {
max-width: 900px;
}
.page-header__title {
color: var(--color-white);
}
.page-header__title--no-caps {
text-transform: initial;
font-weight: 800;
}
.page-header__text {
margin-top: 2.4rem;
}
.page-header__image {
min-width: 300px;
flex-basis: 30%;
flex-grow: 0;
background-color: var(--color-white);
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
clip-path: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
-webkit-clip-path: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
}
.page-header__image img {
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.page-header__icon {
min-width: 140px;
flex: 0 1 220px;
background-color: var(--color-white);
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
clip-path: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
-webkit-clip-path: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
}
.page-header__icon--no-bg {
background-color: transparent;
mask-image: none;
-webkit-mask-image: none;
clip-path: none;
-webkit-clip-path: none;
}
.page-header__icon--cover img {
object-fit: contain !important;
}
.page-header__icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.page-header__icon {
width: 140px;
flex: 0 1 140px;
order: -1;
}
}
.image-with-text {
min-height: fit-content;
position: relative;
align-items: center;
}
.image-with-text.-reversed .image-with-text__wrapper {
flex-direction: row-reverse;
}
@media (max-width: 768px) {
.image-with-text.-reversed .image-with-text__wrapper {
flex-direction: column;
}
}
.image-with-text__wrapper {
display: flex;
justify-content: space-between;
gap: 6.4rem;
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.image-with-text__wrapper {
flex-direction: column;
justify-content: flex-start;
gap: 4rem;
}
}
.image-with-text__content {
flex: 0 0 50%;
}
.image-with-text__content.content:first-child {
margin-top: 0 !important;
}
.image-with-text__content.content:last-child {
margin-bottom: 0 !important;
}
.image-with-text__content.content ul li {
list-style-type: none;
position: relative;
}
.image-with-text__content.content ul li:before {
content: "";
position: absolute;
left: -30px;
top: 4px;
width: 20px;
height: 20px;
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/chevron-list.svg);
background-position: center;
background-repeat: no-repeat;
}
.image-with-text__image {
aspect-ratio: 5/4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
transition: opacity 0.3s ease-in-out;
flex-shrink: 1;
flex-grow: 1;
border-radius: 12px;
}
@media (max-width: 768px) {
.image-with-text__image {
align-self: stretch;
}
}
.image-with-text__image.-link:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: var(--color-grey);
opacity: 0.2;
transition: 0.3s ease-in-out;
border-radius: 12px;
}
.image-with-text__image.-link:hover:after {
opacity: 0.4;
}
.image-with-text__image.-link:hover .image-with-text__lightbox-link {
transform: translate(-50%, -50%) scale(1.1);
}
.image-with-text__image:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
left: 0;
top: 0;
transition: 0.3s ease-in-out;
transform: rotate(30deg) translate(2%, 15%);
z-index: -2;
}
@media (max-width: 768px) {
.image-with-text__image:before {
transform: rotate(30deg) translate(-20%, 5%) scale(0.8);
}
}
.image-with-text__image img,
.image-with-text__image video {
object-fit: cover;
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
overflow: hidden;
border-radius: 12px;
}
.image-with-text__image.-no-squircle:before {
display: none;
}
.image-with-text__image.-blue-squircle:before {
background-color: var(--color-blue);
}
.image-with-text__image.-orange-squircle:before {
background-color: var(--color-orange);
}
.image-with-text__lightbox-link {
content: "";
top: 0;
left: 0;
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
transform: translate(-50%, -50%);
transition: 0.3s ease-in-out;
}
.image-with-text p {
margin-top: 3.2rem;
}
.image-with-text--alt:not(.image-with-text--alt + .image-with-text--alt) .connector {
display: none;
}
.image-with-text--alt {
background-color: var(--color-blue);
min-height: fit-content;
height: 80vh;
padding: 12rem 0;
position: relative;
display: flex;
align-items: center;
}
.image-with-text--alt.-green {
background-color: var(--color-green);
}
.image-with-text--alt.-green.-light {
background-color: var(--color-green-l);
}
.image-with-text--alt.-orange {
background-color: var(--color-orange);
}
.image-with-text--alt .connector {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.image-with-text--alt .connector.-r90 {
transform: translate(-50%, -50%) rotate(-90deg);
}
.image-with-text--alt .connector svg {
max-width: 400px;
max-height: 250px;
width: 400px;
}
@media (max-width: 768px) {
.image-with-text--alt .connector svg {
max-height: 180px;
}
}
.image-with-text--alt:first-of-type .connector {
display: none;
}
.image-with-text--alt:nth-of-type(even) .connector {
transform: translate(-50%, -50%) rotate(-90deg);
}
.image-with-text--alt:nth-of-type(odd) .connector {
transform: translate(-50%, -50%) rotate(-180deg);
}
.image-with-text--alt.-light {
background-color: var(--color-blue-l);
}
.image-with-text--alt.-reversed .image-with-text--alt__wrapper {
flex-direction: row-reverse;
}
@media (max-width: 768px) {
.image-with-text--alt.-reversed .image-with-text--alt__wrapper {
flex-direction: column;
}
}
.image-with-text--alt__wrapper {
display: flex;
justify-content: space-between;
gap: 6.4rem;
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.image-with-text--alt__wrapper {
flex-direction: column;
justify-content: flex-start;
gap: 4rem;
}
}
.image-with-text--alt__content {
flex: 0 0 50%;
}
.image-with-text--alt__image {
max-width: 500px;
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
transition: opacity 0.3s ease-in-out;
flex-shrink: 1;
width: 100%;
height: 100%;
}
.image-with-text--alt__image.-link:after {
opacity: 0.2;
}
.image-with-text--alt__image.-link:hover:after {
opacity: 0.4;
}
.image-with-text--alt__image.-link:hover img, .image-with-text--alt__image.-link:hover video {
transform: scale(1.05);
}
.image-with-text--alt__image.-link:hover .image-with-text__lightbox-link {
transform: translate(-50%, -50%) scale(1.1);
}
.image-with-text--alt__image:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: var(--color-grey);
opacity: 0;
transition: 0.3s ease-in-out;
}
.image-with-text--alt__image img, .image-with-text--alt__image video {
object-fit: cover;
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
}
.image-with-text--alt__lightbox-link {
content: "";
top: 0;
left: 0;
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
transform: translate(-50%, -50%);
transition: 0.3s ease-in-out;
}
.image-with-text--alt p {
margin-top: 3.2rem;
}
.icon-with-text-list {
display: flex;
flex-direction: column;
gap: 2.4rem;
margin-top: 4.8rem;
}
.icon-with-text {
display: flex;
gap: 3.2rem;
align-items: center;
}
@media (max-width: 768px) {
.icon-with-text {
gap: 2.4rem;
}
}
.icon-with-text__image {
flex: 0 0 150px;
align-self: flex-start;
}
@media (max-width: 768px) {
.icon-with-text__image {
flex-basis: 80px;
}
}
.icon-with-text__title {
font-size: 2.4rem;
font-weight: 600;
text-transform: none;
}
@media (max-width: 768px) {
.icon-with-text__title {
font-size: 2rem;
}
}
.icon-with-text h3 + p {
margin-top: 1.2rem;
}
.text-with-small-image__wrapper {
display: flex;
gap: 4rem;
}
@media (max-width: 768px) {
.text-with-small-image__wrapper {
flex-direction: column-reverse;
align-items: center;
}
}
.text-with-small-image__image {
flex: 1 0 400px;
}
@media (max-width: 992px) {
.text-with-small-image__image {
flex: 0 0 300px;
max-width: 300px;
}
}
.text-with-gallery__wrapper {
display: flex;
gap: 4rem;
align-items: flex-start;
}
@media (max-width: 768px) {
.text-with-gallery__wrapper {
flex-direction: column;
align-items: unset;
}
}
.text-with-gallery__wrapper > * {
flex: 1;
}
.text-with-gallery__gallery {
display: grid;
grid-template-areas: "img1 img1 img2 img2 img2 img2" "img3 img3 img3 img3 img4 img4" "img5 img5 img5 img5 img5 img5" "img6 img6 img6 img7 img7 img7";
grid-template-columns: repeat(6, 1fr);
gap: 1.6rem;
}
@media (max-width: 768px) {
.text-with-gallery__gallery {
gap: 0.8rem;
}
}
.text-with-gallery__gallery a {
display: block;
height: 300px;
border-radius: 12px;
overflow: hidden;
}
@media (max-width: 992px) {
.text-with-gallery__gallery a {
height: 200px;
}
}
@media (max-width: 480px) {
.text-with-gallery__gallery a {
height: 150px;
}
}
.text-with-gallery__gallery a:hover img {
transform: scale(1.05);
}
.text-with-gallery__gallery a.hidden {
display: none;
}
.text-with-gallery__gallery a .text-with-gallery__image {
width: 100%;
height: 100%;
position: relative;
}
.text-with-gallery__gallery a .text-with-gallery__image:hover:after {
opacity: 0.5;
}
.text-with-gallery__gallery a .text-with-gallery__image:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--color-orange);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.text-with-gallery__gallery a .text-with-gallery__image img {
object-fit: cover;
height: 100%;
width: 100%;
will-change: transform;
transition: 0.3s ease-in-out;
position: relative;
}
.text-with-gallery__gallery a:nth-child(1) {
grid-area: img1;
}
.text-with-gallery__gallery a:nth-child(2) {
grid-area: img2;
}
.text-with-gallery__gallery a:nth-child(3) {
grid-area: img3;
}
.text-with-gallery__gallery a:nth-child(4) {
grid-area: img4;
}
.text-with-gallery__gallery a:nth-child(5) {
grid-area: img5;
}
.text-with-gallery__gallery a:nth-child(6) {
grid-area: img6;
}
.text-with-gallery__gallery a:nth-child(7) {
grid-area: img7;
}
.text-with-gallery__gallery a {
position: relative;
}
.text-with-gallery__gallery a.text-with-gallery__last-link:after {
content: "+ " attr(data-remaining);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: var(--color-white);
display: flex;
justify-content: center;
align-items: center;
font-size: 2.4rem;
font-weight: bold;
}
.newsletter {
background-color: var(--color-orange);
display: flex;
position: relative;
min-height: fit-content;
height: 60vh;
}
@media (max-width: 992px) {
.newsletter {
display: block;
height: auto;
}
}
.newsletter__wrapper {
display: flex;
align-items: center;
justify-content: stretch;
flex: 1;
flex-wrap: wrap;
min-height: fit-content;
padding-top: 3.2rem;
padding-bottom: 3.2rem;
}
@media (max-width: 992px) {
.newsletter__wrapper {
padding: 0;
}
}
.newsletter__wrapper > * {
flex: 0 0 50%;
}
@media (max-width: 992px) {
.newsletter__wrapper > * {
flex: 0 0 100%;
}
}
.newsletter__image {
object-fit: cover;
position: absolute;
height: 100%;
width: 50vw;
right: 0;
}
@media (max-width: 992px) {
.newsletter__image {
position: relative;
width: auto;
order: -1;
aspect-ratio: 16/9;
}
}
.newsletter__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.newsletter__content {
padding: 12rem 0;
padding-right: 3.2rem;
color: var(--color-white);
}
@media (max-width: 992px) {
.newsletter__content {
padding: 3.2rem 2.4rem;
}
}
.newsletter__content h2, .newsletter__content p {
color: var(--color-white);
}
.form {
margin-top: 2.4rem;
}
.domains {
overflow-x: clip;
}
.domains-list {
display: flex;
flex-direction: row;
column-gap: 10%;
color: var(--color-grey);
align-items: center;
height: 90vh;
min-height: fit-content;
padding: 2.4rem 0;
}
@media (max-width: 992px) {
.domains-list {
column-gap: 2%;
}
}
@media (max-width: 768px) {
.domains-list {
flex-direction: column;
}
}
.domains-list > * {
padding: 16rem 6rem;
flex: 1 1 400px;
width: 40%;
}
@media (max-width: 992px) {
.domains-list > * {
padding: 6rem 3.2rem;
}
}
@media (max-width: 768px) {
.domains-list > * {
padding: 20rem 6rem !important;
width: 100%;
}
}
@media (max-width: 480px) {
.domains-list > * {
padding: 10rem 3.2rem !important;
width: 100%;
}
}
.domain {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: calc(100% - 6.4rem);
min-height: fit-content;
flex-shrink: 1;
overflow-wrap: break-word;
gap: 2rem;
}
.domain:before {
content: "";
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
position: absolute;
height: 100%;
z-index: -1;
}
.domain--blue {
padding-left: 0;
}
.domain--blue:before {
right: 0;
background-color: var(--color-blue);
}
.domain--orange {
padding-right: 0;
}
@media (max-width: 768px) {
.domain--orange {
margin-top: -10rem;
z-index: -2;
}
}
.domain--orange:before {
left: 0;
background-color: var(--color-orange);
}
.domain-columns__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6rem;
color: var(--color-grey);
padding: 2.4rem 0;
}
@media (max-width: 768px) {
.domain-columns__list {
grid-template-columns: 1fr;
}
}
.domain-columns__list > * {
width: 100%;
}
.domain-item__title {
position: relative;
padding: 48px 0;
font-size: clamp(2.4rem, calc(2.4rem - 0.0129032258 * 36rem) + 100vw * 0.0129032258, 4rem);
}
@media (max-width: 768px) {
.domain-item__title {
margin-left: 20px;
padding: 40px 0;
}
}
.domain-item__title:before {
content: "";
position: absolute;
width: 140px;
height: 140px;
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
top: 50%;
transform: translateY(-50%);
left: -30px;
z-index: -2;
}
@media (max-width: 768px) {
.domain-item__title:before {
width: 100px;
height: 100px;
}
}
.domain-item__title.-blue:before {
background-color: var(--color-blue);
}
.domain-item__title.-orange:before {
background-color: var(--color-orange);
}
.domain-item__title.-green:before {
background-color: var(--color-green);
}
.domain-item__button {
margin-top: 2.4rem;
}
.news-block {
margin: 12rem 0;
}
.news-block__heading {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 6rem;
align-items: center;
}
@media (max-width: 768px) {
.news-block__heading {
margin-bottom: 3.2rem;
}
}
.news-block__link {
color: var(--color-grey-l);
display: flex;
align-items: center;
gap: 1.6rem;
flex-shrink: 0;
}
@media (max-width: 768px) {
.news-block__link {
font-size: 1.4rem;
}
}
.news-block__link:hover {
color: var(--color-grey);
}
.news-block__link:hover span .squircle {
color: var(--color-orange);
}
.news-list {
margin: 0;
padding: 0;
}
.news-item {
list-style-type: none;
}
.news-item:first-of-type {
border-top: 1px solid var(--color-beige-d);
}
.news-item__content-wrapper {
flex-grow: 1;
}
.news-item__link-wrapper {
display: flex;
padding: 3.2rem 0;
border-bottom: 1px solid var(--color-beige-d);
position: relative;
min-height: 16rem;
align-items: center;
column-gap: 4rem;
row-gap: 0.8rem;
}
@media (max-width: 768px) {
.news-item__link-wrapper {
flex-direction: column;
align-items: flex-start;
padding-right: 50px;
min-height: 0;
}
.news-item__link-wrapper .arrow-large {
position: absolute;
right: 0;
top: 3.6rem;
height: 2.4rem;
width: 2.4rem;
}
}
.news-item__link-wrapper:hover .arrow-large:after {
transform: translate(100%, -100%);
}
.news-item__link-wrapper:hover .arrow-large:before {
transform: translate(0, 0);
}
.news-item__link-wrapper:hover .news-item__title {
transform: translateX(4px);
}
.news-item__title {
text-transform: none;
flex-grow: 2;
transition: 0.3s ease-in-out;
max-width: 800px;
font-weight: 400;
}
.news-item__date {
font-size: 1.9rem;
color: var(--color-grey-l);
}
@media (max-width: 768px) {
.news-item__date {
font-size: 1.8rem;
}
}
.news-item__image {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 10;
opacity: 0;
will-change: transform, opacity;
width: 25%;
min-width: 300px;
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
}
.news-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.arrow-large {
display: block;
width: 36px;
height: 36px;
position: relative;
aspect-ratio: 1;
overflow: hidden;
}
.arrow-large:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='none'%3E%3Cpath d='M1 2H33V34' stroke='%232D2D28' stroke-width='4'/%3E%3Cpath d='M32 3L2 33' stroke='%232D2D28' stroke-width='4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.arrow-large:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='none'%3E%3Cpath d='M1 2H33V34' stroke='%23E55813' stroke-width='4'/%3E%3Cpath d='M32 3L2 33' stroke='%23E55813' stroke-width='4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
transform: translate(-100%, 100%);
transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.testimonials-wrapper {
background-color: var(--color-white);
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
position: relative;
}
.testimonials-wrapper:after {
content: "";
position: absolute;
width: 200%;
height: 100%;
background-color: var(--color-white);
left: -200%;
top: 0;
}
.testimonials__title {
text-align: center;
}
.testimonials .slick-list {
max-width: 1100px;
}
@media (max-width: 768px) {
.testimonials .slick-list {
order: -1;
width: 100%;
}
}
.testimonial-list {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
margin-top: 3.2rem;
margin-bottom: 3.2rem;
}
@media (max-width: 768px) {
.testimonial-list {
flex-wrap: wrap;
justify-content: center;
column-gap: 1.6rem;
}
}
.slick-dots {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
gap: 4px;
}
@media (max-width: 768px) {
.slick-dots {
display: none !important;
}
}
.slick-dots li {
list-style-type: none;
}
.slick-dots li.slick-active button {
background-color: var(--color-orange);
}
.slick-dots li button {
all: unset;
display: block;
width: 12px;
height: 3px;
color: transparent;
font-size: 0;
line-height: 0;
background-color: var(--color-beige-d);
}
.testimonial {
padding: 6rem;
}
@media (max-width: 768px) {
.testimonial {
padding: 2rem 0rem;
}
}
.testimonial.slick-slide {
display: flex;
flex-direction: row;
column-gap: 4rem;
row-gap: 2.4rem;
}
@media (max-width: 768px) {
.testimonial.slick-slide {
flex-direction: column;
align-items: center;
justify-self: flex-start;
}
}
.testimonial__text {
color: var(--color-grey-l);
}
.testimonial__author {
font-size: clamp(1.7rem, calc(1.7rem - 0.0056451613 * 36rem) + 100vw * 0.0056451613, 2.4rem);
font-weight: 600;
display: block;
margin-top: 3.2rem;
}
.testimonial__author-title {
color: var(--color-grey-l);
font-size: 2rem;
display: block;
}
.testimonial__image {
aspect-ratio: 1;
position: relative;
width: 40%;
min-width: 250px;
flex-grow: 1;
align-self: flex-start;
}
@media (max-width: 768px) {
.testimonial__image {
min-width: 150px;
align-self: center;
}
}
.testimonial__image:after {
content: "";
width: 120px;
height: 110px;
position: absolute;
left: -15%;
top: -15%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 111' fill='none'%3E%3Cpath d='M48.0469 59.5844C48.0469 75.6017 45.1641 87.1342 39.3984 94.1818C32.3516 103.792 20.3398 109.398 3.36328 111L3.36328 82.1688C12.6523 82.1688 18.0977 77.3636 19.6992 67.7533C20.0195 66.1515 20.1797 63.7489 20.1797 60.5454V50.9351H0L0 0L48.0469 0V59.5844ZM123 59.5844C123 75.2814 119.797 87.2944 113.391 95.6234C106.344 104.273 94.6523 109.398 78.3164 111V82.1688C83.4414 82.1688 88.2461 79.7662 92.7305 74.961C94.6523 72.7186 95.6133 67.9134 95.6133 60.5454V50.9351H74.9531V0L123 0V59.5844Z' fill='%23E55813'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
@media (max-width: 768px) {
.testimonial__image:after {
width: 60px;
height: 55px;
}
}
.testimonial__image img {
object-fit: cover;
width: 100%;
height: 100%;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
}
.categories {
margin: 8rem 0;
}
.categories.-white-bg {
background-color: var(--color-white);
margin: 0;
padding: 8rem 0;
}
.categories__title {
margin-bottom: 2.4rem;
}
.categories__subtitle {
text-align: center;
margin-bottom: 2.4rem;
}
.categories__intro {
margin-bottom: 6rem;
}
.categories-list {
display: flex;
margin: 0;
padding: 0;
flex-wrap: wrap;
justify-content: center;
gap: 2.4rem;
}
@media (max-width: 480px) {
.categories-list {
gap: 1.6rem;
}
}
.category-item {
list-style-type: none;
flex: 0 1 calc(20% - 2.4rem);
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
clip-path: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
-webkit-clip-path: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
}
.category-item.-orange {
background-color: rgba(229, 88, 19, 0.15);
transition: 0.3s ease-in-out;
}
.category-item.-orange:hover {
background-color: white;
}
.category-item.-blue {
background-color: rgba(142, 217, 212, 0.15);
transition: 0.3s ease-in-out;
}
.category-item.-blue:hover {
background-color: white;
}
.category-item.-green {
background-color: #e3ede4;
}
.category-item img {
width: 100%;
height: 100%;
}
@media (max-width: 992px) {
.category-item {
flex: 0 1 calc(25% - 2.4rem);
}
}
@media (max-width: 768px) {
.category-item {
flex: 0 1 calc(33.33% - 2.4rem);
}
}
@media (max-width: 480px) {
.category-item {
flex: 0 1 calc(50% - 1.6rem);
}
}
.category-item a {
transform: scale(1);
transition: 0.3s ease-in-out;
display: block;
}
.category-item a:hover {
transform: scale(1.04);
}
.learning-methods__title {
margin-bottom: 2.4rem;
}
.learning-methods-list {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
gap: 1.6rem;
}
@media (max-width: 768px) {
.learning-methods-list {
flex-wrap: wrap;
}
}
.learning-method__item {
list-style-type: none;
width: max(160px, 12%);
}
@media (max-width: 768px) {
.learning-method__item {
width: max(120px, 12%);
}
}
.courses-overview__wrapper {
display: flex;
gap: 6rem;
align-items: flex-start;
}
@media (max-width: 992px) {
.courses-overview__wrapper {
gap: 4rem;
}
}
@media (max-width: 768px) {
.courses-overview__wrapper {
flex-wrap: wrap;
}
}
.courses-overview__filter {
flex: 0 0 460px;
background-color: var(--color-grey);
border-radius: 24px;
align-self: auto;
}
@media (max-width: 1200px) {
.courses-overview__filter {
flex: 0 0 300px;
}
}
@media (max-width: 768px) {
.courses-overview__filter {
flex: 0 0 100%;
}
}
.courses-overview__content {
flex-grow: 1;
}
.courses-overview__list {
margin: 0;
padding: 0;
}
.courses-overview__title {
text-transform: none;
font-size: 2.4rem;
margin-bottom: 2.4rem;
font-weight: 400;
color: var(--color-grey-l);
}
.course-item {
list-style-type: none;
}
.course-item:first-of-type {
border-top: 1px solid var(--color-beige-d);
}
.course-item__sessions {
display: none;
}
.course-item__link {
display: flex;
justify-content: space-between;
padding: 2.4rem 0;
border-bottom: 1px solid var(--color-beige-d);
position: relative;
align-items: center;
column-gap: 4rem;
row-gap: 0.8rem;
align-items: flex-start;
}
.course-item__link--accordion {
align-items: center;
}
.course-item__link--accordion.active .arrow-small--accordion {
transform: rotate(180deg);
}
.course-item__link .arrow-large {
width: 30px;
height: 30px;
flex: 0 0 30px;
}
@media (max-width: 768px) {
.course-item__link .arrow-large {
flex: 0 0 24px;
}
}
.course-item__link .arrow-small--accordion {
width: 24px;
height: 24px;
flex: 0 0 24px;
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/chevron.svg);
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
transition: 0.3s ease-in-out;
}
.course-item__link:hover .course-item__content {
transform: translateX(4px);
}
.course-item__link:hover .arrow-large:after {
transform: translate(100%, -100%);
}
.course-item__link:hover .arrow-large:before {
transform: translate(0, 0);
}
.course-item__content {
display: flex;
flex-direction: column;
gap: 0.8rem;
transition: 0.3s ease-in-out;
}
.course-item__title {
text-transform: initial;
font-weight: 400;
transition: 0.3s ease-in-out;
}
.course-item__details {
display: flex;
flex-wrap: wrap;
font-size: 1.6rem;
color: var(--color-grey-l);
line-height: 1;
row-gap: 0.8rem;
}
.course-item__detail:not(:last-of-type) {
padding-right: 1.2rem;
border-right: 1px solid var(--color-beige-d);
margin-right: 1.2rem;
}
.course-slider {
overflow: hidden;
}
.course-slider-wrapper {
display: flex;
}
@media (max-width: 992px) {
.course-slider-wrapper {
flex-wrap: wrap;
gap: 4.8rem;
}
.course-slider-wrapper > * {
flex: 0 0 100% !important;
}
}
.course-slider__content {
flex: 0 0 33%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 992px) {
.course-slider__content {
flex-direction: row;
}
}
.course-slider__nav {
display: flex;
gap: 1.6rem;
}
.course-slider__slider {
flex: 0 0 66.66%;
width: 66.66%;
margin: 0;
padding: 0;
}
.course-slider__title {
color: var(--color-white);
}
.course-slider .slick-list {
overflow: visible;
clip-path: inset(-100vw -100vw -100vw 0);
}
.course-slider .slick-track {
display: flex;
}
.course-slider .slick-slide {
height: inherit;
}
.course-card {
background-color: var(--color-beige);
border-radius: 12px;
margin-right: 1.6rem;
padding: 2.4rem;
transition: 0.3s ease-in-out;
}
.course-card:hover, .course-card:active, .course-card:focus {
background-color: var(--color-white);
transform: translateY(-4px);
}
.course-card__title {
text-transform: initial;
font-weight: 500;
transition: 0.3s ease-in-out;
}
.course-card__icon {
width: 12.8rem;
max-width: 50%;
height: auto;
position: relative;
top: -48px;
}
.course-detail__wrapper {
display: flex;
gap: 6rem;
}
@media (max-width: 992px) {
.course-detail__wrapper {
flex-direction: column;
gap: 4rem;
}
}
.course-detail__content {
flex: 1 1;
padding: 0 !important;
}
.course-detail__content ul {
background-color: transparent !important;
font-family: "Inter Tight", sans-serif !important;
font-size: 1.1rem !important;
padding-left: 3.2rem !important;
}
.course-detail__content__title {
font-size: 2.4rem;
font-weight: 600;
text-transform: initial;
margin-bottom: 1.2rem;
margin-top: 4rem;
}
.course-detail__content__title:not(:first-of-type) {
margin-top: 3.2rem;
}
.course-detail__content__title:first-of-type {
margin-top: 0;
}
.course-detail__sidebar {
background-color: var(--color-orange);
border-radius: 24px;
padding: 3.2rem;
color: var(--color-beige);
font-size: clamp(1.7rem, calc(1.7rem - 0.0024193548 * 36rem) + 100vw * 0.0024193548, 2rem);
flex: 0 1 460px;
align-self: flex-start;
}
@media (max-width: 992px) {
.course-detail__sidebar {
align-self: auto;
order: -1;
}
}
.course-detail__sidebar__description p, .course-detail__sidebar__description li, .course-detail__sidebar__description h1, .course-detail__sidebar__description h2, .course-detail__sidebar__description h3, .course-detail__sidebar__description h4, .course-detail__sidebar__description h5, .course-detail__sidebar__description h6 {
color: var(--color-beige);
}
.course-detail__sidebar__icon {
width: 160px;
height: auto;
max-width: 50%;
margin-top: -84px;
margin-left: auto;
margin-right: auto;
}
.course-detail__sidebar__title {
font-size: clamp(1.7rem, calc(1.7rem - 0.0024193548 * 36rem) + 100vw * 0.0024193548, 2rem);
margin-top: 1.6rem;
font-weight: 600;
display: block;
}
.course-detail__sidebar__info {
font-size: clamp(1.7rem, calc(1.7rem - 0.0024193548 * 36rem) + 100vw * 0.0024193548, 2rem);
color: var(--color-beige);
}
.course-detail__sidebar__info p, .course-detail__sidebar__info li, .course-detail__sidebar__info a {
color: var(--color-beige);
}
.course-detail__sidebar hr {
margin: 1.6rem 0;
border-top: 1px solid var(--color-orange-d);
border-bottom: 0;
}
.course-detail__sidebar__price {
font-size: 2.8rem;
}
.course-detail__sidebar__price span {
font-size: 1.6rem;
font-weight: 400;
margin-left: 0.8rem;
}
.course-detail__sidebar__link {
color: var(--color-beige);
display: inline-block;
text-decoration: underline;
line-height: 1.8;
}
.course-detail__sidebar__link:hover {
text-decoration: none;
}
.course-detail__sidebar .button {
display: block;
text-align: center;
margin: 1.6rem 0;
}
.course-calendar {
border-top: 1px solid var(--color-beige-d);
padding: 8rem 0;
background-color: var(--color-white);
}
.course-calendar__list {
margin: 0;
padding: 0;
margin-top: 4rem;
}
.course-calendar__list--calendar {
margin-top: 0rem;
}
.course-calendar__list--calendar .course-event {
background-color: var(--color-beige-d);
padding: 2.4rem;
border-bottom: 1px solid var(--color-beige);
}
@media (max-width: 768px) {
.course-calendar__list--calendar .course-event {
padding: 1.6rem;
}
}
.course-calendar__list--calendar .course-event:first-child {
border-top: none;
}
.course-event {
list-style-type: none;
display: flex;
border-bottom: 1px solid var(--color-beige-d);
padding: 2.4rem 0;
align-items: center;
gap: 2.4rem;
}
.course-event:first-child {
border-top: 1px solid var(--color-beige-d);
}
.course-event__data-info-wrapper {
display: flex;
}
@media (max-width: 992px) {
.course-event__data-info-wrapper {
flex-direction: column;
}
}
.course-event__date {
text-transform: uppercase;
font-weight: 700;
min-width: 290px;
}
@media (max-width: 992px) {
.course-event__date {
min-width: auto;
}
}
.course-event__extra-info {
color: var(--color-grey-l);
}
.course-event__extra-info span:not(:last-child) {
padding-right: 1.6rem;
margin-right: 1.6rem;
border-right: 1px solid var(--color-beige-d);
}
.course-event .button {
margin-left: auto;
}
.pdf-view .arrow-small--accordion {
display: none;
}
.pdf-view .course-calendar__list--calendar .course-event {
background-color: transparent;
padding: 0.8rem 0;
border-bottom: 1px solid var(--color-beige-d);
font-size: 1.4rem;
}
.pdf-view .course-calendar__list--calendar .course-event .button {
display: none;
}
.extra-services {
padding: 8rem 0;
background-color: var(--color-orange);
}
.extra-services__title {
color: var(--color-white);
}
.extra-services__text {
margin: 2.4rem 0;
color: var(--color-white);
}
.extra-services__text p, .extra-services__text ul, .extra-services__text li {
color: var(--color-white);
}
.extra-services__text li::marker {
color: var(--color-white);
}
.extra-services__content {
max-width: 600px;
}
.services-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
margin-top: 4.8rem;
gap: 1.6rem;
justify-content: center;
}
.services-list > * {
list-style-type: none;
flex: 0 0 150px;
}
.services-list__item {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
@media (max-width: 480px) {
.services-list__item {
flex-direction: row;
justify-content: flex-start;
flex: 1 1 100%;
align-items: center;
gap: 1.6rem;
}
.services-list__item img {
width: 80px;
}
}
.services-list__item__title {
color: var(--color-white);
font-weight: 600;
text-align: center;
line-height: 1.4;
}
@media (max-width: 768px) {
.services-list__item__title {
text-align: left;
}
}
.mission-vision-wrapper {
display: flex;
justify-content: space-between;
gap: 4rem;
flex-wrap: wrap;
background-color: var(--color-beige);
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/icon_kompas.svg);
background-repeat: no-repeat;
background-size: 200px;
background-position: center;
}
.mission-vision__left, .mission-vision__right {
max-width: 540px;
flex: 1 1 300px;
}
.quote {
background-color: var(--color-orange);
padding: 8rem 0;
position: relative;
overflow: hidden;
}
.quote__text {
color: white;
font-size: clamp(1.8rem, calc(1.8rem - 0.0112903226 * 36rem) + 100vw * 0.0112903226, 3.2rem);
position: relative;
z-index: 1;
padding-left: 160px;
}
@media (max-width: 768px) {
.quote__text {
padding-left: 90px;
}
}
.quote__text:after {
content: "";
width: 120px;
height: 110px;
position: absolute;
left: 0;
top: -20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 111' fill='none'%3E%3Cpath d='M48.0469 59.5844C48.0469 75.6017 45.1641 87.1342 39.3984 94.1818C32.3516 103.792 20.3398 109.398 3.36328 111L3.36328 82.1688C12.6523 82.1688 18.0977 77.3636 19.6992 67.7533C20.0195 66.1515 20.1797 63.7489 20.1797 60.5454V50.9351H0L0 0L48.0469 0V59.5844ZM123 59.5844C123 75.2814 119.797 87.2944 113.391 95.6234C106.344 104.273 94.6523 109.398 78.3164 111V82.1688C83.4414 82.1688 88.2461 79.7662 92.7305 74.961C94.6523 72.7186 95.6133 67.9134 95.6133 60.5454V50.9351H74.9531V0L123 0V59.5844Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
@media (max-width: 768px) {
.quote__text:after {
width: 60px;
height: 55px;
}
}
.quote:before {
content: "";
position: absolute;
background-color: var(--color-orange-d);
width: 100%;
min-width: 400px;
max-width: 1200px;
right: -20%;
top: 40%;
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
transform: rotate(24deg);
}
.values__list {
margin-top: 4rem;
display: grid;
grid-column-gap: 2.4rem;
grid-row-gap: 3.2rem;
grid-template-columns: repeat(5, 1fr);
align-items: stretch;
justify-content: stretch;
}
@media (max-width: 992px) {
.values__list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.values__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.values__list {
grid-template-columns: repeat(1, 1fr);
}
}
.value-item {
display: flex;
flex-direction: column;
justify-content: stretch;
}
.value-item__content {
background-color: var(--color-olive);
border-radius: 12px;
padding: 2.4rem;
flex-grow: 2;
}
.value-item__title {
color: var(--color-white);
font-weight: 600;
}
.value-item__text {
color: var(--color-white);
}
.value-item__image {
flex-grow: 0;
}
.value-item__image img {
aspect-ratio: 4/3;
max-height: 200px;
margin: 0 auto;
}
@media (max-width: 768px) {
.value-item__image img {
max-height: 150px;
}
}
.partners__list {
margin-top: 4rem;
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
justify-content: center;
}
.partners__list > * {
flex: 0 0 calc(25% - 1.6rem);
max-width: calc(25% - 1.6rem);
}
@media (max-width: 768px) {
.partners__list > * {
flex: 0 0 calc(33% - 1.6rem);
max-width: calc(33% - 1.6rem);
}
}
@media (max-width: 480px) {
.partners__list > * {
flex: 0 0 calc(50% - 1.6rem);
max-width: calc(50% - 1.6rem);
}
}
.partner__logo {
filter: grayscale(1);
mix-blend-mode: multiply;
transition: 0.3s ease-in-out;
}
.partner__logo:hover {
filter: none;
mix-blend-mode: normal;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
margin-top: 4rem;
font-size: 1.6rem;
flex-wrap: wrap;
gap: 0.8rem;
}
.pagination .page-numbers:not(.prev):not(.next) {
padding: 1.2rem;
color: var(--color-grey);
}
.pagination .page-numbers:not(.prev):not(.next):hover, .pagination .page-numbers:not(.prev):not(.next):active, .pagination .page-numbers:not(.prev):not(.next):focus {
color: var(--color-orange);
}
.pagination .page-numbers:not(.prev):not(.next).current {
color: var(--color-orange);
}
.pagination .page-numbers.prev {
margin-right: 1.6rem;
}
.pagination .page-numbers.next {
margin-left: 1.6rem;
}
@media (max-width: 768px) {
.pagination .dots {
display: none;
}
.pagination .page-numbers:not(.prev):not(.next):not(.current) {
display: none;
}
}
.search-block {
overflow: hidden;
}
.search-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.4rem;
}
@media (max-width: 992px) {
.search-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.search-wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
.search-wrapper .form__title {
grid-column: 1;
text-align: left;
}
.search-wrapper form {
grid-column: 2/4;
}
@media (max-width: 992px) {
.search-wrapper form {
grid-column: 2/-1;
}
}
@media (max-width: 768px) {
.search-wrapper form {
grid-column: 1/-1;
}
}
.search-wrapper form ul {
display: grid;
column-gap: 2.4rem;
grid-template-columns: repeat(2, 1fr);
padding: 0;
}
@media (max-width: 992px) {
.search-wrapper form ul {
grid-template-columns: 1fr;
}
}
.search-wrapper form ul h4 {
color: var(--color-white);
text-transform: none;
font-weight: 700;
border-bottom: 1px solid var(--color-grey-l);
margin-bottom: 0.8rem;
}
.search-wrapper form ul .sf-field-search {
grid-column: 1;
}
@media (max-width: 768px) {
.search-wrapper form ul .sf-field-search {
grid-column: 1/-1;
}
}
.search-wrapper form ul .sf-field-submit {
justify-self: end;
grid-column: 1/3;
}
@media (max-width: 768px) {
.search-wrapper form ul .sf-field-submit {
grid-column: 1/-1;
}
}
.courses-overview__filter {
padding: 2.4rem;
}
.courses-overview__filter ul {
margin: 0;
padding: 0;
}
.rounded-block-wrapper.-grey .form__title {
color: white;
}
.sf-field-submit input {
font-family: "Inter Tight", sans-serif !important;
font-size: 1.8rem !important;
text-transform: uppercase !important;
border-radius: 80px !important;
border: none;
border-color: transparent;
background-color: var(--color-blue) !important;
padding: 1.6rem 2.4rem !important;
}
.sf-field-submit input:hover, .sf-field-submit input:active, .sf-field-submit input:focus {
background-color: var(--color-blue-d) !important;
}
.sf-field-taxonomy-type_course label {
width: 100%;
}
.sf-field-search label {
width: 100%;
}
.sf-label-checkbox {
color: var(--color-white);
font-size: 1.8rem;
}
.sf-input-checkbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 14px;
height: 14px;
margin: 0;
border: 1px solid var(--color-beige);
border-radius: 4px;
background-color: transparent;
cursor: pointer;
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.sf-input-checkbox:focus {
box-shadow: 0 0 0 3px rgba(229, 88, 19, 0.3);
}
.sf-input-checkbox:checked {
position: relative;
background-color: var(--color-orange);
border-color: var(--color-orange);
}
.sf-input-checkbox:checked::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/checkbox-tick.svg);
background-position: center;
background-repeat: no-repeat;
}
.sf-input-checkbox:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.sf-input-text {
background-color: #ffffff;
border: none;
border-radius: 30px;
padding: 10px 40px 10px 15px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
font-size: 20px;
color: #333;
width: 100%;
}
.sf-input-select {
background-color: #ffffff;
border: none;
border-radius: 30px;
padding: 10px 40px 10px 15px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
font-size: 20px;
color: #333;
width: 100%;
background-image: url(//www.ahlex.eu/wp-content/themes/starter/img/chevron.svg);
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px 12px;
}
.sf-input-select:hover, .sf-input-select:focus {
background-color: var(--color-white);
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.sf-input-select:disabled {
background-color: #e9ecef;
cursor: not-allowed;
color: #6c757d;
}
.sf-field-post-meta-training_format h4, .sf-field-post-meta-web_lang_en h4 {
color: var(--color-white) !important;
text-transform: none;
font-weight: 700;
border-bottom: 1px solid var(--color-grey-l);
margin-bottom: 0.8rem;
}
.sf-field-post-meta-web_lang_en {
padding-bottom: 0 !important;
}
.sf-field-post-meta-web_lang_nl {
padding: 0 !important;
}
.sf-field-post-meta-web_lang_fr {
padding-top: 0 !important;
}
.faqs__list {
margin-top: 3.2rem;
}
.faq {
border-top: 1px solid var(--color-secondary-dd);
border-bottom: 1px solid var(--color-secondary-dd);
}
.faq summary {
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
color: var(--color-thirtiary);
font-weight: 700;
font-size: 2.1rem;
transition: all 0.3s ease-in-out;
position: relative;
padding: 2rem 0;
padding-right: 6rem;
border-top: 1px solid var(--color-beige-d);
}
.faq summary::marker {
content: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary:hover {
color: var(--color-primary);
}
.faq summary:hover .faq__chevron svg {
stroke: var(--color-orange-d);
}
.faq__chevron {
padding: 2.4rem;
transform: rotate(90deg);
transition: 0.3s ease-in-out;
flex-grow: 0;
flex-shrink: 0;
position: absolute;
right: 0;
top: 0;
}
.faq__chevron svg {
transition: 0.3s ease-in-out;
stroke: var(--color-orange);
}
.faq .content *:first-child {
margin-top: 0;
}
.faq + .faq {
border-top: none;
}
[open] summary {
color: var(--color-primary);
}
[open] summary .faq__chevron {
transform: rotate(-90deg);
}
[open] summary .faq__chevron svg {
stroke: var(--color-orange-d);
}
.split-text__wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 6rem;
row-gap: 3rem;
color: var(--color-grey);
min-height: fit-content;
}
@media (max-width: 768px) {
.split-text__wrapper {
grid-template-columns: 1fr;
}
}
.split-text__title {
grid-column: span 1;
}
.split-text__content {
grid-column: span 2;
}
@media (max-width: 768px) {
.split-text__content {
grid-column: span 1;
}
}
.notification-bar {
background-color: var(--color-grey);
}
.notification-bar a, .notification-bar div {
color: var(--color-beige);
text-align: center;
width: 100%;
display: block;
padding: 0.4rem 1.2rem;
font-size: 1.6rem;
background-color: var(--color-grey);
transition: 0.3s ease-in-out;
}
@media (max-width: 768px) {
.notification-bar a, .notification-bar div {
font-size: 1.4rem;
}
}
.notification-bar a:hover, .notification-bar a:focus, .notification-bar a:active {
background-color: var(--color-grey-l);
}
.fourohfour {
background-color: var(--color-orange);
text-align: center;
min-height: 70vh;
display: flex;
align-items: center;
padding: 6rem 0rem;
}
.fourohfour h1 {
color: white;
font-weight: 800;
}
.fourohfour p {
color: white;
margin: 2.4rem 0 3rem 0;
}
.text-banner {
background-color: var(--color-blue);
text-align: center;
padding: 1.6rem 0;
text-transform: uppercase;
}
.text-banner p {
font-size: clamp(2rem, calc(2rem - 0.0096774194 * 36rem) + 100vw * 0.0096774194, 3.2rem);
}
.workhub-item__grid {
display: flex;
gap: 1.6rem;
margin: 2.4rem 0 1.6rem 0;
align-items: stretch;
}
@media (max-width: 768px) {
.workhub-item__grid {
flex-direction: column;
}
.workhub-item__grid .course-detail__sidebar__icon {
display: none;
}
}
.workhub-item__grid .course-detail__sidebar {
flex: 0 0 400px;
align-self: stretch;
order: unset;
}
@media (max-width: 768px) {
.workhub-item__grid .course-detail__sidebar {
order: -1;
flex: 0 0 auto;
}
}
.workhub-item__grid .course-detail__sidebar__description p {
margin-bottom: 1.4rem;
}
.workhub-item__grid .course-detail__sidebar__icon {
background-color: #dfc5a5;
aspect-ratio: 1;
mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 1030' fill='none'%3E%3Cpath d='M0 514.533C0 91.944 92.1125 0 515 0C937.887 0 1030 91.944 1030 514.533V515.259C1030 937.849 937.784 1030 515 1030C92.2163 1030 0 937.849 0 515.259L0 514.533Z' fill='%238ED9D4'/%3E%3C/svg%3E"); -webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
margin-top: -60px;
margin-bottom: 2.4rem;
}
.workhub-item__gallery {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 1.6rem;
max-height: 750px;
}
@media (max-width: 768px) {
.workhub-item__gallery {
max-height: 300px;
}
}
.workhub-item__gallery__link {
position: relative;
border-radius: 1.6rem;
overflow: hidden;
}
.workhub-item__gallery__link:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--color-orange);
opacity: 0;
z-index: 9;
transition: opacity 0.3s ease-in-out;
}
.workhub-item__gallery__link:hover:after {
opacity: 0.5;
}
.workhub-item__gallery__link:hover img {
transform: scale(1.05);
}
.workhub-item__gallery__link--1 {
grid-row: span 2/span 2;
}
.workhub-item__gallery__image {
width: 100%;
height: 100%;
border-radius: 1.6rem;
object-fit: cover;
overflow: hidden;
}
.workhub-item__gallery__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1.6rem;
transition: transform 0.3s ease-in-out;
}
.image-with-text--workhub {
padding: 10rem 0;
height: auto;
}
.image-with-text--workhub p, .image-with-text--workhub a, .image-with-text--workhub h1, .image-with-text--workhub h2, .image-with-text--workhub h3, .image-with-text--workhub h4, .image-with-text--workhub h5, .image-with-text--workhub h6, .image-with-text--workhub li {
color: var(--color-white);
}
.image-with-text--workhub li::marker {
color: var(--color-white);
}
.extra-services--workhub {
margin-bottom: 0.8rem;
}
span.course-event__extra-info__language span:last-child {
margin-right: 1.6rem;
}
h2.course-detail__content__title.docenten_title {
margin-top: 20px;
}
.docenten-collapsible {
background-color: transparent;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
display: flex;
align-items: center;
gap: 20px;
border-top: 1px solid #DED8BE;
font-size: 20px;
color: #2d2d28;
position: relative;
transition: all 0.3s ease;
}
.docenten-holder .trainer:last-child .docenten-collapsible {
border-bottom: 1px solid #DED8BE;
}
.docenten-holder .trainer .docenten-active.docenten-collapsible, .docenten-holder .trainer .docenten-collapsible:hover {
background-color: #fff;
border-radius: 10px 10px 0 0;
border-bottom: none;
} .docenten-collapsible:after {
content: url(https://www.ahlex.eu/wp-content/themes/starter/img/chevron-docenten.svg);
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
transition: all 0.3s ease;
position: absolute;
right: 20px;
}
.docenten-content p {
font-size: 20px;
color: #2d2d28;
margin-top: 0;
}
.docenten-active:after {
content: url(https://www.ahlex.eu/wp-content/themes/starter/img/chevron-docenten.svg);
transform: rotate(180deg);
}
.docenten-content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #fff;
border-radius: 0 0 10px 10px;
}
.docenten-holder {
width: 95%;
max-width: 860px;
}
a.docenten-collapsible span img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 50%;
}