/* Home css */

@import url(animations.css);

.wrapper					{ width: 1155px; padding: 0px; }

#container {
	position: relative;
	background-color: transparent;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	margin-top: 0px;
	padding: 0px;
	margin-bottom: 1.5em;
	}

aside							{ display: none; }

#content 						{ width: 100%; float: none; }

#breadcrumb {
	line-height: 50px;
	height: 54px;
	margin-bottom: 1px;
	}




/* social media list */
div.social-media-list {
	display: grid;
	grid-template-columns: 50% 50%;
}

div.social-media-list div {
	padding: 1em;
}

.notification-btn {
	right: 318px;
}


/* activities */
.activitieslist {
	background-color: rgba(255,255,255,0.7);
	border: 0px;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
	margin-bottom: 18px;
	padding: 36px;
	display: block;
	}

.formfields dt,
.activitieslist h2 {
	font-weight: bold;
	font-size: 1.7em;
	color: #ff9f1c;
	color: #000;
	margin-bottom: 36px;
	}

.activitieslist .iconslist {
	list-style: none;
	-moz-column-count: 5;
	-webkit-column-count: 5;
	column-count: 5;
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px;
	column-gap: 20px;
	}

	.activitieslist .iconslist{
	margin-bottom:0px !important;
}

#content .iconslist li {
	margin-left: 0px;
	padding: 9px 0 9px 0;
	overflow: hidden; /* fix for Firefox */
	-webkit-column-break-inside: avoid;
	-webkit-transform: translate3d(0, 0, 0);
}

ul.horeca-icon { float:left; column-gap: 0px !important; }

