:root {
    --s-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
    --mz-dark-grey: 14, 11, 23;
    --mz-greenish: 47, 220, 172;
    --mz-purple: 123, 50, 192;
    --mz-mid: #5cd4ee;
    --mz-ink: #0c0916;
    --mz-grad: linear-gradient(118deg, rgba(var(--mz-greenish), 1) 0, var(--mz-mid) 42%, rgba(var(--mz-purple), 1) 104%);
    --mz-radius: 10px;
}
.test {
    width: 200px;
    height: 62px;
    background-size: cover;
}
@media (max-width: 767px) {
    .bgimg-left {
        background-position: center left !important;
    }
    .bgimg-right {
        background-position: center right !important;
    }
}
.zl_anim_scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all .6s ease;
}
.zl_anim_scroll_inview {
    opacity: 1;
    transform: none;
}
.row-twocol-space .zl_anim_scroll {
    opacity: 0;
    transform: translate(-50px,0);
    transition: all .6s ease;
}
.row-twocol-space .zl_anim_scroll_inview {
    opacity: 1;
    transform: none;
}
html {
    -webkit-font-smoothing: antialiased;
}
@media (max-width: 574px) {
    html {
        hyphens: auto;
    }
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Plus Jakarta Sans', Arial, Tahoma, sans-serif;
    color: #1b1b1b;
    /*line-height: 1.7;*/
}
div {
    margin: 0;
    padding: 0;
}
.ratio169 {
    padding-top: 56.25%;
}
.curve {
    mask: url("/templates/website-mediazo/img/general/curve.svg") no-repeat bottom / 100%;
    -webkit-mask: url("/templates/website-mediazo/img/general/curve.svg") no-repeat bottom / 100%;
    display: block;
    background-color: red;
    width: 100%;
    height: 95px;
    transform: translateY(2px);
}
@media (max-width: 767px) {
    .curve {
        height: 43px;
    }
}

