/*max 608px */
@media only screen and (max-width: 38em){
	
	*{
		padding:0;
		margin:0
	}
	*,:after,:before{
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box
	}
	body{
		font-family: Verdana,Arial,sans-serif;
		font-size: 16px;
		font-weight: 400;
		hyphens: auto;
	}
	
	.top,
	a:active,
	a:link,
	a:visited {
	color: #fff
	}

.top {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	top: 0;
	z-index: 5;
	color: #fff;
	text-align: left;
	font-family: Trebuchet, Trebuchet MS, Helvetica, sans-serif;
	font-size: 2em;
	letter-spacing: 3px;
	line-height: 1.5;
	padding-top: 20px;
	padding-bottom: 10px;
	}

.top2 {
	width: 100%;
	text-align: left;
	background-color: #1E4B2E;
	}

	.footer {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	bottom: 0;
	height: 100px;
	}

	a{
		text-decoration:none
	}
	a:active,a:link,a:visited{
		color:#fff
	}
	a:hover{
		color:#B0D9C6;
		text-decoration:underline
	}
	img{
		vertical-align: middle;
	}
	
	.info img{
		height:25px;
		width:25px;
		vertical-align: middle;
	}
	.info{
		padding-left: 15px;
		padding-right: 15px;
		cursor: pointer;
		}
	
	h2.stap {
		font-family:Verdana,Arial,sans-serif;
		text-align:left;
		font-weight:400;
		letter-spacing:3px;
	}
	
	.menuhouder{
		width:100%;
		max-width:1000px;
		margin:0 auto:
		font-size: 15px;
	}
	
	#container{
		width:96%;
		max-width:1000px;
		padding:2px;
		border:1px solid #000;
		margin: 0 auto;
		margin-top: 150px;
		margin-bottom: 250px;
	}
	
	.A,.A2{
		margin-left:3%
	}
	h1#kop{
		font-size:1.4em;
		line-height:1.2;
		letter-spacing:6px;
		color:#8b1f37;
		padding-bottom: 30px;
	}
	h2.stap{
		font-size:1.1em;
		line-height:1.7;
		margin-top:30px;
		margin-bottom:15px;
		padding:7px;
		border-top-right-radius:20px;
		background-color:#F5ECCE
	}
	.veilig{
		float:right;
		margin-right:3%;
		height: 40px;
		width: auto;
		position: relative;
		top: -3px;
	}
	.A{
		width:97%;
		display: inline-block;
		margin-left: 3%;
		line-height: 1.4;
	}
	.A2{
		margin-bottom:.5em;
		border-bottom:1px dotted grey;
		margin-top: 25px;
		padding-bottom: 10px;
	}
	
	input[type=tel] {
	border-color: rgb(211, 211, 211) rgb(211, 211, 211) rgb(211, 211, 211) rgb(112, 128, 144); 
	border-style: solid; 
	border-width: 1px 1px 1px 7px; 
	border-image: none 100% / 1 / 0 stretch; 
	border-radius: 4px;
	padding: 4px;
	font-size: 16px;
	font-family: Verdana,Arial,sans-serif;
	}
	
	input[type=text], input[type=email] {
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	padding: 4px;
	font-size: 16px;
	font-family: Verdana,Arial,sans-serif;
	}
	
	select {
  	font-size: 16px;
  	font-family: Verdana,Arial,sans-serif;
	}
	
	/*Alle inputs en de custom-select in de div gegevens krijgen een marge links van 7px, zodat ze een beetje inspringen onder de begeleidende tekst */
	#gegevens input[type=text], input[type=email], input[type=tel] {
	margin-left: 7px;
	}
	
	.custom-select-wrapper {
	margin-left: 7px; 
	}
	
	input[type="checkbox"], input[type="radio"] {
	font-family: Verdana,Arial,sans-serif;
	}
	
	.B{
		width:97%;
		display: inline-block;
		margin-left: 3%;
		line-height: 2;
		margin-bottom: 25px;
		margin-top: 4px;
	}
	.C,.C2{
		width:96%;
		margin-left:4%
	}
	.C{
		line-height:1.6
	}
	.D,.D2{
		font-size:13px;
		line-height:1.2;
		margin-top:1em
	}
	.C2{
		margin-bottom:2em;
		line-height: 2.3;
		margin-right: 10px;
	}
	.D{
		width:85%;
		margin-left:7%;
		margin-bottom:1.3em
	}
	.D2{
		width:95%
	}
	.E,.E2{
		width:90%;
		text-align:center;
		margin:0 auto
	}
	.F,.G{
		text-align:right;
		display:inline-block;
	}
	.F{
		width:98%;
		line-height:2.5;
		margin-top: 5px;
	}
	.G{
		width:98%;
		margin-bottom:12px;
		line-height:1.8;
	}
	.footer2,.pijl{
		text-align:center
	}
	.H{
		margin-top:30px;
		background-color:#fcf9f0;
		padding-top:8px;
	}
	.I{
		width:96%;
		display:inline-block;
		vertical-align:top;
		margin-left:4%;
		line-height:1.6
	}
	.J{
		width:90%;
		display:inline-block;
		vertical-align:top;
		margin-left:7%;
		line-height:2.2
	}
	textarea{
		width:95%;
		margin-top:.75em;
  		border : 1px solid #d3d3d3; 
  		border-left:7px solid #708090; 
  		text-align: left; 
  		border-radius: 6px; 
  		padding: 4px;
  		font-size: 15px;
  		font-family: Verdana,Arial,sans-serif;
  		padding-left: 10px; 
	}
	
	#BTW {
			width: 85%;
	}
	.img2{
		max-width:100%;
		display:block;
		margin-top:15px;
		margin-bottom:25px
	}
	#knop {
	margin-top: 28px; 
	margin-bottom: 20px;
	cursor: pointer; border: none; 
	color: white; 
	border-top-right-radius: 8px; 
	padding-top: 8px; 
	padding-right: 15px; 
	padding-left: 15px; 
	padding-bottom: 8px; 
	background-color: #66809a; 
	margin-right: 18px; 
	font-size: 18px; 
	letter-spacing: 3px; 
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
	}
	#knop:hover {
	background-color: white; 
	color: #66809a; 
	cursor: pointer;
	}
	#knop:active {
	transform: translateY(3px);
	}
	.footer2,.pijl,.pijl a:link,.pijl a:visited{
		color:#fff
	}
	#knop:active{
		transform:translateY(2px)
	}
	
	.footer2{
		width:100%;
		margin:0 auto;
		font-family:Verdana,Geneva,sans-serif;
		font-size:.8em;
		line-height:1.3;
		background-color:#255937;
		padding:10px 5px
	}
	.pijl{
		font-size:2.2em;
		padding:8px;
		cursor: pointer;
	}
	.pijl a:hover{
		color:#B0D9C6;
		text-decoration:none
	}
	.pijl a:active{
		color:#fff
	}
	.class2 A:active,.class2 A:hover,.class2 A:link,.class2 A:visited{
		text-decoration:none;
		color:#000;
		font-size:1em;
		font-family:Verdana,Geneva,sans-serif;
		line-height:1.5
	}
	.vet{
		font-weight:700
	}
	.class2 A:hover{
		background-color:#98C394
	}
	#overlay{
		display:none;
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		z-index:1000;
		background-color:#000;
		background-color:rgba(0,0,0,.2)
	}
	#overlay div{
		width:60%;
		max-width:530px;
		margin:7% auto;
		background-color:#fefefe;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:20px;
		box-shadow:0 4px 8px 0 rgba(0,0,0,.5),0 6px 20px 0 rgba(0,0,0,.49);
		-webkit-animation-name:animatetop;
		-webkit-animation-duration:.7s;
		animation-name:animatetop;
		animation-duration:.7s
	}
	#overlay div p.p1,#overlay div p.p2{
		width:100%;
		background-color:#1E4B2E;
		color:#fff;
		padding:8px;
		font-size:1em
	}
	@-webkit-keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	@keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	#overlay div p.p1{
		text-align:left;
		font-family:Verdana,Geneva,sans-serif;
		-moz-border-radius:10px 10px 0 0;
		-webkit-border-radius:10px 10px 0 0;
		border-radius:10px 10px 0 0
	}
	#overlay div p.p2,#overlay div ul{
		font-family:Verdana,Geneva,sans-serif;
		text-align:center
	}
	#overlay div p.p2{
		margin-top:15px;
		-moz-border-radius:0 0 10px 10px;
		-webkit-border-radius:0 0 10px 10px;
		border-radius:0 0 10px 10px
	}
	#overlay div ul{
		font-size:.8em;
		list-style:square inside url(groenblok.gif);
		padding-left:8px;
		display:block
	}
	#overlay div img{
		max-width:100%;
		height:auto;
		display:block;
		margin:10px auto
	}
	#overlay div button{
		float:right;
		background-color:#e7fef3;
		color:#000;
		border:2px solid #1E4B2E;
		padding:3px;
		border-radius:4px
	}
	#overlay div button:hover{
		background-color:#fff;
		color:#1E4B2E;
		cursor:pointer
	}
	#overlay div button:active{
		transform:translateY(1px)
	}
	input.borderleft {
	border-left:7px solid #66809a;
	}
	input.scherp {
	border : 2px solid #9a8066;
	}
	
	#hulp {
  		max-height: 0;
  		overflow: hidden;
  		-webkit-transition: max-height 0.4s ease-out;
  		-moz-transition: max-height 0.4s ease-out;
  		-o-transition: max-height 0.4s ease-out;
  		-ms-transition: max-height 0.4s ease-out;
  		transition: max-height 0.4s ease-out;
  		-webkit-font-smoothing: subpixel-antialiased;
  		-webkit-transform: translateZ(0) scale(1.0, 1.0);
  		cursor: pointer;
	}
	.blogo {
		height: 35px; 
		width: auto; 
		margin-right: 5px;
		margin-bottom: 5px;}
	
	.pmetpix {
		padding-top: 10px;
		padding-bottom: 35px; }
		
	#subtotrood, #subtotgroen {
		display: none;
	}
	#inclusief {
		display: none;
	}
	
