/*

---- Hallo allemaal,
---- wat fijn dat je er bent
---- Ben je voor het eerst hier,
---- of ben je al bekend?

*/

:root
{
    --kleur-item		: #e9f0fa;
    --kleur-menu		: #0061B0;
    --kleur-back		: #e7f4fc;
    --kleur-back-art	: #ffffff;
	--kleur-tekst	: #000000;
	--kleur-titel	: #0061B0;
	--kleur-hover	: #2bacf9;
	--kleur-tkstfot	: #ffffff;
	--kleur-pompebled: #dc231f;
	 --kleur-reaksjes: #e9eaed;
    --kleur-back-op	: rgba(21, 32, 43, 1);
 }


@media (prefers-color-scheme: dark)
{
	:root
	{
   	 --kleur-item	: #1e2e3a;
   	 --kleur-menu	: #0061B0;
   	 --kleur-back	: #131415;
   	 --kleur-back-art: #1a1d1e;
   	 --kleur-tekst	: #ffffff;
	 --kleur-titel	: #ffffff;
 	 --kleur-hover	: #2bacf9;
	 --kleur-tkstfot	: #ffffff;
	 --kleur-pompebled: #dc231f;
	 --kleur-reaksjes: #202e39;
     --kleur-back-op	: rgba(21, 32, 43, 1);

 	}

	.artikel a
	{
	  font-weight	: bold;
	  text-decoration: underline;
	  color 			: var(--kleur-titel);
	}
}

