html, body { height: 100%; margin: 0px; padding: 0px; font-size: 1em; font-family: "Arial", cursive, sans-serif;}
#wrapper { min-height: 100%; position: relative;}
@media screen and (max-width: 900px) { body {font-size: 1.1em; } }

header { width: 900px; background-color: white; text-align: left; position: relative; margin-left: calc(50% - 450px);} 
@media screen and (max-width: 910px) { header { width: calc(95% - 20px); margin-left: 10px;} }
header h1 { color: #040254; border: none; }
@media screen and (max-width: 910px) { header h1 { width: calc(100% - 35px); font-size: 3em; margin: 5px 0px 5px 0px; } }
@media screen and (max-width: 500px) { header h1 { width: calc(100% - 35px); font-size: 2em; margin: 15px 0px 15px 0px; } }
@media screen and (min-width: 910px) { header h1 { width: 375px; font-size: 3.2em; margin: 15px 0px 5px 0px; float: left;} }
#menu {
				border: 3px solid #040254;
				border-radius: 3px 3px 3px 3px;
				cursor: pointer;
				display: block;
				height: 24px;
				padding: 3px 4px 3px;
				position: absolute;
				width: 25px;
				background: white;
				top: 5px;
				right: 10px;
}
#menu div {
    background-color: #040254;
    border: 1px solid #040254;
    border-radius: 2px 2px 2px 2px;
    height: 2px;
    margin-top: 3px;
	margin-bottom: 2px;
    width: 90%;
}
@media screen and (min-width: 910px) { #menu { display: none; } }
@media screen and (max-width: 910px) { header { width: 95%; } }
#logo { width: 100%; z-index: -1;}

@media screen and (max-width: 910px) { nav { width: calc(95% - 20px); margin: 0px 10px 0px 10px;} }
@media screen and (min-width: 910px) { nav { width: 525px; margin-top: 10px; float: left;} }

nav ul { padding: 0px; margin: 0px; list-style: none; text-align: left;}
@media screen and (max-width: 910px) { nav ul { width: 100%; } }
@media screen and (min-width: 910px) { nav  ul { width: 550px; } }
@media screen and (min-width: 910px) { nav ul li { float: left; width: 90px; text-align: center; } }
@media screen and (max-width: 910px) { nav ul li { border-bottom: 1px solid #040254;} }
@media screen and (max-width: 910px) { nav { display: none; width: 95%; } }
@media screen and (min-width: 910px) { nav { display: block;} }
nav a { padding: 5px; display: block; text-decoration: none; color: #040254; font-weight: bold; padding-right: 10px; text-align: center; }
@media screen and (max-width: 910px) { nav a { font-size: 1.1em; text-align: left;}}
@media screen and (min-width: 910px) { nav ul li a img { display: inline; width: 40px; height: 40px; filter: opacity(.2);} }
@media screen and (min-width: 910px) { nav ul li a:hover img { display: inline; width: 40px; height: 40px; filter: opacity(.8);} }
@media screen and (max-width: 910px) { nav ul li a img { display: inline; width: 15px; height: 15px; } }


#main { width: 900px; text-align: left; text-align: left; padding-bottom: 120px; margin-left: calc(50% - 450px); line-height: 1.5em;}
@media screen and (max-width: 910px) { #main { width: calc(100% - 20px); margin-left: 10px;} }
@media screen and (min-width: 910px) {
#main .onderdeel:nth-child(even){ width: calc(50% - 5px); float: right; margin-left: 5px; }
#main .onderdeel:nth-child(odd){ width: calc(50% - 5px); float: left; margin-right: 5px; }
}
@media screen and (max-width: 910px) {
#main .onderdeel{ width: 100%; margin-bottom: 10px; }
}
#footer { text-align: center; position: absolute; bottom: 0; left: 0; height: 100px; height: 100px; width: 100%; background-color: #040254; font-size: 0.7em; color: white; padding-top: 10px;}
@media screen and (max-width: 910px) { footer span { width: calc(95% - 20px); display: block; margin: 0px 10px 0px 10px;  } }
@media screen and (min-width: 910px) { footer span { width: 910px; display: block; text-align: left; } }

h1 { font-size: 1.3em; color: #e9081e; border-top: 1px solid #e9081e; font-weight: bold; padding-top: 5px; }
h2 { font-size: 1.15em; color: #040254; font-weight: bold;}
a { color: red; }
@media screen and (max-width: 910px) {
.foto { width: calc(100% + 20px); margin-left: -10px; }
}
@media screen and (min-width: 910px) {
.foto { width: 100%; }	
}

.fb-wrap {
padding-top: 10px; width:90%; margin: 0 auto;}

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style]
{width:  100% !important; }

span.fouten_melding { display: block; border: 1px solid white; background-color: #ff4d4d; padding: 3px; color: black; margin-bottom: 5px;}
span.melding { display: block; border: 1px solid black; background-color: #66ccff; padding: 3px; color: black; margin-bottom: 5px;}

@media screen and (max-width: 600px) { .fotoinalbum { border: 1px solid #040254; width: calc(100% + 40px); margin-left: -20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);} }
@media screen and (min-width: 600px) { .fotoinalbum { border: 1px solid #040254; width: 90%; margin-left: 50px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);} }

@media screen and (max-width: 600px) { 
a.album { display: block; width: calc(100% + 20px); margin-left: -10px; margin-bottom: 10px; text-decoration: none; color: red; position: relative;}
.albumfoto { width: 100%; border-top: 1px solid #040254; border-bottom: 1px solid #040254;}
.titel { width: 100%; padding: 5px; position: absolute; bottom: 30px; left: 0px; background-color: white; border-top: 1px solid red; border-bottom: 1px solid red;} 
}
@media screen and (min-width: 600px) { 
a.album { display: block; width: calc(50% - 20px); margin-left: 10px; text-decoration: none; color: red; position: relative; float: left; }
.albumfoto { width: 100%; max-height: 285px; border: 1px solid #040254; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.titel { max-width: 90%; padding: 5px; position: absolute; top: 30px; left: -10px; background-color: white; border: 1px solid red; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);} 
}