/* 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:#f4f4f4;
}

/* body voor tablets en desktops */
@media screen and (min-width: 600px) {
body {
background-image:url(../images/body-bg.jpg);
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
}
}

/* styling navigatiebalk */
/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
  background-color: #9f111b;
  border-bottom:solid 1px #ffffff;
  }
 
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #6d0b12;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #101010;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the 
first one ("Home"). Show the link that contains should open and close the topnav 
(.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
	background-color: #6d0b12;
	color: white;
  }
  }

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on 
the icon. This class makes the topnav look good on small screens 
(display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/* einde styling navigatiebalk */

/* styling top blok onder nav balk */
.grid-container {
display:grid;
grid-template-columns: auto;
grid-template-rows:330px 0px 0px;
background-color:#fff;
 z-index: 1;
} 
.grid-item1 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-4.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:100px 200px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item2 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-3.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:160px 100px;
grid-column-start:1;
grid-column-end:1;
z-index: 0;
}

.grid-item3 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-2.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:100px 200px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item4 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-5.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:100px 200px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item5 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-8.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:100px 200px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item6 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-7.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:100px 200px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item7 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-6.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:100px 200px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item8 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-9.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:100px 200px;
grid-column-start:1;
grid-column-end:1;
}

@media screen and (max-width: 990px) {
.grid-container {
display:grid;
grid-template-columns: auto;
grid-template-rows:150px 0px 0px;
grid-gap:0px;
background-color:#fff;
}

.grid-item1 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-4-small.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item2 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-3-small.jpg);
background-repeat:no-repeat;
background-size:auto;
color:#fff;
font-weight:bold;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item3 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-2-small.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item4 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-5-small.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item5 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-8-small.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item6 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-7-small.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item7 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-6-small.jpg);
background-repeat:no-repeat;
background-size:cover;
color:#fff;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

.grid-item8 { 
border-bottom:solid 1px #333;
background-image:url(../images/background/bg-9-small.jpg);
background-repeat:no-repeat;
background-size:auto;
color:#fff;
font-weight:bold;
padding:30px 40px;
grid-column-start:1;
grid-column-end:1;
}

}

/* styling top tekst */
div.grid-item1 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
div.grid-item2 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
div.grid-item3 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
div.grid-item4 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
div.grid-item5 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
div.grid-item6 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
div.grid-item7 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}
div.grid-item8 h1 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
}

/* styling top tekst voor tablets*/
@media screen and (max-width: 992px) {
div.grid-item1 h1 {
font-size:20px;
}
div.grid-item2 h1 {
font-size:20px;
}
div.grid-item2 h2 {
font-size:10px;
padding-left:5px;
}
div.grid-item3 h1 {
font-size:20px;
}
div.grid-item4 h1 {
font-size:20px;
}
div.grid-item5 h1 {
font-size:20px;
}
div.grid-item6 h1 {
font-size:20px;
}
div.grid-item7 h1 {
font-size:20px;
}
div.grid-item8 h1 {
font-size:20px;
}
}

/* styling top tekst voor mobiel */
@media screen and (max-width: 410px) {
div.grid-item1 h1 {
font-size:14px;
padding-left:0px;
}
div.grid-item2 h1 {
font-size:14px;
padding-left:0px;
}
div.grid-item2 h2 {
font-size:10px;
padding-left:0px;
}
div.grid-item3 h1 {
font-size:14px;
padding-left:0px;
}
div.grid-item4 h1 {
font-size:14px;
padding-left:0px;
}
div.grid-item5 h1 {
font-size:14px;
padding-left:0px;
}
div.grid-item6 h1 {
font-size:14px;
padding-left:0px;
}
div.grid-item7 h1 {
font-size:14px;
padding-left:0px;
}
div.grid-item8 h1 {
font-size:14px;
padding-left:0px;
}
}
/* einde styling top blok onder nav balk */

/* styling breadcrum */
ul.breadcrumb {
  padding: 50px 150px;
  list-style: none;
  background-color: #eee;
  margin-bottom: -15px;
  margin-left: -10px;
  margin-right: -15px;
  z-index= 1;
  }
ul.breadcrumb li {
  display: inline;
  font-size: 15px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #9f111b;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: black;
  text-decoration: underline;
}

@media screen and (max-width: 700px) {
ul.breadcrumb {
  padding: 30px 16px;
}
}
/* einde styling breadcrum */

