/*! ec-components.min.css — Event Core 1.112.0. Gegenereerd uit ec-components.css door tools/build-min.js. Nooit met de hand bewerken. */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.ec-button {
display: inline-block;
padding: 0.85em 2em;
background: var( --ec-cta-bg, var(--ec-color-accent) );
color: var( --ec-cta-text, var(--ec-color-surface) );
font-family: var(--ec-font-heading);
font-weight: 700;
text-decoration: none;
border-radius: var(--ec-radius);
transition: transform 0.15s ease, filter 0.15s ease;
}
.ec-button:hover {
filter: brightness(1.1);
transform: translateY(-2px);
color: var( --ec-cta-text, var(--ec-color-surface) );
}
.ec-countdown {
text-align: center;
font-family: var(--ec-font-heading);
color: var(--ec-color-text);
}
.ec-countdown__label {
margin: 0 0 0.75em;
}
.ec-countdown__units {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.ec-countdown__unit {
min-width: 4.5rem;
padding: 0.75rem 0.5rem;
background: var(--ec-color-primary);
color: var(--ec-color-surface);
border-radius: var(--ec-radius);
}
.ec-countdown__value {
display: block;
font-size: 2rem;
font-weight: 800;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.ec-countdown__unit-label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
}
.ec-lineup {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
color: var(--ec-color-text);
}
.ec-lineup__item {
text-align: center;
}
.ec-lineup__image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--ec-radius);
}
.ec-lineup__image--placeholder {
background: var(--ec-color-secondary);
}
.ec-lineup__name {
margin: 0.75em 0 0.15em;
font-family: var(--ec-font-heading);
font-size: 1.15rem;
}
.ec-lineup__genre {
margin: 0;
font-family: var(--ec-font-body);
font-size: 0.85rem;
color: var(--ec-color-accent);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ec-lineup__set {
margin: 0.25em 0 0;
font-family: var(--ec-font-body);
font-size: 0.85rem;
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
font-variant-numeric: tabular-nums;
}
.ec-lineup--lijst {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.ec-lineup__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.6em 0;
border-bottom: 1px solid var(--ec-color-secondary);
}
.ec-lineup__row:last-child {
border-bottom: none;
}
.ec-lineup__row .ec-lineup__name {
margin: 0;
font-size: 1rem;
}
.ec-lineup__row .ec-lineup__set {
margin: 0;
white-space: nowrap;
}
.ec-lineup__group + .ec-lineup__group {
margin-top: 2rem;
}
.ec-lineup__groupheading {
margin: 0 0 0.75em;
font-family: var(--ec-font-heading);
font-size: 1.1rem;
color: var(--ec-color-primary);
}
.ec-program {
list-style: none;
margin: 0;
padding: 0;
color: var(--ec-color-text);
}
.ec-program__item {
display: flex;
align-items: baseline;
gap: 1.25rem;
padding: 1rem 0;
border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.ec-program__meta {
flex: 0 0 9rem;
font-family: var(--ec-font-body);
font-size: 0.9rem;
color: var(--ec-color-accent);
font-variant-numeric: tabular-nums;
}
.ec-program__title {
font-family: var(--ec-font-heading);
font-size: 1.1rem;
color: var(--ec-color-text);
text-decoration: none;
}
a.ec-program__title:hover {
color: var(--ec-color-accent);
}
.ec-program__stage {
margin-left: auto;
padding: 0.2em 0.75em;
background: var(--ec-color-primary);
color: var(--ec-color-surface);
font-family: var(--ec-font-body);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: var(--ec-radius);
white-space: nowrap;
}
.ec-program__action {
margin-left: auto;
padding: 0.2em 0.9em;
background: var( --ec-cta-bg, var(--ec-color-accent) );
color: var( --ec-cta-text, var(--ec-color-surface) );
font-family: var(--ec-font-body);
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--ec-radius);
white-space: nowrap;
}
.ec-program__action:hover {
filter: brightness(1.1);
color: var( --ec-cta-text, var(--ec-color-surface) );
}
.ec-program__stage + .ec-program__action {
margin-left: 0.75em;
}
.ec-video {
border-radius: var(--ec-radius);
overflow: hidden;
}
.ec-video__frame {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}
.ec-tickets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
color: var(--ec-color-text);
}
.ec-tickets__item {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.75rem;
background: var( --ec-card-bg, var(--ec-color-surface) );
border: 2px solid var(--ec-color-primary);
border-radius: var(--ec-radius);
}
.ec-tickets__name {
margin: 0;
font-family: var(--ec-font-heading);
font-size: 1.25rem;
}
.ec-tickets__description {
margin: 0;
font-family: var(--ec-font-body);
font-size: 0.95rem;
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
}
.ec-tickets__price {
font-family: var(--ec-font-heading);
font-size: 1.75rem;
font-weight: 800;
color: var(--ec-color-primary);
}
.ec-tickets__regular {
margin-right: 0.35em;
font-size: 0.65em;
font-weight: 400;
color: var( --ec-muted-text-weak, color-mix( in srgb, currentColor 60%, transparent ) );
}
.ec-tickets__salestart {
margin-top: auto;
padding: 0.85em 2em;
text-align: center;
font-family: var(--ec-font-body);
font-size: 0.9rem;
color: var(--ec-color-accent);
border: 1px dashed var(--ec-color-accent);
border-radius: var(--ec-radius);
}
.ec-tickets__cta {
margin-top: auto;
text-align: center;
}
.ec-shop__frame {
width: 100%;
min-height: 600px;
border: 0;
border-radius: var(--ec-radius);
}
.ec-partners {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 2.5rem;
color: var(--ec-color-text);
}
.ec-partners__item {
display: block;
max-width: 160px;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.ec-partners__item:hover {
opacity: 1;
}
.ec-partners__logo {
width: 100%;
height: auto;
}
.ec-partners__name {
font-family: var(--ec-font-heading);
color: var(--ec-color-text);
}
.ec-marquee {
display: flex;
overflow: hidden;
flex-wrap: nowrap !important;
justify-content: flex-start;
}
.ec-marquee__track {
display: flex;
align-items: center;
gap: 2.5rem;
flex-shrink: 0;
padding-right: 2.5rem;
}
.ec-marquee .ec-marquee__track > * {
flex: 0 0 auto;
width: auto;
}
.ec-marquee .ec-marquee__track img,
.ec-marquee .ec-marquee__track svg,
.ec-marquee .ec-marquee__track video {
width: auto;
max-width: none;
height: var( --ec-mq-h, auto );
max-height: var( --ec-mq-h, 8rem );
}
body.ec-in-builder [data-ec-marquee],
body.et-fb [data-ec-marquee] {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
overflow: hidden;
column-gap: var( --horizontal-gap, 2.5rem );
}
:where( body.ec-in-builder, body.et-fb ) :where( [data-ec-marquee] ) {
align-items: center;
}
body.ec-in-builder [data-ec-marquee] > *,
body.et-fb [data-ec-marquee] > * {
flex: 0 0 auto;
width: auto;
}
body.ec-in-builder [data-ec-marquee] .et_pb_module img:not( .et-vb-ui * ),
body.ec-in-builder [data-ec-marquee] .et_pb_module svg:not( .et-vb-ui * ),
body.ec-in-builder [data-ec-marquee] .et_pb_module video:not( .et-vb-ui * ),
body.et-fb [data-ec-marquee] .et_pb_module img:not( .et-vb-ui * ),
body.et-fb [data-ec-marquee] .et_pb_module svg:not( .et-vb-ui * ),
body.et-fb [data-ec-marquee] .et_pb_module video:not( .et-vb-ui * ) {
width: auto;
max-width: none;
height: var( --ec-mq-h, 8rem );
max-height: var( --ec-mq-h, 8rem );
}
.ec-location {
color: var(--ec-color-text);
}
.ec-location__name {
margin: 0 0 0.5em;
font-family: var(--ec-font-heading);
}
.ec-location__address {
margin: 0 0 1.25em;
font-family: var(--ec-font-body);
font-style: normal;
line-height: 1.6;
}
.ec-location__map {
margin: 0 0 1em;
border-radius: var(--ec-radius);
overflow: hidden;
}
.ec-location__frame {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}
.ec-location__route {
margin-bottom: 1.5em;
}
.ec-location__contact {
display: flex;
flex-wrap: wrap;
gap: 0.5em 1.5em;
margin: 0 0 1.25em;
font-family: var(--ec-font-body);
}
.ec-location__contact-item {
color: var(--ec-color-accent);
text-decoration: none;
}
.ec-location__contact-item:hover {
text-decoration: underline;
}
.ec-location__info {
margin: 0 0 1em;
}
.ec-location__info-label {
margin: 0 0 0.25em;
font-family: var(--ec-font-heading);
font-size: 1rem;
}
.ec-location__info-text {
margin: 0;
font-family: var(--ec-font-body);
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
line-height: 1.6;
}
.ec-location__capacity {
margin: 0;
font-family: var(--ec-font-body);
font-size: 0.9rem;
color: var(--ec-color-accent);
}
.ec-network {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
color: var(--ec-color-text);
}
.ec-network__item {
display: block;
text-decoration: none;
border-radius: var(--ec-radius);
overflow: hidden;
background: var( --ec-card-bg, var(--ec-color-surface) );
color: var(--ec-color-text);
border: 1px solid color-mix( in srgb, var(--ec-card-border, currentColor) 15%, transparent );
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ec-network__item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px color-mix(in srgb, var(--ec-color-primary) 20%, transparent);
}
.ec-network__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.ec-network__title {
margin: 1rem 1.25rem 0.25rem;
font-family: var(--ec-font-heading);
font-size: 1.15rem;
}
.ec-network__date {
display: block;
margin: 0 1.25rem 1.25rem;
font-family: var(--ec-font-body);
font-size: 0.9rem;
color: var(--ec-color-accent);
}
.ec-events {
display: flex;
flex-direction: column;
gap: 4rem;
}
.ec-events__item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ec-events__item > a {
display: block;
}
.ec-events__image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: var(--ec-radius);
}
.ec-events__title {
margin: 0.5rem 0 0;
font-family: var(--ec-font-heading);
}
.ec-events__title a {
color: inherit;
text-decoration: none;
}
.ec-events__title a:hover {
color: var(--ec-color-accent);
}
.ec-events__meta {
margin: 0;
font-family: var(--ec-font-body);
color: var( --ec-muted-text, color-mix( in srgb, var(--ec-color-text) 75%, transparent ) );
}
.ec-events__button {
align-self: flex-start;
}
.ec-hours-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.ec-hours {
font-family: var(--ec-font-body);
color: var(--ec-color-text);
}
.ec-hours__title {
margin: 0 0 0.5rem;
font-family: var(--ec-font-heading);
}
.ec-hours__status {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin: 0 0 1rem;
padding: 0.35em 0.9em;
font-family: var(--ec-font-body);
font-size: 0.85rem;
font-weight: 700;
border-radius: 999px;
}
.ec-hours__status--open {
background: color-mix( in srgb, var(--ec-positive, #2e7d32) 15%, transparent );
color: var( --ec-positive, #2e7d32 );
}
.ec-hours__status--closed {
background: color-mix(in srgb, currentColor 10%, transparent);
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
}
.ec-hours__status[hidden] {
display: none;
}
.ec-hours__week {
width: 100%;
border-collapse: collapse;
}
.ec-hours__row {
border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.ec-hours__row:last-child {
border-bottom: 0;
}
.ec-hours__days,
.ec-hours__time {
padding: 0.5em 0;
font-family: var(--ec-font-body);
text-align: left;
}
.ec-hours__time {
text-align: right;
}
.ec-hours__row--closed .ec-hours__days,
.ec-hours__row--closed .ec-hours__time {
opacity: var( --ec-muted-dim, 0.55 );
}
.ec-hours__row--today .ec-hours__days,
.ec-hours__row--today .ec-hours__time {
color: var(--ec-color-accent);
font-weight: 700;
}
.ec-hours__row--afwijkend .ec-hours__time {
opacity: var( --ec-muted-dim, 0.55 );
}
.ec-hours__vandaag {
display: block;
margin-top: 0.25em;
font-size: 0.875em;
font-weight: 600;
color: var(--ec-color-accent);
}
.ec-hours--compact .ec-hours__week {
display: flex;
flex-direction: column;
}
.ec-hours--compact .ec-hours__row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.4em 0;
border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.ec-hours--compact .ec-hours__row:last-child {
border-bottom: 0;
}
.ec-hours--compact .ec-hours__days,
.ec-hours--compact .ec-hours__time {
padding: 0;
}
.ec-hours__exceptions-heading {
margin: 1.25rem 0 0.5rem;
font-family: var(--ec-font-heading);
font-size: 0.95rem;
}
.ec-hours__exceptions {
margin: 0;
padding: 0;
list-style: none;
}
.ec-hours__exception {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5em;
padding: 0.4em 0;
border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.ec-hours__exception:last-child {
border-bottom: 0;
}
.ec-hours__exception .ec-hours__time {
text-align: left;
}
.ec-hours__date {
font-weight: 700;
}
.ec-hours__description {
font-size: 0.9rem;
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
}
.ec-hours__exception--closed .ec-hours__time {
opacity: var( --ec-muted-dim, 0.55 );
}
.ec-hours__exception--today {
color: var(--ec-color-accent);
}
.ec-hours__exception--today .ec-hours__date {
color: var(--ec-color-accent);
font-weight: 800;
}
.ec-hours__note {
margin: 1rem 0 0;
font-size: 0.85rem;
font-style: italic;
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
}
@media (max-width: 480px) {
.ec-hours__row,
.ec-hours--compact .ec-hours__row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
.ec-hours__time {
text-align: left;
}
}
body:not( .ec-in-builder ):not( .et-fb ):not( .ec-status-aankondiging ) .ec-alleen-aankondiging,
body:not( .ec-in-builder ):not( .et-fb ):not( .ec-status-presale ) .ec-alleen-presale,
body:not( .ec-in-builder ):not( .et-fb ):not( .ec-status-aankondiging ):not( .ec-status-presale ) .ec-voor-opening,
body:not( .ec-in-builder ):not( .et-fb ):not( .ec-status-sale ):not( .ec-status-live ) .ec-alleen-seizoen,
body:not( .ec-in-builder ):not( .et-fb ):not( .ec-status-afgelopen ) .ec-alleen-afgelopen,
body:not( .ec-in-builder ):not( .et-fb ).ec-status-afgelopen .ec-niet-afgelopen {
display: none !important;
}
.ec-vacancies {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
color: var(--ec-color-text);
}
.ec-vacancies__item {
display: flex;
flex-direction: column;
overflow: hidden;
background: var( --ec-card-bg, var(--ec-color-surface) );
border: 1px solid color-mix( in srgb, var(--ec-card-border, currentColor) 15%, transparent );
border-radius: var(--ec-radius);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ec-vacancies__item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px color-mix(in srgb, currentColor 12%, transparent);
}
.ec-vacancies__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.ec-vacancies__title {
margin: 1rem 1.25rem 0.25rem;
font-family: var(--ec-font-heading);
}
.ec-vacancies__title a {
color: inherit;
text-decoration: none;
}
.ec-vacancies__title a:hover {
color: var(--ec-color-accent);
}
.ec-vacancies__meta {
margin: 0 1.25rem 0.5rem;
font-family: var(--ec-font-body);
font-size: 0.85rem;
color: var( --ec-muted-text, color-mix( in srgb, currentColor 75%, transparent ) );
}
.ec-vacancies__excerpt {
margin: 0 1.25rem 1rem;
font-family: var(--ec-font-body);
}
.ec-vacancies__cta {
align-self: flex-start;
margin-top: auto;
margin-inline: 1.25rem;
margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
.ec-program__item {
flex-direction: column;
gap: 0.25rem;
}
.ec-program__meta {
flex-basis: auto;
}
.ec-countdown__unit {
min-width: 3.5rem;
}
.ec-countdown__value {
font-size: 1.5rem;
}
}
.ec-button[data-ec-fill],
a[data-ec-fill] {
position: relative;
overflow: hidden;
z-index: 0;
}
.ec-button[data-ec-fill]::before,
a[data-ec-fill]::before {
content: "";
position: absolute;
inset: 0;
background: var(--ec-fill-bg, currentColor);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s ease;
z-index: -1;
}
.ec-button[data-ec-fill]:hover::before,
a[data-ec-fill]:hover::before {
transform: scaleX(1);
}
.ec-button[data-ec-fill]:hover,
a[data-ec-fill]:hover {
color: var(--ec-fill-text, inherit);
}
@media (prefers-reduced-motion: reduce) {
.ec-button[data-ec-fill]::before,
a[data-ec-fill]::before {
transition: none;
}
}
:is(#page-container, body) [data-ec-fill][data-ec-fill][data-ec-fill]::before {
display: block !important;
}
.ec-split__mask {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.ec-split__part {
display: inline-block;
}
.ec-split__word {
white-space: nowrap;
}
.ec-typewriter::after {
content: "|";
display: inline-block;
margin-left: 0.05em;
font-weight: 400;
animation: ec-typewriter-blink 1s steps(1) infinite;
}
@keyframes ec-typewriter-blink {
0%, 50% {
opacity: 1;
}
50.01%, 100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ec-typewriter::after {
animation: none;
}
}
.ec-imagereveal {
position: relative;
overflow: hidden;
}
.ec-parallax-frame {
position: relative;
overflow: hidden;
}
.ec-parallax-frame > * {
display: block;
width: 100%;
height: 100%;
}
.ec-parallax-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ec-pin {
position: relative;
}
.ec-pin--stacked .ec-pin-step {
position: absolute;
inset: 0;
}
.ec-hscroll {
position: relative;
overflow: hidden;
}
.ec-hscroll__track {
display: flex;
align-items: stretch;
}
.ec-hscroll--native {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ec-drag-grijp {
cursor: grab;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
.ec-drag-grijp--sleept {
cursor: grabbing;
}
.ec-drag-grijp img {
-webkit-user-drag: none;
}
.ec-drag {
position: relative;
overflow: hidden;
}
.ec-drag__track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
column-gap: 2.5rem;
}
.ec-drag .ec-drag__track > * {
flex: 0 0 auto;
width: var( --ec-drag-item-w, auto );
max-width: none;
}
body.ec-in-builder [data-ec-drag],
body.et-fb [data-ec-drag] {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
overflow-x: auto;
column-gap: var( --horizontal-gap, 2.5rem );
scrollbar-width: none;
-ms-overflow-style: none;
}
body.ec-in-builder [data-ec-drag]::-webkit-scrollbar,
body.et-fb [data-ec-drag]::-webkit-scrollbar {
display: none;
}
:where( body.ec-in-builder, body.et-fb ) :where( [data-ec-drag] ) {
align-items: center;
}
body.ec-in-builder [data-ec-drag] > *,
body.et-fb [data-ec-drag] > * {
flex: 0 0 auto;
width: auto;
max-width: none;
}
.ec-drag-nav--uit {
opacity: 0.35;
pointer-events: none;
}
.ec-drag--native {
display: flex;
flex-direction: row;
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ec-accordion__kop {
cursor: pointer;
}
.ec-accordion__kop:focus-visible {
outline: 2px solid var( --ec-color-primary );
outline-offset: 2px;
}
.ec-accordion__inhoud {
overflow: hidden;
}
.ec-accordion--pijl .ec-accordion__kop {
position: relative;
padding-right: 1.75em;
}
.ec-accordion--pijl.ec-accordion--pijl-links .ec-accordion__kop {
padding-right: 0;
padding-left: 1.75em;
}
.ec-accordion--pijl .ec-accordion__kop::after {
content: '';
position: absolute;
top: var( --ec-acc-pijl-y, 50% );
right: 0;
pointer-events: none;
transition: transform var( --ec-acc-duur, 0.4s ) ease;
}
.ec-accordion--pijl.ec-accordion--pijl-links .ec-accordion__kop::after {
right: auto;
left: 0;
}
.ec-accordion--chevron .ec-accordion__kop::after {
width: 0.5em;
height: 0.5em;
border-right: 0.15em solid var( --ec-acc-pijl-kleur, currentColor );
border-bottom: 0.15em solid var( --ec-acc-pijl-kleur, currentColor );
transform: translateY( -50% ) rotate( 45deg );
}
.ec-accordion--chevron .ec-accordion__kop[aria-expanded="true"]::after {
transform: translateY( -50% ) rotate( 225deg );
}
.ec-accordion--driehoek .ec-accordion__kop::after {
width: 0;
height: 0;
border-style: solid;
border-width: 0.4em 0.35em 0 0.35em;
border-color: var( --ec-acc-pijl-kleur, currentColor ) transparent transparent transparent;
transform: translateY( -50% ) rotate( 0deg );
}
.ec-accordion--driehoek .ec-accordion__kop[aria-expanded="true"]::after {
transform: translateY( -50% ) rotate( 180deg );
}
.ec-accordion--plus .ec-accordion__kop::after {
width: 0.7em;
height: 0.7em;
background-image:
linear-gradient( var( --ec-acc-pijl-kleur, currentColor ), var( --ec-acc-pijl-kleur, currentColor ) ),
linear-gradient( var( --ec-acc-pijl-kleur, currentColor ), var( --ec-acc-pijl-kleur, currentColor ) );
background-size: 100% 0.15em, 0.15em 100%;
background-repeat: no-repeat;
background-position: center;
transform: translateY( -50% ) rotate( 0deg );
}
.ec-accordion--plus .ec-accordion__kop[aria-expanded="true"]::after {
transform: translateY( -50% ) rotate( 45deg );
}
.ec-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--ec-progress-color, currentColor);
transform-origin: left center;
z-index: 9999;
}
.ec-timeline {
position: relative;
}
.ec-timeline__line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: var(--ec-color-accent, currentColor);
transform: scaleY(0);
transform-origin: top center;
}
.ec-timeline__item {
position: relative;
width: 45%;
margin-bottom: 2rem;
}
.ec-timeline__item--left {
margin-right: 55%;
text-align: right;
}
.ec-timeline__item--right {
margin-left: 55%;
}
@media (max-width: 767px) {
.ec-timeline__line {
left: 0;
}
.ec-timeline__item,
.ec-timeline__item--left,
.ec-timeline__item--right {
width: calc(100% - 2rem);
margin-left: 2rem;
margin-right: 0;
text-align: left;
}
}
html,
body {
overflow-x: clip;
}
[data-ec-underline] {
position: relative;
display: inline-block;
}
[data-ec-underline]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.08em;
background: currentColor;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-ec-underline]:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
@media (hover: none) {
[data-ec-underline]::after {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
[data-ec-underline]::after {
transition: none;
}
}
.ec-glow {
animation: ec-glow-pulse 2.6s ease-in-out infinite alternate;
}
.ec-glow--soft {
animation-name: ec-glow-pulse-soft;
}
.ec-glow--strong {
animation-name: ec-glow-pulse-strong;
}
@keyframes ec-glow-pulse {
from {
filter: drop-shadow(0 0 2px var(--ec-glow-color, currentColor));
}
to {
filter: drop-shadow(0 0 6px var(--ec-glow-color, currentColor))
drop-shadow(0 0 14px var(--ec-glow-color, currentColor));
}
}
@keyframes ec-glow-pulse-soft {
from {
filter: drop-shadow(0 0 1px var(--ec-glow-color, currentColor));
}
to {
filter: drop-shadow(0 0 4px var(--ec-glow-color, currentColor))
drop-shadow(0 0 8px var(--ec-glow-color, currentColor));
}
}
@keyframes ec-glow-pulse-strong {
from {
filter: drop-shadow(0 0 3px var(--ec-glow-color, currentColor));
}
to {
filter: drop-shadow(0 0 9px var(--ec-glow-color, currentColor))
drop-shadow(0 0 22px var(--ec-glow-color, currentColor));
}
}
@media (prefers-reduced-motion: reduce) {
.ec-glow,
.ec-glow--soft,
.ec-glow--strong {
animation: none;
filter: drop-shadow(0 0 3px var(--ec-glow-color, currentColor));
}
}
body:not( .et-fb ):not( .et-vb ):not( .ec-in-builder ) [data-ec-highlight] mark,
body:not( .et-fb ):not( .et-vb ):not( .ec-in-builder ) mark[data-ec-highlight],
.ec-hx {
background: none;
color: inherit;
}
body.et-fb :is( span, a, strong, em, b, i )[data-ec-highlight],
body.et-vb :is( span, a, strong, em, b, i )[data-ec-highlight],
body.ec-in-builder :is( span, a, strong, em, b, i )[data-ec-highlight] {
background: Mark;
color: MarkText;
}
.ec-hx {
display: inline;
position: relative;
}
.ec-hx .ec-split__mask {
overflow: visible;
}
.ec-hx .ec-split__part {
position: relative;
z-index: 1;
}
.ec-hx--kloon .ec-split__mask {
position: relative;
}
.ec-hx--heel {
display: inline-block;
}
.ec-hx__kloon {
position: absolute;
inset: 0;
pointer-events: none;
white-space: pre;
}
.ec-hx__rol {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: bottom;
}
.ec-hx__rol-vlak {
display: block;
white-space: pre;
}
.ec-hx__rol-vlak--na {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.ec-hx--glans {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
.ec-hx__laag {
position: absolute;
inset: 0;
pointer-events: none;
}
.ec-hx__pil {
position: absolute;
border-radius: 0.12em;
background: var( --ec-hx-marker, currentColor );
opacity: var( --ec-hx-marker-dekking, 0.25 );
}
.ec-hx__veeg {
position: absolute;
overflow: visible;
pointer-events: none;
mix-blend-mode: var( --ec-hx-meng, multiply );
opacity: var( --ec-hx-marker-dekking, 0.45 );
}
.ec-hx__veeg path {
fill: var( --ec-hx-marker, currentColor );
}
.ec-hx__streep {
position: absolute;
overflow: visible;
pointer-events: none;
opacity: var( --ec-hx-marker-dekking, 1 );
}
.ec-hx__streep path {
fill: none;
stroke: var( --ec-hx-marker, currentColor );
stroke-linecap: round;
stroke-linejoin: round;
}
.ec-hx__lus {
position: absolute;
overflow: visible;
pointer-events: none;
opacity: var( --ec-hx-marker-dekking, 1 );
}
.ec-hx__lus path {
fill: none;
stroke: var( --ec-hx-marker, currentColor );
stroke-linecap: round;
stroke-linejoin: round;
}
.ec-hx__sel {
position: absolute;
border-radius: 0.06em;
background: var( --ec-hx-marker, currentColor );
opacity: var( --ec-hx-marker-dekking, 0.3 );
}
.ec-hx__greep {
position: absolute;
overflow: visible;
pointer-events: none;
}
.ec-hx__greep rect,
.ec-hx__greep circle {
fill: var( --ec-hx-marker, currentColor );
}
.ec-eq {
display: inline-flex;
align-items: flex-end;
gap: 0.12em;
height: var(--ec-eq-height, 1em);
vertical-align: middle;
}
.ec-eq--vol {
display: flex;
width: 100%;
}
.ec-eq-bar {
display: block;
width: var(--ec-eq-bar-width, 0.18em);
height: 100%;
background: var(--ec-eq-color, currentColor);
border-radius: 0.09em;
transform-origin: bottom center;
animation: ec-eq-pump 1s ease-in-out infinite alternate;
}
.ec-eq--vol .ec-eq-bar {
flex: 1 1 0;
width: auto;
}
@keyframes ec-eq-pump {
from {
transform: scaleY(0.3);
}
to {
transform: scaleY(1);
}
}
.ec-eq-bar:nth-child(6n + 1) {
animation-duration: calc(1.05s * var(--ec-eq-speed, 1));
animation-delay: calc(-0.9s * var(--ec-eq-speed, 1));
}
.ec-eq-bar:nth-child(6n + 2) {
animation-duration: calc(0.85s * var(--ec-eq-speed, 1));
animation-delay: calc(-0.3s * var(--ec-eq-speed, 1));
}
.ec-eq-bar:nth-child(6n + 3) {
animation-duration: calc(1.35s * var(--ec-eq-speed, 1));
animation-delay: calc(-1.2s * var(--ec-eq-speed, 1));
}
.ec-eq-bar:nth-child(6n + 4) {
animation-duration: calc(0.95s * var(--ec-eq-speed, 1));
animation-delay: calc(-0.5s * var(--ec-eq-speed, 1));
}
.ec-eq-bar:nth-child(6n + 5) {
animation-duration: calc(1.2s * var(--ec-eq-speed, 1));
animation-delay: calc(-0.15s * var(--ec-eq-speed, 1));
}
.ec-eq-bar:nth-child(6n + 6) {
animation-duration: calc(0.8s * var(--ec-eq-speed, 1));
animation-delay: calc(-0.75s * var(--ec-eq-speed, 1));
}
@media (prefers-reduced-motion: reduce) {
.ec-eq-bar {
animation: none;
}
.ec-eq-bar:nth-child(6n + 1) {
transform: scaleY(0.5);
}
.ec-eq-bar:nth-child(6n + 2) {
transform: scaleY(0.9);
}
.ec-eq-bar:nth-child(6n + 3) {
transform: scaleY(0.65);
}
.ec-eq-bar:nth-child(6n + 4) {
transform: scaleY(1);
}
.ec-eq-bar:nth-child(6n + 5) {
transform: scaleY(0.45);
}
.ec-eq-bar:nth-child(6n + 6) {
transform: scaleY(0.75);
}
}
.ec-gradientmove {
background-image: linear-gradient(
var(--ec-grad-hoek, 120deg),
var(--ec-grad-1, #5b2be0),
var(--ec-grad-2, #1e90ff),
var(--ec-grad-3, #5b2be0),
var(--ec-grad-4, #1e90ff)
) !important;
background-size: 300% 300% !important;
animation: ec-gradientmove-x 16s ease-in-out infinite !important;
}
@keyframes ec-gradientmove-x {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes ec-gradientmove-y {
0% {
background-position: 50% 0%;
}
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
@keyframes ec-gradientmove-xy {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
@keyframes ec-gradientmove-loop {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.ec-gradientmove {
animation: none !important;
background-position: 0% 50% !important;
}
}
[data-ec-zoomscroll] {
overflow: clip;
overflow-x: clip;
contain: paint;
}
[data-ec-stack] {
position: relative;
}
[data-ec-videoscrub] {
position: relative;
overflow: hidden;
background-color: #000;
}
[data-ec-videoscrub] video::-webkit-media-controls {
display: none !important;
}
[data-ec-videoscrub] video {
opacity: 1;
transition: opacity 200ms ease-out;
}
[data-ec-videoscrub].ec-videoscrub--laden video {
opacity: 0;
}
.ec-videoautoplay {
position: relative;
}
.ec-videoautoplay .et_pb_video_overlay {
display: none !important;
}
.ec-videoautoplay-heeftposter .et_pb_video_overlay {
display: block !important;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.ec-videoautoplay-heeftposter .et_pb_video_overlay_hover,
.ec-videoautoplay-heeftposter .et_pb_video_play {
display: none !important;
}
.ec-videoautoplay-gestart .et_pb_video_overlay {
opacity: 0;
visibility: hidden;
}
.ec-videoautoplay video::-webkit-media-controls {
display: none !important;
}
.ec-videoautoplay-playbtn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba( 0, 0, 0, 0.35 );
color: #fff;
font-size: 3rem;
cursor: pointer;
z-index: 12; /* boven de posterlaag (Divi-overlay staat op z-index 10) */
}
.ec-videoautoplay-playbtn:hover {
background: rgba( 0, 0, 0, 0.5 );
}
.ec-videoautoplay-audiobtn {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: rgba( 0, 0, 0, 0.55 );
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
line-height: 1;
transition: background 0.15s ease, opacity 0.15s ease;
}
.ec-videoautoplay-audiobtn:hover,
.ec-videoautoplay-audiobtn:focus-visible {
background: rgba( 0, 0, 0, 0.75 );
outline: none;
}
.ec-videoautoplay-audiobtn.pos-rechtsboven { top: 12px; right: 12px; }
.ec-videoautoplay-audiobtn.pos-linksboven  { top: 12px; left: 12px; }
.ec-videoautoplay-audiobtn.pos-rechtsonder { bottom: 12px; right: 12px; }
.ec-videoautoplay-audiobtn.pos-linksonder  { bottom: 12px; left: 12px; }
@media ( hover: hover ) and ( pointer: fine ) {
.ec-videoautoplay-audiobtn.vis-hover { opacity: 0; }
.ec-videoautoplay:hover .ec-videoautoplay-audiobtn.vis-hover,
.ec-videoautoplay-audiobtn.vis-hover:focus-visible { opacity: 1; }
}
.ec-videoautoplay-audiotip {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
z-index: 6;
padding: 8px 14px;
background: rgba( 0, 0, 0, 0.85 );
color: #fff;
border-radius: 4px;
font-size: 13px;
pointer-events: none;
}
.ec-tilt--glans.ec-tilt--glans {
position: relative;
overflow: hidden;
}
.ec-tilt-glans {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0;
background: radial-gradient( circle var(--ec-tilt-gr, 150px) at var(--ec-tilt-gx, 50%) var(--ec-tilt-gy, 50%), color-mix( in srgb, var(--ec-tilt-gc, #fff) calc( var(--ec-tilt-gs, 0.25) * 100% ), transparent ) 0%, transparent 100% );
}
.ec-cursor-dot,
.ec-cursor-ring {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
.ec-cursor-dot {
z-index: 999999;
}
.ec-cursor-ring {
z-index: 999998;
box-sizing: border-box;
border-radius: 50%;
border-style: solid;
border-color: var(--ec-cursor-color, var(--ec-color-accent));
transition: border-color 0.2s ease;
}
.ec-cursor-dot__shape {
display: block;
border-radius: 50%;
background: var(--ec-cursor-color, var(--ec-color-accent));
transition: background-color 0.2s ease;
}
.ec-cursor-dot__shape--svg,
.ec-cursor-dot__shape--img {
background: none;
color: var(--ec-cursor-color, var(--ec-color-accent));
}
.ec-cursor-dot__shape--svg svg,
.ec-cursor-dot__shape--svg svg * {
fill: currentColor;
}
.ec-cursor-dot__shape--svg svg,
.ec-cursor-dot__shape--img img {
display: block;
width: 100%;
height: 100%;
}
.ec-cursor-label {
position: absolute;
left: 100%;
top: 50%;
transform: translate( 14px, -50% );
padding: 0.3em 0.75em;
background: var(--ec-color-primary);
color: var(--ec-color-surface);
font-family: var(--ec-font-body);
font-size: 0.8rem;
white-space: nowrap;
border-radius: 999px;
opacity: 0;
transition: opacity 0.15s ease;
}
.ec-cursor-label.is-zichtbaar {
opacity: 1;
}
.ec-spotlight-mask {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
background: color-mix( in srgb, var(--ec-sl-dim-color, #000) calc( var(--ec-sl-dim, 0) * 100% ), transparent );
backdrop-filter: var(--ec-sl-filter, none);
-webkit-backdrop-filter: var(--ec-sl-filter, none);
mask-image: radial-gradient( circle var(--ec-sl-r, 160px) at var(--ec-sl-x, 50%) var(--ec-sl-y, 50%), transparent 0, transparent calc( 100% - var(--ec-sl-soft, 60px) ), #000 100% );
-webkit-mask-image: radial-gradient( circle var(--ec-sl-r, 160px) at var(--ec-sl-x, 50%) var(--ec-sl-y, 50%), transparent 0, transparent calc( 100% - var(--ec-sl-soft, 60px) ), #000 100% );
}
.ec-hoverreveal-box {
position: fixed;
top: 0;
left: 0;
width: 220px;
aspect-ratio: 4 / 5;
overflow: hidden;
pointer-events: none;
z-index: 999997;
border-radius: var(--ec-radius);
box-shadow: 0 12px 30px color-mix(in srgb, var(--ec-color-primary) 25%, transparent);
}
.ec-hoverreveal-box--vast {
position: absolute;
inset: 0;
top: auto;
left: auto;
width: 100%;
aspect-ratio: auto;
}
.ec-hoverreveal-box img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ec-hoverreveal-curtain {
position: absolute;
inset: 0;
background: var(--ec-color-primary);
}
.ec-hoverreveal-static {
margin: 0.5rem 0;
}
.ec-hoverreveal-static img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--ec-radius);
}
.ec-imagetrail-item {
position: absolute;
top: 0;
left: 0;
width: 130px;
aspect-ratio: 4 / 5;
overflow: hidden;
pointer-events: none;
z-index: 3;
border-radius: var(--ec-radius);
box-shadow: 0 8px 20px color-mix(in srgb, var(--ec-color-primary) 20%, transparent);
will-change: transform, opacity;
}
.ec-imagetrail-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ec-particles-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.ec-particles-canvas--voor {
z-index: 20;
}
body:not(.et-fb):not(.ec-in-builder) [data-ec-particles-image]:not([data-ec-particles]) {
display: none;
}
body.ec-in-builder .ec-gradientmove {
animation: none !important;
background-position: 0% 50% !important;
}
body.ec-in-builder .ec-glow,
body.ec-in-builder .ec-glow--soft,
body.ec-in-builder .ec-glow--strong {
animation: none !important;
filter: drop-shadow(0 0 3px var(--ec-glow-color, currentColor));
}
body:not( .et-fb ):not( .ec-in-builder ):has( [data-ec-maskintro] )::before {
content: '';
position: fixed;
inset: 0;
z-index: 999999;
background: var( --ec-mi-kleur, #000 );
animation: ec-mi-noodrem 0.4s linear 3s forwards;
}
body.ec-mi-js:has( [data-ec-maskintro] )::before {
animation: none;
}
body.ec-mi-actief:has( [data-ec-maskintro] )::before {
-webkit-mask-image: radial-gradient( circle var( --ec-mi-r, 0px ) at var( --ec-mi-x, 50% ) var( --ec-mi-y, 50% ), transparent 0 99%, #000 100% );
mask-image: radial-gradient( circle var( --ec-mi-r, 0px ) at var( --ec-mi-x, 50% ) var( --ec-mi-y, 50% ), transparent 0 99%, #000 100% );
}
body.ec-mi-fade:has( [data-ec-maskintro] )::before {
opacity: var( --ec-mi-o, 1 );
}
.ec-mi-gordijn {
position: fixed;
top: 50%;
left: 50%;
z-index: 999999;
overflow: hidden;
}
.ec-mi-baan {
position: absolute;
background: var( --ec-mi-kleur, #000 );
will-change: transform;
}
body.ec-mi-gordijn-aan:has( [data-ec-maskintro] )::before {
display: none;
}
.ec-mi-diafragma {
position: fixed;
z-index: 999999;
overflow: hidden;
}
.ec-mi-lamelhouder {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
transform-origin: 0 0;
will-change: transform;
}
.ec-mi-lamel {
position: absolute;
background: var( --ec-mi-kleur, #000 );
will-change: transform;
}
body.ec-mi-diafragma-aan:has( [data-ec-maskintro] )::before {
display: none;
}
.ec-mi-logo {
position: fixed;
z-index: 999999;
background: var( --ec-mi-kleur, #000 );
-webkit-mask-image: linear-gradient( #000, #000 ), var( --ec-mi-logo-src );
mask-image: linear-gradient( #000, #000 ), var( --ec-mi-logo-src );
-webkit-mask-size: 100% 100%, var( --ec-mi-logo-b, 0px ) auto;
mask-size: 100% 100%, var( --ec-mi-logo-b, 0px ) auto;
-webkit-mask-position: center, center;
mask-position: center, center;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
will-change: mask-size;
}
body.ec-mi-logo-aan:has( [data-ec-maskintro] )::before {
display: none;
}
.ec-mi-logo-kleur {
position: fixed;
z-index: 1000000;
background-image: var( --ec-mi-logo-src );
background-size: var( --ec-mi-logo-b, 0px ) auto;
background-position: center;
background-repeat: no-repeat;
will-change: background-size, opacity;
}
.ec-mi-tekst {
position: fixed;
inset: 0;
z-index: 999999;
background: var( --ec-mi-kleur, #000 );
overflow: hidden;
}
.ec-mi-tekst__inner {
position: absolute;
transform: translate( -50%, -50% );
max-width: 90vw;
text-align: center;
white-space: pre-line;
will-change: transform, opacity;
}
.ec-mi-tekst .ec-split__mask {
overflow: visible;
}
.ec-mi-tekst--gat {
-webkit-mask-image: linear-gradient( #000, #000 ), var( --ec-mi-tk-src );
mask-image: linear-gradient( #000, #000 ), var( --ec-mi-tk-src );
-webkit-mask-size: 100% 100%, var( --ec-mi-tk-b, 0px ) auto;
mask-size: 100% 100%, var( --ec-mi-tk-b, 0px ) auto;
-webkit-mask-position: center, var( --ec-mi-tk-x, 50% ) calc( var( --ec-mi-tk-y0, 50% ) + var( --ec-mi-tk-y, 0px ) );
mask-position: center, var( --ec-mi-tk-x, 50% ) calc( var( --ec-mi-tk-y0, 50% ) + var( --ec-mi-tk-y, 0px ) );
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
}
body.ec-mi-tekst-aan:has( [data-ec-maskintro] )::before {
display: none;
}
body.ec-mi-vast:has( [data-ec-maskintro] )::before {
touch-action: none;
overscroll-behavior: contain;
}
body.ec-mi-vast .ec-mi-gordijn {
touch-action: none;
overscroll-behavior: contain;
}
body.ec-mi-vast .ec-mi-diafragma {
touch-action: none;
overscroll-behavior: contain;
}
body.ec-mi-vast .ec-mi-logo {
touch-action: none;
overscroll-behavior: contain;
}
body.ec-mi-vast .ec-mi-logo-kleur {
touch-action: none;
overscroll-behavior: contain;
}
body.ec-mi-vast .ec-mi-tekst {
touch-action: none;
overscroll-behavior: contain;
}
body:not( .et-fb ):not( .ec-in-builder ) [data-ec-maskintro-image]:not( [data-ec-maskintro] ) {
display: none;
}
body:not( .et-fb ):not( .ec-in-builder ) [data-ec-maskintro-tekst]:not( [data-ec-maskintro] ) {
display: none;
}
body.ec-mi-klaar:has( [data-ec-maskintro] )::before {
display: none;
}
@keyframes ec-mi-noodrem {
to {
opacity: 0;
visibility: hidden;
}
}
body:has( [data-ec-maskintro*="richting=dicht" i] )::before,
body:has( [data-ec-maskintro*="richting=close" i] )::before,
body:has( [data-ec-maskintro*="direction=dicht" i] )::before,
body:has( [data-ec-maskintro*="direction=close" i] )::before {
display: none;
}
@media ( max-width: 767px ) {
body:has( [data-ec-maskintro][data-ec-maskintro-mobile="off"] )::before,
body:has( [data-ec-maskintro][data-ec-mobile="off"] )::before {
display: none;
}
}
@media ( min-width: 768px ) and ( max-width: 1023px ) {
body:has( [data-ec-maskintro][data-ec-maskintro-tablet="off"] )::before,
body:has( [data-ec-maskintro][data-ec-tablet="off"] )::before {
display: none;
}
}
@media ( prefers-reduced-motion: reduce ) {
body:has( [data-ec-maskintro] )::before {
display: none;
}
}
html.ec-pt-laag::before {
content: '';
position: fixed;
inset: 0;
z-index: 999999;
background: var( --ec-pt-kleur, #000 );
animation: ec-pt-noodrem 0.4s linear 3s forwards;
}
html.ec-pt-js::before {
animation: none;
}
html.ec-pt-actief::before {
-webkit-mask-image: radial-gradient( circle var( --ec-pt-r, 0px ) at var( --ec-pt-x, 50% ) var( --ec-pt-y, 50% ), transparent 0 99%, #000 100% );
mask-image: radial-gradient( circle var( --ec-pt-r, 0px ) at var( --ec-pt-x, 50% ) var( --ec-pt-y, 50% ), transparent 0 99%, #000 100% );
}
html.ec-pt-fade::before {
opacity: var( --ec-pt-o, 1 );
}
html.ec-pt-vast::before {
touch-action: none;
overscroll-behavior: contain;
}
html.ec-pt-klaar::before {
display: none;
}
.ec-pt-gordijn {
position: fixed;
top: 50%;
left: 50%;
z-index: 999999;
overflow: hidden;
}
.ec-pt-baan {
position: absolute;
background: var( --ec-pt-kleur, #000 );
will-change: transform;
}
html.ec-pt-gordijn-aan::before {
display: none;
}
.ec-pt-diafragma {
position: fixed;
z-index: 999999;
overflow: hidden;
}
.ec-pt-lamelhouder {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
transform-origin: 0 0;
will-change: transform;
}
.ec-pt-lamel {
position: absolute;
background: var( --ec-pt-kleur, #000 );
will-change: transform;
}
html.ec-pt-diafragma-aan::before {
display: none;
}
.ec-pt-logo {
position: fixed;
z-index: 999999;
background: var( --ec-pt-kleur, #000 );
-webkit-mask-image: linear-gradient( #000, #000 ), var( --ec-pt-logo-src );
mask-image: linear-gradient( #000, #000 ), var( --ec-pt-logo-src );
-webkit-mask-size: 100% 100%, var( --ec-pt-logo-b, 0px ) auto;
mask-size: 100% 100%, var( --ec-pt-logo-b, 0px ) auto;
-webkit-mask-position: center, center;
mask-position: center, center;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
will-change: mask-size;
}
html.ec-pt-logo-aan::before {
display: none;
}
.ec-pt-logo-kleur {
position: fixed;
z-index: 1000000;
background-image: var( --ec-pt-logo-src );
background-size: var( --ec-pt-logo-b, 0px ) auto;
background-position: center;
background-repeat: no-repeat;
will-change: background-size, opacity;
}
.ec-pt-tekst {
position: fixed;
inset: 0;
z-index: 999999;
background: var( --ec-pt-kleur, #000 );
overflow: hidden;
}
.ec-pt-tekst__inner {
position: absolute;
transform: translate( -50%, -50% );
max-width: 90vw;
text-align: center;
white-space: pre-line;
will-change: transform, opacity;
}
.ec-pt-tekst .ec-split__mask {
overflow: visible;
}
.ec-pt-tekst--gat {
-webkit-mask-image: linear-gradient( #000, #000 ), var( --ec-pt-tk-src );
mask-image: linear-gradient( #000, #000 ), var( --ec-pt-tk-src );
-webkit-mask-size: 100% 100%, var( --ec-pt-tk-b, 0px ) auto;
mask-size: 100% 100%, var( --ec-pt-tk-b, 0px ) auto;
-webkit-mask-position: center, var( --ec-pt-tk-x, 50% ) calc( var( --ec-pt-tk-y0, 50% ) + var( --ec-pt-tk-y, 0px ) );
mask-position: center, var( --ec-pt-tk-x, 50% ) calc( var( --ec-pt-tk-y0, 50% ) + var( --ec-pt-tk-y, 0px ) );
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
}
html.ec-pt-tekst-aan::before {
display: none;
}
html.ec-pt-vast .ec-pt-gordijn,
html.ec-pt-vast .ec-pt-diafragma,
html.ec-pt-vast .ec-pt-logo,
html.ec-pt-vast .ec-pt-logo-kleur,
html.ec-pt-vast .ec-pt-tekst {
touch-action: none;
overscroll-behavior: contain;
}
@keyframes ec-pt-noodrem {
to {
opacity: 0;
visibility: hidden;
}
}
html.ec-pt-in body:has( [data-ec-maskintro]:not( [data-ec-maskintro*="overgang=voorrang" i] ):not( [data-ec-maskintro*="overgang=priority" i] ):not( [data-ec-maskintro*="transition=voorrang" i] ):not( [data-ec-maskintro*="transition=priority" i] ) )::before {
display: none;
}
@media ( prefers-reduced-motion: reduce ) {
html.ec-pt-laag::before {
display: none;
}
}
.ec-mr-laag {
position: absolute;
inset: 0;
background: var( --ec-mr-kleur, var( --ec-shutter-color, #0b0b0f ) );
pointer-events: none;
}
.ec-mr-laag.ec-mr-actief {
-webkit-mask-image: radial-gradient( circle var( --ec-mr-r, 0px ) at var( --ec-mr-x, 50% ) var( --ec-mr-y, 50% ), transparent 0 99%, #000 100% );
mask-image: radial-gradient( circle var( --ec-mr-r, 0px ) at var( --ec-mr-x, 50% ) var( --ec-mr-y, 50% ), transparent 0 99%, #000 100% );
}
.ec-mr-laag.ec-mr-gordijn-aan {
display: none;
}
.ec-mr-gordijn {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
pointer-events: none;
}
.ec-mr-gordijn--vol {
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
.ec-mr-baan {
position: absolute;
background: var( --ec-mr-kleur, var( --ec-shutter-color, #0b0b0f ) );
will-change: transform;
}
.ec-mr-diafragma {
position: absolute;
overflow: hidden;
pointer-events: none;
}
.ec-mr-lamelhouder {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
transform-origin: 0 0;
}
.ec-mr-lamel {
position: absolute;
background: var( --ec-mr-kleur, var( --ec-shutter-color, #0b0b0f ) );
}
.ec-mr-laag.ec-mr-diafragma-aan {
display: none;
}
.ec-mr-logo {
position: absolute;
background: var( --ec-mr-kleur, var( --ec-shutter-color, #0b0b0f ) );
-webkit-mask-image: linear-gradient( #000, #000 ), var( --ec-mr-logo-src );
mask-image: linear-gradient( #000, #000 ), var( --ec-mr-logo-src );
-webkit-mask-size: 100% 100%, var( --ec-mr-logo-b, 0px ) auto;
mask-size: 100% 100%, var( --ec-mr-logo-b, 0px ) auto;
-webkit-mask-position: center, center;
mask-position: center, center;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.ec-mr-logo-kleur {
position: absolute;
background-image: var( --ec-mr-logo-src );
background-size: var( --ec-mr-logo-b, 0px ) auto;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
.ec-mr-laag.ec-mr-logo-aan {
display: none;
}
.ec-mr-tekst {
position: absolute;
inset: 0;
background: var( --ec-mr-kleur, var( --ec-shutter-color, #0b0b0f ) );
overflow: hidden;
pointer-events: none;
}
.ec-mr-tekst__inner {
position: absolute;
transform: translate( -50%, -50% );
max-width: 90%;
text-align: center;
white-space: pre-line;
}
.ec-mr-tekst .ec-split__mask {
overflow: visible;
}
.ec-mr-tekst--gat {
-webkit-mask-image: linear-gradient( #000, #000 ), var( --ec-mr-tk-src );
mask-image: linear-gradient( #000, #000 ), var( --ec-mr-tk-src );
-webkit-mask-size: 100% 100%, var( --ec-mr-tk-b, 0px ) auto;
mask-size: 100% 100%, var( --ec-mr-tk-b, 0px ) auto;
-webkit-mask-position: center, var( --ec-mr-tk-x, 50% ) calc( var( --ec-mr-tk-y0, 50% ) + var( --ec-mr-tk-y, 0px ) );
mask-position: center, var( --ec-mr-tk-x, 50% ) calc( var( --ec-mr-tk-y0, 50% ) + var( --ec-mr-tk-y, 0px ) );
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.ec-mr-laag.ec-mr-tekst-aan {
display: none;
}
body:not( .et-fb ):not( .ec-in-builder ) [data-ec-maskreveal-image]:not( [data-ec-maskreveal] ):not( [data-ec-shutter] ),
body:not( .et-fb ):not( .ec-in-builder ) [data-ec-shutter-image]:not( [data-ec-maskreveal] ):not( [data-ec-shutter] ) {
display: none;
}
body:not( .et-fb ):not( .ec-in-builder ) [data-ec-maskreveal-tekst]:not( [data-ec-maskreveal] ):not( [data-ec-shutter] ),
body:not( .et-fb ):not( .ec-in-builder ) [data-ec-shutter-tekst]:not( [data-ec-maskreveal] ):not( [data-ec-shutter] ) {
display: none;
}
.ec-tf-doel {
opacity: 0;
}
.ec-tf-bron {
transform-origin: 0 0;
}