/*   Styles voor checkbox en radio,  Hide default input */
label input[type="checkbox"],
label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #0056b3;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  outline: none;
  transition: 0.3s;
  vertical-align: middle;
}

/* Checkmark for checkbox */
label input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path d="m185.7 522.3 210.02 355.12c217.65-339.84 462.04-637.7 683.52-809.52 49.637-45.824 126.01-19.09 72.547 30.547-248.21 255.83-439.12 546.05-633.88 1000.4-76.371 53.457-164.2 80.191-206.2 30.547l-274.94-492.59c-38.18-61.094 95.461-202.38 148.92-114.55z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  fill: #111fb2; /* Default checkmark color */
}

/* Show checkmark when checked */
label input[type="checkbox"]:checked::before {
  opacity: 1;
}

label input[type="checkbox"]:checked {
  fill: #111fb2; /* Change this to any color */
}

/* Safari-specific fix*/ 
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    label input[type="checkbox"]::before {
      width: 10px;
      height: 10px;
    }
  }
}

/* Round style for radio buttons */
label input[type="radio"] {
  border-radius: 50%;
}

/* Dot inside the radio button */
label input[type="radio"]::before {
  content: "";
  position: absolute;
  width: 10px;  /* Size of the dot */
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show dot when radio button is checked */
label input[type="radio"]:checked::before {
  opacity: 1;
  background-color: #0056b3; /* Dot color */
  width: 10px;
  height: 10px;
}

/* styles voor custom-select */

.custom-select-wrapper {
  position: relative;
  width: 180px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  display: inline-block;
}

#dhr.custom-select-wrapper {
	width: 130px; }

.custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  border-left: 7px solid #66809a;
  background-color: #fff;
  line-height: 1.5; 
  padding: 4px;
  display: flex;
  align-items: center;
}

.custom-select-trigger {
  flex-grow: 1;  /* Allows text to take up available space */
  text-align: left; 
}

.arrow {
  position: absolute; /* Positions the arrow correctly */
  right: 10px; /* Moves it to the right */
  top: 50%;
  transform: translateY(-50%) rotate(-45deg); /* Centers arrow vertically */
  width: 11px;
  height: 11px;
  border-left: 2px solid #0056b3;
  border-bottom: 2px solid #0056b3;
  transition: transform 0.4s ease;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  opacity: 0.2;
  transition: all 0.3s linear;
  overflow-y: hidden;
  background-color: transparent;
  width: 100%;
  margin-left: 15px;
  text-align: right;
}