.curve-top {
    mask: url("/templates/website-mediazo/img/general/curve-top.svg") no-repeat bottom / 100%;
    -webkit-mask: url("/templates/website-mediazo/img/general/curve-top.svg") no-repeat bottom / 100%;
    display: block;
    background-color: red;
    width: 100%;
    height: 95px;
}
div.arrow {
    mask: url("/templates/website-mediazo/img/general/arrow.svg") no-repeat bottom / 100%;
    -webkit-mask: url("/templates/website-mediazo/img/general/arrow.svg") no-repeat bottom / 100%;
    display: block;
    background-color: red;
    width: 110px;
    height: 42px;
}
.slick-arrow {
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

    display: block;

    border-radius: 50%;

    width: 34px;
    height: 34px;
    padding: 0;

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    border: 2px solid #1a1a1a;
}
.slick-arrow.slick-disabled {
    opacity: .35;
}
.slick-next::before,
.slick-prev::before {
    display: block;
    content: "\f060";
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    color: #1a1a1a;
    font-size: 16px;
}
.slick-next::before {
    content: "\f061";
}
.slick-prev {
    right: 45px;
}
.zl-vac {
    box-shadow: var(--s-shadow);
    padding: 30px;
    margin: 15px 0;
    position: relative;
}
.zl-vac:hover {
    cursor: pointer;
}
@media (min-width: 768px) {
    .zl-vac .h3 {
        height: 80px;
        overflow: hidden;
    }
}
.zl-vac-img {
    width: calc(100% + 60px);
    margin-bottom: -30px;
    transform: translate(-30px, -30px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.zl-vac-items {
    transform: translate(-30px, -30px);
    width: calc(100% + 60px);
    margin-bottom: -30px;
    padding: 10px 30px;
}
@media (min-width: 768px) {
    .zl-vac p {
        height: 95px;
        overflow: hidden;
    }
}
.zl-vac-detail-items {
    padding: 10px 0;
}
@media (min-width: 1200px) {
    .zl-vac-detail-items {
        width: calc(100%);
    }
}
.zl-vac-detail {
    position: sticky;
    top: 30px;
    padding: 30px;
}
.zl-vac-detail-intro p {
    font-weight: 700 !important;
    color: black !important;
    margin: 0 0 1.45rem 0 !important;
}
.vac-detail {
    position: relative;
}
.vac-detail h1 {
    width: 80%;
    font-weight: 600;
}
.vac-detail p {
    font-size: 1.1rem !important;
}
.vac-detail-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    width: calc(100% + calc(var(--bs-gutter-x) * .5) + calc(var(--bs-gutter-x) * .5));
    transform: translateX(-12px);
}
.vac-detail-intro-bg {
    background-color: rgba(255, 255, 255, .9);
    padding: 15px 15px 0 15px;
}
@media (min-width: 992px) {
    .vac-detail-intro-bg {
        background-color: rgba(255,255,255,.9);
        padding: 35px 35px 0 35px;
    }
}
.vac-detail-intro ul {
    margin: 0;
    padding: 0;
}
.vac-detail-intro ul li {
    font-size: 1.25rem !important;
    margin: 0 0 .75rem 0 !important;
    padding: 0 0 0 35px;
    font-weight: 600;
    list-style-type: none;
    position: relative;
}
.vac-detail-intro ul li:before {
    content: "\f00c";
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    left: 0;
}
@media (min-width: 992px) {
    .vac-detail-text {
        padding: 0 35px 0 0;
    }
    .vac-detail-withimg .vac-detail-stick {
        padding: 75px 15px;
    }
    .vac-detail-withimg .vac-detail-text {
        padding: 0 35px;
    }
}

.color-p-strong p strong {
    font-weight: normal;
}

img[src=""],
img:not([src]) {
    visibility: hidden;
}

.img-square {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
@media (max-width: 575px) {
    .img-square {
        height: 250px;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .img-square {
        height: 324px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .img-square {
        height: 324px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .img-square {
        height: 444px;
    }
}
@media (min-width: 1200px) {
    .img-square {
        height: 270px;
    }
}
@media (min-width: 1400px) {
    .img-square {
        height: 305px;
    }
}

.mz-samenwerking {
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #fff;
    border: 40px solid #fff;
}
@media (max-width: 574px) {
    .mz-samenwerking {
        border: 15px solid #fff;
    }
}
.mz-samenwerking-row {
    cursor: pointer;
}

.row.no-gutters > * {
    padding: 0 !important;
}

.form-control {
    font-size: 1rem;
    padding: .75rem .75rem;
    border-radius: 0;
}
select.form-control {

    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("/templates/website-mediazo/img/general/angle-down-light.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center right 15px !important;
    background-size: 10px !important;
    /*padding: 0 38px 0 12px;*/
}
.form-group {
    margin-bottom: 1.25rem;
    text-align: left;
}
a {
    text-decoration: none;
}
.btn,
.btn:hover {
    font-size: 1rem;
    padding: 1rem 4.5rem 1rem 1.75rem;
    background-color: #fff;
    color: #3f3f3f;
    white-space: normal;
    position: relative;
    border-radius: 10px;
    font-weight: 600;
}
@media (max-width: 574px) {
    .btn,
    .btn:hover {
        font-size: .85rem;
        padding: .85rem 3.9rem .85rem 1.45rem;
    }
}
.btn:not(.btn-sm):not(.btn-xs)::before {
    font-family: "Font Awesome 5 Pro";
    /* general.js zet --btn-arrow op none bij een knop met eigen icoon */
    content: var(--btn-arrow, "\f061");
    font-size: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.75rem;
    z-index: 1;
    transition: all .25s ease-in-out;
}
.btn:not(.btn-sm):not(.btn-xs):hover::before {
    right: 1.5rem;
}
.btn-sm {
    padding: .5rem 1.1rem;
}
.btn-sm:hover {
    padding: .5rem 1.1rem;
    transform: scale(1.1);
}
.btn-xs {
    padding: .15rem .75rem;
}
.btn-xs:hover {
    padding: .25rem .85rem;
}
.btn.zl_ctaphone_cuttoff,
.btn.zl_ctaphone {
    padding: 1rem 1.75rem;
}
footer .btn.zl_ctaphone_cuttoff,
footer .btn.zl_ctaphone {
    color: #fff;
}
.btn.zl_ctaphone_cuttoff::before,
.btn.zl_ctaphone::before {
    display: none;
}
.btn:hover {
    opacity: .65;
}
.btn-highlight-line-trans {
    background: none;
}
.btn-arrowdown::before,
.btn-calltoaction.zl-btn-scrollto::before {
    color: #fff;
    transform: rotate(90deg) translateX(-75%) !important;
}
@media (max-width: 574px) {
    .btn-arrowdown::before,
    .btn-calltoaction.zl-btn-scrollto::before {
        transform: rotate(90deg) translateX(-85%) !important;
    }
}
.btn-arrowdown:hover::before,
.btn-calltoaction.zl-btn-scrollto:hover::before {
    right: 1.75rem !important;
    top: 56% !important;
}
.zl_browser .btn {
    padding: 1rem 1.75rem;
}
.zl_browser .btn::before {
    display: none;
}
a,
a[href^=tel] {
    color: inherit;
}

a:hover,
a:focus {
    text-decoration: none;
}

.btn, .case-item, .case-item-dark, footer .circle-div, .mz-slider-item, .service, .animated, .topbar, a, ul.navmain ul, ul.navmain li ul li a:after, .twocol-divline ul li a::after {
    transition: all .25s ease-in-out;
}
.btn-fullwidth {
    width: 100%;
}
.btn-calltoaction {
    background: linear-gradient(-90deg,transparent 44%,rgba(255,255,255,.15) 50%,transparent 54%) #4fc8ff;
    background-blend-mode: screen;
    background-size: 300% 100%;
    animation: btnAnimation 1333ms linear .3s infinite;
}
@keyframes btnAnimation {
    0% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}
.container {
    position: relative;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1340px;
    }
}
.container-fluid {
    overflow-x: clip;
    padding: 0;
}
#overflow + .container-fluid {
    overflow: initial;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
#vacature-detail + .container-fluid {
    overflow: initial;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
section.no-divider + .divider-template {
    display: none;
}
.bg-image-wave {
    background-repeat: no-repeat;
    background-size: cover;
}
.constrain {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}
@media (min-width: 1400px) {
    .constrain {
        max-width: 1000px;
    }
}
.clearer {
    clear: both;
    float: none;
    width: 100%;
    display: block;
}
.div-divider {
    clear: both;
    float: none;
    width: 100%;
    display: block;
}
.divider-line {
    border-top: 1px solid rgba(0,0,0,0.25);
}
.divider-line-white {
    border-top: 1px solid rgba(255,255,255,0.25);
}
ul:not(.navmain) li.homeicon {
    display: none;
}

.zl_stream_tags {
    margin-bottom: 2rem;
}

.black-theme {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.black-theme:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}
.black-theme,
.black-theme h1,
.black-theme .h1,
.black-theme h2,
.black-theme .h2,
.black-theme h3,
.black-theme .h3,
.black-theme h4,
.black-theme .h4,
.black-theme h5,
.black-theme .h5,
.black-theme p,
.black-theme .p,
.black-theme ul li,
.black-theme ul li a:not(.btn),
.black-theme ol li,
.black-theme ol li a:not(.btn),
.black-theme p a:not(.btn) {
    color: #fff !important;
}

.image-div-fullbg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.image-div-fullbg form {
    padding: 25px;
}
.image-div-fullbg form .btn {
    background: #fff;
}
/*.image-div-fullbg form .form-control {
    border: none;
    border-radius: 3px;
    padding: .5rem;
    color: black;
    opacity: .5;
}
.image-div-fullbg form .form-control:focus {
    outline: 0 !important;
    box-shadow: none;
}*/
.image-div-fullbg .container {
    position: relative;
    z-index: 10;
}
.image-div-fullbg-tekstvlak {
    position: relative;
    margin: calc(var(--c-dis) * 3) 0;
}
.image-div-fullbg-tekstvlak::after {
    content: "";
    width: calc(100% + 1000px);
    height: calc(100% + calc(var(--c-dis) * 6));
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    position: absolute;
    z-index: -1;
}
@media (min-width: 1600px) {
    .image-div-fullbg-tekstvlak::after {
        height: calc(100% + calc(var(--c-dis) * 8));
    }
}
.image-div-fullbg form h3 {
    margin: 0;
}
.image-div-fullbg form div[class^='col'] {
    position: relative;
}
.image-div-fullbg form .btn {
    margin-top: 15px;
}
.image-div-fullbg form .invalid-feedback {
    position: absolute;
    width: calc(100% - 25px);
    transform: translateY(-3px);
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: right;
}
.image-div-fullbg form select option {
    background: #fff;
    color: black;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.image-div-fullbg svg {
    bottom: 0;
    width: 100%;
    position: absolute;
}

@media (max-width: 991px) {
    .firstItArticles .image-div-fullbg {
        padding-top: 140px;
    }
}
@media (min-width: 1200px) {
    .image-div-fullbg .contentLayout {
        padding-left: 40px;
        padding-right: 40px;
    }
}
.image-div-title-editor h1 {
    font-size: 4rem;
    font-weight: 700 !important;
}
@media (max-width: 767px) {
    .image-div-title-editor h1 {
        font-size: 2rem;
    }
    .image-div-fullbg h3 {
        font-size: 1.1rem;
    }
    .image-div-fullbg .h3 {
        width: 80%;
    }
}
.firstItArticles > .row > div[class^='col-'] > .div-divider:first-child {
    display: none;
}

.image-div-fullbg-largeblock {
    position: relative;
}
@media (min-width: 768px) {
    .image-div-fullbg-largeblock {
        height: 800px;
    }
    .image-div-fullbg-largeblock.image-div-fullbg-largeblock-bottom {
        height: 900px;
    }
}
@media (max-width: 767px) {
    .image-div-fullbg-largeblock {
        height: 665px;
    }
}
@media (max-width: 574px) {
    .image-div-fullbg-largeblock .btn {
        display: inline-block;
    }
}
.image-div-fullbg-largeblock .h1 {
    font-size: 5rem;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .image-div-fullbg-largeblock .h1 {
        font-size: 4rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .image-div-fullbg-largeblock .h1 {
        font-size: 3.5rem;
    }
}
@media (max-width: 767px) {
    .image-div-fullbg-largeblock .h1 {
        font-size: 2.2rem;
    }
    .image-div-fullbg-largeblock .h2 {
        font-size: 1.4rem;
    }
}
.image-div-fullbg-largeblock .container {
    position: relative;
    transform: translateY(-50%);
    top: 50%;
}

.large-image-div {
    position: relative;
}
.image-div {
    top: 0;
    position: absolute;
    width: calc(50% - 30px);
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.black-theme .image-div {
    background-color: #404040;
}
.image-div-right {
    right: 0;
}
@media (max-width: 767px) {
    .image-div {
        width: 100%;
        height: 250px;
    }
    .large-image-div {
        padding-top: 250px !important;
    }
    .large-image-div.black-theme:before {
        height: calc(100% - 250px);
    }
}
/*END - General*/

/*START - CONTENT*/
h1,
.h1 {
    line-height: 1.1;
}
h2,
.h2 {
    line-height: 2.5rem;
}
h3,
.h3 {
    line-height: 2.5rem;
}
@media (max-width: 767px) {
    h3,
    .h3 {
        line-height: 2rem;
    }
}
h5,
.h5 {
    line-height: 1.6rem;
}

.h1,
.h2,
.h3 {
    font-weight: 400;
}

.contentLayout h1,
.contentLayout .h1,
.contentLayout h2,
.contentLayout .h2,
.contentLayout h3,
.contentLayout .h3,
.contentLayout h4,
.contentLayout .h4,
.contentLayout h5,
.contentLayout .h5,
.contentLayout p,
.contentLayout .p,
.contentLayout h1,
.contentLayout table {
    margin: 0 0 1.25rem 0;
}
.contentLayout ol li,
.contentLayout ul li {
    margin: 0 0 .85rem 0;
}

@media (min-width: 1200px) {
    .contentLayout h1,
    .contentLayout .h1,
    .contentLayout h2,
    .contentLayout .h2,
    .contentLayout h3,
    .contentLayout .h3,
    .contentLayout h4,
    .contentLayout .h4,
    .contentLayout h5,
    .contentLayout .h5,
    .contentLayout h6,
    .contentLayout .h6,
    .contentLayout p,
    .contentLayout .p,
    .contentLayout h1,
    .contentLayout table {
        margin: 0 0 1.65rem 0;
    }
}

.contentLayout h1,
.contentLayout .h1,
.contentLayout h3,
.contentLayout .h3,
.contentLayout h4,
.contentLayout .h4,
.contentLayout h5,
.contentLayout .h5,
.contentLayout h6,
.contentLayout .h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
}

.contentLayout h1,
.contentLayout .h1,
.contentLayout h2,
.contentLayout .h2,
.contentLayout h3,
.contentLayout .h3 {
    font-weight: 800;
    position: relative;
}

.twocol-divline h1,
.twocol-divline .h1,
.twocol-divline h2,
.twocol-divline .h2 {
    padding-bottom: 1.5rem;
}
.twocol-divline h1::after,
.twocol-divline .h1::after,
.twocol-divline h2::after,
.twocol-divline .h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 4px;
    border-radius: 8px;
}

.contentLayout table tr td:nth-child(2) h6 {
    margin: 0;
}

.row-4col-icon-text-intro .contentLayout h2,
.row-4col-icon-text-intro .contentLayout .h2 {
    padding-bottom: 1.5rem;
}
.row-4col-icon-text-intro .contentLayout h2::after,
.row-4col-icon-text-intro .contentLayout .h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 4px;
    border-radius: 8px;
}
.row-4col-icon-text-intro .contentLayout.text-center h2::after,
.row-4col-icon-text-intro .contentLayout.text-center .h2::after {
    left: 50%;
    transform: translateX(-50%);
}
.row-4col-icon-text-txt.contentLayout a:not(.btn) {
    font-weight: 600;
}

.contentLayout h6,
.contentLayout .h6 {
    text-transform: uppercase;
    font-weight: 600;
    opacity: .65;
}

strong {
    font-weight: 800;
}
.header-slider .header-slide .header-slide-txt p:first-child strong {
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.contentLayout h4 {
    position: relative;
    display: block;
    font-weight: 600;
}
/*.contentLayout strong {
    font-weight: 700;
}*/
.contentLayout small {
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 1.25rem 0;
}

.contentLayout p:last-child {
    margin: 0;
}
@media (min-width: 1200px) {
    .text-white .contentLayout p,
    .text-white .contentLayout table tr td {
        color: #fff;
    }
}

@media (min-width: 1200px) {
/*    .contentLayout > .row div[class^="col"],
    .row > .contentLayout > div[class^="col"],
    .row.contentLayout > div[class^="col"] {
        padding: 40px;
    }
    .newsDivContainer div[class^="col"],
    #newsContainer div[class^="col"] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }*/
}

.contentLayout ol,
.contentLayout ul {
    margin-right: 1.25rem;
    margin-left: 10px;
    margin-bottom: 2rem;
}

.contentLayout ol li,
.contentLayout ul li {
    font-size: 1rem;
    text-align: left;
}

.contentLayout ul li {
    position: relative;
    list-style-type: none;
}
.contentLayout ul li::before {
    font-weight: 900;
    font-family: "Font Awesome 5 Pro";
    content: "\f14a";
    position: absolute;
    left: -28px;
    font-size: 18px;
}
.bg-calltoaction .contentLayout ul li::before {
    color: #fff;
}
/**
START - TODO CEDRIC QUICK
 */
.contentLayout ul li ul {
    margin: 10px 0;
    padding-left:0;
}
.contentLayout ul li ul li {
    margin:0;
    padding: 4px 0;
}
.contentLayout ul li ul li::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    position: absolute;
    left: -24px;
    top: 3px;
    font-size: 11px;
}
/**
END - TODO CEDRIC QUICK
 */

.contentLayout ol li {
    position: relative;
    list-style-type: none;
}
.contentLayout ol li::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";

    position: absolute;
    left: -28px;
    top: 0;
    font-size: 18px;
}

.contentLayoutKader {
    position: relative;
    padding: 35px;
    box-shadow: 0 10px 55px 5px rgba(0, 0, 0, .15);
    background-color: #fff;
}
@media (max-width: 767px) {
    .contentLayoutKader {
        padding: 15px;
    }
}

.contentLayout a:not(.btn) {
    text-decoration: none;
    color: #343434;
}
.contentLayout a:not(.btn):hover {
    color: #b5b5b5;
}
.contentLayout a:not(.btn):has(>strong),
.contentLayout a:not(.btn):has(>strong):hover {
    position: relative;
}
.contentLayout a:not(.btn):has(>strong)::after,
.contentLayout a:not(.btn):has(>strong):hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    border-radius: 8px;
    transition: width .25s ease-in-out;
}
.contentLayout a:not(.btn):has(>strong):hover::after {
    width: 90%;
}

.contentLayout > h1:last-child,
.contentLayout > h2:last-child,
.contentLayout > h3:last-child,
.contentLayout > h4:last-child,
.contentLayout > .h1:last-child,
.contentLayout > .h2:last-child,
.contentLayout > .h3:last-child,
.contentLayout > .h4:last-child,
.contentLayout > ul:last-child,
.contentLayout > ol:last-child {
    margin: 0;
}
.contentLayout img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .contentLayout p .btn {
        margin: 10px 0;
    }
}
.contentLayout .btn:hover {
    opacity: 1;
    box-shadow: 0 10px 55px 5px rgba(0,0,0,0.2);
}
.contentLayoutSpecial p {
    position: relative;
    padding-left: 25px;
}
.contentLayoutSpecial p::before {
    content: "";
    border: 1px solid #e5e5e5;
    background-color: #e5e5e5;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    left: 0;
    top: 10px;
}
.contentLayoutSpecial p::after {
    content: "";
    background-color: #e5e5e5;
    position: absolute;
    width: 2px;
    height: calc(100% - 1.25rem);
    left: 4px;
    top: 10px;
}
.calltoaction-bar ul {
    display: inline-block;
}

.correction-fixed {
    height: 80px;
}

.sfeer {
    height: 80px;
    position: relative;
    background-color: #fffbf5;
}
.sfeer-smll {
    height: 80px;
    background: none;
    background-color: #fff;
}
.sfeer-tekst {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    padding: 0 15px;
}
.sfeer-tekst p {
    font-size: 1.625rem;
    margin: 20px 0;
}
.sfeer-tekst strong {
    text-transform: uppercase;
    font-weight: 300;
    color: #fff;
    font-size: 3.125rem;
}

.three-col-rounded {
    padding: 5px;
}
.three-col-rounded i {
    font-size: 48px;
    color: #fff;
}
.three-col-rounded .icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    /*border-radius: 50%;*/
    text-align: center;
    background-color: #fff;
    margin-bottom: 20px;
    padding-top: 30px;
}
.three-col-rounded .icon i {
    font-weight: 900;
}
.three-col-rounded-col {
    padding-top: 50px;
    padding-left: 5px;
    padding-right: 5px;
}
@media (max-width: 767px) {
    .three-col-rounded-col {
        padding-top: 25px;
    }
}
.three-col-rounded-col svg {
    transform: translateY(2px);
}
.three-col-rounded-col .h2 {
    font-weight: 600;
    margin: 0 0 .85rem 0;
}
@media (max-width: 767px) {
    .three-col-rounded-col .h2 {
        font-size: 1.75rem;
    }
}
.three-col-rounded-col .h3 {
    font-size: 1.4rem;
    margin: 0 0 .85rem 0;
    padding: 0 1.75rem;
}
.three-col-rounded-text {
    padding: 25px 62px;
    background-color: #fff;
    font-size: 1.2rem;
    position: relative;
    z-index: 2;
}
@media (max-width: 574px) {
    .three-col-rounded-text {
        padding: 15px 32px;
        font-size: 1rem;
    }
}
.three-col-rounded-text::before {
    content: "";
    position: absolute;
    background-color: #fff;
    width: calc(100% + 10px);
    height: 50%;
    left: -5px;
    bottom: 0;
    z-index: -1;
}

.three-col-rounded-up {
    transform: translateY(-225px);
    margin-bottom: -225px;
}
@media (max-width: 767px) {
    .three-col-rounded-up {
        transform: translateY(-165px);
        margin-bottom: -165px;
    }
}
.three-col-rounded-col-a {
    margin-top: 20px;
}
.three-col-rounded-col-b {
    margin-top: 10px;
}
/*END - CONTENT*/

.threecol-num-icon div[class^='col-12 col-lg-4'] .contentLayout {
    padding: 35px;
    display: block;
    height: 100%;
}
.threecol-num-icon.bg-lightgrey div[class^='col-12 col-lg-4'] .contentLayout {
    background-color: #fff;
}
@media (max-width: 767px) {
    .row-threecol-num-icon {
        margin-top: 25px;
    }
    .row-threecol-num-icon .slick-list {
        overflow: visible;
        padding-right: 12%;
    }
    .row-threecol-num-icon:not(.row-threecol-num-icon-slide) > div:not(:first-child) {
        margin-top: 20px;
    }
    .row-threecol-num-icon div[class^='col-12 col-lg-4'] {
        margin-right: 20px;
    }
    /* vaste hoogte alleen in de mobiele slider (gelijke kaarten); gestapeld groeit de kaart mee met de inhoud */
    .row-threecol-num-icon-slide div[class^='col-12 col-lg-4'] .contentLayout {
        height: 350px;
    }
    .row-threecol-num-icon:not(.row-threecol-num-icon-slide) div[class^='col-12 col-lg-4'] .contentLayout {
        height: auto;
    }
    .row-threecol-num-icon .slick-arrow {
        top: -55px;
        right: auto;
        left: 50%;
        border: 2px solid #fff;
    }
    .row-threecol-num-icon .slick-arrow::before {
        color: #fff;
    }
    .row-threecol-num-icon .slick-prev {
        transform: translateX(-150%);
    }
    .row-threecol-num-icon .slick-next {
    }
}
.threecol-num-icon .teksticonvlakicon {
    width: 54px;
    height: 54px;
}
.threecol-num-icon .contentLayout {
    position: relative;
}
.threecol-num-icon .contentLayout h5 {
    margin-bottom: .75rem;
    font-weight: bold;
}
.bg-darkgrey.threecol-num-icon .contentLayout h5 {
    color: #fff;
}
.threecol-num-icon .contentLayout h3 {
    margin-bottom: .75rem;
    color: #32DCD1;
    font-weight: normal;
    font-size: 1.1rem;
}
.threecol-num-icon .contentLayout p {
    color: rgba(0,0,0,.75);
    opacity: 0.7;
    font-size: 14px;
    line-height: 1.4rem;
}
.bg-darkgrey.threecol-num-icon .contentLayout p {
    color: rgba(255,255,255,.75);
}
.threecol-num-icon .step {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 54px;
    font-weight: bold;
    color: #32DCD1;
    opacity: .2;
}

.threecol-num-icon div[class='col-12 col-lg-4']:last-child .teksticonvlakicon {
    background: #32DCD1;
    background: linear-gradient(135deg,rgba(50, 220, 209, 1) 0%, rgba(131, 49, 215, 1) 100%);
}
.threecol-num-icon div[class='col-12 col-lg-4']:last-child .step {
    background: linear-gradient(135deg,rgba(50, 220, 209, 1) 0%, rgba(131, 49, 215, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
    transition: top .25s ease-in-out;
}
@media (max-width: 767px) {
    #topbar {
        padding: 5px 0;
    }
}
#topbar .row {
    max-width: 1600px;
    margin: 0 auto;
}
.zl_layover #topbar {
    top: -100%;
}
.zl_layover.zl_layover_goingup #topbar {
    top: 0;
}
@media (min-width: 1199px) {
    #topbar .row > * {
        padding-right: calc(var(--bs-gutter-x) * 1);
        padding-left: calc(var(--bs-gutter-x) * 1);
    }
}
@media (max-width: 575px) {
    #topbar .btn-calltoaction {
        font-size: 1rem;
        padding: .35rem .5rem;
    }
}
.topbar-icons {
    font-size: 20px;
}
.topbar-icons a {
    margin-left: 10px;
}
.topbar-icons a:hover {
    opacity: 0.65;
}
#topbar .logo {
    margin: 15px 0 !important;
    width: auto !important;
    height: 50px !important;
    transition: opacity .25s ease-in-out;
}
#topbar .logo:hover {
    opacity: .65;
}
@media (max-width: 1149px) {
    #topbar .logo {
        margin: 15px 0 15px 50px !important;
    }
}
@media (max-width: 767px) {
    #topbar .logo {
        width: auto !important;
        height: 40px !important;
    }
}
@media (max-width: 575px) {
    #topbar .logo {
        width: auto !important;
        height: 35px !important;
        margin: 18px 0 15px 38px !important;
    }
}

