* {font-size:100%;margin:0;padding:0;}

/* STRUCURE */
html{font: 15px /1.5 'Muli', sans-serif;color:#000;}
html, body {height:100%;}

#container-wrapper {display:flex;flex-flow:column;justify-content:space-between;min-height:100%}
#header-wrapper {box-shadow:0 0 15px #000;position:fixed;width:100%;height:110px;background-color:#fff;}

#header,
#menu,
#footer,
#content > .editpiclist,
#content > .homepage > .homesection-wrapper > div,
#content > .ps-form {width:calc(100% - 2em);max-width:1200px;margin:0 auto;}
#content > .ps-form {padding-bottom:2em;}
#content > .actionform {width:calc(100% - 2em);max-width:500px;margin:0 auto;padding-bottom:2em;}
#content > .emailform {width:calc(100% - 2em);max-width:800px;margin:0 auto;padding-bottom:2em;}
#content > .schoolguide {width:calc(100% - 2em);max-width:1600px;margin:0 auto;}

#header-wrapper {position:fixed;height:110px;z-index:4;}
#header {height:100%;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;
  background-color:#fff;position:relative;}
#logo {width:20%;min-width:120px;max-width:180px;position:absolute;left:0;top:1em;}
#logo img {max-width:100%}
#payoff {font-family:'Caveat',cursive;font-size:40px;font-weight:400;flex-grow:1;text-align:center;margin:16px 0 0 150px;line-height:32px;}

#headerlinks {margin-bottom:2em;position:absolute;top:0;right:0;}
#headerlinks a {display:block;font-variant:small-caps;background-repeat:no-repeat;background-size: auto 14px;background-position:right 50%;padding:.5em 1em;}
#headerlinks a.login {background-image:url(/images/layout/v2.0/voz-lock.png)}
#headerlinks a.logout {background-image:url(/images/layout/v2.0/voz-exit.png)}
#headerlinks a.maintenance {background-image:url(/images/layout/v2.0/voz-gear.png)}
#headerlinks > ul.menu{display:flex;flex-flow:column;justify-content:space-between;align-items:flex-end;list-style:none;}
#headerlinks li {list-style:none;}
#headerlinks li > div {position:absolute;right:0;background:#eee;padding:.5em 1em;display:none;}
#headerlinks li:hover {background-color:#eee}
#headerlinks li:hover > div {display:block;}
#headerlinks .level2 a {text-align:center;border-bottom:solid 1px #fff;}

#menu-wrapper {background:orange;width:100%;position:fixed;top:110px;z-index:3;padding:1em 0;}
#menu > ul.menu {display:flex;flex-flow:row wrap;justify-content:center;list-style:none;}
#menu > ul.menu > li {margin:0 1em;}
#menu a {text-transform:uppercase;font-weight:700;color:#000;display:block;padding:0 .5em 0;border-top:solid 3px orange;}
#menu a:hover ,#menu a.active {border-color:#000;}

#banner {width:100%;height:430px;position:fixed;top:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background-size: cover;
  background-position:50% 110px;
  background-repeat:no-repeat; 
}
#banner .text {display:flex;flex-flow:row;width:100%;height:calc(100% - 2em);padding:1em 2em;align-items:flex-end;background:;justify-content:center;text-align:center;
  font-family:'Poppins', sans-serif;font-size:36px;font-weight:200;color:#fff;text-shadow:0px 0px 4px #000;
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#40000000',GradientType=0 ); /* IE6-9 */}

#content-wrapper {margin-top:430px;min-height:400px;position:relative;z-index:2;
  box-shadow:0 0 15px #000;background-color:#fff;}
#content {order:2;}

#footer-wrapper {background:#000;padding:2em 0;}
#footerlinks ul.menu {display:flex;flex-flow:row wrap;list-style:none;justify-content:center;}
#footerlinks li.level1 {margin:1em;}
#footerlinks a {color:#fff;border-bottom:dotted 1px;}
#footerlinks a:hover {border-bottom:solid 1px;}
#footerlinks a.linkedin {width:26px;height:26px;background-color:#0077B5;
  border:none;border-radius:2px;font-weight:700;font-size:20px;
  display:flex;align-items:center;justify-content:center;}

#footer .text {text-align:center;color:#fff;margin-bottom:2em;}

