/***********************************************/
/* 2col_leftNav.css                            */
/* Use with template 2col_leftNav.html          */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
	font-family: Arial,sans-serif;
	font-size: 14px;
	color: #333333;
	line-height: 1.5;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
}

a:link {
	color: #111;
	text-decoration: none;
}
a:visited {
	color: #222;
	text-decoration: none;
}
a:hover {
	color: #F58815;
	text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
}

h2{
 font-size: 114%;
 color: #000000;
}

h3{
 font-size: 100%;
 color: #334d55;
}

h4{
 font-size: 100%;
 font-weight: normal;
 color: #333333;
}

h5{
 font-size: 100%;
 color: #334d55;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}
				

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
	margin: 0;
	padding: 10px 0px;
	/*border-bottom: 1px solid #cccccc;*/
	width: 100%;
}

#navBar{
	margin: 0 79% 0 0;
	padding: 0px;
	background-color: #eeeeee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#content{
  float:none;
	width: 100%;
	margin: 0;
	padding: 0 5% 0 0px;
}


/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
	margin: 0px;
	padding: 30px 0px 10px 10px;
	font-size: 50px;
}


/*************** #pageName styles **************/

#pageName{
	padding: 4px 0px 10px 10px;
/*	background-color: #95B0C3; */
}


/************* #globalNav styles **************/

#globalNav{
color: #cccccc;
padding: 0px 0px 0px 0px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 90%;
	padding: 0px 4px 0px 0px; 
}


/************* #breadCrumb styles *************/

#breadCrumb{
	font-size: 80%;
	padding: 5px 0px 5px 10px;
}


/************** .feature styles ***************/

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 100%;
	clear: right;
}

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: center;
}

.featureright img{
	float: right;
	padding: 0px;
	margin: 0px 5px 20px 30px;
	width: 300px;
	border-radius: 10px;
	border: 0;
}
@media screen and (max-width: 600px) {
	.featureright img{
	width: 200px;
	}
}

.xxfeature img{
	float: right;
	padding: 0px 0px 20px 0px;
	margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 100%;
}

.story p{
	padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
	clear: both;
	font-size: 75%;
	text-align: center;
	color: #4B6D87;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
	the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}


/************* #search styles ***************/

#search{
	padding: 5px 0px 5px 10px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
	display: block;
	margin: 0px;
	padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
	position: relative;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
	padding: 2px 0px 2px 10px;
	border-top: 1px solid #cccccc;
	width: 100%;
  voice-family: "\"}\""; 
  voice-family:inherit;
	width: auto;
}

#sectionLinks a:visited{
	border-top: 1px solid #cccccc;
	padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #dddddd;
	padding: 2px 0px 2px 10px;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
	margin: 0px;
	padding: 0px 0px 10px 10px;
	font-size: 90%;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}


/************** #advert styles **************/

#advert{
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	border-top: 1px solid #cccccc;
}

#advert img{
	display: block;
}


/************** #headlines styles **************/

#headlines{
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 80%;
}

#headlines p{
	padding: 5px 0px 5px 0px;
}


#mainmenu { padding-left: 20px; height: 60px; margin: 0; background: #000; border-top: 1px #000 solid; border-bottom: 1px #000 solid; z-index: 2 }
#mainmenu li { float: left; display: inline; margin-top: 16px; margin-right: 25px; position: relative; overflow: hidden; /* height: 40px;  text-transform: uppercase*/ }
#mainmenu li:hover { overflow: visible }
#mainmenu li a { display: block; height: 40px; font-size: 14px; line-height: 30px;color: #fff;   text-decoration: none }
#mainmenu li a:hover { color: #c90824 }
#mainmenu li.active { color: #F58815; /*height: 30px; border-bottom: 4px #c90824 solid */}
#mainmenu li.active a { color: #F58815;}  /* make sure active color is used */

#mainmenu li.image { margin-top: 2px; margin-right: 140px; }

#mainmenu li ul.submenu { position: absolute; left: -25px; top: 40px; background: #fff; padding: 2px 0 15px; border-top: none; border-radius: 0 0 8px 8px; -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,0.35); -moz-box-shadow: 1px 3px 3px rgba(0,0,0,0.35); box-shadow: 1px 3px 3px rgba(0,0,0,0.35); z-index: 3 }
#mainmenu li ul.submenu li, #mainmenu li ul.submenu li:hover { background: none; height: auto; margin-right: 0; display: block; width: 100% ;text-transform: none}
#mainmenu li ul.submenu li a, #mainmenu li ul.submenu li a { display: block; height: 30px; line-height: 30px; text-decoration: none; white-space: nowrap; padding: 0 25px; border: none; color: #09c; font-weight: bold; font-size: 14px }
#mainmenu li ul.submenu li a:hover { color: #000 }

#headerpicture {
background-image:url("headerimage.jpg");
width: 940px;
height: 270px;
background-repeat: no-repeat;
}
body {
/*	 width: 940px;  */
	 margin: 0px 10px 0px 10px;
}

.feature .warning img{
	float: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 5px 0 5px;
	clear: none;
}

.Finvalid input {
background-color:#FF9999;
}

.feature .pasfoto-links {
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0 10px 0px 0;
}

.feature .fotoos {
	padding: 0px 30px 0px 30px;
	margin: 0 0px 0px 0;
}

.feature .fotoraster {
	padding: 10px;
	margin: 0 0px 0px 0;
	width: 130;
	height: 130;
	object-fit: inside;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* extra om 2 kolommen te maken */
#column1-2 {
    float: left;
    width: 49%;
	padding-right:10px;
	}
#column2-2 {
    overflow: hidden;
    width: 49%;
}

 /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
  width: 100%
}
.aanmeldimage {
  width: 100% ;
  height: 250px;
  background-image: url("dakvhjaaraanmelden.jpg");
  background-size: cover;
  opacity: 1;
  filter: blur(5px);
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

.button {
  background-color: #F58815;
  border: none;
  color: white;
  padding: 7px 25px 7px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 8px;
}
.button a{color: white; }

.sponsor {
	color: #F58815;
	text-align: center;
	font-size: 150%
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.sponsorblok {
	width: 150px;
	height: 150px;
	object-fit: contain;
	padding: 10px;
}
.sponsorblok img {
	width:100%;
	height: 100%;
	object-fit: contain;
}

/* responsive navbar ================================================= */
 /* Add a black background color to the top navigation */
.topnav {
  background-color: #000;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}
.topnav img {
  float: left;
  display: block;
  margin-right: 20px;
}

/* Add an active class to highlight the current page */
.topnav .active {
  /* background-color: #04AA6D; */
  color: #F58815;
}
.topnav .active a{
  color: #F58815;
}

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

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

/* 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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	clear: left;
	line-height: 0.5;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
} 

@media screen and (max-width: 800px) {
	#column1-2 {
    width: 100%;
	}
	#column2-2 {
    width: 100%;
}}