* {
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none;
}

/* ####################################### */
/* HTNL/BODY, De hoofdsettings van de site */
/* ####################################### */
html {
	height: 100%;
	min-height:100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
	touch-action: manipulation;
}

body {
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll;
	min-width: 1000px;
	font-family: arial, verdana, sans-serif;
	color: var(--colorDarkGray);
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	position: relative;
	/*
	height: 100%;
	min-height: 100%;
	*/
	height: 				unset !important;
	min-height: 			100dvh;
	display: 				grid;
	grid-template-rows: 	max-content auto max-content;
	grid-template-areas: 	"global_header"
							"global_body"
							"global_footer";
}

button {
	border-style: none;
	background-color: transparent;
	font-size: inherit;
}

a {
	text-decoration: none;
	color: var(--colorBlack);
}

img {
	border: 0px;
}

label{
	cursor: pointer;
}

input[type=text], input[type=password], input[type=submit], input[type=button], input[type=email]{
	-webkit-appearance: none;
	border-radius: 0;
	padding: 2px;
	border: 1px solid var(--colorGray);
	background-color: var(--colorWhite);
	color: var(--colorBlack);
}

select {
	border-radius: 	0;
	border: 		1px solid var(--colorGray);
	box-sizing: 	border-box;
	background:		var(--colorWhite);
	color: 			var(--colorBlack);
}
option {
	color: 			var(--colorBlack);

}

.linkwhite{
	cursor: 		pointer;
}

#toTopLink{
	position: 		  	fixed;
	width: 			    100%;
	height: 		    50px;
	background: 	  	var(--colorGreen);
	color: 			    var(--colorWhite);
	top: 			    -50px;
	z-index: 		    599;
	transition: 	  	top 0.2s;
	text-align: 	  	center;
	font-size: 		  	20px;
  	line-height:    	50px;
	opacity: 		    0.9;
  	pointer-events: 	none;
  	font-weight:    	500;
}
  #toTopLink:hover{
    opacity: 		    1;
    cursor:         	pointer;
  }
#toTopLink p::after{
  	display:        	inline-block;
  	content:        	"\276F";
  	transform:      	rotate(270deg);
  	color: 			    var(--colorWhite);
  	line-height:    	50px;
  	width:          	50px;
  	height:         	50px;
}
@media screen and (max-width: 900px) {
	body.scrollUp #toTopLink{
		top: 			0px;
    pointer-events: 	auto;
	}
}

