/*
      Author: Primosite

      CBO Zeist
      site131
*/

@import "cbozeist-vars-v3.0.css";

/* STRUCTURE
----------------------------------------------------*/
* {margin:0;padding:0;outline:none;}
html {height:100%;}
body {height:100%;
  font-family:'Mulish',sans-serif;
  font-size: var(--font0);
  line-height:1.5;
  color:var(--purple);}

#main-wrapper {display:flex;flex-flow:column;padding-top:var(--headerH);min-height:calc(100% - 150px);
  background-image:url(/images/layout/v3.0/bg.png);
  background-repeat:no-repeat;
  background-size:var(--bgW);
  background-position:50% -20vw;
}
#content-wrapper {flex-grow:1;z-index:1;padding-bottom:14vw;
  background-image:url(/images/layout/v3.0/content-bg.png);
  background-repeat:no-repeat;
  background-size:100%;
  background-position: 50% bottom;
}

#header-wrapper {position:fixed;top:0;left:0;width:100%;height:var(--headerH);
  z-index:2;
  box-shadow:0 0 15px #444;
  background-color:#fff;
}
.header {display:flex;flex-flow:row wrap;align-items:center;position:relative;}
#version {position:absolute;top:18px;left:0;background:var(--red);color:white;
  padding:0 12px;font-size:var(--font-2);text-transform:uppercase;}
#nav-trigger {display:none;}
#logo {flex-basis:203px;margin:10px 0;}
#nav {flex-basis:calc(100% - 203px);}

#footer-wrapper {padding:25px 0;z-index:1;background-color:var(--orange);}
.footer {display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-end;color:white;}
.footer > * {flex-grow:1;}
#footer-nav .menu {display:flex;margin:0 -1em;}
#footer-nav li.level1 {margin:0 1em;}


.header, .footer {width:var(--mainW);max-width:var(--maxW);margin:0 auto;}

.content > .aclgroup,
.content > .aclgroupnode,
.content > .csv-wrapper,
.content > .import-wrapper,
.content > .library-wrapper,
.content > .map-wrapper,
.content > .news-wrapper,
.content > .psform-wrapper,
.content > .users-wrapper,
.content > .vacancies {width:var(--mainW);max-width:var(--maxW);margin:1em auto;}

.content > .checkout-wrapper,
.content > .emailformbox,
.content > .emailform-wrapper,
.content > .error-wrapper,
.content > .information,
.content > .linkoverview,
.content > .organizations-wrapper,
.content > .schoolguide-wrapper,
.content > .sitemap,
.content > .siteparameters,
.content > .training-wrapper,
.content > .video-wrapper,
.content > .xlocations-wrapper {width:var(--contentW);max-width:var(--maxW);margin:0 auto;}

.content > .multiple-wrapper.contact {max-width:100%;}
.content > .multiple-wrapper.contact .schoolguide .image img {margin:0 auto;}
.content > .multiple-wrapper.contact .multiple.contact > .emailform {width:var(--contentW);max-width:var(--maxW);margin:0 auto;}

.content > .actionform,
.content > .signin-wrapper,
.content > .passwordreminder-wrapper {width:var(--loginW);max-width:var(--maxW);margin:1em auto 0;}
.content > .signin-wrapper > .signin,
.content > .passwordreminder-wrapper > .passwordreminder {padding:0 50px;}

body > .signin-wrapper,
body > .passwordreminder-wrapper {width:var(--loginW);max-width:var(--maxW);margin:50px auto 0;
  box-shadow:0 0 15px #ccc;
  background-image:url(/images/layout/v3.0/logo-cbozeist.png);
  background-size:50%;
  background-repeat:no-repeat;
  background-position:50% 40px;
  background-color:#fff;
}
body > .signin-wrapper > .signin,
body > .passwordreminder-wrapper > .passwordreminder {padding:150px 50px 50px;}

/* NAV
----------------------------------------------------*/
.menu li {list-style:none;}

#nav a {color:var(--purple);font-size:var(--font0);}
#nav a[class^="icon-"],
#nav a[class*=" icon-"] {display:inline-flex;align-items:baseline;text-decoration:none!important;}
#nav a[class^="icon-"]:before,
#nav a[class*=" icon-"]:before {color:var(--red);}
#nav li > div.submenu {position:absolute;margin-left:-1.5em}


/* header-nav */
#header-nav {position:absolute;top:10px;right:0;}
#header-nav > .menu {display:flex;flex-flow:row wrap;justify-content:flex-end;}
#header-nav li.level1 {position:relative;margin-left:2em;}
#header-nav li>div.submenu {right:0;max-height:0;overflow:hidden;z-index:2;}
#header-nav li:hover > div.submenu {box-shadow:0 0 15px var(--tintGrey);
  max-height:500px;padding:2em;background-color:white;
  transition:max-height 1s linear .5s, padding .0s linear .5s;}