.custom-option {
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #66809a;
  margin-top: 12px;
  border-radius: 4px;
  position: relative;
  background-color: #eff2f4;
  padding: 8px 6px 8px 4px;
  width: 100%;
}

.custom-option:hover {
  background-color: white;
}

.custom-select.open .arrow {
  transform: translateY(-50%) rotate(-135deg);
}

.custom-select.open .custom-options {
  height: 300px;
  width: 100%;
  opacity: 1;
  transition: all 0.4s linear;
}

}


/*608px tot 800px */
@media only screen and (min-width: 38.01em) and (max-width: 50em){
	
	
	*{
		padding:0;
		margin:0
	}
	*,:after,:before{
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box
	}
	body{
		font-family: Verdana,Arial,sans-serif;
		font-size: 17px;
		font-weight: 400;
		hyphens: auto;
	}
	a{
		text-decoration:none
	}
	a:active,a:link,a:visited{
		color:#fff
	}
	a:hover{
		color:#B0D9C6;
		text-decoration:underline
	}
	img{
		vertical-align: middle;
	}
	
	.info img{
		height:25px;
		width:25px;
		vertical-align: middle;
	}
	.info{
		padding-left: 15px;
		padding-right: 15px;
		cursor: pointer;
		}
	.top {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	top: 0;
	z-index: 5;
	color: #fff;
	font-family: Trebuchet, Trebuchet MS, Helvetica, sans-serif;
	font-size: 2.3em;
	letter-spacing: 6px;
	line-height: 1.5;
	padding-top: 20px;
	padding-bottom: 10px;
	}
	.top2 {
	width: 100%;
	text-align: left;
	}
	
	h2.stap {
		font-family:Verdana,Arial,sans-serif;
		text-align:left;
		font-weight:400;
		letter-spacing:3px;
	}
	
	.menuhouder{
		width:100%;
		max-width:1000px;
		margin:0 auto;
		font-size: 15px;
	}
	
	#container{
		width:96%;
		max-width:1000px;
		padding:2px;
		border:1px solid #000;
		margin: 0 auto;
		margin-top: 170px;
		margin-bottom: 220px;
	}
	.A,.A2{
		margin-left:4%
	}
	h1#kop{
		font-size:2.4em;
		line-height:1.2;
		letter-spacing:10px;
		color:#8b1f37;
		padding-bottom: 30px;
	}
	h2.stap{
		font-size:1.1em;
		line-height:1.7;
		margin-top:30px;
		margin-bottom:15px;
		padding:7px;
		border-top-right-radius:20px;
		background-color:#F5ECCE
	}
	.veilig{
		float:right;
		margin-right:3%;
		height: 40px;
		width: auto;
		position: relative;
		top: -3px;
	}
	.A{
		width:35%;
		display: inline-block;
		vertical-align: top;
		margin-left: 4%;
		line-height: 3.2;
	}
	.A2{
		margin-bottom:.5em;
		border-bottom:1px dotted grey;
		margin-top: 25px;
		padding-bottom: 10px;
	}
	
	input[type=tel] {
	border-color: rgb(211, 211, 211) rgb(211, 211, 211) rgb(211, 211, 211) rgb(112, 128, 144); 
	border-style: solid; 
	border-width: 1px 1px 1px 7px; 
	border-image: none 100% / 1 / 0 stretch; 
	border-radius: 4px;
	padding: 4px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	
	input[type=text], input[type=email] {
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	padding: 4px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	
	select {
  	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	
	input[type="checkbox"], input[type="radio"] {
	font-family: Verdana,Arial,sans-serif;
	}
	
	.B{
		width:60%;
		display: inline-block;
		vertical-align: top;
		line-height: 3.2;
	}
	.C,.C2{
		width:96%;
		margin-left:4%
	}
	.C{
		line-height:1.6
	}
	.D,.D2{
		font-size:13px;
		line-height:1.2;
		margin-top:1em
	}
	.C2{
		margin-bottom:1.8em;
		line-height: 2.3;
		margin-right: 10px;
	}
	.D{
		width:70%;
		margin-left:8%;
		margin-bottom:1.3em
	}
	.D2{
		width:65%
	}
	.E,.E2{
		width:90%;
		text-align:center;
		margin:0 auto
	}
	.F,.G{
		text-align:right;
		display:inline-block;
	}
	.F{
		width:49%;
		line-height:1.3;
		margin-top: 5px;
	}
	.G{
		width:98%;
		margin-bottom:12px;
	}
	.footer2,.pijl{
		text-align:center
	}
	.H{
		margin-top:30px;
		background-color:#fcf9f0;
		padding-top:8px;
	}
	.I{
		width:96%;
		display:inline-block;
		vertical-align:top;
		margin-left:4%;
		line-height:1.6
	}
	.J{
		width:90%;
		display:inline-block;
		vertical-align:top;
		margin-left:10%;
		line-height:2
	}
	textarea{
		width:90%;
		margin-top:.75em;
  		border : 1px solid #d3d3d3; 
  		border-left:7px solid #708090; 
  		text-align: left; 
  		border-radius: 6px; 
  		padding: 4px;
  		font-family: Verdana,Arial,sans-serif;
		font-size: 16px;
		padding-left: 10px;
	}
	.img2{
		max-width:100%;
		display:block;
		margin-top:15px;
		margin-bottom:25px
	}
	#knop {
	margin-top: 28px; 
	margin-bottom: 20px;
	cursor: pointer; border: none; 
	color: white; 
	border-top-right-radius: 8px; 
	padding-top: 8px; 
	padding-right: 15px; 
	padding-left: 15px; 
	padding-bottom: 8px; 
	background-color: #66809a; 
	margin-right: 18px; 
	font-size: 18px; 
	letter-spacing: 3px; 
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
	}
	#knop:hover {
	background-color: white; 
	color: #66809a; 
	cursor: pointer;
	}
	#knop:active {
	transform: translateY(3px);
	}
	.footer2,.pijl,.pijl a:link,.pijl a:visited{
		color:#fff
	}
	#knop:active{
		transform:translateY(2px)
	}
	.footer {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	bottom: 0;
	height: 100px;
	}
	.footer2{
		width:100%;
		margin:0 auto;
		font-family:Verdana,Geneva,sans-serif;
		font-size:.8em;
		line-height:1.3;
		background-color:#255937;
		padding:10px 5px
	}
	.pijl{
		font-size:2.2em;
		padding:7px;
		cursor: pointer;
	}
	.pijl a:hover{
		color:#B0D9C6;
		text-decoration:none
	}
	.pijl a:active{
		color:#fff
	}
	.class2 A:active,.class2 A:hover,.class2 A:link,.class2 A:visited{
		text-decoration:none;
		color:#000;
		font-size:1em;
		font-family:Verdana,Geneva,sans-serif;
		line-height:1.5
	}
	.vet{
		font-weight:700;
	}
	.class2 A:hover{
		background-color:#98C394;
	}
	#overlay{
		display:none;
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		z-index:1000;
		background-color:#000;
		background-color:rgba(0,0,0,.2);
	}
	#overlay div{
		width:60%;
		max-width:530px;
		margin:7% auto;
		background-color:#fefefe;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:20px;
		box-shadow:0 4px 8px 0 rgba(0,0,0,.5),0 6px 20px 0 rgba(0,0,0,.49);
		-webkit-animation-name:animatetop;
		-webkit-animation-duration:.7s;
		animation-name:animatetop;
		animation-duration:.7s
	}
	#overlay div p.p1,#overlay div p.p2{
		width:100%;
		background-color:#1E4B2E;
		color:#fff;
		padding:8px;
		font-size:1em
	}
	@-webkit-keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	@keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	#overlay div p.p1{
		text-align:left;
		font-family:Verdana,Geneva,sans-serif;
		-moz-border-radius:10px 10px 0 0;
		-webkit-border-radius:10px 10px 0 0;
		border-radius:10px 10px 0 0
	}
	#overlay div p.p2,#overlay div ul{
		font-family:Verdana,Geneva,sans-serif;
		text-align:center
	}
	#overlay div p.p2{
		margin-top:15px;
		-moz-border-radius:0 0 10px 10px;
		-webkit-border-radius:0 0 10px 10px;
		border-radius:0 0 10px 10px
	}
	#overlay div ul{
		font-size:.8em;
		list-style:square inside url(groenblok.gif);
		padding-left:8px;
		display:block
	}
	#overlay div img{
		max-width:100%;
		height:auto;
		display:block;
		margin:10px auto
	}
	#overlay div button{
		float:right;
		background-color:#e7fef3;
		color:#000;
		border:2px solid #1E4B2E;
		padding:3px;
		border-radius:4px
	}
	#overlay div button:hover{
		background-color:#fff;
		color:#1E4B2E;
		cursor:pointer
	}
	#overlay div button:active{
		transform:translateY(1px)
	}
	input.borderleft {
	border-left:7px solid #66809a;
	}
	input.scherp {
	border : 2px solid #9a8066;
	}
	
	#hulp {
  		max-height: 0;
  		overflow: hidden;
  		-webkit-transition: max-height 0.4s ease-out;
  		-moz-transition: max-height 0.4s ease-out;
  		-o-transition: max-height 0.4s ease-out;
  		-ms-transition: max-height 0.4s ease-out;
  		transition: max-height 0.4s ease-out;
  		-webkit-font-smoothing: subpixel-antialiased;
  		-webkit-transform: translateZ(0) scale(1.0, 1.0);
  		cursor: pointer;
	}
	.blogo {
		height: 40px; 
		width: auto; 
		margin-right: 5px;
		margin-bottom: 5px;}
	
	.pmetpix {
		padding-top: 10px;
		padding-bottom: 30px; }
		
	#subtotrood, #subtotgroen {
		display: none;
	}
	
		
