/**
 * Theme specifieke css styles (aanvullend of overschrijvend)
 * Plaats hier alleen css-rules die daadwerkelijk gebruikt worden
 */

@font-face {
    font-family: 'Nexa-Regular';
    src: url('../fonts/nexa-regular.eot?#iefix') format('embedded-opentype');
    src: url('../fonts/nexa-regular.woff') format('woff'), url('../fonts/nexa-regular.ttf') format('truetype'), url('../fonts/nexa-regular.svg#nexa-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nexa-Heavy';
    src: url('../fonts/nexa-heavy.eot?#iefix') format('embedded-opentype');
    src: url('../fonts/nexa-heavy.woff') format('woff'), url('../fonts/nexa-heavy.ttf') format('truetype'), url('../fonts/nexa-heavy.svg#nexa-heavy') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root {

    /* Blueprint vars override */

    --blueprint-block-margin-top: 2rem;
    --blueprint-block-margin-bottom: 2rem;

    --blueprint-padding-small: 1rem;
    --blueprint-padding-medium: 4rem;
    --blueprint-padding-large: 5rem;

    --blueprint-column-gap-small: 1rem;
    --blueprint-column-gap-medium: 2rem;
    --blueprint-column-gap-large: 4rem;

    /* uit de Figma styleguide */

    --color-accent: #DC2A9A;
    --color-neutraal: #fff;
    --color-donker: #222828;
    --color-achtergrond: #E9EFF3;

    --white: #ffffff;

    --h1-font-size: 3.5rem;
    --h2-font-size: 3rem;
    --h3-font-size: 2.5rem;
    --h4-font-size: 2rem;
    --h5-font-size: 1.5rem;
    --h6-font-size: 1.25rem;

    --h1-line-height: 1.2;
    --h2-line-height: 1.2;
    --h3-line-height: 1.3;
    --h4-line-height: 1.4;
    --h5-line-height: 1.4;
    --h6-line-height: 1.4;

    --text-large-font-size: 1.25rem;
    --text-medium-font-size: 1.125rem;
    --text-regular-font-size: 1rem;
    --text-small-font-size: 0.875rem;
    --text-tiny-font-size: 0.75rem;

    --border-radius-large: 1rem;

    --margin-padding-small: 0.5rem;
    --margin-padding-large: 1rem;

    /* Podium theme vars */

    --theme-height-header-menu: 100px;
    --theme-width-breakpoint-up: 1280px;


    --project-max-width: 1280px;
    --blog-max-width: 1024px;


    --theme-width-breakpoint-small: 1024px; /*ten behoeve van iets naar binnen inspringen*/

    --animation-scale-transition: transform 0.5s ease; /* 500 Ms */

    --text-shadow-kaartjes: 0 12px 16px rgba(0, 0, 0, 0.08), 0 4px 5px rgba(0, 0, 0, 0.03);
    --text-shadow-kopje: 0 12px 16px rgba(0, 0, 0, 0.08), 0 4px 5px rgba(0, 0, 0, 0.7);
    --text-shadow-kopje-lichter: 0 12px 16px rgba(0, 0, 0, 0.08), 0 4px 5px rgba(0, 0, 0, 0.5);

    --swiper-navigation-size: 30px !important;
    --swiper-navigation-sides-offset: 0px !important;

    --theme-mobile-padding-main: 0.6rem;
}

@media screen and (max-width: 800px) {
    /* rare safari quirk met text-shadow, herstel voor mobiel */
    :root
    {
        --text-shadow-kopje-lichter: 0 12px 16px rgba(0, 0, 0, 0.08), 0 4px 5px rgba(0, 0, 0, 0.35);
    }
}

/* UTILITY CLASSES */

.invisible {
    display: none;
}

.desktop {
    display: unset; /* standaard waarde */
}

.mobile {
    display: none; /* standaard waarde */
}

.color-accent {
    color: var(--color-accent);
}

/* --- MAIN CONTAINERS */

body {
    width: 100%;
    font-family: 'Nexa-Regular', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-donker);
}

header {
    width: 100%;
    background-color: #ffffff;
}

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--blueprint-padding-small);
    padding-bottom: var(--blueprint-padding-medium);
}

main > div,
header .content-wrapper,
.case-header {
    width: 100%;
    max-width: var(--theme-width-breakpoint-up);
    margin-left: auto;
    margin-right: auto;
}

.project-header {
    width: 100%;
    max-width: var(--project-max-width);
    margin-left: auto;
    margin-right: auto;
}

.blog-header {
    width: 100%;
    max-width: var(--project-max-width);
    margin-left: auto;
    margin-right: auto;
}


footer {
    width: calc(100% - (2 * var(--blueprint-padding-small)));
    margin: var(--blueprint-padding-small);
}

/* --- BLOCK MARGIN & PADDING */
.content-wrapper,
.text-image,
.text-big,
.title-intro,
.working-method-cards,
.working-method-list,
.case-flipcard-tiles,
.project-flipcard-tiles,
.project-include-tiles,
.three-text-blocks,
.photo-gallery,
main > div.heading,
main > div.text,
main > div.columns,
main > div.image,
.video-embed,
.case-column-tiles,
.team-tiles,
.contact-block {
    padding-left: var(--blueprint-padding-medium);
    padding-right: var(--blueprint-padding-medium);
}

main > div.image {
    width: 100%;
}

iframe {
    border-radius: var(--border-radius-large);
}

main div.image-slider {
    /* This matches ALL descendants of main */
    /* image sliders in eigen layout */
    width: 100%;
}

/* But this one only matches direct children */
main > div.image-slider {
    /* Rule for direct child */
    width: calc(100% - (2 * var(--blueprint-padding-small)));
    max-width: var(--theme-width-breakpoint-up);
}

main > .image-slider .swiper-slide img {
    aspect-ratio: 16 / 9;
}

/* --- FULL WIDTH UITZONDERINGEN */

.page-image-header,
.photo-banner,
.case-header {
    padding-left: var(--blueprint-padding-medium);
    padding-right: var(--blueprint-padding-medium);
}

.photo-banner {
    max-width: 100%;
}

.page-image-header {
    margin-left: var(--blueprint-padding-small);
    margin-right: var(--blueprint-padding-small);
}

.case-slider-tiles {
    max-width: unset;
    height: calc(100vh - var(--theme-height-header-menu));
    padding-left: var(--blueprint-padding-small);
    padding-right: var(--blueprint-padding-small);
}

.case-slider-tiles > .swiper {
    height: calc(100vh - var(--theme-height-header-menu));
}

.case-slider-tiles > .swiper {
    height: calc(100vh - var(--theme-height-header-menu) - 1.8rem);
}


.project-slider-tiles {
    max-width: unset;
    height: calc(100vh - var(--theme-height-header-menu));
    padding-left: var(--blueprint-padding-small);
    padding-right: var(--blueprint-padding-small);
}

.project-slider-tiles > .swiper {
    height: calc(100vh - var(--theme-height-header-menu));
}