/* ####################################### */
/* 2017 ALGEMENE STYLES					   */
/* ####################################### */
.koptitel{
	display:block;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--colorGreen);
	margin-left: 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
	clear: both;
	line-height: 15px;
}
.koptitel:before {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.koptitel.margintop5{
	margin-top:5px;
}

.lineNoMargin{
	display: block;
	height: 1px;
	width:100%;
	background-color: var(--colorLightGray);
}
	.lineNoMargin.px5l{
		margin-left: 5px;
	}
	.lineNoMargin.px5l:last-child{
		margin-left: 0px;
	}
	.lineNoMargin.bottom10{
		margin-bottom: 10px;
	}
	.lineNoMargin.bottom20{
		margin-bottom: 20px;
	}

.text_green{
	color: var(--colorDarkGreen);
}

.text_red{
	color: var(--colorRed);
}


.notify{
	display: none;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	padding: 15px;
	text-align:center;
	z-index: 400;
	margin: 10px;
}

	.notify .title{
		display: block;
		font-family: 'Roboto', sans-serif;
		font-size: 15px;
		font-weight: 700;
		color: var(--colorGreen);
		text-transform: uppercase;
	}

	.notify .container{
		display: inline-block;
		text-align: right;
		width: unset;
	}

	.notify .notifycontent{
		background-color: var(--colorWhite);
		box-shadow: 3px 3px 25px rgba(0,0,0,0.6);
		padding: 25px;
		border-radius: 10px;
		position: relative;
		text-align: center;
		overflow: hidden;
		min-width: 300px;
		min-height: 70px;
		line-height: 20px;
	}
		.notify .notifycontent img{
			max-height: 75vh;
			max-width: 75vw;
		}

	.notify .sluiten{
		position: relative;
		display: inline-block;
		font-family: 'Roboto', sans-serif;
		font-size: 17px;
		font-weight: 700;
		margin-right: 10px;
		cursor: pointer;
	    top: 35px;
		right: 5px;
	    color: var(--colorDarkGray);
	    z-index: 502;
		border-style: none;
		background-color: transparent;
	}
		.notify .sluiten:hover, .notify .sluiten:focus, .notify .sluiten:focus-visible{
			color: var(--colorBlue);
			text-decoration: underline;
		}
		.notify .sluiten .cross{
			display: inline-block;
			font-size: 20px;
			position: relative;
			top: -4px;
		}
		.notify .sluiten .text{
			display: inline-block;
			margin-left: 10px;
			position: relative;
			top: -5px;
		}


	/* ####################################### */
	/* 2017 ALGEMENE STYLES	- INVOERVELDEN	   */
	/* ####################################### */
	.input_row{
		display: block;
		margin-left: 10px;
		margin-top: 5px;
	}
		.input_row .input_left{
			display: inline-block;
			width: 200px;
			vertical-align:top;
		}
		.input_row .input_right{
			display: inline-block;
			width: 500px;
			vertical-align:top;
		}

	.input_opslaan{
		display: inline-block;
		background-color: var(--colorBlue);
		margin-left: 10px;
		padding: 10px;
		font-family: "Roboto", sans-serif;
		font-size: 13px;
		font-weight: 500;
		color: var(--colorWhite);
		cursor: pointer;
	}



		.compareContainer{
			position: 				absolute;
			bottom: 				0px;
			left: 					0px;
			display:                grid;
			grid-template-columns:  16px auto;
			grid-template-rows:     auto;
			grid-template-areas:    
				"compareStart compareStart"
				"compareCheckbox compareLabel";
			z-index: 300;
		}
		.compareContainer .compareCheck{
			grid-area:      compareCheckbox;
			display: 		inline-block;
			line-height:	38px;
			font-size: 		13px;
			color: 			var(--colorDarkGray);
			margin-right:	5px;
			vertical-align: bottom;
		}
			.compareContainer .compareCheck input[type=checkbox]{
				position: 		relative;
				top: 			2px;
				accent-color: 	var(--colorBlue);
			}
			.compareContainer .compareCheck input[type=checkbox]:disabled{
				opacity: 		0.5;
				accent-color: 	var(--colorMediumGray);
			}

		.compareContainer .compareLabel{
			grid-area:      compareLabel;
			display: 		inline-block;
			line-height:	38px;
			font-size: 		13px;
			color: 			var(--colorDarkGray);
			vertical-align: bottom;
		}
			.compareContainer .compareStart{
				display: none;
			}
				.compareContainer.compare .compareStart{
					grid-area:          compareStart;
					display: 			block;
					position:			relative;
					left:				-6px;
					bottom:				-2px;
					padding:			5px;
					background-color:	var(--colorBlue);
					color:				var(--colorWhite);
					font-size:			13px;
					text-align:			center;
					border-radius:		3px;
					cursor: 			pointer;
				}
					.compareContainer.compare .compareStart .compareTriangel{
						position: 		absolute;
						bottom: 		-6px;
						left:			6px;
						border-top: 	6px solid var(--colorBlue);
						border-left: 	6px solid transparent;
						border-right: 	6px solid transparent;
					}
				
				.compareContainer.compare .compareStart:hover{
					background-color:	var(--colorBlue);
				}
				.compareContainer.compare .compareStart:hover .compareTriangel{
					border-top: 	6px solid var(--colorBlue);
				}

				.compareContainer label{
					user-select: none;
					-webkit-user-select: none;
  					-ms-user-select: none;
				}
				.compareContainer .compareLabel .limit{
					opacity: 0.5;
				}
		.main_container #compareOverview{
			display: 				none;
			position: 				fixed;
			bottom:					0px;
			right:					10px;
			background-color: 		var(--colorBlue);
			max-width:				350px;
			min-width:				310px;
			border-radius:			5px 5px 0px 0px;
			box-sizing: 			border-box;
		}

			@media screen and (max-width: 800px) {
				.main_container #compareOverview{
					max-width:		unset;
					width:			100dvw;
					right:			0;
					left:			0;
					border-radius:	0px;
				}
			}

			.main_container #compareOverview.show{
				display: 		inline-block;
				z-index:		400;
			}
			.main_container #compareOverview #compareOverviewHeader{
				display: 		flex;
				align-items: 	center;
				position: 		relative;
				padding: 		8px;
				color: 			var(--colorWhite);
				line-height:	30px;
				cursor:			pointer;
				width: 			100%;
			}
				.main_container #compareOverview #compareOverviewHeader>.c_arrow {
					display: 		inline-block;
					text-align:		center;
					width:			30px;
					font-size:		20px;
				}
				.main_container #compareOverview #compareOverviewHeader>.c_arrow img{
					max-width: 		15px;
					max-height: 	15px;
					vertical-align: middle;
				}
				.main_container #compareOverview.open #compareOverviewHeader>.c_arrow{
					transform: rotate(180deg);
				}

				.main_container #compareOverview #compareOverviewHeader>.c_header{
					display: 			inline-block;
					font-size:			14px;
				}

				.main_container #compareOverview #compareOverviewHeader>.c_compare{
					display: 			none;
					position:			absolute;
					right:				8px;
					background-color: 	var(--colorWhite);
					color:				var(--colorBlue);
					border-radius:		5px;
					padding:			0px 5px 0px 5px;
					box-sizing:			border-box;
				}
					.main_container #compareOverview #compareOverviewHeader>.c_compare.show{
						display: inline-block;
					}
					.main_container #compareOverview #compareOverviewHeader>.c_compare:hover{
						cursor: pointer;
						background-color: 	var(--colorBlue);
						color:				var(--colorWhite);
						border: 			1px solid var(--colorWhite);
					}

			.main_container #compareOverview #compareOverviewContent{
				padding: 			0px;
				color: 				var(--colorDarkGray);
				background-color: 	var(--colorWhite);
				line-height:		15px;
				box-sizing:			border-box;
				border-left:		1px solid var(--colorGray);
				border-right:		1px solid var(--colorGray);
				max-height:			0px;
				overflow-y:			hidden;
				-webkit-transition: max-height 0.2s;
				-moz-transition: 	max-height 0.2s;
				transition: 		max-height 0.2s;
			}

			.main_container #compareOverview .compareLine{
				display:                grid;
				grid-template-columns:  70px auto 40px;
				grid-template-rows:     auto;
				grid-template-areas:    
					"compareOverviewImg compareOverviewTitle compareOverviewDelete";
				padding:				5px;
				border-bottom:			1px solid var(--colorMediumGray);
			}
				.main_container #compareOverview .compareLine div:nth-child(1){
					grid-area: 			compareOverviewImg;
				}
				.main_container #compareOverview .compareLine div:nth-child(1) img{
					max-width: 			60px;
					max-height: 		60px;
				}
				.main_container #compareOverview .compareLine div:nth-child(2){
					display: 			flex;
					align-items: 		center;
					justify-content: 	start;
					grid-area: 			compareOverviewTitle;
					padding:			0px 5px 0px 5px;
				}
				.main_container #compareOverview .compareLine div:nth-child(3){
					grid-area: 	compareOverviewDelete;
					display: 			flex;
					align-items: 		center;
					justify-content: 	center;
					font-weight:		900;
				}
					.main_container #compareOverview .compareLine div:nth-child(3):hover{
						cursor: 			pointer;
						box-sizing:			border-box;
						background-color: 	var(--colorBlue);
						color: 				var(--colorWhite);
						border-radius:		5px;
					}

	/* ####################################### */
	/* 2017 ALGEMENE STYLES	- USP	   */
	/* ####################################### */
	.uspWrap{
	    position: absolute;
	    top: 10px;
	    left: 0;
		z-index: 10;
	}

	.usp{
		margin-left: 5px;
		display: inline-block;
		height: 15px;
		font-family: 'Roboto', sans-serif;
		font-size: 10px;
		/*font-style: italic;*/
		font-weight: 500;
		line-height: 15px;
		text-transform: uppercase;
		background-color: var(--colorRed);
		color: var(--colorWhite);
		padding-left: 4px;
		float: left;
		clear: left;
		margin-bottom:4px;
		white-space: nowrap;
	}
	.usp:after{
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		background-color: transparent;
		border-right: 15px solid transparent;
		border-top: 15px solid var(--colorRed);
		position: absolute;
	}
	.usp.large{
		margin-left: 0px;
		height: 20px;
		font-size: 12px;
		line-height: 20px;
	}
	.usp.large:after{
		border-right: 20px solid transparent;
		border-top: 20px solid var(--colorRed);
	}

	.usp_tekst > a{
		text-decoration:underline;
	}