/* Hide default input radio en checkbox */
label input[type="checkbox"],
label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #0056b3;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  outline: none;
  transition: 0.3s;
  vertical-align: middle;
}

/* Checkmark for checkbox */
label input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path d="m185.7 522.3 210.02 355.12c217.65-339.84 462.04-637.7 683.52-809.52 49.637-45.824 126.01-19.09 72.547 30.547-248.21 255.83-439.12 546.05-633.88 1000.4-76.371 53.457-164.2 80.191-206.2 30.547l-274.94-492.59c-38.18-61.094 95.461-202.38 148.92-114.55z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  fill: #111fb2; /* Default checkmark color */
}

/* Show checkmark when checked */
label input[type="checkbox"]:checked::before {
  opacity: 1;
}

label input[type="checkbox"]:checked {
  fill: #111fb2; /* Change this to any color */
}

/* Safari-specific fix */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    label input[type="checkbox"]::before {
      width: 10px;
      height: 10px;
    }
  }
}

/* Round style for radio buttons */
label input[type="radio"] {
  border-radius: 50%;
}

/* Dot inside the radio button */
label input[type="radio"]::before {
  content: "";
  position: absolute;
  width: 10px;  /* Size of the dot */
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show dot when radio button is checked */
label input[type="radio"]:checked::before {
  opacity: 1;
  background-color: #0056b3; /* Dot color */
  width: 10px;
  height: 10px;
}

/* styles voor custom-select */

.custom-select-wrapper {
  position: relative;
  width: 180px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  display: inline-block;
}

#dhr.custom-select-wrapper {
	width: 130px; }

.custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  border-left: 7px solid #66809a;
  background-color: #fff;
  line-height: 1.5; 
  padding: 4px;
  display: flex;
  align-items: center;
}

.custom-select-trigger {
  flex-grow: 1;  /* Allows text to take up available space */
  text-align: left; 
}

.arrow {
  position: absolute; /* Positions the arrow correctly */
  right: 10px; /* Moves it to the right */
  top: 50%;
  transform: translateY(-50%) rotate(-45deg); /* Centers arrow vertically */
  width: 11px;
  height: 11px;
  border-left: 2px solid #0056b3;
  border-bottom: 2px solid #0056b3;
  transition: transform 0.4s ease;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  opacity: 0.2;
  transition: all 0.3s linear;
  overflow-y: hidden;
  background-color: transparent;
  width: 100%;
  margin-left: 15px;
  text-align: right;
}

