/* ==|== vars =============================================================== */
:root {
    --yellow: #e9a714;
    --blue: #234754;
    --darkblue: #1e4854;
    --darkerblue: #153f4c;
    --white: #ffffff;
    --greyishblue: #8a9fa5;
    --lightgreyishblue: #E3E8EA;
}


/* ==|== @font-face and @keyframes animations =============================== */

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/ubuntu-regular-webfont.eot');
    src: url('fonts/ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ubuntu-regular-webfont.woff') format('woff'),
         url('fonts/ubuntu-regular-webfont.ttf') format('truetype'),
         url('fonts/ubuntu-regular-webfont.svg#UbuntuRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/ubuntu-bold-webfont.eot');
    src: url('fonts/ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ubuntu-bold-webfont.woff') format('woff'),
         url('fonts/ubuntu-bold-webfont.ttf') format('truetype'),
         url('fonts/ubuntu-bold-webfont.svg#UbuntuBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/ubuntu-bolditalic-webfont.eot');
    src: url('fonts/ubuntu-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ubuntu-bolditalic-webfont.woff') format('woff'),
         url('fonts/ubuntu-bolditalic-webfont.ttf') format('truetype'),
         url('fonts/ubuntu-bolditalic-webfont.svg#UbuntuBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/ubuntu-lightitalic-webfont.eot');
    src: url('fonts/ubuntu-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ubuntu-lightitalic-webfont.woff') format('woff'),
         url('fonts/ubuntu-lightitalic-webfont.ttf') format('truetype'),
         url('fonts/ubuntu-lightitalic-webfont.svg#UbuntuLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
}

/* ==|== html5 boilerplate normalize ======================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 0;}
.rich blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; color: #CCC; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/*
::-moz-selection { background: #fe57a1; color: var(--white); text-shadow: none; }
::selection { background: #fe57a1; color: var(--white); text-shadow: none; }
*/

/* ==|== primary styles =====================================================
   Author: Mattijs Bliek || Grrr
   Color guide:
   - .theme1 / yellow: #E9B914
   - .theme2 / regular blue: #1E5A6E
   - .theme3 / dark blue: var(--darkerblue)
   ========================================================================== */