/* ############################################## */
/* 2017 / 2018 ALGEMENE STYLES - BLOCKSTRUCTURE	  */
/* ############################################## */
.blockstructure_cell a{
	text-decoration: underline;
}
.blockstructure_cell a:hover{
	color: var(--colorGray);
	cursor: pointer;
}
.blockstructure_row div:nth-of-type(1){
	width: 200px;
	vertical-align: top;
}
.blockstructure_row #seo_text.readonly{
	background-color: var(--colorLightGray);
	color:var(--colorGray);
}
.blockstructure_row #seo_text{
	display: block;
	width: 100%;
	height: 100px;
	border: 1px solid var(--colorGray);
}
.blockstructure_table .seo_h1, .seo_h2{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: var(--colorGreen);
	font-weight: 500;
	margin-top: 10px;
	text-transform: uppercase;
}
.seo_h2{
	margin-bottom:5px;
}
.blockstructure_table .seo_text{
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
	text-align: justify;
}
.blockstructure_table .seo_text a{
	color: var(--colorBlue);
}


/* ####################################### */
/* 2017 ALGEMENE STYLES	- ADMIN BLOCK	  */
/* ####################################### */
.adminblock{
	display: block;
	border: 1px solid var(--colorGreen);
}
	.adminblock .title{
		background-color: var(--colorGreen);
		color: var(--colorWhite);
		font-weight: bolder;
		padding: 5px;
	}
	.adminblock .row{
		display: block;
		height: 25px;
	}
	.adminblock .row:nth-child(odd){
		background-color:var(--colorLightGray);
	}
		.adminblock .cell{
			display: inline-block;
			padding-left: 5px;
			height: 25px;
			line-height: 25px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.adminblock .cell.subtitle{
			display: inline-block;
			color: var(--colorGreen);
			font-weight: bolder;
		}
		.adminblock .cell.right{
			float: right;
			text-align:right;
			padding: 0px;
			margin-right: 5px;
		}
		.adminblock .cell img{
			vertical-align: middle;
		}

.admin_recycleicon{
	display: 	inline-block; 
	position: 	absolute; 
	right: 		0px; 
	top: 		-3px; 
	width: 		30px; 
	font-size: 	20px; 
	text-align:	center;
}
	.admin_recycleicon:hover{
		cursor: pointer;
		color: var(--colorDarkGreen);
	}

#cred_stats{
	display: 		inline-block;
	margin-top: 	50px;
}
	#cred_stats .cred_title{
		display: block;
		background-color: var(--colorBlue);
		padding: 5px;
		font-weight: bolder;
		color: var(--colorWhite);
	}
	#cred_stats .cred_line{
		display: block;
	}
		#cred_stats .cred_line:nth-child(2){
			background-color: var(--colorGray) !important;
			color: var(--colorWhite);
		}
		#cred_stats .cred_line:nth-child(2n){
			background-color: var(--colorLightGray);
		}
	#cred_stats .cred_line>div{
		display: inline-block;
		padding: 5px;
		text-align: center;
	}
		#cred_stats .cred_line>div:nth-child(1){
			width: 100px;
			text-align: left;
		}
		#cred_stats .cred_line>div:nth-child(2){
			width: 100px;
		}
		#cred_stats .cred_line>div:nth-child(3){
			width: 100px;
		}