.expertises {
    width: calc(100% - (2 * var(--blueprint-padding-small)));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.heading.center, .heading.center-desktop {
    text-align: center;
}

@media screen and (max-width: 800px) {
    .heading.center-desktop {
        display: none;
    }

    main {
        padding-bottom: 0;
    }


}

/* --- MOBILE */

@media screen and (max-width: 480px) {
    .content-wrapper,
    .page-image-header,
    .expertises,
    .text-image,
    .text-big,
    .title-intro,
    .working-method-cards,
    .working-method-list,
    .contact-block,
    .case-slider-tiles,
    .project-slider-tiles,
    .case-banner-tiles,
    .case-flipcard-tiles,
    .project-flipcard-tiles,
    .project-include-tiles,
    .case-header,
    .project-header,

    .three-text-blocks,
    .photo-gallery,
    main > div.heading,

    main > div.columns,
    main > div.image {
        padding-left: 0;
        padding-right: 0;
    }

    .page-image-header,
    .photo-banner,
    .case-slider-tiles,
    .project-slider-tiles,
    .case-column-tiles,
    .case-header,
    .project-header,
    .expertises,
    main > div.text,
    .contact-block {
        padding-left: var(--theme-mobile-padding-main);
        padding-right: var(--theme-mobile-padding-small);
    }



}

.title-intro,
.three-text-blocks,
.quote,
.team-cta,
.expertises,
.photo-gallery,
.case-column-tiles,
.working-method-list {
    display: flex;
    padding-top: var(--blueprint-padding-large);
    padding-bottom: var(--blueprint-padding-large);
}

.case-header {
    padding-top: var(--blueprint-padding-large);
    padding-left: var(--blueprint-padding-medium);
    padding-right: var(--blueprint-padding-medium);
}

.project-header {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.blog-header {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}
@media screen and (max-width: 480px) {
    .blog-header
    {
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }
}

.contact-block {
    padding-top: 8rem;
}

/* --- COLUMNS */

.columns {
    gap: var(--blueprint-column-gap-medium);
}

.column div.image {
    margin-bottom: var(--blueprint-column-gap-medium);
}

.column div.image:last-of-type {
    margin-bottom: 0;
}

/* er zijn drie block_types cols50_50 cols40_60 en cols60_40
 * 40_60 en 60_40 zorgen dat de kolommaten aangepast worden
 */

.columns.columns-2 > .column {
    width: 50%;
    flex: unset;
    overflow: hidden;
}

.columns.columns-2.cols40_60 > .column:nth-child(1) {
    width: 40%;
    flex: unset;
}

.columns.columns-2.cols40_60 > .column:nth-child(2) {
    width: 60%;
    flex: unset;
}

.columns.columns-2.cols60_40 > .column:nth-child(1) {
    width: 60%;
    flex: unset;
}

.columns.columns-2.cols60_40 > .column:nth-child(2) {
    width: 40%;
    flex: unset;
}


@media screen and (max-width: 960px) {

    .columns.columns-2,
    .columns {
        flex-direction: column;
        gap: 1rem;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }

    .columns.columns-2 > .column,
    .columns.columns-2.cols40_60 > .column:nth-child(1),
    .columns.columns-2.cols40_60 > .column:nth-child(2),
    .columns.columns-2.cols60_40 > .column:nth-child(1),
    .columns.columns-2.cols60_40 > .column:nth-child(2) {
        width: 100%;
    }

    .columns.columns-2 > .column > .heading h2 {
        padding-bottom: 0;
    }
    .columns.columns-2 > .column > .text {
        padding: 0;
    }

}


/* --- contact-block */

.contact-block {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.contact-block .form-wrapper {
    width: 50%;
}

.contact-block .form-wrapper.alt {
    width: 50%;
    align-self: center; /* tweak */
}

.contact-block .form-wrapper h2 {
    font-size: var(--h3-font-size);
    padding-bottom: 0;
}

.contact-block .form-wrapper img.logo {
    height: 3rem;
    width: auto;
    margin-bottom: var(--margin-padding-small);
}

.contact-block .info-wrapper {
    width: 50%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding-top: 3.5rem;
}

.contact-block .required-text {
    display: none;
}


.contact-block .info-wrapper .address-wrapper {
    width: 50%;
}

.contact-block .info-wrapper .contact-wrapper {
    width: 50%;
    padding-top: 3rem;
}

.contact-block .address-wrapper .img-ani-wrapper {
    aspect-ratio: 11 / 15;
}

.contact-block .contact-wrapper .img-ani-wrapper {
    aspect-ratio: 11 / 12;
}

/* alt styling contact */

.contact-block .info-cards {
    width: 50%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.contact-block .info-cards > .col {
    width: 50%;
}

.contact-block .info-cards > .col:first-of-type {
    padding-top: 9rem;
}

.contact-block .info-cards .infocard {
    display: block; /* not flex (unless you need it internally) */
    background-color: #E9EFF3;
    border-radius: var(--border-radius-large);
    color: var(--color-donker);
    padding: 2rem;
    break-inside: avoid; /* keep a card intact */
    margin: 0 0 var(--margin-padding-large);
    width: auto; /* let columns control the width */
}

.contact-block .info-cards .infocard-roze {
    background-color: var(--color-accent);
    color: #ffffff;
}

.contact-block .infocard img.infocard-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.8rem;
}

.contact-block .infocard h3 {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: 140%; /* 1.75rem */
    letter-spacing: 0.0125rem;
}

.contact-block .infocard span {
    display: block;
}

.contact-block .infocard p {
    margin-bottom: 0;
}

.contact-block .infocard a {
    display: block;
    text-decoration: underline;
    color: var(--color-donker);
}

.contact-block .infocard-roze a {
    color: #ffffff;
}

@media screen and (max-width: 960px) {

    .contact-block .info-cards {
        width: 100%;
    }

    .contact-block .form-wrapper.alt {
        width: 100%;

    }

}



.contact-block .address-icon,
.contact-block .contact-icon {
    height: var(--h4-font-size);
    width: auto;
    padding-right: 1rem;
}

.contact-block .info-wrapper .address-wrapper .address {
    background-color: var(--color-accent);
    border-radius: var(--border-radius-large);
    color: #fff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--margin-padding-large);
}


.contact-block .info-wrapper .contact-wrapper .contact {
    background-color: var(--color-achtergrond);
    border-radius: var(--border-radius-large);
    color: #000;
    padding: 2rem;
    margin-top: var(--margin-padding-large);
    display: flex;
    flex-direction: column;
}

.contact-block .heading-wrapper {
    display: flex;
}

.contact-block h3 {
    font-size: var(--h4-font-size);
    padding-bottom: 0;
}

.contact-block .info-wrapper .contact-wrapper .contact a {
    text-decoration: none;
    color: #000;
}


@media screen and (max-width: 640px) {

    .contact-block {
        gap:0;
    }

    .contact-block .info-wrapper {
        display: flex;
        flex-direction: column;
        padding-top: 0;
        gap:0;
    }

    .contact-block .info-wrapper .address-wrapper .address {
        margin-bottom: 0;
    }


    .contact-block .img-ani-wrapper {
        display: none;
    }


    .contact-block .info-wrapper .address-wrapper,
    .contact-block .info-wrapper .contact-wrapper {
        width: 100%;
        padding-top: 0;
    }

    .contact-block .info-cards {
        width: 100%;
        flex-direction: column;
        padding-top: 1rem;
        gap: 0;
    }

    .contact-block .info-cards > .col {
        width: 100%;
        padding-top: 0;
    }

    .contact-block .info-cards > .col:first-of-type {
        padding-top: 0;
    }

    .contact-block .infocard a {
        text-decoration: none;
    }

}

/* --- FOOTER */

footer {
    border-radius: var(--border-radius-large);
    margin-top: 4rem;
    padding: 2rem;
    background-color: var(--color-donker);
    color: var(--color-neutraal);
}

footer a, footer .menu-helper__menu_item a, footer a:visited {
    color: var(--color-neutraal);
}

footer .first-row,
footer .second-row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}

footer .first-row {
    margin-bottom: 2rem;
}

footer .first-row .form-wrapper {
    width: 50%;
}

footer .form-wrapper p.form-intro {
    font-size: var(--text-small-font-size);
    margin-bottom: 1rem;
}

footer .form-wrapper p.form-disclaimer {
    font-size: var(--text-small-font-size);
    margin-bottom: 0;
}

footer a.logo {
    display: block;
    max-width: 5rem;
    height: auto;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

footer a.logo:focus,
footer a.logo:focus-visible {
    border: var(--color-accent) solid 0.2rem;
}

footer .first-row .menu-wrapper {
    display: flex;
    justify-content: space-between;
    /* gap: 8rem; */
}

footer .menu-helper {
    margin-right: 6rem;
}

footer .second-row span {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 1.4rem */
}

footer .second-row span a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    padding-left: 1rem;
}

@media only screen and (max-width: 960px) {


    footer .first-row,
    footer .second-row {
        flex-direction: column;
    }

    footer .first-row .form-wrapper {
        width: 100%;
        margin-bottom: 2rem;
    }

    footer .first-row .menu-wrapper {
        flex-direction: column;
    }

    footer .menu-helper {
        justify-content: flex-start;
        margin-right: 0rem;
        margin-bottom: 2rem;
    }

    body.page.base.contact footer {
        margin-top: var(--blueprint-padding-small);
    }

    footer
    {
        margin: 2rem 0 0;
        width:100%;

    }

}

body.case footer
{
    margin-top: 1rem;
}

body.case main
{
    padding-bottom:1rem;
}


/* --- MENU in HEADER */

header .menu-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: var(--blueprint-padding-small);
}

header a.logo {
    position: absolute;
    text-decoration: none;
    align-self: flex-start;
}

header a.logo:focus,
header a.logo:focus-visible {
    border: var(--color-accent) solid 0.2rem;
}

header .menu {
    width: 100%;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: right;
}

header .menu-helper .menu-helper__menu_item:has(> a[href="/contact"]) {
    background-color: var(--color-accent);

    border-radius: 0.5rem;
}

header .menu-helper .menu-helper__menu_item:has(> a[href="/contact"]) a {

    color: #fff;

}

.menu-helper__menu {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.menu-helper__menu_item {
    font-size: 1rem;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 1.6rem */
}

.menu-helper__menu_item a {
    text-decoration: none;
    color: var(--color-donker);
}

.menu-helper__menu_item a:hover,
.menu-helper__menu_item a:focus-visible {
    text-decoration: underline;
}


/* MENU mobiele variant vanaf <= 800px */

div#button_mainmenu_icon {
    display: none;
    width: 3rem;
    height: 3rem;
}

header .menu-helper.menu {
    display: block; /* controlled by JS */
}

@media only screen and (max-width: 800px) {

    header {
        position: relative;
        z-index: 999999999;
    }

    header .menu {
        justify-content: left;
    }

    header a.logo {

    }

    div#button_mainmenu_icon {
        background-color: transparent;
        display: block;
        cursor: pointer;
        padding: 0.3rem;
    }

    header .menu-wrapper {
        flex-direction: column;
        align-items: flex-end;
        margin-bottom: 0;
    }

    header .menu-helper.menu {
        display: none; /* controlled by JS */
    }

    header .menu-helper__menu_item {
        font-size: 1rem;
    }

    header [role='menu'] {
        margin-top: 3rem;
        flex-direction: column;
        align-items: center;
        padding-left: 0;
    }


}

/* --- MENU in FOOTER */

.footer_expertises_menu ul,
.footer_menu ul {
    padding: 0;
    display: block;
}

footer ul li {
    padding: 0.5rem 0;
}

.footer_menu a.menu-helper__title {
    font-size: 1rem !important;
}

.footer_menu a.menu-helper__menu_item__link {
    font-size: 0.875rem !important;
    font-weight: 400;
}