#header-nav .level2 a {display:block;white-space:nowrap;padding:2px 5px;}
#header-nav .level2 a:hover {background-color:var(--tintBlue);}

/* site-nav */
#site-nav-wrapper {order:4;pointer-events:none;position:relative;z-index:1;flex-basis:400px;flex-grow;}
#site-nav {pointer-events:auto;}
#site-nav li {list-style:none;}
#site-nav ul.level1 {display:flex;flex-flow:row wrap;justify-content:flex-end;;margin:0 -6px;}
#site-nav li.level1 {margin: 1em .5em 0;padding:0 1em .5em;position:relative;border-bottom:solid 3px white;}
#site-nav li.level1:hover {border-color:var(--tintRed);}
#site-nav li.level1.active {border-color:var(--red);}

#site-nav a {display:block;text-decoration:none;}
#site-nav a.level1 {font-weight:var(--fontMedium);}
#site-nav li.level1 > div.submenu {max-height:0;overflow:hidden;z-index:2;}
#site-nav li:hover > div.submenu {box-shadow:0 0 15px var(--tintDarkGrey);
  max-height:500px;padding:2em;background-color:white;
  transition:max-height .25s linear .5s, padding .25s linear .5s;}
#site-nav li.level2 {margin-top:.5em;padding-left:4px;border-left:solid 4px white;}
#site-nav li.level2:hover {border-color:var(--tintRed);}
#site-nav li.level2.active {border-color:var(--red);}
#site-nav li.level2 a {white-space:nowrap;}

/* TEMP
----------------------------------------------------*/
.csv-wrapper br {margin-bottom:1em;}

/* DEFAULTS
----------------------------------------------------*/
/* headers */
h1,h2,h3,h4 {color:var(--purple);font-weight:var(--fontBold);}
h1 {font-size:var(--font7);margin-bottom:.5em;}
h2 {font-size:var(--font5);}
h3 {font-size:var(--font2);}
h4 {font-size:var(--font1);}
h2,h3,h4 {margin-top:1em;}
h2:first-child,h3:first-child,h4:first-child {margin-top:0;}

/* links */
a {color:inherit;text-decoration:underline dotted 1px;}
a:hover {text-decoration:underline solid 1px;}
a.back{text-decoration:none;padding:.5em 1em;border-radius:3px;cursor:pointer;
  background-color:var(--red);color:white;
}
a.delete-item {display:inline-block;font-size:12px;font-weight:bold;width:16px;height:16px;
  line-height:10px;text-align:center;border-radius:50%;cursor:pointer;text-indent:-999em;
  background-color:#E2303C;
  background-image:url(/images/layout/cross-white.png);
  background-size:60%;
  background-position:50%;
  background-repeat:no-repeat;
}
a.doclink {display:inline-block;padding:0 10px 0 0;border-radius:3px;text-decoration:none;background:var(--grey);color:white;font-weight:bold;border:none;}
a.doclink:before {display:inline-block;width:40px;text-align:center;padding:0 3px;border-radius:3px 0 0 3px;margin-right:10px;background:var(--grey);}
a.doclink[href$=".pdf"]:before {content:"PDF";background-color:var(--red);color:white;}
a.doclink[href$=".doc"]:before {content:"doc";background-color:var(--blue);color:white;}
a.doclink[href$=".docx"]:before {content:"doc";background-color:var(--blue);color:white;}
a.doclink.hasimage {padding:0;}
a.doclink.hasimage:before {position:absolute;border-radius:3px 0 3px 0}
a.doclink.hasimage img {display:block;border-radius:3px;}

#main-wrapper .followus-link {background-image:none;background-color:transparent;
  text-indent:0;color:inherit;font-size:inherit;display:inline-block;width:auto;height:auto;}
a.loadlink {cursor:pointer;}
a.more,
.newsindex-item a {color:var(--red);font-weight:var(--fontMedium);}
a.more:hover,
.newsindex-item a:hover {color:var(--subRed)}

a.cta {display:inline-block;background-color:var(--red);color:white;padding:.5em 1em;
  border-radius:5px;font-size:87.5%;text-decoration:none;}

div.cta {font-size:var(--font1);padding:25px;width:clamp(130px,12vw,160px);height:clamp(130px,12vw,160px);
  display:flex;justify-content:center;align-items:center;text-align:center;
  box-shadow:var(--boxShadowDark);font-weight:var(--fontBlack);border-radius:50%;
  transition: .3s font-size .0s;}
div.cta:hover {font-size:var(--font2);transition: .3s font-size .0s;}
div.cta-blue {background-color:var(--blue);color:white;transform:rotate(-5deg);}
div.cta-red {background-color:var(--red);color:white;transform:rotate(10deg);}
div.cta-orange {background-color:var(--orange);color:white;transform:rotate(-20deg);}

.count {width:2em;height:2em;border-radius:50%;background-color:var(--blue);
  color:white;font-weight:var(--fontBlack);
  display:flex;align-items:center;justify-content:center;}

