h1 {
	color: #e73c1e;
	padding-bottom: 10px;
}
h2 {
	color: #6c7ebd;
	padding: 10px 0px 10px 0px;
	margin: 0;
	text-align: center;
}
h3 {
	margin-left : 20%;
	margin-top: 10%;
	padding: 10px;
	border-radius: 10px;
}
h3.H3rood{
	color: aliceblue;
	background-color: #e73c1e;
}
h3.H3paars{
	color: aliceblue;
	background-color: #6c7ebd;
}
h4 {
	clear:both;
	padding: 10px;
	font-size: 20px;
}

h4.H4rood {
	color: #e73c1e;
}
h4.H4paars {
	color: #6c7ebd;
}
img {
	border-radius: 10px;
}

header, footer{
	display: grid;
	grid-template-columns: 10% 1fr 30px 1fr 10%;
	text-align: center;
	
}

header img {
	width: 70%;
	grid-column-start: 2;
	grid-column-end: 3;
}

header h1 {
	grid-column-start: 4;
	grid-column-end: 5;
}

main {
	display: grid;
	grid-template-columns: 10% 1fr 30px 1fr 10%;
}
main section {
	grid-column-start:1;
	grid-column-end:6;
	background-color: #ffcf02;
	
}
main header h1 {
	text-align: center;
	color: #6c7ebd;
	
}
.left{
	grid-column-start: 2;
	grid-column-end: 3;
}
.right {
	grid-column-start: 4;
	grid-column-end: 5;
}

main article img,main article h3{
	float: left;
}
ul {
	padding-left:15px;
}
a,a:link, a:visited, a:hover, a:active{
	text-decoration: none;
}
a.paars:link, a.paars:visited {
	
	color: #6c7ebd;
}

a.paars:hover {
	
	color: #e73c1e;
}
a.paars:active {
	
	color: #6c7ebd;
}
a.rood:link, a.rood:visited {
	
	color: #e73c1e;
}

a.rood:hover {
	
	color: #6c7ebd;
}
a.rood:active {
	
	color: #e73c1e;
}
footer {border-top:#ffcf02 10px solid;}
footer img {
	width: 30%;
	padding-top: 10px;
	grid-column-start: 2;
	grid-column-end: 3;
}

footer h2 {
	grid-column-start: 4;
	grid-column-end: 5;
}



@media screen and (max-width: 480px){
	h1{
		padding-top:0px;
	}	
header, main, footer{
	display: grid;
	grid-template-columns: 5% 1fr 5%;
}

header img, footer img {
	
	width: 100%;
	padding-top: 30px;
	}

header h1, footer h2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
.left, .right{
	grid-column-start: 2;
	grid-column-end: 3;
}
main article {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr ;
	
	}
.left, .right{
	grid-column-start: 2;
	grid-column-end: 3;
}
main article img,main article h3{
	float:none;
	
} 
main article img, main article ul{
    grid-column-start: 2;
	grid-column-end: 3;
	}
main article a{
    grid-column-start: 1;
	grid-column-end: 4;
	
	}
h3{
	margin-left:0%;
	margin-top:0%;
	padding: 5px;
	text-align: center;
	font-size: 1.3em;
	}
h4 {
	display:none;	
	}
main article, ul {
		margin-top: 10px;
	    font-size:1.2em;
	     padding:0%;
	    text-align: center;
	}
}