/* ---------- topbar-CTA: standaard verborgen, tonen zodra de groene hero-knop
   uit beeld scrolt (mobiel, alleen op pagina's met de hero) ---------- */
/* :has() beperkt dit tot pagina's die het mz-hero-blok bevatten, zodat de
   knop op alle andere pagina's (zonder hero-observer) gewoon zichtbaar blijft
   - anders zou hij daar nooit meer getoond worden. */
@media (max-width: 1149px) {
    body:has(.mz-hero) .topbar-icons .zl_kennismaking {
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }
    body:has(.mz-hero) .topbar-icons .zl_kennismaking.zl_topbar_cta_visible {
        opacity: 1;
        pointer-events: auto;
    }
}

.withbg {
    text-align: center;
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    color: #fff;
}

.circle-div {
    font-size: 18px;
    text-align: center;
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    padding: 3px 0 0 0;
}
.circle-div-large {
    font-size: 28px;
    width: 64px;
    height: 64px;
    padding: 10px 0 0 0;
}

.service {
    position: relative;
    padding: 35px;
    box-shadow: 0 10px 55px 5px rgba(0,0,0,.15);
    width: 100%;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.service:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f178";
    font-weight: 300;
    font-size: 26px;
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
}
.service:hover {
    width: 90%;
    cursor: pointer;
}

.service-visual {
    flex: 0 0 25%;
    max-width: 25%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}
.service-visual i {
    margin-top: 5px;
    font-size: 48px;
}
.service-text {
    margin-left: 5%;
    flex: 0 0 60%;
    max-width: 60%;
}
.service-text p {
    margin: 0;
    text-transform: uppercase;
}

.mz-highlights .mz-highlights-container {
    position: relative;
}
.mz-highlights .mz-highlights-container:before {
    content: "";
    background-color: #fff;
    position: absolute;
    width: 3px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}
@media (max-width: 991px) {
    .mz-highlights .mz-highlights-container:before {
        display: none;
    }
}
.mz-highlights .contentLayout {
    padding: 0 2rem;
}
@media (max-width: 991px) {
    .mz-highlights .contentLayout {
        text-align: center;
    }
}
.mz-highlights .mz-highlights-visual {
    background-color: #fff;
    width: 164px;
    height: 164px;
    border-radius: 50%;
    background-size: contain;
    background-position: center center;
    margin: 15px auto;
}
.mz-highlights .contentLayout > div {
    position: relative;
}
.mz-highlights .contentLayout > div:before {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /*left consists of .contentLayout padding - BS col padding - half of this before elem*/
    left: calc(-2rem - 12px - 8px);
}
.mz-highlights .text-right .contentLayout > div:before {
    left: auto;
    /*right consists of .contentLayout padding - BS col padding - half of this before elem*/
    right: calc(-2rem - 12px - 8px);
}
@media (max-width: 991px) {
    .mz-highlights .contentLayout > div:before {
        left: 0 !important;
        right: auto !important;
    }
}
@media (max-width: 991px) {
    .mz-highlights .contentLayout > div:before {
        display: none;
    }
}

.slider {
    padding: 35px;
}

.mz-slider-item {
    margin: 0 30px;
    padding: 30px;
    background-color: #fff;
}
@media (max-width: 767px) {
    .mz-slider-item {
        padding: 15px;
    }
}
.mz-slider-item:hover {
    box-shadow: 0 0 25px 5px rgba(0,0,0,.15);
    cursor: pointer;
    transform: translateY(-20px);
}
.mz-slider-item-visual {
    background-color: #f1f1f1;
    width: 9.2rem;
    height: 9.2rem;
    border-radius: 50%;
    background-size: contain;
    background-position: center center;
    margin: 15px auto 2rem auto;
}
.mz-slider-item a {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
}
.mz-slider-item a:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f178";
    font-weight: 300;
    font-size: 26px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.mz-row-heading {
    /*    padding-left: 15px;
        padding-right: 15px;*/
}

.mz-line-after {
    position: relative;
    display: block;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}
.mz-line-after::after {
    height: 2px;
    content: "";
    position: absolute;
    width: 45px;
    bottom: 0;
    left: 0;
}
.text-center .mz-line-after::after {
    left: 50%;
    transform: translateX(-50%);
}

.mz-testimonial {
    padding-left: 15px;
    padding-right: 15px;
}

.mz-testimonial blockquote::before,
.mz-testimonial blockquote::after {
    content: "\201C";
    position: absolute;
    font-size: 50px;
    margin-top: -12px;
    font-weight: 300;
}
.mz-testimonial blockquote::before {
    margin-left: -30px;
}
.mz-testimonial blockquote::after {
    margin-left: 10px;
}