.custom-option {
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #66809a;
  margin-top: 12px;
  border-radius: 4px;
  position: relative;
  background-color: #eff2f4;
  padding: 8px 6px 8px 4px;
  width: 100%;
}

.custom-option:hover {
  background-color: white;
}

.custom-select.open .arrow {
  transform: translateY(-50%) rotate(-135deg);
}

.custom-select.open .custom-options {
  height: 300px;
  width: 100%;
  opacity: 1;
  transition: all 0.4s linear;
}
 

}

@media only screen and (min-width: 50.01em) and (max-width: 62.50em)

{
	*{
		padding:0;
		margin:0
	}
	*,:after,:before{
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box
	}
	
	body{
		font-family: Verdana,Arial,sans-serif;
		font-size: 17px;
		font-weight: 400;
		hyphens: auto;
	}
	
	.footer {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	bottom: 0;
	height: 120px;
	}
	
.top {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	top: 0;
	z-index: 5;
	color: #fff;
	font-family: Trebuchet, Trebuchet MS, Helvetica, sans-serif;
	font-size: 3em;
	letter-spacing: 10px;
	line-height: 2;
	padding-top: 20px;
}

.top2 {
	width: 100%;
	text-align: left;
	max-width: 1200px;
	margin: 0 auto;
	}
	
	a{
		text-decoration:none
	}
	a:active,a:link,a:visited{
		color:#fff
	}
	a:hover{
		color:#B0D9C6;
		text-decoration:underline
	}
	img{
		vertical-align: middle;
	}
	
	.info img{
		height:25px;
		width:25px;
		vertical-align: middle;
	}
	.info{
		padding-left: 15px;
		padding-right: 15px;
		cursor: pointer;
		}
	
	h2.stap {
		font-family:Verdana,Arial,sans-serif;
		text-align:left;
		font-weight:400;
		letter-spacing:3px;
	}
	
	.menuhouder{
		width:100%;
		max-width:1000px;
		margin:0 auto;
	}
	
	#container{
		width:96%;
		max-width:1000px;
		padding: 2px;
		border:1px solid #000;
		margin: 220px auto 0;
		margin-bottom: 300px;
	}
	
	.A2{
		margin-left:4%
	}
	h1#kop{
		font-size:2.4em;
		line-height:1.2;
		letter-spacing:10px;
		color:#8b1f37;
		padding-bottom: 30px;
	}
	h2.stap{
		font-size:1.1em;
		line-height:1.7;
		margin-top:30px;
		margin-bottom:15px;
		padding:7px;
		border-top-right-radius:20px;
		background-color:#F5ECCE
	}
	
	.veilig{
		float:right;
		margin-right:3%;
		height: 40px;
		width: auto;
		position: relative;
		top: -3px;
	}
	.A {
		width:40%;
		display: inline-block;
		vertical-align: top;
		margin-left: 4%;
		line-height: 2.8;
	}
	
	.A2{
		margin-bottom:.5em;
		border-bottom:1px dotted grey;
		margin-top: 25px;
		padding-bottom: 10px;
	}
	  
	input[type=tel] {
	border-color: rgb(211, 211, 211) rgb(211, 211, 211) rgb(211, 211, 211) rgb(112, 128, 144); 
	border-style: solid; 
	border-width: 1px 1px 1px 7px; 
	border-image: none 100% / 1 / 0 stretch; 
	border-radius: 4px;
	padding: 4px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	input[type=text], input[type=email] {
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	padding: 4px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	select {
  	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	input[type="checkbox"], input[type="radio"] {
	font-family: Verdana,Arial,sans-serif;
	}
	.B{	
		width: 52%;
		display: inline-block;
		vertical-align: top;
		line-height: 2.8;
	}
	.C,.C2{
		width:96%;
		margin-left:4%
	}
	.C{
		line-height:1.6
	}
	.D,.D2{
		font-size:13px;
		line-height:1.2;
		margin-top:1em
	}
	.C2{
		margin-bottom:1.8em;
		line-height: 2.3;
	}
	.D{
		width:70%;
		margin-left:8%;
		margin-bottom:1.3em
	}
	.D2{
		width:75%
	}
	.E,.E2{
		width:90%;
		text-align:center;
		margin:0 auto
	}
	.F,.G{
		text-align:right;
		display:inline-block;
	}
	.F{
		width:30%;
		line-height:1.3;
		margin-top: 5px;
	}
	.G{
		width:90%;
		margin-bottom:12px;
	}
	.footer2,.pijl{
		text-align:center
	}
	.H{
		margin-top:30px;
		background-color:#fcf9f0;
		padding-top:8px;
	}
	.I{
		width:96%;
		display:inline-block;
		vertical-align:top;
		margin-left:4%;
		line-height:1.6
	}
	.J{
		width:90%;
		display:inline-block;
		vertical-align:top;
		margin-left:10%;
		line-height:2
	}
	textarea{
		width:90%;
		margin-top:.75em;
  		border : 1px solid #d3d3d3; 
  		border-left:7px solid #708090; 
  		text-align: left; 
  		border-radius: 6px; 
  		padding: 4px;
  		font-family: Verdana,Arial,sans-serif;
		font-size: 16px;
		padding-left: 10px;
	}
	.img2{
		max-width:100%;
		display:block;
		margin-top:15px;
		margin-bottom:25px
	}
	#knop {
	margin-top: 28px; 
	margin-bottom: 20px;
	cursor: pointer; border: none; 
	color: white; 
	border-top-right-radius: 8px; 
	padding-top: 8px; 
	padding-right: 15px; 
	padding-left: 15px; 
	padding-bottom: 8px; 
	background-color: #66809a; 
	margin-right: 18px; 
	font-size: 18px; 
	letter-spacing: 3px; 
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
	}
	#knop:hover {
	background-color: white; 
	color: #66809a; 
	cursor: pointer;
	}
	
	.footer2,.pijl,.pijl a:link,.pijl a:visited{
		color:#fff
	}
	#knop:active{
		transform:translateY(2px)
	}
	
	.footer2{
		width:100%;
		max-width:1000px;
		margin:0 auto;
		font-family:Verdana,Geneva,sans-serif;
		font-size:.8em;
		line-height:1.3;
		background-color:#255937;
		padding:10px 0 5px
	}
	.pijl{
		font-size:3em;
		padding:8px;
		cursor: pointer;
	}
	.pijl a:hover{
		color:#B0D9C6;
		text-decoration:none
	}
	.pijl a:active{
		color:#fff
	}
	.class2 A:active,.class2 A:hover,.class2 A:link,.class2 A:visited{
		text-decoration:none;
		color:#000;
		font-size:1em;
		font-family:Verdana,Geneva,sans-serif;
		line-height:1.5
	}
	.vet{
		font-weight:700
	}
	.class2 A:hover{
		background-color:#98C394
	}
	
	/*Dit voor het pop-up venster dat vroeger gebruikt werd */
	#overlay{
		display:none;
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		z-index:1000;
		background-color:#000;
		background-color:rgba(0,0,0,.2)
	}
	#overlay div{
		width:60%;
		max-width:530px;
		margin:7% auto;
		background-color:#fefefe;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:20px;
		box-shadow:0 4px 8px 0 rgba(0,0,0,.5),0 6px 20px 0 rgba(0,0,0,.49);
		-webkit-animation-name:animatetop;
		-webkit-animation-duration:.7s;
		animation-name:animatetop;
		animation-duration:.7s
	}
	#overlay div p.p1,#overlay div p.p2{
		width:100%;
		background-color:#1E4B2E;
		color:#fff;
		padding:8px;
		font-size:1em
	}
	@-webkit-keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	@keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	#overlay div p.p1{
		text-align:left;
		font-family:Verdana,Geneva,sans-serif;
		-moz-border-radius:10px 10px 0 0;
		-webkit-border-radius:10px 10px 0 0;
		border-radius:10px 10px 0 0
	}
	#overlay div p.p2,#overlay div ul{
		font-family:Verdana,Geneva,sans-serif;
		text-align:center
	}
	#overlay div p.p2{
		margin-top:15px;
		-moz-border-radius:0 0 10px 10px;
		-webkit-border-radius:0 0 10px 10px;
		border-radius:0 0 10px 10px
	}
	#overlay div ul{
		font-size:.8em;
		list-style:square inside url(groenblok.gif);
		padding-left:8px;
		display:block
	}
	#overlay div img{
		max-width:100%;
		height:auto;
		display:block;
		margin:10px auto
	}
	#overlay div button{
		float:right;
		background-color:#e7fef3;
		color:#000;
		border:2px solid #1E4B2E;
		padding:3px;
		border-radius:4px
	}
	#overlay div button:hover{
		background-color:#fff;
		color:#1E4B2E;
		cursor:pointer
	}
	#overlay div button:active{
		transform:translateY(1px)
	}
	input.borderleft {
	border-left:7px solid #66809a;
	}
	input.scherp {
	border : 2px solid #9a8066;
	}
	/*einde van de pop-up */
	
	#hulp {
  		max-height: 0;
  		overflow: hidden;
  		-webkit-transition: max-height 0.4s ease-out;
  		-moz-transition: max-height 0.4s ease-out;
  		-o-transition: max-height 0.4s ease-out;
  		-ms-transition: max-height 0.4s ease-out;
  		transition: max-height 0.4s ease-out;
  		-webkit-font-smoothing: subpixel-antialiased;
  		-webkit-transform: translateZ(0) scale(1.0, 1.0);
  		cursor: pointer;
	}
	.blogo {
		height: 45px; 
		width: auto; 
		margin-right: 5px;}
	
	.pmetpix {
		padding-top: 10px;
		padding-bottom: 40px; }
	
	/*styles voor radiobutton en checkbox 
	Hide default input */
