@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } /* remember to define focus styles! */ :focus {outline: 0; } /* remember to highlight inserts somehow! */ ins {text-decoration: none; } del {text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse; border-spacing: 0; }

/*
   BACKSTAGE v5.1 | ADVIESBIJKLACHTEN.NL
   2021/22 - Cybox Backstage CMS

*/

/* BASICS */
html, body {
    height: auto;
}
html {
    scroll-behavior: smooth;
}
body {
    /* design color vars*/
    --background: #fff; /* main background and light color for buttons etc */
    --accents: #e7ebec; /* secondary backgrounds */
    --main: #122a33; /* general text color, previously all that was #000; */
    --titles: #000; /* colors for general h1, h2, h3 */
    --primarycta: #32aaa1; /* buttons and menu active class */
    --secondarycta: #ff5f20; /* buttons hover and menu hovers */
    --error: #ff006c; /* buttons hover and menu hovers */
    
    --abk-teal-dark: #056165;
    --abk-teal: #008c8e;
    
    --abk-orange-dark: #d66e00;
    --abk-orange: #f58300;
    --abk-orange-light: #ffa347;
    

    /* general */
    /*background-color: rgb(50 170 161 / 5%);*/
    color: #323232;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-top: 110px; /* #header-height */
}

body:after {
    content: "";
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--accents);
}

a {
    text-decoration: none;
    color: #32aaa1;
}
a.btn {
    text-decoration: none!important;
}
a:hover {
    /*color: #666;*/
}

/* ANCHORS */
.anchor { position: absolute; top: 0; }
body.klachten .anchor { top: -150px; }
body.diensten .anchor { top: -105px; }
body.__behandelaarwijzer .anchor { top: -110px; }

/* OVERALL TYPE & BUTTONS */
h1 {
    margin-top: -8px;
    margin-bottom: 30px;
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    color: #323232;
    font-weight: 900;
    line-height: 1.2;
}
h2 {
    margin-bottom: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 21px;
    color: #1a6060;
    font-weight: 700;
    line-height: 1.3;
}
h1 + h2 {
    /*margin-bottom: 30px;
    font-size: 24px;
    line-height: 1.2;*/
}
h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: #1a6060;
    font-weight: 700;
    line-height: 1.2;
}
.btn {
    display: inline-block;
    margin: 0 0;
    padding: 15px 30px 16px 30px;
    width: auto;
    font-family: inherit;
    font-size: 18px;
    color: #fff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: #32aaa1;
}
.btn:hover {
	color: #fff;
	background-color: #5bbbb4;
}
h2 .btn {
    margin-bottom: 22px;
    font-weight: 500;
}
.btn.grey {
	opacity: 0.5;
	background: var(--accents);
	color: var(--main);
}

/* HEADER (MENU) */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 7;
    background-color: #fff;
}
body.scroll #header {
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}
#header-top { 
    position: relative;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    background-color: #e0f2f1;
    background: rgb(224,242,241);
    background: linear-gradient(270deg, rgb(244 250 250) 0%, rgba(224,242,241,0) 90%);
} 
#header-top-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 90%;
    height: 100%;
} 

#header-bottom {
    position: relative;
    width: 100%;
    height: 70px;
	box-sizing: border-box;
}
#header-bottom #header-bottom-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 90%;
    height: 100%;
}
/* MENU - logo */
#header-bottom #logo {
    position: relative;
    display: flex;
    align-items: center;
    top: -20px;
    width: 380px;
    height: 50px;
}
#header-bottom #logo a {
    display: block; width: 100%; font-size: 24px; color: #333; font-weight: 700;
}
#header-bottom #logo img,
#header-bottom #logo svg {
    display: block;
    width: 100%;
    pointer-events: none;
}
/* MENU - main nav */
#menu { position: relative; display: flex; flex-direction: column; align-items: flex-end; /*margin-right: 40px;*/ font-family: 'Manrope', sans-serif; font-size: 19px; color: #333; }

ul#primary { display: flex; flex-wrap: wrap; order: 2; }
ul#primary li { position: relative; display: flex; align-items: center; margin-left: 30px; list-style: none; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
ul#primary li.hassub:after { content: ""; }
ul#primary li:first-of-type { margin-left: 0; }
ul#primary li a { display: flex; align-items: center; font-family: 'Inter', sans-serif; height: 100%; color: #333; font-weight: 700; text-decoration: none; box-sizing: border-box; }
ul#primary li:hover a,
ul#primary li.active a { color: #32aaa1; }

ul#primary li.hassub:after { position: relative; top: 0; display: inline-block; margin-left: 5px; margin-right: -10px; width: 13px; height: 13px; content: ""; background-image: url(../../images/icons/arrow-dropdown.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }
ul#primary li.hassub:hover:after { filter: invert(55%) sepia(83%) saturate(351%) hue-rotate(126deg) brightness(89%) contrast(86%); }

ul#primary li.hassub ul.sub { position: absolute; display: flex; flex-direction: column; top: 35px; left: 50%; padding: 25px 40px 25px 35px; border-radius: 4px; box-shadow: 0 0 25px rgb(0 0 0 / 5%); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%); transition: all ease 0.15s; background-color: #32aaa1; }
ul#primary li.hassub:hover ul.sub { top: 45px; opacity: 1; visibility: visible; pointer-events: initial; }
ul#primary li.hassub ul.sub:before { position: absolute; top: -5px; left: 50%; width: 20px; height: 20px; content: ""; transform: translateX(-50%) rotate(45deg); background-color: #32aaa1; }
ul#primary li.hassub ul.sub:after { position: absolute; top: -20px; left: 0; width: 100%; height: 20px; content: ""; z-index: -1; }
ul#primary li.hassub ul.sub li { margin-left: 0; border-bottom: 1px solid rgb(255 255 255 / 25%); }
ul#primary li.hassub ul.sub li:last-of-type { border-bottom: none; }
ul#primary li.hassub ul.sub li a { display: block; padding: 4px 15px 4px 0; width: 100%; font-size: 17px; color: #fff; font-weight: 400; text-transform: none; }
ul#primary li.hassub ul.sub li a:hover,
ul#primary li.hassub ul.sub li.active a { opacity: 0.6; }
ul#primary li.hassub ul.sub li a:before { position: relative; top: -1px; margin-right: 6px; /*content: ">";*/ }

ul#primary li.hassub.zelftests-vragenlijsten:after,
ul#primary li.hassub.webshop:after { content: none; }
ul#primary li.hassub.zelftests-vragenlijsten ul.sub,
ul#primary li.hassub.webshop ul.sub { display: none; }

/* SECONDAY NAV - optionally, see header html, nu sub foldout support */
ul#secondary {
    position: fixed;
    display: flex;
    align-items: center;
    order: 1;
    top: 0;
    padding-bottom: 2px;
    height: 40px;
    font-size: 14px;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}
ul#secondary li:nth-of-type(n+7) { 
    display: none;
}
ul#secondary li a { 
    margin-left: 20px;
    color: var(--main);
    font-weight: 500;
}
ul#secondary li.active a,
ul#secondary li a:hover {
    color: #32aaa1;
}
ul#secondary li.hassub ul.sub {
    display: none;
}
/*body.scroll ul#secondary {
    top: -50px;
} */

/* MENU - nav buttons divs */
#menu .nav-button {
    position: relative;
    top: 2px;
    right: 0;
    margin-left: 25px;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    cursor: pointer;
}
#menu .nav-button a {
    display: block;
    width: 100%;
    height: 100%;
}
#menu .nav-button svg {
    fill: #333;
    width: 100%; 
    height: 100%;
}
#menu .nav-button:hover svg {
    fill: #32aaa1;
}
.nav-button#menu-button {
    right: 20px;
    display: none;
    z-index: 3;  
}
.nav-button#cart-button {
    /*position: absolute;
    right: 30px;*/
}
.nav-button#search-button {

}
.nav-button#search-button {

}
.nav-button#cart-button .cart-num {
    position: absolute;
    right: -10px;
    bottom: 8px;
    font-size: 11px;
    line-height: 18px;
    font-weight: 500;
    color: #fff;
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 20px;
    background: #32aaa1;
}
/* MENU - language - put it where you like */
#langmenu {
    position: absolute;
    left: 30px;
    top: 50%;
    display: flex;
    transform: translateY(-50%);
}
#langmenu a {
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 30px;
    opacity: 0.5;
    margin-right: 20px;
}
#langmenu a.active,
#langmenu a:hover {
    opacity: 1;
}
#langmenu a img {
    display: block;
    width: 100%;
}

/* PAGE-HEADER */
#page-header {
    position: relative;
    height: 320px;
    /*height: 360px;*/
    background-color: #32aaa1;
}
div#page-header:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    /*content: "";*/
    background-color: #000;
    background: rgb(89,186,179);
    background: linear-gradient(0deg, rgba(89,186,179,1) 0%, rgba(89,186,179,0) 100%);
}
#page-header img {
    display: block;
    width: 100%;
    height: 100%;
    filter: grayscale(0.5);
    opacity: 0.5;
    object-fit: cover;
}
#page-header .arrow-down {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    bottom: 50px;
    cursor: pointer;
    transform: translateX(-50%);
}
#page-header .arrow-down svg {
    width: 30px;
    height: 30px;
    fill: var(--background);
}

/* BREADCRUMBS */

#page-header .breadcrumbs { position: absolute; left: 20px; top: 20px; }
#page-header .breadcrumbs ul { display: flex; text-transform: lowercase; }
#page-header .breadcrumbs ul li { padding-right: 10px; color: var(--background); }
#page-header .breadcrumbs ul li:not(:last-child):after { content: "›"; padding-left: 10px; }
#page-header .breadcrumbs ul li a { color: var(--background); }