/* styling content gebied */
#content {
background-color:#fff;
padding-top: 20px;
border-right:solid 1px #333;
border-left:solid 1px #333;
margin: 0 10px;
}
/* voor tablets en desktops */
@media screen and (min-width: 600px) {
#content {
padding-top: 50px;
margin:0 50px;
opacity:0.95;
}
}
/* einde styling content gebied */


/* styling alinea teksten */
p {
font-size:16px;
line-height:25px;
margin: 5px 5px 15px 5px;
color:#333;
}
/* einde styling alinea teksten */

/* styling alinea story teksten */
p.story {
margin: 5px 5px -15px 5px;
}
/* einde styling alinea story teksten */

/* styling alinea akte teksten */
p.akte {
margin: -25px 5px 0px 0px;
}
/* einde styling alinea akte teksten */

/* voor tablets en desktops akte teksten*/
@media screen and (max-width: 640px) {
p.akte {
margin: 10px 5px 0px 0px;
}
}
/* einde styling content gebied */

/* 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 verticaal menu rechts */
#sidebar-right {
padding-top:20px;
}
#sidebar-left {
padding-top:20px;
}

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

.menu-right h3 {
display:block;
background-color:#9f111b;
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:visited {
color:#1c3051;
}

.menu-items-right a:hover {
color:#9f111b;
text-decoration:underline;
}
/* 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: 0px;
margin-left: -5px;
}

.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;
position:relative;
}

@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 {
padding: 20px;
border-radius:5px;
box-shadow: 1px 2px 2px #333;
background-color:#f4f4f4;
}

form fieldset {
border:none;
margin:20px 0;
}

form legend {
color: #1c3051;
font-size: 24px;
font-weight:bold;
}

form label {
float:left;
width:200px;
}

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:#1c3051;
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;
tekst-decoration:none;
}

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

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

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 header */
header {
background-color:#101010;
border-bottom:solid 1px #222222;
padding:20px 0;
height:150px;
z-index: 1;
}
@media screen and (max-width: 410px) {
header  {
height:75px;
padding-top:0;
z-index: 1;
}
}
/* einde styling header */

/* styling header en footer koptekst */
header h1, header h2, footer h2 {
color:#fff;
text-shadow: 2px 2px 2px #000;
margin:5px;
z-index: 1;
}

/* header slogan voor tablets*/
@media screen and (max-width: 992px) {
header h1 {
font-size:24px;
}
header h2 {
font-size:18px;
}	
}

/* styling header tekst voor mobiel */
@media screen and (max-width: 410px) {
header h1 {
font-size:24px;
}
}
/* einde styling header en footer koptekst */

/* styling footer */
footer {
background-color:#212121;
border-top: solid 1px #e0e0e0;
clear:both;
color:#fff;
padding-left:40px;
z-index: 1;
}

#footer-content, #header-content {
padding:5px;
margin:0 10px;
z-index: 1;
}

@media screen and (min-width: 600px) {
#footer-content {
margin:0 50px;
z-index: 1;
}
}
/* einde styling footer */

/* styling footer menu */
.footer-menu li {
margin:10px 0;
padding-left:5px;
list-style:none;
z-index: 1;
}

.footer-menu a:link, .footer-menu a:visited {
color:#fff;
font-size:14px;
text-decoration:none;
z-index: 1;
}

.footer-menu a:hover, .footer-menu a:active {
color:#9f111b;
z-index: 1;
}

footer ul {
color:#fff;
font-size:14px;
list-style:none;
padding-left:20px;
z-index: 1;
}

footer a:link, footer a:visited {
color:#fff;
text-decoration:none;
z-index: 1;
}

footer a:hover {
color:#9f111b;
}

/*styling social iconen in footer */
ul.social-details li {
display:inline-block;
margin:5px;
z-index: 1;
}

/* einde styling footer menu */

.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%;
}

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

/*desktops*/
@media screen and (min-width: 992px) {
#content img {
width:100%;
margin:5px;
}
/* styling special images */
#content img.special-images {
border-radius:5px;
box-shadow: 1px 2px 2px #333;
margin:0px 0px;
width:25%;
margin-right:15px;
margin-left:5px;
}
/* einde styling special images */
}
/* einde styling content afbeeldingen */

/* styling blog */
div.item {
border:solid 1px #999;
border-radius:5px;
box-shadow: 1px 2px 2px #333;
padding:0;
text-align:center;
}

#content .item img {
width:100%;
box-shadow:none;
border-radius:5px 5px 0 0;
max-width:100%;
margin:0;
}