label input[type="checkbox"],
label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #0056b3;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  outline: none;
  transition: 0.3s;
  vertical-align: middle;
}

/* Checkmark for checkbox */
label input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path d="m185.7 522.3 210.02 355.12c217.65-339.84 462.04-637.7 683.52-809.52 49.637-45.824 126.01-19.09 72.547 30.547-248.21 255.83-439.12 546.05-633.88 1000.4-76.371 53.457-164.2 80.191-206.2 30.547l-274.94-492.59c-38.18-61.094 95.461-202.38 148.92-114.55z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  fill: #111fb2; /* Default checkmark color */
}

/* Show checkmark when checked */
label input[type="checkbox"]:checked::before {
  opacity: 1;
}

label input[type="checkbox"]:checked {
  fill: #111fb2; /* Change this to any color */
}

/* Safari-specific fix */ 
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    label input[type="checkbox"]::before {
      width: 10px;
      height: 10px;
    }
  }
}

/* Round style for radio buttons */
label input[type="radio"] {
  border-radius: 50%;
}

/* Dot inside the radio button */
label input[type="radio"]::before {
  content: "";
  position: absolute;
  width: 9px;  /* Size of the dot */
  height: 9px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show dot when radio button is checked */
label input[type="radio"]:checked::before {
  opacity: 1;
  background-color: #0056b3; /* Dot color */
  width: 9px;
  height: 9px;
}

/* styles voor custom-select */

.custom-select-wrapper {
  position: relative;
  width: 180px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  display: inline-block;
}

#dhr.custom-select-wrapper {
	width: 130px; }

.custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  border-left: 7px solid #66809a;
  background-color: #fff;
  line-height: 1.5; 
  padding: 4px;
  display: flex;
  align-items: center;
}

.custom-select-trigger {
  flex-grow: 1;  /* Allows text to take up available space */
  text-align: left; 
}

.arrow {
  position: absolute; /* Positions the arrow correctly */
  right: 10px; /* Moves it to the right */
  top: 50%;
  transform: translateY(-50%) rotate(-45deg); /* Centers arrow vertically */
  width: 11px;
  height: 11px;
  border-left: 2px solid #0056b3;
  border-bottom: 2px solid #0056b3;
  transition: transform 0.4s ease;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  opacity: 0.2;
  transition: all 0.3s linear;
  overflow-y: hidden;
  background-color: transparent;
  width: 100%;
  margin-left: 15px;
  text-align: right;
}

.custom-option {
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #66809a;
  margin-top: 8px;
  border-radius: 4px;
  position: relative;
  background-color: #eff2f4;
  padding: 4px;
  width: 100%;
}

.custom-option:hover {
  background-color: white;
}

.custom-select.open .arrow {
  transform: translateY(-50%) rotate(-135deg);
}

