/* RESET
------------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
}

/* ALGEMEEN
------------------------------------------------------------------------------*/
html { 
overflow-x: hidden; 
overflow-y: scroll; 
}
body { 
font: 20px Verdana;
}

/* HEADERS, NAAM EN NAVIGATIE
------------------------------------------------------------------------------*/
#header1 {
position: fixed;
width: 100%;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
z-index: 20;
background: #5abdff;
}
#header2 {
position: fixed;
width: 100%;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
z-index: 20;
background: #fdc412;
}
#header3 {
position: fixed;
width: 100%;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
z-index: 20;
background: #fd8f1e;
}
#header4 {
position: fixed;
width: 100%;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
z-index: 20;
background: #fdc412;
}
#name {
float: left;
width: 35%;
}
#name h1 {
padding: 10px 0 10px 20px;
color: #fff; 
text-shadow: 1px 2px #000;
font-size: 2rem;
}
nav {
float: right;
width: 65%;
text-align: right;
}
nav ul {
padding: 0 20px 0 0;
float: right;
}
nav ul li {
float: left;
display: inline-block;
}
nav ul li a {
padding: 20px 10px;
color: #fff;
display: inline-block;
font-size: 1rem;
text-decoration: none;
}
nav ul li a:hover {
color: #000;
}

/* BANNER
------------------------------------------------------------------------------*/
#banner {
position: fixed;
top: 40px;
background-size: cover;
}
#banner img {
width: 100%;
max-width: 100%;
height: 348px;
overflow: hidden;
text-align: center;
}

/* CONTENT
------------------------------------------------------------------------------*/
#content {
position: relative;
float: left;
width: 100%;
top: 360px;
z-index: 5;
}
#content2 {
position: relative;
float: left;
width: 100%;
top: 60px;
z-index: 5;
}
#row1 {
float: left;
width: 100%;
background: #5abdff;
}
#row2 {
float: left;
width: 100%;
background: #fdc412;
}
#row3 {
float: left;
width: 100%;
background: #fd8f1e;
}
#row4 {
float: left;
width: 100%;
background: #fdc412;
}
#center {
margin: 0 auto;
width: 960px;
}
#col1 {
float: left;
width: 96%;
margin: 20px 2%;
}
#col2 {
float: left;
width: 46%;
margin: 20px 2%;
}
#col3 {
float: left;
width: 29.33333333%;
margin: 20px 2%;
}
#col1 img, #col2 img, #col3 img {
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: 8px;
}
#col-sidebar {
float: left;
width: 30%;
padding: 2% 3%;
}
#col-content {
float: left;
width: 58%;
padding: 2% 3%;
}

/* TEKST
------------------------------------------------------------------------------*/
h2 { 
color: #fff;
text-shadow: 1px 2px #000;
margin: 20px 0 0 0;
}
p {
font-size: 1rem;
margin: 5px 0;
}
p.top  {
margin: 2em 0;
text-align: center;
}

/* MEDIA QUERIES
------------------------------------------------------------------------------*/
@media (max-width: 1250px) {
#name {
width: 100%;
}
nav {
float: left;
width: 100%;
text-align: left;
}
nav ul {
margin: 0 0 0 10px;
float: left;
}
#banner {
position: fixed;
top: 100px;
height: 150px;
background-size: cover;
}
#content2 {
top: 140px;
}
}
/*----------------------------------------------------------------------------*/
@media (max-width: 1023px) {
#banner {
display: none;
}
#content {
top: 140px;
}
#center {
margin: 0;
width: 100%;
}
}
/*----------------------------------------------------------------------------*/
@media (max-width: 799px) {
#header1 {
position: static;
}
#header2 {
position: static;
}
#header3 {
position: static;
}
#header4 {
position: static;
}
#name h1 {
font-size: 1.5rem;
padding: 10px 20px;
}
nav {
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #000;
}
nav ul li {
float: left;
display: block;
border-bottom: 1px solid #000;
width: 100%;
margin: 0;
padding: 0;
}
nav ul li a {
padding: 10px 0 10px 20px;
color: #fff;
display: block;
font-size: 1.1rem;
text-decoration: none;
}
nav ul li a:hover {
color: #000;
}
#content, #content2 {
top: 0px;
}
#col1, #col2, #col3, #col-sidebar, #col-content {
width: 96%;
}
h2 {
margin: 10px 10px 0 10px;
}
p {
font-size: 1.1rem;
margin: 10px;
}
}