html { height: 100%;}
body { font-family: 'Open Sans', sans-serif; overflow-y: scroll; height: 100%;  }
body.margin { padding-top: 120px; position: relative; }

.wrapper { min-height: 100%; padding-bottom: 250px; position: relative; }
.container { max-width: 1300px; font-family: 'Open Sans', sans-serif; }

#menubar { padding: 40px 0; position: relative; height: 170px; }
#menu .container { position: relative; }
#menubar .logo { max-height: 110px; }
#menubar .search { position: absolute; right: 20px; }
#menubar .search input { border: 0px; background: rgba(94,39,132,.1); padding: 8px 15px 8px 40px; border-radius: 5px; width: 220px; outline: none; }
#menubar .search form { position:relative; }
#menubar .search:before { font-family: 'Font Awesome 5 Free'; color: #888; position: absolute; left: 15px; top: 8px; content: "\f002"; }
#menubar ul.topmenu { margin: 0px; padding: 0px; position: absolute; right: 250px; top: 8px; list-style-type: none; }
#menubar ul.topmenu li { float: left; }
#menubar ul.topmenu li a { padding: 5px 15px; color: #a3a7a8; font-weight: 300; font-size: 14px; transition: .2s; }
#menubar ul.topmenu li a:hover { color: #5d2684; text-decoration: none; transition: .2s; }

#menubar ul.mainmenu { margin: 0px; padding: 0px; position: absolute; right: 0px; top: 75px; list-style-type: none; }
#menubar ul.mainmenu li { float: left; padding: 0 20px; position: relative;}
#menubar ul.mainmenu li a { padding: 2px 0px 30px 0; color: #ccc; font-size: 18px; color: #5d2684; font-weight: 700; transition: .2s; }
#menubar ul.mainmenu li a span { padding-bottom: 4px; transition: .2s; border-bottom: 2px solid rgba(255,255,255,0);}
#menubar ul.mainmenu li a:hover { text-decoration: none;  }
#menubar ul.mainmenu li a:hover span { padding-bottom: 4px; border-bottom: 2px solid #f8931d; transition: .2s; }
#menubar ul.mainmenu li.active a span { padding-bottom: 4px; border-bottom: 2px solid #f8931d; text-decoration: none; transition: .2s; }
#menubar ul.mainmenu i { font-size: 6px; }
#menubar ul.mainmenu li ul { display: block; position: absolute; z-index: 100; background: rgba(247,148,30,.95); list-style: none; padding: 0px; margin: 0px; width: 225px; min-width: 225px; max-width: 300px; padding: 15px 0; display: none; border-radius: 5px; top:50px; }
#menubar ul.mainmenu li ul li { display: block; width: 100%; float: none; padding: 5px 20px; }
#menubar ul.mainmenu li ul li a { color: #fff; font-size: 14px; font-weight: 400; transition: 0s; border: 0px !important;}
#menubar ul.mainmenu li ul li a:hover { color: #5d2684; transition: 0s;border: 0px !important}
#menubar ul.mainmenu li:hover > ul { display: block; }
#menubar ul.mainmenu ul:before { content:""; position: absolute; left: 11px; top: -12px; width: 0; height: 0; border-style: solid; border-width: 0 10px 12px 10px; border-color: transparent transparent rgba(247,148,30,.95) transparent; z-index:9999; }

#menubar.fixed { position: fixed; height: 100px; top: 0px; left:0px; width: 100%; z-index: 9999999; background: #fff; padding: 10px; box-shadow: 0px 5px 5px rgba(0,0,0,.1); -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; }
#menubar.fixed .logo { max-height: 70px !important; -webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; transition: all 0s; }
#menubar.fixed .search { display: none; }
#menubar.fixed .topmenu { top: 5px; right: 5px; }
#menubar.fixed .mainmenu { top: 45px; right: 0px;  }

.mobilemenubut { position: absolute; right: 20px; top: 20px; font-size: 30px; display: none; z-index: 999999999; }

#slideshow { width: 100%; height: 550px; background: #333; position: relative; overflow: hidden; }
#slideshow .divider { position: absolute; left: 0px; top: 0px; height: 8px; width: 100%; background: linear-gradient(to right, #f8931d , #5d2684);  }
#slideshow .slider { position: absolute; left: 0px; top: 8px; width: 100%; }
#slideshow .ooe { position: absolute; right: 5%; top: -3px; z-index: 99;}
#slideshow .overlay { display: block; background: rgba(94,39,132,.4); width: 100%; height: 542px; position: absolute; top: 0px; left: 0;  z-index: 50;}
#slideshow h2 { position: absolute; bottom: 60px; width: 100%; text-align: center; font-weight: 900; color: #fff; z-index: 99; font-size: 50px; text-shadow: 2px 2px #444; }
#slideshow h2 span { display: block; font-weight: 500; font-size: 40px; font-style: italic; }
#slideshow .item { height: 550px; }