.breadcrumbs { position: absolute; top: -50px; left: 0; font-size: 14px; }
.breadcrumbs ul { display: flex; }
.breadcrumbs ul li { }
.breadcrumbs ul li:after { margin: 0 8px; content: "›"; color: #1a6060; opacity: 0.5; }
.breadcrumbs ul li:last-of-type { pointer-events: none; }
.breadcrumbs ul li:last-of-type:after { content: none; }
.breadcrumbs ul li a { color: #1a6060; /*text-decoration: underline;*/ white-space: nowrap; }
.breadcrumbs ul li a:hover { text-decoration: none; opacity: 0.75; }
.breadcrumbs ul li a br { display: none; }
.breadcrumbs ul li:last-of-type a { color: #1a6060; text-decoration: none; opacity: 0.5; }
.breadcrumbs ul li:last-of-type a br { display: none; }

.row.invert .breadcrumbs ul li:after,
.row.invert .breadcrumbs ul li a { color: #fff; }
.row.invert .breadcrumbs ul li a:hover { opacity: 0.8; }

#page-header + .row .breadcrumbs { top: -50px; }
#page-header + .row .breadcrumbs ul li:after { color: #fff; }
#page-header + .row .breadcrumbs ul li a { color: #fff; }
#page-header + .row .breadcrumbs ul li:last-of-type a { color: #fff; text-decoration: none; opacity: 0.6; text-shadow: none; }
#page-header + .row .breadcrumbs ul li a:hover { text-decoration: none; }


/* HOMEPAGINA */

#wrapper .homepage { width: 100%; height: calc(100vh - 110px); }

body.homepage { background-color: transparent; }
body.homepage #header { box-shadow: 0 -5px 15px rgba(0,0,0,0.1); }

body.homepage .content { flex-direction: column; }
body.homepage .content .page_content { }
body.homepage .content .page_content h2 { font-size: 28px; color: #1a6060; }
body.homepage .content .page_content p { margin-bottom: 15px; }
body.homepage .content .page_content p:last-of-type { margin-bottom: 0; }

.columns { display: flex; flex-wrap: wrap; width: 100%; height: 100%; }

.columns .column.left { display: flex; align-items: center; flex: 1; padding: 0 5%; /* width: 50%; */ height: 100%; box-sizing: border-box; }
.columns .column.left .center { }
.columns .column.left .center h1 { margin-bottom: 45px; padding-right: 15%; color: #323232; }
.columns .column.left .center h1 span { display: block; margin-top: 15px; font-family: 'Inter', sans-serif; font-size: 20px; color: #323232; font-weight: 500; line-height: 1.4; font-style: italic; }
.columns .column.left .center h1 + a.btn { margin-top: -15px; margin-bottom: 30px; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); filter: brightness(1); transition: filter ease 0.15s; background-color: var(--abk-orange); }
.columns .column.left .center h1 + a.btn:hover { filter: brightness(1.1); }
.columns .column.left .center h2 { margin-bottom: 60px; font-size: 56px; }

.columns .column.left .center .typewriter-text { margin-bottom: 30px; font-size: 19px; }
.columns .column.left .center .typewriter-text span { /*display: block;*/ }
.columns .column.left .center .typewriter-text span:after { content: "|"; animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite; }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink-animation { to { visibility: hidden; } } @-webkit-keyframes blink-animation { to { visibility: hidden; } }

/*.columns .column.left .center ol { border-top: 1px solid #efefef; counter-reset: section; }
.columns .column.left .center ol li { display: flex; align-items: center; padding: 18px 0; font-size: 19px; border-bottom: 1px solid #efefef; box-sizing: border-box; }
.columns .column.left .center ol li:before { position: relative; top: -2px; width: 60px; font-family: 'Manrope', sans-serif; font-size: 28px; color: #32aaa1; font-weight: 900; line-height: 1; counter-increment: section; content: "" counter(section, decimal-leading-zero) ""; }
.columns .column.left .center ol li:first-of-type:before { letter-spacing: 2px; }
.columns .column.left .center ol li span { position: relative; top: 1px; padding-right: 20%; width: calc(100% - 60px); font-weight: 500; line-height: 1.4; box-sizing: border-box; }
.columns .column.left .center ol li span a { color: #32aaa1; font-weight: 700; }
.columns .column.left .center ol li span a:hover { color: #1a6060; }*/

.columns .column.left .center ol { border-top: 1px solid #efefef; counter-reset: section; }
.columns .column.left .center ol li { display: flex; align-items: center; padding: 18px 0; font-size: 19px; border-bottom: 1px solid #efefef; box-sizing: border-box; }
.columns .column.left .center ol li:before { position: relative; top: -2px; width: 60px; font-family: 'Manrope', sans-serif; font-size: 28px; color: #323232; font-weight: 900; line-height: 1; counter-increment: section; content: "" counter(section, decimal-leading-zero) ""; }
.columns .column.left .center ol li:first-of-type:before { letter-spacing: 2px; }
.columns .column.left .center ol li span { position: relative; top: 1px; width: calc(100% - 60px); font-weight: 500; line-height: 1.4; box-sizing: border-box; }
.columns .column.left .center ol li span a { color: #32aaa1; font-weight: 700; text-decoration: underline; }
.columns .column.left .center ol li span a:hover { text-decoration: none; }

.columns .column.right { height: 100%; aspect-ratio: 1/1; }
.columns .column.right .images { display: flex; flex-wrap: wrap; width: 100%; height: 100%; }
.columns .column.right .images .image { position: relative; width: calc(100% / 3); aspect-ratio: 1/1; background-color: #32aaa1; }
.columns .column.right .images .image img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }

.columns .column.right .images .image:nth-of-type(1),
.columns .column.right .images .image:nth-of-type(7) { opacity: 0; }
.columns .column.right .images .image:nth-of-type(3) img,
.columns .column.right .images .image:nth-of-type(9) img { opacity: 0; }

/* Homepagina - .first */

body.homepage .row.first { padding: 0; font-size: 18px; /*border-top: 1px solid #efefef;*/ background-color: rgb(50 170 161 / 10%); }
body.homepage .row.first .content { max-width: 1600px; }
body.homepage .row.first .page_content { display: flex; /*flex-wrap: wrap;*/ padding: 120px 0; column-gap: 60px; }
body.homepage .row.first .left { margin: 0; padding: 0; width: 50%; }
body.homepage .row.first .right { display: block; margin: 0; padding: 0; width: 50%; }
body.homepage .row.first h2 { font-size: 24px!important; }
body.homepage .row.first p:last-of-type + h2 { margin-bottom: 0; }
body.homepage .row.first ul { margin-top: 10px; margin-bottom: 15px; }
body.homepage .row.first ul li { position: relative; margin: 0; padding: 2px 0; /*padding-left: 30px;*/ list-style: none; }
body.homepage .row.first ul li:before { position: absolute; top: 0; left: 0; display: block; height: 100%; aspect-ratio: 1/1; /*content: "";*/ background-image: url(../../images/icons/checkmark-green.svg); background-size: 18px; background-position: left center; background-repeat: no-repeat; }

/* Homepagina - USP's */

body.homepage .row.usps { background-color: #e0f2f1; }
body.homepage .row.usps .content { max-width: 1600px; }
body.homepage .row.usps .usps { display: flex; flex-direction: column; justify-content: center; order: 2; width: 100%; box-sizing: border-box; }
body.homepage .row.usps .usps h2 { margin-top: -30px; margin-bottom: 60px; text-align: center; }
body.homepage .row.usps .usps ul { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px; }
body.homepage .row.usps .usps ul li { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 0; padding: 30px 45px; list-style: none; text-align: left; border-radius: 5px; background-color: #fff; }
body.homepage .row.usps .usps ul li span { font-size: 19px; line-height: 1.4; }
body.homepage .row.usps .usps ul li span:last-of-type { padding-left: 35px; }
body.homepage .row.usps .usps ul li span svg { display: block; width: 80px; height: 80px; fill: #32aaa1; }
body.homepage .row.usps .usps ul li span a { color: #32aaa1; }

/* Homepagina - Veelvoorkomend */

body.homepage .row.common { }
body.homepage .row.common .content { max-width: 1600px; }
body.homepage .row.common .common { display: flex; flex-direction: column; align-items: center; justify-content: center; order: 2; width: 100%; box-sizing: border-box; }
body.homepage .row.common .common h2 { margin-top: -30px; margin-bottom: 45px; text-align: center; }
body.homepage .row.common .common .klachten { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; width: 100%; }
body.homepage .row.common .common .klachten .klacht { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; margin: 0; padding: 15px; font-size: 19px; color: #32aaa1; line-height: 1; text-align: left; list-style: none; border-radius: 5px; filter: brightness(1); transition: filter ease 0.15s; background-color: #fff; background-color: #e0f2f1; }
body.homepage .row.common .common .klachten .klacht:hover { filter: brightness(1.05); }
body.homepage .row.common .common .klachten .klacht a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
body.homepage .row.common .common .klachten .klacht .image { width: 60px; aspect-ratio: 1 / 1; border-radius: 5px; overflow: hidden; background-color: #fff; }
body.homepage .row.common .common .klachten .klacht .image img { width: 100%; height: 100%; object-fit: cover; }
body.homepage .row.common .common .klachten .klacht .title { }

body.homepage .row.common .common .klachten .klacht span { font-size: 19px; line-height: 1.4; }
body.homepage .row.common .common .klachten .klacht span:last-of-type { padding-left: 35px; }
body.homepage .row.common .common .klachten .klacht span svg { display: block; width: 80px; height: 80px; fill: #32aaa1; }
body.homepage .row.common .common .klachten .klacht span a { color: #32aaa1; }

body.homepage .row.common .common .klachten + a { margin-top: 45px; margin-bottom: -30px; }

/* Homepagina - Waarom */

body.homepage .row.waarom { background-color: #e0f2f1; }

/* Homepagina - Fysiotherapeuten */

body.homepage .row.fysiotherapeuten { padding: 90px 0 120px 0; background-color: #fff; }
body.homepage .row.fysiotherapeuten .page_content { display: flex; flex-direction: column; align-items: center; }
body.homepage .row.fysiotherapeuten h2 { margin-bottom: 45px; }
body.homepage .row.fysiotherapeuten h2 + h2 { margin-top: -30px; font-size: 24px; font-weight: 500; }
body.homepage .row.fysiotherapeuten ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
body.homepage .row.fysiotherapeuten ul li { position: relative; margin: 0; padding: 35px; padding-bottom: 80px; line-height: 1.5; list-style: none; border-radius: 5px; background-color: rgb(50 170 161 / 10%); }
body.homepage .row.fysiotherapeuten ul li strong { display: inline-block; margin-bottom: 10px; width: 100%; font-size: 21px; line-height: 1.2; }
body.homepage .row.fysiotherapeuten ul li a { position: absolute; bottom: 45px; }

/* Homepagina - Product vd Maand */

body.homepage .row.pvdm { background-color: rgb(50 170 161 / 15%); }
body.homepage .row.pvdm > .content { max-width: 1400px; }
body.homepage .row.pvdm .product { display: flex; gap: 60px; border-radius: 10px; background-color: #fff; }
body.homepage .row.pvdm .product-image { position: relative; display: flex; align-items: center; justify-content: center; width: 40%; aspect-ratio: 4 / 3; border-radius: 5px; background-color: #fff; }
body.homepage .row.pvdm .product-image a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-right: 1px solid rgb(0 0 0 / 10%); }
body.homepage .row.pvdm .product-image img { display: block; width: auto; max-width: 80%; height: auto; max-height: 80%; }
body.homepage .row.pvdm .product-content { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; /* padding-bottom: 10px; */ padding-right: 60px; width: 50%; }
/*body.homepage .row.pvdm .product-content .title { position: absolute; display: flex; align-items: center; justify-content: center; top: -30px; left: -180px; padding: 30px; width: 150px; aspect-ratio: 1 / 1; font-size: 24px; color: #323232; font-weight: 700; line-height: 1; text-align: center; border-radius: 50%; box-sizing: border-box; transform: rotate(-10deg); background-color: rgb(255 189 92); }*/
body.homepage .row.pvdm .product-content .title { position: absolute; display: flex; align-items: center; justify-content: center; top: -25px; left: -150px; padding: 20px 25px; font-size: 24px; color: #323232; font-weight: 900; line-height: 1; text-align: center; border-radius: 3px; box-sizing: border-box; transform: rotate(-5deg); background-color: rgb(255 189 92); }
body.homepage .row.pvdm .product-content .naam { margin-bottom: 15px; font-family: 'Manrope', sans-serif; font-size: 28px; color: #323232; font-weight: 900; line-height: 1.2; }
body.homepage .row.pvdm .product-content .subtitle { margin-bottom: 10px; font-family: 'Inter', sans-serif; font-size: 21px; color: #1a6060; font-weight: 500; line-height: 1.3; }
body.homepage .row.pvdm .product-content a.btn { position: relative; display: flex; justify-content: space-between; left: -2px; margin-top: 30px; padding: 15px 30px 18px 30px; color: #fff; font-weight: 600; line-height: 1; opacity: 1; border-radius: 10px; box-sizing: border-box; transition: all ease 0.15s; background-color: #32aaa1; }
body.homepage .row.pvdm .product-content a.btn:hover { opacity: 0.9; }
body.homepage .row.pvdm .product-content a.btn svg { position: relative; top: 1px; margin: -10px 0; margin-left: 10px; margin-right: -5px; width: 24px; fill: #fff; }

/* Homepagina - Blog (Uitgelicht) */

.row.blog { }
.row.blog .page_content { display: flex; flex-direction: column; }
.row.blog h2 { margin-bottom: 30px; font-size: 32px; color: #32aaa1; }

.row.blog .uitgelicht { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; /*margin-top: 45px;*/ }
.row.blog .uitgelicht .item { position: relative; border-radius: 8px; overflow: hidden; box-sizing: border-box; background-color: rgb(50 170 161 / 15%); }
.row.blog .uitgelicht .item > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.row.blog .uitgelicht .item .image { position: relative; width: 100%; aspect-ratio: 4 / 3; box-sizing: border-box; }
.row.blog .uitgelicht .item .image:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0.25; z-index: 1; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.row.blog .uitgelicht .item .image .title { position: absolute; bottom: 0; left: 0; padding: 30px; font-size: 18px; color: #fff; font-weight: 700; line-height: 1.2; z-index: 1; }
.row.blog .uitgelicht .item .image img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; /*opacity: 0.9; filter: grayscale(0.5);*/ filter: brightness(1); transition: filter ease 0.15s; }
.row.blog .uitgelicht .item:hover .image img { filter: brightness(0.75); }
.row.blog .uitgelicht .item .content { padding: 25px 30px 35px 30px; width: 100%; line-height: 1.5; box-sizing: border-box; z-index: 1; }
.row.blog .uitgelicht .item .content .date { margin-top: auto; margin-bottom: 10px; color: var(--primarycta); opacity: 1; }
.row.blog .uitgelicht .item .content .leesmeer { display: inline-block; margin-top: 15px; }
.row.blog .uitgelicht .item:hover .content .leesmeer { text-decoration: none; }

.row.blog a.more { margin-top: 30px; text-align: right; }

/* Homepagina - Reviews */

.row.reviews { padding: 90px 0; background-color: #e0f2f1; }
.row.reviews .page_content { display: flex; flex-direction: column; }
.row.reviews h2 { margin-bottom: 30px; }

.reviews .items h2 { margin-bottom: 45px; width: 100%; font-family: 'Bebas Neue', cursive; font-size: 56px; color: #fff; font-weight: 400; line-height: 1; letter-spacing: 1px; text-align: center; }
.reviews .items { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
.reviews .items .item { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 40px; font-size: 15px; color: #333; font-weight: 400; line-height: 1.6; /*overflow: hidden;*/ border-radius: 5px; box-sizing: border-box; background-color: #fff; }
.reviews .items .item a.link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.reviews .items .item .top { position: relative; display: flex; flex-wrap: wrap; left: -2px; width: 100%; }
.reviews .items .item .top .top-image { width: 80px; height: 80px; font-size: 0; border-radius: 50%; overflow: hidden; background-color: #efefef; }
.reviews .items .item .top .top-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reviews .items .item .top .top-right { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin: 0; width: 100%; line-height: 1.5; box-sizing: border-box; }
.reviews .items .item .top .top-image + .top-right { padding-left: 20px; width: calc(100% - 80px); }
.reviews .items .item .top .top-right .naam { margin-bottom: 5px; font-size: 18px; font-weight: 600; line-height: 1.2; }
.reviews .items .item .top .top-right .date { margin: 0; margin-top: 2px; font-size: 14px; color: #999; letter-spacing: 1px; opacity: 1; }
.reviews .items .item .top .top-right .rating { position: relative; left: -2px; margin-top: 2px; }
.reviews .items .item .top .top-right .date + .rating { margin-top: 6px; }
.reviews .items .item .top .top-right .rating .stars { display: flex; }
.reviews .items .item .top .top-right .rating .stars svg { position: relative; left: -2px; width: 100px; height: 20px; fill: #ffa826; }
.reviews .items .item .review { margin-top: 15px; }
.reviews .items .item .review p { display: inline; }
.reviews .items .item .review:before { position: relative; display: inline-block; top: 15px; margin-top: -20px; margin-bottom: -20px; margin-right: 5px; font-family: 'Vollkorn', serif; font-size: 40px; font-weight: 400; line-height: 1; opacity: 0.55; } 
.reviews .items .item .review:after { position: relative; display: inline-block; top: 20px; margin-top: -20px; margin-right: 5px; font-family: 'Vollkorn', serif; font-size: 40px; font-weight: 400; line-height: 1; opacity: 0.55; }
.reviews a.more { margin-top: 30px; text-align: right; }

body.homepage .reviews .items .item .review { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.page_content .reviews .items { display: flex; flex-direction: column; margin-bottom: 45px; }
.page_content .reviews .items .item { background-color: #f4fafa; }
.page_content .reviews .items .item a.anchor { top: -150px; }


/* CONTENT */

.row { position: relative; padding: 120px 0 120px 0; }
.row.first { background-color: #e0f2f1; }
#page-header + .row { padding: 60px 0 90px 0; }

.row.invert { color: #fff; }
.row.invert h1 { color: #fff; }
.row.invert h2 { color: #fff; }

.row > .content { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; column-gap: 30px; max-width: 1400px; width: 90%; margin: 0px auto; }
body:not(.homepage) .row.first > .content { max-width: 1400px; box-sizing: border-box; }
#page-header + .row.first > .content { margin-top: -120px; /*margin-top: -160px;*/ }


body.userforms .content {
    /*flex-direction: column;*/
    /*align-items: center;*/
}
body.userforms .row.first > .content {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}
body.contact.userforms .content {
    flex-direction: row;
    align-items: flex-start;
}


/* CONTENT > page_content */
.content .page_content { flex: 1; width: 100%; }
.content .page_content.hasmedia { /*width: 60%; padding-right: 5%;*/ }

/* do not foget to copy any changes to responsive.css! */
body:not(.homepage):not(.webshop):not(.news):not(.pid415)/* Doneer */ .row.first .content .page_content,
body.news .row.first .content .page_content.news_item { flex: 1; padding: 75px; width: 100%; border-radius: 10px; box-sizing: border-box; background-color: #fff; }

/* SUBMENU */

/* submenu on page (default) */

#submenu { position: sticky; align-self: flex-start; top: 140px; padding: 40px 45px; width: 360px; /*max-height: calc(100vh - 260px);*/ max-height: calc(100vh - 170px); border-radius: 10px; box-sizing: border-box; overflow-y: scroll; background-color: #fff; }
#page-header + .row #submenu { /*max-height: calc(100vh - 400px);*/ }

#submenu:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; /*content: "";*/ background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }

#submenu::-webkit-scrollbar { width: 18px; }
#submenu::-webkit-scrollbar-track { background-color: transparent; }
#submenu::-webkit-scrollbar-thumb { border-radius: 20px; border: 6px solid transparent; cursor: grab; background-color: #ccc; background-clip: content-box; }
#submenu::-webkit-scrollbar-thumb:hover { opacity: 0.5; }

#submenu-trigger { display: none; }

/* subpagina's */

#submenu > ul { width: 100%; box-sizing: border-box; }
#submenu > ul > li { line-height: 1.2; }

/* subpagina's (vervolg) */

#submenu > ul > li.hassub:before { position: absolute; left: -25px; /*content: "+";*/ }
#submenu > ul > li.active.hassub:before { content: none; }
#submenu > ul > li:last-of-type { margin-bottom: 0; }

#submenu > ul > li > a { padding: 6px 0; font-size: 16px; color: #333; display: block; }
#submenu > ul > li > a:hover,
#submenu > ul > li.active > a { color: #32aaa1; }

#submenu > ul > li.parent { margin-bottom: 10px; }
#submenu > ul > li.parent > a,
#submenu > ul > li.active > a { color: #32aaa1; }
#submenu > ul > li.parent > a { font-weight: 700; }
#submenu > ul > li.parent > svg { display: none; }
#submenu > ul > li.parent:hover > svg { fill: #32aaa1; }
#submenu > ul > li.parent.active > svg { }
#submenu > ul > li.parent > a { padding: 3px 0; width: 90%; font-size: 21px; line-height: 1.1; }

#submenu > ul > li.hassub:hover:before { color: #32aaa1; }

#submenu > ul > li.parent,
#submenu > ul > li.active,
#submenu > ul > li.active ul li,
#submenu > ul > li.parent.active ~ li { display: flex; flex-direction: column; justify-content: center; }

/* subsubpagina's */

#submenu > ul > li ul { }
#submenu > ul > li.active ul { display: block; }
#submenu > ul > li ul li { line-height: 1.2; }
#submenu > ul > li ul li a { padding: 6px 0; font-size: 16px; color: #333; }
#submenu > ul > li ul li:hover a,
#submenu > ul > li ul li.active a { color: #32aaa1; }

#submenu ul li.active ul li.subactive a { color: #32aaa1; }


body.userforms.pid3 .content .page_content { width: 100%; }

.content .right { position: sticky; order: 2; top: 140px; /*width: 360px;*/ width: 480px; }
body.userforms .right,
body.webshop .right,
body.contact .right,
#submenu + .page_content + .right { display: none; }


/* RIGHT */

.row .right { display: flex; flex-direction: column; row-gap: 20px; }

/* right - cta's */

.row .right .cta { padding: 40px; width: 100%; border-radius: 5px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; box-sizing: border-box; background-color: #1a6060; background-color: #fff; }
.row .right .cta h2 { margin-bottom: 20px; color: #1a6060; font-weight: 700; line-height: 1.2; }
.row .right .cta p { margin-bottom: 20px; font-size: 16px; color: #323232; font-weight: 500; line-height: 1.5; }
.row .right .cta a { position: relative; display: flex; justify-content: space-between; left: -2px; padding: 15px 30px 17px 30px; width: calc(100% + 4px); color: #323232; font-weight: 600; line-height: 1; opacity: 1; border-radius: 10px; box-sizing: border-box; transition: all ease 0.15s; background-color: #ffbd5c; }
.row .right .cta a:hover { background-color: #ffc36c; }
.row .right .cta a svg { position: absolute; top: 0; right: 30px; width: 28px; height: 100%; fill: #323232; }

.row .right .ctas + img { display: block; margin-top: 25px; width: 100%; border-radius: 5px; }

/* right - usp's */

.row .right .usps { display: flex; flex-direction: column; align-items: flex-start; padding: 40px; padding-bottom: 25px; width: 100%; color: #323232; border-radius: 5px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; box-sizing: border-box; background-color: #1a6060; background-color: #fff; }
.row .right .usps h2 { margin-bottom: 10px; padding-right: 10%; color: #1a6060; line-height: 1.2; }
.row .right .usps h2 em { display: block; margin-top: 5px; margin-bottom: 2px; font-size: 18px; font-weight: 500; }

.row .right .usps ul { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
.row .right .usps ul li { display: flex; align-items: center; padding: 10px 0; font-size: 16px; font-weight: 500; line-height: 1.2; border-bottom: 1px solid rgb(26 96 96 / 15%); }
.row .right .usps ul li:last-of-type { border-bottom: none; }
.row .right .usps ul li:before { position: relative; margin-right: 10px; width: 16px; height: 16px; content: ""; background-image: url(../../images/icons/checkmark-green.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }
.row .right .usps ul li strong { font-weight: 400; }
.row .right .usps ul li strong svg { display: none; }

.row .right .usps a { position: relative; display: flex; justify-content: space-between; left: -2px; margin: 20px 0 15px 0; padding: 15px 30px 17px 30px; width: auto; color: #323232; font-weight: 600; line-height: 1; opacity: 1; border-radius: 10px; box-sizing: border-box; transition: all ease 0.15s; background-color: #ffbd5c; }
.row .right .usps a:hover { background-color: #ffc36c; }
.row .right .usps a svg { position: relative; top: 1px; margin: -4px 0; margin-left: 10px; margin-right: -5px; width: 24px; height: 100%; fill: #323232; }

/* right - notice (let op!) */

.row .right .notice { display: flex; flex-direction: column; align-items: flex-start; padding: 40px; width: 100%; color: #323232; border-radius: 5px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; box-sizing: border-box; background-color: #fff; background-color: #ffbd5c; }
.row .right .notice h2 { color: #323232; }
.row .right .notice p { margin-bottom: 10px; }
.row .right .notice p:last-of-type { margin-bottom: 0; }
.row .right .notice p strong { font-weight: 600; }
.row .right .notice p a { color: #323232; text-decoration: underline; }
.row .right .notice p a:hover { text-decoration: none; }


.content .page_content p {
    margin-bottom: 25px;
}
.content .page_content p:last-of-type {
    margin-bottom: 0;
}
.content .page_content p:last-of-type + h2 {
    margin-top: 25px;
}
.content .page_content .block { position: relative; margin-bottom: 45px; }
.content .page_content .block.foldout { margin: 0; padding: 15px 0 18px 0; border-bottom: 1px solid rgb(50 170 161 / 25%); cursor: pointer; }
.content .page_content .block.foldout.first { margin-top: 45px; border-top: 1px solid rgb(50 170 161 / 25%); }
.content .page_content .block.foldout.last { margin-bottom: 15px; }
.content .page_content .block.foldout:after { position: absolute; top: 0; right: 0; width: 60px; aspect-ratio: 1 / 1; content: ""; cursor: pointer; background-image: url(../../images/icons/arrow-dropdown.svg); background-position: center; background-size: 16px; background-repeat: no-repeat; }
.content .page_content .block.foldout * { display: none; }
.content .page_content .block.foldout h2,
.content .page_content .block.foldout a { display: block; }
.content .page_content .block.foldout h2 { margin-bottom: 0; }
.content .page_content .block.foldout:not(.active):hover h2,
.content .page_content .block.foldout:hover:after { opacity: 0.6; }

.content .page_content .block.foldout.active { padding: 30px 0; cursor: auto; }
.content .page_content .block.foldout.active:after { transform: rotate(180deg); }
.content .page_content .block.foldout.active * { display: revert; }
.content .page_content .block.foldout.active h2 { margin-bottom: 15px; }
.content .page_content .block.foldout.active blockquote { margin-bottom: 0; }

.content .page_content .block.instructional { margin-top: 45px; margin-bottom: 15px; }

.content .page_content .block a.back { display: block; margin-top: 25px; }

.content .page_content a {
    text-decoration: underline;
}
.content .page_content a:hover {
    text-decoration: none;
}
.content .page_content a strong,
.content .page_content strong a {
    font-weight: 600;
}
.content .page_content p img,
.content .page_content h2/* don't ask */ img {
    display: block;
    margin: 30px 0;
    width: 100%;
    max-width: 100%;
    height: auto!important;
    border-radius: 5px;
    background-color: #efefef;
}

body:not(.pid54/* Diensten */):not(.pid469/* Referenties */) .content .page_content blockquote {
    margin-bottom: 40px;
    padding: 35px 40px;
    font-size: 15px;
    line-height: 1.7;
    border-radius: 5px;
    font-style: normal;
    background-color: #f4fafa;
}

/*.content .page_content blockquote em {
    font-style: normal;
}*/
.content .page_content .shop_products_intro > blockquote:first-of-type {
    margin-top: 40px;
    padding: 40px 60px 40px 40px;
}
.content .page_content .shop_products_intro > blockquote h2 {
    margin-bottom: 10px;
    font-size: 18px;
}
.content .page_content blockquote:last-of-type {
    margin-bottom: 0;
}

.content .page_content blockquote h3 { }
.content .page_content blockquote h3:last-of-type { margin-bottom: 0; }
.content .page_content blockquote p { margin-bottom: 15px; }
.content .page_content blockquote p:last-of-type { margin-bottom: 0; }

.content .page_content blockquote:last-of-type + h2,
.content .page_content blockquote:last-of-type + p,
.content .page_content blockquote:last-of-type + ul,
.content .page_content blockquote:last-of-type + ol {
    margin-top: 40px;
}
.content .page_content h1 + blockquote,
.content .page_content p + blockquote,
.content .page_content ul + blockquote,
.content .page_content ol + blockquote {
    margin-top: 35px;
}
.content .page_content > img {
	display: block;
    margin: 30px 0;
    width: 100%;
}
.content .page_content p:last-of-type > img {
	margin-bottom: 0;
}
.content .page_content strong {
    font-weight: 700;
}
.content .page_content ul,
.content .page_content ol {
    margin-bottom: 20px;
}
.content .page_content ul li ul,
.content .page_content ol li ol {
    margin-bottom: 20px!important;
}
.content .page_content ul:last-of-type,
.content .page_content ol:last-of-type {
    margin-bottom: 0;
}
.content .page_content ul:last-of-type + h2,
.content .page_content ol:last-of-type + h2,
.content .page_content ul:last-of-type + h3,
.content .page_content ol:last-of-type + h3,
.content .page_content ul:last-of-type + p,
.content .page_content ol:last-of-type + p {
    margin-top: 20px;
}
.content .page_content p + ul,
.content .page_content p + ol {
    margin-top: -15px;
}
.content .page_content p:last-of-type + ul,
.content .page_content p:last-of-type + ol {
    margin-top: 15px;
}
.content .page_content p:last-of-type + ul {
    margin-top: 0;
}
.content .page_content ul li {
    list-style-type: disc;
    margin-left: 20px;
}
.content .page_content ol li {
    list-style-type: decimal;
    margin-left: 20px;
}

body.screening.pid50 .content .page_content > ul,
body.zelftests.pid458 .content .page_content > ul,
body.klachten.pid3 .content .page_content > ul,
body.pid2/* Over AdviesBijKlachten */ .content .page_content > ul,
body.pid2/* Over AdviesBijKlachten */ .content .page_content blockquote > ul,
body.pid516/* FysioCursusWijzer */ .content .page_content > ul,
body.pid59/* Leefstijl & training */ .content .shop_products_intro > ul { margin-top: -8px; }
body.screening.pid50 .content .page_content > ul li,
body.zelftests.pid458 .content .page_content > ul li,
body.klachten.pid3 .content .page_content > ul li,
body.pid2/* Over AdviesBijKlachten */ .content .page_content > ul li,
body.pid2/* Over AdviesBijKlachten */ .content .page_content blockquote > ul li,
body.pid516/* FysioCursusWijzer */ .content .page_content > ul li,
body.pid59/* Leefstijl & training */ .content .shop_products_intro > ul li { position: relative; margin: 0; padding-left: 25px; list-style: none; }
body.screening.pid50 .content .page_content > ul li:before,
body.zelftests.pid458 .content .page_content > ul li:before,
body.klachten.pid3 .content .page_content > ul li:before,
body.pid2/* Over AdviesBijKlachten */ .content .page_content > ul li:before,
body.pid2/* Over AdviesBijKlachten */ .content .page_content blockquote > ul li:before,
body.pid516/* FysioCursusWijzer */ .content .page_content > ul li:before,
body.pid59/* Leefstijl & training */ .content .shop_products_intro > ul li:before { position: absolute; display: block; top: 7px; left: 0; margin-right: 10px; width: 14px; height: 14px; content: ""; background-image: url(../../images/icons/checkmark-green-small.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }

.content .page_content table { /*border: 1px solid #ddd;*/ width: 100%; margin-bottom: 30px; }
.content .page_content h1 + table { margin-top: 35px; }
.content .page_content table:last-of-type { margin-bottom: 0; }
.content .page_content table:last-of-type + p { margin-top: 40px; }
.content .page_content table tr:nth-of-type(odd) { background-color: rgb(50 170 161 / 10%); }
.content .page_content table tr td { padding: 0; /*border: 1px solid #ccc;*/ }


/* SCREENING */

body.screening .direct { margin-top: 35px; }
body.screening .direct h2 { margin-top: 45px; margin-bottom: 30px; font-family: 'Manrope', sans-serif; font-size: 28px; /*color: #1a6060;*/ font-weight: 900; line-height: 1.2; }
body.screening .direct ul { display: flex; flex-direction: column; margin: 0; padding: 0; border-top: 1px solid rgb(26 96 96 / 15%); }
body.screening .direct ul li { margin: 0; padding: 0px; list-style: none; border-bottom: 1px solid rgb(26 96 96 / 15%); }
body.screening .direct ul li a { position: relative; display: flex; align-items: center; gap: 15px; padding: 0; font-size: 19px; color: #1a6060; font-weight: 500; text-decoration: none; }
body.screening .direct ul li a:hover { opacity: 0.6; }
body.screening .direct ul li a:before { display: block; position: relative; top: 0; left: 0; width: 25px; height: 60px; content: ""; filter: invert(30%) sepia(16%) saturate(2271%) hue-rotate(131deg) brightness(87%) contrast(80%); background-image: url(../../images/icons/arrow-right.svg); background-position: center; background-size: 100% auto; background-repeat: no-repeat; }


/* ZELFTESTS */

body.zelftests .zelftests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 45px; }
body.zelftests .zelftests .zelftest { position: relative; display: flex; flex-direction: column; align-items: center; padding: 45px; border-radius: 5px; background-color: rgb(50 170 161 / 5%); }
body.zelftests .zelftests .zelftest:hover { opacity: 0.8; }
body.zelftests .zelftests .zelftest a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
body.zelftests .zelftests .zelftest .image { margin-bottom: 15px; width: 75px; height: 75px; }
body.zelftests .zelftests .zelftest .image img { width: 100%; filter: invert(31%) sepia(12%) saturate(2457%) hue-rotate(131deg) brightness(90%) contrast(85%); }
body.zelftests .zelftests .zelftest .title { font-size: 19px; color: #1a6060; font-weight: 500; line-height: 1.2; text-align: center; }


/* KLACHTEN EN BLESSURES */

body.klachten .content .page_content h2 { font-weight: 700; /*font-weight: 800;*/ }

/* Klachten - quicksearch */

.quicksearch { position: relative; display: flex; flex-wrap: wrap; column-gap: 10px; left: -3px; margin-top: 35px; margin-bottom: 45px; }

.quicksearch div,
.quicksearch a { display: flex; align-items: center; padding: 14px 24px 16px 27px; font-size: 16px; color: #323232; font-weight: 700; line-height: 1; text-decoration: none!important; border-radius: 10px; cursor: pointer; background-color: rgb(255 173 51 / 80%); }
.quicksearch div img,
.quicksearch a img { position: relative; }
.quicksearch div.search-button { }
.quicksearch div.search-button:hover { background-color: rgb(255 173 51 / 65%); }
.quicksearch div.search-button img { top: 0; margin: -5px 10px -5px -2px; width: 15px; filter: invert(0%) sepia(1%) saturate(3578%) hue-rotate(196deg) brightness(103%) contrast(61%); }

/* Klachten - quicknav */

.quicknav { position: relative; display: flex; gap: 20px; margin-top: 45px; margin-bottom: 45px; }

.quicknav .item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px; padding-bottom: 35px; width: calc(100% / 3); text-align: center; border-radius: 5px; box-sizing: border-box; background-color: #f4fafa; }
.quicknav .item.screening { color: #fff; background-color: #33aaa1; }
.quicknav .item.programma { color: #fff; background-color: #3f51b5; }
.quicknav .item.producten { background-color: #ffbd5c; }
.quicknav .item:hover { /*opacity: 0.9;*/ filter: brightness(1.05); }
.quicknav .item:after { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; /* padding: 10px; */ border-radius: 50%; box-sizing: border-box; content: ""; filter: invert(1); background-color: #ffffff29; background-image: url(../../images/icons/arrow-down-products.svg); background-position: center; background-size: 16px; background-repeat: no-repeat; }
.quicknav .item.screening:after { background-size: 20px; background-image: url(../../images/icons/arrow-new-tab.svg); }
.quicknav .item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.quicknav .item .title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.quicknav .item .title strong { display: block; }
.quicknav .item .title em { display: block; margin-top: 2px; font-size: 16px; font-weight: 400; line-height: 1.2; }

.quicknav .item .icon { display: flex; align-items: center; justify-content: center; margin-top: -20px; margin-bottom: 20px; margin-bottom: 0; width: 150px; height: 150px; border-radius: 50%; transform: scale(0.75); background-color: #fff;}
.quicknav .item .icon svg { position: relative; display: block; width: 90px; height: 90px; fill: #323232; }
.quicknav .item.programma .icon svg { top: -8px; right: -3px; }
.quicknav .item.producten .icon svg { left: -10px; }

/* Alle andere pagina's met producten - quicknav */

body:not(.pid3) .quicknav { margin-top: 35px; }
body:not(.pid3) .quicknav .item { flex-direction: row; gap: 5px; padding: 20px; padding-right: 25px; width: 100%; max-width: 50%; }
body:not(.pid3) .quicknav .item .icon { order: 1; margin: 0; width: 50px; height: 50px; transform: none; background-color: transparent; }
body:not(.pid3) .quicknav .item .icon svg { left: 0; }
body:not(.pid3) .quicknav .item.programma { padding: 20px 25px; }
body:not(.pid3) .quicknav .item.programma .icon svg { top: -3px; fill: #fff; }
body:not(.pid3) .quicknav .item .title { order: 3; margin-left: 5px; width: 210px; text-align: left; }
body:not(.pid3) .quicknav .item:after { position: relative; order: 2; top: -10px; right: 0; width: 24px; height: 24px; background-size: 11px; }

/* Klachten - submenu */

/* Klachten - submenu - subpagina's */

body.klachten #submenu > ul { width: 100%; box-sizing: border-box; }
body.klachten #submenu > ul > li { display: none; line-height: 1.2; }

/* Klachten - submenu - subpagina's - terug naar overzicht */

body.klachten #submenu > ul > li.parent { flex-direction: row!important; justify-content: flex-start!important; margin-bottom: 0; /*padding-right: 10%;*/ opacity: 0.8; }
body.klachten #submenu > ul > li.parent a { font-weight: 400!important; /*text-transform: lowercase;*/ }
body.klachten #submenu > ul > li.parent a:before { content: "Terug naar overzicht "; text-transform: lowercase; }
body.klachten #submenu > ul > li.parent.active { margin-bottom: 10px; /*text-transform: uppercase;*/ opacity: 1; }
body.klachten #submenu > ul > li.parent.active a { color: #32aaa1; font-weight: 700!important; }
body.klachten #submenu > ul > li.parent.active a:before { content: none; }

body.klachten #submenu > ul > li.parent span { display: none; }
body.klachten #submenu > ul > li.parent.active span { display: block; }

/* Klachten - submenu - subpagina's (vervolg) */

body.klachten #submenu > ul > li.hassub:before { position: absolute; left: -25px; /*content: "+";*/ }
body.klachten #submenu > ul > li.active.hassub:before { content: none; }
body.klachten #submenu > ul > li:last-of-type { margin-bottom: 0; }

body.klachten #submenu > ul > li > a { display: block; padding: 6px 0; font-size: 16px; color: #333; font-weight: 500; }
body.klachten #submenu > ul > li > a:hover,
body.klachten #submenu > ul > li.active > a { color: #32aaa1; }

body.klachten #submenu > ul > li.parent.active { margin-bottom: 10px; }
body.klachten #submenu > ul > li.parent > a,
body.klachten #submenu > ul > li.active > a { font-weight: 700; }
body.klachten #submenu > ul > li.parent > svg { position: relative; display: block; top: 1px; margin-right: 10px; width: 24px; fill: #444; }
body.klachten #submenu > ul > li.parent:hover > svg { fill: #32aaa1; }
body.klachten #submenu > ul > li.parent.active > svg { display: none; }
body.klachten #submenu > ul > li.active > a { padding: 20px 0 15px 0; width: 100%; font-size: 21px; line-height: 1.1; }
body.klachten #submenu > ul > li.parent.active > a { padding: 3px 0; }

body.klachten #submenu > ul > li.hassub:hover:before { color: #32aaa1; }

body.klachten #submenu > ul > li.parent,
body.klachten #submenu > ul > li.active,
body.klachten #submenu > ul > li.active ul li,
body.klachten #submenu > ul > li.parent.active ~ li { display: flex; flex-direction: column; justify-content: center; }

/* Klachten - submenu - subsubpagina's */

body.klachten #submenu > ul > li.active ul { display: block; }
body.klachten #submenu > ul > li ul li { line-height: 1.2; }
body.klachten #submenu > ul > li ul li a { padding: 6px 0; font-size: 16px; color: #333; font-weight: 500; }
body.klachten #submenu > ul > li ul li:hover a,
body.klachten #submenu > ul > li ul li.active a { color: #32aaa1; }

body.klachten #submenu ul li.active ul li.subactive a { color: #32aaa1; }

body.klachten.subpage #submenu { padding-top: 30px; }
body.klachten.subpage #submenu > ul > li.active > a { color: #323232; text-transform: lowercase; }
body.klachten.subpage #submenu > ul > li.active > a:before { display: block; content: "Klachten m.b.t."; text-transform: none; }
body.klachten.subpage.pid60 #submenu > ul > li.active > a { text-transform: none; }
body.klachten.subpage.pid60 #submenu > ul > li.active > a:before { content: none; }


/* DIENSTEN */

body.diensten .row.first { padding-bottom: 0; background-color: rgb(50 170 161 / 10%); }
body.diensten .row.first h1 { margin-bottom: 0; }

/* Diensten - Prijzen */

.row.diensten.prijzen { display: flex; align-items: center; padding: 120px 0; height: calc(100vh - 200px); box-sizing: border-box; background-color: #e0f2f1; background: rgb(224,242,241); background: linear-gradient(135deg, rgba(224,242,241,1) 0%, rgba(224,242,241,0) 100%); }
.row.diensten.prijzen .content { max-width: 1600px; }
.row.diensten.prijzen .content .page_content { display: flex; flex-direction: column; align-items: center; width: 100%; }
.row.diensten.prijzen .content .page_content h1 { margin-bottom: 0; }
.row.diensten.prijzen .diensten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 60px; margin-bottom: 60px; }
.row.diensten.prijzen .diensten .dienst { position: relative; padding: 75px 30px 135px 30px; text-align: center; border-radius: 4px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; overflow: hidden; box-sizing: border-box; box-shadow: 0 5px 5px rgb(50 170 161 / 5%); background-color: #fff; }
.row.diensten.prijzen .diensten .dienst h2 { margin-bottom: 20px; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.5; }
.row.diensten.prijzen .diensten .dienst .prijs { font-family: 'Manrope', sans-serif; font-size: 40px; color: #32aaa1; font-weight: 900; line-height: 1; }
.row.diensten.prijzen .diensten .dienst a.meer { position: absolute; display: block; bottom: 65px; left: 0; width: 100%; text-align: center; text-decoration: underline; }
.row.diensten.prijzen .diensten .dienst a.meer:hover { text-decoration: none; }

/* Diensten */

.row.dienst { position: relative; }
.row.dienst .content { max-width: 1400px; }
.row.dienst .page_content { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }

.row.dienst.last .page_content { flex-direction: column; }
.row.dienst.last .page_content > h2 { font-size: 28px; }
.row.dienst.last .page_content ul li { position: relative; display: flex; align-items: center; margin-left: 0; padding: 2px 0; padding-left: 30px; list-style: none; }
.row.dienst.last .page_content ul li:before { position: absolute; top: 8px; left: 0; width: 16px; height: 16px; content: ""; background-image: url(../../images/icons/check-dark-green.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }

.row.dienst .page_content .text { display: flex; flex-direction: column; justify-content: center; width: 47.5%; }
.row.dienst .page_content .text .title h2 { margin-top: -10px; margin-bottom: 25px; font-size: 32px; color: #1a6060; line-height: 1.1; }

.row.dienst:nth-of-type(1) .page_content .text .more p:first-of-type strong:first-of-type,
.row.dienst:nth-of-type(3) .page_content .text .more p:first-of-type strong:first-of-type,
.row.dienst:nth-of-type(4) .page_content .text .more p:first-of-type strong:first-of-type { display: inline-block; margin-bottom: 10px; font-size: 18px; line-height: 1.4; }

.row.dienst .page_content .text .more ul { margin-top: 0; margin-bottom: 40px; }
.row.dienst .page_content .text .more ul li { position: relative; display: flex; align-items: center; margin-left: 0; padding: 4px 0; padding-left: 35px; font-family: 'Inter', sans-serif; font-size: 21px; color: #1a6060; font-weight: 700; line-height: 1.2; list-style: none; }
.row.dienst .page_content .text .more ul li:before { position: absolute; top: 8px; left: 0; width: 18px; height: 18px; content: ""; background-image: url("../../images/icons/check-dark-green.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; }

.row.dienst .page_content .image { width: 47.5%; display: flex; flex-direction: column; justify-content: center; }
.row.dienst .page_content .image img { display: block; margin: 0; padding: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }

.row.dienst:nth-of-type(even) { background-color: #e0f2f1; }
.row.dienst:nth-of-type(even) .page_content .text { order: 2; }
.row.dienst:nth-of-type(even) .page_content .image { order: 1; }

/* Diensten - Trainingsschema's */

.row.dienst:nth-of-type(2) .page_content { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 120px; width: 100%; }

.row.dienst:nth-of-type(2) .page_content .text { order: 1; width: 50%; }
.row.dienst:nth-of-type(2) .page_content .text .title { }
.row.dienst:nth-of-type(2) .page_content .text .title h2 { margin-bottom: 30px; }
.row.dienst:nth-of-type(2) .page_content .text .more { display: flex; flex-direction: column; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote { position: relative; padding: 14px 0 16px 0; border-bottom: 2px solid rgb(26 96 96 / 15%); cursor: pointer; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote:first-of-type { border-top: 2px solid rgb(26 96 96 / 15%); }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote:after { position: absolute; top: 13px; right: 20px; content: "+"; font-family: 'Inter', sans-serif; font-size: 21px; color: #1a6060; font-weight: 700; line-height: 1.3; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote:hover:after { opacity: 0.7; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote h2 { display: block; margin: 0; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote:hover h2 { opacity: 0.7; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote * { display: none; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote p:first-of-type { margin-top: 0!important; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote p:last-of-type { margin-top: 30px; }

.row.dienst:nth-of-type(2) .page_content .text .more blockquote.active { padding: 29px 0 31px 0; cursor: auto; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote.active:after { content: none; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote.active h2 { margin-bottom: 15px; opacity: 1; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote.active * { display: revert; }
.row.dienst:nth-of-type(2) .page_content .text .more blockquote.active .btn { display: inline-block; }

.row.dienst:nth-of-type(2) .page_content .image { display: flex; order: 2; flex-direction: column; gap: 45px; width: 50%; }
.row.dienst:nth-of-type(2) .page_content .image img { aspect-ratio: initial; }

/* Diensten - Online begeleiding */

.row.diensten.last .content { max-width: 1400px; }
.row.diensten.last .page_content { width: 100%; text-align: center; }
.row.diensten.last .page_content blockquote { margin-top: 45px; padding: 55px 60px; text-align: left; }


/* WEBSHOP */

body.webshop .row.first > .content { padding: 0; border-radius: 0; background-color: transparent; }

body.webshop .content .page_content { padding-right: 0; width: 100%; }

body.webshop h1 { color: #323232; } 

body.webshop .hoofdcats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 45px; }
body.webshop .hoofdcats .item { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background-color: #fff; }
body.webshop .hoofdcats .item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
body.webshop .hoofdcats .item .image { position: relative; width: 100%; aspect-ratio: 1/1; /*background-color: #32aaa1;*/ }
body.webshop .hoofdcats .item .image:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0.5; background-color: #000; background: rgb(50,170,161); background: linear-gradient(20deg, rgba(50,170,161,1) 0%, rgba(50,170,161,0) 50%); }
body.webshop .hoofdcats .item .image img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; filter: grayscale(0.5); }
body.webshop .hoofdcats .item .content { position: relative; flex: 1; bottom: 0; padding: 25px 20px 30px 20px; width: 100%; font-size: 21px; color: #333; font-weight: 700; line-height: 1.2; text-align: center; box-sizing: border-box; z-index: 1; }

body.webshop.shopthanks .row.first .content .page_content { padding: 60px; padding-right: calc(45% + 60px); border-radius: 10px; background-color: #fff; }
body.webshop.shopthanks .row.first .content .page_content:after { position: absolute; top: 0; right: 0; width: 45%; height: 100%; content: ""; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-color: #efefef; background-image: url("../../images/thank-you-page-image1.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; }


/* OVER */


/* DOEL & MISSIE */


/* GEZONDE LEEFSTIJL & TRAINING */


/* BEHANDELAARWIJZER */

body.__behandelaarwijzer .row.first .content { }
body.__behandelaarwijzer .row.first .page_content { padding: 0!important; border-radius: 0; background-color: transparent!important; }
body.__behandelaarwijzer .row.first .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
body.__behandelaarwijzer .row.first .columns .column { padding: 45px; border-radius: 10px; background-color: #fff; }
body.__behandelaarwijzer .row.first .columns .column:first-of-type { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 60px 30px 45px 0; background-color: transparent; }

body.__behandelaarwijzer #submenu { position: relative; display: flex; align-items: center; align-self: initial; top: auto; right: auto; margin: 0; padding: 0; width: auto; border: none; }
body.__behandelaarwijzer #submenu #submenu-trigger { }
body.__behandelaarwijzer #submenu ul { display: flex; column-gap: 15px; margin: 0; margin-top: 30px; padding: 0; }
body.__behandelaarwijzer #submenu ul li { margin: 0; padding: 0; }
body.__behandelaarwijzer #submenu ul li.parent { display: none; }
body.__behandelaarwijzer #submenu ul li a { margin: 0; padding: 18px 45px 20px 45px; min-width: 190px; font-size: 21px; color: #fff; font-weight: 700; text-align: center; text-decoration: none; border-radius: 60px; background-color: #32aaa1; }
body.__behandelaarwijzer #submenu ul li a:hover { opacity: 0.8; }

body.__behandelaarwijzer { background-color: rgb(50 170 161 / 15%); }
body.__behandelaarwijzer .row.intro { padding: 120px 0 90px 0; background-color: rgb(50 170 161 / 75%); }
body.__behandelaarwijzer .row.intro .content .page_content h2 { margin-top: -25px; margin-bottom: 45px; font-weight: 500; }
body.__behandelaarwijzer .row.intro .content .page_content ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
body.__behandelaarwijzer .row.intro .content .page_content ul + p { margin: 45px 0; }
body.__behandelaarwijzer .row.intro .content .page_content ul li { display: flex; flex-direction: column; margin: 0; padding: 45px; padding-top: 40px; color: #323232; line-height: 1.4; text-align: center; list-style: none; border-radius: 4px; box-shadow: 5px 5px 5px rgba(0,0,0,0.05); background-color: #fff; }
body.__behandelaarwijzer .row.intro .content .page_content ul li strong { margin-bottom: 5px; font-size: 21px; }
body.__behandelaarwijzer .row.intro .content .page_content ul li strong + br { display: none; }

body.__behandelaarwijzer .row.intro .content .page_content blockquote { font-size: 16px; color: #323232; line-height: 1.4; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); }

/* BehandelaarWijzer - Voor bezoekers (Uitgelichte praktijken) */

.row.praktijken { padding: 90px 0; }
.row.praktijken h2 { margin-top: -8px; margin-bottom: 45px; font-family: 'Manrope', sans-serif; font-size: 36px; color: #32aaa1; font-weight: 900; line-height: 1.2; }
.row.praktijken .praktijken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.row.praktijken .praktijken .praktijk { border-radius: 4px; overflow: hidden; background-color: #fff; }

.row.praktijken .praktijken .praktijk .image { position: relative; width: 100%; aspect-ratio: 4/3; background-color: #efefef; }
.row.praktijken .praktijken .praktijk .image .location { position: absolute; bottom: 20px; right: 20px; padding: 9px 15px 11px 15px; font-size: 16px; color: #fff; font-weight: 700; line-height: 1; border-radius: 2px; background-color: #32aaa1; }
.row.praktijken .praktijken .praktijk .image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.row.praktijken .praktijken .praktijk .info { padding: 30px; padding-top: 25px; line-height: 1.5; }
.row.praktijken .praktijken .praktijk .info .naam { margin-bottom: 10px; padding: 0; font-size: 21px; font-weight: 700; line-height: 1.2; }
.row.praktijken .praktijken .praktijk .info .postal-location strong { font-weight: 400; text-transform: uppercase; }
.row.praktijken .praktijken .praktijk .info .email,
.row.praktijken .praktijken .praktijk .info .website { color: #32aaa1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.row.praktijken .praktijken .praktijk .info > * { padding-top: 8px; }
.row.praktijken .praktijken .praktijk .info > div:nth-of-type(2),
.row.praktijken .praktijken .praktijk .info .address + .postal-location,
.row.praktijken .praktijken .praktijk .info .phone + .mobile,
.row.praktijken .praktijken .praktijk .info .mobile + .email { padding-top: 0; }

/* BehandelaarWijzer - Voor behandelaars */

body.__behandelaarwijzer.pid524 .row.intro .content .page_content h2 { margin-bottom: 30px; }
body.__behandelaarwijzer.pid524 .row.intro .content .page_content ul { margin-top: 45px; }
body.__behandelaarwijzer.pid524 .row.intro .content .page_content ul li { justify-content: center; }

.row.inschrijven { padding: 90px 0; text-align: center; background-color: #fff; }
.row.inschrijven h2 { margin-top: -8px; margin-bottom: 30px; font-family: 'Manrope', sans-serif; font-size: 36px; font-weight: 900; line-height: 1.2; }
.row.inschrijven a.btn { padding: 14px 30px 16px 30px; font-size: 21px; }

.row.ondersteuning { padding: 90px 0 120px 0; }
.row.ondersteuning .page_content { display: flex; flex-wrap: wrap; justify-content: center; }
.row.ondersteuning .blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.row.ondersteuning .blocks .block { margin: 0; padding: 45px; color: #323232; line-height: 1.6; border-radius: 4px; background-color: #fff; }
.row.ondersteuning .blocks .block h2 { display: block; margin-bottom: 15px; font-size: 18px; white-space: nowrap; }
.row.ondersteuning .blocks .block p { margin-bottom: 10px; }
.row.ondersteuning .blocks .block p:last-of-type { margin-bottom: 0; }

.row.professionals { padding: 90px 0; background-color: #f0f9f8; }
.row.professionals .page_content { }
.row.professionals ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 45px 0!important; }
.row.professionals ol li { display: flex; align-items: center; margin: 0; padding: 20px; color: #323232; line-height: 1.4; border-radius: 4px; list-style: none; background-color: #fff; }
.row.professionals ol li:before { position: relative; display: block; margin-right: 12px; width: 16px; height: 16px; content: ""; background-image: url(../../images/icons/checkmark-green.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }


/* BLOG (NIEUWS) */

    /* zie _newscalendar.css */


/* CONTACT */


/* KENNIS OPDOEN (Table of Contents) */

body.kennis { }

body.kennis .blok2 { margin: 40px  0; }
body.kennis .content .page_content .blok2 blockquote { margin: 0!important; padding: 25px 30px; font-size: 14px; line-height: 1.5; }

body.kennis .toc { }
body.kennis .toc ol { margin-top: 20px; border-top: 1px solid #dde7e7; counter-reset: item; }
body.kennis .toc ol li { position: relative; margin: 0; border-bottom: 1px solid #dde7e7; list-style: none; counter-increment: item; }
body.kennis .toc ol li a { display: block; padding: 10px 0; font-size: 18px; color: #1a6060; text-decoration: none; }
body.kennis .toc ol li a:before { display: inline-block; counter-increment: li; content: counter(item, decimal-leading-zero) "."; width: 32px; font-size: 16px; color: #1a6060; }
body.kennis .toc ol li a:hover,
body.kennis .toc ol li a:hover:before { color: #32aaa1; }

body.kennis .blok3 { margin: 45px 0; }
body.kennis .blok3 img { margin: 0; }

body.kennis .content .page_content .media { margin: 0; }


/* FAQ / VEELGESTELDE VRAGEN */

.faq { display: flex; flex-direction: column; margin-bottom: 40px; border-bottom: 1px solid #e2e2e2; }
.faq:last-of-type { margin-bottom: 0; }
.faq h2 { margin-bottom: 20px; color: #32aaa1; }
.faq details.item { width: 100%; border-top: 1px solid #e2e2e2; }
.faq details.item summary.question { display: flex; flex-wrap: wrap; align-items: center; column-gap: 15px; padding: 14px 0 16px 0; font-weight: 700; line-height: 1.2; cursor: pointer; }
.faq details.item summary.question:hover { opacity: 0.7; }
.faq details.item summary.question:before { display: block; width: 10px; height: 10px; content: ""; background-image: url(../../images/icons/arrow-faq.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }
.faq details.item[open] summary.question:before { transform: rotate(180deg); }
.faq details.item summary.question span { flex: 1; }
.faq details.item .answer { margin-top: -5px; margin-left: 25px; padding-bottom: 25px; line-height: 1.4; }


/* PRODUCT VAN DE MAAND */

body.__product-vd-maand .pvdm .product { }
body.__product-vd-maand .pvdm .product .image { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 60px; width: 100%; aspect-ratio: 16/9; border-radius: 10px; box-sizing: border-box; background-color: rgb(50 170 161 / 10%); }
body.__product-vd-maand .pvdm .product .image a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
body.__product-vd-maand .pvdm .product .image img { display: block; width: auto; max-width: 80%; height: auto; max-height: 80%; mix-blend-mode: darken; }
body.__product-vd-maand .pvdm .product .naam h2 { margin-top: -8px; margin-bottom: 30px; font-family: 'Manrope', sans-serif; font-size: 36px; color: #323232; font-weight: 900; line-height: 1.2; }


/* REFERENTIES / GEBRUIKTE BRONNEN */

body.pid469 .content .page_content blockquote p { margin-bottom: 15px; padding: 20px 30px; font-size: 15px; line-height: 1.7; border-radius: 5px; font-style: normal; background-color: #f4fafa; }
body.pid469 .content .page_content blockquote p:last-of-type { margin-bottom: 0; }


/* MEDIA */

.content > .media {
    position: sticky;
    order: 2;
    top: 140px;
    margin-left: 0;
    width: 360px;
}
/*body.shopcategory .content .shop_products_intro + .media { margin: 30px 0; width: 100%; border-radius: 10px; overflow: hidden; }
body.shopcategory .content .shop_products_intro + .media + .blok2 { margin-top: 38px; }*/
.content .page_content .media { margin: 30px 0; width: 100%; border-radius: 10px; overflow: hidden; }
.content .page_content .media + .blok2 { margin-top: 38px; }
.content .page_content blockquote + .media { margin-top: 45px; }
.content .page_content .shop_products_intro + .media { margin-top: 60px; }

.content .media a {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 25px;
    border-radius: 5px;
    overflow: hidden;
}
.content .media a:last-of-type { 
    margin-bottom: 0;
}
.content .media a img {
    width: 100%;
    display: block;
}
.content .media a .icon,
.fotoalbum a .icon,
.news-overview .item a .image .icon,
.productmedia a .icon,
.product a .icon {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 50%; 
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #32aaa1;
}
.content .media a .icon svg,
.fotoalbum a .icon svg,
.news-overview .item a .image .icon svg,
.productmedia a .icon svg,
.product a .icon svg {
    fill: var(--background);
    display: block;
    width: 20px; 
    height: 20px; 
}
.fotoalbum a:hover .icon,
.content .media a:hover .icon,
.news-overview .item a:hover .image .icon,
.productmedia a:hover .icon,
.product a:hover .icon {
    display: flex;
}
.content .media a.video .icon,
.productmedia a.video .icon {
    display: flex!important;
    background-color: transparent;
}
.content .media a.video:hover .icon,
.productmedia a.video:hover .icon {
    opacity: 0.75;
}
.content .media a.video .icon svg,
.productmedia a.video .icon svg {
    width: 100%;
    height: 100%;
}
.content .media a.video .icon svg .st0,
.productmedia a.video .icon svg .st0 {
    fill: var(--background);
}
.content .media .caption,
.content .page_content .fotoalbum a .caption {
    display: block;
    padding: 30px 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    color: var(--background);
    opacity: 1;
    transition: opacity 300ms;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; 
    line-height: 1;   
}


/* OVERALL downloads/links */
a.file,
a.link {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 0;
    color: #32aaa1;
}
a.link svg,
a.file svg  {
    fill: #32aaa1;
    width: 16px;
    display: inline-block;
    margin-right: 10px;
    transform: translateY(2px);
}
a.link:hover,
a.file:hover {
    color: #32aaa1;
}


/* ELEMENTS - tweak to your purposes & likings! */
.elements {
    margin: 2em 0;
    display: flex;
    flex-wrap: wrap;
}
.elements .element {
    width: 50%;
    background: var(--accents);
}
.elements .element div {
    padding:  10px 15px;
    border-bottom:  1px solid rgba(0,0,0,.1);
}
.elements .element div a {
    display: block;
}
.elements .element .image {
    padding:  0;
}
.elements .element .image img {
    display: block;
    width: 100%;
}
.elements .element .media {
    padding:  0;
    width: 100%;
}
.elements .element .media a {
    margin-bottom: 0;
}


/* MAPS */

#map_canvas {
    height: 90vh; 
    width: 100%; 
    clear: both; 
}


/* PARTNERS */

/* Partners in footer */
.row.partners { display: flex; justify-content: center; padding: 90px 0; background-color: #fff; }
.row.partners:before { position: absolute; top: -15px; padding: 0 10px; content: "Aanbevolen door AdviesBijKlachten – onafhankelijk gekozen"; font-size: 16px; color: #1a6060; font-weight: 600; text-align: center; /*background-color: #fff;*/ }
.row.blog + .row.partners,
.rows + .row.partners { border-top: 1px solid rgb(26 96 96 / 15%); }
.row.partners .content { max-width: none; }
.row.partners .content .page_content { }
.row.partners .partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; }
.row.partners .partners .partner { position: relative; display: flex; align-items: center; justify-content: center; width: auto; height: 40px; }
.row.partners .partners .partner:hover { opacity: 0.8; }
.row.partners .partners .partner a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.row.partners .partners .partner img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; }

/* Partners op pagina Partners */
body.__partners .row.first .partners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 40px; }
body.__partners .row.first .partners .partner { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; border: 1px solid rgb(204 204 204 / 50%); border-radius: 5px; }
body.__partners .row.first .partners .partner:hover { opacity: 0.6; }
body.__partners .row.first .partners .partner a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
body.__partners .row.first .partners .partner img { display: block; width: auto; max-width: 65%; height: auto; max-height: 25%; }


/* FOOTER */

#footer { color: #323232; color: #fff; background-color: #e0f2f1; background-color: #1a6060; }
#footer a { color: #1a6060; color: #fff; }

#footer li a:hover,
#footer li.active a,
#footer li .back-to-top:hover {
    opacity: 0.6;
    cursor: pointer;
}

#footer #footer-top { }
#footer #footer-top-container { position: relative; display: flex; column-gap: 60px; margin: 0 auto; padding: 60px 0; width: 90%; max-width: 1400px; }
#footer #footer-top-container .column h2 { display: block !important; margin-bottom: 10px; font-size: 21px; color: #323232; color: #fff; font-weight: 700; }
#footer #footer-top-container .column ul { }
#footer #footer-top-container .column ul li { }

#footer #footer-top-container .column.first { max-width: 20%; }

#footer #footer-top-container .column.nav { }
#footer #footer-top-container .column.nav ul { }
#footer #footer-top-container .column.nav ul li { }
#footer #footer-top-container .column.nav ul li:before { display: block; margin-bottom: 5px; font-size: 12px; /* font-weight: 700; */ text-transform: uppercase; letter-spacing: 2px; opacity: 0.5; }
#footer #footer-top-container .column.nav ul li.veelgestelde-vragen:before { content: "Voor bezoekers"; }
#footer #footer-top-container .column.nav ul li.kennisbank-zorgprofessionals:before { margin-top: 15px; content: "Voor fysiotherapeuten"; }
#footer #footer-top-container .column.nav ul li:nth-of-type(-n+12) { display: none; }

#footer #footer-top-container .column.nav a { display: block; }

#footer #footer-top-container .column.webshop { }
#footer #footer-top-container .column.webshop ul { margin: 10px 0 25px 0; margin-left: 17px; }
#footer #footer-top-container .column.webshop ul li { list-style: disc; }
#footer #footer-top-container .column.webshop ul li strong { display: block; }

#footer #footer-top-container .column.newsletter { /*margin-left: 45px;*/ }
#footer #footer-top-container .column.newsletter h2 { width: 140%; }
#footer #footer-top-container .column.newsletter p { width: 140%; }
#footer #footer-top-container .column.newsletter input { margin-top: 20px; padding: 10px 15px 12px 15px; width: 100%; font-family: inherit; font-size: 16px; color: #333; line-height: 1.4; border: 0; border-radius: 2px; box-sizing: border-box; -webkit-appearance: none; background-color: #fff; }
#footer #footer-top-container .column.newsletter input[type=submit] { margin-top: 15px; padding: 12px 30px 15px 30px; width: auto; font-size: 18px; color: #fff; font-weight: 600; line-height: 1; cursor: pointer; background-color: #32aaa1; }

#footer #footer-top-container .column.socials { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
#footer #footer-top-container .column.socials h2 { margin-bottom: 20px; }

#footer #footer-top-container .column.socials .contact { margin-top: 45px; text-align: right; }
#footer #footer-top-container .column.socials .contact a:hover { opacity: 0.6; }

#footer .payment { position: absolute; display: flex; flex-direction: column; align-items: flex-end; bottom: 65px; right: 0; }
#footer .payment h2 { font-size: 16px; color: #323232; color: #fff; }
#footer .payment .methods { display: flex; column-gap: 10px; }
#footer .payment .method { width: 50px; height: 34px; border-radius: 3px; background-color: #fff; }
#footer .payment .method.klarna { background-color: #ffb3c7; }
#footer .payment .method.sepa { background-color: #163381; }
#footer .payment .method a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; pointer-events: none; }
#footer .payment .method a img { display: block; width: auto; max-width: 36px; height: auto; max-height: 16px; }
#footer .payment .method.kreddeb a img { border-radius: 2px; }
#footer .payment .method a:hover img { opacity: 0.7; }

#footer #footer-bottom { padding: 30px 0 60px 0; border-top: 1px solid rgb(26 96 96 / 15%); border-top: 1px solid rgba(255, 255, 255, 0.15); }
#footer #footer-bottom-container { position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; margin: 0 auto; width: 90%; max-width: 1400px; }
#footer #footer-bottom-container .column { width: 25%; box-sizing: border-box; }
#footer #footer-bottom-container .column ul li { white-space: nowrap; }
#footer #footer-bottom-container .column ul li svg { }

#footer #footer-bottom-container .column.social { padding-right: 0; flex-grow: 3; width: 60%; }
#footer #footer-bottom-container .column.social ul.social-buttons { display: flex; flex-wrap: nowrap; justify-content: flex-end; }
#footer #footer-bottom-container .column.social ul.social-buttons li { }
#footer #footer-bottom-container .column.social ul.social-buttons a { position: relative; display: block; cursor: pointer; }
#footer #footer-bottom-container .column.social ul.social-buttons a svg { display: block; width: 100%; height: 100%; transform: translateY(0px); margin: 0; }

#footer #footer-bottom-container .credits { display: flex; justify-content: space-between; width: 100%; }
#footer #footer-bottom-container .credits .column { display: flex; width: 50%; }

#footer #footer-bottom-container .credits .column ul { display: flex; align-items: center; }
#footer #footer-bottom-container .credits .column ul li { }

#footer #footer-bottom-container .credits .column.left { justify-content: flex-start; }
#footer #footer-bottom-container .credits .column.left ul { gap: 15px; }
#footer #footer-bottom-container .credits .column.left ul li { }

#footer #footer-bottom-container .credits .column.right { justify-content: flex-end; }
#footer #footer-bottom-container .credits .column.right ul { justify-content: flex-end; gap: 30px; }
#footer #footer-bottom-container .credits .column.right ul li { }
#footer #footer-bottom-container .credits .column.right ul li .cybox-tag svg { margin-left: 10px; margin-right: 0; width: 16px; height: 16px; transform: translateY(3px); }

#footer ul.social-buttons { display: flex; column-gap: 10px; }
#footer ul.social-buttons li { margin: 0; width: 40px; height: 40px; border-radius: 50%; background-color: #1a6060; background-color: rgb(51 170 161 / 50%); }
#footer ul.social-buttons li:hover { opacity: 0.8; }
#footer ul.social-buttons li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#footer ul.social-buttons li a:hover,
#footer ul.social-buttons li a:hover svg { opacity: 1; }
#footer ul.social-buttons li a svg { fill: #fff; width: 18px; height: 18px; }


/* MAILSTAGE */

#ms-success { display: none; }
#ms-fail { display: none; }
#mailstage { }


/* CLOSE OVERLAY */

#close-overlay /* overlay that closes slideouts: menu, search, language */ {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
}
#close-overlay.active {
    cursor: pointer;
    pointer-events: all;
    opacity: .5;
}
.close-menus {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 40px;
    background-color: #32aaa1;
}
.close-menus:hover {
    background-color: #5bbbb4;
}
.close-menus svg {
    fill: #fff;
    width: 12px;
    height: 12px;
}


/* DISABLE SELECTION */
#kiek, #kiek *, #menu-slideout, #contact, .media {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}