.shadow-divs-stacked .h2 strong {
    font-size: 80%;
    font-weight: 400;
}
.shadow-divs-stacked article {
    background-color: #fff;
    box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.06);
    padding: 2rem;
}
.shadow-divs-stacked article.article-lrg {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
.z-index-1 {
    z-index: 1;
}
.z-index-2 {
    z-index: 2;
}
.z-index-3 {
    z-index: 3;
}

.item {
    position: relative;
    background-size: cover;
    background-position: center;
}
.item .h2,
.item h2,
.item .h3,
.item h3,
.item .h4,
.item h4,
.item p,
.item ul li,
.item ol li {
    color: #fff;
}
.item-content {
    padding: 3.125rem 1.25rem;
    text-align: center;
    position: relative;
    z-index: 2;
}
.black-opacity {
    background-color: rgba(0,0,0,0.55);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    transition: all .25s ease-in-out;
}
.item:hover .black-opacity {
    background-color: rgba(0,0,0,0.4);
}

.conversion-block > .container > .row {
    margin-top: -200px;
    z-index: 2;
    position: relative;
}
.conversion-block form {
    text-align: left;
}
.conversion-block-image {
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.conversion-block-plugin,
.conversion-block-text {
    padding: 3rem;
}
@media (max-width: 767px) {
    .conversion-block-plugin,
    .conversion-block-text {
        padding: calc(var(--bs-gutter-x) * 1);
    }
}
.conversion-block-text {
    background-color: rgba(255,255,255,0.7);
}
.conversion-block label {
    display: none;
}

.expertise-icon {
    border: 3px solid;
}

.three-short-items ul {
    text-align: center;
    display: block;
    padding: 0;
}
.three-short-items ul li {
    text-align: center;
    display: inline-block;
    position: relative;
    list-style-type: none;
    vertical-align: middle;
    width: 32%;
}
@media (max-width: 991px) {
    .three-short-items ul li {
        width: 100%;
        padding: 1rem 0 0 0;
        margin: 0 0 1rem 0;
    }

    .three-short-items ul li:not(:first-child) {
        border-top: 1px solid rgba(0,0,0,0.2);
    }
}
.three-short-items ul li a:hover {
    text-decoration: none;
    opacity: 0.5;
}
.three-short-items ul li a:after {
    font-size: 20px;
    font-weight: 300;
    font-family: "Font Awesome 5 Pro";
    content: "\f33d";
    bottom: 0;
    width: 35px;
    height: 35px;
    margin: 10px auto 0 auto;
    display: block;
    border: 2px solid;
    border-radius: 50%;
    padding: 0 8px;
}
.three-short-items ul li p,
.three-short-items ul li a {
    margin: 0;
    font-size: 1.5rem;
}
.three-short-items ul li p strong {
    font-weight: normal;
    font-size: 1.375rem;
    display: inline-block;
    color: #3f3f3f;
}

.steps-arrow .heading {
    font-weight: 600;
}
.steps-arrow h4 {
    font-size: 2rem;
    padding: 0 120px 35px 120px;
    position: relative;
}
@media (max-width: 574px) {
    .steps-arrow-tekst h4 {
        font-size: 1.25rem;
        padding: 0 105px 35px 15px;
    }

    .row-text-right .steps-arrow-tekst h4 {
        font-size: 1.25rem;
        padding: 15px 15px 35px 105px;
    }
}
.steps-arrow h4::before {
    font-size: 34px;
    position: absolute;
    text-align: center;
    width: 72px;
    height: 72px;
    padding-top: 16px;
    mask: url("/templates/website-mediazo/img/general/diamond.svg") no-repeat center / 100%;
    -webkit-mask: url("/templates/website-mediazo/img/general/diamond.svg") no-repeat center / 100%;
    right: 5px;
    color: #fff;
    font-weight: 600;
}
@media (max-width: 574px) {
    .steps-arrow h4::before {
        right: 10px;
    }
}
.steps-arrow h4::after {
    content: "";
    font-size: 34px;
    position: absolute;
    text-align: center;
    width: 32px;
    height: 32px;
    padding-top: 16px;
    mask: url("/templates/website-mediazo/img/general/diamond.svg") no-repeat center / 100%;
    -webkit-mask: url("/templates/website-mediazo/img/general/diamond.svg") no-repeat center / 100%;
    top: 50px;
    right: -26px;
    color: #fff;
    font-weight: 600;
    opacity: .35;
}
@media (max-width: 574px) {
    .steps-arrow h4::after {
        display: none;
    }
}
.steps-arrow img {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    right: -150px;
}
@media (max-width: 991px) {
    .steps-arrow img {
        top: 130%;
        right: 0;
    }
}
@media (max-width: 574px) {
    .steps-arrow img {
        top: 110%;
        right: 0;
        width: 75px;
        height: 75px;
    }
}
.steps-arrow section {
    padding: 45px 0;
}
@media (max-width: 1199px) {
    .steps-arrow section {
        padding: 20px 0;
    }
}
@media (max-width: 767px) {
    .steps-arrow section {
        padding: 40px 0;
    }
}
.steps-arrow section:nth-child(3) h4::before {
    content: "1";
}
.steps-arrow section:nth-child(4) h4::before {
    content: "2";
}
.steps-arrow section:nth-child(5) h4::before {
    content: "3";
}
.steps-arrow-tekst  {
    position: relative;
    text-align: right;
}
.steps-arrow-tekst p {
    margin-left: 40px;
}
@media (max-width: 574px) {
    .steps-arrow-tekst p {
        margin: 0;
        padding: 0 20px;
    }
}
.row-text-right {
    justify-content: flex-end !important;
}
.row-text-right .steps-arrow-tekst {
    text-align: left;
}
.row-text-right h4::before {
    left: 5px;
    right: auto;
}
@media (max-width: 574px) {
    .row-text-right h4::before {
        left: 10px;
    }
}
.row-text-right h4::after {
    top: 50px;
    left: -26px;
}
.row-text-right img {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    left: -150px;
    right: auto;
    transform: scaleX(-1);
}
@media (max-width: 991px) {
    .row-text-right img {
        top: 130%;
        left: 0;
    }
}
@media (max-width: 574px) {
    .row-text-right img {
        top: 110%;
        left: 0;
        width: 75px;
        height: 75px;
    }
}

.steps {
    text-align: center;
}
.steps p {
    font-size: 1.1rem;
}
.steps .fal {
    font-size: 2rem;
    opacity: 0.75;
}
.steps img {
    width: 300px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .steps img {
        max-width: 40%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .steps img {
        max-width: 70%;
    }
    .steps p {
        font-size: 1.1rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .steps img {
        max-width: 70%;
    }
    .steps p {
        font-size: 1.25rem;
    }
}

.slider-head-container {
    position: relative;
}
.slider-head-slide {
    position: relative;
    height: 60vh;
    width: 100%;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
@media (max-width: 767px) {
    .slider-head-slide {
        height: 40vh;
    }
}
.slider-text-container {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.slider-text {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1.25rem;
}
.slider-image-content-negtopmargin {
    margin-top: -175px;
    margin-bottom: 6.25rem;
    z-index: 10;
}
@media (max-width: 991px) {
    .slider-image-content-negtopmargin {
        margin-top: 1.8rem;
        margin-bottom: 1.8rem;
    }
}

@media (min-width: 768px) {
    .zl_cases {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .zl_cases .zl_cases-item-container {
        float: left;
        width: 33%;
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .zl_cases {
        overflow: hidden;
    }
    .zl_cases-item-container {
        position: relative;
        width: 150px !important;
    }
    .zl_cases:after {
        background-image: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
        z-index: 10;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border-right: 15px solid #fff;
        height: 100%;
        width: 55px;
    }
    .zl_cases-item-container .zl_case-item {
        margin: 15px;
    }
}

.zl_cases-item-container .h4 {
    font-size: 1.1rem;
}

.case-logos {
    overflow: hidden;
}
.case-logos-slide {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 150px;
    margin: 0 30px;
    position: relative;
}
.case-logos-slide img {
    display: none;
}
.case-logos-slide .label {
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 12px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
}

.case-item-ribbon {
    width: 60px;
    height: 100px;
    background: black;
    top: -6px;
    left: 20px;
    position: absolute;
    z-index: 9;
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.case-item-ribbon:before,
.case-item-ribbon:after {
    content: "";
    position: absolute;
}
.case-item-ribbon:before {
    height: 0;
    width: 0;
    border-bottom: 6px solid #2c9b94;
    border-right: 6px solid transparent;
    right: -6px;
}
.case-item-ribbon:after {
    height: 0;
    width: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid black;
    bottom: -30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .case-item-ribbon {
        width: 40px;
        height: 70px;
    }
    .case-item-ribbon:after {
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid black;
        bottom: -20px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .case-item-ribbon {
        width: 30px;
        height: 60px;
    }
    .case-item-ribbon:after {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid black;
        bottom: -15px;
    }
}
@media (max-width: 767px) {
    .case-item-ribbon {
        width: 20px;
        height: 40px;
    }
    .case-item-ribbon:after {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid black;
        bottom: -10px;
    }
}

.zl_case-item {
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: relative;
    margin: 15px 0;
    transition: background-size .25s ease-in-out;
}
.zl_case-item:hover {
    background-size: auto 120%;
}
.zl_case-item img {
    display: none;
}
.case-item-dark {
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    opacity: 0;
    z-index: 2;
}
@media (min-width: 768px){
    .case-item:hover .case-item-dark {
        opacity: 1;
    }
}
.case-item-text {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    padding: 45px;
}

#row-case-item-half-half-slide-container-full {
    display: none;
}
.case-item-half-half {
    background-color: #fff;
    margin-top: 15px;
    margin-bottom: 15px;
    cursor: pointer;
}
@media (max-width: 767px) {
    .case-item-half-half .h3 {
        font-size: 1rem;
    }
}

.case-item-half-half .contentLayout {
    padding: 30px;
}
.btn-cases {
    margin-top: 2rem;
}
#row-case-item-half-half-slide-container-full .case-item-half-half {
    box-shadow: 0 10px 55px 5px rgba(0,0,0,.05);

}
.case-item-half-half-img {
    overflow: hidden;
    position: relative;
}
.case-item-half-half-ribbon {
    width: 200px;
    padding: 6px;
    position: absolute;
    text-align: center;
    color: #f0f0f0;
    top: 25px;
    right: -50px;
    transform: rotate(45deg);
}

#case-item-half-half-slide-container .slick-prev,
#case-item-half-half-slide-container .slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;
    z-index: 1;

    display: block;

    border-radius: 50%;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
#case-item-half-half-slide-container .slick-prev {
    left: 0;
}
#case-item-half-half-slide-container .slick-next {
    right: 0;
}
#case-item-half-half-slide-container .slick-prev:hover,
#case-item-half-half-slide-container .slick-prev:focus,
#case-item-half-half-slide-container .slick-next:hover,
#case-item-half-half-slide-container .slick-next:focus
{
    opacity: 0.65;
}
#case-item-half-half-slide-container .slick-prev:hover:before,
#case-item-half-half-slide-container .slick-prev:focus:before,
#case-item-half-half-slide-container .slick-next:hover:before,
#case-item-half-half-slide-container .slick-next:focus:before
{
    opacity: 1;
}
#case-item-half-half-slide-container .slick-prev.slick-disabled,
#case-item-half-half-slide-container .slick-next.slick-disabled
{
    opacity: .25;
}

#case-item-half-half-slide-container .slick-prev:before {
    content: "\f104";
}
#case-item-half-half-slide-container .slick-next:before {
    content: "\f105";
}

#case-item-half-half-slide-container .slick-prev:before,
#case-item-half-half-slide-container .slick-next:before
{
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 16px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.simulate-bs-col {
    width: 50%;
    display: inline-block;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}



/*START - SITEMAP LIST*/
.sitemap ul {
    margin: 0 0 20px 25px;
}

.sitemap ul li {
    list-style-type: none;
}

.sitemap ul li ul li {
    font-size: 12px;
}
/*END*/

#subscribeForm .checkbox-inline {
    margin: 0 0 1.25rem 0;
}
#subscribeForm .checkbox-inline input {
    margin-right: 10px;
}

.tagDivNews .btn {
    padding: .3125rem .5em;
    margin: 2px 0;
}
.newsDivDetail {
    border: none;
}

/*START - CASES*/
.zl_stream_grid_date {
    background-color: #f1f1f1;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-block;
}
/*.social-update-text-cutt {
    position: relative;
}
.social-update-text-cutt-more {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    width: 100%;
}
.social-update-text-cutt-height {
    height: 157px;
    overflow: hidden;
}*/

/*END - CASES*/

/*START - Thumb stream*/
.thumbStreamContainer {
    background-color: #fff;
    transition: all .25s ease-in-out;
    box-shadow: var(--s-shadow);
}
.thumbStreamContainer:hover {
    cursor: pointer;
    opacity: 0.65;
}
.thumbStreamImage {
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.thumbStreamTitleSmall {
    position: absolute;
    color: #fff;
    padding: 5px 10px;
    bottom: 30px;
}
.thumbStreamImage img {
    display: none;
}
.newsDivContainer .newsDivImage {
    box-shadow: none;
}
.thumbStreamContent {
    padding: 25px;
}
.thumbStreamTitle {
    font-size: 18px;
    font-weight: bold;
    height: 60px;
    overflow: hidden;
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .thumbStreamTitle {
        height: auto;
        margin-bottom: 15px;
    }
}
.thumbStreamIntro {
    height: 104px;
    overflow: hidden;
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .thumbStreamIntro {
        height: auto;
        margin-bottom: 15px;
    }
}

.thumbStreamListing {
    margin-bottom: 30px;
}

.thumbStreamListing span {
    display: block;
    margin: 3px 0;
    font-size: 16px;
}

.thumbStreamListing span i {
    color: #196ba2;
    width: 20px;
}

.zl_stream_tags {
    display: none;
}

.btn-more {
    margin: 0 !important;
}

.thumbStreamDetailContainer h1 {
    position: relative;
}

/*.thumbStreamDetailContainer h1:before {
	content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 20%;
    border-top: 2px solid #196ba2;
    z-index: 0;
}*/

.thumbStreamDetailListing {
    margin-bottom: 30px;
    width: 75%;
}

@media (max-width: 767px) {
    .thumbStreamDetailListing {
        width: 100%;
    }
}

.thumbStreamDetailListing span {
    display: inline-block;
    margin: 5px 0;
    font-size: 16px;
    width: 48%;
}

.thumbStreamDetailListing span i {
    color: #196ba2;
    width: 20px;
}
/*END - Thumb stream*/

.icon-blocks .h4 {
    min-height: 82px;
}
.row-teksticon .row:has(.case-logos) ~ .divider-mdm,
.row-4col-icon-text ~ .row:has(.case-logos) .divider-mdm {
    display: none;
}
.row-4col-icon-text-txt {
    position: relative;
    background-color: #fff;
    padding: 25px;
    height: 100%;
}
.row-4col-icon-text-txt h5 {
    margin-bottom: 1.2rem;
}
.row-4col-icon-text-txt p {
    font-size: 14px;
    line-height: 1.4rem;
    opacity: 0.7;
}
.row-4col-icon-text-txt p:has(a) {
    display: block;
    margin-bottom: 2.5rem !important;
    width: 1px;
    z-index: 1;
}
.row-4col-icon-text-txt a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 25px;

    display: flex;
    align-items: flex-end;
    z-index: 2;
}
.row-4col-icon-text-txt a:hover {
    box-shadow: 0 10px 55px 5px rgba(0, 0, 0, .15);
}
.row-4col-icon-text-txt a::after {
    margin-left: 15px;
    font-family: "Font Awesome 5 Pro";
    content: "\f061";
    font-weight: 600;
    transition: margin .25s ease-in-out;
}
.row-4col-icon-text-txt a:hover::after {
    margin-left: 25px;
}
.row-4col-icon-text-txt a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    top: 0;
    left: 0;
    transition: width .25s ease-in-out;
}
.row-4col-icon-text-txt a:hover::before {
    width: 100%;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .row-4col-icon-text > div {
        margin: 10px 0;
    }
}
@media (max-width: 767px) {
    .row-4col-icon-text .slick-list {
        overflow: visible;
        padding-right: 12%;
    }
    .row-4col-icon-text .slick-list .row-4col-icon-text-txt {
        margin-right: 20px;
    }
    .row-4col-icon-text:not(.row-4col-icon-text-slide) > div:not(:first-child) {
        margin-top: 20px;
    }
    .row-4col-icon-text .slick-arrow {
        top: 30px;
        right: 90px;
    }
    .row-4col-icon-text .slick-prev {
        right: 135px;
    }
}


/*START - Portfolio*/
.portfolio svg {
    display: none;
}
@media (min-width: 1200px) {
    .portfolio svg {
        display: none;
        width: 820px;
        top: -100px;
        right: -100px;
        position: absolute;
    }
}

.portfolio tag {
    font-family: "Times New Roman";
    font-size: 200px;
    position: absolute;
    top: -70px;
    right: 15px;
    display: none;
}
@media (min-width: 1200px) {
    .portfolio tag {
        left: calc(42% - 125px);
        right: auto;
    }
}
@media (max-width: 767px) {
    .portfolio tag {
        font-size: 150px;
    }
}
.portfolio .portfolio-text {
    position: relative;
}
.portfolio .portfolio-text .h1 {
    display: inline-block;
}
.portfolio .portfolio-text p:nth-child(3) {
    font-weight: 300;
    width: 303px;
}
.portfolio .portfolio-items .portfolio-item {
    position: relative;
    background: linear-gradient(0deg, rgba(249,249,249,1) 0%, rgba(255,255,255,1) 100%);
}
.portfolio .portfolio-items button {
    transition: opacity .25s ease-in-out;
}
.portfolio .portfolio-items button:hover,
.portfolio .portfolio-items a:hover {
    opacity: .35;
}
.portfolio .portfolio-items .portfolio-item .portfolio-item-img {
    position: absolute;
    width: 35%;
    height: 100%;
    background-position: center;
    background-size: cover;
}
.portfolio .portfolio-items .portfolio-item .portfolio-item-img:hover {
    cursor: pointer;
}
@media (max-width: 767px) {
    .portfolio .portfolio-items .portfolio-item .portfolio-item-img {
        position: relative;
        width: 100%;
        height: 300px;
    }
}
.portfolio .portfolio-items .portfolio-item .portfolio-item-img .portfolio-item-logo {
    position: absolute;
    top: 65px;
    left: 25%;
    width: 75%;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    background-color: #fff;
}
.portfolio .portfolio-item-context {
    padding: 70px 35px 35px calc(35% + 35px);
}
.portfolio .portfolio-item-context:hover {
    cursor: pointer;
}
@media (max-width: 767px) {
    .portfolio .portfolio-item-context {
        padding: 35px;
    }
}
@media (max-width: 575px) {
    .portfolio .portfolio-item-context {
        padding: 35px 15px;
    }
}
.portfolio .portfolio-item-context ul li {
    margin: 0 0 1rem 0;
    color: #3c3c3c;
}
@media (min-width: 768px) {
    .portfolio .portfolio-item-context ul li {
        font-size: 18px;
    }
}
.portfolio .portfolio-item-context ul li::before {
    width: 26px;
    height: 26px;
    left: -43px;
    font-family: "Font Awesome 5 Pro";
    content: "\f138";
}
.portfolio .portfolio-item .fas {
    position: absolute;
    right: 25px;
    bottom: 25px;
    font-size: 1.6rem;
    transition: right .25s ease-in-out;
}
.portfolio .portfolio-item-context:hover + a .fas {
    right: 20px !important;
}
.portfolio .slick-arrow {
    top: 20px;
    transform: translateX(-15px);
}
/*END - Portfolio*/

/*START - Twee koloms, scheidingslijn*/
.twocol-divline {
    position: relative;
    inset: 0;
}
.twocol-divline:not(.bg-lightgrey):not(.bg-darkgrey) {
    background: radial-gradient(60% 60% at 50% 0%, rgba(var(--c-light-grey),1) 0%, rgba(var(--c-light-grey),1) 35%, rgba(33, 203, 210, 0) 75%);
}
@media (min-width: 1200px) {
    .twocol-divline .row::after {
        content: "";
        position: absolute;
        width: 1px;
        background-color: #e2e2e2;
        height: 100%;
        top: 0;
        left: 50%;
    }
    .twocol-divline.bg-darkgrey .row::after {
        background-color: rgba(255,255,255,.15);
    }
}
.twocol-divline .twocol-divline-subtext p:not(:first-child) {
    color: #3c3c3c;
}
.twocol-divline.bg-darkgrey .twocol-divline-subtext p:not(:first-child) {
    color: rgba(255,255,255,.75);
}
.twocol-divline.bg-darkgrey ul li:not(:first-child) {
    border-color: rgba(255,255,255,.15);
}
.twocol-divline ul {
    margin: 0 15px;
    padding: 0;
}
.twocol-divline ul li {
    margin: 0;
    padding: 15px 35px 15px 0;
}
.twocol-divline ul li a {
    display: block;
    font-size: 1.6rem;
    position: relative;
    color: #3c3c3c !important;
}
.twocol-divline.bg-darkgrey ul li a {
    color: rgba(255,255,255,.75) !important;
}
@media (max-width: 767px) {
    .twocol-divline ul li a {
        font-size: 1.25rem;
    }
}
.twocol-divline ul li a:hover {
    opacity: .5;
}
.twocol-divline ul li a::after {
    position: absolute;
    content: "\f061";
    font-weight: 600;
    top: 50%;
    transform: translateY(-50%);
    right: -35px;
    font-family: "Font Awesome 5 Pro";
    color: #3c3c3c;
}
.twocol-divline ul li a:hover::after {
    right: -30px;
}
.twocol-divline ul li:not(:first-child) {
    border-top: 1px solid #e2e2e2;
}
.twocol-divline ul li::before {
    display: none;
}
@media (min-width: 1200px) {
    .twocol-divline div.col-12.col-xl-6:nth-child(1) {
        padding-right: 50px;
        padding-left: 25px;
    }

    .twocol-divline div.col-12.col-xl-6:nth-child(3) {
        padding-left: 50px;
        padding-right: 25px;
    }
}
/*END - Twee koloms, scheidingslijn*/

/*START - Contact*/
.contact {
    position: relative;
    margin-bottom: -20px;
}
.contact .container {
    position: relative;
}
/*@media (min-width: 1200px) {
    .contact .contentLayout {
        min-height: 550px;
    }
}*/
.contact-clearer {
    height: 8rem;
}
.contact .h3 {
    font-weight: 300;
}
.contact .curve-top {
    transform: translateY(1px);
}
@media (max-width: 767px) {
    .contact .curve-top {
        width: 110%;
        height: 35px;
    }
}
@media (min-width: 1200px) {
    .contact p {
        width: 555px;
    }
}
.contact .btn.zl_atf_btn,
.contact .btn.zl_ctaphone_cuttoff {
    background-color: #1b1b1b;
    color: #fff;
    margin-left: 25px;
}
@media (max-width: 574px) {
    .contact .btn.zl_atf_btn,
    .contact .btn.zl_ctaphone_cuttoff {
        margin-left: 10px;
        margin-top: 0;
        padding: .75rem 1.5rem;
    }
}
.contact form {
    /*position: absolute;*/
    /*width: 38%;*/
    background-color: #fff;
    padding: 40px;
    /*top: 40px;*/
    /*left: 15px;*/
    box-shadow: rgba(149, 157, 165, .2) 0px 8px 24px;
    z-index: 2;
    margin-bottom: -15px;
    position: relative;
}
.contact form .row:last-child {
    position: absolute;
}
@media (max-width: 1199px) {
    .contact form {
        padding: 25px 40px;
    }
}
@media (max-width: 992px) {
    .contact form {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
    }
}
@media (max-width: 767px) {
    .contact form {
        top: auto;
        padding: 25px;
    }
}
@media (max-width: 574px) {
    .contact form {
        top: auto;
        padding: 15px;
    }
}
.contact form p {
    color: #3c3c3c;
}
.contact form .btn {
    display: block;
    margin: 25px auto;
    width: 85%;
}
.contact form .invalid-feedback {
    display: none !important;
}
/*END - Contact*/
.contentblokken div[class^="col-"] div[class^="contentblok"] {
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
    padding: 70px 100px;
    position: relative;
}
.contentblokken div[class^="contentblok"] .h2 {
    font-weight: 500;
    margin-bottom: 1rem;
}
.contentblokken .contentblok-a .circle-arrow {
    display: none;
}
@media (min-width: 1200px) {
    .bollen {
        background-image: url('/templates/website-mediazo/img/general/bg-bollen.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }
    .contentblokken div[class^="col-"] div[class^="contentblok"] {
        transition: transform .25s ease-in-out;
    }
    .contentblokken div[class^="col-"]:nth-child(1) div[class^="contentblok"],
    .contentblokken div[class^="col-"]:nth-child(4) div[class^="contentblok"] {
        background-color: #084277;
        color: #fff;
    }

    .contentblokken .contentblok-a {
        z-index: 4;
        width: calc(100% + 40px);
        transform: rotate(-2deg);
        text-align: right;
    }
    .contentblokken .contentblok-a:hover {
        transform: rotate(-2deg) scale(1.01);
    }
    .contentblokken .contentblok-a .circle-arrow {
        display: block;
        position: absolute;
        background-color: #32dcd1;
        font-size: 55px;
        z-index: 5;
        transform: scaleX(-1) translate(-30px,45px);
        width: 90px;
        height: 90px;
        /*border-radius: 50%;*/
        text-align: center;
        bottom: 0;
        right: 0;
    }
    .contentblokken .contentblok-a .circle-arrow .fal {
        transform: translateY(3px);
    }
    .contentblokken .contentblok-a .arrow {
        position: absolute;
        top: 20px;
        transform: rotate(10deg);
        right: 40px;
        background-color: #fff;
    }

    .contentblokken .contentblok-b {
        z-index: 3;
        transform: rotate(2deg) translate(0, 30px);
    }
    .contentblokken .contentblok-b:hover {
        transform: rotate(2deg) translate(0, 30px) scale(1.01);
    }
    .contentblokken .contentblok-b .arrow {
        position: absolute;
        bottom: 60px;
        transform: rotate(100deg);
        right: -10px;
        background-color: #084277;
    }

    .contentblokken .contentblok-c {
        z-index: 2;
        transform: rotate(2deg) translate(25px, -45px);
        text-align: right;
    }
    .contentblokken .contentblok-c:hover {
        transform: rotate(2deg) translate(25px, -45px) scale(1.01);
    }
    .contentblokken .contentblok-c .arrow {
        position: absolute;
        top: 130px;
        transform: rotate(-100deg);
        left: 0;
        background-color: #084277;
    }

    .contentblokken .contentblok-d {
        z-index: 1;
        transform: rotate(-2deg) translate(-30px, -20px);
        padding-top: 90px !important;
    }
    .contentblokken .contentblok-d:hover {
        transform: rotate(-2deg) translate(-30px, -20px) scale(1.01);
    }
    .contentblokken .contentblok-d .arrow {
        position: absolute;
        bottom: 20px;
        transform: rotate(175deg);
        left: 60px;
        background-color: #fff;
    }
}
@media (max-width: 1199px) {
    .contentblokken div[class^="col-"]:nth-child(1) div[class^="contentblok"],
    .contentblokken div[class^="col-"]:nth-child(3) div[class^="contentblok"] {
        color: #fff;
    }
    .contentblokken div[class^="contentblok"] .arrow {
        position: absolute;
        bottom: 80px;
        right: 0;
        transform: rotate(90deg);
    }
    .contentblokken .contentblok-a {
        width: calc(100% - 20px);
        transform: rotate(-.5deg) translateX(10px);
    }
    .contentblokken .contentblok-a .arrow {
        background-color: #fff;
    }
    .contentblokken .contentblok-b {
        transform: rotate(.5deg) translateY(-25px);
    }
    .contentblokken .contentblok-b .arrow {
        bottom: 100px !important;
    }
    .contentblokken .contentblok-c {
        width: calc(100% - 20px);
        transform: rotate(-.5deg) translate(10px, -50px);
    }
    .contentblokken .contentblok-c .arrow {
        background-color: #fff;
    }
    .contentblokken .contentblok-d {
        transform: rotate(.5deg) translateY(-75px);
    }
}
@media (max-width: 767px) {
    .contentblokken div[class^="col-"] div[class^="contentblok"] {
        padding: 50px 100px 50px 50px;
    }
}
@media (max-width: 575px) {
    .contentblokken div[class^="col-"] div[class^="contentblok"] {
        padding: 50px 50px 50px 50px;
    }
    .contentblokken div[class^="contentblok"] .h2 {
        font-size: 1.75rem;
    }
    .contentblokken div[class^="contentblok"] .arrow {
        width: 70px;
        bottom: 60px;
        right: -20px
    }
}

/*START - HEADER SLIDE*/
.header-slider {
    position: relative;
}
.header-slider .header-slide-img {
    position: absolute;
    width: 52%;
    height: 100%;
    top: 0;
    right: 0;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}
@media (max-width: 767px) {
    .header-slider .header-slide-img {
        display: none;
    }
}

.header-slider .header-slide-img-cont-outer,
.header-slider .header-slide-img-cont,
.header-slider .header-slide-img-cont-outer-dark::before {
    position: absolute;
    width: 52%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 0;
}
.header-slider .header-slide-img-cont,
.header-slider .header-slide-img-cont-outer-dark::before {
    width: 100%;
}
@media (max-width: 767px) {
    .header-slider .header-slide-img-cont,
    .header-slider .header-slide-img-cont-outer,
    .header-slider .header-slide-img-cont::before {
        display: none;
    }
}
.header-slider .header-slide-img-cont-outer-dark::before {
    content: "";
    background-color: rgba(0,0,0,.5);
    z-index: 1;
}
.header-slider .header-slide-img-cont .slick-list,
.header-slider .header-slide-img-cont .slick-track {
    height: 100%;
}
.header-slider .header-slide-img-cont-outer-txt {
    position: absolute;
    width: 600px;
    bottom: 170px;
    left: 170px;
    z-index: 3;
    font-size: 1.3rem;
    line-height: 48px;
    padding: 18px 55px 18px 18px;
}
.header-slider .header-slide-img-cont-outer-txt span {
    float: left;
    height: 10px;
    width: 50px;
    font-size: 100px;
    font-style: italic;
    transform: translate(-15px,15px);
}
.header-slider .header-slide-img-cont-outer-txt::before {
    content: "";
    position: absolute;
    background-color: rgba(255,255,255,.3);
    top: 0;
    left: 0;
    height: 100%;
    width: 1000px;
}
.header-slider .header-slide-img-cont-outer-txt p {
    font-size: 1.4rem;
    line-height: 2rem;
    margin: 0;
}
@media (max-width: 1399px) {
    .header-slider .header-slide-img-cont-outer-txt {
        width: 84%;
        left: 135px;
        bottom: 145px;
    }
    .header-slider .header-slide-img-cont-outer-txt p {
        font-size: 1.2rem;
    }
}
@media (max-width: 1199px) {
    .header-slider .header-slide-img-cont-outer-txt,
    .header-slider .header-slide-img-cont-outer-txt p {
        display: none;
    }
}
.header-slider .header-slide-img-cont-outer-dark .header-slide-img-cont-outer-txt {
    color: #fff;
}
.header-slide-img-cont-img {
    background-position: center center;
    background-size: cover;
}

.header-slider .header-slide .header-slide-txt {
    margin: 7rem 0;
}
.floating-menu .header-slider .header-slide .header-slide-txt {
    margin: 14rem 0 10rem 0;
}
.header-slider .header-slide .header-slide-txt p {
    padding-left: 15px;
    color: #fff;
    font-size: 1.2rem;
}
.header-slider .header-slide .header-slide-txt p:first-child {
    font-size: 3.5rem;
    line-height: 4rem;
}
@media (max-width: 1199px) {
    .header-slider .header-slide .header-slide-txt p:first-child {
        font-size: 2.5rem;
        line-height: 3rem;
        margin: 4rem 0 2rem 0;
    }
    .floating-menu .header-slider .header-slide .header-slide-txt {
        margin: 8rem 0 4rem 0;
    }
/*    .header-slider .header-slide .header-slide-txt p:not(:first-child) {
        display: none;
    }*/
}
@media (max-width: 992px) {
    .header-slider .header-slide .header-slide-txt p:first-child {
        font-size: 2rem;
        margin: 4rem 0 2rem 0;
    }
    .floating-menu .header-slider .header-slide .header-slide-txt {
        margin: 7rem 0 3rem 0;
    }
    .header-slider .header-slide .header-slide-txt p:not(:first-child) {
        font-size: 1rem;
    }
}
.header-slider .header-slide .container {
    position: relative;
    z-index: 4;
}
.header-slider .header-slide-cart-blue {
    position: absolute;
    height: 102%;
    width: 50%;
    top: 0;
    z-index: 3;
    transform: translate(-18px, -16px) rotate(-1.8deg);
}
.header-slider .header-slide-cart-cta {
    position: absolute;
    height: 118%;
    width: 52%;
    top: 0;
    z-index: 2;
    transform: translate(-32px, -40px) rotate(-4.35deg);
}

body.text-large .contentLayout p,
body.text-large .contentLayout p:not(:first-child),
body.text-large .contentLayout ul li,
body.text-large .contentLayout ol li{
    font-weight: 200 !important;
    font-size: 1.675rem;
    line-height: 2.5rem;
}

@media (max-width: 1199px) {
    .header-slider .header-slide .header-slide-cart-cta {
        height: 120%;
        width: 53%;
    }
}
@media (max-width: 767px) {
    .header-slider .header-slide .header-slide-cart-blue {
        height: 102%;
        width: 90%;
    }
    .header-slider .header-slide .header-slide-cart-cta {
        height: 120%;
        width: 97%;
    }
}
@media (max-width: 575px) {
    .header-slider .header-slide .header-slide-cart-cta {
        height: 116%;
    }
}
.header-slider svg.triangle {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}
/*END - HEADER SLIDE*/

/*START - FAQ*/
.zl_faq > ul {
    padding: 0!important;
}
.zl_faq > ul > li {
    background-color: #f1f1f1;
    border: none !important;
    border-radius: 10px;
    transition: background-color .25s ease-in-out;
}
.zl_faq > ul > li:hover {
    background-color: rgba(0,0,0,.025);
}
.zl_faq > ul > li::before {
    display: none;
}
.zl_faq > ul > li > span > .fal {
    font-weight: 600 !important;
}
.zl_faq .zl_faq_question {
    font-size: 1rem;
    padding: 15px;
}
@media (min-width: 1200px) {
    .zl_faq .zl_faq_question {
        font-size: 1.15rem;
    }
}
.zl_faq .zl_faq_answer {
    padding: 0 45px;
}
@media (max-width: 767px) {
    .zl_faq .zl_faq_answer {
        padding: 0 15px;
    }
}
.zl_faq .zl_faq_answer p:last-child {
    margin: 0 0 1.25rem 0;
}
/*END - FAQ*/

.reviews {
    position: relative;
}
.reviews .contentLayout {
    position: relative;
}
.reviews .contentLayout h5 {
    font-size: 3.5rem;
    line-height: 4rem;
}
@media (max-width: 1199px) {
    .reviews .contentLayout h5 {
        font-size: 2.5rem;
        line-height: 3rem;
    }
}
@media (max-width: 991px) {
    .reviews .contentLayout h5 {
        font-size: 2rem;
    }
}

.reviews .contentLayout .btn-highlight {
    position: relative;
    right: auto;
    bottom: auto;
}
@media (min-width: 992px) {
    .reviews .contentLayout .btn-highlight {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
@media (min-width: 1200px) {
    .reviews .contentLayout .btn-highlight {
        position: absolute;
        right: 25px;
        bottom: 0;
    }
}
.reviews-img {
    position: absolute;
    height: 100%;
    width: 55%;
    background-position: center center;
    background-size: cover;
}
@media (max-width: 1199px) {
    .reviews-img {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
    }
}
@media (min-width: 1200px) {
    .reviews-plgn {
        width: calc(100% + 30px);
    }
}
.reviews-plgn::before {
    display: none;
}
@media (min-width: 992px) {
    .reviews-plgn::before {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        width: 50px;
        height: 100%;
        z-index: 2;
        background: #ffffff;
        background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
    }
}
@media (min-width: 1200px) {
    .reviews-plgn::before {
        right: 6px;
    }
}
.reviews-item {
    padding: 35px;
    position: relative;
    margin-right: 30px;
}

.reviews-item .h3 {
    max-width: calc(100% - 115px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 40px;
}
@media (max-width: 574px) {
    .reviews-item .h3 {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.reviews-item p {
    font-size: 16px;
}
.reviews-item p.reviews-item-text {
    height: 200px;
    overflow: hidden;
}
.reviews-item .reviews-item-date {
    opacity: .75;
    text-align: right;
}
.reviews-item .reviews-item-score {
    position: absolute;
    top: 42px;
    right: 35px;
    color: #ff7e00;
}
@media (max-width: 574px) {
    .reviews-item .reviews-item-score {
        position: relative;
        top: auto;
        right: auto;
    }
}
.reviews-totals i {
    color: #ff7e00;
}
.reviews-totals-score {
    font-size: 32px;
    margin-top: -5px;
}
.reviews-plgn .slick-list {
    overflow: visible;
    padding: 0 20% 0 0 !important;
}
@media (min-width: 992px) {
    .reviews-plgn .slick-list {
        overflow: visible;
        padding: 0 10% 0 0 !important;
    }
}
.reviews-plgn .slick-arrow {
    top: -100px;
    right: 55px;
}
.reviews-plgn .slick-arrow.slick-prev {
    right: 105px;
}
@media (max-width: 1199px) {
    .reviews-plgn .slick-arrow {
        right: 0;
    }
    .reviews-plgn .slick-arrow.slick-prev {
        right: 50px;
    }
}

.usps img {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    transform: scaleX(-1);
}
.usps div[class^='col'] {
    position: relative;

}
.usps-arrow {
    width: 100%;
    position: absolute;
    height: 100%;
    mask: url("/templates/website-mediazo/img/general/pijl.svg") no-repeat center / auto 100%;
    -webkit-mask: url("/templates/website-mediazo/img/general/pijl.svg") no-repeat center / auto 100%;
    transform: scaleX(-1);
}
@media (max-width: 991px) {
    .usps-arrow {
        mask: url("/templates/website-mediazo/img/general/pijl.svg") no-repeat center / 70% auto;
        -webkit-mask: url("/templates/website-mediazo/img/general/pijl.svg") no-repeat center / 70% auto;
    }
}
.usps-text {
    padding: 32px;
    background-color: #fff;
    height: 100%;
    display: block;
}
.usps-text::before {
    content: "";
    width: 0;
    top: 16px;
    left: 32px;
    position: absolute;
    height: 3px;
    transition: width .25s ease-in-out;
}
.usps-text:hover::before {
    width: calc(100% - 64px);
}
.usps-text-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    color: #fff;
    position: relative;
    margin: 0 6px -6px 0;
    border-radius: 50%;
}
.usps-text-icon i {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    font-size: 1.2rem;
}

.row-teksticon .row > div[class^="col"] {
    margin-bottom: calc(var(--bs-gutter-x) * .5);
    margin-top: calc(var(--bs-gutter-x) * .5);
}
@media (max-width: 767px) {
    .row-teksticon-cont .slick-list {
        overflow: visible;
        padding-left: 10px;
        padding-right: 12%;
    }
    .row-teksticon-cont.row-teksticon-cont-slide .teksticonvlak {
        margin-right: 20px;
    }
    .row-teksticon-cont:not(.row-teksticon-cont-slide) > div:not(:first-child) {
        margin-top: 20px;
    }
    .row-teksticon-cont .slick-arrow {
        top: 26px;
        right: 105px;
    }
    .row-teksticon-cont .slick-prev {
        right: 150px;
    }
}
@media (max-width: 574px) {
    .row-teksticon-cont .slick-arrow {
        right: 90px;
    }
    .row-teksticon-cont .slick-prev {
        right: 135px;
    }
}

.teksticonvlak {
    padding: 25px;
    display: block;
    height: 100%;
    background-color: #fff;
}
.bg-darkgrey .teksticonvlak {

}
.row-teksticon-center-color .teksticonvlak {
    text-align: center;
}
.teksticonvlak h5 {
    margin-bottom: 1.2rem
}
.teksticonvlak p {
    font-size: 14px !important;
    line-height: 1.4rem !important;
    color: #656565;
}
.teksticonvlakicon {
    width: 42px;
    height: 42px;
    position: relative;
    background-color: rgba(var(--c-light-grey), 1);
}

.bg-white .teksticonvlakicon,
.teksticonvlak.bg-lightgrey .teksticonvlakicon {
    background-color: #fff;
}
.row-teksticon-center-color .teksticonvlakicon {
    margin: 0 auto;
}
.teksticonvlakicon i {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    font-size: 21px;
    font-weight: 900;
    width: 1.3em;
    text-align: center;
}

footer {
    color: #fff;
    position: relative;
}
footer .circle-div a {
    color: #fff;
}
footer ul li a:hover {
    opacity: 0.65;
}
footer .h2 {
    text-align: center;
}
footer .footer-content {
    position: relative;
    z-index: 1;
}
@media (max-width: 767px) {
    footer .footer-content {
        padding-bottom: 55px;
    }
}
footer .footer-content .h1 {
    font-weight: 300;
}
footer .circle-div-large {
    margin: 0 5px;
    position: relative;
}
footer .circle-div-large > span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
}
footer .circle-div-large > span[class^="zl_sociallogo_"] {
    mask-size: 50%;
}
footer .circle-div {
    opacity: 0.65;
}
footer .circle-div:hover {
    opacity: 1;
}
footer .dark-div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 0;
}
footer a:hover {
    color: #fff;
}
footer .socialmedia-icons {
    text-align: center;
}
footer ul.navfooter {
    padding: 0;
}
footer ul.navfooter li {
    list-style-type: none;
    display: inline-block;
    font-size: .8rem;
    opacity: 0.5;
    margin: 0 8px;
}
footer .contact-info ul {
    margin-bottom: 25px;
}
footer .contact-info ul li {
    margin: 0 0 15px 0;
    position: relative;
    padding-left: 25px;
}
footer .contact-info ul li:before {
    content: "\f3c5";
    left: 0;
    top: 2px;
    position: absolute;
    font-size: 16px;
    font-weight: 300;
    font-family: "Font Awesome 5 Pro";
}
footer .zl_atf_btn_zolive {
    padding: .5rem 0;
    border-radius: 10px;
    display: inline-block;
}
footer .zl_atf_btn_zolive i {
    transition: all .25s ease-in-out;
}
footer .zl_atf_btn_zolive:hover i {
    transform: translateX(5px);
}
footer .zl_atf_btn_zolive img {
    margin-top: -12px;
    margin-bottom: -12px;
    margin-right: 10px;
}
footer .zl_atf_cta,
footer .zl_atf_cta:hover,
footer .zl_atf_cta:focus {
    border: 2px solid transparent;
    background-color: #1b1b1b;
}
.sitemap-div {
    color: #fff;
}
.sitemap-div h5 {
    color: #fff;
    margin-bottom: 1.25rem;
}
.sitemap-div ul {
    padding: 0;
}
.sitemap-div ul li {
    vertical-align: top;
    list-style-type: none;
}
.sitemap-div ul.nav-sitemap li i,
.sitemap-div ul.nav-sitemap li.homeicon {
    display: none;
}
@media (min-width: 1200px) {
    .sitemap-div ul.nav-sitemap > li {
        display: inline-block;
        width: 32%;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .sitemap-div ul.nav-sitemap > li {
        display: inline-block;
        width: 49%;
        margin-bottom: 1.25rem;
    }
}
@media (max-width: 767px) {
    .sitemap-div ul.nav-sitemap > li {
        display: inline-block;
        width: 100%;
        margin-bottom: 1.25rem;
    }
}

.sitemap-div ul.nav-sitemap > li > ul {
    margin-top: 1.25rem;
}

.sitemap-div ul.nav-sitemap > li > ul > li {
    line-height: 1.9rem;
}

@media (max-width: 1199px) {
    .zl-mobile-nav-buttons-container,
    .zl-top-button {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}
.query-detector {
    position: absolute;
    top: 0;
}

/*START - DEVICE DEPENDANT CSS*/
@media (max-width: 575px) {
    /*CONTENT applying col-xs VIEWS*/
    .query-detector{ height:1px;content:'xs'; }
}
@media (min-width: 576px) and (max-width: 767px) {
    /*CONTENT applying col-sm VIEWS*/
    .query-detector{ height:2px;content:'sm'; }
}
@media (min-width: 768px) and (max-width: 991px) {
    /*CONTENT applying col-md VIEWS*/
    .query-detector{ height:3px;content:'md'; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    /*CONTENT applying col-lg VIEWS*/
    .query-detector{ height:4px;content:'lg'; }
}
@media (min-width: 1200px) {
    /*CONTENT applying col-xl VIEWS*/
    .query-detector{ height:5px;content:'xlg'; }
}
@media (min-width: 1400px) {
    /*CONTENT applying col-xxl VIEWS*/
    .query-detector{ height:6px;content:'xxlg'; }
}
.mail-webv-container-detail table {
    margin: 0 !important;
}
.mail-webv-container-detail table h1,
.mail-webv-container-detail table h2,
.mail-webv-container-detail table h3,
.mail-webv-container-detail table p {
    margin: 0 0 15px 0 !important;
}
.mail-webv-container-detail table h1,
.mail-webv-container-detail table h2,
.mail-webv-container-detail table h3,
.mail-webv-container-detail table p {
    font-family: Arial !important;
}
.mail-webv-container-detail table p {
    font-size: 16px !important;
    margin: 0 0 15px 0 !important;
    line-height: normal !important;
}
.mail-webv-container-detail .topmargin {
    margin: 20px 0 !important;
}

/* ---------- mz-hero ---------- */
.mz-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 540px;
    padding: 135px 0 88px;
    overflow: hidden;
    background: var(--mz-ink);
    color: #fff;
}
.mz-hero > span { position: absolute; pointer-events: none; }

.mz-hero-photo {
    position: absolute;
    right: 0;
    top: 0;
    width: 62%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 42%;
    filter: saturate(.9) contrast(1.04);
    opacity: .95;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 26%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 26%, #000 62%);
}

/* gradient-waas over de foto */
.mz-hero-tint {
    right: 0; top: 0; width: 62%; height: 100%;
    background: linear-gradient(118deg, rgba(var(--mz-greenish), .42) 0, rgba(92, 212, 238, .34) 42%, rgba(var(--mz-purple), .55) 104%);
    mix-blend-mode: soft-light;
}
/* donkere schaduw richting de tekst */
.mz-hero-shade {
    right: 0; top: 0; width: 62%; height: 100%;
    background: linear-gradient(100deg, rgba(12, 9, 22, .9) 0%, rgba(12, 9, 22, .34) 45%, rgba(30, 10, 55, .42) 100%);
}
/* linkerhelft dicht voor leesbaarheid */
.mz-hero-fade-left {
    left: 0; top: 0; bottom: 0; width: 52%;
    background: linear-gradient(96deg, var(--mz-ink) 0%, rgba(12, 9, 22, .96) 55%, rgba(12, 9, 22, 0) 100%);
}
.mz-hero-glow {
    left: -160px; top: -120px; width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(var(--mz-greenish), .16), transparent 68%);
    filter: blur(24px);
}
.mz-hero-fade-bottom {
    left: 0; right: 0; bottom: 0; height: 240px;
    background: linear-gradient(180deg, transparent, rgba(12, 9, 22, .9));
}

.mz-hero-inner { position: relative; z-index: 4; }

.mz-content h1 {
    margin: 0;
    max-width: 15ch;
    font-size: clamp(40px, 5.4vw, 74px);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 700;
    text-wrap: balance;
}
/* gradient-woorden: <strong> in de titel, geen span nodig */
.mz-content h1 strong {
    background: linear-gradient(118deg, rgba(var(--c-greenish), 1) 0%, #5CD4EE 42%, rgba(var(--c-purple), 1) 104%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.mz-content p {
    margin: clamp(18px, 2.6vh, 26px) 0 clamp(26px, 4vh, 40px);
    max-width: 52ch;
    font-size: calc(var(--c-dis) * 1.2);
    line-height: 2.2rem;

    color: rgba(255, 255, 255, .9);
    text-wrap: pretty;
}

/* ---------- hero-knop ---------- */
.btn.btn-mz-hero {
    position: relative;
    display: inline-block;
    padding: 1rem 4.5rem 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #3f3f3f;
    background-color: rgba(var(--mz-greenish), 1);
    border: 0;
    border-radius: var(--mz-radius);
    white-space: nowrap;
    transition: filter .15s ease-in-out;
}
.btn.btn-mz-hero:hover,
.btn.btn-mz-hero:focus {
    color: #3f3f3f;
    filter: brightness(1.06);
}
.btn.btn-mz-hero::after {
    content: "\f061";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- mobiel ---------- */
@media (max-width: 991.98px) {
    .mz-hero { min-height: 620px; padding: 70px 0 72px; }
    .mz-hero-photo {
        width: 100%;
        opacity: .55;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .mz-hero-tint,
    .mz-hero-shade { width: 100%; }
    .mz-hero-fade-left {
        width: 100%;
        background: linear-gradient(180deg, rgba(12, 9, 22, .92), rgba(12, 9, 22, .78));
    }
}


/* ---------- Tekst op vullende afbeelding: opties (compact, vinkjes, icoon tweede knop) ---------- */
/* compact: boven evenveel ruimte als onder (de hero begint onder de vaste header) */
@media (min-width: 992px) {
    .image-div-fullbg.image-div-fullbg-compact,
    .firstItArticles .image-div-fullbg.image-div-fullbg-compact {
        height: auto;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .image-div-fullbg-compact.image-div-fullbg-largeblock .container {
        top: auto;
        transform: none;
    }
}
@media (max-width: 991px) {
    .image-div-fullbg.image-div-fullbg-compact,
    .firstItArticles .image-div-fullbg.image-div-fullbg-compact {
        height: auto;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    /* mobiel: tekst hoger en strakker, zodat ook de vinkjes in het eerste scherm vallen */
    .firstItArticles .image-div-fullbg.image-div-fullbg-compact {
        padding-top: 1.5rem;
    }
    .image-div-fullbg-compact .contentLayout > h1,
    .image-div-fullbg-compact .contentLayout > h2,
    .image-div-fullbg-compact .contentLayout > p {
        margin-bottom: .75rem;
    }
    .image-div-fullbg-compact .image-div-fullbg-usps ul {
        margin-top: var(--c-dis);
    }
    .image-div-fullbg-compact.image-div-fullbg-largeblock .container {
        top: auto;
        transform: none;
    }
}

.image-div-fullbg-usps ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin: calc(var(--c-dis) * 1.5) 0 0;
    padding: 0;
}
.text-center .image-div-fullbg-usps ul {
    justify-content: center;
}
.image-div-fullbg-usps ul li {
    padding-left: 1.6rem;
    font-size: .95rem;
    font-weight: 600;
}
.image-div-fullbg .image-div-fullbg-usps ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 1rem;
    left: 0;
    top: 0;
    color: rgb(var(--c-greenish));
}
@media (max-width: 767px) {
    .image-div-fullbg-usps ul {
        flex-direction: column;
    }
}

/* De standaardpijl verdwijnt via --btn-arrow (gezet door general.js), niet via
   een :has()-regel: het icoon komt pas met JS in de knop, dus de gegenereerde
   pagina-CSS gooit zo'n regel weg en dan staan pijl en icoon over elkaar. */
.btn .btn-customicon-i {
    position: absolute;
    top: 50%;
    right: 1.75rem;
    transform: translateY(-50%);
    font-size: 18px;
    transition: all .25s ease-in-out;
}
.btn:hover > .btn-customicon-i {
    right: 1.5rem;
}

/* ---------- Herkenbaar per branche (tabs zonder JS, radio + label) ---------- */
.mz-branche-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mz-branche-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.mz-branche-intro h6,
.mz-branche-content h6 {
    margin-bottom: .75rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(var(--c-purple));
}
.mz-branche-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 2.5rem 0 2rem;
}
.mz-branche-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .75rem 1.4rem;
    border: 1px solid #e3e6ee;
    border-radius: 40px;
    background: #fff;
    color: #5f6475;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.mz-branche-label:hover {
    border-color: rgb(var(--c-purple));
    color: rgb(var(--c-purple));
}
.mz-branche-panel {
    display: none;
    align-items: center;
    gap: 3rem;
    padding: 3rem;
    border-radius: var(--mz-radius);
    background: #fff;
    box-shadow: var(--s-shadow);
}
.mz-branche-panel-img {
    grid-template-columns: 1.1fr 1fr;
}
.mz-branche-content > *:last-child {
    margin-bottom: 0;
}
.mz-branche-content ul {
    margin-bottom: 1.5rem;
}
.mz-branche-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--mz-radius);
    background: var(--mz-grad);
    color: #fff;
    font-size: 7rem;
}
.mz-branche-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mz-radius);
}
.mz-branche-radio-1:not(.zl_keep):checked ~ .mz-branche-panels .mz-branche-panel-1,
.mz-branche-radio-2:not(.zl_keep):checked ~ .mz-branche-panels .mz-branche-panel-2,
.mz-branche-radio-3:not(.zl_keep):checked ~ .mz-branche-panels .mz-branche-panel-3,
.mz-branche-radio-4:not(.zl_keep):checked ~ .mz-branche-panels .mz-branche-panel-4,
.mz-branche-radio-5:not(.zl_keep):checked ~ .mz-branche-panels .mz-branche-panel-5 {
    display: grid;
}
.mz-branche-radio-1:not(.zl_keep):checked ~ .mz-branche-nav .mz-branche-label-1,
.mz-branche-radio-2:not(.zl_keep):checked ~ .mz-branche-nav .mz-branche-label-2,
.mz-branche-radio-3:not(.zl_keep):checked ~ .mz-branche-nav .mz-branche-label-3,
.mz-branche-radio-4:not(.zl_keep):checked ~ .mz-branche-nav .mz-branche-label-4,
.mz-branche-radio-5:not(.zl_keep):checked ~ .mz-branche-nav .mz-branche-label-5 {
    border-color: rgb(var(--c-purple));
    background: rgb(var(--c-purple));
    color: #fff;
}
.mz-branche-radio-1:not(.zl_keep):focus-visible ~ .mz-branche-nav .mz-branche-label-1,
.mz-branche-radio-2:not(.zl_keep):focus-visible ~ .mz-branche-nav .mz-branche-label-2,
.mz-branche-radio-3:not(.zl_keep):focus-visible ~ .mz-branche-nav .mz-branche-label-3,
.mz-branche-radio-4:not(.zl_keep):focus-visible ~ .mz-branche-nav .mz-branche-label-4,
.mz-branche-radio-5:not(.zl_keep):focus-visible ~ .mz-branche-nav .mz-branche-label-5 {
    outline: 2px solid rgb(var(--c-greenish));
    outline-offset: 2px;
}
@media (max-width: 991px) {
    .mz-branche-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 2rem 0 1.5rem;
        padding-bottom: .25rem;
    }
    .mz-branche-label {
        flex: 0 0 auto;
    }
    .mz-branche-panel,
    .mz-branche-panel-img {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.75rem;
    }
    .mz-branche-visual {
        display: none;
    }
}

/* ---------- Slim, maar niet eigenwijs: ZoLive doet, jij beslist ---------- */
.mz-slim-intro h2 {
    margin-bottom: 0;
    font-size: 2.375rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}
.mz-slim .mz-slim-intro p,
.mz-slim .mz-slim-card p,
.mz-slim .mz-slim-human p {
    font-size: 1rem;
    line-height: 1.6;
}
.mz-slim .mz-slim-intro p {
    color: #b9b6c9;
}
.mz-slim-intro > *:last-child {
    margin-bottom: 0;
}
@media (min-width: 992px) {
    .mz-slim-intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4.5rem;
    }
    .mz-slim-intro > * {
        grid-column: 1;
    }
    .mz-slim-intro > p {
        grid-column: 2;
    }
    .mz-slim-intro > p:first-of-type {
        grid-row: 1 / span 2;
        align-self: end;
    }
}
.mz-slim-row {
    --bs-gutter-x: 20px;
    row-gap: 20px;
    margin-top: 2.5rem;
}
.mz-slim-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px;
    border: 1px solid #34304a;
    border-radius: 14px;
    background: #211d30;
}
.mz-slim .mz-slim-card .mz-slim-icon {
    display: block;
    align-self: flex-start;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 22px;
    line-height: 1;
    color: rgb(var(--c-greenish));
}
.mz-slim .mz-slim-card > .contentLayout:not(.mz-slim-ok) > h6 {
    display: none;
}
.mz-slim-card h3 {
    margin-bottom: .5em;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}
.mz-slim .mz-slim-card p {
    margin-bottom: 0;
    color: #b9b6c9;
}
.mz-slim .mz-slim-card .mz-slim-ok {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: auto 0 0;
    padding: 16px 0 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: #bff5ef;
}
.mz-slim .mz-slim-card .mz-slim-ok::before {
    content: "\f4fc";
    flex: 0 0 auto;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 14px;
    line-height: 20.8px;
    color: #bff5ef;
}
.mz-slim .mz-slim-card .mz-slim-ok > * {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    color: #bff5ef;
}
.mz-slim .mz-slim-card .mz-slim-ok > * + * {
    display: none;
}
.mz-slim .mz-slim-card .mz-slim-ok > h6:first-child {
    display: none;
}
.mz-slim .mz-slim-card .mz-slim-ok > h6:first-child + * {
    display: block;
}
.mz-slim-human {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
    padding: 20px 26px;
    border: 1px solid rgba(var(--c-greenish), .35);
    border-radius: 14px;
    background: rgba(var(--c-greenish), .08);
}
.mz-slim-human::before {
    content: "\f004";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    color: rgb(var(--c-greenish));
}
.mz-slim .mz-slim-human p {
    margin: 0;
    color: #e6e3f2;
}
.mz-slim-human strong {
    color: #fff;
}
.mz-slim-human > p:first-child {
    flex: 1 1 0;
    min-width: 0;
}
.mz-slim-human > p + p {
    flex: 0 0 auto;
    margin-left: auto;
}
/* kaarten even breed als de intro: de site geeft tot 1199px elke .row > div 24px padding (sizing.css); hier de gewone halve gutter, zodat kaarten, balk en intro op dezelfde lijn staan */
.mz-slim .mz-slim-row > div {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
@media (max-width: 991px) {
    .mz-slim-intro h2 {
        margin-bottom: 1rem;
        font-size: 1.875rem;
    }
    .mz-slim-row {
        margin-top: 2rem;
    }
    .mz-slim-human {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 14px;
        padding: 20px;
    }
    .mz-slim-human > p + p {
        flex: 1 0 100%;
        margin-left: 44px;
    }
}

/* ---------- Negen waardeblokken, één systeem ---------- */
.mz-negen-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.mz-negen-intro h6 {
    margin-bottom: .75rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(var(--c-purple));
}
.mz-negen-intro > *:last-child,
.mz-negen-content > *:last-child,
.mz-negen-outro p {
    margin-bottom: 0;
}
/* één paneel, lijnen tussen de vakken via box-shadow (buitenranden vallen weg door overflow) */
.mz-negen-grid {
    margin-top: 3rem;
    overflow: hidden;
    border: 1px solid #e3e6ee;
    border-radius: var(--mz-radius);
    background: #fff;
    box-shadow: var(--s-shadow);
    counter-reset: mz-negen;
}
.mz-negen-row {
    --bs-gutter-x: 0;
    margin: 0;
}
.mz-negen-row > .mz-negen-col {
    padding-left: 0;
    padding-right: 0;
}
.mz-negen-col {
    box-shadow: 1px 0 0 #e3e6ee, 0 1px 0 #e3e6ee;
    counter-increment: mz-negen;
}
.mz-negen-card {
    position: relative;
    height: 100%;
    padding: 2rem 2rem 2.25rem;
    transition: background-color .2s ease-in-out;
}
.mz-negen-card::before {
    content: counter(mz-negen, decimal-leading-zero);
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #b7bccb;
}
.mz-negen-card:hover {
    background-color: rgba(var(--c-purple), .03);
}
.mz-negen-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    background: rgba(var(--c-purple), .08);
    color: rgb(var(--c-purple));
    font-size: 1.15rem;
    transition: all .2s ease-in-out;
}
.mz-negen-card:hover .mz-negen-icon {
    background: var(--mz-grad);
    color: #fff;
}
.mz-negen-content h3 {
    margin-bottom: .4rem;
    font-size: 1.15rem;
    line-height: 1.3;
}
.mz-negen .mz-negen-content p {
    margin-bottom: .9rem;
    font-size: .95rem;
    line-height: 1.5;
    color: #5f6475;
}
.mz-negen-content ul {
    margin: 0;
    padding-left: 1.5rem;
}
.mz-negen .mz-negen-content ul li {
    margin: 0;
    padding: .15rem 0;
    font-size: .9rem;
    line-height: 1.45;
}
.mz-negen .mz-negen-content ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", FontAwesome;
    font-weight: 900;
    left: -1.5rem;
    top: .2rem;
    font-size: .8rem;
    color: rgb(var(--c-greenish));
}
.mz-negen-outro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(var(--c-purple), .2);
    border-radius: var(--mz-radius);
    background: rgba(var(--c-purple), .04);
}
.mz-negen-outro p:not(:has(.btn)) {
    font-size: 1.05rem;
}
.mz-negen-outro .btn {
    white-space: nowrap;
}
@media (max-width: 991px) {
    .mz-negen-grid {
        margin-top: 2rem;
    }
    .mz-negen-card {
        padding: 1.75rem 1.5rem 2rem;
    }
    .mz-negen-card::before {
        right: 1.5rem;
    }
    .mz-negen-outro {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }
}

