/*! Marker  */
.is-style-marker {
    padding: .2em 1em;
    border-left: 5px solid #f9f9f9;
    width: max-content;
}

.is-style-marker.has-primary-color {
    background-color: var(--wp--preset--color--primary-light);
}
.is-style-marker.has-secondary-color {
    background-color: var(--wp--preset--color--secondary-light);
}
.is-style-marker.has-success-color {
    background-color: var(--wp--preset--color--success-light);
}
.is-style-marker.has-warning-color {
    background-color: var(--wp--preset--color--warning-light);
}
.is-style-marker.has-danger-color {
    background-color: var(--wp--preset--color--danger-light);
}
.is-style-marker.has-info-color {
    background-color: var(--wp--preset--color--info-light);
}


/*! Vormen */
.is-style-vorm-card {
    position: relative;
    mask-image: url('/wp-content/uploads/2024/06/blob-primary.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    padding: 1em 0;
    color: white;
    
    overflow: visible;
    z-index: 2;
}
.is-style-vorm-card .card-body {
    padding: 3em 2em !important;
}
.vorm-card {
    position: relative;
    width: 32%;
    background-color: transparent !important;
}
.vorm-card:before {
    content: '';
    position: absolute;
    top: -6px;
    left: -10px;
    width: calc(100% + 10px);
    height: calc(100% + 6px);
    
    mask-image: url('/wp-content/uploads/2024/06/blob-primary.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    z-index: -3;
}
@media (max-width: 1024px) {
    .vorm-card {
        width: 48%;
    }
}
@media (max-width: 768px) {
    .vorm-card {
        width: 100%;
    }
}
.vorm-card.has-primary-background-color, .is-style-puzzel-card.has-primary-background-color, .is-style-media-blob.has-primary-background-color, .is-style-media-blob.has-primary-light-background-color,
.vorm-card.has-secondary-background-color, .is-style-puzzel-card.has-secondary-background-color, .is-style-media-blob.has-secondary-background-color, .is-style-media-blob.has-secondary-light-background-color,
.vorm-card.has-success-background-color, .is-style-puzzel-card.has-success-background-color, .is-style-media-blob.has-success-background-color, .is-style-media-blob.has-success-light-background-color,
.vorm-card.has-warning-background-color, .is-style-puzzel-card.has-warning-background-color, .is-style-media-blob.has-warning-background-color, .is-style-media-blob.has-warning-light-background-color,
.vorm-card.has-danger-background-color, .is-style-puzzel-card.has-danger-background-color, .is-style-media-blob.has-danger-background-color, .is-style-media-blob.has-danger-light-background-color,
.vorm-card.has-info-background-color, .is-style-puzzel-card.has-info-background-color, .is-style-media-blob.has-info-background-color, .is-style-media-blob.has-info-light-background-color,
.vorm-card.has-purple-background-color, .is-style-puzzel-card.has-purple-background-color, .is-style-media-blob.has-purple-background-color, .is-style-media-blob.has-purple-light-background-color
 {
    background-color: transparent !important;
}
.vorm-card.has-primary-background-color:before {
    background-color: var(--wp--preset--color--primary-light);
}
.vorm-card.has-secondary-background-color:before {
    background-color: var(--wp--preset--color--secondary-light);
}
.vorm-card.has-success-background-color:before {
    background-color: var(--wp--preset--color--success-light);
}
.vorm-card.has-warning-background-color:before {
    background-color: var(--wp--preset--color--warning-light);
}
.vorm-card.has-danger-background-color:before {
    background-color: var(--wp--preset--color--danger-light);
}
.vorm-card.has-info-background-color:before {
    background-color: var(--wp--preset--color--info-light);
}
.vorm-card.has-purple-background-color:before {
    background-color: var(--wp--preset--color--purple-light);
}

.vorm-card.has-primary-light-background-color:before {
    background-color: var(--wp--preset--color--primary);
}
.vorm-card.has-secondary-light-background-color:before {
    background-color: var(--wp--preset--color--secondary);
}
.vorm-card.has-success-light-background-color:before {
    background-color: var(--wp--preset--color--success);
}
.vorm-card.has-warning-light-background-color:before {
    background-color: var(--wp--preset--color--warning-light);
}
.vorm-card.has-danger-light-background-color:before {
    background-color: var(--wp--preset--color--danger);
}
.vorm-card.has-info-light-background-color:before {
    background-color: var(--wp--preset--color--info);
}
.vorm-card.has-purple-light-background-color:before {
    background-color: var(--wp--preset--color--purple);
}


/*! Puzzel card  */
.is-style-puzzel-card {
    position: relative;
    padding-top: 1em;
    color: white;
    border: none;
}
.is-style-puzzel-card:before {
    content: '';
    position: absolute;
    background-image: url('/wp-content/uploads/2024/06/Puzzel-secondary.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
}
.is-style-puzzel-card .card-body {
    padding: 3em 2em !important;
}

/** Border radius  */
.is-style-border-50,
.is-style-border-50 img {
    border-radius: 50px;
    overflow: hidden;
}


/** Media blob  */
.is-style-media-blob {
    position: relative;
    grid-template-columns: 136px auto !important;
}
.is-style-media-blob .wp-block-media-text__media {
    position: relative;
    mask-image: url('/wp-content/uploads/2024/07/blob-4.png');
    mask-size: 126px, 115px;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 126px;
    height: 115px;
    padding: 35px;
    color: white;
    
    overflow: visible;
    z-index: 2;
    margin-top: -15px;
}
.is-style-media-blob .wp-block-media-text__content {
    padding: 0 !important
}
.is-style-media-blob:before {
    content: '';
    position: absolute;
    top: 2px;
    left: -1px;
    width: 132px;
    height: 115px;
    margin-top: -15px;

    mask-image: url('/wp-content/uploads/2024/07/blob-4.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    z-index: -3;
}

.is-style-media-blob.has-primary-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--primary);
}
.is-style-media-blob.has-primary-background-color::before {
    background-color: var(--wp--preset--color--primary-light);
}
.is-style-media-blob.has-secondary-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--secondary);
}
.is-style-media-blob.has-secondary-background-color::before {
    background-color: var(--wp--preset--color--secondary-light);
}
.is-style-media-blob.has-success-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--success);
}
.is-style-media-blob.has-success-background-color::before {
    background-color: var(--wp--preset--color--success-light);
}
.is-style-media-blob.has-warning-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--warning);
}
.is-style-media-blob.has-warning-background-color::before {
    background-color: var(--wp--preset--color--warning-light);
}
.is-style-media-blob.has-danger-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--danger);
}   
.is-style-media-blob.has-danger-background-color::before {
    background-color: var(--wp--preset--color--danger-light);
}
.is-style-media-blob.has-info-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--info);
}
.is-style-media-blob.has-info-background-color::before {
    background-color: var(--wp--preset--color--info-light);
}
.is-style-media-blob.has-purple-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--purple);
}
.is-style-media-blob.has-purple-background-color::before {
    background-color: var(--wp--preset--color--purple-light);
}

