/*

---- 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
{
  top:  0px;
  left:  0px;
  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;
  right 		: 15px;
  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;
  aspect-ratio: 300 / 200;
  width: 100%;
  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
{
	position		: relative;
	cursor			: pointer;
	padding-top		: 15px;
	padding-bottom	: 15px;
	height			: 80px;
	margin-right 	: 5px;
}

.haadlines a
{
  font-weight: bold;
}

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

.titelline
{
	position		: absolute;
	margin-left	: 115px;
	top			: 15px;
	left			: 0px;
	width		: auto;
}

.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: 620px;
}

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

.logo_desk
{
	width			: 220px;
	padding-right	: 40px;
	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, .login_mob
{
	position: absolute;
	top: 10px;
	right: 10px;
}

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


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

.login_desk, .login_mob
{
	left: 10px;
}

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

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

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

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

H2
{
	font-size		: 20px;
}

H3
{
	font-size		: 16px;
}

H4
{
	font-size		: 16px;
}

.gradient-boks
{
	height			: auto;
	width			: auto;

	margin-bottom	: 20px;

	padding			: 1px 1px 1px 1px;

	line-height 		: 20px;
	border-radius	: 6px;

	background-image	: linear-gradient(#0061ad, #2193d5);
}

.gradient-boks h1, .gradient-boks a
{
	color: #ffffff;
}

.stip
{
	height: 10px;
  	width: 10px;
  	background-color: #000000;
  	border-radius: 50%;
  	display: inline-block;
}

.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		: 89.5px;
	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		: 89.5px;
	padding 		: 4px 0px 4px 10px;
	font-weight 	: bold;
	cursor		: pointer;
}

.nst_lezen_item
{
	width		: 207.8px;
}

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

.haadtitel
{
	margin-top		: 	30px;
	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;
}

.premiumbalk
{
	width			: 30px;
	margin-left		: 5px;
	border-radius	: 6px;
	background		: #0077be;
	color			: white;
	padding			: 4px;
}

.premium
{
	-webkit-mask-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
}

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



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


.sharing__button {
    text-decoration: none;
    color: #fff;
    border-color: #02405a;
    background-color: #0486be;
    -webkit-transition: .2s ease-out background-color;
    transition: .2s ease-out background-color;
    display: block;
    position: relative;
    width: 48px;
    height: 35px;
    padding-right: 2px;
    padding-left: 2px;
    font-family: Arial, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    line-height:37px;
    -webkit-transition: .2s ease-out background-color;
    transition:.2s ease-out background-color
}

.sharing__button:hover {
    background-color:green
}

.sharing__button--facebook {
    background-color: #3b5998;
}

.sharing__button--twitter {
    background-color: #00aced;
}

.sharing__button--whats-app {
    background-color: #2daf18;
}

.sharing__button--comments
{
    background-color: #0a61ae;
    width: 100%;
    text-align:center;
}

.sharing__button--whats-app .sharing__icon {
    position:relative
}

span.reacties
{
	position: absolute;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background: url(https://media.waldnet.nl/images/ongepast.png) 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%;
	height:  	: auto;
}

.artbalk
{
	padding-top		: 20px;
	padding-bottom	: 20px;
}


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

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

.tech
{
	background-color	: #570fbf;
	border			: 1px solid #570fbf;
}

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

  border-radius:6px;
  box-sizing: border-box;
  transition: all 0.2s;
}






.button:hover
{
  color: var(--kleur-tkstfot);
  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: 6px;
    border: 1px solid #ccc;
	font-size: 18px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.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
{
  display			: block;
  word-wrap			: normal;
  border-radius		: 10px;
  line-height		: 18px;
  background-color	: var(--kleur-reaksjes);
  padding			: 10px;
  padding-bottom: 	: 30px;
  margin-right		: 10px; 
  word-break		: break-word;
}

.reaksjeflak_input
{
  border-radius		: 10px;
  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;
}

.break
{
  word-break: break-all;
}



.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);
	}

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

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

	.artikel p, .artikel a, .artikel ul, .artikel li, .artikel td
	{
		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		: 80px;
	}

	.sharing__text
	{
		padding-top: 2px;
	}

	.subnav
	{
 	   font-size: 12px;
	}

    .sharing__list-item--facebook, .sharing__list-item--twitter, .sharing__list-item--whats-app, .sharing__list-item--mail-a-friend
	{	
		width:30px;
		padding-right: 25px;
		padding-bottom: 2px;
    }

	.sharing__list-item--comments
	{	
		width: 110px;
		padding-right: 5px;
		padding-bottom: 2px;
    }
}

@media (min-width: 370px)
{
	.banner
	{
		text-align: center;
		padding-top: 20px;
		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: 600px)
{
    .sharing__list-item--facebook, .sharing__list-item--twitter, .sharing__list-item--whats-app, .sharing__list-item--mail-a-friend
	{	
		width: 45px;
		padding-right: 10px;
		padding-bottom: 5px;
    }

    .sharing__list-item--whats-app
	{
        display:none;
    }

	.sharing__list-item--comments
	{	
		width: 200px;
		padding-right: 5px;
		padding-bottom: 2px;
    }
}

@media (min-width: 975px)
{
	.logo_desk, .sykje_desk, .login_desk, .kolom_rjochts, .not_desk, .menulinks, .menurechts
	{
		display: inline-block;
	}

	.footerad
	{
		display: block;
	}

	.logo_mob, .nav_mob, .waar_mob, .sykje_mob, .not_mob, .login_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		: 125px;
	}

	.sharing__text
	{
		padding-top: 5px;
	}

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

.waarblok
{
	padding	: 0px;
}

.waarblok_item
{
	font-size: 22px;
	float: left;
	width: 180px;
	height: 68px;
	cursor: pointer;
	border : 1px solid var(--kleur-menu);
	border-radius: 6px;
	margin-bottom: 0px;
}

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

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

#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)
	}
}