h2.blog-title {
font-size:20px;
margin: -2px 0 0 0;
}

.item a:link, .item a:visited {
display:block;
color:#333;
text-align:center;
text-decoration:none;

}

.item a:hover, .item a:active {
color:#fff;
background-color:#9f111b;
}

p.blog-meta {
font-size:12px;
font-style:italic;
}

p.blog-meta-big {
font-size:16px;
font-style:italic;
margin-top: -15px;
}

a.blog-image-link:link, a.blog-image-link:visited {
background:none;
}

a.blog-image-link:hover, a.blog-image-link:active {
opacity:0.7;
border-radius:5px 5px 0 0;
}

#content .blog-post-image img {
border-radius:0;
min-width:100%;
box-shadow:none;
margin:0;
}
/* einde styling blog */

/* styling lees meer knop */
.leesmeer {
display:block;
background-color:#fff;
color:#101010;
font-size:20px;
cursor:pointer;
border:solid 1px #101010;
padding:10px;
margin:auto;
min-width:100px;
margin-bottom:50px;
}

.lmr {
text-decoration: none;
}

.leesmeer:hover {
background-color:#101010;
color:#fff;
position:relative;
left:1px;
top: 1px;
}
/* einde styling lees meer knop */

/* styling volgende pagina */
.pagination {
  display: inline-block;
  margin-top:40px;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #9f111b;
  color: white;
  border: 1px solid #9f111b;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

/* styling pagina 1 van 2 */
.counter {
    padding: 5px 16px;
    background-color: black;
    color: white;
    border: 1px solid #303030;
    border-radius: 0;
	margin: 0 4px;
	margin-left: 100px;
	display: inline-block;
}
@media screen and (max-width: 510px) {
.counter {
    padding: 5px 16px;
    background-color: black;
    color: white;
    border: 1px solid #303030;
    border-radius: 0;
	margin: 5px 4px;
	margin-left: 100px;
	display: inline-block;
}
}

/* einde styling volgende pagina */

/* styling youtube video's */
.videocontainer {	
position:relative;	
padding-bottom: 56.25%;	
padding-top: 25px;	
height: 0;
margin-bottom:10px;
}

.videocontainer iframe {	
position: absolute;	
top: 0;	
left: 0;	
width: 100%;	
height: 100%;
}
/* einde styling youtube video's */

/* styling advertentie */
.adv {
border:solid 1px #333;
margin-top:30px;
}
/* einde styling advertentie */

/*styling brand*/
div.brand {
padding:5px;
margin:10px 0 0 -30px;
}

/* voor tablets en desktops */
@media screen and (min-width: 300px) {
div.brand {
margin:0;
}

div.brand img {
 max-width: 100%;
  height: auto;
}
}	
/*einde styling brand*/

/* styling gallery */
img {
  vertical-align: middle;
}
#gallery-content img {
border-radius:0px;
box-shadow: 0px 0px 0px #333;
margin:0px 0;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}
/* Hide the images by default */
.mySlides {
  display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 12px;
  padding: 10px 12px;
  position: absolute;
  top: 0;
}
/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
}
.caption-container p {
color:#fff;
}
/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
  padding-left:4px;
}
.column img {
border-radius:0px;
box-shadow: 0px 0px 0px;
}
/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}
/* einde styling gallery */

