/*
		Author: Primosite
		CBS Nije-Kroost
		site145
*/

@import "nijekroost-vars-v1.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(--txt);
  background-color:var(--bg);
}

#main-wrapper {
  display:flex;flex-flow:column;
  padding-top:var(--headerH);min-height:calc(100% - 150px);
  /*! background-image:url(/images/layout/bg.png); */
  background-repeat:no-repeat;
  background-size:60%;
  background-position:60% 15vh;
}

#main-bg {display: flex;justify-content: center;height:var(--bannerH);
  background-size:cover;background-position:50%;
}

#content-wrapper {
  flex-grow:1;z-index:1;padding-bottom:175px;position:relative;
  background-image:url(/images/layout/nijekroost-footer-top.png);
  background-position:50% bottom;
  background-size:auto 200px;
  background-repeat:repeat-x;
}
.hasbg #content-wrapper:before  {content: " ";box-shadow: var(--boxShadowDark);
    position:absolute;top:0;left:0;
    width: 100vw;
    height: .5rem;
    background: linear-gradient(
        to right,
        #2563EB 0% 25%,
        #22C55E 25% 50%,
        #FACC15 50% 75%,
        #EF4444 75% 100%
    );
}
#content-wrapper:not(.homepage){padding-top:1em;}

#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;justify-content:space-between;align-items:flex-end;position:relative;z-index:3}
#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 {margin-top:1rem;}
#logo img {height:var(--logoH);}
#nav {flex-basis:calc(100% - 320px);}

.header .organization {position:absolute;top:.5em;right:0;font-size:var(--font-1);}
.header .organization > * {flex-basis:auto;margin:0 1em 1em;}

#footer-wrapper {
  padding:2rem 0;z-index:1;
  background-color:var(--red);
  display:flex;flex-flow:row wrap;
}

.footer {display:flex;flex-flow:row wrap;}
.footer * {color:white;}
.footer > .organization {flex-basis:400px;}
.footer > .text-wrapper {flex-grow:1;display:flex;flex-flow:column;}
.footer > .followus-wrapper {align-self: flex-end;margin-top:2em;}
.footer .text {flex-grow:1;}
.footerlinks {margin-top:2em;}

#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 > .map-wrapper,
.content > .psform-wrapper,
.content > .users-wrapper,
.content > .vacancies {width:var(--mainW);max-width:var(--maxW);margin:1em auto;}

.content > .agenda-wrapper,
.content > .checkout-wrapper,
.content > .emailform-wrapper,
.content > .error-wrapper,
.content > .html,
.content > .information,
.content > .library-wrapper,
.content > .linkoverview,
.content > .organization-wrapper,
.content > .organizations-wrapper,
.content > .schoolguide-wrapper,
.content > .sitemap,
.content > .siteparameters,
.content > .taggroup-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;
  background-color:white;padding:1em;box-shadow:var(--boxShadowDark);border-radius:1rem;}
.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/nijekroost-logo.png);
  background-size:30%;
  background-repeat:no-repeat;
  background-position:50% 40px;
  background-color:#fff;
}
body > .signin-wrapper > .signin,
body > .passwordreminder-wrapper > .passwordreminder {padding:150px 50px 50px;}

#ps-editswitch {left:50%;}

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

#nav a {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}


/* site-nav */
#site-nav-wrapper {order:4;pointer-events:none;position:relative;z-index:1;flex-basis:400px;flex-grow;margin:0 0 0 1em;}
#site-nav {pointer-events:auto;}
#site-nav li {list-style:none;}
#site-nav ul.level1 {display:flex;flex-flow:row wrap;justify-content:flex-start;}
#site-nav li.level1 {margin: 1em .25em 0;padding:0 1em .5em;position:relative;}
#site-nav a {display:inline-block;text-decoration:none;}
#site-nav a.level1 {font-weight:var(--fontMedium);}
#site-nav li.level2 {margin-top:.5em;}
#site-nav li.level2 a {white-space:nowrap;}

#footer-wrapper a[class^="icon-"],
#footer-wrapper a[class*=" icon-"] {display:inline-flex;align-items:baseline;text-decoration:none!important;}
#footer-wrapper a[class^="icon-"]:before,
#footer-wrapper a[class*=" icon-"]:before {color:white;}

#footer-wrapper .followus {background:none;}
#footer-wrapper .followus-wrapper {flex-direction:column;}

