* {padding: 0; margin: 0; box-sizing: border-box; }
html {
    font-size: 2vh; 
    scroll-behavior: smooth; 
    line-height: 1.4; 
    font-family: sans-serif;
    height: 100%;
}
body:not(.working_methods) {height: 100%;}
body {
    color: #083e52; 
    font-family: 'klavika-web'; 
    font-weight: bold; 
    background: url(/img/Hoofdplaat.svg) center center / auto 70rem no-repeat;
    font-size: 1rem;
    overflow-y: scroll;
}
div.page {max-width: 123.8rem; margin: 0 auto; position: relative; min-height: 100%; display: flex; overflow: hidden;}
a {color: #083e52; cursor: pointer;}
img {display: block;}
h1 {font-size: 3rem;}
h2 {font-size: 2rem;}
h3 {font-size: 110%;}

.header {background: rgba(255,255,255,0.75); position: absolute; z-index: 5; width: 100%;}
.header .headertop {
    font-size: 3rem;
    padding: 0 0 0.2rem 7rem;
}
.header .headertop h1 {font-size: 3rem; height: 4.2rem; display: flex; align-items: center;}
.header .headertop h1 span {line-height: 0.9; display: inline-block;}
.header .headertop .icon {
    position: absolute;
    right: 5rem;
    top: 0.75em;
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
}
.header .headertop .icon img {
    background: #2e5c6e;
    width: 2.3rem; 
    height: 2.3rem; 
    border: 0.18rem solid #083e52; 
    border-radius: 100%;
}
.header .headertop .icon span {display: block; padding-top: 0.05rem;}
.header .headertop .icon + .icon {
    right: 1.5rem;
}

.header .headerbottom > div {
    position: absolute;
    width: 100%;
    background: linear-gradient(135deg, #083e52 55%, transparent 55%);
}
.header .headerbottom > div.menu {display: block;}
.header .headerbottom > div.back {display: none;}
.working_methods .header .headerbottom > div.menu {display: none;}
.working_methods .header .headerbottom > div.back {display: block;}
.header .headerbottom > div > * {
    color: white;
    position: relative;
    z-index: 2;
}
.header .headerbottom > div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 0.5rem;
    background: #083e52;
    width: 100%;
    z-index: 0;
}
.header .headerbottom > div > a {
    display: block; 
    margin-top: -2rem;
    padding: 1rem 1.4rem 1rem 0.3rem;
    z-index: 3;
}
.header .headerbottom > div > a::before,
.header .headerbottom > div > a::after {
    background: #083e52;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    clip-path: polygon(0% 5%, 75% 5%, 100% 50%, 75% 95%, 0% 95%);
    -webkit-clip-path: polygon(0% 5%, 75% 5%, 100% 50%, 75% 95%, 0% 95%);
}
.header .headerbottom > div > a::after {
    background: #2e5c6e;
    clip-path: polygon(0% calc(5% + 0.3rem), calc(75% - 0.2rem) calc(5% + 0.3rem), calc(100% - 0.4rem) 50%, calc(75% - 0.2rem) calc(95% - 0.3rem), 0% calc(95% - 0.3rem));
    -webkit-clip-path: polygon(0% calc(5% + 0.3rem), calc(75% - 0.2rem) calc(5% + 0.3rem), calc(100% - 0.4rem) 50%, calc(75% - 0.2rem) calc(95% - 0.3rem), 0% calc(95% - 0.3rem));
}
.header .headerbottom > div > a:hover::after {background: #3b7085;}
.header .headerbottom > div > a img {width: 3.55rem; position: relative; z-index: 1; margin: 0.1rem;}
.header .headerbottom span {
    display: block;
    padding: 0.3rem 0 0.5rem 7rem;
    line-height: 1rem;
    height: 1.8rem;
}
.header .headerbottom a {
    position: absolute;
}

body.working_methods .speechballoon.menu {display: none!important;}
.working_methods .content > div {
    margin-top: 4.75rem; 
    background: #0D1F26; 
    color: white; 
    min-height: calc(100% - 4.75rem); 
    padding: 3rem 0;
    font-weight: 300;
}
.working_methods .content > div strong {font-weight: 500;}
.working_methods .content > div > div {width: 100%;}
.working_methods .content > div > div > div {padding: 0rem 3rem 2rem 7rem;}
.working_methods .content > div > div.flex > div.image {margin-top: 0;}
.working_methods .content ol {margin-left: 1rem;}


.working_methods h3#professional-ouder-jongere-docent-en-student {border-color: #ff9c29;}
.working_methods h3#professional-ouder-jongere-docent-en-student + ul {
    border-image: linear-gradient(to bottom, 
    #ff9c29 0%, #ff9c29 8%, 
    #ed6151 8%, #ed6151 30%, 
    #39b571 30%, #39b571 52%, 
    #47aed6 52%, #47aed6 74%, 
    #a568ab 74%, #a568ab 100%
    ) 8;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}
.working_methods h3#ouder-en-jongere {border-color: #ed6151;}
.working_methods h3#ouder-en-jongere + ul {
    border-image: linear-gradient(to bottom, 
    #ed6151 0%, #ed6151 35%, 
    #39b571 35%, #39b571 100%
    ) 8;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}
