body
{
	color: #1c1c1c;		/* grafietzwart */
	font-family: 'Quicksand', sans-serif;
	font-size: 1em;
	line-height: 1.3;}

h1, h2, h3, h4
{
	font-family: 'Arial', bold;}

header
{
	background-color: #808080;		/* lichtgrijs */
	background-image: url(../afbeeldingen/header_grijs.jpg);
	background-size: 110%;
	background-position: center 3.2em;
	background-repeat: no-repeat;
	padding: .2em 1em 6em 1em;}

header h1
{
	text-transform: uppercase;
	width: 70%;}

header a
{
	color: #e00102;		/* rood */
	text-decoration: none;}

nav
{
	background-color: #e00102;	/* rood */ }

nav p.menuknop
{
	position: absolute;
	top: 4px;
	right: 12px;
	font-family: courier, monospace;
	font-size: 28px;
	line-height: 1;
	margin: 0;}

nav ul
{
	display: none;
	list-style-type: none;
	padding: 0;
	margin: 0;}

nav ul li 
{
	border-top: 1px solid darkgrey;
	padding: .7em .4em .6em .4em;}

nav a 
{
	color: #fffafa;		/* sneeuwwit */
	text-decoration: none;}

nav ul li:hover 
{
	background-color: #808080;	/* lichtgrijs */ }

nav ul li.submenu 
{
	position: relative;}

nav ul li.submenu > a:after 
{
	content: " \025BE";}

nav ul li.submenu:hover ul 
{
	box-sizing: border-box;
	background-color: #808080;	/* lichtgrijs */
	display: block;
	width: 50%;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;}

nav li li:first-child 
{
	border-top: none;}

nav li li a:hover 
{
	color: #1c1c1c;		/* grafietzwart */ }

article 
{
	padding: 1em;}

article h1
{
}

article h2 
{
	margin-top: 1.5em;}

aside 
{
	background-color: #e00102;	/* rood */
	padding: 1em 1em 2em 1em;
	text-align: center;}

aside a 
{
	color: #1c1c1c;		/* grafietzwart */
	text-decoration: none;}

footer
{
	background-color: #808080;	/* lichtgrijs */
	color: #fffafa;		/* sneeuwwit */
	font-size: .9em;
	padding: 2em;
	text-align: center;}

footer a
{
	color: #fffafa;		/* sneeuwwit */
	text-decoration: none;}

footer a:hover
{
	text-decoration: underline;}

img.rechts, img.links 
{
	box-sizing: border-box;
	display: block;
	margin: 0.5em auto;
	max-width: 100%;}

@media screen and (min-width: 500px) 
{
header
{            
        background-size: 100%;
        background-position: center .5em;
        padding: .2em 1em 8.5em 1em;}
    
nav p.menuknop
{
        display: none;}
    
nav > ul 
{
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        
display: flex !important;
        -ms-flex-pack: distribute;
        justify-content: space-around;}

    
nav ul li.submenu:hover ul
{
        width: 8em;
        left: 0;
        top: 100%;
        -webkit-box-orient: vertical;
        
-webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-top: 1px solid darkgrey;}

nav > ul > li 
{
        border-top: none;}
    
img.rechts 
{
        float: right;
        margin: 0.4em 0 0.4em .8em;}
    
img.links 
{
        float: left;
        margin: 0.4em .8em 0.4em 0;}
}

@media screen and (min-width: 700px) 
{

header 
{
        padding: .2em 1em 9em 1em;}
     
header h1 
{
	font-size: 2.5em;
	width: 100%;}

.art-aside 
{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;}
    
article
{
        border-left: 1px solid #e00102;		/* rood */ }

aside
{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 22%;
        flex: 0 0 22%;
        
font-size: .9em;}
}

@media screen and (min-width: 1024px) {
body 
{
        background-color: #fffafa;	/* sneeuwwit */ }
    
header
{
        background-size: contain;
        background-position: 90% .5em;
        padding: 3em 1em 8em 1em;}

header h1 
{
        font-size: 3.5em;
        max-width: 1024px;
        margin: 0 auto;
        -webkit-transform: translateX(0);
        transform: translateX(0);}
    
nav > ul 
{
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;}
    
nav > ul > li 
{
        padding: 1em .4em .9em .4em;
        margin: 0 .5em;}
    
div.art-aside 
{
	max-width: 1024px;
	margin: 0 auto;}

article
{
	border-left: none;}

aside
{
	background-color: transparent;}
}