/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 { 
margin:0;
padding:0;
}
* {
box-sizing: border-box;
}

/* einde reset */

* {
font-family: 'Roboto', sans-serif;
}

body {
background-color:#F0F0F5;
}

/* styling navigatiebalk */
#navigation {
background-color:#F68213;
}

/*----- Het Menu -----*/
.menu {
padding:10px 18px;
}

.menu ul {
display:inline-block;
}
 
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
} 
 
.menu a:link, .menu a:visited {
color:#F5F5F5;
text-decoration:none;
font-size:18px;
}
 
.menu a:hover {
text-decoration:none;
color:#2E3192;
}

/*----- Sub menu items -----*/
.menu ul ul {
display:none;
position: absolute;
top:125px;
left:850px;
background-color: #F68213;
padding: 12px 16px;
border-radius: 0 0 5px 5px;
z-index:1;
}

.menu li:hover ul {
display:block;
}

.menu ul ul li {
float:none;
margin:5px;
}

/*----- Menu voor mobiele gebruikers -----*/
@media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
 
.menu ul.menubar {
display:none;
}
 
.menu ul {
position:absolute;
top:100%;
left:0px;
padding:10px 50px 10px 20px;
box-shadow:0px 1px 1px #000;
border-radius:3px;
background:#333;
z-index:1
}

.menu li {
margin:10px 0px;
float:none;
display:block;
}
 
.menu a {
display:block;
text-decoration:none;
}
.menu ul ul {
position: relative;
top:10px;
left:0px;
background-color: #333;
border:none;
box-shadow:none;
margin: -10px -50px 0 -20px;
}

.menu ul ul a {
font-size:14px;
}

}

/*----- Uitklap knop verbergen voor niet mobiele gebruikers -----*/
.togglebutton {
display:none;
}

/*----- Uitklap knop voor mobiele gebruikers -----*/
@media screen and (max-width: 860px) {
.togglebutton {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px #000;
border-radius:3px;
background-color:#333;
text-shadow:2px 2px 2px #444;
color:#fff;
font-size:20px;
} 
}

/* einde styling navigatiebalk */

/* styling content gebied */
#content {
background-color:#fff;
padding:5px;
border-right:solid 1px #333;
border-left:solid 1px #333;
margin: 0 10px;
}
/* einde styling content gebied */




/* styling alinea teksten en lijsten */
p, ol, ul, dl {
font-size:16px;
line-height:25px;
margin: 5px 5px 15px 5px;
color:#333;
}


ul, ol {
list-style-position:inside;

}

ul {
	list-style-type:none;
	list-style-image: url(../images/arrow.png);
}
/* einde styling van alineas en lijsten */

/* styling kopteksten */
h1, h2, h3, h4, h5, h6 {
margin: 5px 5px 15px 5px;	
}

h1 {
font-size:36px;
}

h2 {
font-size:30px;		
}

h3 {
font-size:24px;	
}

h4 {
font-size:20px;	
}

h5 {
font-size:19px;		
}

h6 {
font-size:18px;	
}
/* einde styling kopteksten */

/* styling header en footer */
header, footer {
background-color:#2E3192;
padding:20px 0;
text-align:center;
}

header {
	
	border-bottom:solid 1px #333;
} 

footer {
	border-top: solid 1px #333;
	clear:both;
	}	
	
/* einde styling header en footer */

/* styling header koptekst */
header h1 {
color:#F68213;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
/* einde styling header koptekst */

/* styling footer koptekst */
footer h2 {
	color:#F68213;
	
}

/* styling verticaal menu rechts */
.menu-right {
padding: 20px;
border-radius:5px;
box-shadow: 1px 2px 2px #333;
background-color:#f4f4f4;	
}

.menu-right h3 {
display:block;
background-color:#1c3051;
color:#fff;
text-shadow: 1px 1px 1px #666;
padding:10px;
margin:-20px -20px 20px -20px;
border-radius: 5px 5px 0 0;
}

ul.menu-items-right  {
list-style-type:none;
}

.menu-items-right li {
margin: 10px 0;
list-style-image:none
}

.menu-items-right a {
color:#333;
text-decoration:none;
display:block;
border-bottom: dashed 1px #666;
}

.menu-items-right a:hover {
color:#ff6600;
text-decoration:underline;
}

.menu-items-right a:visited {
color:#1c3051;
}

/* einde styling verticaal menu rechts */

/* fluid grid */
/* Voor smartphones */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
width: 100%;
}