.icon input[type="radio"] 				{ height: 0; width: 0; }
.icon input[type="radio"] + label		{ cursor: pointer; }
.icon a 								{text-decoration: none; }
.icon a label							{ cursor: pointer; color: #5f5f5f;}
.icon input[type="radio"] + label span,
.icon a label span {
    display: inline-block;
    width: 33px;
    height: 33px;
    margin: 0px 10px 0 0;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 30px 90px;
    cursor: pointer;
}

.icon a:focus-visible 					{ outline: none; }
.icon:focus-within 						{ outline: auto; outline-color: black; }

.icon:hover,
.icon:hover a label, 
.icon a:focus label   	 				{ color: #6dc04e; }

.icon:hover input[type="radio"] + label span,
.icon:hover a label span {
	background-position: -0px -60px;
    background-size: 30px 90px;
    width: 33px;
    height: 33px;
    color: #6dc04e;
}

.highlight-block {
	background: #f6990f;
    width: 400px;
    float: right;
    z-index: 1;
	padding-bottom: 15px;
	position:relative;
	position: absolute;
	right: 50px;
	cursor:pointer;
}

.highlight-block:before {
	content:"";
	background: url(/grfx/actueel-kop.png); 
	width:260px;
	height:87px;
	display:block;
	margin:10px 20px 5px 10px;
}

.detail-highlight { float:right; margin-right:15px; }
.detail-highlight:after {
	content:"\f054";
	display:block;
	color:#fff;
	font-family: 'Font Awesome 5 Free';
	font-size:1.2em;
}

.highlight-block .close {
	position:absolute;
	background: url(/grfx/highlight-close.png); 
	width:13px;
	height:13px;
	background-size:13px 13px;
	right:15px;
	top:15px;
	z-index:1;
	cursor:pointer;
}

.highlight-block p, .highlight-block h2  { padding:0px 20px;}
.highlight-block h2 					 { color:#fff; font-size:1.4em; margin-bottom:5px;}
.highlight-block p 						 { color:#fff; }


.icon input[type="radio"]:checked + label span,
.icon a:focus label span						{ background-position: -0px -60px; background-size: 30px 90px; }
.icon input[type="radio"]:checked + label 		{ color: #6dc04e; }

.i1 	input[type="radio"] + label span,
.i1 	a label span							{ background-image: url(/grfx/wandelen/activity-icon-color.png); }
.i2 	input[type="radio"] + label span,
.i2 	a label span							{ background-image: url(/grfx/hardlopen/activity-icon-color.png); }
.i3 	input[type="radio"] + label span,
.i3 	a label span							{ background-image: url(/grfx/golfen/activity-icon-color.png); }
.i4		input[type="radio"] + label span,
.i4 	a label span							{ background-image: url(/grfx/vissen/activity-icon-color.png); }
.i5 	input[type="radio"] + label span,
.i5 	a label span							{ background-image: url(/grfx/kinderuitje/activity-icon-color.png); }
.i6 	input[type="radio"] + label span,
.i6 	a label span							{ background-image: url(/grfx/metdehond/activity-icon-color.png); }
.i7 	input[type="radio"] + label span,
.i7 	a label span							{ background-image: url(/grfx/bootcamp/activity-icon-color.png); }
.i8 	input[type="radio"] + label span,
.i8 	a label span							{ background-image: url(/grfx/paardrijden/activity-icon-color.png); }
.i9 	input[type="radio"] + label span,
.i9 	a label span							{ background-image: url(/grfx/barbeque/activity-icon-color.png); }
.i10 	input[type="radio"] + label span,
.i10 	a label span							{ background-image: url(/grfx/educatie/activity-icon-color.png); }
.i11 	input[type="radio"] + label span,
.i11 	a label span							{ background-image: url(/grfx/fietsen/activity-icon-color.png); }
.i12 	input[type="radio"] + label span,
.i12 	a label span							{ background-image: url(/grfx/bodymind/activity-icon-color.png); }
.i13 	input[type="radio"] + label span,
.i13 	a label span							{ background-image: url(/grfx/zwemmen/activity-icon-color.png); }
.i14 	input[type="radio"] + label span,
.i14 	a label span							{ background-image: url(/grfx/kamperen/activity-icon-color.png); }
.i15	input[type="radio"] + label span,
.i15 	a label span							{ background-image: url(/grfx/indoor/activity-icon-color.png); }
.i16 	input[type="radio"] + label span,
.i16 	a label span							{ background-image: url(/grfx/steppen/activity-icon-color.png); }
.i17 	input[type="radio"] + label span,
.i17 	a label span							{ background-image: url(/grfx/skeeleren/activity-icon-color.png); }
.i18 	input[type="radio"] + label span,
.i18 	a label span							{ background-image: url(/grfx/watersport/activity-icon-color.png); }
.i19 	input[type="radio"] + label span,
.i19 	a label span							{ background-image: url(/grfx/overnachten/activity-icon-color.png); }
.i20	input[type="radio"] + label span,
.i20 	a label span					 		{ background-image: url(/grfx/groepsactiviteiten/activity-icon-color.png); }
.i21	input[type="radio"] + label span,
.i21 	a label span					 		{ background-image: url(/grfx/horeca/horeca-icon-color.png); }
.i22	input[type="radio"] + label span,
.i22 	a label span					 		{ background-image: url(/grfx/klimmuur/activity-icon-color.png); }
.i23	input[type="radio"] + label span,
.i23 	a label span					 		{ background-image: url(/grfx/dagkamperen/activity-icon-color.png); }
.i24	input[type="radio"] + label span,
.i24 	a label span					 		{ background-image: url(/grfx/etenendrinken/activity-icon-color.png); }
.i25	input[type="radio"] + label span,
.i25 	a label span					 		{ background-image: url(/grfx/fort/activity-icon-color.png); }
.i26	input[type="radio"] + label span,
.i26 	a label span					 		{ background-image: url(/grfx/duiken/activity-icon-color.png); }
.i27	input[type="radio"] + label span,
.i27 	a label span					 		{ background-image: url(/grfx/wildspotten/activity-icon-color.png); }
.i28	input[type="radio"] + label span,
.i28 	a label span					 		{ background-image: url(/grfx/skien/activity-icon-color.png); }
.i29	input[type="radio"] + label span,
.i29 	a label span					 		{ background-image: url(/grfx/varen/activity-icon-color.png); }
.i30	input[type="radio"] + label span,
.i30 	a label span					 		{ background-image: url(/grfx/watersport/activity-icon-color.png); }
.i31	input[type="radio"] + label span,
.i31 	a label span					 		{ background-image: url(/grfx/waterskien/activity-icon-color.png); }
.i32	input[type="radio"] + label span,
.i32 	a label span					 		{ background-image: url(/grfx/surfen/activity-icon-color.png); }
.i33	input[type="radio"] + label span,
.i33 	a label span					 		{ background-image: url(/grfx/kanoen/activity-icon-color.png); }
.i34	input[type="radio"] + label span,
.i34 	a label span					 		{ background-image: url(/grfx/melding/activity-icon-color.png); }

.i21:hover input[type="radio"] + label span, .i21 input[type="radio"]:checked + label, .i21:hover   {   color: #f6990f; }


.formfields						{ display: block; }
.formfields dt 					{ width: 126px; float: left; }
.formfields dd 					{ margin-left: 126px; }
.formfields dd ul				{ margin-bottom: 0px !important; }

.formfields input[type=text] {
    border: 1px solid #dcdcdc;
    font-size: 1em;
    color: #5f5f5f;
    height: 54px;
    padding: 5px 3px;
    padding-left: 5px;
	-webkit-appearance: none;
    -webkit-border-radius: 0px;
	}

.formfields select {
    padding: 5px 3px;
    padding-left: 5px;
    font-size: 1em;
    color: #5f5f5f;
    background: #fff;
    border: 1px solid #dcdcdc;
    min-width: 90px;
    height: 54px;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0px;
    cursor: pointer;
	}

.formfields select:focus,
.formfields input[type=text]:focus {
	outline: auto;
	outline-color: black;
}

.formfields select::-ms-expand	{ display:none; }

.formfields label 				{ position: relative; }
.formfields label:after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    color: #aaa;
    right: 8px; top: 0px;
    padding: 0 0 2px;
    border-bottom: 0px solid #ddd;
    position: absolute;
    pointer-events: none;
}

.formfields .select-icon {
	-webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
	content: "\f107";
	font-family: 'Font Awesome 5 Free';
} 

.formfields label:before {
    content: "";
    right: 5px; top: 0px;
    background: #fff;
    width: 21px;
    height: 21px;
    position: absolute;
    pointer-events: none;
    display: block;
	}

.formfields .remove-label-content:before,
.formfields .remove-label-content:after {
	content: none;
}

.formfields ul 					{ list-style: none; }

.notification {
	font-size: 1em;
	color: #f00;
	margin-top: 6px;
	display: inline-block;
	display:none;
	}


#content .formfields li {
	color: #000;
	margin-right: 3px;
	margin-left: 0px;
	display: inline-block;
	vertical-align: bottom;
	}


/* gebieden */
.arealist h2 {
	background-color: #fff;
	font-size: 1.4em;
	color: #472e30;
	padding: 18px;
	}

.arealist						{ display: block; }
.arealist .item 				{ background-color: #27a9d8; }
.arealist .item:nth-child(even)	{ background-color: #2cb8ec; }
.arealist .item:nth-of-type(3n)	{ margin-right: 0px; }

.arealist .item p				{ color: #fff; }
.arealist .item h3				{ text-transform: uppercase; }

.arealist .item .intro:after {
	content: "\f061";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.1em;
	color: #ff9f1c;
	margin-left: 14px;
	}

.arealist .item:hover .intro:after {
	margin-left: 24px;
	}

.arealist .item a:focus-visible { outline: none; }
.arealist .item:focus-within {
	outline: auto;
	outline-color: black;
} 

/* nieuws */
.facilities h2					{ font-size: 1.4em; color: #472e30; margin-bottom: 1em; }
.facilities h2 b				{ color: #ff9f1c; }

.whiteblock						{ 
	background-color: #fff; 
	margin: 1em 0 1em 0;
	padding-top: 1em;
	
	display: block; 
}

.greenblock {
	margin-bottom: 1em;
}

.column							{ 
/*								width: 50%; */
								padding-right: 40px;
								float: left; 
								}

.newslist dl 					{ display: block; 

}
.newslist dt 					{ 
	width: 13%; 
	/* float: left;  */
	display: inline-block;
	padding: 0.5em;

}
.newslist dt img {
	max-width: 100%;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.newslist dt img[src=""] {
	box-shadow: none;
}

.newslist dd					{ 
	/* margin-left: 126px; */
	display: inline-block;
	width: 80%;
	vertical-align: top;
	margin-left: 1em;
}

.newslist .item 				{ box-shadow: none; width: auto; height: auto; margin-right: 0px; margin-bottom: 36px; overflow: visible; float: none; }
.newslist .item .btn			{ margin-top: 0px; }
.newslist .item p				{ color: #5f5f5f; padding: 0px; }
.newslist .item p:first-child	{ height: auto; }
.newslist .item a h3 			{ color: #472e2f; margin-bottom: 0px; padding: 0px; }
.newslist .item .intro:after {
	content: "\f061";
	font-family: 'Font Awesome 5 Free';
	font-size: 1.1em;
	color: #ff9f1c;
	margin-left: 10px;
	}

.newslist .item:hover .intro:after {
	margin-left: 20px;
	}


/* map */
.map-block ul					{ margin-left: 20px; }
.map-block p					{ 
	margin: 1em;
}

.map-block {
	margin-bottom: 1.5em;
	background-color: transparent; display: block; 
}

.map-block dd {
	width: calc(100% - 910PX);
	display: inline-block;
	vertical-align: top;
}

.map-block dt { 
	width: 900px; 
	display: inline-block;
	vertical-align: top;
 }

#map {
	background-color: #ccc;
	text-align: center;
	width: 100%;
	height: 425px;
}



.apps {
	list-style: none;
	margin-top: 18px;
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px;
	column-gap: 20px;
	}

.apps li {
	background-repeat: no-repeat;
	background-position: center 0px;
	text-align: center;
	padding-top: 108px;
	margin-left: 0px;
	overflow: hidden; /* fix for Firefox */
	-webkit-column-break-inside: avoid;
	-webkit-transform: translate3d(0, 0, 0);
	}

/*.apps li a 						{ color: #472e30; text-decoration: none; padding-top: 108px; display: block; }*/

.sloepennetwerk					{ background-image: url(/grfx/sloepennetwerk.png); }
.wandelnetwerk					{ background-image: url(/grfx/wandelnetwerk.png); }
.fietsennetwerk					{ background-image: url(/grfx/fietsennetwerk.png); }
.natuurwegwijzer				{ background-image: url(/grfx/natuurwegwijzer.png); }

#freesearch {
	right: -25px;
}



/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */
@media only screen and (max-width: 1280px) {
	.map-block dt					{ width: 820px; }
	.map-block dd					{ width: calc(100% - 830px); }

	#subfooter .wrapper 			{ width: 1155px; padding: 0px; }

	.arealist .item 				{ width: calc(33% - (15px / 2));}
}

@media only screen and (max-width: 1152px) {

	.wrapper						{ width: 1002px; }

	.map-block dt					{ width: 720px; }
	.map-block dd					{ width: calc(100% - 730px); }

	.apps {
		-moz-column-gap: 10px;
		-webkit-column-gap: 10px;
		column-gap: 10px;
		}

	.apps li 						{ font-size: 0.9em; }

	#subfooter .wrapper 			{ width: 1002px; padding: 0px; }

	.arealist .item 				{ width: 307px;}
}

@media only screen and (max-width: 1024px) {

	header							{ height: 770px; }

	#main							{ margin-top: -536px; }
	.wrapper						{ width: 936px; }

	.activitieslist .iconslist {
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
		-moz-column-gap: 10px;
		-webkit-column-gap: 10px;
		column-gap: 10px;
		}

	.arealist .item 				{ width: calc(33% - (15px / 2));}
	.arealist .item a h3,
	.arealist .item .date 			{ font-size: 1em; }
	.arealist .item p				{ line-height: 1.4em; }
	.arealist .item p:first-child 	{ margin-bottom: 18px; }

	.map-block dt					{ width: 640px; }
	.map-block dd					{ width: calc(100% - 650px); }

	.apps {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: 20px;
		-webkit-column-gap: 20px;
		column-gap: 20px;
		}

	.apps li 						{ font-size: 1em; margin-bottom: 18px; }

	#subfooter .wrapper 			{ width: 936px; padding: 0px; }

}

@media only screen and (max-width: 960px) {

	#main							{ margin-top: -524px; }
	.wrapper						{ width: 777px; }

	.activitieslist 				{ padding: 30px; }

	.arealist .item 				{ width: calc(50% - (15px / 2));}
	.arealist .item:nth-of-type(2n) { margin-right: 0px; }
	.arealist .item:nth-of-type(3n) { margin-right: 15px; }

	.map-block dt					{ width: 540px; }
	.map-block dd					{ width: calc(100% - 550px); }

	#subfooter .wrapper 			{ width: 777px; padding: 0px; }
	#subfooter h2					{ font-size: 1.3em; }

}

/* ==> breakpoint tablets */
@media only screen and (max-width: 800px) {

	header							{ height: 600px; }

	#main							{ margin-top: -320px; }
	.wrapper						{ width: 100%; }

	#breadcrumb 					{ margin-bottom: 0px; }

	.activitieslist 				{ background-color: rgba(255,255,255,1); }
	.activitieslist .iconslist {
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
		}

	.arealist .item p				{ font-size: 0.85em; line-height: 1.4em; }

	.map-block dt					{ width: 515px; }
	.map-block dd					{ width: calc(100% - 525px); }

	.apps {
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
		}

	#subfooter .wrapper 			{ width: 100%; padding: 0px; }
	#subfooter h2					{ font-size: 1.4em; }

	.whiteblock						{ padding: 25px 25px 20px 25px; }
	.column							{ width: 100%; margin-bottom: 36px; padding-right: 0px; float: none; }

}

@media only screen and (max-width: 768px) {

	.map-block dt					{ width: 400px; }
	.map-block dd					{ width: calc(100% - 410px); }
	.notification-btn {
		right: 25px;
	}
	
}

/* ==> breakpoint mobiles */
@media only screen and (max-width: 640px) {

	header							{ height: 550px; }

	#main							{ margin-top: -270px; }

	.activitieslist .iconslist {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		}

	.arealist .item 				{ width: 100%;}
	.arealist .item p > img 		{ width: 100%;}

	.newslist dt 					{ display: block; width: 100%; padding: 18px; }
	.newslist dt img				{ width: 100%; }
	.newslist dd					{ margin-left: 0; width: 100%; padding: 0 18px 0 18px; }
	
	.map-block dd,
	.formfields dd 					{ margin-left: 0px; }

	.formfields dt,
	.map-block dt					{ width: 100%; float: none; }

	.map-block dd					{ 
		padding: 25px; 
		width: 100%;
	}

	.apps {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		}

}

@media only screen and (max-width: 480px) {

	header							{ height: 400px; }

	#main							{ margin-top: -140px; }

	.activitieslist 				{ padding: 20px; }
	.highlight-block {
		max-width: 100%;
		right: 0px;
	}

}

@media only screen and (max-width: 360px) {

	header							{ height: 340px; }

	#main							{ margin-top: -50px; }

	.activitieslist .iconslist {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		}

	.formfields ul li:nth-of-type(3) {
		text-align: center;
		width: 92%;
		margin: auto;
		padding-top: 18px;
		}

	.newslist dt 					{ display: block; width: 100%;}
	.newslist dd					{ margin-left: 0; width: 100%;}

	.newslist .item a h3,
	.newslist .item .date 			{ font-size: 1em; }
	.newslist .item .intro			{ font-size: 0.95em; }

	#subfooter h2					{ font-size: 1.2em; }

}


/* print */
@media print {

	.activitieslist {
		box-shadow: none;
		padding: 0px;
		}

	.activitieslist h2 				{ color: #000; }

	.activitieslist .iconslist {
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
		}

	.arealist h2 					{ color: #000; padding: 0px; }

	.arealist .item 				{ background-color: transparent; }
	.arealist .item:nth-child(even)	{ background-color: transparent; }

	.arealist .item p				{ color: #000; }
	.arealist .item .intro:after 	{ display: none; }

	.column							{ width: 100%; padding-right: 0px; float: none; }

	.newslist .item p				{ color: #000; }
	.newslist .item a h3 			{ color: #000; }

	#subfooter h2					{ color: #000; }

	.greenblock						{ background-color: transparent; margin-bottom: 36px; }
	.map-block dt					{ width: 100% }
	.map-block dd					{ width: 100% }


}