/* ---------- Onze werkwijze: traject in fases ---------- */
.mz-ww-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.mz-ww-intro h2 {
    font-size: 2.375rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.mz-ww-intro > *:last-child {
    margin-bottom: 0;
}
.mz-ww-row {
    position: relative;
    row-gap: 2.5rem;
    margin-top: 3.5rem;
}
.mz-ww-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border: 2px solid rgb(var(--c-purple));
    border-radius: 50%;
    background: #fff;
    color: rgb(var(--c-purple));
    font-weight: 800;
}
.mz-ww-step:first-child .mz-ww-num {
    background: rgb(var(--c-purple));
    color: #fff;
}
.mz-ww-step h3 {
    margin-bottom: .5em;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.25;
}
.mz-ww-step .contentLayout ul {
    margin: 0;
    padding: 0;
}
.mz-ww-step .contentLayout ul li {
    margin: 0;
    padding: 4px 0 4px 22px;
    font-size: 14px;
    color: #5f6475;
}
.mz-ww-step .contentLayout ul li::before {
    content: "\f00c";
    left: 0;
    top: 4px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 14px;
    color: rgb(var(--c-greenish));
}
@media (min-width: 992px) {
    .mz-ww-row::before {
        content: "";
        position: absolute;
        top: 26px;
        left: 6%;
        right: 6%;
        border-top: 2px dashed #cfd3de;
    }
}
@media (max-width: 991px) {
    .mz-ww-intro h2 {
        font-size: 1.875rem;
    }
    .mz-ww-row {
        margin-top: 2.5rem;
    }
}
/* mobiel: verticale tijdlijn, nummer links en tekst ernaast, stippellijn tussen de nummers */
@media (max-width: 767px) {
    .mz-ww-row {
        row-gap: 0;
    }
    .mz-ww-step {
        position: relative;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        column-gap: 18px;
        padding-bottom: 2rem;
    }
    .mz-ww-step:last-child {
        padding-bottom: 0;
    }
    .mz-ww-step::before {
        content: "";
        position: absolute;
        top: 54px;
        bottom: 0;
        left: calc(var(--c-dis) * 1.5 + 26px);
        border-left: 2px dashed #cfd3de;
    }
    .mz-ww-step:last-child::before {
        display: none;
    }
    .mz-ww-num {
        margin: 0;
    }
    .mz-ww-step > .contentLayout {
        padding-top: 4px;
    }
}

