*, :before, ::after { box-sizing: inherit; }

:root { --villamedia-logo: url('data:image/svg+xml;utf-8,%3Csvg%20width%3D%2280%22%20height%3D%2280%22%20viewBox%3D%220%200%20434%20434%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M306.821%20292.124l-17.149.218-9.551-.217c-5.115%200-7.116-3.114-8.229-6.673l-13.45-40.038%2019.911-50.487h.667l30.027%2091.415c.666%202.669%201.777%205.782-2.226%205.782zm75.178%200c-5.115%200-7.117-3.113-8.228-6.672l-48.712-145.018h-29.581l-38.643%20100.195-33.654-100.195h-7.439v-.016l-.192.016H193.6l-21.551%2055.881-17.25%2043.746h-.667l-30.028-91.414c-.666-2.669-1.779-5.783%202.224-5.783l17.573-.221v-2.225H41.364v2.225l9.787.221c5.116%200%207.118%203.114%208.229%206.674l48.711%20145.016h7.441v.017h22.081l.375-.837%2021.239-55.07%2017.246-43.736h.668l30.025%2091.414c.669%202.669%201.782%205.783-2.222%205.783l-17.572.224v2.222h204.413v-2.222l-9.786-.225z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); }

html { box-sizing: border-box; -webkit-hyphenate-character: '-';}

html, body { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

section, article, figure, figcaption, main, aside { display: block; }

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, fieldset, legend, figure, figcaption { margin: 0; padding: 0; }

body { font-family: 'ff-meta-serif-web-pro', serif; font-weight: 500; font-size: 18px; line-height: 27px; }
h1, h2, h3, h4 { font-family: 'ff-meta-serif-web-pro', serif; font-weight: 700; }

img { display: block; max-width: 100%; width: auto; height: auto; }
img[width="16"] { width: 16px; max-width: 16px; }
img[height="16"] { height: 16px; }
img[width="30"] { width: 30px; max-width: 30px; }
img[height="30"] { height: 30px; }
img[width="40"] { width: 40px; max-width: 40px; }
img[height="40"] { height: 40px; }
img[width="55"] { width: 55px; max-width: 55px; }
img[height="55"] { height: 55px; }

table { border-collapse: collapse; }
th, td { text-align: left; }
table > tbody > tr > th, table > tbody > tr > td { vertical-align: top; }
table > tbody > tr > th { text-align: left; padding: 5px 1em 5px 0; }
table > tbody > tr > td { padding: 5px 0; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

[tabindex="-1"] { outline: none; }

ul { list-style: square; }

hr { border: none; margin: 30px 0; border-top: 3px solid #000; }

textarea, input, button, select { font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 16px; font-weight: inherit; line-height: inherit; border: none; }
textarea, input { padding: .5em; }
button, .call-to-action, .button, .form-element > input[type="submit"] { display: block; width: 100%; margin: 0; padding: 10px 1em; line-height: 30px; text-align: center; text-decoration: none; background: #0D0D0F; color: #fff; -webkit-appearance: none; cursor: pointer; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 15px; font-weight: 500; }
button:disabled, .button:disabled, .form-element > input[type="submit"]:disabled { opacity: .3; cursor: default; }
button:hover, button:focus, .call-to-action:hover, .call-to-action:focus, .button:hover, .button:focus, .form-element > input[type="submit"]:hover, .form-element > input[type="submit"]:focus { background-color: #666; color: #fff; }
button:disabled:hover, button:disabled:focus, .button:disabled:hover, .button:disabled:focus, .form-element > input[type="submit"]:disabled:hover, .form-element > input[type="submit"]:disabled:focus, .secondary { background-color: #0D0D0F; }
.primary { background: #E70C00; }
.primary:hover, .primary:focus { background: #F16D66; }

.delete_link { float: right; color: red; display: inline-block; padding: 0 1em; line-height: 50px; }
.delete_link:hover, .delete_link:focus { color: #fff; background: red; }
.red { color: #E70C00; }

svg { fill: currentColor; display: inline-block; }

iframe { display: block; width: 100%; }

[data-handler] * { pointer-events: none; }

a { color: inherit; }
a:hover, a:focus { color: #E70C00; }
a:active { text-decoration: none; }
a.picture-extra figcaption { text-decoration: none; }

figcaption, .figcaption { font-size: 14px; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; line-height: 20px; font-weight: 300;}
    figcaption > .copyright { font-style: italic; }

.hiddenFields { position: absolute; width: 0; height: 0; }

.container { position: relative; margin: 0 auto; padding: 0 10px; }
@media (min-width: 30em) {
.container { padding: 0 20px; }
}
@media (min-width: 60em) {
.container { max-width: 1260px; padding: 0 30px; }
}

.content { transition: .2s ease-out opacity; }
.content.is-loading { opacity: .3; }

.container > h1, .content > h1 { margin: 15px 0 30px; line-height: 44px; font-size: 36px; background: #fff; }
.container > h1.with-mini-searchbar, .content > h1.with-mini-searchbar { padding-right: 60px; }

.content > .intro { margin: 0 0 27px; }

.header-intro { position: relative; z-index: 1; background: #efefef; box-shadow: 0 -3px 3px rgba(0, 0, 0, .2) inset; }
    .header-intro > a { display: block; padding: 10px 10px 20px; }
        .header-intro > a > img { display: block; width: 100%; max-width: 728px; height: auto; margin: 0 auto; }
.header-intro .container .banner-left {width: 728px; float:left; margin: 10px 0 20px 0;}
.header-intro .container .banner-right {width: 364px; float:right; margin: 10px 0 20px 0;}
.header-container { position: relative; z-index: 5; top: 0; background: #fff; }
    .header-container span.vac_plaatsen { position: absolute; display: block; right: 180px; white-space: nowrap; top: 15px; }
    .header-container span.vac_plaatsen a { font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;font-size: 12px; text-decoration: none; text-transform: uppercase; }

@media (max-width: 40em){
    .header-container span.vac_plaatsen { display: none; }
}

@supports (position: -webkit-sticky) or (position: sticky) {
@media (min-height: 30em) {
.header-container { position: -webkit-sticky; position: sticky; }
}
}
    .header { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 60px; }

.logo { float: left; font-size: 100%; }
    .logo > a { display: block; margin: 10px 0; text-decoration: none; }
        .logo > a > svg { display: inline-block; vertical-align: middle; width: 40px; height: 40px; }
            .logo > a > svg > path:last-child { transform-origin: 50% 50%; will-change: transform; }
        .logo > .is-loading {  }
            .logo > .is-loading > svg > path:last-child { animation: rotate 1s infinite; }
        .logo > a > img { display: none; }
@media (min-width: 14.5em) {
        .logo > a > img { display: inline-block; width: 99px; height: 35px; vertical-align: middle; }
}
@media (min-width: 30em) {
        .logo > a > svg { width: 80px; height: 80px; }
}
@keyframes rotate { to { transform: rotate(360deg); } }

.skip-links { position: absolute; bottom: 20px; left: 44px; list-style: none; pointer-events: none; line-height: 13px; }
@media (min-width: 30em) {
.skip-links { left: 84px; }
}
    .skip-links > li {  }
        .skip-links > li > a { position: absolute; z-index: -1; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; background: #fff; color: #fff; text-decoration: none; white-space: nowrap; }
        .skip-links > li > a::before { content: '⇒ '; }
        .skip-links > li > a:focus { z-index: 0; color: #E70C00; pointer-events: auto; }

@supports (position: sticky) or (position: -webkit-sticky) {
@media (min-height: 30em) {
#content { padding-top: 101px; margin-top: -101px; pointer-events: none; }
    #content > * { pointer-events: auto; }
h2[id]::before, a[name]::before { display: block; content: ''; height: 101px; margin: -101px 0 0; }
}
@media (min-height: 30em) and (min-width: 30em) {
#content { padding-top: 141px; margin-top: -141px; }
h2[id]::before, a[name]::before { height: 141px; margin: -141px 0 0; }
}
}

.user-nav { position: absolute; bottom: 15px; right: 0; display: flex; list-style: none; }
    .user-nav > a { position: relative; display: block; min-width: 30px; margin-left: 10px; line-height: 30px; text-align: center; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 12px; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
    .user-nav > a:hover, .user-nav > a:focus {  }
    .user-nav > a > span:first-child { display: none; }
        .user-nav > a > svg { vertical-align: middle; }
        .user-nav > a > em { position: absolute; right: 0; bottom: 0; padding: 1px 3px; line-height: 12px; font-size: 8px; font-style: normal; background: #E70C00; color: #fff; border-radius: 8px; }
@media (min-width: 32em) {
        .user-nav > a > span:first-child { display: inline-block; }
        .user-nav > .user-nav-fav > svg { display: none; }
        .user-nav > a > em { position: static; }
}
        .user-nav > a > .avatar { min-height: 30px; min-width: 30px; vertical-align: middle; }
            .user-nav > a > .avatar > img, .user-nav > a > .avatar > svg { vertical-align: middle; display: inline-block; }

.global-search { display: flex; position: absolute; top: 10px; right: 80px; left: 42px; pointer-events: none; }
@media (min-width: 30em) {
.global-search { right: 0; left: 190px; }
}
@media (min-width: 39em) {
.global-search { left: auto; width: 20em; }
}
    .global-search > label { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 0; height: 0; overflow: hidden; pointer-events: auto; }
    .global-search > input { margin: 0 0 0 auto; height: 40px; line-height: 40px; width: 0; padding-right: 30px; border: none; background: #fff; border-radius: 0; font-family: 'ff-meta-serif-web-pro', serif; font-size: 16px; -webkit-appearance: none; transition: .2s ease-out width; pointer-events: auto; will-change: width, border; }
@media (min-width: 26em) {
    .global-search > input { width: 10em; border: 1px solid #ccc; }
}
    .global-search > input:focus { width: 100%; border: 1px solid #ccc; }
    .global-search:focus-within > input { width: 100%; border: 1px solid #ccc; }
    .global-search > button { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 30px; padding: 0; background: transparent; color: #0D0D0F; pointer-events: auto; }
        .global-search > button > svg { margin: -4px; }

.topic-menu-container { position: relative; z-index: 2; background: #fff; }
@supports (position: sticky) or (position: -webkit-sticky) {
@media (min-height: 30em) {
.topic-menu-container { position: -webkit-sticky; position: sticky; top: 60px; }
}
@media (min-height: 30em) and (min-width: 30em) {
.topic-menu-container { top: 100px; }
}
}
.wordabo { background: #F5F5F5; padding: .5em; margin-top: .5em; }

.topic-menu { position: relative; border-bottom: 3px solid #000; }
    .topic-menu > div > nav { display: flex; clear: both; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 16px; line-height: 28px; overflow: auto; -webkit-overflow-scrolling: touch; }
    .topic-menu-container.login-active > div > div > div > nav, .topic-menu-container.user-menu-active > div > div > div > nav { overflow: hidden; height: 28px; }
    .topic-menu-container.login-active > div > div > div > nav > ul, .topic-menu-container.user-menu-active > div > div > div > nav > ul, .topic-menu-container.login-active > div > div > button, .topic-menu-container.user-menu-active > div > div > button { display: none; }
        .topic-menu > div > nav > div { flex: 1 0 auto; }
        .topic-menu > div > nav > ul { display: flex; flex: 0 0 auto; list-style: none; align-items: baseline; }
            .topic-menu > div > nav > ul > li { padding-right: 15px; }
            .topic-menu > div > nav > ul + div + ul > li { padding-right: 0; padding-left: 15px; }
                .topic-menu > div > nav > ul > li > a { display: block; color: #000; text-decoration: none; white-space: nowrap; font-weight: 700; }
                .topic-menu > div > nav > ul > li > a.is-current, .topic-menu > div > nav > ul > li > a:hover, .topic-menu > div > nav > ul > li > a:focus { color: #E70C00; }

.user-menu { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; opacity: 0; }
.user-logged-in-menu { top: 31px; }
@media (min-width: 30em) {
.user-logged-in-menu { width: 14em; left: auto; right: 0; }
.user-logged-out-menu { width: 20em; left: 50%; margin-left: -10em; }
}
.user-logged-out-menu.is-invalid { animation: wiggle .15s 0s 6; }
@keyframes wiggle {
    33.3% { transform: translateX(3px); }
    66.6% { transform: translateX(-3px); }
}
.no-js .user-menu { visibility: visible; opacity: 1; }
    .no-js .user-menu > form { display: none; margin-top: 28px; border-top: 3px solid #000; }
    .no-js .user-menu.always-show-form .tabs { display: flex; }
    .no-js .user-menu.always-show-form > form { display: block; }
    .no-js .user-menu > form:target { display: block; }
    .no-js .user-menu > .submenu { display: none; }
    .no-js .user-menu > .submenu:target { display: block; }
.login-active > div > div > .user-logged-out-menu, .user-menu-active > div > div > .user-logged-in-menu { visibility: visible; opacity: 1; }
    .user-menu > .tabs {  }
        .user-menu > .tabs > li:nth-child(3) { margin-right: -1em; margin-left: auto; border-left: 1px solid #D8D8D8; }
    .user-menu > form { padding: 1px 20px 20px; border: 1px solid #D8D8D8; border-top: none; background: #fff; }
        .user-menu > form > p { margin: 20px 0; }
    .user-menu > div { padding: 10px 20px 0; border: 1px solid #D8D8D8; border-top: none; background: #fff; }
@supports (position: -webkit-sticky) or (position: sticky) {
    @media (min-height: 30em) {
        .user-menu > form, .user-menu > div { max-height: calc(100vh - 161px); overflow: auto; -webkit-overflow-scrolling: touch; }
    }
}

.topic-menu-container + .container { }
.topic-menu-container.login-active + .container, .topic-menu-container.user-menu-active + .container { opacity: .3; filter: blur(4px); }

.overflow-menu-toggle { display: none; position: absolute; top: 0; right: 0; width: auto; height: 28px; line-height: 28px; font-size: 16px; font-weight: 700; padding: 0 0 0 20px; background: transparent linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 20px); color: #000; }
.overflow-menu-toggle.is-active { display: block; }
.overflow-menu-toggle:focus { outline: none; }
.overflow-menu-toggle:hover, .overflow-menu-toggle:focus { background-color: transparent; color: #E70C00; }
    .overflow-menu-toggle > svg { vertical-align: middle; }
        .overflow-menu-toggle > svg > path { stroke: currentColor; }

.overflow-menu { position: absolute; top: 31px; right: 0; display: none; list-style: none; }
.overflow-menu.is-active { display: block; }
.login-active > div > div > .overflow-menu.is-active, .user-menu-active > div > div > .overflow-menu.is-active { display: none; }
    .overflow-menu > li { border-bottom: 3px solid #000; background: #fff; }
        .overflow-menu > li > a { display: block; padding: 0 5px; text-align: right; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 16px; font-weight: 700; line-height: 28px; text-decoration: none; }
        .overflow-menu > li > a.is-current { color: #E70C00; }
        @supports (animation: reveal .15s ease-in forwards) {
            .overflow-menu > li { opacity: 0; transform: translateY(-5px); animation: reveal .05s ease-in forwards; }
            .overflow-menu > li + li { animation-delay: .01s; }
            .overflow-menu > li + li + li { animation-delay: .02s; }
            .overflow-menu > li + li + li + li { animation-delay: .03s; }
            .overflow-menu > li + li + li + li + li { animation-delay: .04s; }
            .overflow-menu > li + li + li + li + li + li { animation-delay: .05s; }
            .overflow-menu > li + li + li + li + li + li + li { animation-delay: .06s; }
            .overflow-menu > li + li + li + li + li + li + li + li { animation-delay: .07s; }
            .overflow-menu > li + li + li + li + li + li + li + li + li { animation-delay: .08s; }
            .overflow-menu > li + li + li + li + li + li + li + li + li + li { animation-delay: .09s; }
        }
        @keyframes reveal { to { opacity: 1; transform: translateY(0); } }

.meta { font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 300; font-size: 16px; line-height: 28px; color: #666; }

.locked {  }
    .locked > svg { width: 16px; height: 16px; }

@media (min-width: 47.5em) {
.main.with-filters { display: grid; grid-template-columns: 1.85fr 1fr; grid-gap: 30px; }
.main.without-sidebar { grid-template-columns: 1fr; }
}
@media (min-width: 60em ) {
.main { display: grid; grid-template-columns: 1.85fr 1fr; grid-gap: 60px; }
.main.without-sidebar {  }
.main.with-filters { grid-template-columns: 1fr 2.5fr 1fr; }
.main.with-filters.without-sidebar { grid-template-columns: 1fr 3.5fr; }
}
    .main.with-submenu > .submenu { display: none; }

.account-overzicht { display: block; padding-top: 2em; }

@media (min-width: 47.5em ) {
.main.with-submenu { display: grid; grid-template-columns: 1fr 3.5fr; grid-gap: 45px; }
    .main.with-submenu > .submenu { display: block; }
.main.with-submenu.with-sidebar { grid-template-columns: 1fr 2.5fr 1fr; }
}

/* Grid fallback using floats */
@media (min-width: 47.5em) {
.main.with-filters > .content { float: left; width: 65%; }
.main.with-filters > .sidebar { float: right; width: calc(35% - 30px); margin-left: 30px; }
.main.without-sidebar > .content { float: none; width: auto; }
.main > .submenu { float: left; margin-right: 30px; }
.main.with-submenu > .submenu { width: calc(22% - 30px); }
.main.with-submenu > .content { float: left; width: 78%; }
.main.with-submenu.with-sidebar > .sidebar { width: calc(22% - 30px); }
.main.with-submenu.with-sidebar > .content { width: 56%; }
}
@media (min-width: 60em ) {
.filters { float: left; }
.filters, .main > .submenu { margin-right: 60px; }
.sidebar { margin-left: 60px; }
.main > .content { float: left; width: 65%; }
.main > .sidebar { float: right; width: calc(35% - 60px); }
.main.with-filters > .filters { width: calc(22% - 60px); }
.main.with-filters > .content { width: 56%; }
.main.with-filters > .sidebar { width: calc(22% - 60px); }
.main.with-filters.without-sidebar > .content { width: 78%; }
.main.with-submenu > .submenu { width: calc(22% - 60px); }
.main.with-submenu.with-sidebar > .sidebar { width: calc(22% - 60px); }
}
@supports (grid-template-columns: 1.85fr 1fr) {
.filters { float: none !important; width: auto !important; margin-right: 0 !important; }
.submenu { float: none !important; width: auto !important; margin-right: 0 !important; }
.content { float: none !important; width: auto !important; }
.sidebar { float: none !important; width: auto !important; margin-left: 0 !important; }
}
/* End Grid fallback */

.submenu { line-height: 24px;  }
    .submenu > ul { margin: 0 0 18px; list-style: none; font-size: 15px; }
        .submenu > ul > li { position: relative; padding-left: 15px; }
            .submenu > ul > li > a { text-decoration: none; }
            .submenu > ul > li > a::after { content: ''; position: absolute; top: 8px; left: 0; height: 8px; width: 8px; border-bottom: 2px solid #9B9B9B; border-right: 2px solid #9B9B9B; transform: rotate(-45deg); }
            .submenu > ul > li > a:hover::after, .submenu > ul > li > a:focus::after { border-color: #E70C00; }
            .submenu > ul > li > a.is-current { font-weight: 600; }
            .submenu > ul > li > a.is-current::after { border-color: #000; }
    .submenu > h2 { font-size: 15px; }
    .submenu > .close-submenu { position: absolute; top: 0; right: 1px; width: 40px; height: 40px; background: none; color: #000; }
    .submenu > .close-submenu::after { content: ''; position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; }
        .submenu > .close-submenu > svg { display: block; }

.filters { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; padding: 20px 20px 20px 20px; background: #fff; transition: .2s ease-out transform; transform: translateX(-100%); will-change: transform; }
.filters:target, .filters.is-active { transform: translateX(0); }
@media (min-width: 60em) {
.filters { position: static; padding: 0; transform: none; transition: none; z-index: auto; }
}

.filters-header { position: absolute; top: 0; right: 0; left: 0; z-index: 1; padding: 20px; display: flex; justify-content: space-between; align-items: baseline; background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) no-repeat center bottom; background-size: 100% 20px; }
    .filters-header > button { width: auto; background: none; color: #000; }
@media (min-width: 60em) {
.filters-header { display: none; }
}

.filters-body { position: absolute; top: 70px; right: 20px; bottom: 70px; left: 20px; overflow: auto; -webkit-overflow-scrolling: touch; }
    .filters-body > h2 { font-weight: 700; font-size: 20px; }
    .filters-body > ul { margin: 5px 0 25px 0; list-style: none; }
    .filters-body > .caption { position: absolute; top: 5px; width: 100%; line-height: 40px; white-space: nowrap; }
        .filters-body > .caption > a { position: absolute; top: 0; width: 40px; height: 40px; text-align: center; }
        .filters-body > .caption > a.prev { left: 0; }
        .filters-body > .caption > a.next { right: 0; }
            .filters-body > .caption > a > svg { vertical-align: middle; }
    .filters-body > .caption + h2 { margin: 10px 0; padding: 0 50px; text-align: center; font-weight: 500; font-size: 18px; }
    .filters-body > table { margin: 5px 0 25px 0; width: 100%; }
        .filters-body > table > thead > tr > th { text-align: center; }
        .filters-body > table > tbody > tr > td { text-align: center; }
        .filters-body > table > tbody > tr > td.other-month { opacity: .3; }
            .filters-body > table > tbody > tr > td > a { display: block; }
    .filters-body > fieldset { border: none; }
        .filters-body > fieldset > legend { font-weight: 700; font-size: 20px; color: inherit; }
        .filters-body > fieldset > ul { margin: 5px 0 25px 0; list-style: none; }
            .filters-body > fieldset > ul > li { }
                .filters-body > fieldset > ul > li > label { position: relative; display: block; cursor: pointer; padding: 10px 0; line-height: 17px; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 16px; font-weight: 400; }
                    .filters-body > fieldset > ul > li > label > input:checked, .filters-body > fieldset > ul > li > label > input:not(:checked) { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
                    .filters-body > fieldset > ul > li > label > input:checked + span, .filters-body > fieldset > ul > li > label > input:not(:checked) + span { display: block; padding-left: 29px; }
                    .filters-body > fieldset > ul > li > label > input:checked + span::before, .filters-body > fieldset > ul > li > label > input:not(:checked) + span::before { content: ''; width: 18px; height: 18px; position: absolute; top: 9px; left: 2px; }
                    .filters-body > fieldset > ul > li > label > input:not(:checked) + span::before { background: #fff; border: 1px solid #D8D8D8; box-shadow: 0 1px 2px rgba(0, 0, 0, .25) inset; }
                    .filters-body > fieldset > ul > li > label > input:checked + span::before { background: #E70C00; }
                    .filters-body > fieldset > ul > li > label > input:checked:focus + span::before { box-shadow: 0 0 0 1px #000; }
                    .filters-body > fieldset > ul > li > label > input:not(:checked):focus + span::before { box-shadow: 0 1px 2px rgba(0, 0, 0, .25) inset, 0 0 0 1px #000; }
                    .filters-body > fieldset > ul > li > label > input[type="radio"]:checked + span::before, .filters-body > fieldset > ul > li > label > input[type="radio"]:not(:checked) + span::before { border-radius: 50%; }
@media (min-width: 60em) {
.filters-body { position: static; }
}

.filters-footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: 90px; padding: 20px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 20px); }
@media (min-width: 60em) {
.filters-footer { position: relative; position: -webkit-sticky; position: sticky; bottom: 0; padding: 0; height: auto; background: none; padding: 20px 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 20px); }
}
.has-js form.is-enhanced > .filters-footer { opacity: 0; visibility: hidden; }

.avatar { position: relative; display: inline-block; }
    .avatar > img { display: block; border-radius: 50%; overflow: hidden; background: #aaa; object-fit: cover; }
    .avatar > .badge { position: absolute; right: 0; bottom: 0; }
    .avatar > .badge + .badge { right: auto; left: 0; }
        .avatar > .badge > img { display: block; }

.favorite { z-index: 1; margin-left: 10px; }
    .favorite > button { width: 40px; height: 40px; line-height: 34px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: none; outline: none; }
    @keyframes spinner { to { transform: rotate(360deg); } }
        .favorite > button > svg { fill: #D8D8D8; vertical-align: middle; }
        .favorite > button.is-favorite > svg { fill: #E70C00; }
        .favorite > button:hover, .favorite > button:focus { border-color: #D8D8D8; }
        .favorite > button.is-favorite:hover, .favorite > button.is-favorite:focus { border-color: #E70C00; }
        .favorite > button.is-loading > svg { visibility: hidden; }
    .favorite > button.is-loading { border-color: #E70C00 #E70C00 #E70C00 transparent; outline: none; animation: spinner .75s linear infinite; }
    .favorite > button.is-favorite.is-loading { border-color: #D8D8D8 #D8D8D8 #D8D8D8 transparent; }

.topic-menu-container + .container > .main:first-child > .sidebar { margin-top: 30px; }

.sidebar > .component { padding: 20px; border: 1px solid #D8D8D8; }
@media (min-height: 30em) {
.sidebar > .component:last-child { position: -webkit-sticky; position: sticky; top: 150px; }
}
    .sidebar > .component > p, .sidebar > .component > .box > p { margin: 20px 0 0; }
    .sidebar > .component > p.remark, .sidebar > .component > .box > p.remark { margin-top: 10px; }
    .sidebar > .component > .links > li:last-child, .sidebar > .component > div > .links > li:last-child { border: none; }

.footer { margin: 30px 0 0; padding: 20px 0; border-top: 3px solid; clear: both; }
    .footer > nav { display: flex; font-size: 15px; }
        .footer > nav > ul { display: flex; flex-direction: column; justify-content: space-between; list-style: none; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 400; }
            .footer > nav > ul > li { position: relative; min-height: 30px; padding-left: 33px; text-transform: uppercase; line-height: 15px; }
            .footer > nav > ul > li.with-gap { margin-top: 10px; }
            .footer > nav > ul > li::before { content: ''; position: absolute; top: -4px; left: 0; width: 23px; height: 23px; background: #E70C00; border-radius: 50%; }
            .footer > nav > ul > li::after { content: ''; position: absolute; top: 4px; left: 6px; height: 8px; width: 8px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); }
                .footer > nav > ul > li > a { text-decoration: none; }
                .footer > nav > ul > li > a:hover, .footer > nav > ul > li > a:focus { }
    .social-media { display: flex; margin: 26px 0 6px; list-style: none; }
        .social-media > li { margin-right: 28px; }
            .social-media > li > a { display: block; width: 32px; line-height: 32px; border-radius: 50%; color: #fff; background: #000; text-align: center; }
            .social-media > li > a:hover, .social-media > li > a:focus { background: #666; }
                .social-media > li > a > svg {  }
@media (min-width: 40em) {
.footer { display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr; margin: 60px 0 0; padding: 50px 0; }
    .footer > div { grid-column-start: 2; grid-column-end: -1; }
}
.magazine { float: left; width: 200px; height: 280px; margin-right: 10px; margin-top: 10px; }

.colofon { font-size: 16px; line-height: 21px; border-top: 1px solid #D8D8D8; padding: 20px 0 0; }
@media (min-width: 40em) {
.colofon { padding-top: 50px; }
}
@media (min-width: 50em) {
.colofon { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; columns: 3; column-gap: 30px; }
}
    .colofon > div  { margin: 0 0 13px; }
        .colofon > div > h2, .colofon > div > h3 { font-size: 100%; }
        .colofon > div > h3:not(:first-child) { margin-top: 13px; }
        .colofon > div > p + p { margin-top: 7px; }
            .colofon > div > p > a { text-decoration: none; }

.footer-copyright { margin: 50px 0; font-size: 12px; line-height: 14px; text-align: center; }

.heading-separator { border-bottom: 3px solid; font-size: 36px; line-height: 34px; }
p + .heading-separator { margin-top: 30px; }

.row { margin: 20px 0; }
.row + p { margin-top: -20px; }
    .row > .component { display: flex; flex-direction: column; margin: 20px 0; break-inside: avoid; }
        .row > .component > h2, .row > .component > h3 { margin-bottom: 10px; }
        .row > .component > :last-child { margin-top: auto; }
@media (min-width: 40em) {
.row { display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr; margin: 30px 0; columns: 2; column-gap: 30px; }
    .row > .component { margin: 0; }
.row + p { margin-top: -30px; }
}

@media (min-width: 60em) {
.row.with-blocks { grid-template-columns: 1fr 1fr 1fr; columns: 3; }
}

@media (min-width: 60em) {
.row.article-stubs { grid-template-columns: 1fr 1fr 1fr; columns: 3; }
}
@media (min-width: 40em) {
.row.article-stubs-highlights { grid-template-columns: 1fr 1fr; columns: 2; }
}

.article-stubs > article { position: relative; margin: 20px 0; overflow: hidden; background: transparent no-repeat center center; background-size: cover; }
@supports (--bg: none) {
    .article-stubs-highlights > article { background-image: var(--image-585); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .article-stubs-highlights > article { background-image: var(--image-1170); }
}
    .article-stubs:first-child:not(.article-stubs-highlights) > .article-stub-default:first-child, h2 + .article-stubs > .article-stub-default:first-child { background-image: var(--image-380); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .article-stubs:first-child:not(.article-stubs-highlights) > .article-stub-default:first-child, h2 + .article-stubs > .article-stub-default:first-child { background-image: var(--image-760); }
}
@media (min-width: 40em) {
    .article-stubs:not(.article-stubs-highlights) > article, .article-stubs:first-child:not(.article-stubs-highlights) > .article-stub-default:first-child, h2 + .article-stubs > .article-stub-default:first-child { background-image: var(--image-380); }
}
@media (min-width: 40em) and (-webkit-min-device-pixel-ratio: 2), (min-width: 40em) and (min-resolution: 192dpi) {
    .article-stubs:not(.article-stubs-highlights) > article, .article-stubs:first-child:not(.article-stubs-highlights) > .article-stub-default:first-child, h2 + .article-stubs > .article-stub-default:first-child { background-image: var(--image-760); }
}
}
/* For when things go bad */
.article-stubs > article[style="--image-585:url('');--image-1170:url('');"], .article-stubs > article[style="--image-380:url('');--image-760:url('');"] { background-image: none !important; }
@media (min-width: 40em) {
.article-stubs > article { margin: 0; text-align: center; }
}
    .article-stubs > article > .article-stub-heading { margin: 0; font-size: 25px; }
@media (min-width: 40em) {
    .article-stubs > article > .article-stub-heading { z-index: 1; margin: 0 30px; }
}
@media (min-width: 50em) {
    .article-stubs-highlights > article > .article-stub-heading { font-size: 38px; line-height: 42px; }
}
        .article-stubs > article > .article-stub-heading > a { text-decoration: none; }
        .article-stubs > article > .article-stub-heading > a::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
        .article-stubs > article > .article-stub-heading > a:hover, .article-stubs > article > .article-stub-heading > a:focus { text-decoration: underline; }
    .article-stubs > article > .topic { margin: 2px 0 0; font-family: 'ff-meta-serif-web-pro', serif; font-weight: 700; text-transform: lowercase; color: #E70C00; pointer-events: none; user-select: none; }
@media (min-width: 40em) {
    .article-stubs > article > .topic { z-index: 1; margin: 2px 20px 20px; }
}

.article-stubs > .article-stub-default { display: flex; flex-direction: column; justify-content: flex-end; }
.article-stubs-highlights > .article-stub-default, .article-stubs:first-child > .article-stub-default:first-child, h2 + .article-stubs > .article-stub-default:first-child { text-align: center; height: 0; padding-top: 100%; }
.article-stubs-highlights > .article-stub-default::after, .article-stubs:first-child > .article-stub-default:first-child::after, h2 + .article-stubs > .article-stub-default:first-child::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 70%; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); }
    .article-stubs-highlights > .article-stub-default > .article-stub-heading, .article-stubs:first-child > .article-stub-default:first-child > .article-stub-heading, h2 + .article-stubs > .article-stub-default:first-child > .article-stub-heading { z-index: 1; margin: 0 30px; color: #fff; }
        .article-stubs-highlights > .article-stub-default > .article-stub-heading > a, .article-stubs:first-child > .article-stub-default:first-child > .article-stub-heading > a, h2 + .article-stubs > .article-stub-default:first-child > .article-stub-heading > a { color: #fff; }
    .article-stubs-highlights > .article-stub-default > .topic, .article-stubs:first-child > .article-stub-default:first-child > .topic, h2 + .article-stubs > .article-stub-default:first-child > .topic { z-index: 1; margin: 2px 20px 20px; }
.article-stubs > article > .article-stub-heading > a { text-decoration: none; }
@media (min-width: 40em) {
.article-stubs > .article-stub-default {  }
.article-stubs > .article-stub-default::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 50%; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); }
.article-stubs:not(.article-stubs-highlights) > .article-stub-default, .article-stubs:not(.article-stubs-highlights):first-child > .article-stub-default:first-child, h2 + .article-stubs:not(.article-stubs-highlights) > .article-stub-default:first-child { height: 0; padding-top: 121.05263158%; }
    .article-stubs > .article-stub-default > .article-stub-heading { color: #fff;  }
        .article-stubs > .article-stub-default > .article-stub-heading > a { color: #fff; }
    .article-stubs > .article-stub-default > .topic { }

.article-stubs > .article-stub-link { display: flex; flex-direction: column; justify-content: center; background-color: #5AB158; }
    .article-stubs > .article-stub-link > .article-stub-heading { color: #fff;  }
        .article-stubs > .article-stub-link > .article-stub-heading > a { color: #fff; }
    .article-stubs > .article-stub-link > .topic { color: #000; }
        .article-stubs > .article-stub-link > a { position: relative; z-index: 1; align-self: center; padding: .5em; }
.article-stubs > .article-stub-link ~ article:last-child { display: none; }

.article-stubs > .article-stub-background { display: flex; flex-direction: column; justify-content: center; background-color: #000; background: var(--bg-color); }
    .article-stubs > .article-stub-background > .article-stub-heading { color: #fff;  }
        .article-stubs > .article-stub-background > .article-stub-heading > a { color: #fff; }
        .article-stubs > .article-stub-background[style^="background-color:#E70C00"] > .topic, .article-stubs > .article-stub-background[style="--bg-color:#E70C00"] > .topic { color: #000; }

.article-stubs > .article-stub-half { display: flex; flex-direction: column; background-position: bottom center; background-size: 100% auto; }
    .article-stubs > .article-stub-half > .article-stub-heading { margin: 0; padding: 20px 30px 0; background: #fff; }
    .article-stubs > .article-stub-half > .topic { margin: 0; padding: 2px 20px 20px; background: #fff; }

.article-stubs > .article-stub-reversed { display: flex; flex-direction: column-reverse; background-position: top center; background-size: 100% auto; }
    .article-stubs > .article-stub-reversed > .article-stub-heading { order: 1; margin: 0; padding: 20px 30px 0; background: #fff; }
    .article-stubs > .article-stub-reversed > .topic { margin: 0; padding: 2px 20px 20px; background: #fff; }
}
#villamedia .container .row.article-stubs h2.article-stub-heading a {
    text-decoration: none;
}
#villamedia .container .row.article-stubs h2.article-stub-heading a:hover {
    text-decoration: underline;
}
.article { line-height: 27px; }
    .article > h1 { margin: 15px 0 30px; font-size: 36px; line-height: 44px;}
    .article.written-article p.intro, .article > .intro { margin: 27px 0; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 20px; font-weight: 500; }
    .article > .company { float: right; margin: 0 0 20px 20px; }
    .article > .picture-404 { float: right; margin: 0 0 20px 20px; width: 25%; min-width: 100px; }
@media (min-width: 60em) {
    .article > .text { text-align: justify; -webkit-hyphens: auto; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-last: always; -webkit-hyphenate-limit-zone: 8%; -moz-hyphens: auto; -moz-hyphenate-limit-chars: 6 3 3; -moz-hyphenate-limit-lines: 2; -moz-hyphenate-limit-last: always; -moz-hyphenate-limit-zone: 8%; -ms-hyphens: auto; -ms-hyphenate-limit-chars: 6 3 3; -ms-hyphenate-limit-lines: 2; -ms-hyphenate-limit-last: always; -ms-hyphenate-limit-zone: 8%; hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; }
    .article.vacature > .text { text-align: left; }
}

.written-article  .text > p:last-child::after { content: ''; position: relative; top: .2em; left: .4em; display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: #000 no-repeat center center; background-image: var(--villamedia-logo); background-size: 16px 16px; }
.article.written-article p.intro.nobottommargin { margin-bottom: 0; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 20px; font-weight: 500; }
.article.written-article span.meta { margin-bottom: 27px; display: block; }

.text {  }
.text + .text { margin: 27px 0 0; }
    .text > h2, .text > .kader > h2 { margin: 27px 0 0; }
    .text > p, .text > ul, .text > ol { margin: 27px 0 0; font-size: 20px; }
    .text > table { margin: 27px 0 0; }
    .text > blockquote { margin: 27px 0 0; padding: 10px 0 10px 60px; text-align: left; font-size: 20px; font-style: italic; font-weight: 600; background: url('data:image/svg+xml;utf-8,%3Csvg%20width%3D%2246%22%20height%3D%2233%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2046%2033%22%3E%3Cpath%20d%3D%22M26.1%2032.7V19.2C26.1%206%2032.7.7%2044.6.5l1.3%206.3c-6.9.7-10.3%204.2-9.8%209.9h6.2v16H26.1zm-25.4%200V19.2C.7%206%207.3.7%2019.2.5l1.3%206.3c-6.9.7-10.3%204.2-9.8%209.9h6.2v16H.7z%22%20fill%3D%22%23C9C9C9%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E') no-repeat 0 0; }
    .text > blockquote.twitter-tweet { background-image: url('data:image/svg+xml;utf-8,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23C9C9C9%22%20d%3D%22M32%207.075c-1.175%200.525-2.444%200.875-3.769%201.031%201.356-0.813%202.394-2.1%202.887-3.631-1.269%200.75-2.675%201.3-4.169%201.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625%200-6.563%202.938-6.563%206.563%200%200.512%200.056%201.012%200.169%201.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563%200.969-0.887%202.1-0.887%203.3%200%202.275%201.156%204.287%202.919%205.463-1.075-0.031-2.087-0.331-2.975-0.819%200%200.025%200%200.056%200%200.081%200%203.181%202.263%205.838%205.269%206.437-0.55%200.15-1.131%200.231-1.731%200.231-0.425%200-0.831-0.044-1.237-0.119%200.838%202.606%203.263%204.506%206.131%204.563-2.25%201.762-5.075%202.813-8.156%202.813-0.531%200-1.050-0.031-1.569-0.094%202.913%201.869%206.362%202.95%2010.069%202.95%2012.075%200%2018.681-10.006%2018.681-18.681%200-0.287-0.006-0.569-0.019-0.85%201.281-0.919%202.394-2.075%203.275-3.394z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); }

    .text > .kader { margin: 20px 0; padding: 9px 30px 30px 30px; background: #D1D7D1; }

.text h2 + p { margin-top: 0px; }
.text h2 { font-size: 20px; line-height: 27px; font-weight: 700; }

@media (min-width: 40em) {
        .text > .kader { float: right; width: 50%; margin: 20px 0 20px 30px; }
        .text > .kader.left { float: left; width: 50%; margin: 20px 30px 20px 0; }
        .text > .kader.right { float: right; width: 50%; margin: 20px 0 20px 30px; }
        .text > .kader.full { float: none; width: 100%; margin: 20px 0 20px 0; }
        .text > .paper { width: 100%; margin: 20px 0 20px 0; background-color: #f6eee3; border: 2px solid #e5decf; padding: 20px;}
        .text > .paper > p, .text > .paper > ul, .text > .paper > ol { margin: 21px 0 0; font-size: 16px; line-height: 21px; }
}
@media (max-width: 39em) {
        .text > .kader { width: 100%; margin: 20px 0 20px 30px; }
        .text > .kader.left {width: 100%; margin: 20px 30px 20px 0; }
        .text > .kader.right { width: 100%; margin: 20px 0 20px 30px; }
        .text > .kader.full { width: 100%; margin: 20px 0 20px 0; }
        .text > .paper { width: 100%; margin: 20px 0 20px 0; background-color: #f6eee3; border: 2px solid #e5decf; padding: 20px;}
        .text > .paper > p, .text > .paper > ul, .text > .paper > ol { margin: 21px 0 0; font-size: 16px; line-height: 21px; }
}
        .text > .kader > p, .text > .kader > ul, .text > .kader > ol { margin: 21px 0 0; font-size: 16px; line-height: 21px; }
        .text > .kader > table { margin: 21px 0 0; }

.columns { }
    .columns > ul { column-width: 14em; }

.kader { clear: both; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; }

.flexed { display: flex; justify-content: space-between; }
    .flexed > span { margin: 0 10px; }

.boxed { margin: 20px 0; padding: 30px; background: #D1D7D1; }
    .boxed > .text > p, .boxed > .text > ul { margin: 21px 0 0; font-size: 16px; line-height: 21px; }
    .boxed > .text > :first-child { margin-top: 0; }

.tags { display: flex; flex-wrap: wrap; margin: 30px 0 -5px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 500; font-size: 12px; }
    .tags > h2 { border-bottom: 1px solid; text-transform: none; display: block; width: 100%; margin-bottom: .5em; }
    .tags > a, .tags > span { margin: 0 5px 5px 0; padding: 0 10px; border: 1px solid #eee; border-radius: 3px; text-decoration: none; white-space: nowrap; }
    .tags > a { background: #F5F5F5; }
    .tags > a:hover, .tags > a:focus {  }

.toc { float: right; width: 50%; margin: 0 0 10px 10px; padding: 20px; border: 1px solid #D8D8D8; }
    .toc > h2 {  }
    .toc > ul { margin: 1em 0 0 1em; font-size: 16px; }

.share { margin: 30px 0; }
.share-top { display: none; }
.share-embedded { margin: 0; background: #F5F5F5; }
    .share > p { display: inline-flex; }
        .share > p > .locked { margin-right: .2em; }
    .share > ul { display: inline-flex; list-style: none; background: #F5F5F5; }
    .share-embedded > ul { background: none; }
        .share > ul > li {  }
            .share > ul > li > .favorite { display: block; margin-left: 0; }
            .share > ul > li > a { display: block; width: 40px; line-height: 40px; white-space: nowrap; overflow: hidden; text-align: center; }
                .share > ul > li > a > svg { vertical-align: middle; }
@media (min-height: 30em) and (min-width: 1300px) {
.share-bottom { display: none; }
.share-top { display: flex; position: -webkit-sticky; position: sticky; top: 150px; left: 0; margin: 0 0 0 -60px; float: left; flex-direction: column; }
    .share-top > ul { flex-direction: column; }
}

.tabs { position: relative; display: flex; list-style: none; padding-right: 1em; }
.tabs.with-spacing { margin-bottom: 20px; }
.no-js .tabs { display: none; }
    .tabs > li { border-top: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; }
    .tabs > li:first-child { border-left: 1px solid #D8D8D8; }
        .tabs > li > a { position: relative; display: block; padding: 0 1em; text-decoration: none; border-bottom: 3px solid transparent; }
        .tabs > li > a.active { z-index: 1; border-color: #fff; color: #000; background: #fff; font-weight: 700; }
        .tabs > li > a[data-handler="open-login"]::after { content: ''; position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; }
.tabs ~ * { margin-top: 20px; }
.tabs ~ *:first-of-type { margin-top: 0; }
.has-js .tabs ~ * { display: none; margin-top: 0; outline: none; }
.has-js .tabs ~ :target, .has-js .tabs ~ .active { display: block; }
.has-js .tabs ~ .active.with-page-navigation ~ .page-navigation { display: block; }
.tabs::after { content: ''; position: absolute; right: 0; bottom: 0; left: 1px; height: 3px; background: #000; }

.component { margin: 20px 0; }
.component:first-child { margin-top: 0; }
    .component > h2 { font-size: 20px; }
@media (min-width: 30em) {
.component { margin-top: 30px; }
    .component:first-child { margin-top: 0; }
    .component > h2 { font-size: 24px; }
}

.component > .tabs { margin: -21px -21px 0; background: #fff; }

.component > .subtitle { display: block; margin-bottom: 5px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 11px; font-weight: 500; line-height: 13px; }

@media (max-width: 40em), (min-width: 60em) {
.component-agenda { padding: 20px; background: #F5F5F5; }
.component-nieuws { padding: 20px 0; }
}

.component-nvj { padding: 20px 20px 20px; background: #00ADEB; color: #fff; }
    .component-nvj > p > .show-more { background: #00ADEB; }
@media (min-width: 40em) and (max-width: 60em) {
.component-nvj { grid-column: span 2; }
}
@media (max-width: 40em), (min-width: 60em) {
.component-nvj { grid-column: span 1; }
}

@media (max-width: 40em), (min-width: 60em) {
.component-leestips { padding: 20px; background: #F5F5F5; }
}

@media (max-width: 40em), (min-width: 60em) {
.component-agenda > p > .show-more, .component-nvj > p > .show-more, .component-leestips > p > .show-more { padding: 5px 0; }
}

.component-login-required { position: relative; margin-top: -150px; padding: 100px 50px 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100px); transition: .2s ease-out; }
.component-login-required::after { content: ''; position: absolute; bottom: -100px; left: 0; right: 0; height: 100px; background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); pointer-events: none; }
    .component-login-required > div {  }
        .component-login-required > div > p { margin: 10px 0; }
.component-login-required.no-background { background: none; }

.component-nieuwsbrief { padding: 30px; }
    .component-nieuwsbrief > h2 { margin-bottom: 5px; }
    .component-nieuwsbrief > form > p { display: flex; margin: 20px 0 0; }
        .component-nieuwsbrief > form > p > label { display: flex; flex: 1 1 auto; }
            .component-nieuwsbrief > form > p > label > span { position: absolute; z-index: -1; }
            .component-nieuwsbrief > form > p > label > input { width: 100%; background: #F5F5F5; }
        .component-nieuwsbrief > form > p > button { width: auto; white-space: nowrap; }

.component-with-edit { margin: 20px 0 0; position: relative; }
    .component-with-edit > h2 { border-bottom: 1px solid; }
    .component-with-edit > .edit { position: absolute; top: 0; right: 0; }

.component-hidden-until-in-viewport { max-height: 0; padding: 10px; text-align: center; transition: max-height 1s ease-out; overflow: hidden; will-change: max-height; }
.component-hidden-until-in-viewport.is-relevant { max-height: 500px; }

.component-subnav {  }
    .component-subnav > ul { margin: 1em 0 0 1em; font-size: 16px; }

.experience { position: relative; }
.experience + .experience { margin-top: 10px; padding-top: 10px; border-top: 1px solid #D8D8D8;  }
    .experience > h3 { font-size: 100%; }
        .experience > h3 > small { font-weight: 400; }
    .experience > .edit { position: absolute; top: 0; right: 0; }
        .experience p:first-child { max-width: 80%; }

.author-intro { position: relative; margin: 15px 0 30px; padding-left: 115px; min-height: 100px; }
    .author-intro > h1, .author-intro > h2 { line-height: 44px; font-size: 36px; }
    .author-intro > .avatar { position: absolute; top: 0; left: 0; }
        .author-intro > .avatar > img { width: 100px; height: 100px; }
@media (max-width: 30em) {
    .author-intro { padding-left: 55px; min-height: 40px; }
        .author-intro > h1, .author-intro > h2 { line-height: 34px; font-size: 24px; }
        .author-intro > .avatar > img { width: 40px; height: 40px; }
}
    .author-intro > p {  }
    .author-intro > ul { list-style: none; }
        .author-intro > ul > li { display: inline-block; }
            .author-intro > ul > li > a { font-size: 16px; }

.footer > div > .component-nieuwsbrief { padding: 0; }
    .footer > div > .component-nieuwsbrief > h2 { margin: 0; font-size: 20px; }
    .footer > div > .component-nieuwsbrief > p { font-size: 15px; }
        .footer > div > .component-nieuwsbrief > form > p { margin: 27px 0 0; }
@media (max-width: 30em) {
        .footer > div > .component-nieuwsbrief > form > p { flex-direction: column; }
}

.component-comments { padding: 30px; background: #F5F5F5; }
    .component-comments > h2 { border-bottom: 1px solid; }
    .component-comments > p { margin: 0 0 30px; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 300; font-size: 16px; }
    .component-comments > article { position: relative; padding: 14px 0 0 85px; }
    .component-comments > article + article { margin-top: 27px; }
        .component-comments > article > .avatar { position: absolute; top: 0; left: 0; }
        .component-comments > article > h3 { margin-bottom: -9px; font-weight: 400; font-size: 100%; }
            .component-comments > article > h3 > strong { font-weight: 700; }
    .component-comments > form {  }
        .component-comments > form > p { display: flex; margin-top: 30px; }
            .component-comments > form > p > label { position: absolute; z-index: -1; }
            .component-comments > form > p > textarea { height: 50px; min-height: 50px; flex: 1 1 auto; resize: vertical; -webkit-appearance: none; border: none; border-radius: 0; font-family: 'ff-meta-serif-web-pro', serif; }
            .component-comments > form > p > button { width: auto; align-self: flex-end; }
    .component-comments > .text > p { margin: 16px 0 0; font-size: 16px;}
    .component-comments > article > .comment > p { margin-top: 16px; font-size: 14px;}
    .component-comments .text > p { overflow: scroll; }

.component-related {  }
    .component-related > h2 { border-bottom: 1px solid; }
    .component-related > .links { margin-top: 0; border-top: none; }
        .component-related > .links > li { position: relative; padding-left: 15px; }
            .component-related > .links > li > a::before { content: ''; position: absolute; top: 36px; left: 0; height: 8px; width: 8px; border-bottom: 2px solid; border-right: 2px solid; transform: rotate(-45deg); }

.table-container { overflow: auto; -webkit-overflow-scrolling: touch; }

.data {  }
    .data > thead { }
        .data > thead > tr {  }
            .data > thead > tr > th { padding: 5px; }
            .data > thead > tr > th:first-child { padding-left: 0; }
            .data > thead > tr > th:last-child { padding-right: 0; }
            .data > thead > tr > th > div { text-align: center; }
        .data > tbody {  }
            .data > tbody > tr {  }
                .data > tbody > tr > td { padding: 5px; border-top: 1px solid #D8D8D8; white-space: nowrap; }
                .data > tbody > tr > td.grijs svg path{ fill: #aaa; }
                .data > tbody > tr > td:first-child { padding-left: 0; }
                .data > tbody > tr > td:last-child { padding-right: 0; }
                    .data > tbody > tr > td > span.favorite { margin-left: 0; }

.export { float: right; }

.links { list-style: none; border-top: 1px solid #D8D8D8; }
.tabs ~ div > .links { margin-top: 20px; border-top: none; }
    .links > li { position: relative; display: flex; align-items: center; padding: 5px 0; min-height: 80px; border-bottom: 1px solid #D8D8D8; text-decoration: none; color: inherit; }
    .links.links-without-thumbs > li { min-height: 0; }

    .links > li:only-child { border-bottom: none; }
    .links > li.currently-reading { color: #E70C00; }
    @supports (--progress: .05) {
        .links > li.currently-reading::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #E70C00; transform-origin: 0 0; transform: scaleX(var(--progress, .05)); transition: .2s ease-out; }
    }
        .links > li > :first-child { margin-right: auto; }
        .links > li > a > .avatar { order: -1; }
        .links > li > .avatar { flex: 0 0 auto; order: -1; margin-right: 15px; min-width: 40px; }
@media (max-width: 30em) {
            .links > li > .avatar { margin-right: 10px; min-width: 20px; width: 20px; }
                .links > li > .avatar > img { width: 20px; height: 20px; }
}
        .links > li > .rate { flex: 0 0 auto; margin-left: 10px; }
        .links > li > .img { flex: 1 0 100px; margin-left: 10px; max-width: 110px; }
            .links > li > .img > img { height: auto; }
        .links > li .txt { margin-right: auto; text-align: left; }
        .links > li > .date { display: inline-flex; flex-direction: column; order: -1; flex: 0 0 3em; padding: 0 10px 0 0; color: #E70C00; text-align: center; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 400; font-size: 15px; line-height: 21px; }

            .links > li > div > h2, .links > li > div > h3, .links > li > div > h4 { font-size: inherit; color: inherit; }
                .links > li > a, .links > li > div > h2 > a, .links > li > div > h3 > a, .links > li > div > h4 > a { text-decoration: none; }
                .links > li > a::after, .links > li > div > h2 > a::after, .links > li > div > h3 > a::after, .links > li > div > h4 > a::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
                .links > li > a:hover, .links > li > a:focus, .links > li > div > h2 > a:hover, .links > li > div > h2 > a:focus, .links > li > div > h3 > a:hover, .links > li > div > h3 > a:focus, .links > li > div > h4 > a:hover, .links > li > div > h4 > a:focus {  }
            .links > li > div > p { word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
                .links > li > div > p > .category { padding: 4px 8px; background: #FDF693; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; border-radius: 3px; line-height: 8px; }

.service-links { border: none; }
    .service-links > li { display: inline-block; width: 16em; padding: 0 20px 40px 0; border: none; vertical-align: top; }
        .service-links > li > a { font-weight: 700; }
            .service-links > li > a > strong { display: block; }

@media (min-width: 40em) {
    .service-links > li > p > a.mobile { display: none; }
    li.vacature > .mobdatefav { display: none; }
}
@media (max-width: 39.99em) {
    li.vacature { display: list-item; }
        li.vacature > .mobdatefav { display: block; width: 100%; color: #E70C00; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: 400; font-size: 15px; }
            li.vacature > .mobdatefav > .favorite { margin-left: 0; }
                li.vacature > .mobdatefav > .favorite button { display: inline; }
                li.vacature > .mobdatefav > .category { padding: 4px 8px; color: #000; background: #FDF693; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; border-radius: 3px; line-height: 8px; }
            li.vacature > .date { display: none; }
        li.vacature > span.favorite { display: none; }
        li.vacature > .txt { display: inline-block; max-width: 70%; }
            li.vacature > .txt > h2 > a:after{ top: 40px; }
        li.vacature > .img { display: inline-block; max-width: 20%; }
            li.vacature > .img img { max-width: 80px; margin: 0 ; position: absolute; right: 0; top: 40px; max-height: 80px; }
        li.vacature > div > p > .category { display: none; }
}

.show-more { display: inline-block; margin-top: 20px; padding: 5px 10px; background: #F5F5F5; text-decoration: none; }
.show-more:hover, .show-more:focus { text-decoration: underline; }

.search-bar { display: flex; margin: 0 0 30px; }
.search-bar-mini { position: absolute; top: 0; right: 10px; margin: 0; }
@media (min-width: 30em) {
.search-bar-mini { right: 20px; }
}
    .search-bar > a { min-width: 50px; line-height: 50px; text-align: center; background: #fff; }
@media (min-width: 60em) {
    .search-bar > a { display: none; }
}
    .search-bar > input[type="search"] { flex: 1 1 auto; min-width: 0; padding-right: 50px; border: 1px solid #D8D8D8; border-radius: 0; -webkit-appearance: none; font-family: 'ff-meta-serif-web-pro', serif; font-size: 18px; }
    .search-bar > button { margin-left: -51px; width: 50px; background: none; color: #000; }
        .search-bar > button > svg { vertical-align: middle; }
    .search-bar > label { position: relative; display: flex; white-space: nowrap; }
        .search-bar > label > span { display: inline-block; width: 50px; line-height: 50px; text-align: center; }
            .search-bar > label > span > svg {  }
        .search-bar > label > select { position: absolute; top: 0; left: 0; opacity: 0; width: 50px; height: 50px; padding: 0 .5em; border-radius: 0; font-size: 16px; vertical-align: top; background: none; -webkit-appearance: none; }

.page-navigation { line-height: 54px; font-size: 16px; }
    .page-navigation > small { display: block; padding: 0 6em; text-align: center; font-size: 14px; }
    .page-navigation > .prev { float: left; }
    .page-navigation > .next { float: right; }

.form-element-group { border: none; margin: 20px 0; }
    .form-element-group > legend { color: inherit; font-size: 20px; font-weight: 700; }

.form-intro { margin: 20px 0 0; }

.form-element { margin: 20px 0 0; }
    .form-element > label {  }
        .form-element > label > span { display: block; margin: 0 0 6px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 11px; font-weight: 500; line-height: 13px; }
            .form-element > label > span > em, .form-element > fieldset > legend > span > em { display: inline-block; width: 1em; vertical-align: middle; font-style: normal; color: #E70C00; overflow: hidden; white-space: nowrap; }
            .form-element > label > span > em::before, .form-element > fieldset > legend > span > em::before { content: '*'; margin-right: 1em; }
        .form-element > label > input[type="text"], .form-element > label > input[type="search"], .form-element > label > input[type="tel"], .form-element > label > input[type="url"], .form-element > label > input[type="email"], .form-element > label > input[type="number"], .form-element > label > input[type="password"] { -webkit-appearance: none; }
        .form-element > label > input[type="text"], .form-element > label > input[type="search"], .form-element > label > input[type="tel"], .form-element > label > input[type="url"], .form-element > label > input[type="email"], .form-element > label > input[type="number"], .form-element > label > input[type="password"], .form-element > label > textarea, .form-element > label > select { width: 100%; border: 1px solid #D8D8D8; border-radius: 0; font-family: 'ff-meta-serif-web-pro', serif; }
        .form-element > label > input[type="file"] { width: 100%; padding: 0; font-family: 'ff-meta-serif-web-pro', serif; font-size: 16px; line-height: 1; }
        .form-element > label > input[type="file"].is-enhanced { opacity: 0; width: 1px; height: 100%; overflow: hidden; }
        .form-element > label > input[type="text"]:focus, .form-element > label > input[type="search"]:focus, .form-element > label > input[type="tel"]:focus, .form-element > label > input[type="tel"]:focus, .form-element > label > input[type="email"]:focus, .form-element > label > input[type="number"]:focus, .form-element > label > input[type="password"]:focus, .form-element > label > textarea:focus, .form-element > label > select:focus { border-color: #000; }
        .form-element > label > input[type="tel"] { max-width: 12em; }
        .form-element > label > input[type="number"] { max-width: 5em; }
        .form-element > label > textarea { resize: vertical; }
        .form-element > label > small { display: block; margin: 5px 0 0; font-size: 14px; line-height: 16px; }
        .form-element > label.checkbox { display: block; position: relative; padding: 0 0 0 26px; cursor: pointer; }
            .form-element > label.checkbox > input { position: absolute; left: 0; top: 5px; cursor: pointer; }
    .form-element > img.preview { width: 200px; margin: 5px 0 0; }
    .form-element > fieldset { border: none; }
        .form-element > fieldset > legend {  }
            .form-element > fieldset > legend > span { display: block; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-size: 11px; font-weight: 500; line-height: 13px; }
        .form-element > fieldset > ul { list-style: none; }
            .form-element > fieldset > ul > li { position: relative; padding: 0 0 0 26px; }
                .form-element > fieldset > ul > li > label { display: block; padding: 2px 0; cursor: pointer; }
                .form-element > fieldset > ul > li > .text { margin-bottom: 16px; }
                .form-element > fieldset > ul > li > .text > p, .form-element > fieldset > ul > li > .text > ul { margin: 8px 0 0; font-size: 16px; }
                    .form-element > fieldset > ul > li > label > input { cursor: pointer; position: absolute; left: 0; top: 5px; }
    .form-element > .button, .form-element > input[type="submit"] { display: inline-block; width: auto; margin-right: .5em; }

.external { padding-right: 20px; background: transparent url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M6%202v24h24v-24h-24zM28%2024h-20v-20h20v20zM4%2028v-21l-2-2v25h25l-2-2h-21z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M11%208l5%205-6%206%203%203%206-6%205%205v-13z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%; background-size: 14px 14px; }

/* Debug styling */
/*
body > .footer,
.container .container,
.form-element > legend,
.form-element > label label,
.form-element > label + small,
.form-element > fieldset > legend ~ label,
.form-element > label ~ label,
.form-element > label > [type="submit"],
.form-element > label[for] > input,
.form-element > fieldset > ul > li > label[for] > input,
.form-element > fieldset > ul > li > input,
.form-element > label[for] > select,
.form-element > label:not(.checkbox) > input:first-child,
.form-element > label:not(.checkbox) > textarea:first-child,
.form-element > label:not(.checkbox) > [type="checkbox"],
.form-element > label[for] > textarea,
.form-element > label > span ~ input:not([type="hidden"]) ~ input:not([type="hidden"]),
.form-element > fieldset > input ~ input,
a[href="#TODO"],
fieldset .h2,
h2 + .form-element,
label:empty,
.filters:not(#filters),
.component .component,
p.text,
form > .component > fieldset:not(.form-element-group),
form:not(.filters) > fieldset:not(.form-element-group) { display: block; min-width: 10px; min-height: 10px; background: red !important; outline: 3px double red !important; }
body > .footer { position: fixed; top: 0; left: 0; right: 0; }
*/
.picture { position: relative; overflow: hidden; }
    .pictures { position: relative; }
        .pictures > div { transition: .2s ease-out; }
            .pictures > div > * { position: relative; display: inline-block; vertical-align: top; overflow: hidden; transition: opacity .5s ease-out; }
    .has-js .pictures > div > .picture-extra { position: absolute; top: 0; left: 0; opacity: 0; }
.picture .pictures #picture-scroller a { text-decoration:none; }
.picture-nav { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 10px; color: #fff; background: #000; background: rgba(0, 0, 0, .5); border-radius: 5px; outline: none; }
.no-js .picture-nav { display: none; }
    .picture-nav > button { display: inline-block; line-height: 40px; height: 40px; width: 40px; margin: 0; padding: 0; border: none; color: #fff; background: transparent no-repeat center center; background-size: 16px 16px; -webkit-appearance: none; cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 100%; vertical-align: middle; }
    .picture-nav > .picture-prev, .map-cards > button + button{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAnElEQVRYw%2B3OsQ0BUQCA4YtEQynBAApEYx7MwgR2MIBGorSFXGIChjj5NMRF4TTvHu7%2BBb4%2FSf4ptLDDCeMY%2BMGzC0ax8EdnDGPh%2BYlOLBwyDGLhVyxqPAY%2Bryw%2BqySehcKb0fD7wFRx2yB4bmLzwcQq5ECjnqgn6ol%2FmFh%2Bw8Qk5sQR7WADBRMpukHxNxMpeqXgLxNr7NEvFf%2FZbtZQN0Ad2zG6AAAAAElFTkSuQmCC'); }
    .picture-nav > .picture-next, .map-cards > button { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAmklEQVRYw%2B3OsQnCQABA0RB7J3CBuIRY2DuMrZAxrISogziDMwhqr%2FWzCRgCYopcDsn9Bf7Lsn8IS1yxQx5j%2FvKpGgyBRWs%2BHAIFnr4XFoGV3wVHlAmREAmRED0g9iEBE1w6IKah5qcO822Ied5xXqZ53%2FPjaOeH0c6rKPMasI42rwEz3KLMG4gC9yjzBmKOR5R5C3HGJkv13BsNIyuCu8Db5QAAAABJRU5ErkJggg%3D%3D'); }
    .picture-nav > .picture-full { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J%2FAAAA30lEQVRIx9WSMQ4BQRSGH6IRCtFwhEWyrYaWIygcYc8griIqiUShVkg4iJAgmRsQn4aN3dnIvpnKP%2FX35c37n8ifhCXp3OlrBCvsRBpBlb2XQIQaBy%2BBCD2%2FCdrcfHZg4xpBAl%2FEu4hc8DnFeJ2RE%2F5uZMeDQR68wDmNi4hQopH3A1Mb1%2FY%2Fc8KpU%2F46ITUecGFLxXXogAuAo4KAa7z5ST5kw5Ew7v2aVdxvAYAhdMTfAjCM7avTCL6j690TtwRr%2FdkkYz6NuH9Bq8hYoqGpEZwswZOORtBiyCjxuvI3eQFnotY7rUqshwAAAABJRU5ErkJggg%3D%3D'); }
    .picture-nav > .disabled { opacity: .3; cursor: default; }
    .picture-nav > span { display: inline-block; width: 3em; text-align: center; white-space: nowrap; vertical-align: middle; }

.fullscreen, .fullscreen body { overflow: hidden; }
.fullscreen .picture { position: fixed; z-index: 15; top: 0; right: 0; bottom: 0; left: 0; margin: 0; background: #000; }
.fullscreen .pictures { height: 100%; }
    .fullscreen .pictures div { height: 100% !important; }
        .fullscreen .pictures div * { width: 100%; height: 100%; }
            .fullscreen .pictures div img { object-fit: contain; }

.fullscreen .picture figcaption { position: fixed; bottom: 0; height: auto; margin: 0 auto; padding: 0 5px; text-align: center; background: rgba(0, 0, 0, .5); color: #fff; width: auto; }
.fullscreen .picture-nav { position: absolute; top: 0; left: 0; right: 0; text-align: left; background: none; }
.fullscreen .picture-counter { background: #000; background: rgba(0, 0, 0, .5); }
.fullscreen .picture-full { position: absolute; top: 0; right: 0; z-index: 4; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J%2FAAAA8UlEQVRIx92UOwoCMRBAo41g7%2BcI6hnEQhFEsPMENjZWFraCjYKlNjaCPzyBsJewsfAKammxYPcs1GXDRshkK51UgbyXyYQZpX4uKHEDfKqu%2BJVX%2BGRsgBQL%2BsGuGOCwImEjqAEwNuBJu5Qbb2BMkYsYDwnAd8A1gQtuEMhwg2Aq%2FffoEyZxBTCSCCoGwf3b4TQdetrqkmXAXFszWt8EQ8NtO0m6ZR4RgSct2SOWwKAQCwrc4jwh3HFygdbvcoGGb2m%2Ba%2BHJZx1sSAblPEgm7SvWn4alzpG2nWAfxWXVz3N2GhchRY4TS2dcKaWspvx%2FxhP%2FNdZkK8n0%2FwAAAABJRU5ErkJggg%3D%3D'); }
.fullscreen .picture-prev, .fullscreen .picture-next { position: fixed; z-index: 3; top: 0; bottom: 0; width: 20%; height: auto; outline: none; }
.fullscreen .picture-prev { left: 0; background-position: 10% 50%; }
.fullscreen .picture-next { right: 0; background-position: 90% 50%; }

.map-container { position: relative; overflow: hidden; }
    .map { position: relative; z-index: 1; min-height: 400px; height: 50vh; background: #fff; }
    .map-cards { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; padding-top: 40px; display: flex; align-items: flex-end; overflow: hidden; scroll-behavior: smooth; transition: .2s ease-out; transition-property: opacity, visibility, transform; }
    .map-cards.is-irrelevant { opacity: 0; transform: translateY(10px); visibility: hidden; }
        .map-cards > div { flex: 1 0 100%; padding: 10px; background: #fff; }
        @supports (scroll-snap-type: x mandatory) {
            .map-cards { overflow: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
                .map-cards > div { scroll-snap-align: start; }
        }
            .map-cards > div > .author-intro { margin: 0; }
                .map-cards > div > .author-intro > button { position: absolute; top: -50px; height: 40px; width: 40px; right: 0; display: flex; background: #fff; color: #000; }
        .map-cards > button { width: 40px; height: 40px; padding: 0; margin: auto 20px 10px -50px; flex: 0 0 40px; overflow: hidden; z-index: 1; background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: 16px 16px; }
        .map-cards button { opacity: 1; transition: .2s ease-out opacity; }
        @supports (scroll-behavior: smooth) {
            .map-cards.is-scrolling button { opacity: 0; }
        }
        .map-cards > button + button { margin-left: auto; margin-right: -50px; }
.leaflet-marker-icon { background: #E70C00; border-radius: 50%; border: 1px solid #000; text-align: center; font-family: 'ff-meta-serif-web-pro', serif; font-weight: 700; font-size: 14px; }
.leaflet-marker-icon.marker-is-medium { width: 22px !important; height: 22px !important; line-height: 18px; margin-left: -11px !important; margin-top: -11px !important; }
.leaflet-marker-icon.marker-is-large { width: 32px !important; height: 32px !important; line-height: 28px; margin-left: -16px !important; margin-top: -16px !important; }
.leaflet-marker-icon.is-selected { background: #E70C00; z-index: 100000 !important; box-shadow: 0 0 0 2px #000; }

.map-loader { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: rgba(255, 255, 255, 0.7); transition: .2s ease-out; pointer-events: none; }
.map-loader.is-irrelevant { opacity: 0; }

.accountintro { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-evenly; }
    .accountintro h2 { font-size: 18px; }
        .accountintro > div { border: 1px solid #D8D8D0; padding: 20px; width: 48.5%; display: inline-block; vertical-align: top; }
            .accountintro > div > ul { margin-left: 0; list-style-type: none; list-style-position: outside; }
            .accountintro > div > div { padding-top: 1em; }
                .accountintro > div > ul li:before { content:''; display:inline-block; height:1em; width:1em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;opacity:0;%7D.cls-2%7Bfill:%232ca981;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Echeckmark%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='checkmark'%3E%3Cg id='checkmark-2' data-name='checkmark'%3E%3Crect class='cls-1' width='32' height='32'/%3E%3Cpath class='cls-2' d='M9.86,18a1,1,0,0,1-.73-.32L4.27,12.51a1,1,0,1,1,1.46-1.37l4.12,4.39,8.41-9.2a1,1,0,1,1,1.48,1.34l-9.14,10a1,1,0,0,1-.73.33Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; background-position: left 5px; padding-left: 1em; }


.proposition { margin-top: 30px; margin-bottom: 5px; border-top: 1px solid #D8D8D8; width:100%;table-layout: fixed; }
    .proposition > thead {  }
        .proposition > thead > tr {  }
            .proposition > thead > tr > th { padding: 5px; border-right: 1px solid #D8D8D8; vertical-align: top; }
            .proposition > thead > tr > th:last-child { border-right: 0;}
            .proposition > thead > tr > th > div { vertical-align: bottom; white-space: nowrap; }
        .proposition > tbody {  }
            .proposition > tbody > tr {  }
                .proposition > tbody > tr > td { text-align: center; padding: 5px; border-top: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; white-space: normal; }
                .proposition > tbody > tr > td:first-child {text-align: left;}
                .proposition > tbody > tr > td:last-child { border-right: 0;}
                .proposition > tbody > tr > td .call-to-action { line-height: 25px; padding: 1em 1px; }
                .proposition > tbody > tr > td.cta { border-right: none; }
                    .proposition > tbody > tr > td.cta div { width: 100%; height: 100%; display: inline-block; }

.container p.alert.alert-nok { padding: 1em; background-color: #FDF693; border-top: 1em solid #fff; }
    .container p.alert.alert-nok strong { font-weight: 500; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s !important;
        transition: none !important;
    }
    html, body {
        scroll-behavior: auto !important;
    }
}

@media print {
    .header-intro,
    .user-nav,
    .global-search,
    .skip-links,
    .topic-menu-container,
    .filters,
    .share,
    .search-bar,
    .favorite > button:not(.is-favorite),
    .sidebar,
    .footer,
    .tags,
    .component-nieuwsbrief,
    .component-related,
    .component-comments,
    .colofon { display: none; }
    .header-container { position: relative !important; }
    .kader { border: 1px solid; background: none; }
    .logo > a > svg { width: 40px !important; height: 40px !important; }
    .main > .content { width: auto; float: none; }
    .main { grid-template-columns: auto !important; }
}
/* HET-VAK LISTINGS */
.item-wrapper {
    clear: both; 
    margin: 10px 0 10px 0;
}
.item-picture {
    width: 100px; 
    float: left;
    margin: 10px 0 10px 0;
}
.item-content {
    width: calc(100% - 100px); 
    float: right; 
    font-size: 14px; 
    padding: 0 10px 10px 10px;
    margin: 10px 0 10px 0;
    
}
.item-content a {
    text-decoration: none;
}
.item-content .topic {
    color: #E70C00;
}

/* From here pagebuilder styles */
body#villamedia:has(div#pagebuilder) {
    background: rgb(235,223,199);
    background: linear-gradient(180deg, rgba(235,223,199,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
body#villamedia.light-brown:has(div#pagebuilder) {
    background: rgb(235,223,199);
    background: linear-gradient(180deg, rgba(235,223,199,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
body#villamedia.greyish-green:has(div#pagebuilder) {
    background: rgb(150,183,139);
    background: linear-gradient(180deg, rgba(150, 183, 139, 1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
body#villamedia.light-blue:has(div#pagebuilder) {
    background: rgb(199,222,235);
    background: linear-gradient(180deg, rgba(199, 222, 235, 1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
body#villamedia.light-green:has(div#pagebuilder) {
    background: rgb(204,229,222);
    background: linear-gradient(180deg, rgba(204, 229, 222, 1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
body#villamedia.middle-brown:has(div#pagebuilder) {
    background: rgb(223,198,167);
    background: linear-gradient(180deg, rgba(223, 198, 167, 1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
body#villamedia.black:has(div#pagebuilder) {
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}
section.cta div.greyish-green {
    background: rgb(150,183,139);
    background: linear-gradient(180deg, rgba(150, 183, 139, 1) 0%, rgba(150, 183, 139,0.5) 100%);
}
section.cta div.ctt {
    border-radius: 7.5px;
    padding: 2em;
    min-height: 110px;
}


@media (min-width: 14.5em) {
    .logo > a > img {
        
        width: 99px;
        height: 35px;
        vertical-align: middle;
    }
}
body#villamedia:has(div#pagebuilder) .logo > a > img {display:none;}
body#villamedia:has(div#pagebuilder) .header-intro {display:none;}
body#villamedia:has(div#pagebuilder) .header-container {
    position: relative;
    z-index: 5;
    top: 0;
    background: none;
}
body#villamedia:has(div#pagebuilder) .topic-menu-container {
xdisplay:none;
}
body#villamedia:has(div#pagebuilder) .user-nav {
    right: 33px;
}
body#villamedia:has(div#pagebuilder) .logo {
    float: left;
    font-size: 100%;
    margin: 0 0 0 33px;
}
body#villamedia:has(div#pagebuilder) .topic-menu-container {
    z-index: 2;
    background: transparent;
}
body#villamedia:has(div#pagebuilder) .topic-menu-container .container {
    max-width: 100svw;
}
body#villamedia:has(div#pagebuilder) .topic-menu {
    position: relative;
    border-bottom: none;
}
body#villamedia:has(div#pagebuilder) .topic-menu > div > nav, #overflow-menu-toggle  {
    display: none;
}
.main.pagebuilder {display: block;}
.main.pagebuilder .container {max-width: 900px;margin: 0 auto; }
.main.pagebuilder article figure.picture img {margin: 0 auto;}
.main.pagebuilder .meta {
    font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 28px;
    color: #666;
    padding: 2em 0 0 0;
    display: block;
    max-width: 900px;
    margin: 0 auto;
}
.main.pagebuilder h1 {
    max-width: 1440px;
    margin: 1em auto;
    text-align: center;
}
.main.pagebuilder p, .main.pagebuilder .text > p, .main.pagebuilder .text > ul, .main.pagebuilder .text > ol, .main.pagebuilder .text .article p {
    margin: 27px 0 0;
    font-size: 18px;
    line-height: 166%;
    text-rendering: optimizeLegibility;
}
.main.pagebuilder section {
    margin: 3em 0 3em 0;

}
.main.pagebuilder .full-width-image {
    background-size: cover;
    background-position: center;
    height: 60svh;
}
.main.pagebuilder .credits {
        
     font-style: italic;
     text-align: right;
     font-size: 12px;
     margin: 2em;
}
.main.pagebuilder .synopsis-content {
    width: 70%;
    padding: 2.5em;
    margin: 0 auto;
    border: 1px dotted #b3b3b3;
    border-radius: 5.5px;
}
.main.pagebuilder .body-tekst-smal .container {
    max-width: 624px;;
} 
.main.pagebuilder section.tussenkop {
    margin: 3em 0 0 0;
}
.main.pagebuilder .inset-box {
    border: 1px dotted #b3b3b3;
    border-radius: 2.5px;
    width: 33%;
    padding: 1.2em;
    font-size: 14px;
    line-height: 166%;
    font-family:'Gotham SSm A', 'Gotham SSm B', sans-serif;
    font-weight: 300;
}
.main.pagebuilder .inset-box.full-width {
    width: 100%;
    float: none;
}
.main.pagebuilder .inset-box.links {
    float:left;
    margin: 0 1.2em 0 0;
}
.main.pagebuilder .inset-box.rechts {
    float:right;
    margin: 0 0 0 1.2em;
}
.main.pagebuilder blockquote {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5.5px;
    padding: 2em;
}
.main.pagebuilder blockquote .quotes {
    width: 12%;
    float: left;
}
.main.pagebuilder blockquote .quote-content {
    width: 88%;
    float: left;
}
.main.pagebuilder blockquote .quote-content .quote {
    
    font-size: 120%;
}
.main.pagebuilder blockquote .quote-content img {
    width: 200px;
    float: right;
    border-radius: 5.5%;
}
.main.pagebuilder blockquote .quote-content:has(img) .main.pagebuilder blockquote .quote-content .quote { width: 60%;
    float: left; }

.main.pagebuilder blockquote .quote-name {
    text-transform: capitalize;
     font-style: italic;
     text-align: right;
     font-size: 12px;
     clear: both;
}
.main.pagebuilder .inline-image img {
    margin: 0 auto;
}
.main.pagebuilder .inline-image .container {
    padding: 0; 
}
.main.pagebuilder .logo-divider .container {
    background-image: url(/assets/img/lijn.png);
}
.main.pagebuilder .logo-divider svg {
    margin: 0 auto;
    display: block;
}
.main.pagebuilder .manually-related-items .container {
    display: flex;
    flex-wrap: wrap;
}
.main.pagebuilder .manually-related-items .related-item {
    width: 280px;
    height: 300px;
    display: flexbox;
    flex-direction:row;
}



@media (max-width: 39.99em) {
    .main.pagebuilder .synopsis-content {
    width: 90%;
    padding: 1.5em;
    margin: 0 auto;
    border: 1px dotted #b3b3b3;
    border-radius: 5.5px;
}
    .main.pagebuilder .inset-box {
    border: 1px dotted #b3b3b3;
    border-radius: 2.5px;
    width: 100%;
    padding: 1.2em;
    font-size: 14px;
    line-height: 166%;
    font-family:'Gotham SSm A', 'Gotham SSm B', sans-serif;
    font-weight: 300;
}
.main.pagebuilder .inset-box.full-width {
    width: 100%;
    float: none;
}
.main.pagebuilder .inset-box.links {
   float: none;
    margin: 0;
}
.main.pagebuilder .inset-box.rechts {
    float: none;
    margin: 0;
}
.main.pagebuilder blockquote .quotes {
    width: 17%;
    float: left;
}
.main.pagebuilder blockquote .quote-content {
    width: 83%;
    float: left;
}
}