/* CSS-reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, i, center, dl, dt, dd, aul, ali, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }

/* Global */
body { font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 20px; font-weight: 400; margin-bottom: 8px; max-width: 1000px; margin: 0 auto; -webkit-text-size-adjust: 100%; }
.wrapper { display: block; margin: 0 auto; position: relative; width: auto; padding: 0; clear: both;; margin: 15px }
    .wrapper.nomargin { margin: 0 15px }
    .wrapper.notopmargin { margin-top: 0 }
    .wrapper.extrabottommargin {margin-bottom:25px }
    .wrapper.nopadding { padding: 0 }
    .wrapper.nomargin > .subwrapper { padding: 0 }
.subwrapper { width: 100%; margin: 0 auto; overflow: hidden; padding: 0 0 20px 0 }
h1 { font-family: 'Khand', sans-serif; font-size: 37px; text-align: center; margin: 40px 0 0; }
h2, h3 { font-family: 'Open Sans', sans-serif; font-weight: 300 }
h2 { font-size: 25px; margin-bottom: 10px; line-height: 30px; text-align: center; width: 100% }
    h2 strong { font-weight: 700 }
h3 { font-size: 25px; margin-bottom: 15px }
.bigtitle h3 { font-size: 25px; text-transform: uppercase; margin-bottom: 20px; line-height: 30px }
img { width: 100%; margin-bottom: -5px }
@media only screen and (max-width: 600px) {
    .wrapper.nomargin,.wrapper.textphoto { margin:0}
  
}
/* color site*/
body { color:#63a5dc}
a { text-decoration: none; color: #63a5dc; }
    a:hover { color: #999; }
.headerbar, .footerbot { background: #afca0b }
.menulink li { border-color: #1ab0e3; }

@media only screen and (max-width: 950px) {
    .topbar #nav > ul > li.active, .topbar #nav > ul > li:hover { background-color: #01a7e1; }
    .topbar #nav ul li { background: #2a5f95;color: #527486; }
}

/* color schools*/

.backspoz h2, .backspoz.team { background: #01a7e1; color: #fff }
.backwegwijzer h2 { background: #93C239; color: #fff }
.backzonnebloem h2 { background: #4AAF5E; color: #fff }
.backanna h2 { background: #93C239; color: #fff }
.backanna a{color:#fff}
.backantonius h2 { background: #8FC5FD; color: #fff }
.backjozef h2 { background: #1F3C92; color: #fff }
@media only screen and (max-width: 800px) {
.backanna{margin:0}
.backanna.textcol2 >.subwrapper>div{padding:15px}
}

/* color multicol */
.textcol.backspoz > div > div { background: #01a7e1; color: #fff }
    .textcol.backspoz > div > div:nth-child(2n+1) { background: #1ab0e3 }
.textcol.backwegwijzer > div > div { background: #93C239; color: #fff }
    .textcol.backwegwijzer > div > div:nth-child(2n+1) { background: #1ab0e3 }
.textcol.backZonnebloem > div > div { background: #f5af33; color: #fff }
    .textcol.backZonnebloem > div > div:nth-child(2n+1) { background: #f7bb4d }
.textcol.backanna > div > div { background: #63a5dc; color: #fff }
    .textcol.backanna > div > div:nth-child(2n+1) { background: #2a5f95 }
.textcol.backantonius > div > div { background: #a3cffc; color: #fff }
    .textcol.backantonius > div > div:nth-child(2n+1) { background: #1ab0e3 }
.textcol.backjozef > div > div { background: #2d3f81; color: #fff }
    .textcol.backjozef > div > div:nth-child(2n+1) { background: #42528e }

/* Border below images per school*/
.borderSpoz img { border-bottom: 15px solid #01a7e1 }
.borderWegwijzer img { border-bottom: 15px solid #93C239 }
.borderZonnebloem img { border-bottom: 15px solid #f5af33 }
.borderanna img {  background-image: url('../img/rand.jpg');  background-repeat: no-repeat; background-position: bottom left;  background-size: 100% 15px;    padding-bottom: 15px;    }
.borderAntonius img { border-bottom: 15px solid #a3cffc }
.borderJozef img { border-bottom: 15px solid #2d3f81 }

/*  Header */
.headerbar { margin: 0 15px; color: #fff }
.topbar { display: block; height: 68px; overflow: visible; padding: 0; top: 0; width: 100%; z-index: 999; }
.toplogo { background: url('../img/Logo_wegwijzer.png') no-repeat;   background-size: 235px 191px; width: 235px; height: 191px; position: absolute; left: 35px; top: 10px; display: bloc; z-index: 8999 }

@media only screen and (max-width: 600px) {
    .toplogo { background-size: 125px 105px; width: 125px; height: 105px; }
    .headerbar { margin: 0 }
}
/* menu bar */
.menubar { display: block; }
.topbar #nav { position: absolute; right: 60px; top: 30px; z-index: 999; }
    .topbar #nav .touch { display: none; }
    .topbar #nav .menubar { display: block; margin: 0; }
        .topbar #nav .menubar li { display: inline-block; font-size: 16px; }
            .topbar #nav .menubar li a { margin: 0 10px; font-size: 13px; text-decoration: none; text-align: center; text-transform: uppercase; color: #fff; }
                .topbar #nav .menubar li a:hover, .topbar #nav .menubar li.active a { border-bottom: 2px solid #fff; }

@media only screen and (max-width: 950px) {
    .topbar #nav { right: 0; position: absolute; width: 100%; z-index: 9999; }
        .topbar #nav .menubar { position: absolute; top: 35px; display: none; width: 100%; overflow: hidden }
        .topbar #nav .touch { color: #fff; display: block; font-size: 16px; line-height: 25px; height: 25px; position: absolute; right: 20px; text-transform: uppercase; top: 0; width: 70px; }
        .topbar #nav ul { padding: 0; }
            .topbar #nav ul li { padding: 0; left: 0px; display: block; border-top: 1px solid #fff; line-height: 50px; height: 50px; padding-left: 4%; width: 100%; }
        .topbar #nav > ul > li.active, .topbar #nav > ul > li:hover { border: none; }
}

/* team */
.team > div { display: flex; flex-wrap: wrap; }
    .team > div .item { position: relative; text-align: center; margin: 20px 0 }
.team img { width: 70%; margin-bottom: 20px }
/* photo+text bar */
.textphoto { display: block; clear: both; }
    .textphoto .subwrapper { padding: 0 }
    .textphoto > div > img { width: 50%; float: left }
    .textphoto .coltext { width: calc(50% - 70px); padding: 35px; float: left }
    .textphoto.photoleft > div > coltext { float: right; }
    .textphoto.photoright > div > img { float: right; }
    .textphoto h2 { text-align: left; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #63a5dc }

.multicolimg {margin:0}
@media only screen and (max-width: 900px) {
    .textphoto .coltext { width: calc(50% - 20px); padding: 10px; float: left }
}

@media only screen and (max-width: 600px) {
    .textphoto > div > img { width: 100% }
    .textphoto .coltext { width: calc(100% - 20px); padding: 10px; margin:15px 0;}
}


@media only screen and (max-width: 600px) {
.wrapper.photobar{margin:0}}


/* video */
.embed-container,.vimeovideo { width: 100%;display: block;position: relative; padding-bottom: 56.25%; overflow: hidden; }
   .vimeovideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; }

.photolow .subwrapper img{margin-top:35px}


/* foto collage & team */
.col2 > div > div { width: 50%; float: left }
.col3 > div > div { width: 33.3%; float: left }
.col4 > div > div { width: 25%; float: left }

@media only screen and (max-width: 800px) {
    .col2 > div > div { width: 100%; float: left }
    .col3 > div > div { width: 50%; float: left }
    .col4 > div > div { width: 33.3%; float: left }
}

@media only screen and (max-width: 600px) {
    .col3 > div > div { width: 100%; float: left }
    .col4 > div > div { width: 50%; float: left }
}

@media only screen and (max-width: 500px) {
    .col4 > div > div { width: 100%; float: left }
}

/* text columns*/
.textcol { }
    .textcol > div { display: flex; flex-wrap: wrap; }
        .textcol > div > div { position: relative }
    .textcol span.bottom { position: absolute; bottom: 5px; left: 0; width: 100%;padding-bottom:15px }
    .textcol svg { width: 50px; }
    .textcol.textcol4 > div > div { width: calc(25% - 70px); float: left; padding: 35px; text-align: center }
    .textcol.textcol3 > div > div { width: calc(33.3% - 70px); float: left; padding: 35px; text-align: center }
    .textcol.textcol2 > div > div { width: calc(50% - 70px); float: left; padding: 35px; }
    .textcol.textcol1 > div > div { width: calc(90% - 70px); float: left; padding: 35px; }

@media only screen and (max-width: 800px) {
    .textcol.textcol4 > div > div { width: calc(33.3% - 70px); }
    .textcol.textcol3 > div > div { width: calc(50% - 70px); }
    .textcol.textcol2 > div > div { width: 100%; padding: 30px 0px 30px 0; }
    .textcol.textcol1 > div > div { width: calc(100% - 70px); }
}

@media only screen and (max-width: 600px) {
    .textcol.textcol4 > div > div { width: calc(50% - 70px); }
    .textcol.textcol3 > div > div { width: calc(100% - 70px); padding: 30px 35px 30px 35px; }
}

@media only screen and (max-width: 500px) {
    .textcol.textcol4 > div > div { width: calc(100% - 70px); padding: 30px 35px 30px 35px; }
}
@media only screen and (max-width: 900px) {
    .textphoto .coltext { width: calc(50% - 20px); padding: 10px; float: left }
}

@media only screen and (max-width: 600px) {
    .textphoto > div > img { width: 100% }
    .textphoto .coltext ,.textcol.textcol1 > div > div{ width: calc(100% - 20px); padding: 10px;padding-left:0; margin:15px 0;}
.textcol h3{padding-top:15px}
.subwrapper .coltext{margin:0 15px}

}

/* Title bar */
.titlebar { }
    .titlebar .subwrapper { padding: 0; margin: 0 }
    .titlebar h2 { margin: 0; padding: 15px 0 }

/* Footer */
.menulink { width: 300px; display: block; list-style: none; margin-left: 25px; padding-left:0; }
    .menulink a { text-decoration: none; color: #fff; line-height: 30px; }
    .menulink li { border-bottom: 1px solid #fff; }
        .menulink li:before { content: ">"; margin-left: -22px; padding-right: 15px; }
.footerbot { color: #fff; margin: 0 15px; padding: 0 35px ;line-height:35px}
    .footerbot .actilus { float: right; text-decoration: none; font-size: 12px; color: #fff }  
@media only screen and (max-width: 600px) {.footerbot {margin:0 }}