#footer-wrapper a.cbozeist {display:flex;flex-flow:column;}
#footer-wrapper a.cbozeist:before {display:none;}
#footer-wrapper a.cbozeist .image {border-radius:3px;
  width:80px;height:40px;background-color:white;background-size:80%;}
#footer-wrapper a.cbozeist .navtitle {font-size:var(--font-2)}

/* DEFAULTS
----------------------------------------------------*/
/* headers */
h1,h2,h3,h4 {color:var(--blue);font-weight:var(--fontBold);hyphens:auto;}
h1 {font-size:var(--font15);margin-bottom:.5em;}
h2 {font-size:var(--font10);}
h3 {font-size:var(--font5);}
h4 {font-size:var(--font3);}
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;text-underline-offset:.3em;}
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;
}

.content a {color:var(--blue);font-weight:var(--fontBold);}
a.icon-link {display:inline-block;}
a.doclink {display:inline-block;font-weight:var(--fontBold);}
a.doclink:before {}
a.doclink[href$=".pdf"]:before {color:var(--red);}
a.doclink[href$=".doc"]:before {color:var(--blue);}
a.doclink[href$=".docx"]:before {color:var(--blue);}
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)}

div.cta {
  width:var(--homeCtaWH);height:var(--homeCtaWH);position:relative;
  font-size:var(--font1);font-weight:var(--fontBlack);
  border:solid 5px var(--tintBlue);border-radius:50%;
  text-align:center;padding:.5rem;margin:.5vw;
  transition: .3s background-size .0s;
  color:white
}
div.cta img {width:92%;margin-top:4%;}
.cta .title {position:absolute;bottom:0;left:0;
  width:100%;color:white;font-size:var(--font3);
  text-align:center;text-shadow:3px 3px 3px black;}

div.cta:hover {background-size:65%; transition: .3s background-size .0s;}
div.cta.blauw {background-color:var(--blue);}


.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(--blue);}

[class*=" icon-pdf"]:before {color:red;}
[class*=" icon-doc"]:before {color:blue;}

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

/* kanjer caps */
.cap {display:flex;flex-flow:row wrap;align-items: baseline;}
.cap:before {content:" ";width:1em;height:1em;margin-right:.5em;box-shadow:var(--boxShadowDark);border-radius:2em}
.cap.black:before {background-color:black;}
.cap.red:before {background-color:var(--red);}
.cap.white:before {background-color:white;}
.cap.yellow:before {background-color:var(--yellow);}

.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 {font-weight:var(--fontBlack);}


/* 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(--blue);
  font-size:150%;
  line-height:0;
  font-weight: var(--fontBold);
  top:12px;
  left:-20px
}
.content li ul li:before{
  position:absolute;
  content: "\2022";  /* CSS Code/unicode for a bullet */
  color: var(--blue);
  font-size:100%;
  line-height:0;
  font-weight: var(--fontBold);
  top:12px;
  left:-15px
}

.image {background-size:cover;background-position:50%;background-repeat:no-repeat;border-radius:.5em;overflow:hidden;}
.image img {display:block;max-width:100%;max-height:100%;margin:0 auto;line-height:1;}
.content p, .content .text {margin-bottom:1em;}
button:not(.vjs-button):not(.tox-tbtn),
button.submit,
button[type=submit] {background-color:var(--blue);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(--blue);}
button.cancel {background-color:var(--tintGrey);color:var(--grey);}
button.cancel:hover {background-color:var(--grey);color:white;}

.editwrapper {float:none;}
.grecaptcha-branding {margin:0;}
.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(--red);color:#fff}
#content-wrapper .video-js:hover button.vjs-big-play-button {font-size:500%;border-radius:2em;
  background:var(--red);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:auto;border-collapse:collapse;}
.content thead {border-bottom:solid 4px;}
.content tr:nth-of-type(even){background-color:var(--tintGrey);}
.content th {text-align:left;font-weight:var(--fontBold);padding:.25em;}
.content td {vertical-align:top;padding:.25em;}
.content td p {margin-bottom:0!important;}

.content .sharelinks {justify-content:center;margin-top:2em;}
.content .sharelink {margin-right:1em;border-radius:2px;}
.content .sharelink:hover {}

/* contact data */
.contactdata-wrapper .contactdata {display:flex;flex-flow:row wrap;}
.contactdata > * {flex-basis:100%;white-space:nowrap;}
.contactdata .name {font-size:var(--font4);font-weight:var(--fontBold);color:var(--blue);
  margin-bottom:1em;}