#inleiding { background: #5d2684; min-height: 200px; color: #fff; text-align: center; padding: 70px 50px 90px 50px; text-align: center; position: relative;} 
#inleiding .text { width: 70%; display: inline-block; font-size: 20px; font-weight: 100; line-height: 35px; }
#inleiding a.leesmeer { color: #f8931d; font-size: 14px; font-weight: 600; }
#inleiding .overlay { height: 50px; width: 100%; background: url('../img/inleiding-bg.png') center center no-repeat; background-size: cover; position: absolute; bottom: 0px; left: 0px; }

#actueel { padding: 70px 0; }
#actueel h3 { color: #5d2684; font-size: 20px; padding: 15px 0 0 0;}
#actueel h3 a { color: #5d2684; font-size: 20px; padding: 15px 0 0 0; transition: .2s;}
#actueel h3 a:hover { color: #f8931d; text-decoration: none; transition: .2s; }
#actueel .agenda { background: #f1f1f1; padding: 30px; color: #888; }
#actueel .agenda h4 { color: #f8931d; font-size: 25px; font-weight: 200; }
#actueel .agenda h5 { color: #5d2684; font-size: 18px; font-weight: 600; line-height: 25px; }
#actueel .agenda a { color: #888; display: block; padding-top: 5px; }
#actueel .agenda a:hover { text-decoration: none; transition: .2s; }
#actueel .agenda a:hover h5 { text-decoration: none; color: #f8931d; transition: .2s;}
#actueel .button { padding-top: 40px; }
#actueel .button i { margin-right: 10px; }
#actueel a.schoolgids { background: #f8931d; color: #fff; padding: 15px 40px; border-radius: 8px; margin: 0px auto; margin: 20px; transition: .2s; font-size: 20px; }
#actueel a.schoolgids:hover { background: #5d2684; text-decoration: none; transition: .2s; }
#actueel .kolom { padding: 30px; }
#actueel .datum { color: #aaa; font-size: 14px;  }
#actueel i { color: #f8931d; }

#about { padding: 80px 0; color: #333; font-weight: 200; font-size: 18px; line-height: 30px;  }
#about h1 { color: #f8931d; font-weight: 200; font-size: 30px; }

#bottom { position: absolute; bottom: 0; left: 0; width: 100%;}
#footer { background: #5d2684; color: #fff; padding: 50px 0; font-weight: 300; position: relative; }
#footer .container { position: relative; }
#footer address { font-weight: 100; }
#footer strong { font-weight: 700; }
#footer .divider { position: absolute; left: 0px; bottom: 0px; height: 12px; width: 100%; background: linear-gradient(to right, #f8931d , #5d2684);  }
#footer .ooe { position: absolute; top:-33px; right: 10px; }
#footer a { color: #fff; }
#footer .logo { max-height: 100px; }

#subfooter { background: #fff; color: #aaa; padding: 30px 0; font-weight: 300; font-size: 14px; }
#subfooter ul { list-style-type: none; margin: 0px; padding: 0px; }
#subfooter ul li { float: left; padding: 0px 10px; border-right: 1px solid #ccc; }
#subfooter ul li:last-child { border-right: 0px; }
#subfooter ul li a { color: #aaa; font-size: 14px; font-weight: 300; }
#subfooter ul li a:hover { color: #333; }

#divider  { background: linear-gradient(to right, #f8931d , #5d2684); height: 8px; max-height: 10px; } 
#content { padding: 30px 20px; }
#content .text { padding-right: 50px; padding-bottom: 40px; color: #666; line-height: 30px; }
#content .text img { max-width: 100%; height: auto; border-radius: 5px;  }
#content .text ul { display: disc; }

#content a.nieuwsitem { display: block; padding: 20px 0; color: #666;  }
#content a.nieuwsitem img { margin-bottom: 20px; }

#content .side { border-left: 1px solid #eee; }
#content .side .panel { padding: 20px; border-radius: 5px; }
#content .side .panel ul { list-style-type: none; padding: 10px 25px; margin: 0px; } 
#content .side .panel ul li { padding: 5px 0px; } 
#content .side .panel ul li a { color: #666; }
#content .side .panel ul li a:hover { color: #f8931d; }
#content .side .panel ul li.active a { color: #f8931d; }
#content .side .panel ul li ul li span.fa-li { margin-left: 25px; } 
#content .side .panel ul li.active > ul li a { color: #666; }


#content h2 { color: #5d2684; font-weight: 200; font-size: 20px;}
#content h3 { color: #5d2684; font-weight: 200; font-size: 20px;}
#content h3.agenda { font-size: 18px; }

#kop { background: rgba(94,39,132,.08); padding: 20px 10px 15px 10px; }
#kop h1 { color: #5d2684; font-weight: 200; font-size: 40px;}