@media only screen and (min-width: 600px) {
/* Voor tablets: */
.col-tab-1 {width: 8.33%;}
.col-tab-2 {width: 16.66%;}
.col-tab-3 {width: 25%;}
.col-tab-4 {width: 33.33%;}
.col-tab-5 {width: 41.66%;}
.col-tab-6 {width: 50%;}
.col-tab-7 {width: 58.33%;}
.col-tab-8 {width: 66.66%;}
.col-tab-9 {width: 75%;}
.col-tab-10 {width: 83.33%;}
.col-tab-11 {width: 91.66%;}
.col-tab-12 {width: 100%;}

.col-tab-pull-12 {
right: 100%;
}
  
.col-tab-pull-11 {
right: 91.66666667%;
}
  
.col-tab-pull-10 {
right: 83.33333333%;
}
  
.col-tab-pull-9 {
right: 75%;
  }
  
.col-tab-pull-8 {
right: 66.66666667%;
}
  
.col-tab-pull-7 {
right: 58.33333333%;
}
  
.col-tab-pull-6 {
right: 50%;
}
  
.col-tab-pull-5 {
right: 41.66666667%;
}
  
.col-tab-pull-4 {
right: 33.33333333%;
}
  
.col-tab-pull-3 {
right: 25%;
}
  
.col-tab-pull-2 {
right: 16.66666667%;
}
  
.col-tab-pull-1 {
right: 8.33333333%;
}
  
.col-tab-pull-0 {
right: auto;}
  
.col-tab-push-12 {
left: 100%;
}
  
.col-tab-push-11 {
left: 91.66666667%;
}
  
.col-tab-push-10 {
left: 83.33333333%;
}
  
.col-tab-push-9 {
left: 75%;
}
  
.col-tab-push-8 {
left: 66.66666667%;
}
  
.col-tab-push-7 {
left: 58.33333333%;}
  
.col-tab-push-6 {
left: 50%;}
  
.col-tab-push-5 {
left: 41.66666667%;}
  
.col-tab-push-4 {
left: 33.33333333%;
}
  
.col-tab-push-3 {
left: 25%;}
  
.col-tab-push-2 {
left: 16.66666667%;}
  
.col-tab-push-1 {
left: 8.33333333%;
}
  
.col-tab-push-0 {left: auto;
}

}

.row {
margin-right: -15px;
margin-left: -15px;
}