/* ---------- Wat verandert er: procesketen (klikbaar, radio + label) ---------- */
/* LET OP: de pagina-CSS-generator bewaart alleen regels die bij het genereren
   matchen (dus alleen stap 1 :checked), plus elke selector waar een zl_-class in
   staat. Daarom staat :not(.zl_keep) in alle statusregels hieronder: het
   verandert niets aan de match, maar houdt de regel in de gegenereerde CSS. */
.mz-keten-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mz-keten-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.mz-keten-intro h6 {
    margin-bottom: .75rem;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(var(--c-greenish));
}
.mz-keten-intro h2 {
    font-size: 2.375rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}
.mz-keten .mz-keten-intro p {
    font-size: 1rem;
    line-height: 1.6;
    color: #b9b6c9;
}
.mz-keten-intro:not(.zl_keep) > *:last-child {
    margin-bottom: 0;
}

/* keten */
.mz-keten-nav {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 3rem 0 2rem;
}
.mz-keten-lbl {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    margin: 0;
    padding: 0 .25rem;
    cursor: pointer;
    color: #8e89a8;
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
    transition: color .25s ease;
}
.mz-keten-lbl::before {
    content: "";
    position: absolute;
    top: 27px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #34304a;
    transition: background .35s ease;
}
.mz-keten-nav > .mz-keten-lbl:first-child::before {
    display: none;
}
.mz-keten-dot {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 56px;
    min-width: 56px;
    height: 56px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid #3a3552;
    border-radius: 50%;
    background: #211d30;
    color: #b9b6c9;
    font-size: 1.15rem;
    font-weight: 800;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.mz-keten-lbl:hover {
    color: #fff;
}
.mz-keten-lbl:hover .mz-keten-dot {
    border-color: rgb(var(--c-greenish));
    color: #fff;
}
.mz-keten-r2:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r3:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r3:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3 .mz-keten-dot,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3 .mz-keten-dot,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4 .mz-keten-dot,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3 .mz-keten-dot,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4 .mz-keten-dot,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-6 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-6 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-7 .mz-keten-dot {
    border-color: rgb(var(--c-greenish));
    color: rgb(var(--c-greenish));
}
.mz-keten-r2:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2::before,
.mz-keten-r3:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2::before,
.mz-keten-r3:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3::before,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2::before,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3::before,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4::before,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2::before,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3::before,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4::before,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5::before,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2::before,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3::before,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4::before,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5::before,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-6::before,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2::before,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3::before,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4::before,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5::before,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-6::before,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-7::before,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2::before,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3::before,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4::before,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5::before,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-6::before,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-7::before,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-8::before {
    background: rgb(var(--c-greenish));
}
.mz-keten-r1:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1,
.mz-keten-r2:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2,
.mz-keten-r3:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-6,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-7,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-8 {
    color: #fff;
}
.mz-keten-r1:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r2:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r3:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-3 .mz-keten-dot,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-4 .mz-keten-dot,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-5 .mz-keten-dot,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-6 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-7 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-nav .mz-keten-lbl-8 .mz-keten-dot {
    border-color: transparent;
    border-radius: 50%;
    background: var(--mz-grad) border-box;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(var(--c-greenish), .25);
}
.mz-keten-r1:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-1 .mz-keten-dot,
.mz-keten-r2:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-2 .mz-keten-dot,
.mz-keten-r3:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-3 .mz-keten-dot,
.mz-keten-r4:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-4 .mz-keten-dot,
.mz-keten-r5:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-5 .mz-keten-dot,
.mz-keten-r6:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-6 .mz-keten-dot,
.mz-keten-r7:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-7 .mz-keten-dot,
.mz-keten-r8:not(.zl_keep):focus-visible ~ .mz-keten-nav .mz-keten-lbl-8 .mz-keten-dot {
    outline: 2px solid rgb(var(--c-greenish));
    outline-offset: 3px;
}
.mz-keten-r1:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-1,
.mz-keten-r2:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-2,
.mz-keten-r3:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-3,
.mz-keten-r4:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-4,
.mz-keten-r5:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-5,
.mz-keten-r6:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-6,
.mz-keten-r7:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-7,
.mz-keten-r8:not(.zl_keep):checked ~ .mz-keten-panels .mz-keten-panel-8 {
    display: grid;
}

/* paneel */
.mz-keten-panel {
    display: none;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem;
    border: 1px solid #34304a;
    border-radius: 16px;
    background: #211d30;
    animation: mzKetenIn .45s cubic-bezier(.16, 1, .3, 1);
}
@keyframes mzKetenIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.mz-keten-count {
    display: inline-block;
    margin-bottom: .9rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(var(--c-greenish), .12);
    color: rgb(var(--c-greenish));
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mz-keten-main h3 {
    margin-bottom: .5em;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}
.mz-keten .mz-keten-main p {
    font-size: 1rem;
    line-height: 1.6;
    color: #b9b6c9;
}
.mz-keten-main:not(.zl_keep) > *:last-child,
.mz-keten-nu:not(.zl_keep) > *:last-child,
.mz-keten-met:not(.zl_keep) > *:last-child {
    margin-bottom: 0;
}
.mz-keten-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 1.5rem;
}
.mz-keten-nu,
.mz-keten-met {
    padding: 16px 18px;
    border-radius: 12px;
}
.mz-keten-nu {
    background: #2c2240;
}
.mz-keten-met {
    border: 1px solid rgba(var(--c-greenish), .3);
    background: #113a3a;
}
.mz-keten-nu h6,
.mz-keten-met h6 {
    margin-bottom: .35rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mz-keten-nu h6 {
    color: #c9a8f5;
}
.mz-keten-met h6 {
    color: rgb(var(--c-greenish));
}
.mz-keten-nu h6::before,
.mz-keten-met h6::before {
    margin-right: .4rem;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}
.mz-keten-nu h6::before {
    content: "\f00d";
}
.mz-keten-met h6::before {
    content: "\f00c";
}
.mz-keten .mz-keten-nu p,
.mz-keten .mz-keten-met p {
    font-size: .9375rem;
    line-height: 1.5;
}
.mz-keten .mz-keten-nu p {
    color: #d9c9f3;
}
.mz-keten .mz-keten-met p {
    color: #bff5ef;
}
.mz-keten-pager {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.mz-keten-prev,
.mz-keten-next {
    margin: 0;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 700;
    color: #b9b6c9;
    transition: color .2s ease;
}
.mz-keten-next {
    color: rgb(var(--c-greenish));
}
.mz-keten-prev::before {
    content: "\f060";
    margin-right: .5rem;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}
.mz-keten-next::after {
    content: "\f061";
    margin-left: .5rem;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    transition: margin .2s ease;
}
.mz-keten-prev:hover {
    color: #fff;
}
.mz-keten-next:hover::after {
    margin-left: .8rem;
}

/* venster */
.mz-keten-window {
    overflow: hidden;
    border: 1px solid #3a3552;
    border-radius: 14px;
    background: #16131f;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.mz-keten-bar {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid #2a2640;
    background: #1c1829;
}
.mz-keten-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a3552;
}
.mz-keten-shot {
    display: block;
    width: 100%;
    height: auto;
}
/* Zolang de screenshot nog niet geladen is (lazy), houdt de blanke
   placeholder de verhouding van de screenshot aan, zodat het paneel niet
   verspringt bij het inladen. */
.mz-keten-shot.lazy:not(.zl_keep) {
    aspect-ratio: 1720 / 1040;
}
.mz-keten-placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, rgba(var(--c-greenish), .25), transparent 55%), radial-gradient(circle at 80% 90%, rgba(var(--c-purple), .45), transparent 60%), #16131f;
    color: #fff;
}
.mz-keten-placeholder i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: var(--mz-grad);
    font-size: 2.5rem;
    box-shadow: 0 20px 40px rgba(var(--c-purple), .35);
}
.mz-keten-placeholder span {
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #cfcbe0;
}