.footer_menu a.menu-helper__menu_item__link.social_instagram,
.footer_menu a.menu-helper__menu_item__link.social_youtube,
.footer_menu a.menu-helper__menu_item__link.social_x,
.footer_menu a.menu-helper__menu_item__link.social_linkedin,
.footer_menu a.menu-helper__menu_item__link.social_facebook {
    padding-left: 1.5rem;
    padding-top: 0.1rem;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

.footer_menu a.menu-helper__menu_item__link.social_instagram {
    background-image: url(/assets/icons/social_instagram.svg);
}

.footer_menu a.menu-helper__menu_item__link.social_youtube {
    background-image: url(/assets/icons/social_youtube.svg);
}

.footer_menu a.menu-helper__menu_item__link.social_x {
    background-image: url(/assets/icons/social_x.svg);
}

.footer_menu a.menu-helper__menu_item__link.social_linkedin {
    background-image: url(/assets/icons/social_linkedin.svg);
}

.footer_menu a.menu-helper__menu_item__link.social_facebook {
    background-image: url(/assets/icons/social_facebook.svg);
}


.menu-helper.footer_menu a {
    color: #ffffff;
}


/* --- TYPOGRAFIE BASIS */

p {
    margin-bottom: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Nexa-Heavy', sans-serif;
    font-weight: normal;
}

h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    padding-bottom: 2rem;
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    padding-bottom: 1.5rem;
}

h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    padding-bottom: 1.5rem;
}

h5 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    padding-bottom: 1rem;
}

h6 {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    padding-bottom: 1rem;
}

.tagline {
    line-height: 1.5;
}

/* --- GENERIEKE ELEMENTEN */

img {
    border-radius: var(--border-radius-large);
}

/* --- BUTTONS & LINKS */

.text a {
    text-decoration: none;
    color: var(--color-accent);
    font-weight: bold;
}

.text-big a,
.blog-overview a,
.blog-slider a {
    font-size: var(--text-medium-font-size);
    text-decoration: none;
    color: var(--color-donker);
}

.text-big a:hover,
.blog-overview a:hover,
.blog-slider a:hover {
    text-decoration: underline;
}

a.cta::after,
a[data-as-button-theme="weblink"]::after,
div.cta::after,
.text-big a::after {
    vertical-align: middle;
    content: url('../../icons/cta_wit.svg');
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    margin-left: 0.4rem;
}

a[data-as-button-theme="weblink"]::after,
div.cta::after {
    content: url('../../icons/cta.svg');
}

button,
.button,
a.button,
a.cta,
a[data-as-button-theme="weblink"],
[role="button"] {
    transition: none;
    transform: scale(1.0);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    height: 2.8rem;
    line-height: 1;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.5rem;
    background: var(--color-accent);
    color: #ffffff;
    border-width: 0; /* browser override */
}

a[data-as-button-theme="weblink"] {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--color-donker);
    font-weight:normal;
}

button:hover,
.button:hover,
a.button:hover,
a.cta:hover,
a[data-as-button-theme="cta"]:hover,
a[data-as-button-theme="button"]:hover,
a[data-as-button-theme="weblink"]:hover,
[role="button"]:hover,
button:focus,
.button:focus,
a.button:focus,
a.cta:focus,
a[data-as-button-theme="cta"]:focus,
a[data-as-button-theme="button"]:focus,
a[data-as-button-theme="weblink"]:focus,
[role="button"]:focus,
button:focus-visible,
.button:focus-visible,
a.button:focus-visible,
a.cta:focus-visible,
a[data-as-button-theme="cta"]:focus-visible,
a[data-as-button-theme="button"]:focus-visible,
a[data-as-button-theme="weblink"]:focus-visible,
[role="button"]:focus-visible {
    transform: none;
    text-decoration: none;
}

@media screen and (max-width: 480px) {
    a[data-as-button-theme="weblink"] {
        font-size: var(--text-medium-font-size);
    }
}

/* --- OVERIG */

.title {
    font-weight: bold;
    font-size: 2rem;
}

.subtitle {
    font-weight: bold;
    font-size: 1.75rem;
}

.accent {
    color: var(--color-accent);
}

.neutral {
    color: var(--color-neutraal);
}

.donker {
    color: var(--color-donker);
}

.background {
    background-color: var(--color-achtergrond);
}

/* FORMS */

input[type="text"],
input[type="email"] {
    display: inline-flex;
    vertical-align: middle;
    height: 2.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.20);

    color: #ffffff;
}

.form_contact form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--margin-padding-large);
    margin-top: var(--margin-padding-large);
}

@media screen and (max-width: 960px) {

    .contact-block {
        display: flex;
        flex-direction: column;
        padding-top: 2rem;
    }

    .contact-block .form-wrapper,
    .contact-block .info-wrapper {
        width: 100%;
    }

    .contact-block .info-wrapper {
        margin-top: 1rem;
    }

    input[type="text"], input[type="email"] {
        display: block;
        margin-bottom: 1rem;
        gap: 0;
    }
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--margin-padding-small);
}

.form_contact input[type="text"],
.form_contact input[type="email"] {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--color-donker);
}

.form_contact textarea {
    padding: 1rem;
    margin-right: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--color-donker);
    height: 100px;
}

input[type="submit"] {
    cursor: pointer;
    display: inline-flex;
    vertical-align: middle;
    text-align: center;
    height: 2.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #ffffff;
}

.form_contact input[type="submit"] {
    width: fit-content;
}

input[type="submit"]:hover {
    text-decoration: underline;
}


/* layout_styles */

/* link_types */

/* BLOCKS */

.text {
    font-size: var(--text-medium-font-size);
    animation-name: appearOpacity;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/* -- CASE */

.case-header {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--blueprint-block-margin-bottom);
}

.case-header .header-left {
    width: 60%;
}

.case-header .header-right {

    width: 40%;
    padding-left: 5rem;
}

.case-header .header-right a,
.case-header .header-right a:hover {

    color: var(--color-accent);
}


@media screen and (max-width: 960px) {

    .case-header {
        flex-direction: column;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }

    .case-header .header-left {
        width: 100%;
    }

    .case-header .header-right {
        width: 100%;
        padding-left: unset;
        padding-top: var(--blueprint-block-margin-top);
    }


}

.case-header h2 {
    font-size: var(--h6-font-size);
    padding-bottom: 0;
}

.case-header .header-right div.text p {
    padding: 0;
    margin: 0;
}

.case-header .header-right div.text {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.case-header h1 {
    margin-bottom: 1.25rem;
}


.case-header .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--color-accent);
    line-height: 1;
}


.case-header .tags img {
    width: 16px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 0px;
    vertical-align: middle;
}


@media screen and (max-width: 540px) {

    .case-header .tags {
        flex-direction: column;
    }

    .case-header h1
    {
        font-size: 1.7rem;
    }

}

/* --- CASE SLIDER */
a.case-slider-tile {
    text-decoration: none;
    color: #ffffff;
    border-radius: var(--border-radius-large);
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto
}

.case-slider-tile img {
    /* komt te vervallen, img wordt background-image */
    border-radius: var(--border-radius-large);
}

.case-slider-tile .tile-information {
    position: absolute;
    z-index: 9;
    width: 90%;
    max-width: var(--theme-width-breakpoint-small);
    margin-left: 5%;
    bottom: 3rem;
    text-shadow: var(--text-shadow-kopje);
}

.case-slider-tile .tile-information div.heading h2 {
    padding-bottom: 0;
}

.case-slider-tile .tile-information .tagline {
    font-weight: 900;
}

/* --- CASE / FLIPCARD */
.case-flipcard-tiles {
    display: grid;
    justify-content: space-between; /* belangrijk voor witruimte */
    grid-template-columns: 32% 32% 32%;
    column-gap: 1%;
    row-gap: 1rem;
    padding-top: 0;
}

@media screen and (max-width: 960px) {

    .case-flipcard-tiles {
        grid-template-columns: 48% 48%;
    }

}

@media screen and (max-width: 480px) {

    .case-flipcard-tiles {
        grid-template-columns: 100%;
    }

}


.case-flipcard-tile {
    text-decoration: none;
    color: #ffffff;
    aspect-ratio: 1/1;
    text-align: center;
    align-content: center;

    text-shadow: var(--text-shadow-kopje);

    padding: var(--blueprint-padding-small);
    border-radius: var(--border-radius-large);
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.case-flipcard-tile h2 {
    display: none;
    font-family: 'Nexa-Regular';
    font-size: 1rem;
    padding-bottom: 0;
}

.case-flipcard-tile h3 {
    display: none;
    font-size: 1.5rem;
    padding-bottom: 0;
}

.case-flipcard-tile:hover h2,
.case-flipcard-tile:focus-visible h2,
.case-flipcard-tile:hover h3,
.case-flipcard-tile:focus-visible h3 {
    display: block;
}

@media screen and (max-width: 480px) {
    .case-flipcard-tile h2,
    .case-flipcard-tile h3 {
        display: block;
    }

}


/* --- CASE COLUMN TYPE */
.case-column-tiles {
    display: grid;
    justify-content: center;
    grid-template-columns: 48% 48%;
    column-gap: 40px;
    row-gap: 1rem;

}

.case-column-tiles .col2 {
    padding-top: 8rem;
}

@media screen and (max-width: 960px) {

    .case-column-tiles {
        grid-template-columns: 100%;
    }

    .case-column-tiles .col1, .case-column-tiles .col2 {
        width: 100%;
    }

    .case-column-tiles .col2 {
        padding-top: 0;
    }

}

.case-column-tile .tagline {
    display: block;
    padding-top: var(--blueprint-padding-small);
    width: 100%;

    font-size: 0.8rem;
    font-style: normal;
    font-weight: 900;
    line-height: 200%;
    color: #DC2A9A;
}

.case-column-tile {

    text-align: center;
    text-decoration: none;
    color: var(--color-donker);
    padding-bottom: var(--blueprint-padding-medium);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-large);
    padding: 0;

    width: 100%;
    display: flex;
    flex-direction: column;

    font-size: 1.5rem;
    font-style: normal;
    font-weight: 900;
    line-height: 140%; /* 2.1rem */
    letter-spacing: 0.015rem;
    text-align: left;
    padding-bottom: 1rem;
}

