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

/* styling navigatiebalk */
#navigation {
	
background-color:rgb(92, 93, 93);

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

}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:18px;
} 
.menu a {
color:   #06F89F;
text-decoration:none;
}
.menu a:hover {
text-decoration:none;
color:#ff6600;
}
/*----- 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;
}

.menu li {
margin:10px 0px;
float:none;
display:block;
}
 
.menu a {
display:block;
text-decoration:none;
}
}

/*----- 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 Tag-P teksten */
p {
font-size:18px;
line-height:25px;
margin: 5px 5px 15px 5px;
color:#333;
}
/* einde styling alinea  Tag-P teksten */

/* 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:#85929E;
padding:20px 0;
}

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

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


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

/*----- styling header tekst voor mobiel -----*/

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


  background: #000;
}




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

.menu-right h3 {
display:block;
background-color: rgb(159, 206, 202);
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;
}

.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:#ff6600;
text-decoration:underline;
}

/* einde styling verticaal menu rechts */

/* styling foto's */






.img-singel{
	width:  144px;
	height: 1032px;
	float: left;
	margin-left: 70px;
	
	
	
	
}

div.gallery {
    margin: 3px;
    border: 1px solid #336699;
    float: left;
    width: 190px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: 200px;
}

div.desc {
    padding: 15px;
    text-align: center;
	color: #004d00;
}


}

div.gallery-familie {
    margin: 3px;
    border: 6px solid #336699;
    float: left;
    width: 190px;
}

div.gallery-familie:hover {
    border: 1px solid #777;
}

div.gallery-familie img {
    width: 100%;
    height: 500px;
}

div.desc-familie {
    padding: 15px;
    text-align: center;
	color: #366a56;
}


/* Einde styling Foto's */


.maps{
	
	padding-top: 80px;
	
	padding-bottom: 80px;
		
}

.maps H3{
	
	color: red;
	
}

  #map {
        height: 200px;
        width: 100%;
		
       }
	   
	   /* Styling Media Buttons */
   
   .fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}



/* 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;
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 */

.errormsg{
	color:#f70d1e;
	font-weight:bold;
	font-style:italic;
	font-size:10px;
	
	
	
}

.invul{
	
	color:#e7d51c;
	font-weight:bold;
	font-style:italic;
	font-size:15px;
	
	
}

td{
	
	border:solid 1px #85849e;
	padding: 5px 20px;
	
		
}

.Groot{
	
	
	width:250px;
	
	
}



.blue-button {
	
	background-color: #1c3051;
	color: #fff;
	border: solid 1px #999;
	border-radius : 5px;
	padding: 5px 15px;
	box-shadow: 2px 10px 2px #333;
	font-weight: bold;
	width:250px;
	transition: all 0.3s ease-in-out 0s;
	
	
	
}

.blue-button:hover {
	
	background-color: #ff6600;
	color: red;
	
}
	#klokbalk {
	width:250px;
	color: #21E611;
	background-color: #DCDDBF;
	
}

.datum{
	
	width:250px;
	color: #DCDDBF;
	background-color: #DCDDBF;
	
	
	
}





iframe {
	
	color: white;
	background-color: lightblue;
	
	
}




/* Begin tryout balk boven */



	

.flex-container {
	
		margin: 0 auto;
		padding-left: 10px ;
	
	
		background-color: black; 
        display: flex;
        align-items: center; /* Use another value to see the result */
        width: 50%;
        height: 300px;
		
		
		
				
      }
      .flex-container > div {
		  
				
		opacity: 0.8;
        width: 33%;
      	margin: 5px;			
      }
	  
	 .flex-container #Geerit marquee{
	  height: 250px;
      font-size: 30px;
      font-weight: 800;
      color: blue;
      font-family: sans-serif;
      border: 15px solid #666;
	  background-color: red;
	  opacity: 1.9;
	  }
	  
	  
	  
	  .flex-container #Geerit1 marquee{
		height: 150px;
		font-size: 30px;
		font-weight: 800;
		color: red;
		font-family: sans-serif;
		border: 15px solid #666;
		background-color: white;
	  
	  }
	  
	  
	  .flex-container #Geerit2 marquee {
		 height: 75px;
		font-size: 30px;
		font-weight: 800;
		color: white;
		font-family: sans-serif;
		border: 15px solid #666;
		background-color: blue;
		
	  
	  }
	  
	
	
/* Einde Begin tryout balk boven */