.date {display:flex;flex-flow:row wrap;align-items:center;margin:0 -2px;}
.date > * {margin:0 2px;}
.date .minute:before{content:":"}
.date .minute:after{content:" uur"}

.menu a {font-size:var(--font1);}

[class^="icon-"]:before,
[class*=" icon-"]:before {text-decoration:none!important;margin-right:.3em!important;color:var(--red);}

button[class^="icon-"]:before,
button[class*=" icon-"]:before,
.back[class^="icon-"]:before,
.back[class*=" icon-"]:before {color:inherit;}

.ps-alert [class^="icon-"],
.ps-alert [class*=" icon-"] {display:inline-block;background-color:var(--blue);color:white;text-decoration:none;padding:3px 1em;margin:.5em;border-radius:3px;}

.ps-alert [class^="icon-"]:before,
.ps-alert [class*=" icon-"]:before {color:inherit;}

.menu li[class^="icon-"]:before,
.menu li[class*=" icon-"]:before {display:none;}

.noitems {font-size:var(--font4);font-weight:var(--fontBlack);white-space:nowrap;}
.icon-hca:before {content:" ";height:1em;background-image:var(--iconS);background-size:1em;}

.relatedlink {clear:left;margin-bottom:.5em;display:flex;align-items:center;}

strong {color:var(--red);}

/* misc */

.ps-alert video {display:block;max-height:400px;margin:0 auto;}

.content ul {margin:0 0 1em;}
.content li ul {margin-top:0;}
.content ul:first-child {margin-top:0;}
.content li {margin:0 0 .5em 2em;}
.content ol {list-style:none;counter-reset:li;}
.content ol li {counter-increment: li;}
.content ol li::before {content: counter(li);color:white;font-weight:var(--fontBlack);
  background-color:var(--red);border-radius:50%;
  display: inline-flex;justify-content:center;align-items:center;
  width:1.5em;height:1.5em;margin:0 .5em 0 -2em;}
.content ul li {list-style:none;position:relative;}
.content ul li:before{
  position:absolute;
  content: "\2022";  /* CSS Code/unicode for a bullet */
  color: var(--red);
  font-size:150%;
  line-height:0;
  font-weight: var(--fontBold);
  top:12px;
  left:-20px
}

.image {background-size:cover;background-position:50%;background-repeat:no-repeat;}
.image img {display:block;max-width:100%;max-height:100%;margin:0 auto;}
.content p, .content .text {margin-bottom:1em;}
.content button:not(.vjs-button):not(.tox-tbtn),
button.submit,
button[type=submit] {background-color:var(--red);color:white;font-family:inherit;border-radius:0;font-size:var(--font2)} 
.content button:hover,
button.submit:hover,
button[type=submit]:hover {background-color:var(--subRed);}
button.cancel {background-color:var(--tintGrey);color:var(--grey);}
button.cancel:hover {background-color:var(--grey);color:white;}

/* recaptcha */
.g-recaptcha {display:flex;justify-content: flex-start;}

.editwrapper {float:none;}

