body { background-color: #2f86c7; margin: 0px; font-size: 12px; font-family: 'Roboto', sans-serif;}
@media screen and (max-width: 825px) { body {font-size: 15px; } .niet_mob { display: none; }}
@media screen and (min-width: 825px) { .niet_pc { display: none; }}
* { box-sizing: border-box;}

#header { z-index: 999; width: 100%; padding-left: 10px; height: 80px; position: fixed; top: 0; left: 0; background-color: #eff0f1; box-shadow: 4px 4px 3px #a1a1a1;}
#header span { display: block; width: 100%; max-width: 1000px; height: 100%; position: relative; }
@media screen and (max-width: 825px) { 
	#header span #logo { height: calc(100% - 20px); margin-top: 10px; width: auto; }
	#header span h1 { display: inline-block; font-size: 20px; color: #2f86c7; position: absolute; top: 25px; left: 100px; padding: 0; margin: 0;}
	#header .uitlogknop { position: absolute; top: 25px; right: 5px; color: #2f86c7; text-decoration: none; font-size: 22px; }
	#header .uitlogknop:hover { color: #aaaaaa;}
}
@media screen and (min-width: 825px) {
	#header span { margin: 0 auto 0 auto; }
	#header span #logo { height: calc(100% - 20px); margin-top: 10px; width: auto; margin-right: 20px;}
	#header span h1 { display: inline-block; font-size: 30px; color: #2f86c7; position: absolute; top: 22px; left: 100px; padding: 0; margin: 0;}
	#header .uitlogknop { position: absolute; top: 25px; right: 5px; color: #2f86c7; text-decoration: none; font-size: 25px; }
	#header .uitlogknop:hover { color: #aaaaaa;}
}

#content_container { width: 100%; margin-top: 80px; position: relative; background-color: #fafafb;}
@media screen and (max-width: 825px) { 
	#content_container #content  { display: block; padding: 30px 10px; }
	#content h1 { font-size: 16px; color: #2f86c7; }
	#content h2 { font-size: 14px; color: #a1a1a1;  clear: both;}	
	#content p { font-size: 12px; line-height: 18px; }
	#content p.inleiding { font-size: 13px; font-weight: bold; line-height: 20px; }
	#content p a { color: #2f86c7; text-decoration: none; } 
	#content p a:hover { color: #2f86c7; text-decoration: underline; } 
	.blok, .blok_links, .blok_rechts { display: block; width: 100%; margin-bottom: 10px; margin-top: 10px; }

}
@media screen and (min-width: 825px) {
	#content_container #content  {  max-width: 1000px; margin: 0 auto 0 auto; padding: 30px 0;}
	#content h1 { font-size: 24px; color: #2f86c7; }
	#content h2 { font-size: 18px; color: #a1a1a1; clear: both;}
	#content p { font-size: 12px; line-height: 18px; }
	#content p.inleiding { font-size: 13px; font-weight: bold; line-height: 20px; }
	#content p a { color: #2f86c7; text-decoration: none; } 
	#content p a:hover { color: #2f86c7; text-decoration: underline; } 
	.blok { display: block; width: 100%; margin-bottom: 10px;}
	.blok_links { display: block; width: calc(50% - 20px); margin: 0px 10px 10px 0px; float: left;}
	.blok_rechts{ display: block; width: calc(50% - 20px); margin: 0px 0px 10px 10px; float: left;}
}
h3.faqvraag { font-size: 13px; cursor: pointer; }

#breadcrumb { display: block; width: 100%; font-size: 10px; color: grey; padding-top: 3px; padding-bottom: 3px; border-bottom: 1px solid #eff0f1; margin-bottom: 10px; }
#breadcrumb a { color: grey; text-decoration: none; }
#breadcrumb a:hover { color: #2f86c7; text-decoration: underline; }
@media screen and (max-width: 600px) {
	#breadcrumb { clear: both; }
}

#zoekbalk { width: 100%; background-color: #eff0f1; box-shadow: 3px 3px 3px #a1a1a1; border: 1px solid #eff0f1; border-radius: 4px; padding: 8px; }
#zoekbalk i { font-size: 20px; color: #2f86c7; }
#zoekbalk input[type=text] { height: 30px; border-style: none; padding: 4px; background-color: #f8f8f8; color: #2f86c7; font-size: 1.2em;}
#zoekbalk select { height: 30px; border-style: none; padding: 4px; background-color: #f8f8f8; color: #2f86c7; font-size: 1.2em;}
@media screen and (max-width: 600px) {
#zoekbalk {  margin-top: 10px }
#zoekbalk input[type=text] { width: calc(100% - 30px); float: right; -webkit-appearance: none;}
#zoekbalk select { clear: both; width: calc(100% - 30px); float: right; margin-top: 10px; -webkit-appearance: none;}
}
@media screen and (min-width: 600px) {
#zoekbalk input[type=text] { width: calc(100% - 230px); }
#zoekbalk select { width: 200px; }
}

img.nietgevonden { width: 100%; height: auto; }
.evenementvak, .evenementvakvol { position: relative; margin: 10px 10px 10px 30px; box-shadow: 3px 3px 3px #a1a1a1; border: 1px solid #eff0f1; border-radius: 4px; float: left; }
.evenementvak:after, .evenementvakvol:after { content: ""; display: block; padding-bottom: 100%; }
.evenementvak:hover { box-shadow: 3px 3px 3px #808080; }
.evenementvak .prijs { position: absolute; top: -10px; left: -30px; background-color: #2f86c7; font-size: 20px; min-width: 85px; text-align: center; color: white; text-shadow: 2px 2px 4px #a1a1a1; border: 2px solid white; padding: 25px 4px; border-radius: 42px; }
.evenementvak:hover .prijs { background-color: #4596d3; text-shadow: 2px 2px 4px #808080;}
.evenementvakvol .prijs { position: absolute; top: -10px; left: -30px; background-color: #a1a1a1; font-size: 20px; min-width: 85px; text-align: center; color: white; text-shadow: 2px 2px 4px #a1a1a1; border: 2px solid white; padding: 25px 4px; border-radius: 42px; }
.evenementvak .binnenkort { position: absolute; top: 0; left: 0; background-color: #2f86c7; color: white; width: 100%; padding: 5px; text-align: right; }
.evenementvakvol .binnenkort { position: absolute; top: 0; left: 0; background-color: #2f86c7; color: white; width: 100%; padding: 5px; text-align: right; }
.evenementvak .evenementvakafbeelding { opacity: 0.9; position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 100% auto; text-align: center; color: #2f86c7;}
.evenementvak:hover .evenementvakafbeelding { opacity: 1; }
.evenementvak .evenementvakafbeelding i, .evenementvakvol .evenementvakafbeelding i { font-size: 4em; margin-top: 30%;  display: block; }
.evenementvakvol .evenementvakafbeelding { position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-color: #fff; background-blend-mode: luminosity; background-size: 100% auto; text-align: center; color: #a1a1a1;}
.evenementenvak .beschikbaar, .evenementenvakvol .beschikbaar { text-align: center; position: absolute; height: 25px; bottom: 90px; width: 50%; left: -50%; background: rgba(0,240,240,0.8); }
.evenementvak .evenementvakcontent, .evenementvakvol .evenementvakcontent { position: absolute; width: 100%; height: 70px; background-color: white; bottom: 0; padding: 4px; text-align: center;}
@media screen and (min-width: 1000px) {
	.evenementvak, .evenementvakvol { width: calc(33% - 40px); }
	.evenementvak .evenementvakcontent { font-size: 14px; color: black; }
	.evenementvakvol .evenementvakcontent { font-size: 14px; color: #a1a1a1;}
	.evenementvak .evenementvakcontent h3 { font-size: 16px; font-weight: 800; color: #2f86c7; margin-top: 2px; margin-bottom: 0px;}
	.evenementvakvol .evenementvakcontent h3 { font-size: 16px; font-weight: 800; color: #a1a1a1; margin-top: 2px; margin-bottom: 0px;}
}
@media screen and (max-width: 600px) {
	.evenementvak, .evenementvakvol { width: calc(100% - 40px); }
	.evenementvak .evenementvakcontent { color: black;}
	.evenementvakvol .evenementvakcontent { color: #a1a1a1;}	
	.evenementvak .evenementvakcontent h3 { font-size: 16px; font-weight: 800; color: #2f86c7; margin-top: 2px; margin-bottom: 0px;}
	.evenementvakvol .evenementvakcontent h3 { font-size: 16px; font-weight: 800; color: #a1a1a1; margin-top: 2px; margin-bottom: 0px;}
}
@media screen and (max-width: 1000px) and (min-width: 600px) {
	.evenementvak, .evenementvakvol { width: calc(50% - 40px); }
	.evenementvak .evenementvakcontent { font-size: 14px; color: black;}
	.evenementvakvol .evenementvakcontent { font-size: 14px; color: #a1a1a1;}
	.evenementvak .evenementvakcontent h3 { font-size: 17px; font-weight: 800; color: #2f86c7; margin-top: 2px; margin-bottom: 0px;}
	.evenementvakvol .evenementvakcontent h3 { font-size: 17px; font-weight: 800; color: #a1a1a1; margin-top: 2px; margin-bottom: 0px;}
}

#nietbeschikbaar { width: 100%; padding: 10px; text-align: center; background-color: #ff3300; color: white; font-size: 1.3em; display: block;}
#reserveervak { display: block; margin: 10px auto 10px auto; max-width: 480px; background-color: white; border-top-left-radius: 10px; border-bottom-right-radius: 10px; padding: 20px 10px; box-shadow: 5px 5px 22px 0px rgba(156,156,156,1); }
#reservering_aanmaken_knop { cursor: pointer; width: 100%; margin: 10px 0; font-size: 1.5em; color: white; background-color: #2f86c7; border-top-left-radius: 10px; border-bottom-right-radius: 10px;  text-shadow: 2px 2px 4px #a1a1a1; text-align: center; padding: 8px 0;}
#reservering_aanmaken_knop:hover { box-shadow: 0 0 4px #262626; }
#reservering_uitleg { font-size: 10px; color: grey; text-align: center; display: block; }
#reservering_beginuitleg { font-size: 10px; color: grey; text-align: center; display: block; }

.regio_keuze { color: black; text-decoration: none; display: block; width: 50%; float: left; text-align: center; padding: 10px 0 10px 0;}
.regio_keuze:hover { font-weight: bold; color: white; background-color: #0033ff; }

.bedrijf_keuze { position: relative; float: left; height: 150px;display: block; background-color: #fafafb; border: 1px solid #eff0f1; margin: 10px; }
.bedrijf_keuze:hover { background-color: white; border: 1px solid #eff0f1; box-shadow: 2px 2px 1px #eff0f1; }
.bedrijf_keuze .afbeelding { width: 100%; height: 100px; text-align: center; overflow: hidden; }
.bedrijf_keuze .afbeelding img { max-width: 75%; height: auto; }
.bedrijf_keuze .naam { width: 100%; height: 50px; text-align: center; text-decoration: none; color: black; background-color: #eff0f1; position: absolute; bottom: 0px; left: 0px; padding: 3px; }
.bedrijf_keuze:hover .naam { background-color: #ffcc00; font-weight: bold; }
@media screen and (min-width: 825px) { .bedrijf_keuze {width: 225px; }}
@media screen and (max-width: 825px) { .bedrijf_keuze {width: calc(50% - 20px); }}

.bedrijf_info { display: block; width: 100%; color: grey; margin-bottom: 7px; padding: 3px 3px 3px 0px; }
.bedrijf_info i { margin-right: 5px; }
.bedrijf_info a { color: #2f86c7; text-decoration: none; }
.bedrijf_info a:hover { text-decoration: underline; }
.extra_aandacht { margin-left: -5px; padding: 3px 3px 3px 5px; border: 1px solid grey; }
.extra_aandacht i { color: #ffcc00; }


.formulier label { float: left; margin-bottom: 5px;}
.formulier input[type=text], .formulier input[type=email], .formulier input[type=tel] { font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px;}
.formulier input[type=password] { font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px;}
.formulier textarea { font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px;}
.formulier select {font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; border-radius: 0px;} 
@media screen and (max-width: 825px) { 
										.formulier label { display: block; width: 100%; } 
										.formulier input[type=text], .formulier input[type=email], .formulier input[type=tel]{ display: block; width: 100%; padding: 3px; } 
										.formulier textarea { display: block; width: 100%; height: 120px; padding: 3px; }
										.formulier input[type=password]{ display: block; width: 100%;  padding: 3px; } 
										.formulier select{ display: block; width: 100%;  padding: 3px; -webkit-appearance: none; } 
										.formulier .inputgroep { display: block; width: 100%; padding: 3px; } 
									}
@media screen and (min-width: 825px) { 
										.formulier label {width: 150px; } 
										.formulier input[type=text], .formulier input[type=email], .formulier input[type=tel]{ width: 300px; padding: 2px;}
										.formulier textarea { width: 300px; height: 120px; padding: 2px; }
										.formulier input[type=password]{ width: 300px; padding: 2px;} 
										.formulier select{ width: 300px; padding: 2px;} 
										.formulier .inputgroep { width: 300px; padding: 2px; float: left;}
									}


#footer { display: block; width: 100%; background-color: #2f86c7; margin-top: 50px; height: 250px; padding: 20px 0;}
#footer a { color: inherit; text-decoration-color: #00f; text-decoration-style: wavy; }
#footer span { display: block; margin: 20px auto; font-size: 10px; width: 100%; color: white; max-width: 1000px; position: relative;}
#footer span a:hover { decoration: underline; }

button.knop, a.knop { background-color: #eff0f1; font-size: 1.1em; font-weight: bold; padding: 4px; border: 1px solid grey; color: black; height: 28px; text-decoration: none;}
@media screen and (min-width: 825px) { button.knop, a.knop {display: inline-block; text-align: left; margin-bottom: 10px;} }
@media screen and (max-width: 825px) { button.knop, a.knop {display: block; width: 100%; text-align: center; margin-bottom: 10px; float: left !important; clear: left;} }
button.homeknop, a.homeknop { background-color: #eff0f1; font-size: 1.1em; font-weight: 700; padding: 4px; box-shadow: 2px 2px 3px #a1a1a1; border: 1px solid #eff0f1; border-radius: 4px; color: black; height: 28px; text-decoration: none; margin: 4px;}
@media screen and (min-width: 825px) { button.homeknop, a.homeknop {display: inline-block; text-align: left; margin-bottom: 10px; float: right;} }
@media screen and (max-width: 825px) { button.homeknop, a.homeknop {display: block; width: calc(50% - 8px); text-align: center; margin-bottom: 10px; float: left !important;} }
.aanmeldknop {background-color: #ffffff; font-size: 1.1em; font-weight: bold; padding: 4px; border: 1px solid grey; color: black; height: 28px; text-decoration: none; display: inline-block; text-align: left; position: absolute; top: 8px; right: 5px;} 
button.knop:hover, a.knop:hover, .aanmeldknop:hover { border-color: black; box-shadow: 4px 4px 3px grey; cursor: pointer;} 
@media screen and (min-width: 825px) { .groot { font-size: 1.8em; float: right; padding: 5px; } }
@media screen and (max-width: 825px) { .groot { font-size: 1.2em; padding: 5px; } }
span.inloggenknop, span.aanmeldenknop, span.inloglinkknop { color: #2f86c7; cursor: pointer;}
span.inloggenknop:hover, span.aanmeldenknop:hover, span.inloglinkknop:hover { text-decoration: underline; }

.iconknop { background-color: #eff0f1; font-size: 1.1em; font-weight: bold; padding: 5px; border: 1px solid grey;  border-top-left-radius: 5px; border-bottom-right-radius: 5px; color: black; height: 30px; width: 30px; text-decoration: none; display: inline-block; text-align: center; margin-left: 5px; margin-bottom: 10px; float: left; }
.iconknop:hover { background-color: #a1a1a1; color: white; box-shadow: 2px 2px 3px #a1a1a1;}
.iconknopactief { background-color: #2f86c7; font-size: 1.1em; font-weight: bold; padding: 5px; border: 1px solid grey; border-top-left-radius: 5px; border-bottom-right-radius: 5px; color: #eff0f1; height: 30px; width: 30px; text-decoration: none; display: inline-block; text-align: center; margin-left: 5px; margin-bottom: 10px; float: left; }

span.fouten { display: block; color: #D8000C; background-color: #FFD2D2; font-size: 1.05 em; padding: 5px; margin-bottom: 5px; }
span.melding { display: block; color: #00529B; background-color: #BDE5F8; font-size: 1.05 em; padding: 5px; margin-bottom: 5px; }
span.melding_goed { display: block; color: #006600; background-color: #00cc66; font-size: 1.25 em; padding: 5px; margin-bottom: 5px; }

#inlog_vak { position: relative; width: 350px; padding: 10px; background-color: #fefefe; border: 1px solid grey; box-shadow: 5px 5px 3px grey; }
@media screen and (max-width: 825px) { #inlog_vak  {margin: 20px auto auto auto;} }
@media screen and (min-width: 825px) { #inlog_vak  {margin: 130px auto auto auto;} }
.blok #inlog_vak, .blok_links #inlog_vak, .blok_rechts #inlog_vak { margin-top: 20px; }
#inlog_vak h1 { margin: -10px -10px 15px -10px; padding: 10px; background-color: #eff0f1; color: #0033ff; font-weight: bold; font-size: 1.5em; border-bottom: 1px solid grey;}
#inlog_vak label { float: left; margin-bottom: 5px;}
#inlog_vak input[type=text] { float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px;}
#inlog_vak input[type=password] { float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px;}
@media screen and (max-width: 825px) { 
										#inlog_vak label { display: block; width: 100%; } 
										#inlog_vak input[type=text]{ display: block; width: 100%; padding: 3px; } 
										#inlog_vak input[type=password]{ display: block; width: 100%; padding: 3px; } 
									}
@media screen and (min-width: 825px) { 
										#inlog_vak label {width: 150px; } 
										#inlog_vak input[type=text]{ width: 175px;} 
										#inlog_vak input[type=password]{ width: 175px;} 
									}
#popupbg { z-index: 9998; opacity: 0.85; background-color: #2f86c7; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none;}
#popupsluit { z-index: 9999; position: fixed; top: 20px; right: 20px; display: none;}
#popupsluit i { font-size: 4em; color: white; display: block;} 
#popup { display: none; z-index: 9999; position: fixed; border: 1px solid #2f86c7; border-top-left-radius: 20px; border-bottom-right-radius: 20px; background-color: #2f86c7; padding: 0px 10px 0px 10px; box-shadow: 0px 0px 10px 5px rgba(200,200,200,1); }
@media screen and (max-width: 475px) { 
#popup 				 {			 
			 				 z-index: 9999;
							 position: fixed;
							 top: 15%;
							 left: 20px;
							 width: calc(100% - 40px);
							 min-height: 350px;
							 max-height: 450px;
							 overflow-y: auto;
							 }
}
@media screen and (min-width: 475px) { 
#popup 				 {			 
			 				 z-index: 9999;
							 position: fixed;
							 top: 20%;
							 left: 50%;
							 margin-top: -75px;
							 margin-left: -225px;
							 width: 450px;
							 min-height: 400px;
							 max-height: 500px;
							 overflow-y: auto;							 
							 }
}
#inloggenform { display: none; }
#aanmeldenform { display: none; }
#inloglinkform { display: none; }
#popup h1 { color: #fafafb; }
#popup hr { color: #fafafb; margin-bottom: 10px; }
#popup label { float: left; margin-bottom: 5px;}
#popup input[type=text], #popup input[type=tel], #popup input[type=email] { font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px; border: 1px solid #eff0f1; display: block; width: 100%; padding: 5px; margin-top: 5px;}
#popup input[type=text].smal { font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px; border: 1px solid #eff0f1; display: block; width: 50%; padding: 5px; margin-top: 5px;}
#popup input[type=text].smal:nth-child(odd) { width: calc(50% - 10px); margin-left: 10px;}
#popup input[type=password] { font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px; border: 1px solid #eff0f1; display: block; width: 100%;  padding: 5px; margin-top: 5px;}
#popup textarea { font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; -webkit-appearance: none; border-radius: 0px;}
#popup select {font-size: 12px; font-family: verdana; float: left; margin-bottom: 5px; border-radius: 0px;} 
#popup label { display: block; width: 100%; } 
#popup textarea { display: block; width: 100%; height: 50px; padding: 3px; }
@media screen and (max-width: 825px) { 
#popup select{ display: block; width: 100%;  padding: 3px; -webkit-appearance: none; } 
}
@media screen and (min-width: 825px) { 
#popup select{ display: block; width: 100%;  padding: 3px;} 
}
#popup input:checked + label {border: 1px solid red}
.popupknop { background-color: #eff0f1; font-size: 1.1em; font-weight: bold; padding: 4px; box-shadow: 2px 2px 3px #a1a1a1; border: 1px solid #eff0f1; border-top-left-radius: 5px; border-bottom-right-radius: 5px; color: black; height: 28px; text-decoration: none; margin-top: 10px; margin-bottom: 10px; width: 100%; }

table.lijst { width: 100%; border-collapse: collapse; border: 1px solid grey; }
table.lijst tr { background-color: #fafafb; }
table.lijst tr:hover { background-color: #fafafa; }
table.lijst th { margin: 0; padding: 3px; border: 1px solid grey; text-align: left; }
table.lijst td {  margin: 0; padding: 3px; border: 1px solid grey; text-align: left; }
table.lijst a { display: block; color: black; text-decoration: none; }
table.lijst td.input {  margin: 0; padding: 0px; border: 1px solid grey; text-align: left; }
table.lijst input { margin: 0; }

.tooltip {
  position: relative;
  /* display: inline-block;
  border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext_l {
  visibility: hidden;
  width: 200px;
  background-color: #262626;
  opacity: 0.85;
  color: #f2f2f2;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: -1px;
  left: -5%;
}

.tooltip .tooltiptext_l::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #262626;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #262626;
  opacity: 0.85;
  color: #f2f2f2;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: -1px;
  left: 105%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #262626 transparent transparent;
}
.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptext_l {
  visibility: visible;
}

.ticket_link_nietmogelijk { display: block; text-decoration: none; color: #fc0000; background-color: white; border: 1px solid #fc0000; padding: 4px; margin-bottom: 3px; font-size: 1.2em;}
.ticket_link_mogelijk { display: block; text-decoration: none; color: black; background-color: white; border: 1px solid grey; padding: 4px; margin-bottom: 3px; font-size: 1.2em;}