/* ####################################### */
/* IMG popup 				   */
/* ####################################### */
.showimg{
	display: none;
	position: absolute;
	top: 150px;
	padding: 15px;
	width: 1000px;
	min-height: 100px;
	max-height: 600px;
	text-align:center;
	z-index: 501;
}
	.showimg .container{
		display: inline-block;
		text-align: right;
	}
	.showimg .container .imgpreload{
		display: none;
		width: 0px;
		height: 0px;
		overflow: hidden;
	}
		.showimg .container .imgpreload img{
			display: none;
			max-height: 600px;
		}
	.showimg .sluiten{
		position: relative;
		font-family: 'Roboto', sans-serif;
		font-size: 17px;
		font-weight: 700;
		margin-right: 10px;
		cursor: pointer;
	    top: 30px;
	    color: var(--colorDarkGray);
	    z-index: 600;
	}
		.showimg .sluiten .cross{
			display: inline-block;
			font-size: 20px;
			position: relative;
			top: -4px;
		}
		.showimg .sluiten .text{
			display: inline-block;
			margin-left: 10px;
			position: relative;
			top: -5px;
		}

	.showimg .showimgcontent{
		background-color: var(--colorWhite);
		box-shadow: 3px 3px 25px rgba(0,0,0,0.6);
		border-radius: 10px;
		position: relative;
		text-align: center;
		padding: 50px;
		overflow: hidden;
		-webkit-transition: width 0.2s, height 0.2s;
		-moz-transition: width 0.2s, height 0.2s;
		transition: width 0.2s, height 0.2s;
	}
	.showimg .showimgcontent_img{
		display:inline-block;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		max-width: 100%;
		max-height: 100%;
		text-align:center;
		vertical-align: middle;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
		.showimg .showimgcontent_img img{
			max-height: 600px;
			vertical-align: middle;
		}

		/*
		.showimg .showimgcontent .img{
			position: absolute;
			left: 50%;
			padding-left: 20px;
			padding-right: 20px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		*/

		.showimg .showimgcontent .nav{
			display: inline-block;
			position: absolute;
			top: 0px;
			width: 60px;
			height: 100%;
			vertical-align:middle;
			text-align:center;
			background-color: rgba(200,200,200,0.2);
			border-radius: 10px 0px 0px 10px;
			z-index: 502;
			-webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			transition: all 0.5s;
			cursor: pointer;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
			.showimg .showimgcontent .nav img{
				vertical-align: middle;
				position: absolute;
				top:0;
				bottom:0;
				left: 22px;
				margin: auto;
				opacity: 0.5;
				-webkit-transition: all 0.5s;
				-moz-transition: all 0.5s;
				transition: all 0.5s;
			}
			.showimg .showimgcontent .nav.left{
				left: 0px;
				border-radius: 10px 0px 0px 10px;
			}
			.showimg .showimgcontent .nav.right{
				right: 0px;
				border-radius:  0px 10px 10px 0px;
			}

		.showimg .showimgcontent .nav:hover{
			background-color: rgba(200,200,200,0.8);
		}
		.showimg .showimgcontent .nav:hover img{
			opacity: 1;
		}

/* ####################################### */
/* 2017 SITE ADMIN							   */
/* ####################################### */
.sa{
	line-height: 30px;
}
.sa.title{
	font-size: 20px;
	font-weight: bolder;
	text-transform: uppercase;
	color: var(--colorGreen);
	margin-top: 25px;
}
.sa.title:nth-child(1){
	margin-top: 0px;
}
.sa.header{
	display: block;
	background-color:var(--colorGreen);
	color: var(--colorWhite);
}
.sa.line{
	display: block;
	background-color:var(--colorWhite);
}
.sa.line div, .sa.header div{
	display:inline-block;
}
.sa.line div:nth-child(1), .sa.header div:nth-child(1){
	margin-left: 5px;
}
.sa.line:nth-child(2n){
	background-color:var(--colorLightGray);
}
.sa.line input{
	border-radius: 2px;
}

/* ####################################### */
/* 2017 MAIN							   */
/* ####################################### */
.main_container{
	position: 				relative;
	grid-area: 				global_body;
	max-width:				100dvw;

}

main{
	display: block;
	margin-left: auto;
	margin-right: auto;
	min-height: calc(100% - 150px);

	background-color: var(--colorWhite);
	padding-bottom:10px;
	padding-left: 10px;
	padding-right: 10px;
}

	main .overlay{
		display: none;
		position: fixed;
		left: 0px;
		top: 0px;
		min-width: 100%;
		min-height: 120%;
		background-color: rgba(0,0,0,0.0);
		z-index: 400;
		cursor: pointer;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}


/* ####################################### */
/* FRONTPAGE						   */
/* ####################################### */
.frontpage{
	margin-top: 10px;
}






/* ####################################### */
/* 2017 ADMIN							   */
/* ####################################### */
	.admin_row{
		display: block;
		line-height: 200%;
		background-color:var(--colorWhite);
		margin-left: 10px;
	}
	.admin_row:nth-child(2n){
		background-color:var(--colorLightGray);
	}

	.admin_row.title{
		display: block;
		line-height: 200%;
		font-family: 'Roboto', sans-serif;
		font-size: 15px;
		font-weight: 500;
		background-color: var(--colorGreen);
		color:var(--colorWhite);
	}

	.admin_cell{
		display: inline-block;
		position: relative;
		line-height: 200%
	}
		.admin_cell.w20{
			width: 20px;
		}
		.admin_cell.w25{
			width: 25px;
		}
		.admin_cell.w50{
			width: 50px;
		}
		.admin_cell.w100{
			width: 90px;
		}
		.admin_cell.w125{
			width: 115px;
		}
		.admin_cell.w200{
			width: 190px;
		}
		.admin_cell.w250{
			width: 240px;
		}
		.admin_cell.w300{
			width: 290px;
		}

	.admin_cell.center{
		text-align:center;
	}
	.admin_cell.center img{
		vertical-align: middle;
	}

	.admin_cell:nth-child(1){
		margin-left: 10px;
	}
	.admin_cell.maintitle{
		font-family: 'Roboto', sans-serif;
		font-size: 20px;
		font-weight: 700;
		color: var(--colorGreen);
	}

	.admin_cell input{
		width: 70%;
	}

	.admin_save{
		margin-top:10px;
		margin-left: 10px;
		width: auto;
		padding: 5px !important;
		border: 1px solid var(--colorGreen) !important;
		background-color: var(--colorWhite);
		color: var(--colorGreen);
		cursor: pointer;
		font-size: 14px;
		font-weight: 500;
	}

	.admin_save:hover{
		border: 1px solid var(--colorWhite) !important;
		background-color: var(--colorGreen);
		color: var(--colorWhite);
	}


/* ####################################### */
/* TEKSTEN 2016						   */
/* ####################################### */
.teksten{
	display: block;
	margin-top: 15px;
}



/* ####################################### */
/* 2016 								   */
/* ####################################### */

.admin_button{
	display:inline-block;
	width:200px;
	border-radius:4px;
	background-color:var(--colorGreen);
	color:var(--colorWhite);
	cursor: pointer;
}
.admin_button:hover{
	background-color:var(--colorBlue);
}

.admin_menublock {
	display: inline-block;
	width: 240px;
	height: 240px;
	margin-right:10px;
	margin-bottom:10px;
	vertical-align:bottom;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.admin_menublock:hover{
	cursor:pointer;
}

.admin_menublock_title {
	display:inline-block;
	position:absolute;
	bottom:0px;
	width: 240px;
	height:40px;
	line-height:40px;
	text-align: center;
	text-transform:uppercase;
	font-weight: bolder;
	background-color: var(--colorGreen);
	font-family: arial, verdana, sans-serif;
	color: var(--colorWhite);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	vertical-align:bottom;
}

/* ############################ */
/* Algemene tabellen            */
/* ############################ */
.table {
	display: table;
}

.table_row {
	display: table-row;
}

.table_row_groen {
	display: table-row;
	background-color: var(--colorGreen);
	height: 30px;
	vertical-align: middle;
}

.table_cell_wittitel {
	display: table-cell;
	height: 30px;
	font-family: arial, verdana, sans-serif;
	color: var(--colorWhite);
	font-size: 13px;
	vertical-align: middle;
	padding-left: 5px;
}

.table_cell {
	display: table-cell;
	font-family: arial, verdana, sans-serif;
	color: var(--colorDarkGray);
	font-size: 12px;
	vertical-align:middle;
}

.wishlist_row_titel {
	display: table-row;
	background-color: var(--colorGreen);
}

.wishlist_input {
	font-size: 14px;
	padding:3px;
	text-align: center;
	background-color: var(--colorWhite);
	border: 1px solid var(--colorGreen);
}

.wishlist_input_small {
	font-size: 13px;
	padding: 1px;
	background-color: var(--colorWhite);
	border: 1px solid var(--colorGreen);
}

.question{
    display: inline-block;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    border: 1px solid var(--colorDarkGray);
    text-align: center;
    box-sizing: border-box;
}

.main.question{
	background-color: var(--colorRed);
}

.main.question.add{	
    cursor: pointer;
}

.cf_row{
	display: block;
    width: 80%;
    min-height: 25px;
    padding: 2px 5px;
    box-sizing: border-box;
    background-color: var(--colorMediumGray);
    border: 1px solid var(--colorDarkGray);
    position: relative;
    font-size: 0;
}

/*.cf_row:not(.level0)::before{
	content: '\21B3';
    display: inline-block;
    position: absolute;
    left: -15px;
    top: -4px;
    font-size: 20px;
    font-weight: bold;
    color: var(--colorDarkGray);
}*/

.cf_row.level0{
	background-color:var(--colorLightGray);
}

.cf_row.answer{
	background-color:var(--colorMediumGray);
}
	
	.cf_row .cf_titel, .cf_row .cf_buttons{
		display: inline-block;
	    line-height: 25px;
	    vertical-align: top;
	}

	.cf_row .cf_titel{
		width:85%;
		font-size:14px;
	}

	.cf_row .cf_buttons{
		width:15%;
		text-align: right;
		cursor: pointer;
	}
		.cf_row .cf_buttons>span, .cf_row .cf_buttons>a{
			display: inline-block;
		    width: 18px;
		    height: 18px;
		    text-align: center;
		    background-position: center;
		    vertical-align: middle;
		    background-size: contain;
		    margin: 0 3px;
		}

	.dropzone{
		height: 7px;
		width:80%;
	    border-top: 2px solid var(--colorWhite);
	    border-bottom: 2px solid var(--colorWhite);
	    box-sizing: border-box;
	    background: var(--colorWhite);
	}

    .dropzone.show{
		background: var(--colorGreen);
	}	
	
	#editscreen{
		display: none;
	    position: fixed;
	    top: calc(50% - 75px);
	    left: calc(50% - 150px);
	    width: 350px;
	    min-height: 175px;
	    background-color: var(--colorLightGray);
	    z-index: 1;
	    border: 1px solid var(--colorDarkGray);
	    padding: 20px 5px 5px 5px;
	    box-sizing: border-box;
	}
	#editscreen.shown{
		display: inline-block;
	}

		#editscreen .closeedit{
		    position: absolute;
		    top: 0;
		    left: 0;
		    cursor: pointer;
		    width: 100%;
		    background-color: var(--colorDarkGray);
		    text-align: right;
		    padding-right: 5px;
		    box-sizing: border-box;
		    color: var(--colorLightGray);
		    height: 15px;
		}
			#editscreen .closeedit:hover{
				color:var(--colorWhite);
			}

		#editscreen #edittype{
		    border-radius: 3px;
		    box-sizing: border-box;
		    padding: 3px;
		    margin-left: 5px;
		}
	
		#editscreen .saveedit{
			position: absolute;
			top: calc(100% - 25px);
			right: 5px;
			cursor:pointer;
		}
	
	.editlabel{
	    width: 70px;
    	display: inline-block;
	}

	#cf_inputvalue, #cf_inputtitle{
	    padding: 5px;
	    width: 240px;
	    border-radius: 3px;
	    box-sizing: border-box;
	    margin-left: 5px;
	}

	#linktolist{
		display: none;
		list-style: none;
	    background: var(--colorWhite);
	    width: 100%;
	    margin: 5px 0 25px 1px;
	    max-height: 100px;
	    overflow-y: scroll;
	}
	#linktolist.shown{
		display: inline-block;
	}

		#linktolist .linktoitem{
		    padding: 5px;
		    cursor: pointer;
		}

		#linktolist .linktoitem:hover{
			filter: brightness(110%);
		}