.ps-alert {border-color:white!important;color:inherit;border-radius:3px;}
.ps-alertbutton {background:var(--red);color:#fff;text-transform:uppercase;}
.ps-alertbutton:hover{background:var(--red);}
button.no {background:lightgrey;color:darkgrey;}
button.no:hover {background:grey;}
#content-wrapper button.vjs-big-play-button {font-size:500%;border-radius:2em;opacity:.8;box-shadow:0 0 15px black;background:var(--blue);color:#fff}
#content-wrapper .video-js:hover button.vjs-big-play-button {font-size:500%;border-radius:2em;background:var(--blue);color:#fff;opacity:.95}

.field {display:flex;flex-flow:row wrap;margin-bottom:1em;}
.fieldheader {flex-basis:25%;margin-right:1em;font-weight:bold;}
.fieldvalue {flex-basis:calc(100% - 25% - 1em);}
.grecaptcha-badge {z-index:1;}
.message {font-size:18px;font-weight:bold;color:red;}
.formelement.message {font-size:inherit;font-weight:inherit;color:inherit;}

.content table {width:100%;border-collapse:collapse;}
.content th {text-align:left;}
.content td {vertical-align:top;}
.content .sharelinks {justify-content:center;margin-top:2em;}
.content .sharelink {margin-right:1em;border-radius:2px;}
.content .sharelink:hover {}

/* org */
.organization {display:flex;flex-flow:row wrap;}
.organization > * {flex-basis:100%;}
.organization .name {font-weight:bold;font-size:112.5%;margin-bottom:20px;}
.organization .zip {flex-basis:30px;white-space:nowrap;margin-right:.75em;}
.organization .city {flex-basis:100px;}
.organization .country {margin-bottom:20px;}

.footer .organization * {color:#fff;}

/* CHECKOUT
----------------------------------------------------*/
.checkout-wrapper h1 span:first-of-type {margin-right:.25em;}
.checkout-wrapper .terms label span {margin-right:.25em;}

/* EMAILFORMBOX
----------------------------------------------------*/
.emailformbox h2 {display:flex;flex-flow:row wrap;}
.emailformbox h2 > * {margin-right:.5em;}
.emailformbox .email {box-shadow:var(--boxShadow);background-color:white;padding:1em;margin-bottom:1em;}

/* FORMS
----------------------------------------------------*/
form.ps-form {padding:2em;}
form label,.fieldlabel {font-weight:var(--fontMedium);color:var(--red);}
form label.checkbox {color:inherit;font-weight:var(--fontRegular);}
form input[type=checkbox] {margin-right:.5em;}
.signin .ps-form {margin-bottom:2em;padding:0;}
.content .fieldlabel,.content .formfield {flex-basis:calc(100%);}
.formfield label.checkbox {margin:0 1.5em .5em 0;display:flex;}
.multi-email label {display:block;}
.emailform-body {display:flex;flex-flow:row wrap;align-items:flex-start;
  margin:0 var(--negMarginW);position:relative;}
.emailform-body > * {flex-basis:100%;margin-left:var(--marginW);margin-right:var(--marginW);}
.emailform-body > .emailform-text {flex-basis:45%;flex-grow:1;margin:var(--marginW);min-width:var(--asideW);
  font-size:var(--font2);}
.emailform-body > .emailform-form {flex-basis:35%;flex-grow:4;margin:1em;min-width:var(--asideW);
  background-color:var(--tintBlue);padding:2em;}
#content-wrapper form.emailform input,
#content-wrapper form.emailform textarea {border-radius:3px;/*! border:none; */}

.emailform .formelement:not(.buttons) {background-color:inherit;}
.xtoaddress.to1:before {content:"Bestemd voor:";flex-basis:100%;color:var(--red);font-weight:var(--fontBold);margin-bottom:.5em;}
.xtoaddress {margin-bottom:0;align-items: baseline!important;}
.xtoaddress label {flex-basis:100px;}
.xtoaddress input {flex-grow: 0;}


.ps-form.EditUser {max-width:var(--contentW);margin:0 auto;}
.ps-form.EditUser > * {margin:.5em;}

.ps-form.EditUser .formelement.loginname {flex-basis:100%;margin-bottom:1em}
.ps-form.EditUser .formelement.Password {flex-basis:20%;}
.ps-form.EditUser .formelement.firstname {flex-basis:40%;}
.ps-form.EditUser .formelement.lastname {flex-basis:40%;}
.ps-form.EditUser .formelement.email {flex-basis:40%;}
.ps-form.EditUser .formelement.Url {flex-basis:40%;}
.ps-form.EditUser .formelement.Company {flex-basis:40%;}
.ps-form.EditUser .formelement.Function {flex-basis:40%;}
.ps-form.EditUser .formelement.address {}
.ps-form.EditUser .formelement.zip {flex-basis:40px;max-width:60px;}
.ps-form.EditUser .formelement.city {flex-basis:calc(100% - 60px - 4em)}
.ps-form.EditUser .formelement.phone {flex-basis:45%;}
.ps-form.EditUser .formelement.phone2 {flex-basis:45%;}
.ps-form.EditUser .formelement.phone3 {flex-basis:45%;} /* date */
.ps-form.EditUser .formelement.phone3 input {text-align:center;}
.ps-form.EditUser .formelement.birthday {flex-basis:45%;} /* date */
.ps-form.EditUser .birthday .time {display:none;}

/* LIBRARY
----------------------------------------------------- */
.library-wrapper {margin:2em auto;}
.library-wrapper h1 {text-align:center;}
.folders {width:900px;max-width:calc(100% - 2em);margin:0 auto;
  display:flex;flex-flow:row wrap;justify-content:center;}
.folders > * {margin:.5em;flex-basis:250px;flex-grow:1;padding:1em;
  background:var(--tintGrey);}
.folder {padding-bottom:2em;}

.folder-item-wrapper {background-color:var(--tintBlue);border:solid 1px var(--subBlue);margin-bottom:.5em;position:relative;}
.folder-item-wrapper:hover {box-shadow:var(--boxShadow);}
.folder-item-wrapper > .editwrapper {position:absolute;}
.folder-item {display:flex;flex-flow:row wrap;align-items:center;cursor:pointer;padding:.25em;}
.folder-item:before {color:var(--red);font-size:var(--font5);flex-basis:25px;}
.folder-item-content {flex-basis:50px;flex-grow:1;}
.folder-item .item-date {flex-basis:80px;font-size:var(--font-2);color:var(--blue)}
.folder-item .item-title {flex-grow:1;}

/* LINKOVERVIEW
----------------------------------------------------*/
.linkoverview li {display:flex;}

/* MAP (GOOGLE)
-------------------------------------------------------------------------*/
.map-wrapper {display:flex;flex-flow:row wrap;align-items:flex-start;}
.map-wrapper > * {flex-basis:100%;flex-grow:1;}
.map {flex-basis:var(--subContentW);height:628px;border-radius:1em;}
.mapindex {flex-basis:var(--asideW);display:flex;flex-flow:row wrap;/*! justify-content:center; */align-items:flex-start;margin-bottom:1em;}
.mapindex > * {flex-basis:var(--halfCardW);margin:.5em;}

.mapindexitem-wrapper .editwrapper {position:absolute;}
.mapindexitem {border-radius:3px;background-color:var(--tintBlue);ox-shadow:var(--boxShadow);opacity:.9;}
.mapindexitem:hover {opacity:1;cursor:pointer;}
.mapindexitem .image {height:60px;display:flex;justify-content:center;align-items:center;padding:1em;}
.mapindexitem .image img {}
.map .gm-style-iw {width:300px;}
.gm-style-iw .image img {max-width:100%;}
.gm-style-iw .textwrapper {color:#444;}
.gm-style-iw a{display:block;width:150px;height:32px;margin:1em 0;border:none;text-indent:-9999em;background:url(/images/layout/v2/go.png) no-repeat;}

/* MULTIPLE
----------------------------------------------------*/
/* default */

/* contact */
#content-wrapper .multiple-wrapper.contact {margin-top:-1.5em;}
.openapplication .schoolguide > .image {width:100%;overflow:hidden;min-height:auto;}


/* homepage */
.multiple.homepage {display:flex;flex-flow:row wrap;justify-content:center;margin:0 -.5em;}
.multiple.homepage > * {margin-left:.5em;margin-right:.5em;margin-bottom:2em;min-width:var(--minW);}
.multiple.homepage h1 {margin-top:1em;}

.multiple.homepage .multiple-item-wrapper.schoolguide {flex-basis:45%;flex-grow:1;margin-bottom:1em;max-width:var(--maxW);}
.multiple.homepage .schoolguide .intro {font-size:var(--font1);}
.multiple.homepage .multiple-item-wrapper.picture {position:relative;margin-top:6em;
  flex-basis:45%;flex-grow:1;align-self:flex-start;}
.multiple-item.picture .editwrapper {position:absolute;}
.picture-wrapper img {min-width:var(--asideW);border-radius:1em;}

.multiple.homepage .multiple-item-wrapper.linkoverview {flex-basis:100%;margin:-6em 0 1em;}
.multiple.homepage .multiple-item.linkoverview {display:flex;flex-flow:row wrap;justify-content:center;}
.multiple.homepage .multiple-item.linkoverview .editwrapper {position:absolute;}
.multiple.homepage .multiple-item.linkoverview > .editwrapper {left:0;}
.multiple.homepage .multiple-item.linkoverview > * {margin:1em 30px;}

.multiple.homepage .multiple-item-wrapper.news {flex-basis:100%;}
.multiple.homepage .multiple-item.news {width:var(--contentW);max-width:var(--maxW);margin:0 auto;}
.multiple.homepage .newsindex {display:flex;flex-flow:row wrap;margin:0 -1em;justify-content: center;}
.multiple.homepage .newsindexitem-wrapper {flex-basis:var(--cardW);margin:1em;padding-bottom:1em;position:relative;background-color:white;box-shadow:var(--boxShadow);}
.multiple.homepage .newsindexitem-wrapper > .editwrapper {position:absolute;}
.multiple.homepage .newsindexitem {font-size:75%;}
.multiple.homepage .newsindexitem .image {height:200px;
  background-size:100% 100%;transition: .5s background-size .0s;}
.multiple.homepage .newsindexitem:hover .image {
  background-size:110% 110%;transition: .5s background-size .0s;}
.multiple.homepage .newsindexitem:hover h2 {text-decoration:underline 2px;text-underline-offset:3px;}
.multiple.homepage .newsindexitem .newsindexitem-text {flex-basis:45%;flex-grow:1;padding:1em;;}

.multiple.homepage .newsindexitem  h2 {font-weight:var(--fontBold);}

.multiple.homepage .multiple-item-wrapper.vacancybankgroup {flex-basis:100%;padding:2em 0}
.multiple.homepage .multiple-item.vacancybankgroup {max-width:var(--mainW);margin:0 auto;}
.multiple.homepage .vacancies-index {margin:0}

.multiple.homepage .multiple-item-wrapper.video {flex-basis:100%;align-self:center;background-color:var(--blue)}
.multiple-item.video {width:var(--contentW);max-width:var(--maxW);margin:0 auto;padding-bottom:4em;}
.multiple.homepage .video-wrapper {margin:0 auto;position:relative;
  display:flex;flex-flow:row wrap;margin:0 -1em;align-items:center;}
.multiple.homepage .video-wrapper .editwrapper {position:absolute;top:0;z-index:1;}
.multiple.homepage .video-wrapper > * {flex-basis:var(--content40W);flex-grow:1;margin:1em;}
.multiple.homepage .video-wrapper > .video-text-wrapper > * {color:white;;}


/* NEWS
----------------------------------------------------*/
.news .date-author {font-style:italic;}
.content > .news-wrapper > .news {display:flex;flex-flow:row wrap;justify-content:center;margin:0 var(--negMarginW);}
.content > .news-wrapper > .news > * {margin:0 var(--marginW) 1em;}
.content > .news-wrapper > .news > h1 {flex-basis:100%;}
.content > .news-wrapper > .editwrapper {flex-basis:100%;}
.content > .news-wrapper .newsitem-wrapper {flex-basis:var(--subContentW);flex-grow:1;order:1;}
.content > .news-wrapper .newsindex {flex-basis:var(--subNavW);flex-grow:1;}
.content > .news-wrapper .newsitem .image {margin-bottom:2em;}
.content > .news-wrapper .newsindex-wrapper > .editwrapper {position:absolute;left:50%;margin:-80px 0 0 -13px;}
.content > .news-wrapper .newsindexitem h2 {font-size:var(--font3)}
.content > .news-wrapper .newsindexitem-wrapper {margin-bottom:1em;:0;}
.content > .news-wrapper .newsindexitem-wrapper .editwrapper {position:absolute;top:10px;right:10px;}
.content > .news-wrapper .newsindexitem {width:100%;font-size:var(--font3);display:flex;flex-flow:row wrap;}
.content > .news-wrapper .newsindexitem:hover h2 {text-decoration:underline 2px;text-underline-offset:2px;}
.content > .news-wrapper .newsindexitem .image {flex-basis:180px;min-width:180px;flex-grow:1;min-height:120px;}
.content > .news-wrapper .newsindexitem .newsindexitem-text {font-size:var(--font-2);margin:0;}
.content > .news-wrapper .newsindexitem .newsindexitem-text h2 {font-weight:var(--fontMedium);font-size:var(--font-2);margin:0;}
.content > .news-wrapper .newsindexitem .date-author {font-size:var(--font-3);margin-top:.25em;}

/* ORGANIZATION
----------------------------------------------------*/
.persons {display:flex;flex-flow:row wrap;margin:0 -.5em;}
.persons > * {flex-basis:var(--content40W);margin:0 .5em 1em;flex-grow:1;}
.person-wrapper {display:flex;flex-flow:row wrap;position:relative;}
.person-wrapper .editwrapper {position:absolute;z-index:1;}
.person-wrapper > * {margin:.5em;}
.person-wrapper > .image {flex-basis:120px;}
.person-wrapper > .image img {box-shadow:var(--boxShadow);border-radius:10px;}
.person-wrapper > .person {flex-basis:200px;flex-grow:1;}
.person .position {color:var(--red);font-weight:var(--fontMedium);margin-bottom:2em;}
.person .contactinfo {display:flex;flex-flow:column;}

/* SCHOOLGUIDE
----------------------------------------------------*/
.schoolguide > .editwrapper {float:none;}
.content > .schoolguide-wrapper > .schoolguide {}
.schoolguide > .image {
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
}

.paragraph-wrapper {display:flex;flex-flow:row wrap;margin:0 var(--negMarginW) 1em;align-items:center;}
.paragraph-wrapper > * {min-width:var(--minW);margin-left:var(--marginW);margin-right:var(--marginW);margin-bottom:1em;flex-basis:var(--content40W);}
.paragraph-wrapper > .image {flex-grow:1;box-shadow:var(--boxShadow);border-radius:10px;}
.paragraph-wrapper .image img {border-radius:10px;}

.paragraph-wrapper:nth-child(even) > .image {order:2;}
.paragraph-wrapper > .paragraph {flex-grow:3;}
.paragraph > .editwrapper {float:none;}

.paragraph-wrapper.xl > .image {flex-basis:100%;flex-grow:0;min-width:auto;min-height:100px;order:2;}

.paragraph-wrapper.face > .image {flex-basis:120px;flex-grow:0;min-width:auto;min-height:100px;}
.paragraph-wrapper.face:nth-child(even) > .image {order:0;}

/* organgoram */
.schoolguide-wrapper.organogram {display:flex;flex-direction:column-reverse;text-align:center;}

/* SITEMAP
----------------------------------------------------*/
.content > .sitemap {display:flex;flex-flow:row wrap;}
.content > .sitemap > .subsitemap {margin:1em;min-width:200px;flex-grow:1;}
.content > .sitemap li {display:flex;flex-flow:row wrap;}
.content > .sitemap li > .submenu {flex-basis:100%;}

/* TRAINING (EVENTS)
----------------------------------------------------*/
.short-training {background-color:var(--tintBlue);border:solid 1px var(--subBlue);padding:.5em;margin-bottom:.5em;}
.short-training:hover {box-shadow:var(--boxShadow);}
.short-training .date{font-weight:var(--fontSemiBold);}

.training-wrapper {display:flex;flex-flow:row wrap;justify-content:center;margin:0 -1em;}
.training-wrapper>* {flex-basis:var(--asideW);margin:1em;}
.training-wrapper .date {margin-bottom:1em;}
.training-wrapper .date:before {color:var(--red);font-weight:var(--fontSemiBold);flex-basis:100%;}
.training-wrapper .date1:before {content:"Aanvang ";}
.training-wrapper .date2:before {content:"Einde ";}
.training-wrapper .date3:before {content:"Aanmelden vóór ";}
.training-buttons {margin-bottom:2em;}

/* USERLIST/FACES
----------------------------------------------------*/
.users-wrapper .switch {margin-bottom:2em;display:flex;align-items:center;}
.users-wrapper .switch:before {font-size:var(--font3);}
.users-wrapper .switch:after {margin-left:.5em;}
.users-wrapper.faces .switch:after {content:"Telefoonlijst";}
.users-wrapper.userlist .switch:after {content:"Pasfoto's";}

.user-wrapper {position:relative;}
.user-wrapper .editwrapper {position:absolute;top:0;left:0;}

.users {margin-bottom:2em;margin:0 auto 4em;}

.faces .userlistheader {display:none;}
.faces .users {display:flex;flex-flow:row wrap;/*! justify-content: center */}
.faces .user-wrapper {flex-basis:calc(25% - 26px);min-width:260px;padding:10px;margin:2px;
  background-color:var(--tintBlue);border:solid 1px var(--tintBlue);}
.faces .user-wrapper:hover {border:solid 1px var(--blue);}
.faces .user {display:flex;flex-flow:row;align-items: center;}
.faces .user .fn2,
.faces .user .phone,
.faces .user .phone2,
.faces .user .phone3,
.faces .user .email {display:none;}
.user-photo {width:80px;height:80px;min-width:80px;min-height:80px;
  margin:0 10px 0 0;border-radius:50%;overflow:hidden;
  align-self: center;
  background-color:white;
  background-image:url(/images/layout/hca-icon.png);
  background-size:60%;
  background-repeat:no-repeat;
  background-position:50%;
}
.user-photo .image {width:100;height:80px;min-width:80px;min-height:80px;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50%;
}
.faces .user-content {font-size:var(--font-2);}
.faces .user .fn {font-size:var(--font-1);font-weight:var(--fontSemiBold)}
.face .department {font-style:italic;}
.faces .user .function {font-style:italic;font-size:var(--font-2);}

.userlistheader {display:flex;flex-flow:row wrap;
  font-weight:bold;border-bottom:solid 2px;color:var(--blue);}
.userlist .user {padding:3px 0;border-bottom:dotted 1px;}
.userlist .user:hover {background:#eee;}
.userlist .editwrapper {top:-3px;left:-30px;}
.userlist .user-photo,
.userlist .fn,
.userlist .function,
.userlist .email, 
.userlist .phone3 {display:none;}
.userlist .user-content {display:flex;flex-flow:row wrap;}
.userlist .fn2 {flex-basis:250px;}
.userlist .company {flex-basis:250px;flex-grow:1;}
.userlist .phone {flex-basis:180px;}
.userlist .phone2 {flex-basis:180px;}

/* USERMGT
----------------------------------------------------*/
.aclgroupnode {display:flex;flex-flow:row wrap;margin:0 -8px;}
.aclgroupnode > * {margin:0 8px 1em;}

.aclgroupnode > h1 {flex-basis:100%;}
.aclgroupnode > .editwrapper {flex-basis:100%;}
.aclgroupnodeindex {flex-basis:250px;}
.aclgroupnode > .userselection {flex-basis:250px;}
.aclgroupnode > .aclgroup {flex-basis:calc(100% - 500px - 48px);flex-grow:1;}
.aclgroupnode > .user-wrapper {flex-basis:calc(100% - 500px - 50px - 2em);flex-grow:1;display:flex;border:solid 1px;padding:1em;background:#eee;}

.aclgroupnode li {list-style:none;margin:0;}
.aclgroupnode li:before {content:"";}
.userselection input {padding:.5em;}
.selectusers li {display:none;}
.users .user .editwrapper {float:left;}
.users .user > a {display:flex;align-items:center;background-color:#eee;margin-bottom:2px;text-decoration:none;font-size:12px;}
.users .user > a:hover {background:#ddd;}
.users a > * {margin:0 1em 0 0;}
.users a > .lastname {flex-basis:100px;}
.users a > .firstname {flex-basis:100px;}
.users a > .email {flex-basis:200px;}
.users a > .image {flex-basis:30px;width:30px;min-width:30px;height:30px;overflow:hidden;background-size:cover;border-radius:50%;}

.usergroups label input {margin-right:.5em;}

.aclgroupnode .userinfo {display:flex;flex-flow:column;}
.aclgroupnode .userinfo .field {order:9;}
.aclgroupnode .userinfo .field.gender {display:none;}
.aclgroupnode .userinfo .field.image {order:1;width:100px;height:100px;overflow:hidden;border-radius:50%;}
.aclgroupnode .userinfo .field.name {order:1;}
.aclgroupnode .userinfo .field.nickname {order:1;}
.aclgroupnode .userinfo .field.function {order:1;}
.aclgroupnode .userinfo .field.department {order:1;}
.aclgroupnode .userinfo .field.phone {order:2;}
.aclgroupnode .userinfo .field.phone2 {order:3;}
.aclgroupnode .userinfo .field.phone3 {order:3;}
.aclgroupnode .userinfo .field.email {order:4;}

/* VACANCIES
----------------------------------------------------*/
.vacancybankgroup > h1 {text-align:center;}
.vacancybankgroup > .description {width:75%;margin:2em auto;font-size:var(--font2);}

.vacancybank-wrapper {display:flex;flex-flow:row wrap;align-items:flex-start}
.vacancybank-wrapper nav {flex-basis:100%;margin-bottom:2em;}
.vacancybank-wrapper .vacancybank {flex-basis:var(--asideW);flex-grow:1;}
.vacancybank-wrapper .vacanciesindex {flex-basis:var(--asideW);flex-grow:1;}
.vacancybank > div {margin-bottom:1em;}
.vacanciebanksindex {display:flex;flex-flow:row wrap;justify-content:center;margin:0 var(--negMarginW);}
.vacanciebanksindex > * {flex-basis:var(--halfCardW);margin:var(--marginW);padding:1em;border-radius:8px;
  background-color:var(--tintBlue);box-shadow:var(--boxShadow);position:relative;
  display:flex;flex-flow:column;
}
.shortvacancybank-wrapper {padding-top:1.5em;}
.shortvacancybank-wrapper .editwrapper {position:absolute;top:10px;left:10px;}
.shortvacancybank-wrapper .count {position:absolute;top:10px;right:10px;}
.shortvacancybank {height:100%;display:flex;align-items: flex-end;}
.shortvacancybank .image {text-align:center;}
.shortvacancybank .image img {}

.vacanciesindex {display:flex;flex-flow:row wrap;justify-content:center;margin:0 var(--negMarginW);}
.vacanciesindex > * {flex-basis:var(--cardW);margin:var(--marginW);padding:1em;border-radius:8px;
  ;box-shadow:var(--boxShadow);}
.shortvacancy-wrapper {display:flex;flex-flow:column;position:relative;background-color:white;}
.shortvacancy-wrapper > .editwrapper {position:absolute;top:10px;left:10px;}
.shortvacancy .editwrapper {position:absolute;top:10px;right:10px;}
.shortvacancy {flex-grow:1;color:var(--purple);
  display:flex;flex-flow:column;}
.shortvacancy h2 {font-size:var(--font5);font-weight:var(--fontMedium);color:var(--red);line-height:1.25;}
.shortvacancy:hover h2 {text-decoration:underline 2px;text-underline-offset: 3px;}
.shortvacancy .oneliner {flex-grow:1;
  margin:1em 0;font-weight:var(--fontMedium);}
.shortvacancy .cta {margin-bottom:1em;align-self:center;}
.shortvacancy-wrapper .logo {height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:.25em;}
.shortvacancy-wrapper .logo img {max-width:150px;}
.shortvacancy-wrapper .vacancy-image {height:200px;background-size:100% 100%;
transition: .5s background-size .0s;margin:0 -1em;}
.shortvacancy-wrapper:hover .vacancy-image {background-size:120% 120%;transition: .5s background-size .0s;}


.vacancy-wrapper {display:flex;flex-flow:row wrap;align-items:flex-start}
.vacancy-wrapper nav {flex-basis:100%;margin-bottom:2em;}
.vacancy-wrapper .vacancybank {flex-basis:var(--asideW);padding:1em;margin-right:2em;background-color:var(--tintBlue)}
.vacancy-wrapper .vacancybank .text {font-size:var(--font-1);}

.vacancy {flex-basis:var(--asideW);flex-grow:1;}
.vacancy > .image {margin-bottom:1em;}
.vacancy .fte {font-size:var(--font3);font-weight:var(--fontMedium)}
.vacancy .fte:before {content:"WTF: ";}

/* VIDEO
----------------------------------------------------*/
.video-wrapper {}

/* XLOCATIONS
----------------------------------------------------*/
.xlocations {display:flex;flex-flow:row wrap;margin:0 -1em;}
.xlocations > * {flex-basis:250px;margin:1em;}
.xlocation-wrapper {display:flex;flex-flow:column;align-items:center;text-align:center;
  padding:1em;border:solid 1px var(--blue);}
.xlocations-wrapper h2 {flex-grow:1;}
.xlocation-wrapper h2{font-size:var(--font2);}
.xlocation-wrapper .image {max-width:100px;}