.contactdata .zip {flex-basis:60px;margin-right:.5em;margin-bottom:1em;}
.contactdata .city {flex-basis:60px;}
.contactdata .coc {margin-top:1em;}

/* 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;margin-bottom:1em;}
.organization .country {margin-bottom:20px;}
.footer .organization * {color:#fff;}

/* AGENDA
----------------------------------------------------*/
.agenda-wrapper {padding-bottom: 2rem;}
.agendaitem {display:flex;flex-flow:row wrap;align-items:baseline;}
.agendaitem:not(.current) {border-bottom:dotted 1px var(--blue);}
.agendaitem.current {background-color:var(--blue);padding:.25rem;color:white;font-weight:var(--fontBold);margin-bottom:2rem;}
.agendaitem.current h2 {color:white;}
.agendaitem .editwrapper {margin-right:.5em;}
.agendaitem h2 {font-size:var(--font0);flex-basis:250px;margin:0 .5em 0 0;}
.agendaitem .dates {display:flex;flex-flow:row wrap;}
.agendaitem .enddate {margin-left:.5em;}
.agendaitem .enddate:before {
  content:"t/m";color:var(--blue);
  margin-right:.5em;font-weight:var(--fontBold);
}

/* FORMS
----------------------------------------------------*/
.psform-wrapper > form {padding:1rem;}

form.emailform {background:none;}
form label,.fieldlabel {font-weight:var(--fontMedium);color:var(--blue);}
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);}
.emailform-body > .emailform-form {flex-basis:35%;flex-grow:4;margin:1em;min-width:var(--asideW);}
.emailform-text .image {margin-bottom:2rem;}
#content-wrapper form.emailform input,
#content-wrapper form.emailform textarea {border-radius:3px;border:none;border:solid 1px #ccc;}
#content-wrapper form.emailform input:focus,
#content-wrapper form.emailform textarea:focus {background-color:#f8f8f8}

.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:1em;}
.xtoaddress {align-items: baseline!important;}
.xtoaddress:not(.last) {margin-bottom:.25em!important;}
.xtoaddress label {flex-basis:100px;}
.xtoaddress input {flex-grow: 0;}

.emailform .formelement.datepicker,
.emailform .formelement.telefoon_overdag,
.emailform .formelement.telefoon_mobiel{flex-basis:40%;}
.emailform .formelement.telefoon_overdag{margin-right:.5em;}
.emailform input.datepicker {width:100%;text-align:center;}
.emailform .formelement.geboortedatum {margin-right:.5em;}
.emailform .formelement.postcode {flex-basis:20%;margin-right:.5em;}
.emailform .formelement.plaats {flex-basis:70%;}

/* 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;}
.folder {padding-bottom:2em;}

.folder-item-wrapper {}
.folder-item {margin-bottom:2rem;}
.folder-item:before {color:var(--red);font-size:var(--font5);flex-basis:25px;}
.folder-item .text {margin:0;}

.methodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
  margin-bottom:2rem;
}

.methode {
    padding: 1rem;
    border-radius: 10px;
  background-color:white;
  box-shadow:var(--boxShadow);
}

.methode .groep {font-weight:var(--fontBold);}
.methode h3 {
    margin-top: 0;
}

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

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

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

/* homepage */
#content-wrapper.homepage {
  background-color:var(--tintBlue);
}

.multiple.homepage {display:flex;flex-flow:row wrap;justify-content:center;}
.multiple.homepage > * {margin-bottom:2em;min-width:var(--minW);}
.multiple.homepage h1 {margin-top:1em;border-radius:.5em;
  font-size:var(--font20);font-weight:var(--fontBlack);}

.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;position:relative;z-index:1;}
.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 1em;}

.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);padding:2rem 0 3rem;
}
.multiple-item.video {width:var(--contentW);max-width:var(--maxW);margin:0 auto;padding:0 0 2em 0;}
.multiple.homepage .video-wrapper {margin:0 auto;position:relative;
  display:flex;flex-flow:row wrap;align-items:center;justify-content:center;}
.multiple.homepage .video-wrapper h1 {hyphens:none;}
.multiple.homepage .video-wrapper .editwrapper {position:absolute;top:0;z-index:1;}
.multiple.homepage .video-wrapper > *:not(.vidplayer) {flex-basis:var(--content40W);flex-grow:1;margin:1em;}
.multiple.homepage .video-text-wrapper * {color:white;}

