/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   ALGEMEEN
========================================================================== */

body{
	min-width: 300px;
	 font-family: "Barlow", serif;
   		font-weight: 400;
  	font-style: normal;
	background: #FFF;
	color: #222;
	font-size: 17px;
	
}

p, li{
	
	color: #222;
	font-size: 1em;
}

@media screen and (max-width: 467px) {
	p, li{
	color: #333;
	
	font-size: 0.95em;
}
}


p a{
	text-decoration: underline;
	
	color: #000;
}

li a{
	text-decoration: underline;
	font-weight: bold;
	color: #000;
}

strong{
	font-weight: bold;
	font-weight: 700;
}

.container{
	display: block;
	width: 1050px;
	margin: 0 auto;
	padding: 20px 0px;
	overflow: hidden;
}



@media screen and (max-width: 1069px) {
.container{
	width: 750px;
}	
}

@media screen and (max-width: 767px) {
.container{
	width: 462px;
}	
}

@media screen and (max-width: 479px) {
.container{
	width: 90%;
	min-width: 280px;
}	
}

.containerheader{
	padding: 5px;
}


h1, h2, h3, h4{
font-family: "PT Sans Narrow", serif;
  font-weight: 700;
  font-style: normal;
padding: 0;
margin: 0 0 15px 0;
color: #111;	
}

h1{
font-size: 1.65em;
line-height: 1em;

}

h1.sitetitel{
	padding: 0 0 0 15px;
	border-left: solid 4px #fa7103;
}


h2{
font-size: 1.45em;
line-height: 1em;

}


h3{
font-size: 1.45em;
font-weight: 400;	
line-height: 0.9em;
}

h4{
font-size: 1.30em;
font-weight: 400;
line-height: 0.85em;

}

h4.trefwoorden{
	padding: 8px 0 0 15px;
	margin-top: 5px;
	display: block;
	overflow: hidden;
	border-left: solid 4px #fa7103;
}










.inschrijfveld
{display: block;
margin: 0 auto;
	width: 100%;
}






/* ==========================================================================
   STEUN
   ========================================================================== */


.steun{
	display: block;
	width: 75%;
	border: solid #666 1px;
	height: auto;
	margin: 0 auto;
	margin-bottom: 3px;
}

/* ==========================================================================
   MIDDEN
   ========================================================================== */

.midden{
	font-size: 1.05em;
	color: #111;
}



/* ==========================================================================
   LIVE
   ========================================================================== */
.linkblok{
	display: block;
	overflow: hidden;
}


.linkknop{
	display: block;
	float: inherit;
	padding: 3px 3px 3px 15px;
	margin: 0;
	margin-bottom: 3px;
	border-left: solid 10px #fa7103;
}

@media screen and (max-width: 767px) {
.linkknop{
	padding: 8px 3px 8px 10px;
	border-left: solid 8px #fa7103;
}	
}


