/* tt-overrides.css - what makes the Blazor port's markup and stylesheets (custom-compact.css / custom-hero.css) show TikkertjeTaal
   instead of Speelplein.net: the logo, the hero illustration, the hero quote and the YouTube icon.
   Loaded from App.razor, i.e. before the per-page custom-*.css, so the selectors carry a `body` prefix and the images
   use !important instead of depending on source order. */

/* Logos: the header logo, the mobile logo and the footer logo. */
body header > section.header .logo,
body .mobile-logo,
body footer .logo {
    background-image: url(/Content/Images/logo_tikkertjetaal.png) !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* Header on every page: ensure Speelplein.net background dots on <header> (especially at <= 850px) are removed. */
body header {
    background: none !important;
    background-image: none !important;
}

/* Canva header layout: warm cream (#f5f2e6) left side with Tikkertje Taal logo & "TAAL SPEELT MEE" badge,
   and the children photo on the right side extending to the viewport edge. */
body header > section.header {
    background-color: #f5f2e6 !important;
    background-image: none !important;
}

body header > section.header > div.header-photo {
    left: calc(((100% - var(--container-width)) / 2) + (var(--container-width) * 0.42));
    right: 0;
    top: 0;
    height: 100%;
    background-image: url(/Content/Images/tikkertjetaal_header.jpg) !important;
    background-size: auto 175%;
    background-position: left bottom -50px !important;
    background-repeat: no-repeat !important;
}

body header > section.header > div.header-container {
    height: 100%;
}

body header > section.header > div.header-container > div.mission-container {
    display: grid;
    grid-template-columns: calc(var(--container-width) * 0.42) minmax(0, 1fr);
    align-items: end;
    width: 100%;
    height: 100%;
}

    body header > section.header > div.header-container .logo {
        grid-column: 1;
        grid-row: 1;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: transparent !important;
        background-image: url(/Content/Images/logo_tikkertjetaal.png) !important;
        background-position: 0px 56% !important;
        background-size: 95% auto !important;
        background-repeat: no-repeat !important;
    }

body header.home > section.header > div.header-container .mission,
body header:not(.home) > section.header > div.header-container .mission {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0 10% -37px 0;
    padding: 0;
    background-image: none !important;
    z-index: 30;
}

body header > section.header > div.header-container .social-search-container {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    margin-right: 0;
    padding-bottom: 10px;
}

/* Canva Page 4 — Non-homepage compact header (`header:not(.home)`):
   Cancel custom-compact.css's `top: -100px` and `height: 171px`, and scale the header to Page 4's
   shorter height (300px vs 380px) and narrower logo column (35.5% vs 42%).
   Note: `div.header-photo` keeps `width: 100%` (100vw), so `background-size: 44.5%` spans from 35.5%
   to the right edge of `--container-width` just like `40%` does from 42% on `header.home`. */
body header:not(.home):not(.fixed) {
    top: 0 !important;
}

body header:not(.home) > section.header {
    height: 300px !important;
    overflow: visible !important;
}

body header:not(.home) > section.header > div.header-photo {
    left: calc(((100% - var(--container-width)) / 2) + (var(--container-width) * 0.355));
    background-size: auto 190% !important;
    background-position: left bottom -65px !important;
}

body header:not(.home) > section.header > div.header-container {
    width: var(--container-width) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

body header:not(.home) > section.header > div.header-container > div.mission-container {
    display: grid !important;
    grid-template-columns: calc(var(--container-width) * 0.355) minmax(0, 1fr);
}

body header:not(.home) > section.header > div.header-container .logo {
    float: none !important;
    width: 100% !important;
    height: 100% !important;
}

body header:not(.home) > section.header > div.header-container .mission {
    margin: 0 6% -34px 0;
}

body header:not(.home) > section.header > div.header-container .mission .tt-quote {
    font-size: clamp(1.35rem, 1.95vw, 2.0rem);
}

body header:not(.home) > section.header > div.header-container .social-search-container {
    flex: none !important;
    width: auto !important;
}

@media (min-width: 851px) {
    body header:not(.home) + section {
        padding-top: 375px !important;
    }
}

/* "TAAL SPEELT MEE" 3-line quote badge (Canva Pages 1 & 4): right-aligned stepped #5567d8 block with tight line-height */
.tt-quote {
    font-family: "Anybody", Impact, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.2vw, 2.25rem);
    line-height: 1.12;
    text-align: right;
    text-transform: uppercase;
}

.tt-quote > span {
    display: inline;
    color: #f5f2e6;
    background-color: #5567d8;
    box-shadow: .32em 0 0 0 #5567d8, -.32em 0 0 0 #5567d8;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.12em 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-transform: uppercase;
}

/* Canva "White Long Search bar": white pill with thin dark (#010019) border and magnifying glass on the right */
body header > section.header .social-search-container .header-search {
    width: 270px;
    border-radius: 999px;
}

body header > section.header .social-search-container .header-search input.dosearch {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cline x1='16' y1='16' x2='21.5' y2='21.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    border: 1.5px solid #010019;
    border-radius: 999px;
    padding: 7px 40px 7px 18px;
    height: 38px;
    font-family: "Funnel Sans", sans-serif;
    font-size: 15px;
    color: #010019;
    outline: none;
    box-shadow: none;
}

body header > section.header .social-search-container .header-search input.dosearch::placeholder {
    color: #777777;
}

@media (max-device-width: 768px) and (orientation:portrait), (max-width: 850px) {
    /* In Blazor there is no <form> wrapper around <header>, so custom-*.css's `body > form > header { position: static }`
       did not match. Make <header> flow naturally below the fixed 41px mobile nav bar so it never overlaps content. */
    body header,
    body header.fixed {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-top: 41px !important;
    }

    body header > section.header {
        height: 220px !important;
    }

    body header:not(.home) > section.header {
        height: 190px !important;
    }

    body header > section.header > div.header-photo,
    body header:not(.home) > section.header > div.header-photo {
        left: 44% !important;
        right: 0 !important;
        background-size: cover !important;
        background-position: center 65% !important;
    }

    body header > section.header > div.header-container > div.mission-container,
    body header:not(.home) > section.header > div.header-container > div.mission-container {
        grid-template-columns: 44% 56% !important;
    }

    body header > section.header > div.header-container .mission,
    body header:not(.home) > section.header > div.header-container .mission {
        margin: 0 6% 10px 0 !important;
    }

    body header > section.header > div.header-container .mission .tt-quote,
    body header:not(.home) > section.header > div.header-container .mission .tt-quote {
        font-size: clamp(1.05rem, 3.6vw, 1.35rem) !important;
    }

    body header > section.header .social-search-container {
        padding-right: 12px;
        padding-bottom: 8px;
    }

    body header > section.header .social-search-container .header-search {
        width: min(190px, 48vw);
    }

    /* Mobile top bar & hamburger menu in Tikkertje Taal palette (#f5f2e6 cream + #5567d8 indigo) */
    body header > section.navigation,
    body header.fixed > section.navigation {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: linear-gradient(to right, #f5f2e6 50%, #5567d8 50%) !important;
    }

    body header > section.navigation > .only-mobile,
    body header.fixed > section.navigation > .only-mobile {
        background: linear-gradient(to right, #f5f2e6 min(50%, 220px), #5567d8 min(50%, 220px)) !important;
    }

    body header > section.navigation .mobile-logo {
        background-color: #f5f2e6 !important;
        top: 7px !important;
        transform: none !important;
        z-index: 10002 !important;
    }

    body header > section.navigation .menu-icon,
    body header > section.navigation .search > span.opensearch {
        background-color: #5567d8 !important;
    }

    body header > section.navigation .mobilemenu {
        background-color: #5567d8 !important;
        border-bottom-color: #5567d8 !important;
    }

    body header > section.navigation .menu-btn:checked ~ .mobilemenu {
        background-color: #5567d8 !important;
        border-bottom-color: #5567d8 !important;
        max-height: 480px !important;
        padding: 61px 15% 20px !important;
        background: linear-gradient(to right, #f5f2e6 min(50%, 220px), #5567d8 min(50%, 220px)) top / 100% 41px no-repeat, #5567d8 !important;
    }

    body header > section.navigation .mobilemenu > span {
        background-color: #ffffff !important;
        border-radius: 8px !important;
    }

    body header > section.navigation .mobilemenu > span a {
        font-family: "Hanken Grotesk", sans-serif !important;
        color: #00488c !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        display: block !important;
        padding: 4px !important;
    }

    body header > section.navigation .mobilemenu > span a:hover,
    body header > section.navigation .mobilemenu > span a:focus {
        text-decoration: none !important;
    }

    body header > section.navigation .mobilemenu > span a.active {
        background-color: #20c4f4 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        border: solid 3px #00488c !important;
    }

    body header > section.navigation .mobilemenu > span:last-of-type {
        background-color: #20c4f4 !important;
        border: solid 3px #ffffff !important;
    }

    body header > section.navigation .mobilemenu > span:last-of-type a,
    body header > section.navigation .mobilemenu > span:last-of-type a span,
    body header > section.navigation .mobilemenu > span:last-of-type a i {
        color: #ffffff !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    body header + section,
    body header:not(.home) + section {
        padding-top: 24px !important;
    }
}

/* Canva Menu / Navigation bar (Pages 1 & 4):
   White background without dots, Hanken Grotesk lowercase items aligned with the right photo column (42% offset),
   and the pointing-hand graphic above hovered/active items nudging the text down. */
body header > section.navigation.stophere {
    overflow: visible;
    position: relative;
    z-index: 10;
}

body header > section.navigation.stophere > menu.no-mobile {
    height: 54px;
    margin: 0;
    padding: 0;
    background-color: #ffffff !important;
    background-image: none !important;
    overflow: visible;
    position: relative;
}

body header > section.navigation.stophere > menu.no-mobile > div {
    width: var(--container-width);
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 0 0 calc(var(--container-width) * 0.42);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 400;
    text-transform: lowercase;
}

body header > section.navigation.stophere > menu.no-mobile > div > a:first-of-type {
    display: none !important;
}

body header > section.navigation.stophere > menu.no-mobile > div > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 1.2;
    color: #000000;
    text-decoration: none;
    padding: 0;
}

body header > section.navigation.stophere > menu.no-mobile > div > a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(50% + 4px);
    width: 78px;
    height: 72px;
    transform: translateX(-50%) translateY(-6px);
    background-image: url(/Content/Images/menu_hand_tt.png) !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: contain !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    animation: none !important;
    z-index: 20;
}

body header > section.navigation.stophere > menu.no-mobile > div > a:hover::before,
body header > section.navigation.stophere > menu.no-mobile > div > a.active::before,
body header > section.navigation.stophere > menu.no-mobile > div > a:has(> span.active)::before {
    width: 78px;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: none !important;
}

body header > section.navigation.stophere > menu.no-mobile > div > a > span {
    display: inline-block;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
    background-image: none !important;
}

body header > section.navigation.stophere > menu.no-mobile > div > a:hover > span,
body header > section.navigation.stophere > menu.no-mobile > div > a.active > span,
body header > section.navigation.stophere > menu.no-mobile > div > a > span.active {
    transform: translateY(9px);
    background-image: none !important;
    color: #000000;
}

/* YouTube icon, which the port's social set does not have. */
body span.youtube:before {
    -webkit-mask-image: url(/Content/Images/new/social-youtube.svg);
    mask-image: url(/Content/Images/new/social-youtube.svg);
}

/* Home blocks (Canva Page 1): 3 light-green (#a3dea3) rounded cards that proportionately resize within
   --container-width using custom-hero.css's flex: 1 1 0 and 8px transparent border spacing. */
body section.homeblocks-section {
    background: none !important;
    background-image: none !important;
}

body section.homeblocks-section > .homeblocks-container {
    align-items: stretch;
}

body section.homeblocks-section > .homeblocks-container .homeblock,
body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n),
body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n):hover {
    background-color: transparent;
    box-shadow: none;
}

body section.homeblocks-section > .homeblocks-container .homeblock > div,
body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div,
body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div:hover {
    background-color: #a3dea3;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    padding: 28px 28px 30px;
    margin: 0;
    min-height: 290px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div > h1 {
    font-family: "Anybody", sans-serif;
    font-size: 23.624px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.25;
    color: #000000;
    margin: 0;
    padding: 0;
    text-align: center;
}

body section.homeblocks-section > .homeblocks-container .homeblock > div > h1::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #f094bd;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: baseline;
}

body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div > p {
    font-family: "Funnel Sans", sans-serif;
    font-size: 18.66px;
    font-weight: 400;
    font-style: normal;
    line-height: 26px;
    color: #000000;
    text-align: center;
    padding: 0;
    margin: 0;
}

body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div > a.btn {
    width: auto;
    padding: 0;
    margin-top: auto;
    border: none;
    background: none;
    text-decoration: none;
}

body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div > a.btn > span {
    display: inline-block;
    width: auto;
    background-color: #5567d8;
    color: #ffffff;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 22.8px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    padding: 9px 22px 10px;
    border-radius: 10px;
    box-shadow: none !important;
}

body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div > a.btn:hover > span {
    background-color: #4455c7;
    color: #ffffff;
}

body section.homeblocks-section > .homeblocks-container .homeblock:nth-of-type(n) > div > a.btn > span::after {
    content: none;
    display: none;
}

/* ==========================================================================
   Canva Page 2 — Quote section & CMS Quote blocks (pure CSS via ::before / ::after):
   Based on CmsContentType 3 "Quote Rechts" (.col-md-4.bigphoto + .col-md-8)
   and CmsContentType 4/5 "Quote Links" (.col-md-8 + .col-md-4.bigphoto),
   as well as any .quote block placed in CMS pages.
   ========================================================================== */
body section.flex.no-mobile {
    background: #ffffff !important;
    padding: 36px 0 28px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

body section.flex.no-mobile > div {
    width: 100% !important;
    max-width: var(--container-width) !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 54px !important;
    overflow: visible !important;
}

/* Optional modifier classes on section.flex.no-mobile to flip column order via CSS */
body section.flex.no-mobile.quote-left > div,
body section.flex.no-mobile.image-right > div {
    flex-direction: row-reverse !important;
}

body section.flex.no-mobile > div > div.col-md-4.bigphoto {
    flex: 0 0 504px !important;
    width: 504px !important;
    max-width: 46% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

body section.flex.no-mobile > div > div.col-md-4.bigphoto .ContentAdmin.contentParent,
body section.flex.no-mobile > div > div.col-md-4.bigphoto .contentLayout,
body section.flex.no-mobile > div > div.col-md-4.bigphoto .sorter {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: inherit !important;
    box-sizing: border-box !important;
}

body section.flex.no-mobile > div > div.col-md-4.bigphoto .imageBlock {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 504 / 233;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Blue photo tint (#4cc2f1 blend) + Canva's yellow brush-stroke border frame
   (left frame when .bigphoto is first, right frame when .bigphoto is second) */
body section.flex > div > div.col-md-4.bigphoto .imageBlock::before,
body .bigphoto .imageBlock::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: #4cc2f1 !important;
    mix-blend-mode: color !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body section.flex > div > div.col-md-4.bigphoto .imageBlock::after,
body .bigphoto .imageBlock::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent url(/Content/Images/quote_photo_frame_left.png) no-repeat center / 100% 100% !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

body section.flex > div > .col-md-8 + div.col-md-4.bigphoto .imageBlock::after,
body section.flex.quote-left > div > div.col-md-4.bigphoto .imageBlock::after,
body section.flex.image-right > div > div.col-md-4.bigphoto .imageBlock::after,
body .col-md-8 + .bigphoto .imageBlock::after,
body .bigphoto:last-child:not(:first-child) .imageBlock::after {
    background-image: url(/Content/Images/quote_photo_frame_right.png) !important;
}

/* Pre-composited home_quote_photo.png already contains the blue duotone and yellow brush frame;
   suppress the duplicate pseudo-element overlays and auto-swap to the right-framed asset when on the right */
body section.flex > div > div.col-md-4.bigphoto .imageBlock:has(img[src*="home_quote_photo"])::before,
body section.flex > div > div.col-md-4.bigphoto .imageBlock:has(img[src*="home_quote_photo"])::after,
body .bigphoto .imageBlock:has(img[src*="home_quote_photo"])::before,
body .bigphoto .imageBlock:has(img[src*="home_quote_photo"])::after {
    display: none !important;
    content: none !important;
}

body section.flex > div > div.col-md-4.bigphoto .imageBlock > img,
body .bigphoto .imageBlock img {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
    display: block !important;
}

body section.flex > div > .col-md-8 + div.col-md-4.bigphoto .imageBlock img[src*="home_quote_photo.png"],
body section.flex.quote-left > div > div.col-md-4.bigphoto .imageBlock img[src*="home_quote_photo.png"],
body section.flex.image-right > div > div.col-md-4.bigphoto .imageBlock img[src*="home_quote_photo.png"],
body .col-md-8 + .bigphoto .imageBlock img[src*="home_quote_photo.png"],
body .bigphoto:last-child:not(:first-child) .imageBlock img[src*="home_quote_photo.png"] {
    content: url(/Content/Images/home_quote_photo_right.png);
}

body section.flex.no-mobile > div > .col-md-8 {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 680px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

body section.flex.no-mobile > div > .col-md-8 > .ContentAdmin.contentParent,
body section.flex.no-mobile > div > .col-md-8 .contentLayout,
body section.flex.no-mobile > div > .col-md-8 .sorter {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Universal CMS & Homepage Quote styling — renders all .quote blocks (.quote, .quote.big, .quote.small, .quote.citaat)
   identically with pure CSS pink quote marks via ::before and ::after */
body .quote,
body .quote.big,
body .quote.small,
body .quote.citaat,
body section.flex .quote,
body section.flex.no-mobile .quote.big,
body .bigquote .quote {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 33px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 45.333px !important;
    color: #000000 !important;
    text-transform: none !important;
    text-align: center !important;
    position: relative !important;
    width: fit-content !important;
    max-width: min(100%, 680px) !important;
    margin: 0 auto !important;
    padding: 18px 56px !important;
    display: block !important;
    box-sizing: border-box !important;
}

body .quote > span,
body .quote.big > span,
body .quote.small > span,
body .quote.citaat > span,
body section.flex .quote > span,
body section.flex.no-mobile .quote.big .textBox,
body .bigquote .quote > span {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: inherit !important;
    color: #000000 !important;
    text-transform: none !important;
    text-wrap: balance !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    display: block !important;
}

body .quote > span::before,
body .quote.big > span::before,
body .quote.small > span::before,
body .quote.citaat > span::before,
body section.flex .quote > span::before,
body .bigquote .quote > span::before {
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    width: 70px !important;
    height: 45px !important;
    background: transparent url(/Content/Images/quote_mark_pink.png) no-repeat center / contain !important;
    transform: rotate(180deg) !important;
    pointer-events: none !important;
}

body .quote > span::after,
body .quote.big > span::after,
body .quote.small > span::after,
body .quote.citaat > span::after,
body section.flex .quote > span::after,
body .bigquote .quote > span::after {
    content: "" !important;
    position: absolute !important;
    bottom: -14px !important;
    right: 0 !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 70px !important;
    height: 45px !important;
    background: transparent url(/Content/Images/quote_mark_pink.png) no-repeat center / contain !important;
    transform: none !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Canva Page 2 — Split 1/3 Nieuws + Separator Line + 2/3 In de kijker
   ========================================================================== */
body section.newsupdates.tt-home-news-kijker {
    background: #ffffff !important;
    padding: 24px 0 56px 0 !important;
    margin: 0 !important;
}

body section.newsupdates.tt-home-news-kijker > .tt-news-kijker-grid {
    width: 100% !important;
    max-width: var(--container-width) !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 209px 7px 439px;
    column-gap: 56px;
    align-items: stretch;
    justify-content: center;
}

body section.newsupdates.tt-home-news-kijker .homenieuws,
body section.newsupdates.tt-home-news-kijker .homeidk {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

body section.newsupdates.tt-home-news-kijker .homeidk::before,
body section.newsupdates.tt-home-news-kijker .homeidk::after {
    content: none !important;
    display: none !important;
}

/* Headings: Anybody Regular 40px (30pt) #000000 with pink dot / pink exclamation mark */
body section.newsupdates.tt-home-news-kijker .homenieuws > h2,
body section.newsupdates.tt-home-news-kijker .homeidk > h2 {
    font-family: "Anybody", sans-serif !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.05 !important;
    color: #000000 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border: none !important;
    min-height: 44px !important;
    margin: 12px 0 22px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws > h2::after,
body section.newsupdates.tt-home-news-kijker .homeidk > h2::after {
    content: none !important;
    display: none !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws > h2 > a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: #000000 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: baseline;
}

body section.newsupdates.tt-home-news-kijker .tt-heading-dot {
    display: inline-block;
    width: 18.3px;
    height: 18.3px;
    border-radius: 50%;
    background-color: #f094bd;
    margin-left: 2px;
    flex-shrink: 0;
}

body section.newsupdates.tt-home-news-kijker .tt-heading-exclamation {
    display: inline-block;
    width: 14.5px !important;
    height: 41.2px !important;
    object-fit: contain;
    margin-left: 12px;
    margin-top: -12px;
    margin-bottom: -8px;
    transform: translateY(3px);
    flex-shrink: 0;
}

/* Vertical separator line between Nieuws (1/3) and In de kijker (2/3) */
body section.newsupdates.tt-home-news-kijker .tt-news-kijker-separator {
    width: 7px !important;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

body section.newsupdates.tt-home-news-kijker .tt-news-kijker-separator img {
    width: 7px;
    height: 100%;
    min-height: 468px;
    object-fit: fill;
    display: block;
}

/* Hide "Eerdere berichten..." wrapper on homepage 1-item Nieuws column */
body section.newsupdates.tt-home-news-kijker .homenieuws .regiofilter {
    display: none !important;
}

/* Card containers inside Nieuws (1 card) and In de kijker (2 cards side by side) */
body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 21px !important;
    flex: 1 1 auto;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative;
}

/* Card Thumbnail (209x157 px on Canva Page 2) */
body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-thumb,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-thumb {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 157px !important;
    min-height: 157px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    flex: 0 0 157px !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-thumb > a.hvr,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-thumb > a.hvr {
    display: block !important;
    width: 100% !important;
    height: 157px !important;
    max-width: 100% !important;
    max-height: 157px !important;
    border-radius: 0 !important;
    overflow: hidden;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-thumb > a.hvr > img,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-thumb > a.hvr > img {
    width: 100% !important;
    height: 157px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Card Content wrapper */
body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > hr {
    display: none !important;
}

/* Card Title: Funnel Sans Bold 21.33px (16pt) #00488c */
body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > h3,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > h3 {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 21.333px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 25.333px !important;
    color: #00488c !important;
    text-transform: none !important;
    text-align: left !important;
    height: auto !important;
    min-height: 51px;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > h3 > a,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > h3 > a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: #00488c !important;
    text-decoration: none !important;
}

/* Card Excerpt: Funnel Sans Regular 17.33px (13pt), line-height 24px (18pt), #000000 */
body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > p,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > p {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 17.333px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 24px !important;
    color: #000000 !important;
    text-align: left !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
}

/* Card Footer: date (Funnel Sans Light 12px #00488c) + meer lezen (Funnel Sans Regular 14.66px #00488c + arrow) */
body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > div.fb-readmore-footer,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > div.tt-idk-footer {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 24px !important;
    max-height: none !important;
    line-height: 20px !important;
    margin: auto 0 0 0 !important;
    padding: 0 !important;
}

/* Hide legacy social share cells in In de kijker footer */
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > div.tt-idk-footer > span:not(.tt-idk-more) {
    display: none !important;
}

body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > div.tt-idk-footer > span.tt-idk-more {
    display: inline-flex !important;
    width: auto !important;
    margin-left: auto !important;
    text-align: right !important;
    font-style: normal !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > div.fb-readmore-footer > span.tt-news-date {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    color: #00488c !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > div.fb-readmore-footer > span.tt-news-more > a,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > div.tt-idk-footer > span.tt-idk-more > a {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 14.66px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    color: #00488c !important;
    text-decoration: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > div.fb-readmore-footer > span.tt-news-more > a::before,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > div.tt-idk-footer > span.tt-idk-more > a::before {
    content: none !important;
    display: none !important;
}

body section.newsupdates.tt-home-news-kijker .homenieuws .newscontainer > .tt-news-item > span.tt-news-content > div.fb-readmore-footer > span.tt-news-more > a::after,
body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer > .item > span.tt-idk-content > div.tt-idk-footer > span.tt-idk-more > a::after {
    content: "" !important;
    display: inline-block !important;
    width: 33px !important;
    height: 20px !important;
    background: url(/Content/Images/arrow_readmore_blue.png) no-repeat center center / contain !important;
    flex-shrink: 0;
}

/* ==========================================================================
   Canva Page 3 — Site-wide 3-band Footer (footer.tt-footer)
   Band 1: #f5f2e6 (cream) — logo left, nav + project text center, search + social + partner logos right
   Band 2: #5567d8 (indigo) — centered address + Vlaanderen logo right
   Band 3: #00488c (dark blue) — centered legal links with cream vertical dividers
   ========================================================================== */
body footer.tt-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Band 1: Top cream section */
body footer.tt-footer > section.tt-footer-top {
    background-color: #f5f2e6 !important;
    min-height: 280px !important;
    padding: 20px 0 !important;
    overflow: visible;
}

body footer.tt-footer > section.tt-footer-top > .tt-footer-top-inner {
    width: 100% !important;
    max-width: var(--container-width) !important;
    margin: 0 auto !important;
    padding: 0 56px 0 36px !important;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 350px minmax(0, 1fr) 222px;
    column-gap: 44px;
    align-items: stretch;
}

body footer.tt-footer .tt-footer-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body footer.tt-footer .tt-footer-logo {
    display: inline-block;
    text-decoration: none;
}

body footer.tt-footer .tt-footer-logo img {
    width: 342px;
    max-width: 100%;
    height: auto;
    display: block;
}

body footer.tt-footer .tt-footer-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 36px 0 34px 0 !important;
    text-align: left !important;
}

body footer.tt-footer .tt-footer-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 546px;
}

body footer.tt-footer .tt-footer-nav > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 21.333px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    color: #000000 !important;
    text-decoration: none !important;
    text-transform: lowercase;
}

body footer.tt-footer .tt-footer-nav > a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% - 4px);
    width: 71px;
    height: 55px;
    transform: translateX(-50%) translateY(-6px);
    background: url(/Content/Images/menu_hand_tt.png) no-repeat center bottom / contain !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
}

body footer.tt-footer .tt-footer-nav > a:hover::before,
body footer.tt-footer .tt-footer-nav > a:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body footer.tt-footer .tt-footer-nav > a > span {
    display: inline-block;
    transition: transform 0.2s ease;
}

body footer.tt-footer .tt-footer-nav > a:hover > span,
body footer.tt-footer .tt-footer-nav > a:focus-visible > span {
    transform: translateY(14px);
    color: #000000 !important;
}

body footer.tt-footer .tt-footer-project {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 17.333px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 24px !important;
    color: #000000 !important;
    margin: 44px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body footer.tt-footer .tt-footer-project strong {
    font-family: "Funnel Sans", sans-serif !important;
    font-weight: 700 !important;
}

body footer.tt-footer .tt-footer-pink-dot {
    display: inline-block;
    width: 11.2px;
    height: 11.2px;
    border-radius: 50%;
    background-color: #f094bd;
    margin-left: 3px;
    vertical-align: baseline;
}

body footer.tt-footer .tt-footer-right {
    width: 222px !important;
    max-width: 222px !important;
    flex: none !important;
    padding: 36px 0 8px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

body footer.tt-footer .tt-footer-right > div.search {
    width: 222px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body footer.tt-footer .tt-footer-right > div.search input.dosearch {
    width: 222px !important;
    max-width: 222px !important;
    height: 30px !important;
    border-radius: 999px !important;
    border: 1.5px solid #010019 !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cline x1='16' y1='16' x2='21.5' y2='21.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 15px 15px !important;
    padding: 3px 32px 3px 14px !important;
    font-family: "Funnel Sans", sans-serif !important;
    font-style: normal !important;
    font-size: 14px !important;
    color: #010019 !important;
    outline: none;
    box-shadow: none;
}

body footer.tt-footer .tt-footer-right .footer-social {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
}

body footer.tt-footer .tt-footer-right .footer-social > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

body footer.tt-footer .tt-footer-right .footer-social > a > img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain;
    display: block;
}

body footer.tt-footer .tt-footer-partners {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 18px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

body footer.tt-footer .tt-footer-partners .tt-partner-vds img {
    width: 76px;
    height: 91px;
    object-fit: contain;
    display: block;
}

body footer.tt-footer .tt-footer-partners .tt-partner-taalheld img {
    width: 87px;
    height: 92px;
    object-fit: contain;
    display: block;
}

/* Band 2: Middle indigo (#5567d8) section */
body footer.tt-footer > section.tt-footer-mid {
    background-color: #5567d8 !important;
    min-height: 106px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

body footer.tt-footer > section.tt-footer-mid > .tt-footer-mid-inner {
    width: 100% !important;
    max-width: var(--container-width) !important;
    min-height: 106px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 40px !important;
    box-sizing: border-box;
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
}

body footer.tt-footer .tt-footer-address {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 17.333px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 24px !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

body footer.tt-footer .tt-footer-address a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body footer.tt-footer .tt-footer-address a:hover {
    text-decoration: underline !important;
}

body footer.tt-footer .tt-footer-vlaanderen {
    position: absolute;
    right: 183px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

body footer.tt-footer .tt-footer-vlaanderen img {
    width: 213px;
    height: 83px;
    object-fit: contain;
    display: block;
}

/* Band 3: Bottom dark blue (#00488c) section */
body footer.tt-footer > section.tt-footer-bottom {
    background-color: #00488c !important;
    min-height: 50px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

body footer.tt-footer > section.tt-footer-bottom > .tt-footer-bottom-inner {
    width: 100% !important;
    max-width: var(--container-width) !important;
    min-height: 50px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 10px 24px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
}

body footer.tt-footer .tt-footer-legal {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0 !important;
}

body footer.tt-footer .tt-footer-legal > a {
    font-family: "Funnel Sans", sans-serif !important;
    font-size: 14.66px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 20px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0 12px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

body footer.tt-footer .tt-footer-legal > a + a {
    border-left: 1px solid #f5f2e6;
}

body footer.tt-footer .tt-footer-legal > a:hover {
    text-decoration: underline !important;
}

/* Responsive adjustments for tablet & mobile */
@media (max-width: 1180px) {
    body section.flex.no-mobile > div {
        gap: 24px !important;
        justify-content: center !important;
    }

    body section.flex.no-mobile > div > div.col-md-4.bigphoto {
        flex: 0 1 420px !important;
        max-width: 420px !important;
    }

    body footer.tt-footer > section.tt-footer-top > .tt-footer-top-inner {
        grid-template-columns: 260px minmax(0, 1fr) 222px;
        column-gap: 24px;
        padding: 0 24px !important;
    }

    body footer.tt-footer .tt-footer-vlaanderen {
        right: 24px;
    }
}

@media (max-device-width: 768px) and (orientation:portrait), (max-width: 850px) {
    body section.flex.no-mobile > div,
    body section.flex.no-mobile.quote-left > div,
    body section.flex.no-mobile.image-right > div {
        flex-direction: column !important;
        padding: 0 16px !important;
        gap: 20px !important;
    }

    body section.flex.no-mobile > div > div.col-md-4.bigphoto,
    body section.flex.no-mobile > div > .col-md-8 {
        flex: none !important;
        width: 100% !important;
        max-width: 488px !important;
    }

    body section.flex.no-mobile > div > div.col-md-4.bigphoto .ContentAdmin.contentParent,
    body section.flex.no-mobile > div > div.col-md-4.bigphoto > div.col-sm-12.contentLayout,
    body section.flex.no-mobile > div > div.col-md-4.bigphoto > div.col-sm-12.contentLayout > div.sorter.clearfix,
    body section.flex.no-mobile > div > div.col-md-4.bigphoto > div.col-sm-12.contentLayout > div.sorter.clearfix > div.imageBlock,
    body section.flex.no-mobile > div > div.col-md-4.bigphoto > div.col-sm-12.contentLayout > div.sorter.clearfix > div.imageBlock > img,
    body section.flex > div > div.col-md-4.bigphoto .contentLayout,
    body section.flex > div > div.col-md-4.bigphoto .sorter,
    body section.flex > div > div.col-md-4.bigphoto .imageBlock,
    body section.flex > div > div.col-md-4.bigphoto .imageBlock > img {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .quote,
    body .quote.big,
    body .quote.small,
    body .quote.citaat,
    body section.flex .quote,
    body section.flex.no-mobile .quote.big,
    body .bigquote .quote {
        font-size: 24px !important;
        line-height: 34px !important;
    }

    body section.newsupdates.tt-home-news-kijker > .tt-news-kijker-grid {
        grid-template-columns: 1fr !important;
        row-gap: 32px;
        max-width: 480px !important;
        padding: 0 20px !important;
    }

    body section.newsupdates.tt-home-news-kijker .tt-news-kijker-separator {
        display: none !important;
    }

    body section.newsupdates.tt-home-news-kijker .homeidk > .idkcontainer {
        grid-template-columns: 1fr !important;
        row-gap: 28px !important;
    }

    body footer.tt-footer > section.tt-footer-top > .tt-footer-top-inner {
        grid-template-columns: 1fr !important;
        row-gap: 24px;
        justify-items: center;
        text-align: center !important;
    }

    body footer.tt-footer .tt-footer-center {
        padding: 12px 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    body footer.tt-footer .tt-footer-nav {
        justify-content: center !important;
    }

    body footer.tt-footer .tt-footer-project {
        text-align: center !important;
        margin-top: 24px !important;
    }

    body footer.tt-footer .tt-footer-right {
        padding: 0 0 12px 0 !important;
    }

    body footer.tt-footer > section.tt-footer-mid > .tt-footer-mid-inner {
        flex-direction: column !important;
        gap: 16px;
        padding: 20px 16px !important;
    }

    body footer.tt-footer .tt-footer-vlaanderen {
        position: static;
        transform: none;
    }
}