.custom-select.open .custom-options {
  height: 250px;
  width: 100%;
  opacity: 1;
  transition: all 0.4s linear;
}

}

@media only screen and (min-width: 62.51em) {

	*{
		padding:0;
		margin:0
	}
	*,:after,:before{
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box
	}
	
	body{
		font-family: Verdana,Arial,sans-serif;
		font-size: 17px;
		font-weight: 400;
		hyphens: auto;
	}
	
	.footer {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	bottom: 0;
	height: 120px;
	}
	
.top {
	width: 100%;
	background-color: #1E4B2E;
	position: fixed;
	top: 0;
	z-index: 5;
	color: #fff;
	font-family: Trebuchet, Trebuchet MS, Helvetica, sans-serif;
	font-size: 3em;
	letter-spacing: 10px;
	line-height: 2;
	padding-top: 20px;
}

.top2 {
	width: 100%;
	text-align: left;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	}
	
	a{
		text-decoration:none
	}
	a:active,a:link,a:visited{
		color:#fff
	}
	a:hover{
		color:#B0D9C6;
		text-decoration:underline
	}
	img{
		vertical-align: middle;
	}
	
	.info img{
		height:25px;
		width:25px;
		vertical-align: middle;
	}
	.info{
		padding-left: 15px;
		padding-right: 15px;
		cursor: pointer;
		}
	
	h2.stap {
		font-family:Verdana,Arial,sans-serif;
		text-align:left;
		font-weight:400;
		letter-spacing:3px;
	}
	
	.menuhouder{
		width:100%;
		max-width:1000px;
		margin:0 auto;
	}
	
	#container{
		width:96%;
		max-width:1000px;
		padding: 2px;
		border:1px solid #000;
		margin: 220px auto 0;
		margin-bottom: 300px;
	}
	
	.A2{
		margin-left:4%
	}
	h1#kop{
		font-size:2.4em;
		line-height:1.2;
		letter-spacing:10px;
		color:#8b1f37;
		padding-bottom: 30px;
	}
	h2.stap{
		font-size:1.1em;
		line-height:1.7;
		margin-top:30px;
		margin-bottom:15px;
		padding:7px;
		border-top-right-radius:20px;
		background-color:#F5ECCE
	}
	
	.veilig{
		float:right;
		margin-right:3%;
		height: 40px;
		width: auto;
		position: relative;
		top: -3px;
	}
	.A {
		width:40%;
		display: inline-block;
		vertical-align: top;
		margin-left: 4%;
		line-height: 2.8;
	}
	
	.A2{
		margin-bottom:.5em;
		border-bottom:1px dotted grey;
		margin-top: 25px;
		padding-bottom: 10px;
	}
	  
	input[type=tel] {
	border-color: rgb(211, 211, 211) rgb(211, 211, 211) rgb(211, 211, 211) rgb(112, 128, 144); 
	border-style: solid; 
	border-width: 1px 1px 1px 7px; 
	border-image: none 100% / 1 / 0 stretch; 
	border-radius: 4px;
	padding: 4px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	input[type=text], input[type=email] {
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	padding: 4px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	select {
  	font-family: Verdana,Arial,sans-serif;
	font-size: 16px;
	}
	input[type="checkbox"], input[type="radio"] {
	font-family: Verdana,Arial,sans-serif;
	}
	.B{	
		width: 52%;
		display: inline-block;
		vertical-align: top;
		line-height: 2.8;
	}
	.C,.C2{
		width:96%;
		margin-left:4%
	}
	.C{
		line-height:1.6
	}
	.D,.D2{
		font-size:13px;
		line-height:1.2;
		margin-top:1em
	}
	.C2{
		margin-bottom:1.8em;
		line-height: 2.3;
	}
	.D{
		width:70%;
		margin-left:8%;
		margin-bottom:1.3em
	}
	.D2{
		width:75%
	}
	.E,.E2{
		width:90%;
		text-align:center;
		margin:0 auto
	}
	.F,.G{
		text-align:right;
		display:inline-block;
	}
	.F{
		width:30%;
		line-height:1.3;
		margin-top: 5px;
	}
	.G{
		width:90%;
		margin-bottom:12px;
	}
	.footer2,.pijl{
		text-align:center
	}
	.H{
		margin-top:30px;
		background-color:#fcf9f0;
		padding-top:8px;
	}
	.I{
		width:96%;
		display:inline-block;
		vertical-align:top;
		margin-left:4%;
		line-height:1.6
	}
	.J{
		width:90%;
		display:inline-block;
		vertical-align:top;
		margin-left:10%;
		line-height:2
	}
	textarea{
		width:90%;
		margin-top:.75em;
  		border : 1px solid #d3d3d3; 
  		border-left:7px solid #708090; 
  		text-align: left; 
  		border-radius: 6px; 
  		padding: 4px;
  		font-family: Verdana,Arial,sans-serif;
		font-size: 16px;
		padding-left: 10px;
	}
	.img2{
		max-width:100%;
		display:block;
		margin-top:15px;
		margin-bottom:25px
	}
	#knop {
	margin-top: 28px; 
	margin-bottom: 20px;
	cursor: pointer; border: none; 
	color: white; 
	border-top-right-radius: 8px; 
	padding-top: 8px; 
	padding-right: 15px; 
	padding-left: 15px; 
	padding-bottom: 8px; 
	background-color: #66809a; 
	margin-right: 18px; 
	font-size: 18px; 
	letter-spacing: 3px; 
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
	}
	#knop:hover {
	background-color: white; 
	color: #66809a; 
	cursor: pointer;
	}
	
	.footer2,.pijl,.pijl a:link,.pijl a:visited{
		color:#fff
	}
	#knop:active{
		transform:translateY(2px)
	}
	
	.footer2{
		width:100%;
		max-width:1000px;
		margin:0 auto;
		font-family:Verdana,Geneva,sans-serif;
		font-size:.8em;
		line-height:1.3;
		background-color:#255937;
		padding:10px 0 5px
	}
	.pijl{
		font-size:3em;
		padding:8px;
		cursor: pointer;
	}
	.pijl a:hover{
		color:#B0D9C6;
		text-decoration:none
	}
	.pijl a:active{
		color:#fff
	}
	.class2 A:active,.class2 A:hover,.class2 A:link,.class2 A:visited{
		text-decoration:none;
		color:#000;
		font-size:1em;
		font-family:Verdana,Geneva,sans-serif;
		line-height:1.5
	}
	.vet{
		font-weight:700
	}
	.class2 A:hover{
		background-color:#98C394
	}
	
	/*Dit voor het pop-up venster dat vroeger gebruikt werd */
	#overlay{
		display:none;
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		z-index:1000;
		background-color:#000;
		background-color:rgba(0,0,0,.2)
	}
	#overlay div{
		width:60%;
		max-width:530px;
		margin:7% auto;
		background-color:#fefefe;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:20px;
		box-shadow:0 4px 8px 0 rgba(0,0,0,.5),0 6px 20px 0 rgba(0,0,0,.49);
		-webkit-animation-name:animatetop;
		-webkit-animation-duration:.7s;
		animation-name:animatetop;
		animation-duration:.7s
	}
	#overlay div p.p1,#overlay div p.p2{
		width:100%;
		background-color:#1E4B2E;
		color:#fff;
		padding:8px;
		font-size:1em
	}
	@-webkit-keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	@keyframes animatetop{
		from{
			top:-300px;
			opacity:0
		}
		to{
			top:0;
			opacity:1
		}
	}
	#overlay div p.p1{
		text-align:left;
		font-family:Verdana,Geneva,sans-serif;
		-moz-border-radius:10px 10px 0 0;
		-webkit-border-radius:10px 10px 0 0;
		border-radius:10px 10px 0 0
	}
	#overlay div p.p2,#overlay div ul{
		font-family:Verdana,Geneva,sans-serif;
		text-align:center
	}
	#overlay div p.p2{
		margin-top:15px;
		-moz-border-radius:0 0 10px 10px;
		-webkit-border-radius:0 0 10px 10px;
		border-radius:0 0 10px 10px
	}
	#overlay div ul{
		font-size:.8em;
		list-style:square inside url(groenblok.gif);
		padding-left:8px;
		display:block
	}
	#overlay div img{
		max-width:100%;
		height:auto;
		display:block;
		margin:10px auto
	}
	#overlay div button{
		float:right;
		background-color:#e7fef3;
		color:#000;
		border:2px solid #1E4B2E;
		padding:3px;
		border-radius:4px
	}
	#overlay div button:hover{
		background-color:#fff;
		color:#1E4B2E;
		cursor:pointer
	}
	#overlay div button:active{
		transform:translateY(1px)
	}
	input.borderleft {
	border-left:7px solid #66809a;
	}
	input.scherp {
	border : 2px solid #9a8066;
	}
	/*einde van de pop-up */
	
	#hulp {
  		max-height: 0;
  		overflow: hidden;
  		-webkit-transition: max-height 0.4s ease-out;
  		-moz-transition: max-height 0.4s ease-out;
  		-o-transition: max-height 0.4s ease-out;
  		-ms-transition: max-height 0.4s ease-out;
  		transition: max-height 0.4s ease-out;
  		-webkit-font-smoothing: subpixel-antialiased;
  		-webkit-transform: translateZ(0) scale(1.0, 1.0);
  		cursor: pointer;
	}
	.blogo {
		height: 45px; 
		width: auto; 
		margin-right: 5px;}
	
	.pmetpix {
		padding-top: 10px;
		padding-bottom: 40px; }
	
	/*styles voor radiobutton en checkbox 
	Hide default input */