.working_methods h3#professional-docent-en-student {border-color: #ff9c29;}
.working_methods h3#professional-docent-en-student + ul {
    border-image: linear-gradient(to bottom, 
    #ff9c29 0%, #ff9c29 25%, 
    #47aed6 25%, #47aed6 61%, 
    #a568ab 61%, #a568ab 100%
    ) 8;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}


.working_methods h3#ouder,
.working_methods h3#ouder + ul {border-color: #ed6151;}
.working_methods h3#professional,
.working_methods h3#professional + ul {border-color: #ff9c29;}
.working_methods h3#docent,
.working_methods h3#docent + ul {border-color: #47aed6;}
.working_methods h3#jongere,
.working_methods h3#jongere + ul {border-color: #39b571;}
.working_methods h3#onderzoeker,
.working_methods h3#onderzoeker + ul {border-color: #3a8b99;}
.working_methods h3#student,
.working_methods h3#student + ul {border-color: #a568ab;}
.flex:nth-child(2) > div:nth-child(2) > h3,
.flex:nth-child(2) > div:nth-child(2) > ul {border-left: 0.4rem solid #22404b; padding-left: 1em;}
.working_methods .content ul li {margin-left: 0.9em;}


html:not(.showlist) .working_methods .content > div > div.flex {display: flex;}
html:not(.showlist) .working_methods .content > div > div.flex.reverse {flex-direction: row-reverse;}
html:not(.showlist) .working_methods .content > div > div.flex.center {justify-content: center;}
html:not(.showlist) .working_methods .content > div > div.flex > div {padding-left: 3rem; width: 43%;}
html:not(.showlist) .working_methods .content > div > div.flex > div + div {width: 57%;}
html:not(.showlist) .working_methods .content > div > div.flex > div.image {padding-left: 0; padding-bottom: 0; margin-top: 2.9rem; margin-right: -7rem; width: calc(57% + 7rem)!important; background: #052936;}
html:not(.showlist) .working_methods .content > div > div.flex > div.image img {height: 100%; object-fit: cover; width: 100%;}
html:not(.showlist) .working_methods .content > div > div.flex:not(.reverse) > div:first-child {padding-left: 7rem;}
html:not(.showlist) .working_methods .content > div > div.flex:not(.reverse) > div:last-child {padding-right: 7rem;}
html:not(.showlist) .working_methods .content > div > div.flex.reverse > div:last-child {padding-left: 7rem; width: 43%;}
html:not(.showlist) .working_methods .content > div > div.flex.reverse > div:first-child {padding-right: 7rem; width: 57%;}
html:not(.showlist) .working_methods .content > div > div.flex.center > div.lighter {background: transparent; min-width: 43rem;}
html:not(.showlist) .button {min-width: 29rem;}

.working_methods .content > div > div.flex > div.image {display: flex; justify-content: center; align-items: center; color: #083e52;}
.working_methods .content > div > div.flex > div.image img {height: 100%; object-fit: cover; width: 100%; color: #083e52;}

.working_methods .popup a.close img {opacity: 0.65;}
.working_methods .header .headerbottom > div > a::before,
.working_methods .header .headerbottom > div::after {background: #2e5c6e;}

.working_methods .header .headerbottom > div {background: linear-gradient(135deg, #2e5c6e 55%, transparent 55%);}
.working_methods .header .headerbottom > div > a::after {background: #1c4555;}
.working_methods .header .headerbottom > div > a:hover::after {background: #133441;}

.working_methods.professional .header .headerbottom > div > a::before,
.working_methods.professional .header .headerbottom > div::after {background: #ff9c29;}
.working_methods.professional .header .headerbottom > div {background: linear-gradient(135deg, #ff9c29 55%, transparent 55%);}
.working_methods.professional .header .headerbottom > div > a::after {background: #bf6f2e;}
.working_methods.professional .header .headerbottom > div > a:hover::after {background: #aa6125;}

.working_methods.onderzoeker .header .headerbottom > div > a::before,
.working_methods.onderzoeker .header .headerbottom > div::after {background: #3a8b99;}
.working_methods.onderzoeker .header .headerbottom > div {background: linear-gradient(135deg, #3a8b99 55%, transparent 55%);}
.working_methods.onderzoeker .header .headerbottom > div > a::after {background: #0d6878;}
.working_methods.onderzoeker .header .headerbottom > div > a:hover::after {background: #085664;}

.working_methods.docent .header .headerbottom > div > a::before,
.working_methods.docent .header .headerbottom > div::after {background: #47aed6;}
.working_methods.docent .header .headerbottom > div {background: linear-gradient(135deg, #47aed6 55%, transparent 55%);}
.working_methods.docent .header .headerbottom > div > a::after {background: #157599;}
.working_methods.docent .header .headerbottom > div > a:hover::after {background: #0f6888;}

.working_methods.jongere .header .headerbottom > div > a::before,
.working_methods.jongere .header .headerbottom > div::after {background: #39b571;}
.working_methods.jongere .header .headerbottom > div {background: linear-gradient(135deg, #39b571 55%, transparent 55%);}
.working_methods.jongere .header .headerbottom > div > a::after {background: #23824e;}
.working_methods.jongere .header .headerbottom > div > a:hover::after {background: #1b7041;}

.working_methods.ouder .header .headerbottom > div > a::before,
.working_methods.ouder .header .headerbottom > div::after {background: #ed6151;}
.working_methods.ouder .header .headerbottom > div {background: linear-gradient(135deg, #ed6151 55%, transparent 55%);}
.working_methods.ouder .header .headerbottom > div > a::after {background: #a84e43;}
.working_methods.ouder .header .headerbottom > div > a:hover::after {background: #924136;}

.working_methods.student .header .headerbottom > div > a::before,
.working_methods.student .header .headerbottom > div::after {background: #a568ab;}
.working_methods.student .header .headerbottom > div {background: linear-gradient(135deg, #a568ab 55%, transparent 55%);}
.working_methods.student .header .headerbottom > div > a::after {background: #7a4280;}
.working_methods.student .header .headerbottom > div > a:hover::after {background: #67356d;}

.content {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.working_methods .content {position: relative;}
.working_methods .content ul,
.working_methods .content ol,
.working_methods .content p {margin-bottom: 1.4rem;}
.content::after {
    position: absolute;
    background: rgba(255,255,255,0.75);
    width: 100%;
    height: calc(100% - 4.75rem);
    left: 0;
    top: 4.75rem;
    content: "";
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.working_methods .content::after {pointer-events: none;}
.content.hasoverlay::after {opacity: 1;}
.working_methods .content.hasoverlay::after {background: rgba(255,255,255,0.75); z-index: 5; pointer-events: all;}

.person {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 7rem;
    z-index: 3;
    cursor: pointer;
}
.content.hasoverlay .person {z-index: 1;}
.content.hasoverlay .person.active {z-index: 3;}
.content.hasoverlay .speechballoon {z-index: 1;}
.content.hasoverlay .speechballoon.active,
.content.hasoverlay .speechballoon.expanded {z-index: 3;}

.menu_open .speechballoon.menu {width: 17rem!important; opacity: 1; pointer-events: all;}
.speechballoon.menu {width: 0!important; opacity: 0; transition: all 0.15s ease-in-out; pointer-events: none;}

.speechballoon {
    position: absolute;
    background: #2e5c6e;
    z-index: 3;
    padding: 0.25rem 0; 
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    width: 8rem;
    transition: width 0.15s ease-in-out;
}
.speechballoon > ul::before,
.speechballoon::before {
    content: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: 0; 
    height: 0; 
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid #2e5c6e;
    margin-top: -0.9rem;
    transition: left 0.15s ease-in-out;
    transform: translateX(-50%);
}
body.menu_open .speechballoon::before,
body.menu_open .speechballoon > ul::before {content: "";}
.speechballoon.expand.expanded {width: 18rem;}
.speechballoon.expand.expanded.twocols {width: 36rem;}
.speechballoon > ul::before {
    border-bottom: 1rem solid #083e52;
    margin-top: -0.55rem
}
.speechballoon.expand > div:first-child {
    background: #083e52; 
    color: white; 
    text-align: center;
    padding: 0 1rem 0.1rem;
    opacity: 1;
    transition: height 0.15s ease-in-out;
    height: auto;
    position: relative;
}
.speechballoon.expand > div:first-child > img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    display: none;
}
.speechballoon.expand > div:first-child::after {
    margin: -1rem 0 0.3rem;
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: calc(100% + 1.3rem);
    cursor: pointer;
    z-index: 3;
}
.speechballoon.expand.expanded > div:first-child {position: absolute; opacity: 0; pointer-events: none; height: 0;}
.speechballoon.expand > ul li {position: absolute; opacity: 0; pointer-events: none; transition: width 0.15s ease-in-out;}
.speechballoon.expand.expanded > ul li {position: relative; opacity: 1; pointer-events: all}

.speechballoon ul {overflow: hidden;}
.speechballoon ul li {font-size: 1.3rem; color: white; padding: 0.25rem 1.25rem; list-style: none; white-space: nowrap; }
.speechballoon ul li:first-child {padding-top: 0.75rem;}
.speechballoon ul li:last-child {padding-bottom: 0.75rem;}
.speechballoon ul li span {border-bottom: 1px solid rgba(255,255,255,0.5); display: block; margin-bottom: 0.25rem; padding-bottom: 0.5rem;}
.speechballoon ul {background: #083e52; display: block; display: block;}

.speechballoon a:not(.close) {color: white; text-decoration: none; padding: 0.25rem 1.25rem; margin: -0.25rem -1.25rem; display: block; font-size: 1rem;}
.speechballoon a:not(.close):hover {background: rgba(255,255,255,0.25);}
.speechballoon a.close {position: absolute; right: 0; top: 0.3rem;}
.speechballoon a.close img {width: 1.7rem; height: 1.7rem; opacity: 0.5;}
.speechballoon.expand a.close {display: none;}
.speechballoon.expand.expanded a.close {display: block;}

/* MENU */
.speechballoon.menu > ul::before,
.speechballoon.menu::before {left: 2rem;}
.speechballoon.menu {top: 9.75rem; width: 17rem; transform: none; left: 0; z-index: 6;}
.speechballoon.menu a:not(.close):hover {background: rgba(255,255,255,0.15);}

/* DOCENT */
.speechballoon.docent {margin: 5.25rem 0 0 23.95rem;}
.person.docent {margin: 1.25rem 0 0 25.45rem;}
.speechballoon.docent::before {border-bottom-color: #157599;}
.speechballoon.docent > ul::before {border-bottom-color: #47aed6;}
.speechballoon.docent {background: #157599;}
.speechballoon.docent ul, .speechballoon.docent.expand > div:first-child {background: #47aed6;}
.speechballoon.docent.hover:not(.expanded) ul, .speechballoon.docent.expand.hover:not(.expanded) > div:first-child,
.speechballoon.docent:not(.expanded):hover ul, .speechballoon.docent.expand:not(.expanded):hover > div:first-child {background: #75c3e1;}
.speechballoon.docent.hover:not(.expanded) > ul::before,
.speechballoon.docent:not(.expanded):hover > ul::before {border-bottom-color: #75c3e1;}

/* JONGERE */
.speechballoon.jongere {margin: 6.4rem 0 0 0.6rem;}
.person.jongere {margin: 2.4rem 0 0 1.9rem;}
.speechballoon.jongere::before {border-bottom-color: #23824e;}
.speechballoon.jongere > ul::before {border-bottom-color: #39b571;}
.speechballoon.jongere {background: #23824e;}
.speechballoon.jongere ul, .speechballoon.jongere.expand > div:first-child {background: #39b571;}
.speechballoon.jongere.hover:not(.expanded) ul, .speechballoon.jongere.expand.hover:not(.expanded) > div:first-child,
.speechballoon.jongere:not(.expanded):hover ul, .speechballoon.jongere.expand:not(.expanded):hover > div:first-child {background: #6bc895;}
.speechballoon.jongere.hover:not(.expanded) > ul::before,
.speechballoon.jongere:not(.expanded):hover > ul::before {border-bottom-color: #6bc895;}

/* ONDERZOEKER */
.speechballoon.onderzoeker {margin: -4.25rem 0 0 -0.5rem;}
.person.onderzoeker {margin: -8.25rem 0 0 1.15rem;}
.speechballoon.onderzoeker::before {border-bottom-color: #0d6878;}
.speechballoon.onderzoeker > ul::before {border-bottom-color: #3a8b99;}
.speechballoon.onderzoeker {background: #0d6878;}
.speechballoon.onderzoeker ul, .speechballoon.onderzoeker.expand > div:first-child {background: #3a8b99;}
.speechballoon.onderzoeker.hover:not(.expanded) ul, .speechballoon.onderzoeker.expand.hover:not(.expanded) > div:first-child,
.speechballoon.onderzoeker:not(.expanded):hover ul, .speechballoon.onderzoeker.expand:not(.expanded):hover > div:first-child {background: #6ca8b3;}
.speechballoon.onderzoeker.hover:not(.expanded) > ul::before,
.speechballoon.onderzoeker:not(.expanded):hover > ul::before {border-bottom-color: #6ca8b3;}

/* OUDER */
.speechballoon.ouder {margin: 5.5rem 0 0 -23.6rem;}
.person.ouder {margin: 1.5rem 0 0 -22.1rem;}
.speechballoon.ouder::before {border-bottom-color: #a84e43;}
.speechballoon.ouder > ul::before {border-bottom-color: #ed6151;}
.speechballoon.ouder {background: #a84e43;}
.speechballoon.ouder ul, .speechballoon.ouder.expand > div:first-child {background: #ed6151;}
.speechballoon.ouder.twocols.expanded {transform: translateX(-25%);}
.speechballoon.ouder.twocols.expanded::before, .speechballoon.ouder.twocols.expanded > ul::before {left: 25%;}
.speechballoon.ouder.hover:not(.expanded) ul, .speechballoon.ouder.expand.hover:not(.expanded) > div:first-child,
.speechballoon.ouder:not(.expanded):hover ul, .speechballoon.ouder.expand:not(.expanded):hover > div:first-child {background: #f2897d;}
.speechballoon.ouder.hover:not(.expanded) > ul::before,
.speechballoon.ouder:not(.expanded):hover > ul::before {border-bottom-color: #f2897d;}

/* PROFESSIONAL */
.speechballoon.professional {margin: 0.75rem 0 0 -12.5rem}
.person.professional {margin: -3.25rem 0 0 -11rem}
.speechballoon.professional::before {border-bottom-color: #bf6f2e;}
.speechballoon.professional > ul::before {border-bottom-color: #ff9c29;}
.speechballoon.professional {background: #bf6f2e;}
.speechballoon.professional ul, .speechballoon.professional.expand > div:first-child {background: #ff9c29;}
.speechballoon.professional.hover:not(.expanded) ul, .speechballoon.professional.expand.hover:not(.expanded) > div:first-child,
.speechballoon.professional:not(.expanded):hover ul, .speechballoon.professional.expand:not(.expanded):hover > div:first-child {background: #ffb55f;}
.speechballoon.professional.hover:not(.expanded) > ul::before,
.speechballoon.professional:not(.expanded):hover > ul::before {border-bottom-color: #ffb55f;}

/* STUDENT */
.speechballoon.student {margin: 0.5rem 0 0 12.5rem;}
.person.student {margin: -3.5rem 0 0 14rem;}
.speechballoon.student::before {border-bottom-color: #7a4280;}
.speechballoon.student > ul::before {border-bottom-color: #a568ab;}
.speechballoon.student {background: #7a4280;}
.speechballoon.student ul, .speechballoon.student.expand > div:first-child {background: #a568ab;}
.speechballoon.student.hover:not(.expanded) ul, .speechballoon.student.expand.hover:not(.expanded) > div:first-child,
.speechballoon.student:not(.expanded):hover ul, .speechballoon.student.expand:not(.expanded):hover > div:first-child {background: #bc8ec0;}
.speechballoon.student.hover:not(.expanded) > ul::before,
.speechballoon.student:not(.expanded):hover > ul::before {border-bottom-color: #bc8ec0;}

.popup {
    opacity: 0; 
    pointer-events: none; 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%) scale(0); 
    height: auto; 
    width: 22rem; 
    transition: all 0.15s ease-in-out; 
    overflow: hidden; 
    color: white;
    background: #083e52;
    padding: 1.8rem 1.25rem 1.8rem;
    z-index: 7;
    border-top: 0.3rem solid #2e5c6e;
    border-bottom: 0.3rem solid #2e5c6e;
    font-weight: 400;
    max-width: 100%;
}
.popup.info {width: 25rem;}
.popup.active {opacity: 1; pointer-events: all; transform: translate(-50%,-50%) scale(1);}
.popup a.close {position: absolute; right: 0; top: 0.1rem; cursor: pointer;}
.popup a.close img {width: 1.7rem; height: 1.7rem; opacity: 0.5;}
.popup a {color: white;}
.popup > p:nth-last-child(2) > a {font-weight: bold; text-decoration: none;}

ul.doelgroepen {margin: 0!important; padding: 0!important; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
ul.doelgroepen li {list-style: none; width: 27%; min-width: 6.4rem; padding: 0!important; margin: 0!important; display: none;}
ul.doelgroepen li:nth-child(1),
ul.doelgroepen li:nth-child(2),
ul.doelgroepen li:nth-child(3),
ul.doelgroepen li:nth-child(4),
ul.doelgroepen li:nth-child(5),
ul.doelgroepen li:nth-child(6) {display: block;}
ul.doelgroepen li a {display: block; text-decoration: none; margin: 0.25rem 0 1rem!important;}
ul.doelgroepen li a img {display: block;}
ul.doelgroepen li a span {display: block; background: #47aed6; color: white; margin-top: 0.2rem; font-weight: 700; text-align: center; padding: 0; text-transform: capitalize; font-size: 105%;}
ul.doelgroepen li.docent a span {background: #47aed6;}
ul.doelgroepen li.docent a:hover span {background: #75c3e1;}
ul.doelgroepen li.jongere a span {background: #39b571;}
ul.doelgroepen li.jongere a:hover span {background: #6bc895;}
ul.doelgroepen li.ouder a span {background: #ed6151;}
ul.doelgroepen li.ouder a:hover span {background: #f2897d;}
ul.doelgroepen li.onderzoeker a span {background: #3a8b99;}
ul.doelgroepen li.onderzoeker a:hover span {background: #6ca8b3;}
ul.doelgroepen li.professional a span {background: #ff9c29;}
ul.doelgroepen li.professional a:hover span {background: #ffb55f;}
ul.doelgroepen li.student a span {background: #a568ab;}
ul.doelgroepen li.student a:hover span {background: #bc8ec0;}


.working_methods .content .lighter {background: #052936; padding-top: 2rem;}
.working_methods .content .lighter + div {padding-top: 2rem;}
.working_methods h2 {
    border-bottom: 1px solid rgba(255,255,255,0.5); 
    line-height: 1; 
    padding-bottom: 0.9rem;
    margin-bottom: 1.1rem;
}
.working_methods .content a {color: white;}

.mobilehome {display: none;}
.footer {
    height: 0; 
    overflow: hidden; 
    background: #083e52; 
    margin-bottom: 0; 
    position: relative; 
    z-index: 6; 
    color: white; 
    font-weight: 300; 
    font-size: 80%; 
    min-height: auto!important; 
    font-weight: 700!important; 
    text-align: center;
}
.working_methods .footer {display: none;}
.footerbar {padding: 0.5rem 1.25rem; color: rgba(255,255,255,0.5);}
.footerbar + .footerbar {background: #052936;}
.footerbar a {color: rgba(255,255,255,0.5); text-decoration: none;}
.button {background: #faf2aa; color: #052936!important; display: block; padding: 0.4rem 0 0.5rem; text-decoration: none; font-weight: 700; position: relative; max-width: 29rem;}
.button > span {white-space: nowrap; display: block; margin: 0 3rem 0 1rem; overflow: hidden; text-overflow: ellipsis; font-size: 120%;}
.button > img {position: absolute; height: 70%; top: 15%; right: 0.5rem;}

.popup_open.working_methods .page::after {
    content: "";
    height: 100vh;
    position: fixed;
    top: 0; 
    left: 0;
    background: rgba(255,255,255,0.75);
    width: 100%;
    z-index: 6;
    pointer-events: none;
}
.popup_open .content > div::after {
    content: "";
    height: 100vh;
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    z-index: 6;
}

/* MINIMUM FONT SIZE */
html.minimumfontsize {font-size: 16px!important;}

/* SHOWLIST */
html.showlist body:not(.working_methods) .content .person {pointer-events: none;}
html.showlist body:not(.working_methods) .content .speechballoon {position: relative; top: 0; left: 0; transform: none; width: 100%; max-width: 20rem; margin: 0.25rem auto; transition: none;}
html.showlist body:not(.working_methods) .content.hasoverlay .speechballoon {display: none;}
html.showlist body:not(.working_methods) .content.hasoverlay .speechballoon.expanded {display: block;}
html.showlist body:not(.working_methods) .content .speechballoon > div {text-align: left; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 1.25rem; padding-left: 1.25rem}
html.showlist body:not(.working_methods) .content .speechballoon > ul::before, 
html.showlist body:not(.working_methods) .content .speechballoon::before {content: none;}
html.showlist .mobilehome {display: block;}
html.showlist body.expanded .header .headerbottom > div.menu {display: none;}
html.showlist body.expanded .header .headerbottom > div.back {display: block;}
html.showlist .speechballoon.expand > div:first-child {cursor: pointer;}
html.showlist .speechballoon.expand > div:first-child::after {content: none;}
html.showlist body:not(.working_methods) .content::after {opacity: 1!important; z-index: 3;}
html.showlist body.expanded .content::after {opacity: 1!important; z-index: 2;}
html.showlist body:not(.working_methods) .content > div:nth-child(2) {position: relative; z-index: 4; top: 3rem;}
html.showlist .speechballoon.expand > div:first-child > img {display: block;}
html.showlist .popup_open .speechballoon {opacity: 0; pointer-events: none;}

html:not(.showlist) .speechballoon.twocols ul li:first-child {position: absolute; padding-top: 0.75rem; top: 0.3rem; width: 100%; opacity: 0;}
html:not(.showlist) .speechballoon.twocols.expanded ul li:first-child {opacity: 1;}
html:not(.showlist) .speechballoon.twocols.expanded ul {column-count: 2; padding: 3.65rem 0 0.5rem; column-gap: 0px;}
html:not(.showlist) .speechballoon.docent.twocols.expanded {transform: translateX(-75%);}
html:not(.showlist) .speechballoon.docent.twocols.expanded::before, body .speechballoon.docent.twocols.expanded > ul::before {left: 75%;}



    html.mobile, html.mobile.minimumfontsize {font-size: 25px!important;}
    html.lesspadding .header .headertop h1 span {font-size: 2.5rem;}
    html.lesspadding .header .headerbottom span,
    html.lesspadding .header .headertop {padding-left: 6rem;}
    html.lesspadding .working_methods .content > div > div > div {padding-left: 6rem; padding-right: 3rem;}
    html.nobuttons .header .headertop .icon {display: none!important;}
    html.nobuttons .working_methods .content > div {min-height: auto;}
    html.nobuttons .footer {height: auto; overflow: visible; padding: 0!important; display: block;}
    html.nobuttons body.working_methods .footer {margin-top: -3rem!important}



    html.smallbackbutton .header .headertop {padding-left: 3rem; padding-right: 3rem;}
    html.smallbackbutton.nobuttons .header .headertop { padding-right: 1rem;}
    html.smallbackbutton .header .headertop h1 span {font-size: 2rem;}
    html.smallbackbutton h2 {font-size: 1.4rem;}
    html.smallbackbutton .header .headerbottom span {padding-left: 4rem;}
    html.smallbackbutton .working_methods .content > div > div > div {padding-left: 3rem; padding-right: 3rem;}
    html.smallbackbutton .header .headerbottom > div > a {transform: scale(0.65); transform-origin: left center;}

    html.mobile.mediumpadding body:not(.working_methods) .header .headerbottom > div.menu {background: #083e52;}
    html.mobile.mediumpadding .working_methods .content > div > div > div {padding-left: 1.5rem; padding-right: 1.5rem;}
    html.mobile.mediumpadding .header .headertop {padding-left: 1.5rem!important; padding-right: 1.5rem!important;}
    html.mobile.mediumpadding .header .headertop h1 span {font-size: 6.65vw; position: relative; bottom: 0.1rem;}
    html.mobile.mediumpadding h2 {font-size: 4.5vw;}
    html.mobile.mediumpadding .content {font-size: 0.9rem;}
    html.mobile.mediumpadding .speechballoon.expand a.close {opacity: 0; pointer-events: none;}
    html.mobile.mediumpadding body:not(.working_methods) .content > div:first-child {margin-top: 4.75rem; background: url(/img/Hoofdplaat.svg) center center / auto 1750px no-repeat; position: absolute; height: 1000px; width: 222.22%; transform: scale(0.45); transform-origin: left top; overflow: hidden;}
    html.mobile.mediumpadding body:not(.working_methods,.popup_open) .content::after {background: transparent;}
    html.mobile.mediumpadding body:not(.working_methods) .content.content > div:first-child::after {content: ""; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.75); z-index: 2;}
    html.mobile.mediumpadding body:not(.working_methods) .content.content.hasoverlay > div:first-child::after {opacity: 1;}
    html.mobile.mediumpadding body:not(.working_methods) .content .speechballoon {top: 0; max-width: none; border-bottom: 0.25rem solid #083e52; padding: 0; margin-top: 0; margin-bottom: 0;}
    html.mobile.mediumpadding body:not(.working_methods) .content .speechballoon:nth-child(1), 
    html.mobile.mediumpadding body:not(.working_methods) .content .speechballoon.expanded {margin-top: 19rem;}
    html.mobile.mediumpadding body:not(.working_methods) .content > div:nth-child(2) {top: 0rem;}
    html.mobile.mediumpadding .footer {flex-grow: 1;}
    html.mobile.mediumpadding .footerimage {background: url(/img/Hoofdplaat.svg) center 80% / auto 100vw no-repeat; height: 29vw;}
    html.mobile.mediumpadding body .header {background: #fffefb;}
    html.mobile.mediumpadding body.expanded .content > div:first-child {width: 100%!important; transform: scale(1)!important; height: 17rem;}
    html.mobile.mediumpadding body.expanded .content > div:first-child > .person {display: none!important;}
    html.mobile.mediumpadding body.expanded .content  > div:first-child::after {content: none!important;}

    html.mobile.mediumpadding body.expanded.professional .content > div:first-child {
        background: url(/img/Hoofdplaat_karakters_professional.svg) calc(50% + 1rem) center / auto 180px no-repeat, url(/img/overlay.png) center center, url(/img/Hoofdplaat.svg) calc(50% + 12rem) calc(50% + 3rem) / auto 1750px no-repeat;
    }
    html.mobile.mediumpadding body.expanded.jongere .content > div:first-child {
        background: url(/img/Hoofdplaat_karakters_jongere.svg) calc(50% + 1rem) center / auto 180px no-repeat, url(/img/overlay.png) center center, url(/img/Hoofdplaat.svg) calc(50% - 0.95rem) calc(50% - 2.2rem) / auto 1750px no-repeat;
    }
    html.mobile.mediumpadding body.expanded.ouder .content > div:first-child {
        background: url(/img/Hoofdplaat_karakters_ouder.svg) calc(50% + 1rem) center / auto 180px no-repeat, url(/img/overlay.png) center center, url(/img/Hoofdplaat.svg) calc(50% + 23rem) calc(50% - 1.5rem) / auto 1750px no-repeat;
    }
    html.mobile.mediumpadding body.expanded.student .content > div:first-child {
        background: url(/img/Hoofdplaat_karakters_student.svg) calc(50% + 1rem) center / auto 180px no-repeat, url(/img/overlay.png) center center, url(/img/Hoofdplaat.svg) calc(50% - 13rem) calc(50% + 3.4rem) / auto 1750px no-repeat;
    }
    html.mobile.mediumpadding body.expanded.onderzoeker .content > div:first-child {
        background: url(/img/Hoofdplaat_karakters_onderzoeker.svg) calc(50% + 1rem) center / auto 180px no-repeat, url(/img/overlay.png) center center, url(/img/Hoofdplaat.svg) calc(50% - 0.2rem) calc(50% + 8.25rem) / auto 1750px no-repeat;
    }
    html.mobile.mediumpadding body.expanded.docent .content > div:first-child {
        background: url(/img/Hoofdplaat_karakters_docent.svg) calc(50% + 1rem) center / auto 180px no-repeat, url(/img/overlay.png) center center, url(/img/Hoofdplaat.svg) calc(50% - 24.5rem) calc(50% - 1.2rem) / auto 1750px no-repeat;
    }
    html.mobile.mediumpadding .footer { text-align: left;}
    html.mobile.mediumpadding .popup_open .content::after {content: none;}
    html.mobile.mediumpadding .popup_open .speechballoon {opacity: 1; pointer-events: all;}
    html.mobile.mediumpadding .popup_open .page::after {
        content: "";
        height: 100vh;
        position: fixed;
        top: 0; 
        left: 0;
        background: rgba(255,255,255,0.75);
        width: 100%;
        z-index: 6;
        pointer-events: none;
    }
    html.mobile.mediumpadding ul.doelgroepen li a {margin: 0.25rem 0 4vw!important;}
 
    html.mobile.smallpadding .header .headerbottom > div > a {transform: scale(0.5);}
    html.mobile.smallpadding .speechballoon.menu {top: 8rem;}
    html.mobile.smallpadding .header .headerbottom span {padding-left: 3rem;}
    html.mobile.smallpadding .footerbar,
    html.mobile.smallpadding .working_methods .content > div > div > div,
    html.mobile.smallpadding .header .headertop {padding-left: 1rem!important; padding-right: 1rem!important;}
    html.mobile.smallpadding .working_methods .content > div > div.flex > div.image {padding-left: 0!important; padding-right: 0!important;}
    html.mobile.smallpadding .working_methods .content > div {padding-top: 1rem;}
    html.mobile.smallpadding .working_methods .header .headerbottom > div {background: #2e5c6e;}
    html.mobile.smallpadding .working_methods.professional .header .headerbottom > div {background: #ff9c29;}
    html.mobile.smallpadding .working_methods.docent .header .headerbottom > div {background: #47aed6;}
    html.mobile.smallpadding .working_methods.ouder .header .headerbottom > div {background: #ed6151;}
    html.mobile.smallpadding .working_methods.student .header .headerbottom > div {background: #a568ab;}
    html.mobile.smallpadding .working_methods.jongere .header .headerbottom > div {background: #39b571;}
    html.mobile.smallpadding .working_methods.onderzoeker .header .headerbottom > div {background: #3a8b99;}
    html.mobile.smallpadding .header .headerbottom > div {background: #083e52;}
    html.mobile.smallpadding .header .headertop h1 span {font-size: 1.5rem;}
    html.mobile.smallpadding .header .headerbottom span {font-size: 0.8rem;}
    html.mobile.smallpadding h2 {font-size: 1.1rem;}
    html.mobile.smallpadding .content {font-size: 0.75rem;}
    html.mobile.smallpadding body:not(.working_methods) .content > div:first-child {width: 333.33%; transform: scale(0.3);}
    
    html.mobile.smallpadding .header .headerbottom > div > a img,
    html.mobile.smallpadding .header .headerbottom > div > a::before, 
    html.mobile.smallpadding .header .headerbottom > div > a::after {top: 0.85rem;}
    html.mobile.smallpadding .header .headerbottom > div::after {content: none;}
    html.mobile.smallpadding .header .headerbottom span {padding-top: 0.2rem; padding-bottom: 0.2rem; height: auto;}
    
    html.mobile.smallpadding body:not(.working_methods) .content .speechballoon:nth-child(1), 
    html.mobile.smallpadding body:not(.working_methods) .content .speechballoon.expanded {margin-top: 13.5rem;}
    html.mobile.smallpadding body.expanded .content > div:first-child {height: 11.5rem;}
    html.mobile.smallpadding .working_methods .content > div > div.flex > div.image + div,
    html.mobile.smallpadding .working_methods .content > div > div.flex > div.image {padding-bottom: 1.2rem;}
    html.mobile.smallpadding .button > span > span {display: none;}
    html.mobile.smallpadding .button > span {margin-left: 0.75rem;}
    html.mobile.smallpadding .working_methods h3#ouder,
    html.mobile.smallpadding .working_methods h3#ouder + ul,
    html.mobile.smallpadding .working_methods h3#professional,
    html.mobile.smallpadding .working_methods h3#professional + ul,
    html.mobile.smallpadding .working_methods h3#docent,
    html.mobile.smallpadding .working_methods h3#docent + ul,
    html.mobile.smallpadding .working_methods h3#jongere,
    html.mobile.smallpadding .working_methods h3#jongere + ul,
    html.mobile.smallpadding .working_methods h3#onderzoeker,
    html.mobile.smallpadding .working_methods h3#onderzoeker + ul,
    html.mobile.smallpadding .working_methods h3#student,
    html.mobile.smallpadding .working_methods h3#student + ul,
    html.mobile.smallpadding .flex:nth-child(2) > div:nth-child(2) > h3,
    html.mobile.smallpadding .flex:nth-child(2) > div:nth-child(2) > ul {border-left-width: 0.3rem}
    html.mobile.smallpadding .working_methods h2 {padding-bottom: 1.1rem;}
    html.mobile.smallpadding .working_methods .content > div > div > div.lighter,
    html.mobile.smallpadding .working_methods .content > div > div > div.lighter + div {padding-top: 1.2rem; padding-bottom: 0.1rem;}
    html.mobile.smallpadding .popup {font-size: 0.8rem; padding: 1.5rem 1rem 1.5rem;}

    html.mobile.tinypadding .speechballoon ul li {padding-left: 4vw; padding-right: 4vw;}
    html.mobile.tinypadding body:not(.working_methods) .content .speechballoon > div {padding-left: 4vw;}
    html.mobile.tinypadding .footerbar,
    html.mobile.tinypadding .working_methods .content > div > div > div,
    html.mobile.tinypadding .header .headertop {padding-left: 4vw!important; padding-right: 4vw!important;}
    html.mobile.tinypadding .menu_open .speechballoon.menu {width: 100% !important;}
    html.mobile.tinypadding .speechballoon a:not(.close) {font-size: 0.8rem;}
    html.mobile.tinypadding .speechballoon ul li,
    html.mobile.tinypadding body:not(.working_methods) .content .speechballoon > div {font-size: 1rem;}
    html.mobile.tinypadding body:not(.working_methods) .content > div:first-child {width: 400%; transform: scale(0.25);}
    html.mobile.tinypadding body:not(.working_methods) .content .speechballoon:nth-child(1), 
    html.mobile.tinypadding body:not(.working_methods) .content .speechballoon.expanded {margin-top: 12rem;}
    html.mobile.tinypadding body.expanded .content > div:first-child {height: 10rem;}
    html.mobile.tinypadding .button > span {margin-left: 0.5rem;}
    html.mobile.tinypadding ul.doelgroepen li {width: 45%; min-width: 0;}
    html.mobile.tinypadding ul.doelgroepen {justify-content: space-between;}
    html.mobile.tinypadding .header .headerbottom span {font-size: 4.25vw;}
    html.mobile.tinypadding .popup {padding: 1.5rem 4vw 1.5rem;}

    html.minheight body {background-position: center -260px;}
    html.minheight div.page {min-height: 670px;}
    html.showlist.minheight body {background-position: center -310px;}
    html.showlist.minheight:not(.mobile) div.page {min-height: 570px; height: 100%;}