html, body
{
    width: 100%;
    height: 100%;
}

body
{
    font-family: Trebuchet MS;
    line-height: 1.2em;
    font-size: .8;
    background: #000 no-repeat center;
    font-family: 'Newsreader', sans-serif;
    background-size: contain;
}

h1
{
    font-size: 2em;
    line-height: 1.2em;
    font-family: 'Quicksand', serif;
}


h2
{
    font-size: 1.5em;
}

header
{
    background: #12091B;
    color: #fff;
    padding: .5em;
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #fff;
    height: 10%;
}

header h1
{
    text-align: center;
}

header h1 a
{
    color: #fff;
    text-decoration: none;
}

header h1 a:hover
{
    text-decoration: underline;
}

header p
{
    text-align: center;
}

.item
{
    width: 100%;
    height: 90%;
    top: 10%;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

.item img
{
    max-width: 100%;
    max-height: 100%;
    float: right;
    margin-right: 1em;
}

.item strong
{
    font-weight: 700;
    display: block;
}

.item .intro, .item .zoekresultaten
{
    background: rgba(255,255,255,0.75);
    position: absolute;
    top: 2em;
    left: 20%;
    right: 20%;
    padding: 2em;
    text-align: left;
    border-radius: 10px;
}

.intro ul
{
    margin-bottom: 2em;
}

.intro li
{
    display: inline-block;
    margin: 0 1em .25em 0;
    text-align: center;
}

.intro li a
{
    font-size: 2em;
    text-decoration: none;
    padding: 1em;
    display: block;
    background: #fff;
    border-radius: 10px;
    margin: 0 0 .25em 0;
    color: #333;
}

.intro li a:hover, .intro li a:focus
{
    color: #000;
    background: #ecf29b;
}

.intro li a::after
{
    content: '▶';
    margin-left: .5em;
    font-size: .7em;
}

.overzicht
{
    position: absolute;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 20px #333;
    top: 2em;
    left: 20%;
    right: 20%;
    padding: 2em;
    text-align: left;
    z-index: 999;
}

.overzicht li
{
    margin-bottom: .5em;
    width: 33%;
    display: inline-block;
}

.volgende a, .vorige a
{
    background: #fff;
    color: #222;
    padding: 1em;
    text-decoration: none;
    float: left;
}   .volgende a {right: 0}
    .vorige a {left: 0; margin-right: 1em;}

.volgende a:hover, .vorige a:hover
{
    background: #ecf29b;
    color: #000;
}

.volgende a::after
{
    content: '▶';
    margin-left: .5em;
    font-size: .7em;
}

.vorige a::before
{
    content: '◀';
    margin-right: .5em;
    font-size: .7em;
}

.nav, .updateform
{
    background: #fff;
    border-radius: 10px;
    padding: 1em;
    position: absolute;
    top: 2em;
    left: 2em;
}

.nav form
{
    margin-bottom: 1em;
}

.intro .nav, .zoekresultaten .nav
{
    position: relative;
    width: 20em;
    left: auto;
    clear: both;
    margin-bottom: 4em;
}

.nav form > *, .intro .nav > *, .zoekresultaten .nav > *
{
    display: inline-block;
    vertical-align: middle;
}

.nav input
{
    font-size: 1em;
    width: 4em;
    margin-left: .5em;
    border: 1px solid #999;
}

.nav button
{
    float: left;
    height: 1.7em;
    padding: .2em 1em;
    background: #333;
    color: #eee;
    border: none;
    cursor: pointer;
}

.updateform
{
    text-align: left;
    top: 6em;
}

.updateform > fieldset > label > input
{
    font-size: 1em;
    width: 20em;
    display: block;
    margin-bottom: 1em;
}

.updateform > fieldset > label
{
    display: block;
    margin-bottom: .5em;
}

.updateform > fieldset > fieldset > label
{
    background: #ecf29b;
    border-radius: 5px;
    padding: .75em;
    margin-right: .5em;
    cursor: pointer;
}

.updateform > fieldset > fieldset > label:hover, .updateform .active
{
    background: #D3AF1B;
}

.updateform .active::before
{
    content: '✔';
    background: #fff;
    border: 1px solid #666;
    padding: .3em;
    margin: -.5em 0 -.5em -.5em;
}

.updateform > fieldset > fieldset > label > input
{
    display: none;
}

.updateform h2
{
    line-height: 2em;
}

.updateform fieldset
{
    margin-bottom: 1em;
}

.updateform button
{
    padding: .5em;
    background: #333;
    color: #eee;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
}

.updateform button:hover
{
    color: #fff;
    background: #000;
}

.titel
{
    text-align: center;
    background: rgba(255,255,255,.75);
    padding: 1em;
    width: 20em;
    left: 50%;
    top: 2em;
    position: absolute;
    margin-left: -11em;
    border-radius: 10px;
}

em
{
    font-style: italic;
}

.info
{
    position: absolute;
    bottom: 2em;
    left: 2em;
    color: #fff;
}