@font-face {
    font-family: "League Gothic";
    src: url(fonts/leaguegothic.eot);
    src: url(fonts/leaguegothic.eot?#iefix) format("embedded-opentype"), url(fonts/leaguegothic.woff) format("woff"), url(fonts/leaguegothic.ttf) format("truetype"), url(fonts/leaguegothic.svg) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Montserrat light";
    src: url(fonts/montserrat-light-webfont.eot);
    src: url(fonts/montserrat-light-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/montserrat-light-webfont.woff) format("woff"), url(fonts/montserrat-light-webfont.ttf) format("truetype"), url(fonts/montserrat-light-webfont.svg) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Montserrat regular";
    src: url(fonts/montserrat-regular-webfont.eot);
    src: url(fonts/montserrat-regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/montserrat-regular-webfont.woff) format("woff"), url(fonts/montserrat-regular-webfont.ttf) format("truetype"), url(fonts/montserrat-regular-webfont.svg) format("svg");
    font-weight: 400;
    font-style: normal
}

body {
    background: #E8D8C7;
    color: #0F4151;
    line-height: 1.2em;
    font-family: "Montserrat light";
}

header {
    line-height: 1em;
    margin-top: 1px;
    background: rgba(255, 255, 255, .3);
    padding: 2em 4em 2em 2em;
    box-shadow: 0 0 2em #999;
    background: linear-gradient(#E8D8C7, rgba(255, 255, 255, .3));
    z-index: 9;
    position: relative;
}

header img {
    position: absolute;
    right: 1em;
    top: 1em;
    height: 6em;
}

h1 {
    font: 3em "League Gothic";
    line-height: 1em;
    text-transform: uppercase;
}

h2,
legend {
    font: 2em "League Gothic";
    text-transform: uppercase;
    margin-bottom: .5em;
}

form
{
    width: 50em;
    margin: 3em auto; 
}

fieldset {
    background: #0095DA;
    padding: 4em 4em 2em;
    color: #fff;
    position: relative;
    margin-bottom: 1em;
}

fieldset:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 1em solid #E8D8C7;
    border-right: 50em solid transparent;
    right: 0;
    top: 0;
}

label div {
    background: rgb(76, 41, 116);
    display: none;
    color: #fff;
    border: 2px solid #fff;
    padding: 2em 2em 2em 4em;
    position: relative;
    line-height: 1.5em;
}

label div strong {
    background: #fff;
    color: #1896D8;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    padding: .5em 1em;
}

label span
{
    display: block;
    margin: 1em 0;
}

label {
    display: none;
}

.huidige {
    display: block;
}

.verborgen {
    display: none;
}

.lijst {
    width: 50em;
    margin: 0 auto;
}

button {
    transition: .3s;
    display: block;
    color: #fff;
    background: #0095DA;
    border: none;
    padding: 2em;
    font: 1em Montserrat;
    float: right;
    cursor: pointer;
}

button:hover, button:focus {
    background: #28B150;
}

/* slider */

input[type=range] {
    -webkit-appearance: none;
    margin: 18px 0;
    width: 100%;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1.4em;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 4em;
    width: 4em;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -1.4em;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #367ebd;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 2em;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 2em;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
    background: #3071a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
    background: #3071a9;
}

input[type=range]:focus::-ms-fill-upper {
    background: #367ebd;
}

@media only screen and (max-width: 800px)
{
    form { width: auto; margin: 0 1em; }
    header { padding: 1em 4em 1em 1em; }
    header img { height: 5em; }
    fieldset { margin-top: 1em; padding: 2em 1em 1em; }
    fieldset:before { border-right: 30em solid transparent; }
    label div { padding: 1em 1em 1em 3.5em; }
    canvas { padding: 2em 0 0; }
}