.case-column-tile h2 {

    line-height: var(--h5-line-height);

    font-size: 1.2rem;
    font-style: normal;
    font-weight: 900;
    line-height: 130%; /* 3.25rem */
    letter-spacing: 0.025rem;

    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.case-column-tile p {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;

    margin: 0;
    padding: 0;
}


/* --- BANNER TILES */
.case-banner-tiles {
    width: calc(100% - (2 * var(--blueprint-padding-small)));
    padding: var(--blueprint-padding-medium);
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: var(--border-radius-large);
    background-color: var(--color-achtergrond);
}

.case-banner-tile {
    display: flex;
    flex-direction: row;
    gap: 5rem;
    padding-bottom: var(--blueprint-padding-medium);
}

.case-banner-tile-content {
    width: 50%;
    align-content: center;
}

.case-banner-tile-image {
    width: 50%;
}

.case-banner-tile-content .tagline {
    color: var(--color-accent);
    font-weight: 900;
}

.case-banner-tile-content .heading h2 {
    padding-bottom: 0;
}

.case-banner-tile .inzetje {
    position: absolute;
    border-radius: 25px;
}

.case-banner-tile .inzetje0 {
    top: -31px;
    left: -66px;
    width: 200px;
    transform: rotate(-7deg);
    transform-origin: center;
}

.case-banner-tile .inzetje1 {
    top: -21px;
    right: -36px;
    width: 230px;
    transform: rotate(7deg);
    transform-origin: center;
}

.case-banner-tile .inzetje2 {
    top: 0px;
    left: -20px;
    width: 330px;
    transform: rotate(-3deg);
    transform-origin: center;
}

@media screen and (max-width: 960px) {

    .case-slider-tiles,
    .project-slider-tiles,
    .case-banner-tiles {
        margin-bottom: var(--margin-padding-large);
    }

    .case-banner-tiles {
        padding: var(--margin-padding-large);
        padding-top: 2rem;
    }

    .case-banner-tile {
        flex-direction: column;
        gap: 3rem;
    }

    .case-banner-tile-content,
    .case-banner-tile-image {
        width: 100%;
    }

    .case-banner-tile-content .text.desktop {
        display: none;
    }

    .case-banner-tile-content .text.mobile {
        display: block;
    }

    .case-slider-tile .tile-information .text.desktop {
        display: none;
    }

    .case-slider-tile .tile-information .text.mobile {
        display: block;
    }

    .case-banner-tile.odd {
        flex-direction: column-reverse;
    }

    .case-banner-tile-content .heading h2 {
        font-size: var(--h5-font-size);
    }

}


.project-header {

    margin-bottom: var(--blueprint-block-margin-bottom);
}

.project-header > .content-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--margin-padding-small);
}

.project-header > div.image {
    width: 100%;
    padding-bottom: var(--blueprint-padding-medium);
}

.project-header > .content-wrapper {
    padding-left: 0;
    padding-right: 0;
}

.project-header .header-left {
    width: 60%;
}

.project-header .text.introduction {
    font-weight: bold;
}

.project-header .header-right {

    width: 40%;
    padding-left: 1rem;
}

.project-header .header-right a,
.project-header .header-right a:hover {

    color: var(--color-accent);
}

.project-header div.tags {
    width: 100%;
    padding-bottom: var(--blueprint-padding-medium);
}


.blog-header {
    margin-bottom: var(--blueprint-block-margin-bottom);
}

.blog-header h1 {
    font-size: var(--h2-font-size);
}

.blog-header > div.image {
    width: 100%;
    padding-bottom: var(--blueprint-padding-small);
}

.blog-header .info
{
    padding-left:128px;
    padding-right:128px;
}

@media screen and (max-width: 960px) {
    .blog-header .info
    {
        padding-left:0px;
        padding-right:0px;
    }
}


.blog-header > .info > .text {
    font-weight: bold;
}

.blog-header .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--color-accent);
    line-height: 1;
}


.blog-header .tags img {
    width: 16px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 0px;
    vertical-align: middle;
}


@media screen and (max-width: 960px) {

    .project-header {
        flex-direction: column;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }

    .project-header .header-left {
        width: 100%;
        padding-bottom: var(--blueprint-padding-small);
    }

    .project-header .header-right {
        width: 100%;
        padding-left: unset;
        padding-top: var(--blueprint-padding-small);
        padding-bottom: var(--blueprint-padding-small);
    }

    .project-header .content-wrapper
    {
        flex-direction: column;
    }

    .project-header .header-left .tags
    {
        padding-bottom: 0;
    }

}

.project-header h2 {
    font-size: var(--h6-font-size);
    padding-bottom: 0;
}

.project-header .header-right div.text p {
    padding: 0;
    margin: 0;
}

.project-header .header-right div.text {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.project-header h1 {
    margin-bottom: 1.25rem;
    font-size: var(--h2-font-size);
}


.project-header .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--color-accent);
    line-height: 1;
}


.project-header .tags img {
    width: 16px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 0px;
    vertical-align: middle;
}

@media screen and (max-width: 540px) {

    .project-header .tags {
        flex-direction: column;
    }

    .project-header h1
    {
        font-size: 1.7rem;
    }

}


/* --- PROJECT / FLIPCARD */
.title-intro.headers_project_tiles {
    display: block;
    padding: 0;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.title-intro.headers_project_tiles .heading,
.title-intro.headers_project_tiles .text {
    width: 100%;
    text-align: center;
}

.project-flipcard-tiles {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 32% 32% 32%;
    column-gap: 1%;
    row-gap: 1rem;
    padding-top: 0;
}

.project-include-tiles {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 32% 32% 32%;
    column-gap: 1%;
    row-gap: 1rem;
    padding-top: 0;
    margin-bottom: var(--blueprint-block-margin-bottom);
}

@media screen and (max-width: 960px) {

    .project-flipcard-tiles {
        grid-template-columns: 48% 48%;
    }

    .project-include-tiles {
        grid-template-columns: 48% 48%;
    }

}

@media screen and (max-width: 480px) {

    .project-flipcard-tiles {
        grid-template-columns: 100%;
    }

    .project-include-tiles {
        grid-template-columns: 100%;
    }

}


.project-flipcard-tile {
    text-decoration: none;
    color: #ffffff;
    aspect-ratio: 1/1;
    text-align: center;
    align-content: center;

    text-shadow: var(--text-shadow-kopje);

    padding: var(--blueprint-padding-small);
    border-radius: var(--border-radius-large);
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.project-flipcard-tile h2 {
    display: none;
    font-family: 'Nexa-Regular';
    font-size: 1rem;
    padding-bottom: 0;
}

.project-flipcard-tile h3 {
    display: none;
    font-size: 1.5rem;
    padding-bottom: 0;
}

.project-flipcard-tile:hover h2,
.project-flipcard-tile:focus-visible h2,
.project-flipcard-tile:hover h3,
.project-flipcard-tile:focus-visible h3 {
    display: block;
}

@media screen and (max-width: 480px) {
    .project-flipcard-tile h2,
    .project-flipcard-tile h3 {
        display: block;
    }

}

.project-include-tile {
    text-decoration: none;
    color: #ffffff;
    aspect-ratio: 4/3;
    text-align: left;
    align-content: flex-end;

    text-shadow: var(--text-shadow-kopje);

    padding: var(--blueprint-padding-small);
    border-radius: var(--border-radius-large);
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.project-include-tile h2 {


    font-size: 1.5rem;
    padding-bottom: 0;
}

.project-include-tile h3 {
    display: none;
    font-family: 'Nexa-Regular';
    font-size: 1rem;
    padding-bottom: 0;
    padding-top: 1rem;
}

.project-include-tile:hover h3,
.project-include-tile:focus-visible h3 {
    display: block;
}

@media screen and (max-width: 480px) {
    .project-include-tile h2,
    .project-include-tile h3 {
        display: block;
    }
    .project-include-tile h2 {
        font-size: 1.25rem;
    }

}


/* --- PROJECT SLIDER */
a.project-slider-tile {
    text-decoration: none;
    color: #ffffff;
    border-radius: var(--border-radius-large);
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto
}

.project-slider-tile img {
    /* komt te vervallen, img wordt background-image */
    border-radius: var(--border-radius-large);
}

.project-slider-tile .tile-information {
    position: absolute;
    z-index: 9;
    width: 90%;
    max-width: var(--theme-width-breakpoint-small);
    margin-left: 5%;
    bottom: 3rem;
    text-shadow: var(--text-shadow-kopje);
}

.project-slider-tile .tile-information div.heading h2 {
    padding-bottom: 0;
}

.project-slider-tile .tile-information .tagline {
    font-weight: 900;
}


.cooperation {
    background-color: var(--color-achtergrond);
    border-radius: var(--border-radius-large);
    padding: 4rem;
    width: calc(100% - (2 * var(--blueprint-padding-small)));
    margin: var(--blueprint-padding-small);
    max-width: unset;
    margin-bottom: 1rem;
}

.cooperation .company {
    display: flex;
    flex-direction: row;

    align-items: center;
    gap: 2rem;
}



.cooperation .company .role {
    width: 50%;
    text-align: right;
    color: var(--color-donker);
}

.cooperation .company .name a {
    width: 50%;
    color: var(--color-accent);
    font-weight: bold;
    text-decoration: none;
}

@media screen and (max-width: 960px) {

    .cooperation {
        padding:2rem;
        margin-left:0;
        margin-right:0;
        width:100%;
    }
    .cooperation .company {
        flex-direction: column;
        gap:0rem;
        margin-bottom: 1rem;
    }

    .cooperation .company .role {
        width: 100%;
        text-align: center;
    }

    .cooperation .company .name {
        width: 100%;
        text-align: center;
    }

}


/* headers */
.base-header {
    text-align: center;
    margin-top: 112px;
    margin-bottom: 5rem;
}


.page-full-header {

    text-align: center;
    margin-bottom: 5rem;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* niet briljant dit, maar moet maar even zo */
.page-full-header.w40 {
    width: 600px;
}

.page-full-header.w50 {
    width: 700px;
}

.page-full-header.w60 {
    width: 800px;
}

.page-full-header.w70 {
    width: 900px;
}

.page-full-header.w80 {
    width: 1000px;
}

.page-full-header.w90 {
    width: 1100px;
}

.page-full-header .heading.leren h1 {
    font-size: 5rem;
}


.page-half-header {
    display: flex;
    gap: 1rem;
    margin-top: 112px;
    margin-bottom: 5rem;
}

.page-half-header > .title {
    width: 50%;
}

.page-half-header > .introduction {
    width: 50%;
}

.page-video-header .content-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 112px;
    margin-bottom: 5rem;
}

.page-video-header .content-wrapper > .title {
    width: 50%;
}

.page-video-header > .content-wrapper .introduction {
    width: 46%;
}

.page-video-header video {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius-large);
}


@media screen and (max-width: 960px) {

    .page-full-header .heading.leren h1 {
        font-size: 3rem;
    }

    .page-half-header {
        flex-direction: column;
    }

    .page-half-header > .title,
    .page-half-header > .introduction {
        width: 100%;
    }

    .page-video-header .content-wrapper {
        flex-direction: column;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
        margin-top: 3rem;
    }

    .page-video-header .content-wrapper > .title,
    .page-video-header .content-wrapper > .introduction {
        width: 100%;
    }
}

.page-image-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    background: center/cover no-repeat;
    border-radius: var(--border-radius-large);
    height: calc(100vh - var(--theme-height-header-menu));
}

/* use padding-top hack */
.page-image-header::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 9/16 = 0.5625 */
}