body, button, input, select, textarea { font-family: 'Ubuntu', sans-serif; font-size: 14px; line-height: 1.285714285714286; color: #222; }
/*body { background: url('img/bg-light.jpg') fixed no-repeat #000; background-size: cover; margin: 0; }*/
body { background: #E3E8EA; background-size: cover; margin: 0; }

ul, ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
.rich ul, .rich ol { margin: 1em 0; padding:0; }
dd { margin: 0; }
.rich .figure { margin-bottom: 15px; }
.rich .figure[style*="float:left"], .rich .figure[style*="float: left"] { margin-right: 30px; }
.rich .figure[style*="float:right"], .rich .figure[style*="float: right"] { margin-left: 30px; }
.rich .figure dd { color: #808080; font-size: 9px; line-height: 15px; }

figure { position: relative; }
figcaption { position: absolute; left: 0; bottom: 0; display: block; padding: 5px; background: url('img/ie-bg-white.png'); background: rgba(255,255,255,0.6); font-style: italic;}

.mini-mediabox img { max-height: 210px; max-width: 210px; }
.mini-mediabox figure { display: none; min-height: 210px; }
.mini-mediabox figure.current { display: block; }
.mini-mediabox figure a { display: block; }
.mini-mediabox figcaption { width: 200px; }
.mini-mediabox nav { display: block; margin-top: 1em; text-align: center; }
.mini-mediabox nav a { background: url('img/btn-media-box.png') no-repeat 0 -11px; display: inline-block; *display: inline; *zoom: 1; height: 10px; font-size: 0; width: 10px; }
.mini-mediabox nav a:hover, .mini-mediabox nav a:focus { background-position: 0 -22px; }
.mini-mediabox nav a.current { background-position: 0 0; }
.mini-mediabox .play-button { background: url('img/btn-play.png') no-repeat; display: block; height: 65px; left: 50%; margin: 0 0 0 -32px; position: absolute; top: 50px; width: 65px; }

#flashMessage { background: var(--white); color: #000; position: fixed; top: 0; left: 0; width: 100%; }
#flashMessage p { margin: 20px; font-size: 1.285714285714286em; line-height: 1.1111111em; } /* 18px / 20px */

h1, h3 { color:#E9B914; }
h1 { margin: 0.5em 0; font-size: 2.142857142857143em; line-height: 1em; font-weight: bold; font-style: italic;} /* 30 / 14 */
h2, h3 { margin-top: 10px; font-size: 1.285714285714286em; line-height: 1.1111111em;} /* 18px / 20px */
h3 { margin-bottom: 0em; }
h4, .delta { margin-bottom: 0; color: #000; font-size: 1em; line-height: 1.285714285714286em; font-weight: bold; font-style: normal; }

p { margin: 0 0 1.285714285714286em 0;}

a { color: #222; }
a:hover, a:focus { text-decoration: none; }
a:focus, a:hover, a:active { outline: 0; }
a.grid, a.float { text-decoration: none;}
a.grid:hover, a.grid:focus, a.float:hover, a.float:focus { color: #1E5A6E;}
.tdn { text-decoration: none;}

.tac { text-align: center; }

.clr1 { color: #E9B914;}
.clr2 { color: #1E5A6E;}
.clr3 { color: var(--darkerblue);}

/* grid */
.row, .block { display: block; }
.grid { position: relative; display: inline-block; vertical-align: top; margin: 0 5px 30px 25px; padding: 10px 30px 20px 10px; background: var(--white);}
.ie7 .grid { display: inline; zoom: 1; }
.float { position: relative; float: left; display: block; margin: 0 5px 30px 25px; background: var(--white);}
.min-padding { padding: 10px; }
.l-flipped .float { float: right; }
.dib { display: inline-block;}
.ie7 .dib { display: inline; zoom: 1}

.nm { margin: 0;}
.nmt { margin-top: 0em;}
.nmb { margin-bottom: 0;}
.mb { margin-bottom: 1.285714285714286em;}
.mb-double { margin-bottom: 2em; }
.mr-half { margin-right: 10px;}
.mt-half { margin-top: 10px;}

.c1 { width: 230px; }
.c2 { width: 530px; }
.c3 { width: 830px; }
.c1[class~="min-padding"] { width: 250px; }
.c2[class~="min-padding"] { width: 550px; }
.c3[class~="min-padding"] { width: 850px; }

.cc1 { width: 260px; }

.left { float: left; margin-right: 20px; }
.left.nm { margin-right: 0;}
ul.left, ol.left { float: none; margin-right: 0 !important;}
ul.left li, ol.left li { float: left; }
.right { float: right; margin-left: 20px; }
.last { margin: 0;}
.clear { clear: both }

#container { position: relative; width: 900px; margin: 0 auto; padding-left: 10px; }
.header-main { position: static; margin-top: 80px; padding-bottom: 8px; background: transparent;}
.content { display: inline-block; *display: inline; *zoom: 1; width: 600px;}
#sidebar { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; width: 290px; margin-top: -70px;}

/* header */
header h1 { position: absolute; top: 40px; left:-140px; margin: 0; }
.nav-main li { display: inline; float: left; margin-right: 20px; zoom: 1; }
.nav-main a { position: relative; display: block; padding: 5px 10px; color: #E9B914; font-size: 1.285714285714286em; font-weight: bold; text-decoration: none;}
.nav-main a:hover { color: var(--white);}
.nav-main span { position: absolute; right: 0px; top: 5px;}
.nav-main .s-current { background: var(--darkerblue); color: var(--white); }
.nav-main .s-current span { display: none; }

/* main */

.theme1 { background: #E9B914; color: var(--white);}
.theme3 { background: var(--darkerblue); }
.theme1 h2, .theme1 h3, .theme1 a { color: var(--white);}
.label { display: inline-block; *display: inline; *zoom: 1; position: relative; margin: 0 0 20px -10px; padding: 5px 10px; background: #1E5A6E; color: var(--white); font-size: 1.285714285714286em; line-height: 1.11111em; font-weight: bold; z-index: 20; }
.label b { z-index: 2; position: absolute; top: 0px; left: -20px; display: block; width: 20px; height: 50px; background: url('img/bg-label-theme2.png') no-repeat;}
img.right + h1, figure.right + h1 { margin-top: 0;}
img.no-margin { display: block; }

a.g-googlemap-link, img.g-googlemap { display: block; height: 250px; height: 250px; width: 250px; }

.c1 .label.block { display: block; width: 250px;}
.c2 .label.block { display: block; width: 550px;}
.alt { color: #1E5A6E; font-size: 1.285714285714286em; line-height: 1.222222222222222em; font-style: italic; font-weight: 200;}
.alt a { color: #1E5A6E;}
p.lrg { margin-top: 10px;}
.bgq p { color: #1E5A6E; font-size: 1.4em; line-height: 1em; font-weight: bold; font-style: italic; text-align: center;}
.bgq a { color: red; }

.thumbs li { overflow: hidden; margin: 10px 0;}
.c2 .thumbs li { display: inline-block; *display: inline; *zoom: 1; width: 250px; vertical-align: top; }
.c2 .thumbs li:nth-child(2n+1) { margin-right: 20px;}
.thumbs h3 { margin-top: 0;}
.thumbs h3 a { color: #E9B914; text-decoration: none;}
.thumbs h3 a:hover, .thumbs h3 a:focus { text-decoration: underline;}
.thumbs img { float: left; margin-right: 10px;}

.articles article.first { margin-top: -50px; padding-top: 60px;}
.articles > h2 { z-index: 1; position: relative; top: 10px; margin: 0 5px 20px 25px;}
.articles h1 { margin: 0 0 20px 0; font-size: 1.285714285714286em; line-height: 1.111111em;}
.articles time { display: block; margin-top: 4px;}
.articles time, .articles h1 { margin-left: 60px; }
.articles .left { margin: 0 10px 10px 0;}
.articles hr { margin: -5px 0 10px;}

.author { color: #E9B914; text-decoration: none;}
.author:hover h3, .author:focus h3 { color: #1E5A6E;}
.author:hover p, .author:focus p { color: #E9B914;}
.author h3 { margin-top: 5px;}
.author img { margin-right: 10px;}

.btn { display: inline-block; padding: 7px 12px 5px; border: 0; background: #1E5A6E; color: var(--white); text-decoration: none; }
.ie7 .btn { display: inline; zoom: 1;}
.btn:hover, .btn:focus { background: #E9B914;}
.btn-4, input[type="submit"].btn-4 { background: #ccc;}
.btn-4:hover, .btn-4:focus, input[type="submit"].btn-4:hover,input[type="submit"].btn-4:focus { background: #999;}

.btn-large { padding: 12px 18px; font-size: 1.285714285714286em; line-height: 1.1111111em; } /* 18px / 20px */

.img-list li:nth-child(4n) .img-container { margin-right: 0em; }
.video-list li:nth-child(3n) .img-container { margin-right: 0em; }

.img-container { display: inline-block; margin: 0 10px 10px 0; padding:9px; border: 1px solid #ccc}
.img-container a { display: block; margin-top: 5px; text-align: center;}

.linkgroup { display: inline-block; text-decoration: none;}
.ie7 .linkgroup { display: inline; zoom: 1; }
.linkgroup h2 { margin: 0; color: #E9B914; }
.linkgroup h3 { margin-top: 0em; color: #1E5A6E; font-size: 1em; font-weight: normal;}
.linkgroup:hover h2, .linkgroup:focus h2 { color: #1E5A6E;}
.linkgroup p { margin-bottom: 0;}

.link-list a, .link-list button { padding: 1px 0 1px 30px; }
.link-list .icon { background: url('img/download-icons.png') top left no-repeat;}
.link-list .excel { background-position: 0px -74px;}
.link-list .word { background-position: 0px -37px;}
.link-list .folder { background-position: 0px -104px;}

.list-brd { border-top: 1px solid #ccc; }
.list-brd > li { border-bottom: 1px solid #ccc;}
.list-mb > li { margin-bottom: 1.285714285714286em;}
.list-mb-half > li { margin-bottom: 10px;}
.list-pb { padding-top: 1.285714285714286em; }
.list-pb > li { padding-bottom: 1.285714285714286em; }
.list-pb-half { padding-top: 10px; }
.list-pb-half > li { padding-bottom: 10px; }

.mc-1 { margin-left: 0em; }
.mc-2 { margin-left: 275px; }
.mc .reset { margin-top: -222px; }
.mc-2.last { margin-bottom: 110px;}

.mceStatusbar { display: none !important;}

.mediabox ul { margin-bottom: -10px; margin-top: 10px; overflow: hidden; }
.mediabox li { position: relative; float: left; margin-bottom: 10px; margin-left: 10px; }
.mediabox li:first-child, .mediabox li:nth-child(4n+1) { margin-left: 0;}
.mediabox .ir { position: absolute; left: 50%; top: 50%; margin: -32px 0 0 -32px; width: 65px; height: 65px; background: url('img/btn-play.png') no-repeat; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s;}
.mediabox li:hover .ir { opacity: 0.6;}
.mediabox img { display: block; }
.mediabox a { background: no-repeat center center; background-size: cover; display: block; height: 90px; width: 130px; }

.more, .less { position: absolute; bottom: 0px; left: 50%; margin-left: -62px; padding: 10px 32px 10px 20px; background: url('img/arrow-down.png') 103px 14px no-repeat #E9B914; color: var(--white); font-weight: bold; text-align: center; text-decoration: none; width: 80px; }
.more:hover { background-position: 103px -16px; color: var(--darkerblue); }
.less { background-position: 105px -43px; }
.less:hover { background-position: 105px -73px; color: var(--darkerblue); }
.more b, .less b { z-index:3; position: absolute; left: -20px; bottom: -20px; width: 151px; height: 20px; background: url('img/bg-more.png') no-repeat; }

.pagination { text-align: center;}
.pagination .left { margin-right: 10px; }

.js .active .highlight, .no-js .highlight { font-weight: bold;}

.student { width: 485px; overflow: hidden;}
.student.active ul, .no-js .student ul { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #ccc;}
.student .highlight li { max-height: 1.285714285714286em;}
.student li { float: left;}
.student p { margin-bottom: 0em;}
.student .col-1 { width: 110px; margin-right: 20px;}
.student .col-2 { width: 95px; margin-right: 20px;}
.student .col-3 { width: 55px; margin-right: 20px;}
.student .col-4 { width: 45px; margin-right: 20px;}
.student .col-6 { width: 120px; margin-right: 20px;}
.student * { overflow: hidden; text-overflow: ellipsis;}
.student-checkbox { margin: 3px 20px 0 0; }
.ie .student-checkbox { margin-top: -3px; }

.toggle { width: 14px; height: 14px; background: url('img/accordion-icons.png') 2px 2px no-repeat; text-indent: -999em;}
.toggle.active { background-position: 2px -11px;}

.no-js .student-checkbox, .no-js .select-email { display: none;}

input[type="text"].date { width: 100px; margin-right: 10px;}
.date-icon { width: 20px; height: 24px; margin-top: 2px; background: url('img/icon-date.png') no-repeat; text-indent: -999em;}
.ui-datepicker { display: none; padding: 20px; background: var(--white); border: 1px solid #ccc;  }
.ie7 .ui-datepicker { max-width: 220px;}
.boxshadow .ui-datepicker { border: 0; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
.ui-datepicker-next, .ui-datepicker-prev { display: inline-block;}
.ie7 .ui-datepicker-next { margin-top: -20px;}
.ui-datepicker-next span, .ui-datepicker-prev span { display: inline-block; cursor: pointer;}
.ui-datepicker-next { float: right;}
.ui-datepicker-title { width: 105px; margin: -17px auto 10px auto; text-align: center;}
.ui-datepicker th, .ui-datepicker td { width: 30px; text-align: center;}

/* borders */
.brd { position: absolute; display: block; }
.top { left: -20px; top: 0px; width: 20px; height: 20px; background: url('img/bg-box-default-top.png') no-repeat;}
.middle { left: -20px; top: 20px; width: 20px; height: 100% !important; background: #EDEDED;}
.bottom { left: -20px; bottom: -20px; width: 290px; height: 20px; background: url('img/bg-box-default-bottom-col1.png') no-repeat;}
.c2 .bottom { width: 590px; background: url('img/bg-box-default-bottom-col2.png') no-repeat; }
.c3 .bottom { width: 890px; background: url('img/bg-box-default-bottom-col3.png') no-repeat; }

.cssgradients .top { background: url('img/bg-box-default-top-gr.png') no-repeat; }
.cssgradients .middle {
	background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%);
	background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%);
	background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%);
	background: linear-gradient(top, #ffffff 0%,#ededed 100%);
}

.theme1 .top { background: url('img/bg-box-theme1-top.png') no-repeat;}
.theme1 .middle { background: #D7AC14;}
.theme1 .bottom { background: url('img/bg-box-theme1-bottom-col1.png') no-repeat;}
.theme1.c2 .bottom { background: url('img/bg-box-theme1-bottom-col2.png') no-repeat; }

.cssgradients .theme1 .top { background: url('img/bg-box-theme1-top-gr.png') no-repeat; }
.cssgradients .theme1 .middle {
	background: -moz-linear-gradient(top, #E9B914 0%, #D7AC14 100%);
	background: -webkit-linear-gradient(top, #E9B914 0%,#D7AC14 100%);
	background: -o-linear-gradient(top, #E9B914 0%,#D7AC14 100%);
	background: -ms-linear-gradient(top, #E9B914 0%,#D7AC14 100%);
	background: linear-gradient(top, #E9B914 0%,#D7AC14 100%);
}

.theme3 .top { background: url('img/bg-box-theme3-top.png') no-repeat;}
.theme3 .middle { background: #143B47;}
.theme3 .bottom { background: url('img/bg-box-theme3-bottom-col1.png') no-repeat;}
.theme3.c2 .bottom { background: url('img/bg-box-theme3-bottom-col2.png') no-repeat; }
.theme3.c3 .bottom { background: url('img/bg-box-theme3-bottom-col3.png') no-repeat; }

/* sidebar */
.js #tip { visibility: visible; }

.youtube-link, .facebook-link, .instagram-link { width: 30px; height: 30px; margin-right: 10px; margin-bottom: 20px; display: block; float: left; overflow: hidden; text-indent: 100%; white-space: nowrap; background: url('img/social-icons-v2.png') no-repeat; }
.youtube-link { background-position: 0 0; }
.youtube-link:hover, .youtube-link:focus { background-position: 0 -30px; }
.facebook-link { background-position: -30px 0; }
.facebook-link:hover, .facebook-link:focus { background-position: -30px -30px; }
.instagram-link { background-position: -60px 0; }
.instagram-link:hover, .instagram-link:focus { background-position: -60px -30px; }
.newsletter .fb_iframe_widget { margin-top: 4px; }

.banner { width: 260px; height: 240px; text-decoration: none; border-collapse: collapse; }
.banner hgroup { z-index: 1; position: relative; display: block; margin-top: 70px; padding: 0 10px; color:#E9B914; text-align: center; text-shadow: 0 0 2px rgba(0,0,0,0.15);}
.banner h3 { margin: 0; font-size: 2.142857142857143em; line-height: 1em; font-weight: bold; font-style: italic;}
.banner h4 { margin: 0; font-size: 1.285714285714286em; line-height: 1.111111111111111em; font-style: italic; font-weight: 200;}
.banner img{ position: absolute; top: 10px; left: 10px;}

.bl { padding-bottom: 10px; }
.bl p { margin-bottom: 0;}
.bll { padding-bottom: 10px; font-size: 1.285714285714286em; line-height: 1.111111111111111em; font-weight: bold; text-decoration: none;}
#fill { background: url('img/bg-fill.png') #E9B914; }

/* forms */
.error { color: #F00; }
form > div{ display: block; position: relative; margin: 10px 0;}
form .left { margin-right: 10px;}
label { display: block; }
.js .newsletter label { position: absolute; z-index: 1; top: 7px; left: 12px; color: #aaa; text-transform: lowercase; pointer-events: none;}
.js .newsletter label:hover { cursor: text;}
input, textarea { display: block; margin-bottom: 18px; padding: 5px 7px; border: 1px solid #ccc;}
.mceEditor { display: block; margin-bottom: 18px; }
.mceContentBody { font-size: 30px;}
input[type="checkbox"], input[type="radio"] { border: 0; }
input[type="text"], input[type="email"], input[type="password"] { width: 196px;}
input[type="text"].wide { width: 356px;}
textarea { width: 380px; height: 180px;}
select { display: block; width: 210px; margin-bottom: 18px;}
input:-moz-placeholder { color: #aaa;}
input[type="submit"] { padding: 7px 12px 5px; background: #1E5A6E; color: var(--white); border: 0; font-weight: bold;}
input[type="submit"]:hover, input[type="submit"]:focus { background: #E9B914;}
input[type="submit"]:disabled { background: #CCC; cursor: default; }

#newsletterSignup { clear: left }

.signup { margin-left: 20px;}
.signup input, .signup legend, .signup select, .signup textarea { margin-bottom: 10px;}
.signup legend { display: block;}
.js .signup .specifier { display: none; }
.no-js .signup #form-type { display: none; }
.signup #form-type { width: 50%; }

.signup input[type="checkbox"], .signup .for-cbx { display: inline; }
.signup .for-cbx { margin-right: 10px; }

#voornaam { width: 100px;}
#tussenvoegsel { width: 70px;}
#huisnummer { width: 50px;}
#postcode { width: 55px;}

.lestijd { display: block; margin-bottom: 20px;}
.lestijd th td { font-weight: bold;}
.lestijd td { width: 30px; text-align: center;}
/* .lestijd td:first-child { width: 90px; text-align: left;} */

/* footer */
.footer-main { padding-top: 20px; color: #E9B914;}
.nav-footer > li { float:left; margin-right: 45px; }
.nav-footer a { color: #E9B914; font-weight: bold; text-decoration: none; line-height: 1.285714285714286em; }
.nav-footer a:hover { color: var(--white);}

/* ==|== page specific styles =============================================== */

/* slideshow @ home / aanbod / over ons */
.slideshow { position: relative; width: 550px; height: 280px; overflow: hidden; }
#sidebar .slideshow { width: 230px; height: 240px; overflow: visible; }
.slideshow .slide { position: absolute; top: 0; left: 0; z-index: 1; }
.slideshow .slide { -moz-transition: all 2.5s; -webkit-transition: all 2.5s;  opacity: 0; -moz-transform: scale(1); -webkit-transform: scale(1.1); }
.slideshow .slide.current { -moz-transition: all 1.5s; -webkit-transition: all 1.5s;  opacity: 1; top: 0; -moz-transform: scale(1); -webkit-transform: scale(1); z-index: 2; }

/* mediabox @ docenten */
figure.current { -moz-transition: all .3s; -webkit-transition: all .3s;  opacity: 1;}
figure.current[class~="loading"] { -moz-transition: all .3s; -webkit-transition: all .3s; opacity: 0; }
.ie7 figure.current { display: block }
.ie7 figure.current[class~="loading"] { display: none }

/* accordion */
#accordion > li > h2:focus { outline: 0}
.ui-accordion-header:hover, .ui-accordion-header:focus { cursor: pointer; }

/* pupils table in teachers tool */
.pupils-table { width: 100%; margin-bottom: 4em; }
.pupils-table th, .pupils-table td { padding: 5px; border-left: 1px solid #222; border-bottom: 1px solid #222; }
.pupils-table th:first-child { border-left: 0; }
.pupils-table td { height: 70px; border-right: 1px solid #222; }
.pupils-table .odd { background: #eee; }

/* downloads */
.js .downloads-list { display: none; }
.js .downloads-list.expanded { display: block; margin-top: 10px; margin-left: 30px; }
.downloads-toggle { background: none; padding: 0; border: 0; text-decoration: underline; outline: 0; }
.downloads-toggle:hover, .downloads-toggle:focus { text-decoration: none; }


/* ********************************************************************************************** */

/* Behaviors */
html { scroll-behavior: smooth; }


/* language selector */
.language-selector {
    list-style: none;
    margin: 0; padding: 0;
    position: absolute; top: 50px; right: 5px;
    font-size: 1.285714285714286em;
}
.language-selector__link {
    color: #E9B914;
    text-decoration: none;
}
.language-selector__link:hover {
    color: var(--white);
}
.language-selector__link > img {
    margin-left: 6px; margin-top: -2px;
}

.page-content-with-lists ul {
    list-style: disc;
    margin: 0 0 1em 0;
    padding-left: 20px;
}


/* tickets */
.tickets-wrapper {
    background: var(--white); padding: 20px 40px;
}


/* intro page */
body.intro {
    background: #E8EBED;
}


/* Course Configurator */
.course-configurator__form {
    margin-bottom: 50px;
    padding: 80px 0;
    background-color: var(--blue);
    color: var(--white);
    position: relative;
}

.course-configurator__form:after {
    position: absolute;
    bottom: -30px;
    width: 0;
    height: 0;
    content: '';
    left: 50%;
    margin-left: -30px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #234754
}
.course-configurator__form p {
    margin-bottom: 20px;
    text-align: center;
    font-size: 40px;
    font-size: 3vw;
    font-weight: bold;
}
.course-configurator__form p select {
    display: inline-block;
    width: auto;
}

.course-configurator__total {
    margin-bottom: 50px;
    text-align: center;
    display: block;
    font-size: 40px;
    font-weight: bold;
    color: var(--greyishblue);
}
.course-configurator__total > span {
    color: var(--yellow);
}

.course-configurator__courses {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
}
.course-configurator__courses li {
    width: 50%;
    padding: 0 40px;
    box-sizing: border-box;
}
.course-configurator__courses li:nth-child(odd) {
    position: relative;
    z-index: 1;
}
.course-configurator__courses li:nth-child(even) {
    position: relative;
    z-index: 0;
}
.course-configurator select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    /*min-height: 60px;*/
    background: var(--yellow);
    color: var(--white);
    font-size: inherit;
    line-height: 1.3em;
    font-weight: normal;
    padding-right: 44px;
    background-image: url('img/arrow-down.svg');
    background-size: 44px 17px;
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.course-configurator select:hover {
    box-shadow: -10px 10px 20px rgba(0,0,0,.5);
}
.course-configurator select:focus {
    background: var(--white);
    color: var(--darkblue);;
}
.course-configurator option {
    margin: -10px 0;
    padding: 5px 0;
    font-weight: normal;
}

/* Card */

.card {
    margin-bottom: 80px;
    background-color: var(--yellow);
    box-shadow: -20px 19.5px 0px 0px var(--yellow);
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: Ubuntu;
}
.card:before,
.card:after {
    content: '';
    border-style: solid;
    position: absolute;
}
.card:before {
    border-width: 20px 20px 0 0;
    left: -20px;
    border-color: transparent var(--yellow) transparent transparent;
}
.card:after {
    border-width: 0 0 20px 20px;
    bottom: -20px;
    right: 0;
    border-color: transparent transparent transparent var(--yellow);
}

.card__heading {
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.card__meta {
    position: absolute;
    bottom: -30px;
    right: -40px;
    width: 60%;
}
.card__meta span,
.card__meta h3 {
    color: var(--white);
    background-color: var(--yellow);
}
.card__meta-label > span {
    padding: 4px 10px;
    font-size: 14px;
    display: inline-block;
}
.card__meta h3 {
    margin: 0;
    position: relative;
    padding: 12px 10px 8px;
    font-size: 40px;
    text-overflow: ellipsis;
    display: inline-block;
    word-wrap: break-word;
    max-width: 260px;
}
.card__meta h3:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 20px 40px -15px rgba(0,0,0,0.5);
}

.card__meta h3 > span {
    display: inline-block;
    line-height: 1;
    width: 100%;
}
.card__meta.card__meta--long-name h3 {
    font-size: 30px;
}

.card__content {
    padding: 12px 30px 40px;
    flex: 1;
    background-color: var(--white);
    color: var(--darkerblue);
    font-size: 18px;
}
.card__content span {
    margin-bottom: 20px;
    padding-bottom: 5px;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 2px solid var(--yellow);
}
.card__content h2 {
    line-height: 1.45;
    font-size: 22px;
}
.card__content p {
    margin-bottom: 0;
    line-height: 1.56;
}
.card__content .card__description {
    overflow: hidden;
}

.card__content .card__description--shortened { height: 0; }
.card__content .card__description--expanded { height: auto; }
.js .card__content .card__description--shortened { height: auto; }
.js .card__content .card__description--expanded { height: 0; }
.js .card__content--expanded .card__description--shortened { height: 0; }
.js .card__content--expanded .card__description--expanded { height: auto; }
.card__content [data-handler="toggleExpansionHandler"] { color: var(--yellow); }

.card__teacher {
    display: flex;
}
.card__teacher-image {
    border-radius: 50%;
    margin-right: 10px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    box-shadow: inset -5px 5px 5px -3px rgba(0,0,0,0.5);
    background-size: cover;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.card__teacher-info {
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card__teacher-info span {
    margin-bottom: 2px;
    display: block;
    font-size: 12px;
}
.card__teacher-info h4 {
    margin-top: 0;
    color: inherit;
    font-size: 18px;
}

.card__footer {
    padding: 10px 20px 10px 0;
    background-color: var(--yellow);
    color: var(--white);
    display: flex;
    align-items: center;
}
.card__cta {
    border: none;
    margin-left: auto;
    padding: 0 10px;
    background-color: var(--darkerblue);
    text-align: center;
    color: inherit;
    font-size: 18px;
    font-weight: bold;
    height: 40px;
    flex-shrink: 0;
}
.card__cta:hover {
    color: var(--yellow);
}


/* Header */
.site-header {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
.has--menu-open .site-header {
    position: fixed;
    max-width: 900px;
    width: 100%;
}
.site-header__slogan {
    margin: 0;
    padding-left: 14px;
    color: var(--darkerblue);
    font-size: 20px;
    font-weight: bold;
    position: relative;
    z-index: -1;
}
.site-header__slogan:before {
    content: '';
    width: 6px;
    height: 54px;
    background-color: var(--darkerblue);
    position: absolute;
    left: 0;
    top: -4px;
}
.site-header__logo {
    margin-right: 30px;
    position: relative;
    top: 20px;
}

/* Menu */

.menu-button {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 5px;
    top: 20px;
}
.menu-button__inner {
    position: relative;
    width: 50px;
    height: 30px;
}
.menu-button__inner > .icon {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.2s opacity linear;
}
.menu-button__inner > .icon--menu-hamburger { opacity: 1; }
.has--menu-open .menu-button__inner > .icon--menu-hamburger { opacity: 0;}
.has--menu-open .menu-button__inner > .icon--menu-close { opacity: 1; }

.menu-primary {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--lightgreyishblue);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100vh);
    opacity: 0;
    transition: transform .6s ease-in-out, opacity .3s linear;
}
.has--menu-open .menu-primary { transform: translateY(0); opacity: 1;}
.menu-primary__content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 570px;
    width: 610px;
    font-size: 24px;
    line-height: 48px;
    color: var(--greyishblue);
}
.menu-primary h3 {
    font-size: 30px;
    color: var(--greyishblue);
}
.menu-primary a {
    text-decoration: none;
    color: inherit;
}
.menu-primary-nav {
    border-left: 6px var(--greyishblue) solid;
    padding-left: 30px;
    margin-bottom: 48px;
}
.menu-primary-nav:hover { border-left-color: var(--yellow); }
.menu-primary-nav:hover h3 { color: var(--yellow); }
.menu-primary a:hover { color: var(--yellow); }

/* Main / App */

#app {
    z-index: 0;
    position: relative;
}


/* Footer */
.site-footer {
    background: var(--darkerblue);
    color: var(--white);
    padding: 46px 48px 24px;
    /* overflow: hidden; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 1.6em;
}
.site-footer a {
    color: var(--white);
    text-decoration: none;
    font-weight: normal;
    border-bottom: 1px transparent solid;
}
.site-footer a:hover {
    border-bottom: 1px var(--yellow) solid;
}

.site-footer p {
    font-weight: normal;
}

.site-footer-nav-primary {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 330px;
    max-width: 50%;
}
.site-footer-nav-secondary {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    max-height: 330px;
    max-width: 50%;
    align-items: flex-start;
}
.site-footer:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 150px solid transparent;
    /* border-bottom: 150px solid transparent; */
    border-right: 150px solid #e8ebed;
}

.site-footer-nav {
    font-size: 16px;
    font-weight: bold;
    border-left: 6px #fff solid;
    padding-left: 20px;
    margin-bottom: 24px;
    margin-right: 52px;
}
.site-footer-nav:hover {
    border-left-color: var(--yellow);
}
.site-footer h3 {
    color: var(--white);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.site-footer-nav:hover h3 {
    color: var(--yellow);
}

.site-footer-nav--social{
    border-left: 0;
    margin-right: 30px;
    text-align: center;
}
.site-footer svg .icon {
    fill: currentColor;
}
.site-footer-nav--social .social-link a {
    font-size: 0;
    width: 48px;
    display: inline-block;
    text-decoration: none;
    border: 0;
    margin-bottom: 28px;
}
.site-footer-nav--social .social-link a:hover {
    color: var(--yellow);
}

a.scroll-to-top {
    display: block;
    width: 40px;
    height: 20px;
    position: absolute;
    right: 31px;
    top: -48px;
    padding: 10px;
    z-index: 1;
}
a.scroll-to-top:hover {
    border-bottom: none;
}
a.scroll-to-top svg .icon {
    stroke: var(--yellow);
}
a.scroll-to-top:hover svg .icon {
    stroke: var(--white);
}


/* ==|== non-semantic helper classes ======================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.offscreen { position: absolute; left: -999em; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ==!== small screen ======================================================= */
@media only screen and (max-device-width: 1024px) {
	header h1 { position: static; margin-bottom: 40px; }
	.ie header h1 { position: absolute; margin-bottom: 0; }
}

/* ==|== print styles ======================================================= */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  .footer-main, button, .dontPrint { display: none; }
}