.linkknop p{
	font-family: "PT Sans Narrow", serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
	color: #FFF;
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

.soort2, .soort4{
background-color: #222;
	
}

p.knopleesmeerlive{
	padding: 1px 7px 3px 7px;
	border-radius: 3px;
	font-size: 0.85em;
	float: right;
	color: #FFF;
	display: inline-block;
	text-align: center;
	background-color: #fa7103;
}

.soort3{
background-color: #444;
	
}

.soortliveupdates
{
	background-color: #fa7103;
	border-left: solid 10px #000;
}





.fotonieuwsberichtlive{
	width: 90%;
	display: block;
	margin: 0 auto;
	margin-bottom: 5px;
}

.fbrechtslive{
	display: block;
	overflow: hidden;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

header{
	background-color: #222;
	display: block;
	overflow: hidden;
	padding: 0;
	font-size: 1.05em;
	z-index: 10;
}



.logoheader{
	display: inline;
	float: left;
	height: 90px;
	margin: 0;
	overflow: hidden;
}

.titel{
	padding: 0 12px;
}

.titelp{
	padding: 3px 0;
	margin: 0;
	text-align: right;
}

nav{
	color: #DDD;
	overflow: hidden;
	font-family: "PT Sans Narrow", serif;
  font-weight: 400;
  font-style: normal;

}

nav ul{
	display: inline;
	float: right;
	margin: 5px 0 0 0;
}

nav li{
	display: inline-block;
	padding: 2px 2px 5px 2px;
	margin: 0 7px;
	border-bottom: solid #AAA 1px;
	font-size: 0.9;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
	color: #EEE;
}

nav li:last-child{
	margin: 0 0 0 7px;
	
}

nav li:hover{
	border-bottom: solid #fa7103 1px;color: #FFF;
	transition: 0.2s;
}

nav li a{
	text-decoration: none;
	color: #EEE;
	font-style: normal;
}

nav li span:hover{
	text-decoration: none;
	color: #EEE;
	cursor: context-menu;
	transition: 0.2s;
}



.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
font-family: "PT Sans Narrow", serif;
  font-weight: 400;	
  background-color: #111;
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 60px;
  font-size: 1em;
  font-style: normal;
  text-transform: uppercase;	
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  color: #DDD;
  display: block;
  transition: 0.2s;
}

.sidenav a:hover {
  color: #fa7103;
	transition: 0.2s;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}



.klein{
	display: none;
}

@media screen and (max-width: 767px) {
.klein{
	display: inherit;
}
.groot{
		display: none;
	}	
.titel{
		display: none;
	}
header{
	right: 0;
	top: 0;	
	position: fixed;
		width: 100%;
	}
	
.logoheader{
		height: 60px;
}
nav ul{
	margin: 0;
}
.midden{
	padding-top: 105px;
}
nav{
	color: #FFF;
	}
}









.Frameresults{
	width: 100%;
	height: calc(100vh - 250px);
}

.marquee {
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 52px;
  background: #FFF;	
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.marquee__slider {
  display: flex;
  flex-direction: row;
  object-fit: cover;
  padding: 0px;
  animation: marquee linear 20s infinite;
}

.marquee__slider img{
	height: 52px;
	margin-right: 5px;
}

.marquee:hover .marquee__slider {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}


.paddingtopresults
{
	padding-top: 75px;
}

.logoresults
{
	height: 45px;
}


.overzicht
{
	background-color: orangered;
	padding: 6px 9px;
	float: right;
	margin-top: 4px;
	color: white;
}

/* ==========================================================================
   VIDEO
   ========================================================================== */



.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	margin: 5px 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/* ==========================================================================
   RECHTS
   ========================================================================== */

.rechts{
	display: inline-block;
	width: 236px;
	min-height: 100px;
	padding: 0;
	margin: 0;
	float: right;
	overflow: hidden;
}




@media screen and (max-width: 1069px){
.rechts{
	width: 200px;
	}
}

@media screen and (max-width: 767px){
.rechts{
	display: none;
	}
}



/* ==========================================================================
   LINKS
   ========================================================================== */

.links{
  	float: left;
	display: inline-block;
 	width: 800px;
 	overflow: hidden;
 	padding-bottom: 5px;
}

@media screen and (max-width: 1069px){
.links{
	width: 535px;
	}
}

@media screen and (max-width: 767px){
.links{
	display: block;
	width: 462px;
	}
}

@media screen and (max-width: 479px){
.links{
	width: 100%;
	}
}










.homeeenblok {
  width: 800px;
  height: 300px;
}



/* Bottom right text */
.text-blok {
  margin-top: -300px;
  background: rgba(0, 0, 0, 0.25);
  color: white;
  padding: 10px;
  width: 780px;
  height: 280px;
}

.text-blok p{
	color: #FFF;
	font-size: 1.25em;
	padding: 0;
	margin-bottom: 5px;
}

.text-blok p.datumhome{
	font-size: 0.5em;
}

.text-blok p.inhoudhome{
	font-size: 0.75em;
}


.homeeenfoto
{
	width: 100%;
	height: 300px;
	display: block;
	object-fit: cover;
}






/* ==========================================================================
   NIEUWSDETAIL
   ========================================================================== */


.fotonieuwsbericht{
	width: 100%;
	display: block;
	margin: 0 auto;
	margin-bottom: 5px;
}


.fbgroot{
	display: block;
	margin-bottom: 10px;
	z-index: -10;
}

/* ==========================================================================
   ADVERTENTIES
   ========================================================================== */

.topbanner{
	display: block;
	margin: 0 auto;
	margin-bottom: 15px;
	width: 90%;
}

.advertentiekader{
	display: none;
}




.advertentieintext{
	width: calc(50% - 36px);
	display: inline;
	float: left;
	margin: 8px 18px;
	overflow: hidden;
}

@media screen and (max-width: 650px){
.advertentieintext{
	width: calc(50% - 16px);
	margin: 5px 8px;
}
}


.advertentieintextlive{
	width: calc(33% - 6px);
	display: inline;
	float: left;
	margin: 2px 2px;
	overflow: hidden;
}




.advertentieintextklein{
	width: 33%;
	display: inline;
	float: left;
	margin: 8px 0;
	overflow: hidden;
}

.advertentieintextklein img{
	display: block;
	width: 95%;
	margin: 0 auto;
	border: none;
}




.advertentieintext img{
	display: block;
	width: 100%;
	border: none;
}

.advertentieintextlive img{
	display: block;
	width: 100%;
	border: none;
}

@media screen and (max-width: 767px){
.advertentiekader{
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 0;
}
}


.advertentierechts
{
	display: block;
	overflow: hidden;
	margin: 6px 0;
}

.advertentierechts img
{
	display: block;
	overflow: hidden;
	width: 100%;
	border: none;
}

.advertentie336{
	display: block;
	overflow: hidden;
	margin: 6px 0;
}

@media screen and (max-width: 850px){
.advertentie336{
	display: none;
}
}


.minderdan{
	display: none;
	margin: 0 auto;
	margin-bottom: 10px;
	margin-top: 10px;
}

.meerdan{
	display: block;
	margin: 0 auto;
	margin-bottom: 10px;
	margin-top: 10px;
	height: 60px;
	width: 468px;
}


@media only screen and (max-width: 470px) {
	.minderdan
	{
		display: block;
	}
	.meerdan
	{
		display: none;
	}
}


/* ==========================================================================
   FOTO
   ========================================================================== */

.fotoalg{
	width: calc(33% - 6px);
	display: inline;
	float: left;
	height: 175px;
	margin: 3px;
	background-position: bottom center;
	background-size: cover;
}

@media screen and (max-width: 980px){
.fotoalg{
	height: 150px;
}
}
@media screen and (max-width: 775px){
.fotoalg{
	height: 135px;
}
	}
@media screen and (max-width: 600px){
.fotoalg{
	width: calc(50% - 6px);
	height: 150px;
}	
	}

@media screen and (max-width: 450px){
.fotoalg{
	width: calc(50% - 6px);
	height: 120px;
}	
	}



/* ==========================================================================
   NIEUWSOVERZICHT
   ========================================================================== */

.listitem{
	display: block;
	background-color: #EEE;
	margin: 3px 0;
	overflow: hidden;
}

.listitemfoto{
	display: inline-block;
	width: 200px;
	height: 150px;
	float: left;
	background-position: center;
	background-size: cover;
}

.listitemtext{
	display: inline-block;
	width: calc(100% - 240px);
	width: -moz-calc(100% - 240px);
	min-height: 130px;
	float: right;
	vertical-align:center;
	padding: 10px;
}


p.datum{
	border-left: #fa7103 solid 4px;
	padding: 0 0 0 15px;
	margin: 5px 0;
	color: #333;
	font-size: 0.75em;
}

p.knopleesmeer{
	padding: 1px 7px 3px 7px;
	border-radius: 3px;
	font-size: 0.5em;
	float: left;
	color: #FFF;
	display: block;
	width: 50px;
	text-align: center;
	background-color: #fa7103;
}

a .listitemtext p.nieuwsoverzicht{
	text-decoration: none;
	color: #222;
}

h2.nieuwsoverzicht{
	font-size: 1.12em;
	font-weight: 600;
	color: #111;
	margin: 0 0 3px;
}

@media screen and (max-width: 479px) {
h2.nieuwsoverzicht{
	font-size: 1.07em;
	font-weight: 400;
	color: #000;
	letter-spacing: inherit;
	margin: 0 0 3px;
}
}


p.nieuwsoverzicht{
	font-size: 0.85em;
	margin: 2px 0;
}

a .listitem{
	text-decoration: none;
	color: #222;
}




@media screen and (max-width: 1069px) {
.listitemfoto{
	height: 175px;
	width: 150px;
}
.listitemtext{
	width: calc(100% - 190px);
	width: -moz-calc(100% - 190px);
	}
	
}

@media screen and (max-width: 764px) {
.listitemfoto{
	height: 215px;
}
}

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

.listitemfoto{
	width: 85px;
	height: 150px;
}

.listitemtext{
	width: calc(100% - 115px);
	min-height: 110px;
}

p.nieuwsoverzicht{
	display: none;
}
	
	
}



.listitemlive{
	display: block;
	background-color: #EEE;
	margin: 3px 0;
	overflow: hidden;
}

.listitemfotolive{
	display: inline-block;
	width: 125px;
	height: 175px;
	float: left;
	background-position: center;
	background-size: cover;
}

.listitemtextlive{
	display: inline-block;
	width: calc(100% - 170px);
	width: -moz-calc(100% - 170px);
	min-height: 80px;
	float: right;
	vertical-align:center;
	padding: 10px;
}








.liveteaser{
	background-color: #fa7103;
	color: #FFF;
	display: block;
	padding: 3px 10px;
	overflow: hidden;
	margin-bottom: 2px;
}

.liveteaser h2{
	color: #FFF;
	text-align: center;
	padding: 2px 10px 4px 10px;
	margin: 0;
	text-decoration: none;
	font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;	
}

.liveteasera {
	text-decoration: none;
}

.liveteaserimg{
	overflow: hidden;
	width: 24%;
	margin: 0.5%;
	height: 150px;
	display: inline-block;
	float: left;
	background-position: center;
	background-size: cover;
}

@media screen and (max-width: 600px){
.liveteaserimg{
	width: 32%;
}
	.liveteaserimg:last-child{ 
	display: none;
}	
}


/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}