*{padding: 0; margin: 0;}
body, html {background: #f1f1f1; height: 100%; font-family: 'Lato'; font-size: 15px; line-height: 1.4em;}
body {overflow-y: scroll;}
#page {text-align: center; color: #444;}
#main, #branding {background-color: #ffffff; overflow: auto;}
img {border: 0; display: block; max-width: 100%;}
a {color: #444;}
.screen-reader-text {display: none;}
#header-content a {display: block; padding: 40px 0;}
#header-content img {display: block; margin: 0 auto;}
.wrapper {max-width: 850px; margin: 0 auto; text-align: left;}
#content {padding: 30px 5%; margin: 40px 5% 50px; border: 1px solid #ddd; font-size: 17px; line-height: 1.6em;}
#content a {text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.2);}
#content h1 {margin-bottom: 30px; margin-top: 15px; font-size: 32px; line-height: 1.1;}
#content h2 {font-size: 22px; margin-top: 50px; margin-bottom: 10px; line-height: 1.1;}
#content h2:first-child {margin-top: 0;}
#content h3 {font-size: 17px; margin-top: 30px; line-height: 1.1; margin-bottom: 3px;}
#content ol, #content ul, #content p {margin-bottom: 1.6em;}
#content ol, #content ul {margin-left: 30px;}
#content p a {
    color: #444;
    position: relative; 
    text-decoration: none; 
    display: inline-block;
    z-index: 2;
    border: 0;
}
#content p a::after {
    content: "";
    position: absolute;
    bottom: 0.15rem;
    left: 0;
    width: 100%;
    height: 0.6rem;
    background: #efe62f;
    transition: all 0.15s ease-in-out;
    z-index: -1;
}
#content p a:hover::after {
    height: 1.6rem;
    margin: 0 -0.2rem;
    width: calc(100% + 0.4rem);
}
#header-image {background: center center /cover no-repeat;}
#header-menu {background: #333; background: linear-gradient(#444,#222); position: sticky; top: 0;}
#header-menu a {display: inline-block; text-decoration: none; color: white; cursor: pointer; line-height: 3.5; padding: 0 2em;}
#header-menu a img {width: 15px; display: inline-block; position: relative; top: 3px; margin-right: 5px;}
#header-menu a img#times {display: none; top: 6px;}
#header-menu ul {display: flex; justify-content: center; flex-wrap: wrap;}
#header-menu ul li {display: inline;}
#header-menu ul li a {border-right: 1px solid #444; white-space: nowrap;}
#header-menu ul li.active a {background: rgba(0,0,0,.25);}
#header-menu ul li:last-child a {border-right: 0;} 
#header-menu a:hover {background: rgba(255,255,255,.07)!important;}
#header-menu > nav > a {display: none;}
#colophon {padding: 30px 5%; font-size: 14px; border-top: 1px solid #ddd;}
#colophon a {color: #444; font-weight: bold; text-decoration: none;}
#beeldmerk {margin: 60px auto 40px;}

/* MOBILE MENU */
body.mobilemenu #header-menu > nav > a {display: block;}
body.mobilemenu #header-menu > nav > a:hover {background: none!important;}
body.mobilemenu #header-menu ul {display: none;}

/* MENU OPEN */
body.menuopen #header-menu > nav > a {display: block;}
body.menuopen #header-menu ul li a {display: block; text-align: left; padding-left: 5%; margin: 0 2.5%; border: 0;}
body.menuopen #header-menu ul {padding-bottom: 30px; display: block;}
body.menuopen #header-menu a img {display: none;}
body.menuopen #header-menu a img#times {display: inline-block;}

@media (max-width: 1000px) {
    #header-content a {padding: 30px 0;}
    #content {margin: 30px 5%;}
    #content h1 {font-size: 26px; margin-top: 0;}
}