@media (max-width: 991px) {
    .mz-keten-intro h2 {
        font-size: 1.875rem;
    }
    .mz-keten-nav {
        grid-auto-columns: 88px;
        overflow-x: auto;
        margin: 2rem calc(var(--bs-gutter-x) * -1) 1.5rem;
        padding: 6px var(--bs-gutter-x) 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .mz-keten-nav::-webkit-scrollbar {
        display: none;
    }
    .mz-keten-lbl {
        scroll-snap-align: center;
    }
    .mz-keten-dot {
        width: 50px;
        min-width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    .mz-keten-lbl::before {
        top: 24px;
    }
    .mz-keten-panel {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }
    .mz-keten-window {
        order: -1;
    }
    .mz-keten-window-empty {
        display: none;
    }
}
@media (max-width: 575px) {
    .mz-keten-ba {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mz-keten-panel {
        animation: none;
    }
}

/* ---------- Tekst met 4 iconen: optie als lijst ---------- */
.mz-iconlist {
    border-top: 1px solid #e5e7ee;
}
.mz-iconlist-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: var(--c-dis) 0;
    border-bottom: 1px solid #e5e7ee;
}
.mz-iconlist-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f3ecfc;
    color: rgb(var(--c-purple));
    font-size: 18px;
    line-height: 1;
}
.mz-iconlist-text h2,
.mz-iconlist-text h3,
.mz-iconlist-text h4,
.mz-iconlist-text h5 {
    margin: 0 0 2px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}
.mz-iconlist .mz-iconlist-text p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: #5f6475;
}
.mz-iconlist-text > *:last-child {
    margin-bottom: 0;
}
/* in lijst-weergave geldt de smalle slider-padding van sizing.css (.row-teksticon kolom 3, tot 574px) niet: standaard kolompadding zoals de tekst links */
@media (max-width: 574px) {
    .row.row-teksticon > div.col-12.col-lg-6:nth-child(3):has(> .mz-iconlist) {
        padding-right: calc(var(--c-dis) * 1.5);
        padding-left: calc(var(--c-dis) * 1.5);
    }
}
/* inhoud van de rij compact houden; de scheidingslijnen lopen wel over de volle breedte */
.mz-iconlist-text {
    max-width: 26rem;
}
.bg-darkgrey .mz-iconlist,
.bg-darkgrey .mz-iconlist-item {
    border-color: rgba(255, 255, 255, .12);
}
.bg-darkgrey .mz-iconlist-icon {
    background: rgba(255, 255, 255, .06);
    color: rgb(var(--c-greenish));
}
.bg-darkgrey .mz-iconlist .mz-iconlist-text p {
    color: #b9b6c9;
}