.cf_header{
    color: var(--colorGreen);
    font-size: 26px;
    margin-bottom: 20px;
}
.cf_ul{
	list-style: none;
}
	.cf_li{
		border: 1px solid var(--colorDarkGray);
	    margin: -1px 0;
	    position: relative;
	    cursor: pointer;
	}
	.cf_li:hover{
		background-color: var(--colorGreen);
		color:var(--colorWhite);
	}
	.cf_li:hover a{
		color:var(--colorWhite);
	}

		.cf_link{
			display: block;
			padding:5px;	
		}
			.cf_vraag{
				
			}
			.cf_next{
			    width: 50px;
			    text-align: center;
			    position: absolute;
			    right: 0;
			}


/* ############################ */
/* FAQ					        */
/* ############################ */
.faqblock{
	transition: height 0.5s;
	cursor: default;
	color: var(--colorDarkGray);
}

.faqblock:hover{
	background-color:var(--colorGreen);
	color: var(--colorWhite);
	cursor: pointer;
}

/* ############################ */
/* vacatures			        */
/* ############################ */
@media screen and (max-width: 799px) {
	.vacatureFormContainer {
		display: 				grid !important;
		grid-template-columns: 	100% !important;
	}

	.vacatureFormContainer .vacatureFormItem{
		border-bottom:			0px;
	}
	.vacatureFormContainer .vacatureFormItem:nth-child(2n + 1){
		font-weight:			bolder;
		padding: 				10px 10px 5px 10px;
	}
	.vacatureFormContainer .vacatureFormItem:nth-child(2n){
		border-bottom: 			1px solid rgba(0, 0, 0, 0.05);
		padding: 				0px 10px 15px 10px;
	}
}