.row::after {
content: "";
clear: both;
display: block;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
padding: 15px;
}
@media only screen and (min-width: 992px) {
/* Voor desktops */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-pull-12 {
right: 100%;
}
  
.col-pull-11 {
right: 91.66666667%;
}
  
.col-pull-10 {
right: 83.33333333%;
}
  
.col-pull-9 {
right: 75%;
  }
  
.col-pull-8 {
right: 66.66666667%;
}
  
.col-pull-7 {
right: 58.33333333%;
}
  
.col-pull-6 {
right: 50%;
}
  
.col-pull-5 {
right: 41.66666667%;
}
  
.col-pull-4 {
right: 33.33333333%;
}
  
.col-pull-3 {
right: 25%;
}
  
.col-pull-2 {
right: 16.66666667%;
}
  
.col-pull-1 {
right: 8.33333333%;
}
  
.col-pull-0 {
right: auto;}
  
.col-push-12 {
left: 100%;
}
  
.col-push-11 {
left: 91.66666667%;
}
  
.col-push-10 {
left: 83.33333333%;
}
  
.col-push-9 {
left: 75%;
}
  
.col-push-8 {
left: 66.66666667%;
}
  
.col-push-7 {
left: 58.33333333%;}
  
.col-push-6 {
left: 50%;}
  
.col-push-5 {
left: 41.66666667%;}
  
.col-push-4 {
left: 33.33333333%;
}
  
.col-push-3 {
left: 25%;}
  
.col-push-2 {
left: 16.66666667%;}
  
.col-push-1 {
left: 8.33333333%;
}
  
.col-push-0 {left: auto;
}

/* einde fluid grid */

/* styling formulieren */

ol.forms {
list-style-type:none;
}

ol.forms li {
margin:2px 0;
padding:10px;
background-color:#dcdcdc;
border-radius:5px
}
form fieldset {
border:none;
margin:20px 0;
}
form {
padding: 20px;
border-radius:5px;
box-shadow: 1px 2px 2px #333;
background-color:#f4f4f4;
}
form legend {
color: #1c3051;
font-size: 24px;
font-weight:bold;
}
form label {
float:left;
width:300px;
}
form input, form textarea, form select {
border:solid 1px #999;
border-radius:5px;
padding:10px;
}
form input[name="naam"], form input[name="email"], form input[name="onderwerp"], form textarea  {
width:100%;
}

@media only screen and (min-width: 992px) {
form input[name="naam"], form input[name="email"], form input[name="onderwerp"], form textarea  {
width:60%;
}	
}
form input:focus, form textarea:focus, form select:focus {
border:solid 2px #1c3051;
}

form button {
display:block;
background-color:#2E3192;
color:#fff;
font-size:20px;
font-weight:bold;
cursor:pointer;
border:solid 1px #fff;
padding:10px;
margin:auto;
border-radius:5px;
box-shadow: 2px 2px 2px #333;
min-width:100px
}

form button:hover {
background-color:#ff6600;
position:relative;
left:1px;
top: 1px;
box-shadow:1px 1px 2px #333;
}
/* einde styling formulieren */

/* styling login formulier */
form#inlogform {
background-color:#F68213;
}

form#inlogform input {
border:solid 1px #999;
border-radius:5px;
padding:10px;
margin-bottom:10px;
width:100%;
}

form#inlogform input:focus {
border:solid 2px #ff0000;
}

form#inlogform label {
color:#fff;
}

form#inlogform ol {
list-style-type:none;
}


/* einde styling login formulier */

/* styling artikel meta */
div.article-meta {
display:block;
padding:0px;
border:dashed 1px #999;
}

span.article-meta-item {
font-weight:bold;	
}
/* einde styling artikel meta */

/* styling tabellen */
table {
	padding:10px;
	border-spacing:0;
	background-color:#F68213;
border-radius:5px;
box-shadow: 1px 2px 2px #333;
}

td, th {
padding:10px;
border-spacing:0;
}

td {
text-align:left;
}

th {
text-align:center;
}

thead th {
border-bottom: solid 2px #1c3051;
}

tfoot th, tfoot td {
border-top: solid 2px #1c3051;
}

tr:nth-child(even) {
background-color:#2E3192;
color:#fff;
}
div.table {
	overflow-x:auto;
}

/* einde styling tabellen */

/* styling hyperlinks */
a {
font-size:16px;
line-height:25px;
}

a:link {
color:#1c3051;
text-decoration:none;
}

a:visited {
color: #666;
}

a:hover {
color:#ff6600;
text-decoration:underline;
}

a:active {
color:#000;
}

/* einde styling hyperlinks */

/* hyperlinks in de class special */
a.special:link {
color:#ff0000;
text-decoration:none;
}

a.special:visited {
color: #cc5400;
}

a.special:hover {
color:#040B8F;
text-decoration:underline;
}

a.special:active {
color:#000;
}
/* einde hyperlinks in de class special */

.pull-left {
float:left;
}

.pull-right {
float:right;
}

/* styling content afbeeldingen */
/*smartphones*/
#content img {
border-radius:5px;
box-shadow: 1px 2px 2px #333;
margin:5px auto;
width:100%;
max-width:300px
}

/*tablets*/
@media screen and (min-width: 600px) {
#content img {
width:40%;
margin:5px;
}
}

/*desktops*/
@media screen and (min-width: 992px) {
#content img {
width:50%;
margin:5px;
}
}
/* einde styling content afbeeldingen */