/* DEFAULTS */
h1,h2,h3,h4,h5,h6 {font-family:'Poppins', sans-serif;margin-bottom:1em;}
h1 {font-size:40px;text-align:center;font-weight:200;}
h2 {font-size:20px;text-align:center;font-weight:400;}
a {text-decoration:none;color:#000;}
a:hover {}
a.popup {}
a img {border:none;}
:focus {outline:none;}
.image {line-height:1;}
.image img, a img {max-width:100%;max-height:100%;display:block;margin:0 auto;}

.sharelink {margin:1px;}

#content button {border-radius:0;background-color:#000;color:#fff;;}
#content button:hover {background-color:#666;}
#content ul, 
#content ol {margin: 0 2em;}
#content ul ul, 
#content ol ol {margin: 0 1em;}
#content li,
#content .relatedlink {clear:left;}
#content p,#sidebar p {margin: .5em 0;}
#content strong {font-weight:bold;}
#content blockquote {font-size:12px;}
#content table {width:100%;}
#content th {text-align:left;}
#content td {vertical-align:top;}

#content .relatedlinks {list-style:none;margin:0}
#content .relatedlinks li {overflow:auto;}
#content .relatedlinks .imagelink {border:none;}
#content .text {margin-bottom:1em;}
#content .alert {margin-bottom:1em;color:red;}

#content #message {width:448px;position:absolute;left:240px;top:118px;padding:10px 5px;text-align:center;font-size:18px;color:#323232;border:solid 1px #CF9B00;background:#FFDD48 url(/images/layout/attention.png) no-repeat 15px 50%;}

#content > #error {text-align:center;}

/* (EMAIL)FORMS
--------------------------------------------------*/
#content .fieldlabel {font-weight:normal;}
#content .emailform {display:flex;flex-flow:row wrap;justify-content:space-between;}
#content .emailform > h1, 
#content .emailform > .editwrapper {flex-basis:100%;}
#content .emailform > .emailform-text {flex-basis:calc(50% - 1em);}
#content .emailform > .emailform-form {flex-basis:calc(50% - 1em);}
#content .emailform p.comment {display:none;}
#content .emailform .mandatory {color:#fff;font-size:0;font-weight:normal;}
#content .emailform .mandatory:after {content:"[verplicht]";color:#000;font-size:12px;position:relative;top:-4px;margin-left:.5em;color:#D43A3E;}
#content .emailform .fieldlabel,
#content .emailform .formfield {flex-basis:100%;}
#content #ps-cgh {border-color:#ccc;background-color:#f6f6f6;color:inherit;font-size:100%;}
#content #ps-cgh .formfield {flex-basis:0}
input#titc {width:3em;margin:0 auto;}

/* EDITPICLIST
--------------------------------------------------*/

.editpiclist .pictures {display:flex;flex-flow:row wrap;margin:0 -1em;}
.editpiclist .pictures .picture {flex-basis:calc(50% - 4em);margin:1em;padding:1em;background-color:#eee;}
.editpiclist .pictures {display:flex;flex-flow:row wrap;}

/* HOMEPAGE
--------------------------------------------------*/
.homesection-wrapper {padding:2em 1em}
.homesection {position:relative;}

/* home-schoolguide */
.homesection > .schoolguide > .editwrapper {position:absolute;top:0;left:0;}
.homesection > .schoolguide {display:flex;flex-flow:row wrap;margin:0 -.5em;align-items:center;}
.homesection > .schoolguide > * {margin:.5em;flex-basis:300px;flex-grow:1;}
.homesection > .schoolguide > h1 {order:1;}
.homesection > .schoolguide > .intro {order:3}
.homesection > .schoolguide > .image {order:2;}

/* home-about Inover */
.homesection-wrapper.aboutinover {background:#eee;}
.homesection-wrapper.aboutinover h1 {text-align:left;}

/* home-about Frank */
.homesection-wrapper.aboutfrank {background:#fff;}
.aboutfrank .schoolguide > h1 {order:1;}
.aboutfrank .schoolguide > .intro {order:2}
.aboutfrank .schoolguide > .image {order:3;}
.homesection-wrapper.aboutfrank .image img {border-radius:50%;}

/* home-about Services */
.homesection-wrapper.services {background:#444;}
.homesection-wrapper.services h1 {color:#fff;}
#content .homesection-wrapper.services .homesection {max-width:100%;}
.services .paragraphs {order:4;flex-basis:100%;margin:0;
  display:flex;flex-flow:row wrap;justify-content:center;}
.services .paragraph-wrapper {
  flex-basis:300px;flex-grow:1;max-width:500px;margin:.5em;
  background-color:#eee;padding:1em;
  display:flex;flex-flow:column;justify-content:space-between;}
.services h2 {order:2;}
.services .paragraph {order:1;display:flex;flex-flow:column;
  justify-content:space-between;}
.services .paragraph .image {order:1;height:80px;margin-bottom:1em;
  display:flex;align-items:center;}
.services .paragraph .text {order:2;}


/* home-emailform */
.homesection-wrapper.emailform {background:#f5f5f5;}
.homesection-wrapper.emailform .intro.text {text-align:right;}
#content .homesection > .emailform {position:relative;}
#content .homesection > .emailform > .editwrapper {position:absolute;top:0;left:0;}
#content .homesection-wrapper.emailform > .homesection > .emailform {justify-content:center;}
#content .homesection-wrapper.emailform > .homesection > .emailform >  div {flex-basis: 40%;margin:0 1em;flex-grow:0}


/* INFORMATION
--------------------------------------------------*/
#content > .information {text-align:center;}

/* LIBRARY
--------------------------------------------------*/
.library .folders {display:flex;flex-flow:row wrap;justify-content:center;margin:0 -1em;}
.library .folder {flex-basis:calc((100% / 2) - 2em);margin:1em;}
.library .embedcode {display:flex;flex-flow:row wrap;}
.library .embedcode h4 {flex-basis:100%;margin:0;font-style:italic;}
.library .embedcode textarea {width:300px;height:2em;flex-grow:1;}
span.doctype {display:inline-block;width:2em;text-align:center;padding:0 .5em;margin-right:.5em;background-color:#666;color:#fff;}
span.doctype.doc {background-color:blue;}
span.doctype.pdf {background-color:red;}

/* LINKOVERVIEW
--------------------------------------------------*/
.linkoverview .navigations {display:flex;flex-flow:row wrap;justify-content:space-between;margin:0 -.5em;}
.linkoverview .navigation {flex-basis:calc((100% / 5) - 1em);margin:.5em .5em 2em;}
.linkoverview .image img {border:solid 1px #eee;}

/* LOGIN
--------------------------------------------------*/
#content > .loginpage {margin-top:0;
  display:flex;flex-flow:row wrap;justify-content:space-between;}
.loginpage > div {flex-basis:calc(((100% - 3em) / 2) - 3em);padding:2em 2em 6em;
  background-color:#EFFAFF;position:relative;}
#content > .loginpage .formelement {display:block;}
.loginpage .fieldlabel,.loginpage .formfield {width:100%!important;}

/* NEWS
--------------------------------------------------*/
.newsindex-wrapper h1:first-letter {text-transform:uppercase;}
.newsindex h1 {flex-basis:100%;}
.newsindex h1 span {flex-basis:100%;color:#009FE3;font-size:75%}
.newsindex h1 span:before {content:" // ";}
.columns .newsindex > .text {color:#d43a3e;font-size:125%;text-align:center;}
.shortnewsitems {display:flex;flex-flow:row wrap;margin:0 -1em;}
.shortnewsitem-wrapper {flex-basis:calc((100% / 3) - 2em);margin:1em;position:relative;display:flex;}
.shortnewsitem-wrapper > .editwrapper {position:absolute;top:0;left:0;}
.shortnewsitem {background:#e3f5fc;display:flex;flex-flow:column;justify-content:space-between;}
.shortnewsitem {width:100%;} /* IE */
.shortnewsitem h2,.shortnewsitem .more {padding:12px;text-align:center;}
.shortnewsitem .image {overflow:hidden;}
.shortnewsitem .date {display:flex;justify-content:center;}
.shortnewsitem .date > span {margin:0 .25em;} 
.newsitem {display:flex;flex-flow:row wrap;justify-content:space-between;position:relative;}
.newsitem .sharethis {margin-top:2em;}
.newsitem .editwrapper {position:absolute;}
.newsitem > .image {flex-basis:calc(50% - .5em);}
.newsitem-intro {flex-basis:calc(50% - .5em);}
.newsitem h1,
.newsitem h2 {flex-basis:100%;}
.newsitem h2 {color:#d43a3e;}
.newsitem .intro.text {font-size:14px;}
.newsitem .date {font-size:14px;font-style:italic;}

/* NEWSLETTER */
.enewsletter > * {background:#eee;padding:2em 1em 1em;display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1em;}
.enewsletter  h2 {text-align:left}
.enewsletter button {width:200px;}
.enewsletter > form > div {width:calc(100% - 250px);}
.enewsletter .senddates {display:flex;margin:0 -.5em}
.enewsletter .senddates > * {margin:0 .5em;background:#ddd;padding:.5em;flex-grow:1;}
.enewsletter textarea {border:solid 1px #ccc;width:100%;padding:.5em;}

/* SCHOOLGUIDE
--------------------------------------------------*/
#content > .schoolguide {position:relative;}
#content > .schoolguide > .editwrapper {position:absolute;top:0;left:0;}
.schoolguide.references .paragraphs {display:flex;flex-flow:row wrap;margin:0 -1em;justify-content:center;}
.schoolguide.references .paragraph-wrapper {flex-basis:300px;flex-grow:1;margin:1em;
  border:solid 1px #eee;padding:1em;box-shadow:0 0 15px #eee;position:relative;}
.schoolguide.references .paragraph-wrapper .editwrapper {position:absolute;top:0;left:0;}
.schoolguide.references .paragraph-wrapper > h2 {min-height:3em;}
.schoolguide.references .paragraph .image {height:100px;display:flex;align-items:center;margin-bottom:1em;}


/* SITEMAP
--------------------------------------------------*/
.sitemap {display:flex;flex-flow:row wrap;justify-content:space-between;margin:1em -1em;}
.sub-sitemap {margin:0 1em 1em;background:#eee;padding:1em;flex-grow:1;}
.sub-sitemap h1:first-letter {text-transform:uppercase;}

/* SIGNUP
--------------------------------------------------*/


/* TAGS
--------------------------------------------------*/


/* USER(MGT)
--------------------------------------------------*/


/* VIDEO
--------------------------------------------------*/
.ps-video {display:inline-block;}
.vjs-poster {background-size:cover!important}