html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
body {
-webkit-text-size-adjust: none;
}
/* Box Model */
*, *:before, *:after {
box-sizing: border-box;
}
/* Containers */
.container {
margin-left: auto;
margin-right: auto;
}
.container {
width: 45em;
}
@media screen and (max-width: 1680px) {
.container {
width: 45em;
}
}
@media screen and (max-width: 1280px) {
.container {
width: 42em;
}
}
@media screen and (max-width: 1024px) {
.container {
width: 85% !important;
}
}
@media screen and (max-width: 736px) {
.container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.container {
width: 90% !important;
}
}
/* Raster */
/* Basis */
body {
background: #fff;
}
body, input, select, textarea {
color: #888;
font-family: "Lato", sans-serif;
font-size: 16pt;
font-weight: 400;
line-height: 1.75em;
}
a {
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
border-bottom: solid 1px #e4e4e4;
color: inherit;
text-decoration: none;
}
a:hover {
border-bottom-color: transparent;
color: #4acaa8 !important;
}
strong, b {
color: #777;
font-weight: 700;
}
p {
margin: 0 0 2.25em 0;
}
h1, h2, h3, h4, h5, h6 {
color: #777;
font-weight: 700;
line-height: 1em;
margin: 0 0 0.5625em 0;
}
h2 {
font-size: 2em;
line-height: 1.5em;
}
h3 {
font-size: 1.75em;
line-height: 1.5em;
}
/* Sectie / Artikels */
header p {
color: #aaa;
position: relative;
margin: 0 0 1.6875em 0;
}
header h2 + p {
font-size: 1.25em;
margin-top: -0.5em;
line-height: 1.5em;
}
header h3 + p {
font-size: 1.1em;
margin-top: -0.35em;
line-height: 1.5em;
}
/* Box */
/* Icon */
/* Afbeelding */
.image {
border-radius: 5px;
border: 0;
display: inline-block;
position: relative;
}
.image img {
border-radius: 5px;
display: block;
}
.image.avatar {
border-radius: 100%;
overflow: hidden;
}
.image.avatar img {
border-radius: 100%;
display: block;
width: 100%;
}
/* Lijst */
ul {
list-style: disc;
margin: 0 0 2.25em 0;
padding-left: 1em;
}
ul li {
padding-left: 0.5em;
}
/* Tabel */
/* Allerlei */
/* Hoofd */
#header {
display: flex;
flex-direction: column;
justify-content: space-between;
background: #4acaa8;
color: #d1f1e9;
height: 100%;
overflow-y: auto;
position: fixed;
text-align: center;
top: 0;
width: 23em;
right: 0;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
color: #ffffff;
}
#header header p {
color: #b6e9dc;
}
#header a {
color: #d1f1e9;
}
#header a:hover {
color: #ffffff !important;
}
#header > header {
flex-shrink: 0;
padding: 3em;
}
#header > header .avatar {
display: block;
margin: 0 auto 2.25em auto;
width: 8em;
}
#header > header h1 {
font-size: 1.75em;
margin: 0;
}
#header > header p {
color: #d1f1e9;
font-style: italic;
margin: 1em 0 0 0;
}
#header > footer {
flex-shrink: 0;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
}
#header > nav {
flex-grow: 1;
}
#header > nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#header > nav ul li {
border-top: solid 2px #5ccfb0;
display: block;
padding: 0;
}
#header > nav ul li a {
transition: none;
border: 0;
color: #ffffff !important;
display: block;
padding: 0.85em 0;
text-decoration: none;
}
#header > nav ul li a.active {
background: #fff;
color: #4acaa8 !important;
}
#header > nav ul li:first-child {
border-top: 0;
}
/* Wrapper */
#wrapper {
background: #F5F0D8;
}
/* Start */
#main > section {
border-top: solid 1px #f4f4f4;
}
#main > section > .container {
padding: 6em 0 4em 0;
}
#main > section:first-child {
border-top: 0;
}
/* XL */
@media screen and (max-width: 1680px) {
/* Basis */
body, input, select, textarea {
font-size: 13pt;
}
/* Hoofd */
#header {
width: 21em;
}
#header > header {
padding: 2em;
}
#header > footer {
padding: 1.5em;
}
/* Wrapper */
#wrapper {
padding-right: 21em;
}
/* Start */
#main > section > .container {
padding: em 0 2em 0;
}
}
/* L */
@media screen and (max-width: 1280px) {
/* Basis */
body, input, select, textarea {
font-size: 11pt;
}
/* Hoofd */
#header {
width: 20em;
}
/* Wrapper */
#wrapper {
padding-right: 20em;
}
}
/* Gemiddeld */
#titleBar {
display: none;
}
@media screen and (max-width: 1024px) {
/* Basis */
html, body {
overflow-x: hidden;
}
body, input, select, textarea {
font-size: 12pt;
}
/* Afbeelding */
/* Hoofd */
#header {
backface-visibility: hidden;
transition: transform 0.5s ease;
display: block;
height: 100%;
overflow-y: auto;
position: fixed;
top: 0;
width: 23em;
z-index: 10002;
transform: translateX(23em);
right: 0;
}
#header > footer {
bottom: auto;
left: auto;
margin: 0.5em 0 0 0;
position: relative;
right: auto;
top: auto;
}
/* Wrapper */
#wrapper {
backface-visibility: hidden;
transition: transform 0.5s ease;
padding: 44px 0 1px 0;
}
/* Canvas Navigatie */
#titleBar {
backface-visibility: hidden;
transition: transform 0.5s ease;
display: block;
height: 44px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
background: #222;
color: #fff;
min-width: 320px;
}
#titleBar .title {
color: #fff;
display: block;
font-weight: 700;
height: 44px;
line-height: 44px;
padding: 0 1em;
width: 100%;
text-align: left;
}
#titleBar .toggle {
text-decoration: none;
height: 4em;
position: absolute;
top: 0;
width: 6em;
border: 0;
outline: 0;
right: 0;
}
#titleBar .toggle:before {
content: '';
background: linear-gradient(#fff, #fff) center 15px / 16px 2px no-repeat, linear-gradient(#fff, #fff) center 21px / 16px 2px no-repeat, linear-gradient(#fff, #fff) center 27px / 16px 2px no-repeat, #4acaa8;
display: block;
height: 44px;
line-height: 44px;
position: absolute;
text-align: center;
top: 0;
width: 64px;
right: 0;
}
body.header-visible #wrapper, body.header-visible #titleBar {
transform: translateX(-23em);
}
body.header-visible #header {
transform: translateX(0);
}
}
/* Klein */
@media screen and (max-width: 736px) {
/* Basis */
body, input, select, textarea {
font-size: 12pt;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.5em;
}
/* Afbeelding */
/* Sectie / Artikel */
header br {
display: none;
}
/* Allerlei */
/* Hoofd */
#header {
width: 17em;
transform: translateX(17em);
right: 0;
}
#header > header {
padding: 2em;
}
#header > header .avatar {
margin: 0 auto 1.6875em auto;
width: 6em;
}
#header > header h1 {
font-size: 1.5em;
}
#header > header p {
margin: 1em 0 0 0;
}
#header > footer {
padding: 1.5em;
}
/* Start */
#main > section > .container {
padding: 2em 0 0 0;
}
/* Voet */
/* Canvas Navigatie */
#titleBar .toggle {
height: 4em;
width: 6em;
}
#titleBar .toggle:before {
width: 44px;
background-size: 12px 2px, 12px 2px, 12px 2px, auto;
background-position: center 16px, center 21px, center 26px, 0 0;
}
body.header-visible #wrapper, body.header-visible #titleBar {
transform: translateX(-17em);
}
}
/* XS */
@media screen and (max-width: 480px) {
/* Basis */
html, body {
min-width: 320px;
}
body, input, select, textarea {
font-size: 12pt;
}
/* Lijst */
}
.mid {
text-align: center;
font-size: 0.75em;
}
.sluit {
position: fixed;
z-index: 2;
right: 2px;
top: 2px;
}
.text1 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
text-align: left;
line-height: 1;
font-size: 14px;
font-weight: 300;
border-radius: 5px;
margin: 1px 2px 0px 2px;
padding: 2px;
background-color: #4ACAA8;
}
.text2 {
color: chocolate;
}
.text3 {
color:blue;
}
.schaduw {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
/* Horizontale lijn - Blauw */
hr.lijn {
border: 0;
margin-top: 10px;
margin-bottom: 1px;	
height: 1px;	
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(171, 209, 121, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.visually-hidden {
position: absolute;
left: -9999px;
}