/* ---------- FAQ-plugin: uitvoer-sjabloon overview-twee-koloms.html ---------- */
.zl_faq_2col_row {
    row-gap: 0;
}
/* geneste rij: de site geeft tot 1199px elke .row > div 24px padding (sizing.css), wat hier dubbel inspringt. Terug naar de halve gutter, zodat de FAQ op de buitenkolom uitlijnt */
.zl_faq_2col .zl_faq_2col_row > div {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
.zl_faq_2col_cat {
    margin-top: 2rem;
}
.zl_faq_2col > .zl_faq_2col_cat:first-child {
    margin-top: 0;
}
@media (max-width: 991px) {
    .zl_faq_2col_row > div + div .zl_faq > ul {
        margin-top: 0;
    }
}

/* ---------- Formulier direct in een tekstvak (bv. download-blok): velden even breed als de tekst ---------- */
/* de formbuilder gebruikt een geneste rij; tot 1199px geeft de site elke .row > div 24px padding (sizing.css), wat hier dubbel inspringt */
.contentLayout > .formbuilder-mz .row > div {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

/* ---------- Twee koloms - achtergrond/vlak: kolommen omwisselen ---------- */
/* kolommen omwisselen (alle schermen): tekst 2 links op desktop, bovenaan op mobiel; overige inhoud (plugin 3) onderaan */
.row-twocol-swap > div:nth-child(1) {
    order: 3;
}
.row-twocol-swap > div:nth-child(2) {
    order: 2;
}
.row-twocol-swap > div:nth-child(3) {
    order: 1;
}
.row-twocol-swap > :nth-child(n+4) {
    order: 4;
}
@media (min-width: 992px) {
    /* de tussenruimte tussen de kolommen (sizing.css) wisselt mee van kant */
    .row-twocol-space.row-twocol-swap > div:nth-child(1) {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(3rem - (var(--bs-gutter-x) * .5));
    }
    .row-twocol-space.row-twocol-swap > div:nth-child(3) {
        padding-right: calc(3rem - (var(--bs-gutter-x) * .5));
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
}