label input[type="checkbox"],
label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #0056b3;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  outline: none;
  transition: 0.3s;
  vertical-align: middle;
}

/* Checkmark for checkbox */
label input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path d="m185.7 522.3 210.02 355.12c217.65-339.84 462.04-637.7 683.52-809.52 49.637-45.824 126.01-19.09 72.547 30.547-248.21 255.83-439.12 546.05-633.88 1000.4-76.371 53.457-164.2 80.191-206.2 30.547l-274.94-492.59c-38.18-61.094 95.461-202.38 148.92-114.55z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  fill: #111fb2; /* Default checkmark color */
}

/* Show checkmark when checked */
label input[type="checkbox"]:checked::before {
  opacity: 1;
}

label input[type="checkbox"]:checked {
  fill: #111fb2; /* Change this to any color */
}

/* Safari-specific fix */ 
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    label input[type="checkbox"]::before {
      width: 10px;
      height: 10px;
    }
  }
}

/* Round style for radio buttons */
label input[type="radio"] {
  border-radius: 50%;
}

/* Dot inside the radio button */
label input[type="radio"]::before {
  content: "";
  position: absolute;
  width: 9px;  /* Size of the dot */
  height: 9px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show dot when radio button is checked */
label input[type="radio"]:checked::before {
  opacity: 1;
  background-color: #0056b3; /* Dot color */
  width: 9px;
  height: 9px;
}

/* styles voor custom-select */

.custom-select-wrapper {
  position: relative;
  width: 180px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  display: inline-block;
}

#dhr.custom-select-wrapper {
	width: 130px; }

.custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  border-left: 7px solid #66809a;
  background-color: #fff;
  line-height: 1.5; 
  padding: 4px;
  display: flex;
  align-items: center;
}

.custom-select-trigger {
  flex-grow: 1;  /* Allows text to take up available space */
  text-align: left; 
}

.arrow {
  position: absolute; /* Positions the arrow correctly */
  right: 10px; /* Moves it to the right */
  top: 50%;
  transform: translateY(-50%) rotate(-45deg); /* Centers arrow vertically */
  width: 11px;
  height: 11px;
  border-left: 2px solid #0056b3;
  border-bottom: 2px solid #0056b3;
  transition: transform 0.4s ease;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  opacity: 0.2;
  transition: all 0.3s linear;
  overflow-y: hidden;
  background-color: transparent;
  width: 100%;
  margin-left: 15px;
  text-align: right;
}

.custom-option {
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #66809a;
  margin-top: 8px;
  border-radius: 4px;
  position: relative;
  background-color: #eff2f4;
  padding: 4px;
  width: 100%;
}

.custom-option:hover {
  background-color: white;
}

.custom-select.open .arrow {
  transform: translateY(-50%) rotate(-135deg);
}

.custom-select.open .custom-options {
  height: 250px;
  width: 100%;
  opacity: 1;
  transition: all 0.4s linear;
}

}