.vacatureFormContainer {
	display: grid;
	grid-template-columns: 40% auto;
}
.vacatureFormItem {
	border-bottom: 		1px solid rgba(0, 0, 0, 0.05);
	padding: 			10px;
	vertical-align: 	middle;
	line-height:		20px !important;
}
.vacatureButton{
	display: 			inline-block;
	background-color:	var(--colorBlue) !important;
	color:				var(--colorWhite) !important;
	padding:			8px !important;
	border:				3px solid var(--colorWhite) !important;
	box-sizing:			border-box;
	cursor:				pointer;
}
.vacatureButton.intitle{
	position:			absolute;
	top:				6px;
	right:				6px;
}
.vacatureFormContainer input, .vacatureFormContainer textarea{
	padding: 2px;
}

.vacatureblockcont{
    position: relative;
    margin-bottom: 50px;
    display: block;
}
.vacatureBlock{
	transition: height 0.5s;
	cursor: default;
	color: var(--colorDarkGray);
	overflow: hidden;
	display: block;
	background-color:var(--colorWhite);
	line-height:20px;
    border-bottom: 2px solid var(--colorDarkGray);
	margin-bottom:10px;
	background: linear-gradient(to bottom, var(--colorWhite) 0%,var(--colorLightGray) 50%,var(--colorMediumGray) 100%);
    padding-bottom: 30px;
}
.vacatureBlock.closed{
    padding-bottom: 0px;
	background: linear-gradient(to bottom, var(--colorWhite) 0%,var(--colorWhite) 50%,var(--colorMediumGray) 100%);
}
.vacaturetitel{
	padding: 5px;
    width: 100%;
	padding-right: 140px;
    display: block;
    box-sizing: border-box;
	word-wrap: break-word;
    background: linear-gradient(
    135deg,
    	var(--colorDarkGreen) 0%, var(--colorDarkGreen) 82.5%,

    	var(--colorGreen) 82.5%,var(--colorGreen) 85%,
    	var(--colorDarkGreen) 85%,var(--colorDarkGreen) 87.5%,

    	var(--colorGreen) 87.5%,var(--colorGreen) 90%,
    	var(--colorDarkGreen) 90%,var(--colorDarkGreen) 92.5%,

    	var(--colorGreen) 92.5%,var(--colorGreen) 95%,
    	var(--colorDarkGreen) 95%,var(--colorDarkGreen) 97.5%,

    	var(--colorGreen) 97.5%,var(--colorGreen) 100%
    );
    text-transform: uppercase;
    color:var(--colorWhite);
	font-size: 18px;
	font-weight: bold;
}