/* ORGANIZATION
----------------------------------------------------*/
/* person */
.persons {display:flex;flex-flow:row wrap;margin:2rem 0;justify-content:center;}
.persons > * {flex-basis:var(--cardW);margin:0 .5em 1em;padding:1em;
  border-radius:.5em;background-color:white;box-shadow:var(--boxShadow);}
.person-wrapper {position:relative;}
.person-wrapper .editwrapper {position:absolute;}
.person {display:flex;flex-flow:column;align-items:center;text-align:center;height:100%;}
.person > * {order:9;}
.person h2 {font-size:var(--font2);hyphens:none;}
.person .image-wrapper {
  width:150px;height:180px;margin-bottom:2em;
  order:1;border-radius:50%;
  background-image:url(/images/layout/avatar.svg);
  background-repeat:no-repeat;
  background-position: 50%;
}
.person .image {
  width:100%;height:100%;border-radius:1rem;
  background-position:top;
  background-size:cover;
}
.person .position {font-style:italic;}

/* person tags */
.person-tags {flex-grow:1;}
.person-tagtype {display:flex;flex-flow:row wrap;justify-content:center;}
.person-tagtype > * {margin:.25rem;}
.person-tagtype.function .person-tag {font-weight:var(--fontBold);font-style:italic;hyphens:auto;}
.person-tagtype.group .person-tag {font-size:var(--font1);font-weight:var(--fontBold);text-transform: capitalize;
  background-color:var(--blue);padding:0 .5em;color:white;border-radius:.25em;}
.person-tagtype.weekday .person-tag {font-size:var(--font-2);
  background-color:var(--red);padding:0 .5em;color:white;border-radius:.25em;}

/* contactinfo */
.person .contactinfo {margin-top:1rem;font-size:var(--font-2);}

/* SCHOOLGUIDE
----------------------------------------------------*/
.content > .schoolguide-wrapper > .schoolguide {display:flex;flex-flow:row wrap;justify-content:center;margin: 0 var(--negMarginW);align-items:flex-start;}
.content > .schoolguide-wrapper > .schoolguide > * {flex-grow:1;margin:var(--marginW);}
.content > .schoolguide-wrapper > .schoolguide > .image {flex-basis:30%;min-width:var(--minW);}
.content > .schoolguide-wrapper > .schoolguide > .schoolguide-body {flex-basis:60%;min-width:var(--minW);}

.schoolguide .image {box-shadow:var(--boxShadow);}

.content > .schoolguide-wrapper > .paragraphs {flex-basis:100%;margin:1em 0;}
.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:flex-start;}
.paragraph-wrapper > * {min-width:var(--minW);margin-left:var(--marginW);margin-right:var(--marginW);margin-bottom:1em;flex-basis:var(--content40W);}
.paragraph-wrapper > .paragraphs {flex-basis:100%;}
.paragraph-wrapper > .image {flex-grow:1;}

.paragraph-wrapper:nth-child(odd) > .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;}

.schoolguide-wrapper.flex .paragraphs {display:flex;flex-flow:row wrap;justify-content:center;}
.paragraph-wrapper.fw {flex-basis:100%;}
.paragraph-wrapper.fw table {width:100%!important;}

.schoolguide .documents .document {display:flex;}

/* schoolguide-index */
.schoolguide-index {display:flex;flex-flow:row wrap;margin:0 -.5em;}
.schoolguide-index > a {flex-grow:1;flex-basis:150px;margin:.5em;padding:.5em .5em;border:solid 1px;border-radius:2em;background-color:white;text-decoration:none;
  display:flex;align-items: center;justify-content: center;text-align: center;font-size:var(--font-1)
}
.schoolguide-index > a:hover {
  cursor:pointer;border-color:var(--red);background-color:var(--red);color:white;}

/* 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%;}

/* TAGGROUP
----------------------------------------------------*/
.taggroup-wrapper .tagtypes {display:flex;flex-flow:row wrap;}
.taggroup-wrapper .tagtypes > * {margin:1rem;}
.taggroup-wrapper .tagvalue {display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;}

/* 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;}

/* VIDEO
----------------------------------------------------*/
.vidplayer {display:flex;flex-direction:column;align-items:center;}
.video-wrapper video {max-width:100%;}
.video-wrapper .caption {align-self:flex-end;color:var(--grey);
  font-size:var(--font-2);font-style:italic;text-align:right;}