.page-image-header::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-large);
    background-color: rgba(0, 0, 0, 0.3);
}

.page-image-header > * {
    position: relative; /* zorgt dat content boven de overlay ligt */
    z-index: 1;
}

.page-image-header > .content {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1024px) {

    .page-image-header > .content {
        width: 80%;
    }

}

.page-image-header > .content > .heading > h1,
.page-image-header > .content > .text {
    color: #fff;
}

.page-full-header .links,
.page-half-header .links,
.page-image-header .links,
.page-video-header .links {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 1rem;

}

.page-full-header .links a.link,
.page-half-header .links a.link,
.page-image-header .links a.link,
.page-video-header .links a.link {

    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    height: 2.8rem;
    line-height: 1;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    border-width: 0; /* browser override */
}

.page-full-header .links a.link,
.page-half-header .links a.link,
.page-video-header .links a.link {
    background: #0202020D;

}


.page-image-header .links a.button {
    background-color: #fff;
    color: #000;
}


/* --- Titel met intro */
.title-intro {
    display: flex;
    flex-direction: row;
    row-gap: 64px;
}

.title-intro.single {
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    row-gap: 0;
    padding-left: 10rem;
    padding-right: 10rem;
}


.title-intro .heading {
    width: 50%;
    padding-right: var(--blueprint-padding-small);
}


.title-intro .text {
    width: 50%;
    padding-left: 32px;
    padding-right: 32px;
}

.title-intro .text p:last-of-type {
    margin-bottom: 0;
}

.title-intro .heading h2 {
    padding-bottom: 1rem;
}