form#contact { padding: 20px 0; }
input.formitem { border: 1px solid #eee; border-radius: 4px; background: #fcfcfc; width: 100%; display: block; padding: 10px 20px; margin: 10px 0;}
textarea.formitem { border: 1px solid #eee; border-radius: 4px; background: #fcfcfc; width: 100%; display: block; padding: 10px 20px; height: 100px; margin: 10px 0;}

/* LG */
@media (max-width: 1140px) { 
#inleiding .text { width: 98%; }
#menubar ul.mainmenu { margin-right: 10px; }
#menubar ul.mainmenu li { padding: 0px 15px; }
#menubar ul.mainmenu li a { font-size: 16px;  }
}

/* LG met MIN HEIGHT */
@media screen and (max-width: 1140px), screen and (max-height: 700px) {
#menubar { height: 130px; padding: 20px 0;}
#menubar ul.mainmenu { top: 60px; }
#slideshow {  height: 400px; }
#slideshow h2 { font-size: 35px; }
#slideshow h2 span { font-size: 25px; }
#slideshow .overlay { height: 392px; }
#slideshow .item { height: 392px; }

}

/* MD */
@media (max-width: 960px) { 
#inleiding .text { width: 98%; }
#menubar { height: 110px; padding: 20px 0; }
#menubar .search { display: none; }
#menubar ul.topmenu { display: none; }
.mobilemenubut { position: absolute; right: 30px; top: 25px; font-size: 40px; display: block; }
#menubar.fixed { height: 90px; }
#menubar.fixed .mobilemenubut { position: absolute; right: 30px; top: 15px; font-size: 40px; display: block; }
#menubar .logo { max-height: 75px; padding: 0px; margin: 0px; }
#menubar ul.mainmenu { display: none; position: absolute; top: 0px; left: 0px; width: 100%; padding: 20px 0; background: #333; z-index: 999999; }
#menubar ul.mainmenu li { float: none; display: block; width: 100%; border: 0px; padding: 5px 30px; }
#menubar ul.mainmenu li a { padding: 0px !important; }
#menubar ul.mainmenu li a:hover { border: 0px !important;}
#menubar ul.mainmenu ul { display: block; position: inherit !important; padding: 0px !important; margin: 0px !important; background: none !important; top: 0 !important;}
#menubar ul.mainmenu ul li a { border: 0px !important;}
#menubar ul.mainmenu ul:before { content:""; position: absolute; left: 0px; top: 0px; width: 0; height: 0; border-style: solid; border-width: 0 ; border-color: transparent; z-index:9999; }

.wrapper { min-height: 100%; padding-bottom: 375px; position: relative; }

#content .side { border-left: 0px; padding: 0px; border-top: 1px solid #eee; }
#content img { height: auto !important; }

#slideshow {  height: 420px; }
#slideshow h2 { font-size: 35px; }
#slideshow h2 span { font-size: 25px; }
#slideshow .overlay { height: 412px; }
#slideshow .item { height: 412px; }
#actueel a.schoolgids { background: #f8931d; color: #fff; padding: 15px 30px; border-radius: 8px; margin: 0px auto; margin: 20px; transition: .2s; font-size: 16px; }

#about .video, #about .tekst { padding: 0px 40px; }
#about .tekst { padding: 40px 40px 0 40px; }

#footer .footerlogo { display: none; } 
#footer .ooe { position: absolute; top:-33px; right: 30px; }

}

/* SM */
@media (max-width: 576px) { 

#menubar ul.topmenu { display: none !important; }
/* #menubar ul.mainmenu { display: none; }*/
#menubar .search { display: none; }
.logo { max-width: 70%; }

#slideshow { height: 200px; }
#slideshow .ooe { position: absolute; right: 5%; top: -3px; z-index: 99;width: 60px; }
#slideshow .overlay { display: block; background: rgba(94,39,132,.4); width: 100%; height: 192px; position: absolute; top: 0px; left: 0;  z-index: 50;}
#slideshow h2 { position: absolute; bottom: 30px; width: 100%; text-align: center; font-weight: 900; color: #fff; z-index: 99; font-size: 30px; text-shadow: 2px 2px #444; }
#slideshow h2 span { display: block; font-weight: 500; font-size: 20px; font-style: italic; }
#slideshow .item { height: 192px; }

#inleiding { padding: 30px 10px 60px 10px; }
#inleiding .text { width: 95%; display: inline-block; font-size: 15px; font-weight: 100; line-height: 30px; }

#actueel { padding: 40px 0; }
#actueel a.schoolgids { min-height: 40px; display: inline-block; } 

#about .video, #about .tekst { padding: 0px 30px; }
#about .tekst { padding: 30px 30px 0 30px;  font-size: 15px; font-weight: 100; line-height: 30px;}

#subfooter { text-align: center; }
#subfooter .copy { text-align: center; padding-top: 25px; }
#subfooter ul { display:inline-table; }
#subfooter ul li { display:inline; }

#content { padding: 10px 30px 20px 10px; }
#content .text { padding-right: 0px; }
#content .side { border-left: 0px; padding: 0px; border-top: 1px solid #eee; padding-bottom: 50px; }
#content img { height: auto !important; }

#kop { padding: 20px 10px 10px 10px; }
#kop h1 { font-size: 30px;}

#footer { padding: 50px 20px;}
#footer .ooe { display: none; }
}

.needsfilled {border:1px solid #f00 !important;}