.is-style-media-blob.has-secondary-light-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--secondary-light);
}
.is-style-media-blob.has-secondary-light-background-color:before {
    background-color: var(--wp--preset--color--secondary);
}
.is-style-media-blob.has-primary-light-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--primary-light);
}
.is-style-media-blob.has-primary-light-background-color::before {
    background-color: var(--wp--preset--color--primary);
}
.is-style-media-blob.has-success-light-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--success-light);
}
.is-style-media-blob.has-success-light-background-color:before {
    background-color: var(--wp--preset--color--success);
}
.is-style-media-blob.has-warning-light-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--warning-light);
}
.is-style-media-blob.has-warning-light-background-color:before {
    background-color: var(--wp--preset--color--warning);
}
.is-style-media-blob.has-danger-light-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--danger-light);
}
.is-style-media-blob.has-danger-light-background-color:before {
    background-color: var(--wp--preset--color--danger);
}
.is-style-media-blob.has-info-light-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--info-light);
}
.is-style-media-blob.has-info-light-background-color:before {
    background-color: var(--wp--preset--color--info);
}
.is-style-media-blob.has-purple-light-background-color .wp-block-media-text__media {
    background-color: var(--wp--preset--color--purple-light);
}
.is-style-media-blob.has-purple-light-background-color:before {
    background-color: var(--wp--preset--color--purple);
}

@media (max-width: 787px) {
    .is-style-media-blob {
        display: flex;
    flex-direction: column;
    }
}


.is-style-blue-puzzel,
.is-style-green-puzzel {
    position: relative;
    overflow: visible;
}

.is-style-blue-puzzel::after {
    content: '';
    position: absolute;
    background-image: url('/wp-content/uploads/2024/07/Group-262.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30%;
    height: auto;
    min-height: 100px;
    top: 10px;
    left: -30px;
    z-index: 1;
}

.is-style-green-puzzel::after {
    content: '';
    position: absolute;
    background-image: url('/wp-content/uploads/2024/07/Group-263.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    width: 100%;
    height: auto;
    min-height: 100px;
    top: -60px;
    right: 10%;
    z-index: 1;
    transform: rotate(13deg);
}

@media (max-width: 991.99px) {
    .is-style-green-puzzel::after {
        top: 60px;
        right: 10%;
        z-index: 1;
        transform: rotate(-7deg);
        background-size: cover;
    }
}