body
{
  background-color: var(--kleur-back);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.top-container
{
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header
{
  display: flex;
  justify-content:center;
  margin: auto;
  padding-bottom: 10px;
  height: 60px;
  background-color: var(--kleur-back-art);
  border-bottom: 4px solid var(--back-item);
  z-index:2;
}

.header a
{
  line-height: 30px;
  font-size: 20px;
  text-decoration: none;
  color: #ffffff;
  opacity:1;
  transition: 200ms;
}

a
{
  font-size 	: 16px;
  color		: var(--kleur-titel);
  text-decoration: none;
}

a:hover
{
  color: var(--kleur-hover);
  transition: 0.5s;
}

.nav_mob
{
	position: absolute;
	top: 10px;
	left: 10px;
}

nav ul
{
  padding: 0;
  list-style-type: none;
  font-size: 16px;
}

nav
{
  background-color: var(--kleur-menu);
  height: 40px;
  width: 40px;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 9px;
  padding-left: 5px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 30px;
  height: 4px;
  margin-bottom: 4px;
  position: relative;
  background: #ffffff;
  border-radius: 0px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(0px, -1px);
  background: #ffffff;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(1px, 1px);
}

#menu
{
  position: absolute;
  width: 200px;
  height: 500px;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px 25px 50px 50px;
  padding-top: 38px;
  background-color: var(--kleur-menu);
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 5px;
  transition-delay: 2s;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.container
{
  width: 100%;
  color: var(--kleur-tekst);
}

.kolom_haad
{
	background-color: var(--kleur-back-art);
	padding-top: 0px;
	padding-left	: 10px;
	padding-bottom: 30px;
}

.hoofdnieuws
{
  cursor		: pointer;
  margin-bottom	: 15px;
  width			: 100%;
  position		: relative;
}

.postitel
{
  position		: absolute;
  bottom			: 20px;
  left			: 20px;
  color			: white;
}

.postitel a
{
	color		: white;
}


.hoofdtitel
{
  color			: white;
  font-size		: 28px;
  font-weight	: bold;
  padding-right	: 10px;

  text-shadow	: 1px 1px 3px black;
}


#headimage, #headimagebusiness {
  position: relative;
  width: 100%;
  height: 300px;
  background-position: center;
  background-size: cover;
  display: flex;
}

#headimage::before, #headimagebusiness::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
}

.haadlines
{
	cursor			: pointer;
	padding-top		: 15px;
	padding-bottom	: 15px;
	height			: 80px;
}

.haadlines a
{
  font-weight: bold;
}

.haadlines img
{
	border-radius: 10%;
	border: 0px;
	margin-right: 10px;
	max-width:100px;
}

.sticky
{
  margin		: auto;
  height		: 60px;
  position	: fixed;
  top		: 0px;
  width		: 100%;
  border-bottom: 4px solid var(--back-item);
}

.sticky + .content
{
  position: relative;
  padding-top: 70px;
  color: var(--kleur-tekst);
}

.menulinks, .menurechts
{
	position: absolute;
	top: 25px;
	width: 320px;
}

.menulinks a, .menurechts a
{
	font-size: 22px;
	color: var(--kleur-titel);
	font-weight: bold;
}

.menulinks a:hover, .menurechts a:hover
{
	color: var(--kleur-hover);
}

.menulinks
{
	left: 70px;
}

.menurechts
{
	left: 660px;
}

.logo_mob
{
	width			: 160px;
	padding-right	: 30px;
	padding-top		: 7px;
}

.waar_mob
{
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	position: absolute;
	top: 10px;
	right: 50px;
	background-color: var(--kleur-item);
	height: 40px;
	width: 60px;
}

.sykje_mob, .not_mob, .not_desk, .sykje_desk, .login_desk
{
	position: absolute;
	top: 10px;
	right: 10px;
}

.sykje_mob, .not_mob
{
	height: 40px;
	width: 40px;
}


.sykje_mob
{
	margin: auto;
	text-align: center;
}

.login_desk
{
	position: absolute;
	top: 10px;
	left: 10px;
}

.sykje_desk, .login_desk, .not_desk
{
	display		: block;
	padding		: 6px;
 	width		: 28px;
	height		: 28px;
}

.sykje_mob, .sykje_desk, .login_desk
{
	background-color: var(--kleur-menu);
}

H1, H2, H3
{
	padding-right	: 16px;
	padding-bottom	: 10px;
	font-weight		: bold;
	color			: var(--kleur-titel);
}

H1
{
	padding-top		: 10px;
	font-size		: 28px;
	line-height 		: 30px;
}

H2
{
	font-size		: 20px;
}

H3
{
	font-size		: 14px;
}

H4
{
	font-size		: 14px;
}

.mst_lezen, .nst_lezen
{
	border-left	: 1px solid var(--kleur-menu);
	border-top	: 1px solid var(--kleur-menu);
	border-right	: 1px solid var(--kleur-menu);
	float		: left;
	width		: 123.3px;
	padding 		: 4px 0px 4px 10px;
	font-weight 	: bold;
	cursor		: pointer;
}

.nst_lezen
{
	width		: 170px;
}

.mst_lezen_item, .nst_lezen_item
{
	border-bottom: 1px solid var(--kleur-menu);
	float		: left;
	width		: 123.3px;
	padding 		: 4px 0px 4px 10px;
	font-weight 	: bold;
	cursor		: pointer;
}

.nst_lezen_item
{
	width		: 210px;
}

.meastelezen, .fiifjier, .tsjienjier, .fiiftjenjier, .nijsteitems
{
	LINE-HEIGHT		: 20px;
}

.haadtitel
{
	margin-top		: 	20px;
	padding-top		: 	10px;
	padding			:	5px 0px 4px 10px;
	background-color	:	var(--kleur-menu);
	color			: 	#ffffff;
	font-weight		:	bold;
	font-size		: 	18px;
	border			:	1px solid var(--kleur-menu);
}

.haadtitel a
{
	color			:	white;
	font-weight		:	bold;
	font-size		:	18px;
}

.blok
{
	padding		:	5px 5px 5px 10px;
	border		:	1px solid #0061B0;
}

.ynhald
{
	padding-top		: 5px;
	line-height		: 20px;
	padding			: 10px 0px 0px 0px;
}

span.reacties
{
	position: absolute;
	cursor: pointer;
	width: 15px;
	height: 15px;
	background: url(https://media.waldnet.nl/images/ongepast.gif) no-repeat;
}

.subnav
{
    display: block;
	font-weight: bold;
    padding: .2em 0;
    font-size: 16px;
    color:#666
}

img.nijsfoto
{
	border		: 0px;
	width		: 100%;
	max-width	: 100%;
}

.item_weer
{
	background-color	: var(--kleur-item);
	cursor			: pointer;
	padding			: 12px;	
	padding-bottom	: 5px;
	margin-bottom	: 20px;
	overflow			: auto;
}


.saken
{
	background-color	: #e1332c;
	border			: 1px solid #e1332c;
}

.sport
{
	background-color	: green;
	border			: 1px solid green;
}

.wurk
{
	background-color	: #df137a;
	border			: 1px solid #df137a;
}


.sharing__text
{
	color: #fff;
	display: inline-block;
	overflow:hidden
}

.icons
{
	color: #fff;
    fill:#fff;
    margin-top:6px;
    margin-left:11px;
	float: left;
    vertical-align:top;
    max-width:100%;
}

.sharing
{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size:16px
}

.sharing:before, .sharing:after {
    display: table;
    content: ' '
}

.sharing:after {
    clear:both
}

.article__component
{
    width: 100%;
    clear:both;
    padding-right: 0px;
    padding-left: 0px;
    position:relative;
}

.sharing__icon
{
    display: inline-block;
    position: absolute;
    width: 100%;
    text-align: center;
    overflow:hidden
}

.sharing__list-item
{
    position: relative;
    float: left;
}




.button
{
  margin-top: 0px; 
  background-color: var(--kleur-menu);
  border: none;
  color: var(--kleur-tkstfot);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
	cursor: pointer;

 border-radius:0.12em;
 box-sizing: border-box;
 transition: all 0.2s;
}


input.button[type="submit"]:hover
{
  background-color: var(--kleur-hover);
  transition: 0.5s;
}

li.button
{
	position: relative;
	left: 70px;
}

li.button:hover
{
  background-color: var(--kleur-hover);
  transition: 0.5s;
}

li.button a
{
	color: white;
}

.input-grut
{
  	border-radius: 3px;
    border: 1px solid #ccc;
	font-size: 16px;
	padding-left: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.select-style
{
	margin-top: 20px;
    padding: 6px;
    border: 1px solid #ccc;
    width: 95%;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    background: #fff;
    position: relative;
}

.select-style:after
{
    top: 50%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 5px;
    margin-top: -2px;
    z-index: 100;
}

.select-style select
{
	font-size: 16px;
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus
{
    outline: none;
}

.reaksjeflak
{
  border-radius		: 20px;
  padding-top		: 5px;
  LINE-HEIGHT		: 18px;
  background-color	: var(--kleur-reaksjes);
  padding			: 10px; 
}

.reaksjeflak p, .reaksjeflak a
{
	LINE-HEIGHT		: 18px;
}

.reaksjeflak_input
{
  border-radius		: 20px;
  border				: 0px;

  color				: var(--kleur-tekst);
  LINE-HEIGHT		: 18px;
  background-color	: var(--kleur-reaksjes);
  font-size			: 16px;
  padding-left		: 10px;
  padding-top		: 12px;
  padding-bottom		: 12px;
}


.site-footer ul, .social-list
{
    margin-bottom	: 0;
    margin-left		: 0;
    padding-left		: 0;
    list-style		: none
}

.site-footer
{
	clear: both;
    background: var(--kleur-menu);
    padding: 30px 24px
}

.site-footer a, .site-footer__text p
{
    color			: var(--kleur-tkstfot);
	line-height		: 34px;
}

.site-footer a:hover
{
  color: var(--kleur-hover);
  transition: 0.5s;
}

.site-footer__text a
{
    text-decoration:underline
}

.site-footer__text p
{
	padding-right	: 30px;
}

.site-footer__socials
{
    margin:1.875rem 0
}

.fab
{
    display: inline-block;
}

.fabicons
{
	fill: #fff;
	margin-top: 12px;
	margin-right: 2px;
}

.social-list
{
    display: flex;
    justify-content:center
}

.social-list li
{
    margin:0.625rem
}

.social-list li a
{
    display: block;
    height: 50px;
    width: 50px;
    color: var(--kleur-tkstfot);
    background: var(--kleur-pompebled);
    line-height: 2.9375rem;
    text-align: center;
    border-radius: 50%;
    position: relative;
}

.social-list li a i
{
    position: absolute;
    top: 51%;
    left: 50%;
}

.site-footer__columns
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 81.25rem;
    margin:0 auto
}

.site-footer__column
{
    flex-grow: 1;
    width: 100%;
    margin-bottom:1.25rem
}

.site-footer__copyright
{
	color: var(--kleur-tkstfot);
    text-align:center;
}

@media (min-width: 10px)
{
	.content
	{
		margin			: auto;
		width			: 100%;
		background-color	: var(--kleur-back-art);
	}

	.waar_mob, .sykje_desk, .login_desk, .kolom_rjochts, .not_desk, .sjowreaksjes, .menulinks, .menurechts
	{
		display : none;
	}

	.waar_mob a
	{
		color: var(--kleur-tekst);
		font-size: 16px;
	}

	.artikel p, .artikel a, .artikel ul, .artikel li
	{
		font-size		: 18px;
		LINE-HEIGHT		: 30px;
	}

	.artikel p, .artikel ul, .artikel li
	{
		margin-right		: 5px;
	}

	.artikel h2
	{
	  padding-top: 20px;
	  padding-bottom: 0px;
	}

	img.nijsfotokes
	{
		padding-right: 5px;
		border		: 1px;
		width		: 100px;
	}

	.sharing__text
	{
		padding-top: 2px;
	}

	.subnav
	{
 	   font-size: 12px;
	}
}

@media (min-width: 370px)
{
	.topbanner
	{
		height: 200px;
		padding-bottom: 20px;
	}

	.waar_mob
	{
		display : block;
	}

	.subnav
	{
 	   font-size: 12px;
	}

	.notification
	{
	  text-decoration: none;
	  width: 30px;
	  margin-top: 5px;
	  margin-left: 5px;
	  padding-top: 0px;
	  padding-bottom: 0px;

	  position: relative;
	  display: inline-block;
	  border-radius: 0px;
	}

	.notification .badge
	{
	  position: absolute;
	  bottom: -10px;
	  right: -15px;
	  padding: 0px 9px;
	  border-radius: 50%;
	  background: var(--kleur-pompebled);
	  color: white;
	}

	.sjowreaksjes
	{
	  display: inline-block;
	}

	.sjowreaksjes a
	{
	  font-weight: normal;
	  font-size: 16px;
	}
}

@media (min-width: 825px)
{
	.topbanner
	{
		height: 350px;
		padding-bottom: 0px;
	}

	.sykje_desk, .login_desk, .kolom_rjochts, .not_desk, .menulinks, .menurechts
	{
		display: inline-block;
	}
	.nav_mob, .waar_mob, .sykje_mob, .not_mob
	{
		display : none;
	}

	.logo_mob
	{
		width: 220px;
	}

	.header
	{
		max-width: 1000px;
		margin: auto;
		position	: relative;
	}

	.sticky
	{
left: 50%;
    transform: translate(-50%, 0);
  margin		: auto;
  height		: 60px;
  position	: fixed;
  top		: 0px;
  max-width		: 1000px;
  border-bottom: 4px solid var(--kleur-item);
	}

	.kolom_haad_cntr
	{
	    background-color: var(--kleur-back-art);
		float: left;
		width: 570px;
		padding-bottom: 70px;
	}

	H1
	{
		padding-left		: 0px;
	}

	.artikel
	{
		max-width: 570px;
		margin: auto;
	}

	img.nijsfotokes
	{
		border		: 1px;
		width		: 150px;
	}

	.sharing__text
	{
		padding-top: 5px;
	}

	.content
	{
		display: flex;
		background-color: var(--kleur-back-art);
		margin: auto;
		max-width: 1000px;
	}

.waarblok
{
	padding	: 0px;
	height	: 70px;
}

.waarblok_item
{
	float: left;
	width: 180px;
	height: 68px;
	cursor: pointer;
	border : 1px solid var(--kleur-menu);
}

.waarblok_item:hover
{
    background-color: var(--kleur-item);
    border: solid 1px #000000;
    text-decoration: none;
}

.kolom_rjochts
{
	float: right;
	padding-top: 30px;
	width : 402px;
}

#headimage, #headimagebusiness
{
  height: 350px;
}
	.haadlines a
	{
		font-size: 18px;
	}

	.sjowreaksjes a
	{
	  font-weight: normal;
	  font-size: 16px;
	}

	.artikel p, .artikel a, .artikel ul, .artikel li
	{
		font-size		: 18px;
		LINE-HEIGHT		: 26px;
	}
	.align
	{
		align			: center;
	}

	.notification
	{
	  background-color: var(--kleur-menu);
	  text-decoration: none;
	  width: 40px;
	  margin: 0px;
	  padding: 0px;

	  position: relative;
	  display: inline-block;
	  top: -6px;
	  left: -6px;
	}

	.notification .badge
	{
	  position: absolute;
	  bottom: -10px;
	  right: -10px;
	  padding: -2px 0px;
	  border-radius: 50%;
	  background: red;
	  color: white;
	}

	.site-footer a, .site-footer__text p
	{
   	 font-size	: 18px;
	}

	.social-list li a:focus, .social-list li a:hover
	{
            background: var(--kleur-hover);
	}

    .site-footer__columns
	{
        flex-direction:row
    }
    .site-footer__column, .site-footer__column--larger
	{
        width:calc(50% - 1.25rem)
    }
}

@media print, screen and (min-width: 64em)
{
	.site-footer__column
	{
	  width:calc(20% - 1.25rem)
	}

	.site-footer__column--larger
	{
	  width:calc(40% - 1.25rem)
	}
}



.cookie-notification {
    bottom: 1rem;
    color: #fff;
    display: none;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 9;
	display: block;
}

.cookie-notification .cookie-notification--bar {
    background-color: rgba(0, 0, 0, .7);
    border-radius: 3px;
    display: inline-block;
    line-height: 1.5rem;
    padding: 1rem 2rem
}

.cookie-notification .cookie-notification--link, .cookie-notification .cookie-notification--close {
    color: #ffffff
}

.cookie-notification .cookie-notification--close {
    display: inline-block;
    margin-left: .9rem
}

.cookie-notification .cookie-notification--close-icon {
    margin-left: .6rem
}