.vacatureuitleg{
	display:block;
	padding:5px;
}

.toonmeerblock{
 	color: var(--colorWhite);
 	display:block;
    position: absolute;
  	bottom: -30px;
    float: left;
    margin: 0px 20px;
    font-size: 1em;
    line-height: 30px;
    background-color: var(--colorDarkGray);
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
   	-ms-transform: translateX(-50%);
   	transform: translateX(-50%);
}

.vacaturebody{
	display:block;
}

.toonmeerblock:before {
	content: '';
    height: 0;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    left: -49px;
    z-index: -1;
    border: 49px solid transparent;
    border-top: 30px solid var(--colorDarkGray);
    border-bottom: 0px solid transparent;
}

.toonmeerblock.hidden{
	display:none;
}

.toonminderblock{
 	color: var(--colorWhite);
 	display:block;
    position: absolute;
    bottom: 2px;
    float: left;
    margin: 0px 20px;
    font-size: 1em;
    line-height: 30px;
    background-color: var(--colorDarkGray);
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
   	-ms-transform: translateX(-50%);
   	transform: translateX(-50%);
}

.toonminderblock:before {
	content: '';
    height: 0;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    left: -49px;
    z-index: -1;
    border: 49px solid transparent;
    border-bottom: 30px solid var(--colorDarkGray);
    border-top: 0px solid transparent;
}

.toonminderblock.hidden{
	display:none;
}

/* ################################ */
.hpto_admin_container{
	display: table;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--colorGray);
	vertical-align: top;
	line-height: 25px;
	margin-bottom: 30px;
}

.hpto_admin_container.nomargin{
	margin-bottom: 0px;
}

.hpto_admin_container div{
	padding-left: 5px;
	padding-right: 5px;
	border-right: 1px solid var(--colorMediumGray);
	vertical-align: top;
	line-height: 30px;
}
.hpto_admin_container div:nth-child(2n){
	border-right: 0px solid var(--colorMediumGray);
}

.hpto_admin_row{
	display: table-row;
}
	.hpto_admin_row div{
		border-top: 1px solid var(--colorLightGray);
	}
	.hpto_admin_row.title{
		font-weight: 600;
		background-color: var(--colorLightGray);
	}

	.hpto_admin_name{
		display: table-cell;
		width: 150px;
		vertical-align: top;
	}
	.hpto_admin_desc{
		display: table-cell;
		width: 400px;
		vertical-align: top;
	}
	.hpto_admin_vantot{
		display: table-cell;
		width: 200px;
		vertical-align: center;
		text-align:right;
		margin-right: 10px;
	}
	.hpto_admin_views{
		display: table-cell;
		vertical-align: top;
		width: 40px;
	}
	.hpto_admin_edit{
		display: table-cell;
		padding-right: 5px;
		vertical-align: middle !important;
		text-align: center;
		height: 100%;
		border-style: none !important;
		cursor: pointer;
	}
		.hpto_admin_edit img{
			margin-top: 7px;
		}
		.hpto_admin_edit:hover{
			background-color: var(--colorDarkBlue);
		}

.hpto_admin_def{
	display: table-cell;
	width: 250px;
}
.hpto_admin_val{
	display: table-cell;
}
.hpto_admin_comment{
	font-size: 11px;
	font-style: italic;
}