.title-intro.single .heading,
.title-intro.single .text {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.title-intro.single .heading h2 {
    padding-bottom: 1rem;
}

@media screen and (max-width: 960px) {

    .title-intro {
        flex-direction: column;
        padding: var(--margin-padding-large);
        row-gap: 0rem;
    }

    .title-intro .heading,
    .title-intro .text {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .title-intro.single {

        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }

}


/* --- text-image --- */
@media screen and (max-width: 960px) {

    .text-image {
        flex-direction: column;
    }

}

/* --- drie tekstblokken */
.three-text-blocks {
    display: flex;
    flex-direction: column;
}

.three-text-blocks .intro-wrapper {
    width: 100%;
    display: flex;
}

.three-text-blocks .intro-wrapper .heading {
    width: 50%;
}

.three-text-blocks .intro-wrapper .text {
    width: 50%;
}

.three-text-blocks .tiles {
    width: 100%;
    display: flex;
    gap: 2rem;
    margin-top: 2rem;

}

.three-text-blocks .tiles .tile {
    background-color: var(--color-achtergrond);
    text-align: center;
    padding: 2rem;
    border-radius: var(--border-radius-large);
    width: 33.3%;
}

@media screen and (max-width: 960px) {

    h2 {
        padding-bottom: 1rem;
    }

    .three-text-blocks {
        padding-top: 0;
    }

    .three-text-blocks .tiles {
        flex-direction: column;
        gap: 1rem;
    }

    .three-text-blocks .tiles .tile {
        width: 100%;
    }
}


.three-text-blocks .tiles .tile h3 {
    font-size: 2.3rem;
    color: var(--color-accent);
    padding-bottom: 0.6rem;
}

.three-text-blocks .tiles .tile:nth-child(2) {
    background-color: var(--color-accent);
    color: var(--color-neutraal);
}

.three-text-blocks .tiles .tile:nth-child(2) h3 {
    color: var(--color-neutraal);
}

.three-text-blocks .tiles .tile .text p {
    font-weight: bold;
    margin-bottom: 0;
}

/* --- TEXT-BIG */
.text-big {
    padding: 5rem 7.5rem;
}

@media screen and (max-width: 800px) {
    .text-big {
        width: 100%;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
        padding-top: var(--blueprint-padding-small);

        padding-bottom: var(--blueprint-padding-small);
        text-align: left;
    }
}

.text-big .text {
    font-family: 'Nexa-Heavy', sans-serif;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-style: normal;
    line-height: 130%;
}

@media screen and (max-width: 800px) {
    .text-big .text {
        font-size: 1.4rem;
    }
}

.text-big.reveal .text {
    color: #22282814;
}

.text-big.reveal a {
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    color: var(--color-donker);
}

.text-big.reveal a::after {
    content: url('../../icons/cta.svg');
}

.text-big .heading h2 {
    font-size: 1.25rem;
    padding-bottom: 1rem;
}

.text-big .text p {
    margin-top: 0px;
}

.text-big .text p:last-of-type {
    margin-bottom: 0px;
}

.text-big .heading h3 {
    font-size: 1.5rem;
    padding-bottom: 0;
}

/* --- EXPERTISES */
.expertises {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}

.expertises > .heading {
    /* max-width: 54%; */
    margin-left: auto;
    margin-right: auto;
}

.expertises .heading h2 {
    text-align: center;
    margin-top: var(--margin-padding-large);
    margin-bottom: var(--margin-padding-large);
    /*padding-bottom: 0px;*/
}

.expertises > div.mobile-parts {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.expertises .parts {
    width: 100%;
    display: flex;
    column-gap: 2%;
}

.expertises .parts a {
    aspect-ratio: 2 / 3;
    width: 32%;
    text-decoration: none;
}

.expertises .parts.parts-2 a {
    aspect-ratio: 1 / 1;
    width: 49%;
}

.expertises > div.mobile-parts a {
    display: block;
    aspect-ratio: 21.5 / 17;
    width: 100%;
    text-decoration: none;
}


.expertises .info {
    display: none;
    color: white;
}

.expertises .part:hover .info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.expertises .dummy-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expertises > div.mobile-parts .dummy-link {
    color: #ffffff;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.expertises .dummy-link img {
    width: 24px;
    display: inline-block;
}

@media screen and (max-width: 800px) {

    .expertises {
        width: 100%;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }

    .expertises > .heading {
        max-width: unset;
    }

    .expertises > div.parts {
        display: none;
    }

    .expertises > div.mobile-parts {
        width: 100%;
        display: flex;
    }

    .title-intro + .expertises {
        padding-top: 0;
    }

    .expertises:has(+ .contact-block) {
        padding-bottom: 1rem;
    }

}

.expertises .mobile-part,
.expertises .part {
    border-radius: var(--border-radius-large);
    width: 100%;
    height: 100%;
    align-content: end;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 2rem;
}

.expertises .mobile-part h3,
.expertises .part h3 {
    color: #fff;
    text-align: left;
    text-shadow: var(--text-shadow-kopje);
    padding-bottom: 0px;
    hyphens: auto;
}

.expertises .mobile-part h3 {
    font-size: 2rem;
}

.expertises .mobile-part .dummy-link img {
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}

/* --- QUOTE */
.quote {
    display: flex;
    flex-direction: column;
    padding-top: var(--blueprint-padding-medium);
    padding-bottom: var(--blueprint-padding-medium);
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
}

.quote .text {
    width: 100%;
    text-align: center;
    font-family: 'Nexa-Regular';
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 2.8rem */
}

main > .quote .text {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.quote .text p {
    quotes: "“" "”" "‘" "’";
}

.quote .text p::before {
    content: open-quote;
}

.quote .text p::after {
    content: close-quote;
}

.quote .from-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: var(--blueprint-column-gap-medium);
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.quote .from-wrapper .from.from-other {
    padding-left: 2rem;
    border-left: rgba(2, 2, 2, 0.15) solid 0.125rem;
}

.quote .from-wrapper img.photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}


.quote .from-wrapper img.logo {
    width: 120px;

    border-radius: 0px;
}

/* --- WERKWIJZE KAARTJES */
.working-method-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--blueprint-column-gap-medium);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.working-method-cards div.working-method-cards-left,
.working-method-cards div.working-method-cards-right {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.working-method-cards div.working-method-cards-klik-hier {
    aspect-ratio: 248 / 100;
    width: 248px;
    height: auto;
    position: relative;
    left: 50%;
    top: -1rem;
}

.working-method-cards div.working-method-cards-left h2 {
    color: #DC2A9A;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 900;
    line-height: 150%;
    padding-bottom: 0;
}

.working-method-cards div.working-method-cards-left a,
.working-method-cards div.working-method-cards-left button {
    width: fit-content;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    color: var(--color-donker);
    font-size: var(--text-medium-font-size);
}

.working-method-cards div.working-method-cards-left a::after,
.working-method-cards div.working-method-cards-left button::after {
    content: url('../../icons/cta.svg');
}


.working-method-cards div.end-screen {
    display: none;
    position: absolute;
    width: 80%;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    align-self: center;
}

.working-method-cards div.end-screen h3 {
    font-family: 'Nexa-Regular';
    font-size: var(--text-medium-font-size);
    font-weight: normal;
    font-style: normal;
    line-height: 0;
    padding-bottom: 0;
}

.working-method-cards div.end-screen p {
    font-family: 'Nexa-Heavy';
    font-size: 1.8rem;
    font-weight: normal;
    font-style: normal;
}

.working-method-cards div.end-screen a.cta {
    width: fit-content;
    margin-bottom: 0.8rem;
    margin-right: 0.8rem;
}

.working-method-cards div.end-screen a.cta::after {
    content: url('../../icons/phone_call_wit.svg');
}

.working-method-cards div.end-screen a.cta:hover {
    transform: scale(1.03);
}

.working-method-cards .button-reset {
    background: var(--color-achtergrond);
    color: var(--color-donker);
    padding-bottom: 0.3rem;
    margin-bottom: 0.8rem;
}

.working-method-cards .button-reset img {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.4rem;
    margin-bottom: 0.3rem;
    display: inline;
    vertical-align: middle;
}


.working-method-cards div.working-method-cards-right .tile {
    position: absolute;

    transition: all 0.5s ease;

    display: flex;
    flex-direction: column;
    height: 20rem;
    padding: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;

    border-radius: var(--border-radius-large);
    border: 3px solid var(--color-accent);
    background: #ffffff;

    /* large */
    box-shadow: var(--text-shadow-kaartjes);
}

.working-method-cards div.working-method-cards-right .tile.removing {
    opacity: 0;
    pointer-events: none;
}

.working-method-cards div.working-method-cards-right .tile.hidden {
    display: none;
    pointer-events: none;
}

.working-method-cards div.working-method-cards-right .tile .icon {
    margin-bottom: 1rem;
}

.working-method-cards div.working-method-cards-right .tile .icon img {
    width: 2rem;
    height: 2rem;
    border-radius: 0;
}

.working-method-cards div.working-method-cards-right .tile h4 {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 900;
    line-height: 140%;
}

.working-method-cards div.working-method-cards-right .tile p {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    text-align: left;
    color: var(--color-donker);
}

.working-method-cards div.working-method-cards-right .button.cta.mobile {
    margin-top: 6rem;
    display: none;
}

@media only screen and (max-width: 1024px) {

    .working-method-cards {
        flex-direction: column;
    }

    .working-method-cards div.working-method-cards-left,
    .working-method-cards div.working-method-cards-right {
        width: 100%;
    }

    .working-method-cards div.working-method-cards-left {
        margin-bottom: 3rem;
    }

    .working-method-cards div.working-method-cards-klik-hier {
        left: 22%;
    }

    /* layout wijzigt eerder dan "mobile" breekpunt */
    /* specifieke show/hide hieronder */
    .working-method-cards .desktop {
        display: none;
    }

    .working-method-cards .mobile {
        display: unset; /* maak zichtbaar */
    }

    .working-method-cards .button.cta.mobile {
        display: inline-block !important; /* maak zichtbaar */

        background: none;
        padding-left: 0px;
        padding-right: 0px;

        color: var(--color-donker);
        line-height: 1.4;
        font-size: var(--text-medium-font-size);
    }

    .working-method-cards .button.cta.mobile::after {
        content: url('../../icons/cta.svg');
    }

}


/* --- WERKWIJZE LIST */
.working-method-list {
    width: calc(100% - (2 * var(--blueprint-padding-small)));
    display: flex;
    gap: 1rem;
    background-color: var(--color-achtergrond);
    border-radius: var(--border-radius-large);
    padding-left: 3rem;
    padding-right: 3rem;
}

.working-method-list .intro-wrapper {
    width: 50%;
    padding-bottom: 2rem;
}

.working-method-list .tiles {
    width: 50%;
}

.working-method-list .intro-wrapper .heading {
    font-family: 'Nexa-Heavy', sans-serif;
}

.working-method-list .intro-wrapper .heading h2 {
    font-size: 1.25rem;
    font-style: normal;
    line-height: 150%;
    margin-bottom: var(--blueprint-padding-small);
}

.working-method-list .intro-wrapper .heading h3 {
    font-size: 3rem;
    font-style: normal;
    line-height: 120%;
    margin-bottom: var(--blueprint-padding-small);
}

.working-method-list .tiles .tile {
    margin-bottom: var(--blueprint-padding-small);
}

.working-method-list .tiles .tile {
    margin-bottom: var(--blueprint-padding-small);
}


.working-method-list .icon-title-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.working-method-list .tiles .tile .icon-title-wrapper .icon {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}

.working-method-list .tiles .tile .icon-title-wrapper .icon img {
    width: 2rem;
    height: 2rem;
    border-radius: 0;
}

.working-method-list .tiles .tile .icon-title-wrapper .heading h4 {
    font-family: 'Nexa-Heavy', sans-serif;
    font-size: 2rem;
    line-height: 140%;
    /* 2.8rem */
    color: var(--color-donker);
}

.working-method-list .tiles .tile .bar-content-wrapper {
    display: flex;
}

.working-method-list .tiles .tile .bar-content-wrapper .bar {
    padding-left: calc(1rem - 0.0625rem);
    margin-right: calc(2rem - 0.0625rem);
    border-right: rgba(2, 2, 2, 0.15) solid 0.125rem;
}

.working-method-list .tiles .tile:last-of-type .bar-content-wrapper .bar {
    padding-left: 1rem;
    margin-right: 2rem;
    border-right: none;
}

@media screen and (max-width: 960px) {

    .working-method-list {
        flex-direction: column;
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .working-method-list .intro-wrapper,
    .working-method-list .tiles,
    .working-method-cards div.end-screen {
        width: 100%;
    }

    .working-method-cards {
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }

    .working-method-list .tiles .tile .icon-title-wrapper .heading h4 {
        padding-bottom: 0;
        font-size: var(--h5-font-size);
    }


    /* layout wijzigt eerder dan "mobile" breekpunt */
    /* specifieke show/hide hieronder */
    .working-method-list .desktop {
        display: none;
    }

    .working-method-list .mobile {
        display: unset; /* maak zichtbaar */
    }

}

/* --- BLOG/PROJECT */
/* -- PROJECT */
body.project footer {
    margin-top: 0px;
}

body.blog
{
    line-height:2;
}

body.blog main,
body.project main {
    padding-bottom: 0;

}

body.blog main > div
{
    max-width: var(--blog-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}
body.project main > div {
    max-width: var(--project-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}

body.project main > div.cooperation {
    max-width: unset;
}

body.blog main > .text,
body.project main > .text {
    font-size: var(--text-regular-font-size);
}

body.blog main > .text h2,
body.project main > .text h2 {
    font-size: var(--h5-font-size);
    padding-bottom: 0.5rem;
    padding-top: 1rem;
}

body.blog main > .text h3,
body.project main > .text h3 {
    font-size: var(--h6-font-size);
    padding-bottom: 0.25rem;
}

body.blog main > .text h4,
body.project main > .text h4 {
    font-size: var(--h5-font-size);
    padding-bottom: 0.25rem;
}

body.blog main > .text h5,
body.project main > .text h5 {
    font-size: var(--h5-font-size);
    padding-bottom: 0.25rem;
}

body.blog main > .text p,
body.project main > .text p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

body.blog main > .text-image > .text,
body.project main > .text-image > .text {
    font-size: var(--text-regular-font-size);
}

body.blog main > .text-image > .text h2,
body.project main > .text-image > .text h2 {
    font-size: var(--h4-font-size);
    padding-bottom: 0.25rem;
    padding-top: 0.5rem;
}

body.blog main > .text-image > .text h3,
body.project main > .text-image > .text h3 {
    font-size: var(--h5-font-size);
    padding-bottom: 0.25rem;
}

body.blog main > .text-image > .text h4,
body.project main > .text-image > .text h4 {
    font-size: var(--h5-font-size);
    padding-bottom: 0.25rem;
}

body.blog main > .text-image > .text h5,
body.project main > .text-image > .text h5 {
    font-size: var(--h5-font-size);
    padding-bottom: 0.25rem;
}

body.blog main > .text-image > .text p,
body.project main > .text-image > .text p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}


body.blog main > .image-slider .swiper,
body.project main > .image-slider .swiper {
    padding-top: var(--blueprint-padding-small);
    padding-bottom: var(--blueprint-padding-small);
}

body.blog main > .image,
body.project main > .image,
body.blog main > .photo-gallery,
body.project main > .photo-gallery,
body.blog main > .team-cta,
body.project main > .team-cta {
    padding-top: var(--blueprint-padding-small);
    padding-bottom: var(--blueprint-padding-small);
}

@media screen and (max-width: 960px) {
    body.blog main
    {
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }
}

/* --- SWIPER */
.swiper-button-prev,
.swiper-button-next {
    background: transparent;
    color: #fff !important;
}

.swiper-pagination-custom {
    height: 1rem;
    bottom: 0 !important;
    border-bottom-left-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large);
    overflow: hidden;
}

.swiper-pagination div.progressbar {
    background-color: rgba(255, 255, 255, 0.20);
    height: 1rem;
}

.swiper-pagination div.progressbar div.progressbar-fill {
    background-color: var(--color-accent);
    height: 1rem;
}

/* --- BLOG SLIDER */
.blog-slider {
    width: 100%;
    padding-top: var(--blueprint-padding-large);
    padding-bottom: var(--blueprint-padding-large);

}

.blog-slider .intro-wrapper {
    width: 100%;
    margin-bottom: var(--blueprint-padding-small);
}

.blog-slider .swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 6rem;
    /* ivm slagschaduw items */
}

.blog-slider .swiper .swiper-slide {
    background-color: #ffffff;
    border: var(--color-accent) solid 0.2rem;
    border-radius: var(--border-radius-large);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05), 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    height: fit-content;
    cursor: pointer;
}

.blog-slider .swiper .swiper-slide:hover {
    text-decoration: none;
}

.blog-slider .swiper .swiper-slide:focus,
.blog-slider .swiper .swiper-slide:focus-visible {
    border: var(--color-accent) solid 0.2rem;
}

.blog-slider .swiper .swiper-slide > img {
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-large) var(--border-radius-large) 0px 0px;
}

.blog-slider .swiper .swiper-slide .description-wrapper {
    padding: 1.5rem;
}

.blog-slider .swiper .swiper-slide .description-wrapper .heading h6.tak {
    font-size: 1rem;
    height: 2rem;
    color: var(--color-accent);
    font-weight: normal;
    font-family: 'Nexa-Regular', sans-serif;
}

.blog-slider .swiper .swiper-slide .description-wrapper .heading h6.title {
    height: 4rem;
    font-size: 1.25rem;
    font-weight: normal;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.blog-slider .description-wrapper .photo-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blog-slider .swiper .swiper-slide .description-wrapper p {
    font-size: 1rem;
    line-height: 160%;
    /* 1.6rem */
}

.blog-slider .swiper .swiper-slide .description-wrapper .photo-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blog-slider .swiper .swiper-slide .description-wrapper .photo-wrapper img {
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.blog-slider .swiper .swiper-slide .description-wrapper .photo-wrapper p {
    font-size: 0.875rem;
    line-height: 160%;
    margin-bottom: 0;
    /* 1.4rem */
}


.blog-slider .swiper-button-next-icon,
.blog-slider .swiper-button-prev-icon {
    position: absolute;
    bottom: 0;
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 1000;

    width: 3rem;
    height: 3rem;

    border-radius: 0;
    background-color: transparent;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    text-shadow: 0px 1px 5px #000000;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-slider .swiper-button-next-icon {
    right: 30px;
    background-image: url(/assets/images/slider_arrow_next.svg);
}

.blog-slider .swiper-button-prev-icon {
    right: 90px;
    background-image: url(/assets/images/slider_arrow_prev.svg);
}


.image-slider .swiper {
    padding-top: var(--blueprint-padding-large);
    padding-bottom: var(--blueprint-padding-large);
}

.image-slider.clients .swiper {
    padding-bottom: 0px;
}

.column .image-slider .swiper {
    /* nested slider */
    padding-top: 0;
    padding-bottom: 0;
}

.image-slider .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-slider .swiper .swiper-slide > img {
    border-radius: var(--border-radius-large);
    max-width: 100%;
}

.image-slider .swiper-button-next, .swiper-button-prev {
    color: #28a532;
    font-family: "VAG Rounded Bold", Arial, sans-serif;
    font-size: 28px;
}

.image-slider .swiper-button-next:after,
.image-slider .swiper-rtl .swiper-button-prev:after {

}


.image-slider .swiper-button-prev:after,
.image-slider .swiper-rtl .swiper-button-next:after {

}

.image-slider .swiper-button-next,
.image-slider .swiper-button-prev {
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    text-shadow: 0px 1px 5px #000000;
}


@media only screen and (max-width: 680px) {
    .image-slider .swiper-button-next,
    .image-slider .swiper-button-prev {
        width: 2rem;
        height: 2rem;
    }

    .image-slider .swiper {
        padding-top: var(--blueprint-padding-small);
        padding-bottom: var(--blueprint-padding-small);
    }
}

.image-slider .swiper-button-disabled {
    opacity: 0 !important;
}

/* PHOTO BANNER / DUAL ROWS */
.photo-banner {
    width: 100%;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.photo-banner .row1,
.photo-banner .row2 {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

.photo-banner .row1 {
    translate: -3rem;
}

.photo-banner .row2 {
    translate: -7rem;
}

.photo-banner .banner-item {
    width: 26rem;
    align-self: stretch;
    aspect-ratio: 13/10;

    border-radius: var(--border-radius-large);
    background-color: lightgray 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.image-slider-photobanner {
    display: none;
}

@media only screen and (max-width: 640px) {
    .photo-banner {
        display: none;
    }

    .image-slider-photobanner {
        display: block;
    }


}

/* TEAM PAGINA */
.team-header {
    display: flex;
    flex-direction: row;

    border-radius: var(--border-radius-large);
    margin-bottom: var(--blueprint-block-margin-bottom);

    overflow: clip;
    background-color: #E9EFF3;
}

.team-header .header-left,
.team-header .header-right {
    width: 50%;
}

.team-header .cv-links {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

@media only screen and (max-width: 480px) {
    .team-header .cv-links {
        flex-direction: column;
    }
}

.team-header .cv-links a:hover {
    transform: scale(1.03);
}

.team-header .cv-links img {
    margin-top: 0.4rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0;
}

.team-header .cv-links img.icon-small {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0;
    margin-left: 0.8rem;
}

/* BREEKPUNT RESPONSIEF */
@media only screen and (max-width: 1024px) {

    .team-header {
        flex-direction: column;
    }

    .team-header .header-left,
    .team-header .header-right {
        width: 100%;
    }


}

.team-header .header-left img {
    border-radius: 0;
}

.team-header .header-right {
    padding: var(--blueprint-column-gap-medium);
    background-color: #E9EFF3;
}

@media only screen and (max-width: 1024px) {
    .team-header .header-right {
        padding: var(--blueprint-padding-small);
    }
}

.team-header .header-right h1 {
    color: var(--color-accent);
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
}

.team-header .header-right h2 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
}

.team-cta {
    width: 60%;
    display: unset;
    margin-left: auto;
    margin-right: auto;

}

.team-cta .text {
    text-align: center;
    font-weight: bold;
}

.team-cta .member-wrapper {
    display: flex;
    flex-direction: row;
    margin-top: var(--blueprint-column-gap-medium);
    gap: var(--blueprint-column-gap-medium);
    justify-content: center;
}

.team-cta .member-wrapper img {
    width: 120px;
    height: 120px;
    border-radius: 50%;

}


.team-cta .member-wrapper .cv-cta {
    margin-top: 2rem;

}

.team-cta .member-wrapper p {

    border-left: rgba(2, 2, 2, 0.15) solid 0.125rem;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.team-cta .member-wrapper a.button {
    margin-top: 1rem;
    margin-left: 2rem;
    min-width: fit-content;
}


@media screen and (max-width: 540px) {

    .team-cta
    {
        display:none;
    }

    /*.team-cta .member-wrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .team-cta .member-wrapper p {
        padding-right: 0;
        border-right: none;
    }*/

}

.team-cta-mobile {
    display: none;
}

@media screen and (max-width: 540px) {
    .team-cta-mobile {
        display: block;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
    }

    .team-cta-mobile-content
    {
        display: flex;
        border: 2px solid #222828;
        /* medium */
        box-shadow: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);
        border-radius: 8px;
        width:100%;
        padding:2rem;
        flex-direction: column;
        margin-bottom: 2rem;
        margin-right:2rem;

    }

    .team-cta-mobile-content .text
    {
        font-weight: 900;
        font-size: 1.2rem;
        line-height: 1.4;
    }


    .team-cta-mobile-content .text p {
        quotes: "“" "”" "‘" "’";
    }

    .team-cta-mobile-content .text p::before {
        content: open-quote;
    }

    .team-cta-mobile-content .text p::after {
        content: close-quote;
    }

    .team-cta-mobile-member-wrapper
    {
        padding-top:20px;
        display: flex;
        align-items: center;
        border-top: 1px solid #222828;
        column-gap:20px;
    }

    .team-cta-mobile-member-wrapper img
    {
        width:78px;
        aspect-ratio: 1/1;
        border-radius:50%;
    }

    .team-cta-mobile-cv-cta
    {
        font-size:1rem;
        line-height: 1.6;
    }

    .team-cta-mobile-cv-cta p
    {
        margin:0;
        padding:0;
    }
    .team-cta-mobile a.button {
        position: absolute;
        bottom: 0.5rem;

        right:0px;
    }

    .team-cta-mobile a.button::after {
            vertical-align: middle;
            content: url('../../icons/cta_wit.svg');
            width: 1.2rem;
            height: 1.2rem;
            display: inline-block;
            margin-left: 0.4rem;

        }

}



.team-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.team-tiles .tile {
    width: 32%;
    aspect-ratio: 1/1;
    text-align: center;
    align-content: center;
    display: block;
    margin-bottom: 1.6rem;
    text-decoration: none;
    color: #fff;
    border-radius: var(--border-radius-large);
    overflow: hidden;
}

.team-tiles .tile:nth-child(3n + 2) {
    top: 1.6rem;
}

/* BREEKPUNT RESPONSIEF */
@media only screen and (max-width: 1024px) {
    .team-tiles .tile {
        width: 48%;
    }

    .team-tiles .tile:nth-child(3n + 2) {
        top: unset;
    }

}

@media only screen and (max-width: 640px) {
    .team-tiles .tile {
        width: 100%;
    }

    .team-tiles .tile:nth-child(3n + 2) {
        top: unset;
    }
}


.team-tiles .tile .tile-info {
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: end;
    text-align: left;
    padding: var(--margin-padding-large);
    padding-bottom: var(--margin-padding-small);
    border-radius: var(--border-radius-large);
}

.team-tiles .tile .tile-info h3 {
    color: #ffffff;
    text-shadow: var(--text-shadow-kopje-lichter);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02rem;
    padding-bottom: 0;
}

.team-tiles .tile .tile-info p {
    color: #ffffff;
    text-shadow: var(--text-shadow-kopje-lichter);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
}


.team-tiles .tile .tile-content {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-large);
    padding-left: 2rem;
    padding-right: 2rem;

    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    transition: transform 0.6s ease-in-out;
    background-color: var(--color-accent);
    justify-content: center;
    align-items: center;
}

.team-tiles .tile .tile-content p {
    margin-bottom: 0;
    text-wrap: unset;
    font-size: 1.25rem;
    line-height: 1.5;
}

.team-tiles .tile:hover .tile-content {
    display: flex;
    transform: translateY(0);
}

/* --- BLOG OVERVIEW */
.blog-overview {
    width: 100%;
    padding-top: var(--blueprint-padding-large);
    padding-bottom: var(--blueprint-padding-large);

}

.blog-overview .row-2 {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 3rem;
    padding-bottom: var(--blueprint-padding-medium);
}

.blog-overview .row-2 .tile {
    width: 50%;
}

.blog-overview .row-3 {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 3rem;
    padding-bottom: var(--blueprint-padding-medium);
}

.blog-overview .row-3 .tile {
    width: 33.3%;
}

.blog-overview .tile {
    background-color: #ffffff;
    /*  border: var(--color-accent) solid 0.2rem;
      border-radius: var(--border-radius-large);
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05), 0 0.5rem 1rem rgba(0, 0, 0, 0.05);*/
    height: fit-content;
    cursor: pointer;
}

.blog-overview .tile:hover {
    text-decoration: none;
}

.blog-overview .tile:focus,
.blog-overview .tile:focus-visible {
    /*  border: var(--color-accent) solid 0.2rem; */
}

.blog-overview .tile > img {
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-large);
}

.blog-overview .tile h6.title {

}

.blog-overview .description-wrapper {
    padding: 1.5rem;
    padding-left: 0rem;
    padding-right: 0rem;
}

.blog-overview .description-wrapper .heading h6.tak {
    font-size: 1rem;
    height: 2rem;
    color: var(--color-accent);
    font-weight: normal;
    font-family: 'Nexa-Regular', sans-serif;
}

.blog-overview .description-wrapper .heading h6.title {
    height: 4rem;
    font-size: 1.5rem;
    font-weight: normal;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.blog-overview .row-3 .description-wrapper .heading h6.title {
    height: 4rem;
    font-size: 1.25rem;
    font-weight: normal;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.blog-overview .description-wrapper .photo-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blog-overview .description-wrapper .photo-wrapper img {
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.blog-overview .description-wrapper .photo-wrapper p {
    font-size: 0.875rem;
    line-height: 160%;
    margin: 0
    /* 1.4rem */
}

/* --- PHOTO GALLERY */
.photo-gallery {
    display: flex;
    flex-direction: row;
    gap: var(--blueprint-column-gap-medium);
}

.photo-gallery .two-images {
    display: flex;
    flex-direction: column;
    gap: var(--blueprint-column-gap-medium);
}

.photo-gallery .one-image img {
    height: 100%;
    /* trukje die de afbeelding iets uitrekt om de hoogte gelijk te houden door de 1rem gap van de .two-images */
}

@media screen and (max-width: 800px) {
    .blog-overview .row-2 {
        flex-direction: column;
        gap: 1rem;
        padding-bottom: var(--blueprint-padding-small);
    }
    .blog-overview .row-3 {
        flex-direction: column;
        gap: 1rem;
        padding-bottom: var(--blueprint-padding-small);
    }
    .blog-overview .row-2 .tile {
        width: 100%;
    }

    .blog-overview .row-3 .tile {
        width: 100%;
    }
    .blog-overview .row-2 .description-wrapper .heading h6.title,
    .blog-overview .row-3 .description-wrapper .heading h6.title {
        font-size: 1.2rem;
        line-height: 1.4;
        height: 2.8rem;
    }
}


/* PAGE_TYPES */
/* PAGE_TYPES > ELEMENTEN */
/* TOOLS */
/* MOBILE (PORTRAIT) */
@media screen and (max-width: 800px) {

    .page-full-header {
        width: 100%;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
        margin-bottom: unset;
    }

}

@media screen and (max-width: 640px) {

    .page-image-header {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-left: 0;
        margin-right: 0;
        height: calc(100vh - var(--theme-height-header-menu));
    }

    .page-image-header > .content {
        width: 100%;
    }

    .photo-gallery .one-image {
        display: none;
    }

    .photo-gallery .two-images {
        gap: 1rem;
    }

}

@media screen and (max-width: 480px) {

    :root {
        --h1-font-size: 2.5rem;
        --h2-font-size: 2rem;
        --h3-font-size: 2.5rem;
        --h4-font-size: 2rem;
        --h5-font-size: 1.5rem;
        --h6-font-size: 1.25rem;

        --h1-line-height: 1.2;
        --h2-line-height: 1.2;
        --h3-line-height: 1.3;
        --h4-line-height: 1.4;
        --h5-line-height: 1.4;
        --h6-line-height: 1.4;
    }

    .page-full-header {
        width: 100%;
        padding-left: var(--blueprint-padding-small);
        padding-right: var(--blueprint-padding-small);
        margin-bottom: unset;
    }

    main {
        padding: var(--theme-mobile-padding-main);
    }

    h2 {
        padding-bottom: 0;
    }

    .code-embed iframe {
        width: 100%;
    }

    .blog-slider .swiper .swiper-slide {
        width: 100% !important;
    }

    .text-image {
        margin-top: 0;
    }

    .title-intro.single {
        width: 100%;
    }


    .w90,
    .w80,
    .w75,
    .w67,
    .w60,
    .w50,
    .w0 {
        width: 100%;
    }

    .photo-gallery {
        padding: 0;
    }


    .video-embed {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    main > .quote .text {
        width: 100%;
        font-size: 1.7rem;
    }

    .quote .from-wrapper {
        flex-direction: column;
    }

    .quote .from-wrapper .from.from-other {

        text-align: center;
        padding-left: 0;
        border-left: none;
    }

    .team-tiles {
        width: 100%;
        padding: var(--theme-mobile-padding-main);
    }

    .case-slider-tiles {
        width: 100vw;
        margin-left: -0.6rem;
        padding-left: 0;
        padding-right: 0;
    }

    .case-slider-tiles .swiper-slide {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }


    .project-slider-tiles {
        width: 100vw;
        margin-left: -0.6rem;
        padding-left: 0;
        padding-right: 0;
    }

    .project-slider-tiles .swiper-slide {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

}

/* Alle extra verticale ruimte op de pagina's en wat extra breedte overules */
@media screen and (min-width: 1280px) {


    body.home main .title-intro:has(+ .photo-banner) {
        padding-bottom: 0;
    }

    body.home .page-video-header .content-wrapper {
        max-width: 1440px;
    }

    body.home .expertises {
        padding-top: 10rem;
        max-width: 1440px;
    }

    body.home .image-slider.clients {
        margin-bottom: 6rem;
    }

    body.home .photo-banner {
        margin-bottom: 6rem;
    }

    .working-method-cards {
        margin-top: 12rem;
        margin-bottom: 16rem;
    }

    .working-method-list {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    .quote {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .team-cta {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    main > .title-intro:has(+ .expertises) {
        padding-bottom: 0;
    }

    main > .title-intro + .expertises {
        padding-top: 2rem;
    }

    main > .heading > h2 {
        padding-bottom: 0;
    }

    main > .text > h3 {
        padding-bottom: 0;
    }

    main > .photo-gallery + .photo-gallery {
        padding-top: 0;
    }

    main > .photo-gallery:has(+ .photo-gallery) {
        padding-bottom: 0;
    }

    /*.case main > .video-embed {
        padding-left: 0;
        padding-right: 0;
    }*/
    main > .columns .column .video-embed {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        margin-bottom: var(--blueprint-column-gap-medium);
    }
}