/* styling lightbox (kaarten) */
.row > .kolom {
padding: 0 8px;
}
.kolom {
float: left;
width: 25%;
}
#myModal img {
border-radius:0px;
box-shadow: 0px 0px 0px #333;
margin:0px 0;
}
#thumbs img {
border-radius:0px;
box-shadow: 0px 0px 0px #333;
margin:0px 0;
margin-bottom: 100px;
}
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 5px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}
/* The Close Button */
.close {
  color: red;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  z-index: 100;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
img.hover-shadow {
  transition: 0.3s;
}
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.kaart-content {
margin-top: -80px;
}
/* einde styling lightbox (kaarten) */

/* styling image modal (foto vergroten) */
#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.model {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  padding-top: 5px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,); /* Black w/ opacity */
}
#myImg {
 cursor: pointer;
}
/* Modal Content (image) */
.model-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1200px;
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #fff;
  padding: 10px 0;
  
}
/* Add Animation */
.model-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* The Close Button */
.dicht {
  position: absolute;
  top: 15px;
  right: 35px;
  color: red;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.dicht:hover,
.dicht:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media screen only and (max-width: 900px){
  .model-content {
    width: 200%;
	
  }
}
/* einde styling image modal (foto vergroten) */

/* styling sidebar new */
.vertical-menu {
  border-radius:5px;
  box-shadow: 1px 2px 2px #333;
}
.vertical-menu h3 {
  margin: 0px;
}
.vertical-menu a {
  background-color: #f4f4f4; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */ 
}
.vertical-menu a:hover {
  background-color: #ddd; /* Dark grey background on mouse-over */
}
.vertical-menu a.active {  border-radius: 5px 5px 0 0;
  background-color: #9f111b; /* Add a green color to the "active/current" link */
  color: white;
}
/* einde styling sidebar new */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #9f111b;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color: #fff;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #6d0b12;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #6d0b12;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/* Einde style the tab */

/* styling sidebar tabs */
.tabs-menu h3 {
  margin: 0px;
}
.tabs-menu a {
  background-color: #fff; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */ 
}
.tabs-menu a:hover {
  background-color: #ddd; /* Dark grey background on mouse-over */
}
.tabs-menu a.active {  border-radius: 5px 5px 0 0;
  background-color: #9f111b; /* Add a green color to the "active/current" link */
  color: white;
}
/* einde styling sidebar tabs */

/* styling tab-gallery */
/* Six columns side by side */
.tabs-column {
  float: left;
  width: 33.32%;
  padding-left:4px;
  padding-bottom: 4px;
}
.tabs-column img {
border-radius:0px;
box-shadow: 0px 0px 0px;
}
#tabs-caption {
  margin: auto;
  display: block;
  text-align: center;
  color: #fff;
  padding: 15px 0;
  background-color:#ddd;
}
/* einde styling tab-gallery */

/* styling tab-video */
.ns-modalBox {
background-color: rgba(0,0,0,1);
font-family:verdana;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
opacity:0;
transition: opacity 300ms ease-in;
-webkit-transition: opacity 300ms ease-in;
-moz-transition: opacity 300ms ease-in;
pointer-events: none;
}
.ns-modalBox:target {
opacity:1;
pointer-events: auto;
}
.ns-modalBox > div {
width: 63%;
position: relative;
margin: 2% auto;
padding: 10px;
color:#fff;
border-radius: 10px;
background: gradient(#6d0b12, #9f111b);
background: -webkit-linear-gradient(#6d0b12, #9f111b);
background: -moz-linear-gradient(#6d0b12, #9f111b);
}
@media screen and (max-width: 480px) {
.ns-modalBox > div {
width:100%;	
}
}
.close1 {
z-index: 99999;
background-color: #9C0F05;
color: #fff;
font-weight: bold;
width: 24px;
line-height: 25px;
position: absolute;
right: -12px;
top: -10px;
text-align: center;
text-decoration: none;
border-radius: 12px;	
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
box-shadow: 1px 1px 3px #000;	
-webkit-box-shadow: 1px 1px 3px #000;
-moz-box-shadow: 1px 1px 3px #000;
}
.close1:hover { 
background-color: #600903; 
}
.ns-modalBox2 {
background-color: rgba(0,0,0,1);
font-family:verdana;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
opacity:0;
transition: opacity 300ms ease-in;
-webkit-transition: opacity 300ms ease-in;
-moz-transition: opacity 300ms ease-in;
pointer-events: none;
}
.ns-modalBox2:target {
opacity:1;
pointer-events: auto;
}
.ns-modalBox2 > div {
width: 63%;
position: relative;
margin: 2% auto;
padding: 10px;
color:#fff;
border-radius: 10px;
background: gradient(#6d0b12, #9f111b);
background: -webkit-linear-gradient(#6d0b12, #9f111b);
background: -moz-linear-gradient(#6d0b12, #9f111b);
}
@media screen and (max-width: 480px) {
.ns-modalBox2 > div {
width:100%;	
}
}
.close2 {
z-index: 99999;
background-color: #9C0F05;
color: #fff;
font-weight: bold;
width: 24px;
line-height: 25px;
position: absolute;
right: -12px;
top: -10px;
text-align: center;
text-decoration: none;
border-radius: 12px;	
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
box-shadow: 1px 1px 3px #000;	
-webkit-box-shadow: 1px 1px 3px #000;
-moz-box-shadow: 1px 1px 3px #000;
}
.close12:hover { 
background-color: #600903; 
}
/* einde styling tab-video */