/* ####################################### */
/* Zoekresultaten filters			   */
/* ####################################### */
	.menu .filter .title{
		display: block;
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		font-weight: 500;
		margin-right:5px;
		margin-left: 15px;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.menu .filter .filtercontainer{
		display: block;
	}
	.menu .filter .filtercontainer.hidden{
		display: none;
	}
		.menu .filter .filtercontainer label{
			cursor: pointer;
		}

	.menu .filter .filtercontainer:first-child .title{
		margin-top: 0px;
	}

	.menu .filter .option{
		display: block;
		font-family: 'arial', sans-serif;
		font-size: 11px;
		font-weight: 400;
		margin-right:5px;
		margin-left: 15px;
		/*margin-bottom: 10px;*/
		margin-bottom: 8px;
		cursor: pointer;
		position: relative;
	}

	.menu .filter .option > *{
		display:inline-block;
		vertical-align: top;
	}

	.menu .filter .option > span{
		margin-left: 8px;
	}

	.menu .filter .option.hidden{
		display: none;
	}

	.menu .filter .option.more{
		margin-left: 35px;
		font-weight: 700;
		margin-bottom: 3px;
	}
	.menu .filter .option .largefont{
		font-size: 16px;
		position: absolute;
		top: -4px;
		margin-left: 2px;
	}

	.menu .filter .title label{
		position: relative;
		top: -2px;
		left: 5px;
	}

	.menu .filter .option label{
		position: relative;
		left: 5px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
		.menu .filter .option > label{
			/*white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width:120px;*/
			max-width:150px;
		}

		.menu .filter .option .label_aantal{
			color: var(--colorDarkGray);
		}
		.menu .filter .option .label_aantal_gray{
			color: var(--colorGray);
		}
		.menu .filter .option .label_aantal.gray{
			color: var(--colorGray);
		}

	.menu .filter .line{
		display: block;
		margin-right:15px;
		height: 1px;
		background-color: var(--colorLightGray);
		margin: 5px 10px 5px 10px;
	}

	.menu .filter .filteroptiescontainer{
		max-height: 185px;
		overflow: hidden;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}

	.menu .filter .filteroptiescontainer.nomore{
		height: auto;
		overflow: visible;
	}

	.filteractief{
		display: inline-block;
		margin-left: 10px;
		background-color: var(--colorGreen);
		border: 1px solid var(--colorGreen);
		margin-top: 10px;
		cursor: pointer;
	}
		.filteractief .naam{
			display: inline-block;
			color: var(--colorWhite);
			margin-left: 6px;
			margin-right: 6px;
		}
		.filteractief .sluiten{
			display: inline-block;
			background-color: var(--colorWhite);
			color: var(--colorGreen);
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
		}

	.filteractief:hover{
		background-color: var(--colorWhite);
	}
		.filteractief:hover .naam{
			color: var(--colorGreen);
		}
		.filteractief:hover .sluiten{
			background-color: var(--colorGreen);
			color: var(--colorWhite);
		}

	#list_bottomheader_text{
		display: block;
		margin-top: 25px;
		margin-left: 10px;
	}
		#list_bottomheader_text .title{
			font-family: 'Roboto', sans-serif;
			font-size: 18px;
			font-weight: 500;
			color: var(--colorGreen);
		}

	#list_bottomheader .to-top{
		display: inline-block;
		float: right;
		position: relative;
		top: 20px;
	}
		#list_bottomheader .to-top .img{
			display: inline-block;
			width: 25px;
			vertical-align: middle;
		}
			#list_bottomheader .to-top .img img{
				vertical-align: middle;
			}
		#list_bottomheader .to-top .text{
			display: inline-block;
			vertical-align: middle;
		}


/* ############################ */
/* Email voorkeuren	        */
/* ############################ */

	.emailvoorkeuren_checkbox{
		display:inline-block;
		margin-left: 10px;
		margin-right: 5px;
		line-height: 30px;
	}
	.emailvoorkeuren_checkbox input[type="checkbox"]{
		width: 16px;
		height: 16px;
	}
	.emailvoorkeuren_label{
		display:inline-block;
		line-height: 30px;
		position: relative;
		top: -2px;
	}
	.emailvoorkeuren_title{
		display: block;
		font-weight: bolder;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.emailvoorkeuren_text{
		margin-left: 10px;
	}
	.emailvoorkeuren_statusupdate{
		line-height: 200%;
		margin-bottom: 50px;
		margin-left: 10px;
	}

	#mailingakkoord_show{
		visibility: hidden;
		line-height: 30px;
	}
		#mailingakkoord_show.show{
			visibility: visible;
		}

	#optin_container{
		display: block;
		margin-top: 40px;
		visibility: hidden;
	}
		#optin_container.show{
			visibility: visible;
		}

.blocksheader{
	min-width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}

#wordcloudcont{
	position: relative;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 0 15px;
    overflow: hidden;
    height: 128px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    justify-content: space-between;
}

#wordcloudcont .searchwordlink{
   	font-family: 'Roboto';
    font-size: 13px;
    line-height: 21px;
    cursor: pointer;
    margin: 0 2px;
    color: var(--colorDarkGray);
    display: inline-block;
}

#wordcloudcont .searchword{
    display: inline-block;
}

#wordcloudcont .searchwordlink:hover, .wcpageletter:hover{
	text-decoration: underline;
}

.wordclouddivider{
	margin:0 5px;
}

.azline{
    margin: 15px 0 10px 17px;
    box-sizing: border-box;
}

.wordcloudindex{
    margin: 10px 10px 10px 0;
}

.wcpageletter{
	cursor:pointer;
}

.wordcloudcontainer .wcpageletter{
	font-size:18px;
}

.wcpageletter a{
	color: var(--colorDarkGray);
}

.wcpageletter:not(:last-child):after{
	content:'|';
	margin:0 3px;
	color: var(--colorDarkGray);
}

.wordcloudcontainer{
	box-sizing: border-box;
	padding:10px;
}

#whiteline{
	position: absolute;
	display: block;
    right: 20px;
    height: 128px;
    width: 3px;
    background: var(--colorWhite);
}

.pwLengthNote{
	max-width:400px;
}

.pwLengthNote::after{
    display: inline-block;
    content: "Let op! Je wachtwoord mag maximaal 20 tekens zijn.";
    box-sizing: border-box;
    padding: 5px;
    margin: 5px 0 0 0;
    background-color:var(--colorWhite);
    border: 2px solid var(--colorGreen);
    font-size:12px;
    color: var(--colorDarkGray);
}

#settings input:read-only{
	background-color:var(--colorLightGray);
}

#header_melding{
	display: block;
	height: 50px;
	padding-left: 25px;
	line-height: 50px;
	position: relative;
	margin-top: 10px;
}

	#header_melding .header_melding_tekst{
		display: inline-block;
	}
	#header_melding .header_melding_sluit{
		display: inline-block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0px;
		right: 0px;
		text-align: center;
	}
		#header_melding .header_melding_sluit:hover{
			cursor: pointer;
			background-color: rgba(0,0,0,0.1);
		}