*
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	background-color: #FAFAFA;
}

:root{
	--mainDark: #246174;
	--mainLight: #B7D2DA;
	--gray:  #383838;
}

.headerWrapMobile
{
	display: none;
}

.modal
{
	display: none;
}

.hamburgerMenu{
	display: none;
}

.headerWrap{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 260px;

	padding-left: 100px;

	background-image: url('./../img/dinkel.svg');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: cover;
}

.headerLogo
{
	position: relative;
	display: flex;
	margin-left: 100px;
}

.headerMenus
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-left: 3rem;
}

.headerMenus h2
{
	margin-top: .5rem;
	margin-bottom: .5rem;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--mainDark);
}

.headerMenus a
{
	position: relative;
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	font-size: 1rem;

	color: var(--gray);
	text-decoration: none;
}

.headerMenus a::before
{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 0;
	height: 3px;

	background-color: var(--mainLight);
	transition: .2s;
}

.headerMenus a:hover::before
{
	left: 5%;
	width: 90%;
	transition: 0.4s;
}

.headerMenuTopBtns
{
	position: relative;
	display: flex;
	gap: 3rem;
}

.headerMenuTop
{
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 1.5rem;
}

.headerMenuBottom
{
	margin-bottom: 1.5rem;
}

.menu-active::after
{
	content: '';
	position: absolute;
	left: 5%;
	width: 90%;
	bottom: -8px;
	height: 3px;

	background-color: var(--mainLight);
}


/* POST ITS */

.postitWrap
{
	position: relative;
	display: flex;

	padding-left: 8%;
	padding-right: 8%;
}

.postit
{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem 1rem;
	padding-right: 1.5rem;
	background: #FEF5C4;
	box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
	border-radius: .25rem;
	min-height: 140px;
}

.postitContent
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.postitContent h4
{
	margin: 0;
	margin-top: .5rem;
	font-family: 'Roboto Slab', serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--mainDark);
}

.postitContent p{
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	color: var(--gray);
}

.postitClose
{
	position: absolute;
	top: .5rem;
	right: .5rem;
	cursor: pointer;
}

.postitHide
{
	display: none;
}

.epdownloadKnop
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem .75rem;

	margin-top: 1rem;

	background-color: var(--mainDark);
	color: #FAFAFA;
	border-radius: .25rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	font-size: .75rem;
	text-decoration: none;
}


/*  MAIN NEWS FRONTPAGE  */

.anderNieuws
{
	grid-column-start: 1;
	grid-column-end: 3;
	margin-top: 0;
	margin-bottom: 0;

	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--mainDark);
}

.mainNewsGrid
{
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;

	margin-top: 3rem;
	padding-left: 8%;
	padding-right: 8%;
}

.mainNews
{
	position: relative;
	display: flex;

	grid-column-start: 1;
	grid-column-end: 3;

	background-color: var(--mainDark);
	border-radius: .5rem;
}


/* HOME PAGE HEADLINE */

.mainNewsHeadline
{
	position: relative;
	display: flex;
	flex-direction: column;

	width: 52%;
	min-height: 465px;

	padding-left: 2rem;
	padding-right: 1.5rem;
	padding-bottom: 2.5rem;
}

.mainNewsHeadline h1
{
	position: relative;
	display: block;

	font-family: 'Roboto Slab', serif;
	font-size: 2.25rem;
	font-weight: 400;
	color: #fff;
}

.mainNewsHeadlineImg
{
	position: relative;
	display: block;

	width: 100%;
	height: 100%;

	background-color: #cdcdcd;
	background-size: cover !important;
	background-position: center !important;
	
	border: solid 1px var(--mainLight);
	border-radius: .25rem;
	transition: .2s;
}

.mainNewsHeadlineImg:hover .mainNewsHeadlineImgTitle h2
{
	color: var(--mainLight);
	transition: .4s;
}

.mainNewsHeadlineImgTitle
{
	position: absolute;
	left: 0;
	bottom: 0;

	padding: .75rem;
	padding-bottom: 1.25rem;
}

.mainNewsHeadlineImgTitle small
{
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: .75rem;
	color: #fff;
}

.mainNewsHeadlineImgTitle h2
{
	margin: 0;
	margin-top: .5rem;
	font-family: 'Roboto Slab', serif;
	font-size: 1.75rem;
	font-weight: 600;
	color: #fff;
	transition: .3s;
}



/* HOME PAGE MEER NIEWS  MORE  */

.mainNewsMore
{
	position: relative;
	display: flex;
	flex-direction: column;

	justify-content: space-around;

	background-color: rgba(255, 255, 255, 0.15);
	width: 48%;

	border-top-left-radius:  30% 75%;
	border-bottom-left-radius:  30% 75%;

	border-top-right-radius: .5rem;
	border-bottom-right-radius: .5rem;

	padding-left: 6%;
	padding-right: .75rem;
	padding-top: .25rem;
	padding-bottom: .25rem;
}


.mainNewsMoreItem
{
	position: relative;
	display: flex;
	align-items: center;
	justify-items: space-between;
	text-decoration: none;
}

.mainNewsMoreItem:hover .mainNewsMoreItemTitle h3
{
	color: var(--mainLight);
	transition: .4s;
}


.mainNewsMoreItem img
{
	position: relative;
	display: block;
	flex-shrink: 0;

	margin-right: 1rem;

	width: 110px;
	height: 80px;
	object-fit: cover;
	object-position: center;

	border: solid 1px var(--mainLight);
	border-radius: .25rem;
}

.mainNewsMoreItemTitle h3
{
	margin: 0;
	margin-bottom: .25rem;
	font-family: 'Roboto Slab', serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	transition: .3s;
}

.mainNewsMoreItemTitle small
{
	margin: 0;
	font-family: 'Raleway', serif;
	font-size: 0.75rem;
	font-weight: 400;
	color: #fff;
}

.mainAgenda
{
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--mainLight);
	border-radius: .5rem;
}

.agendaPop
{
	position: absolute;
	left: 0;
	right: 0;
	max-height: 100%;
	overflow: hidden;
	padding-bottom: 0rem;
	background-color: var(--mainLight);
	border-radius: .5rem;
	z-index: 1000;
	transition: .3s;
	scroll-behavior: smooth;
}

.agendaPopOut
{
	box-shadow: 2px 4px 24px 1px rgba(0, 0, 0, 0.4);
	max-height: 130%;
	transition: .3s;
	overflow-y: scroll;
}

.agendaPopTitel
{
	position: relative;
	display: flex;
	justify-content: center;

	font-family: 'Roboto Slab', serif;
	font-size: 2.25rem;
	font-weight: 200;
	color: var(--mainDark);
}

.agendaPopTitel h3
{
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	font-weight: 400;
}

.agendaMeer
{
	position: sticky;
	display: flex;
	justify-content: center;
	left: 0;
	right: 0;
	bottom: -1px;

	background-color: var(--mainLight);
}

.agendaMeer img
{
	transform: rotate(0deg);
	transition: .4s;
	cursor: pointer;
}

.agendaMeerDraai img
{
	transform: rotate(180deg);
	transition: .6s;
}




/* AGENDA BERICHTEN */

.agendaBerichten{
	position: relative;
	display: flex;
	margin-top: 24px;
	align-items: center;
	justify-content: start;
	color: #023047;
}

.agendaDatum{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: none;
	width: 65px;
	height: 75px;
	margin-left: 24px;

	background-color: #FAFAFA;
	border-radius: .25rem;
	color: var(--mainDark);
}

.agendaDatumDag{
	position: relative;
	display: block;
	text-align: center;
	font-family: 'Raleway', serif;
	font-weight: 400;
	font-size: 1.75rem;	
	color: var(--mainDark);
}

.agendaDatumMaand{
	position: relative;
	display: block;
	text-align: center;
	font-family: 'Raleway', serif;
	font-weight: 400;
	font-size: .75rem;
}

.agendaDatumDagNaam{
	position: relative;
	display: block;
	text-align: center;
	font-family: 'Raleway', serif;
	font-weight: 200;
	font-size: 9px;
}

.agendaTitel{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	margin-left: 12px;
	margin-right: 12px;

	font-family: 'Raleway', serif;
	font-weight: 600;
	font-size: 1rem;
}






/* WEER SPREUK */

.weerWrap
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.weerSpreuk
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 4.5rem;
	margin-bottom: 4.5rem;
	width: 30%;

	text-align: center;
}

.weerSpreuk h3
{
	font-family: 'Roboto Slab', serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--mainDark);
}

.weerSpreuk small
{
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: .9rem;
	color: var(--mainDark);
	z-index: 10;
}

.weerSpreuk a
{
	color: var(--mainDark);
}





/* TWEETS and STUF */

.mainUpdates
{
	position: relative;
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(2, 1fr);
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 8rem;
	padding-bottom: 4rem;

	background-color: var(--mainLight);

	min-height: 600px;
}

.twitTitel
{
	position: relative;
	display: flex;
	justify-content: center;
	grid-column-start: 1;
	grid-column-end: 3;
	font-family: 'Roboto Slab', serif;
	font-size: 2.25rem;
	color: #FAFAFA;
}

.twitCard
{
	position: relative;
	display: flex;
	flex-direction: column;

	background-color: #FAFAFA;

	border-radius: .5rem;
	transition: .1s;
	cursor: pointer;
}

.twitCard:hover
{
	transform: scale(1.1);
}

.twitCard a
{
	text-decoration: none;
}

.twitDate
{
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: .5rem;
	padding: 1rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: .75rem;
	color: #85AEBB;
}

.twitBody
{
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.twitLogo
{
	position: relative;
	display: block;
	margin-left: 1.75rem;
}

.twitTweet h3
{
	margin: 0;
	margin-left: 2rem;
	margin-top: .25rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--mainDark);
}

.twitBericht
{
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 2rem;
}

.twitBericht p
{
	position: relative;
	display: block;
	padding-right: 1rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: .9rem;
	line-height: 145%;
	color: var(--mainDark);
}

.twitBericht a
{
	color: #85AEBB;
}

.twitBericht img
{
	position: relative;
	display: block;
	width: 30%;

	border: solid 1px var(--mainLight);
	border-radius: .25rem;
	object-fit: cover;
	object-position: center;
}




/* NIEUWS PAGINA */

.newsBody
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	margin-left: 26%;
	margin-right: 26%;
	padding-bottom: 3rem;
	word-wrap: break-word;
}

.breadcrum
{
	position: relative;
	display: block;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 3px;
	color: #939393;
}

.breadcrum a
{
	text-decoration: none;
	color: var(--mainDark);
}

.newsBody h1
{
	position: relative;
	display: block;

	font-size: 2.25rem;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	color: var(--mainDark);
}

.newsBody small
{
	position: relative;
	display: block;

	font-size: 1rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;

	color: #939393;
}

.newsBericht
{
	position: relative;
	display: block;

	font-size: 1.15rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	line-height: 150%;

	color: #383838;	
}

.newsBericht li
{
	margin-bottom: .5rem;
}

.newsBericht img
{
	position: relative;
	display: block;
	width: 82%;
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;

	border-radius: .25rem;
}

.headLineShare
{
	position: relative;
	display: flex;
	gap: 2rem;
	align-items: center;

	margin-top: 2.5rem;
	font-size: 1.15rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	height: 2.5rem;
	border-left: solid 2px var(--mainDark);
	padding-left: .75rem;

	color: var(--mainDark);		
}

.shareWhatsapp
{
	display: none;
}




/* MEER NIEUWS MEER NIEUWS */

.meerNieuws
{
	position: relative;
	display: block;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
	background-color: var(--mainLight);
}

.meerNieuwsGrid
{
	position: relative;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);

	margin-left: 26%;
	margin-right: 26%;
}

.meerNieuwsGrid .mainNewsMoreItem img
{
	border: solid 1px var(--mainDark);
}

.meerNieuwsGrid .mainNewsMoreItemTitle h3
{
	color: var(--mainDark);
}

.meerNieuwsGrid .mainNewsMoreItemTitle small
{
	color: var(--mainDark);
}

.meerNieuwsGrid .mainNewsMoreItem:hover .mainNewsMoreItemTitle h3
{
	color: #07313F;
	transition: .4s;
}

.meerNieuwsZoek
{
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: 4rem;
}

.meerNieuwsZoek form
{	
	position: relative;
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}

.epinput
{
	font-size: 1rem;
	padding: .5rem .75rem;
	color: var(--mainDark);

	border: solid 1px #DEDEDE;
	border-radius: .25rem;
	font-family: 'Raleway', sans-serif;
}

.epknop
{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

	padding-left: 1.5rem;
	padding-right: 1.5rem;

	font-size: 1rem;

	border: 0;
	border-radius: .25rem;

	background-color: var(--mainDark);
	color:  #FAFAFA;
	font-family: 'Raleway', sans-serif;
	font-weight: 600;

	cursor: pointer;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

.nieuwsGrid
{
	position: relative;
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(2, 1fr);

	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 3rem;
}

.newsHeadlineImg
{
	position: relative;
	display: block;

	width: 100%;
	height: 360px;

	background-color: #cdcdcd;
	background-size: cover !important;
	background-position: center !important;
	
	border: solid 1px var(--mainLight);
	border-radius: .25rem;
	transition: .2s;	
}

.nieuwsBreadcrum
{
	grid-column-start: 1;
	grid-column-end: 3;
}

.nieuwsPageTitel
{
	grid-column-start: 1;
	grid-column-end: 3;
	font-family: 'Roboto Slab', serif;
	font-size: 2.5rem;
	font-weight: 400;
	color:var(--mainDark);margin: 0;
}






/* FOOTER FOOTER FOOTER */

.footer
{
	position: relative;
	display: block;
	background-color: var(--mainDark);

	padding-left: 10%;
	padding-right: 10%;
	padding-top: 1.75rem;
	padding-bottom: 2rem;
}

.footerGrid
{
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: start;
}

.footerGridItem
{
	position: relative;
	display: block;
}

.footerGridItem h3
{
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 2.25rem;
	font-family: 'Roboto Slab', serif;
	font-weight: 600;
	color: #FAFAFA;
}

.footerGridItem a
{
	position: relative;
	display: block;
	font-size: 1rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	text-decoration: none;
	color: #FAFAFA;
	margin-bottom: 1rem;
	margin-right: .5rem;
	justify-self: start;
}

.footerGridItem a:hover
{
	text-decoration: underline;
	transition: .3s;
}

.footerGridItemSocial
{
	position: relative;
	display: flex;
	gap: 2rem;
	margin-top: 1.75rem;
}

.website
{
	position: relative;
	display: flex;
	justify-content: flex-start;

	margin-top: .75rem;

	font-family: 'Raleway', sans-serif;
	font-size: .75rem;
	color: rgba(255, 255, 255, 0.5);
	opacity: 0.5;
}

.website a
{
	font-size: .75rem;
	color: rgba(255, 255, 255, 0.7);
}


.blogGrid
{
	position: relative;
	display: grid;
	gap: 5rem;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 3rem;
	grid-template-columns: repeat(3, 1fr);
}

.twee-cols
{
	grid-template-columns: repeat(2, 1fr) !important;
}

.blogItem
{
	position: relative;
	display: flex;
	flex-direction: column;

	height: 300px;
	overflow: hidden;

	padding: 1.5rem 2rem;

	border-radius: .5rem;
	background-color: #fff;
	box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
	transition: .2s;

	cursor: pointer;
}

.blogItem:after
{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 60px;
	width: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, #FFFFFF 98%);
}

.blogItemMeer
{
	height: 100%;
	transition: .3s;
	padding-bottom: 3rem;
}

.blogItemImg
{
	position: relative;
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	object-position: center;
	border-radius: .25rem;
}

.blogItem h2
{
	margin-top: 1.5rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	font-size: 1rem;
}

.blogInhoud
{
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 150%;
}

.blogInhoud img
{
	position: relative;
	display: block;
	width: 100%;
	border-radius: .25rem;
}


.mainDorp
{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	grid-template-columns: 3fr;
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 5rem;
	padding-bottom: 7rem;
	background: linear-gradient(180deg, #B7D2DA 0%, #E9FAFF 100%);
	font-size: 1.15rem;
/*		font-family: 'Roboto Slab', serif;*/
	font-family: 'Raleway', serif;
	font-weight: 400;
	color: var(--mainDark);
}

.mainDorp div
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 30%;
}

.mainDorpImg
{
	border: solid 1px #fff;
}

/*.mainDorplink
{
	padding-left: 24px;
	padding-top: 8px;
	padding-bottom: 8px;
	text-decoration: none;
	width: 142px;
	color: #246174;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.35);
	border: solid 1px #246174;
	font-size: 1rem;
	border-radius: 8px;
	transition: .3s;
}*/

.mainDorp div a
{
	text-decoration: underline;
	color: var(--mainDark);
	font-weight: 600;
}

.mainDorp div a:hover
{
	text-decoration: none;
}

.mainDorp h2 {
	font-family: 'Roboto Slab', serif;
	font-size: 1.5rem;
}

.mainBlog
{
	position: relative;
	display: flex;
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 7rem;
	padding-bottom: 5rem;
	background-color: var(--mainLight);
}

.mainBlogWarp
{
	position: relative;
	display: flex;
	justify-content: flex-start;
	gap: 5rem;
	flex-wrap: no-wrap;
	overflow: hidden;
	scroll-behavior: smooth;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.mainBlogItem
{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;

	width: 220px;
	height: 285px;

	border: solid 3px #fff;
	border-radius: .25rem;

	cursor: pointer;
	overflow: hidden;

}

.mainBlogItem:first-child
{
	margin-left: 0px;
}

.mainBlogItem img
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: .3s;
}

.mainBlogItem:hover img
{
	transform: scale(1.1);
	transition: .3s;
}

.mainBlogItem h3
{
	position: relative;
	display: block;
	padding-left: .5rem;
	padding-right: .5rem;
	font-size: 1.25rem;
	font-family: 'Roboto Slab', serif;
	font-weight: 600;
	color: #FAFAFA;
	z-index: 9999;
	text-align: center;
}

.mainBlogItemShadow
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(358.75deg, rgba(0, 0, 0, 0.45) 1.07%, rgba(0, 0, 0, 0.35) 99.01%);
}

.mainBlogVolgende
{
	position: relative;
	display: flex;
	align-items: center;
	padding-right: .25rem;
	padding-left: .25rem;
	cursor: pointer;
}

.blogSpecial:last-child
{
	margin-bottom: 4rem;
}

.blogSpecial:before
{
	content: '';
	position: absolute;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	overflow: hidden;

	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1rem;

	color: #ffffff;
	font-size: 1rem;

	width: 100%;
	height: 0%;
	background-color: var(--mainDark);
	transition: .2s;
	transition-timing-function: ease-in-out;

	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 150%;

}
.blogSpecial:hover:before
{
	content: attr(data-inhoud);
	height: 45%;
	transition: .4s .2s;
	transition-timing-function: ease-in-out;
	border-top: solid 1px #fff;
}

.blogSpecial:hover .mainNewsHeadlineImgTitle
{
	opacity: 0;
	transition: 0.2s;
}

.terugNaarBlog
{
	position: relative;
	margin-top: 3rem;
	display: flex;
	align-items: center;
	gap: .25rem;
	width: 180px;
	height: 50px;

	padding-left: 1rem;

	border: solid 1px var(--mainDark);
	border-left: solid 4px var(--mainDark);
	border-radius: .25rem;
	background-color: var(--mainLight);
	color: var(--mainDark);
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: .2s;
}

.terugNaarBlog:hover
{
	background-color: var(--mainDark);
	color: var(--mainLight);
	border: solid 1px var(--mainLight);
	border-left: solid 4px var(--mainLight);
}


.mainNewsMoreMobile{
	display: none;
}

.install-btn{
	display: none;
}



.homeCarrBody{
	display: none;
}



@media(max-width: 1280px){

	.headerWrap
	{
		display: none;
	}

	.headerWrapMobile
	{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin-top: 1rem;
		margin-left: 10%;
		margin-right: 10%;
	}

	.hamburger{
		position: relative;
		display: block;
		/*margin-top: 1.5rem;*/
		z-index: 999;
	}

	.hamburger span{
		position: relative;
		display: block;
		width: 24px;
		height: 2px;

		margin-bottom: 6px;
		background-color: var(--mainDark);
		transition: .2s;
	}

	.hide{
	    opacity: 0;
	    transition: visibility 0.2s 0.2s, opacity 0.1s linear !important;
	}

	.naarBeneden{
	    transform: rotate(45deg) translateY(5px) translateX(5px);
	    transition: 0.2s;
	}

	.naarBoven{
	    transform: rotate(-45deg) translateY(-6px) translateX(6px);
	    transition: 0.2s;
	}

	.hamburgerMenu
	{
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		top: 5.5rem;
		left: 0;
		right: 0;
		height: 0;
		overflow: scroll;

		border-top-left-radius: .5rem;
		border-top-right-radius: .5rem;

		background-color: var(--mainLight);
		z-index: 1005;
		transition: .3s;
	}

	.hamburgerMenuIn
	{
		height: 100vh;
		transition: .5s;
	}

	.hamburgerMenu h2
	{
		position: relative;
		display: block;
		/*margin-left: 1.5rem;*/
		margin-top: 1.5rem;
		margin-bottom: 1.25rem;
		
		font-family: 'Roboto Slab', serif;
		font-size: 1.25rem;
		color: var(--mainDark);
	}

	.hamburgerMenu a
	{
		position: relative;
		display: block;
		/*margin-left: 2rem;*/
		margin-bottom: .75rem;
		font-family: 'Raleway', sans-serif;
		font-weight: 600;

		color: var(--mainDark);
	}

	.weerMobile
	{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin-bottom: 7px;
	}

	.weerMobile img
	{
		flex-shrink: 0;
	}

	.weerMobile p
	{
		font-family: 'Raleway', sans-serif;
		font-size: .75rem;
		font-weight: 400;
		margin: 0;
		flex-shrink: 1;
		color: var(--mainDark);
	}

	.rondjeTon
	{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		margin-top: .8rem;
		margin-bottom: 1.2rem;

		width: 42px;
		height: 42px;
		border-radius: 50%;

		/*background-color: var(--mainLight);*/
		border: solid 1px var(--mainLight);

		cursor: pointer;
	}

	.rondjeTon:hover::after
	{
		content: attr(data-tekst);
		position: absolute;
		top: 44px;
		left: 0;

		width: 180px;

		padding: .25rem .5rem;

		background-color: rgba(255, 255, 255, 0.9);
		border: solid 1px var(--gray);
		border-radius: .25rem;
		z-index: 999;

		font-family: 'Raleway', sans-serif;
		font-size: .8rem;
		font-weight: 400;
	}

	.mainNewsGrid
	{
		grid-template-columns: 1fr;
		column-gap: 0;
		transition: 0.3s;
	}



	/* TWITTER CARDS */

	.mainUpdates
	{
		grid-template-columns: 1fr;
	}


	.twitTitel
	{
		grid-column-start: 1;
		grid-column-end: 2;
	}



	/*  NIEUWS PAGINA */

	.newsPage
	{
		margin-top: 1.5rem;
	}

	.newsBody
	{
		margin-left: 10%;
		margin-right: 10%;
	}

	.newsBericht img
	{
		position: relative;
		display: block;
		width: 80%;
		margin-top: 1rem;
		margin-left: auto;
 		margin-right: auto;

		border-radius: .25rem;
	}


	.agendaPop
	{
		position: relative;
		height: 450px;
	}

	.agendaPopOut
	{
		height: 580px;
		overflow-y: scroll;
	}

	.meerNieuwsGrid
	{
		margin-left: 15%;
		margin-right: 15%;
	}

	.nieuwsGrid
	{
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 1.5rem;
		gap: 1rem;
		grid-template-columns: repeat(2, 1fr);
	}

	.newsHeadlineImg
	{
		height: 260px;
	}

	.blogGrid
	{
		margin-left: 10%;
		margin-right: 10%;
		grid-template-columns: repeat(2, 1fr);
	}
}









@media(max-width: 960px){

	.mainNews
	{
		flex-direction: column;
	}
	
	.mainNewsHeadline
	{
		width: 100%;
	}

	.mainNewsMore
	{
		padding-top: 2rem;
		padding-bottom: 2rem;
		width: 100%;
		border-radius: 0;
		gap: 2.5rem;
	}

	.weerSpreuk
	{
		margin-top: 1.5rem;
		width: 65%;
	}


	.newsBericht img
	{
		position: relative;
		display: block;
		width: 100%;
		border-radius: .25rem;
		margin-top: .5rem;
	}

	.anderNieuws
	{
		grid-column-start: 1;
		grid-column-end: 2;
	}

	.meerNieuwsGrid
	{
		grid-template-columns: 1fr;
		margin-left: 10%;
		margin-right: 10%;
	}

	.nieuwsGrid
	{
		margin-left: 1.5rem;
		margin-right: 1.5rem;
		margin-top: 1.5rem;
		gap: 1rem;
		grid-template-columns: 1fr;
	}

	.nieuwsBreadcrum
	{
		grid-column-start: 1;
		grid-column-end: 2;
	}

	.nieuwsPageTitel
	{
		grid-column-start: 1;
		grid-column-end: 2;
		font-size: 1.5rem;
	}

	.newsHeadlineImg
	{
		height: 260px;
	}

	.blogGrid
	{
		margin-left: 10%;
		margin-right: 10%;
		grid-template-columns: 1fr;
	}

	.twee-cols
	{
		grid-template-columns: 1fr !important;
	}
}












@media(max-width: 444px){

	.headerWrap
	{
		display: none;
	}

	.headerWrapMobile
	{
		margin-left: 1.5rem;
		margin-right: 1.5rem;
	}

	.headerWrapMobileHond
	{
		height: 75px;
		width: auto;
		filter: grayscale(1);
	}

	.headerWrapMobile a
	{
		flex-basis: 0;
	}

	.weerMobile
	{
		display: flex;
	}

	.mainNews{
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.mainNewsGrid
	{
		padding: 0;
		margin-top: 0rem;
		gap:0;
	}

	.mainNewsHeadline
	{
		padding: .25rem .75rem;
		margin-bottom: 1.75rem;
		min-height: 330px;
	}

	.mainNewsHeadlineImgTitle
	{
		padding-bottom: .75rem;
	}

	.mainNewsHeadlineImgTitle small
	{
		font-size: .75rem;
	}

	.mainNewsHeadlineImgTitle h2
	{	
		margin-top: 0;
		font-size: 1.25rem;
	}

	.mainNewsMoreItem img
	{
		width: 80px;
		height: 80px;
	}

	.mainNewsMoreItemTitle h3
	{
		font-size: 1rem;
	}

	.agendaPop{
		border-radius: 0;
	}

	/* POSTIT POSTIT */

	.postitWrap
	{
		padding-left: 0;
		padding-right: 0;
		padding-top: 1rem;
		padding-bottom: 1rem;
		overflow: hidden;
		justify-content: center;
	}

	.postitWrap
	{
		border-radius: .25rem;
	}

	.postitContent p
	{
		font-size: .8rem;
	}


	/*  WEER SPREUK */

	.weerSpreuk
	{
		margin-top: 3rem;
		width: 80%;
	}

	.weerSpreuk::after
	{
		left: 0;
		width: auto;
	}

	.weerSpreuk h3
	{
		font-size: 1.25rem;
	}

	.weerSpreuk small
	{
		font-size: .75rem;
	}



	/* TWITTER CARDS */

	.mainUpdates
	{
		padding-left: 5%;
		padding-right: 5%;
	}

	.twitDate
	{
		margin-bottom: 0;
		font-size: .75rem;
	}

	.twitBody
	{
		flex-direction: column;
	}

	.twitBericht
	{
		flex-direction: column;
	}

	.twitBericht img
	{
		width: 100%;
	}

	.twitLogo
	{
		display: none;
	}

	.twitCard:hover
	{
		transform: scale(1);
	}

	.newsBody
	{
		margin-left: 5%;
		margin-right: 5%;
	}

	.newsBody h1
	{
		font-size: 1.5rem;
	}

	.newsBody small
	{
		font-size: .75rem;
	}

	.newsBericht
	{
		font-size: 1rem;
	}

	.headLineShare
	{
		gap: 1.25rem;
		font-size: 1rem;
	}

	.breadcrum
	{
		font-size: .75rem;
	}

	.shareWhatsapp
	{
		display: block;
		margin-bottom: 4px;
	}

	.footerGrid
	{
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.nieuwsGrid
	{
		margin-left: 5%;
		margin-right: 5%;
	}

	.blogGrid
	{
		gap: 2rem;
		margin-left: 5%;
		margin-right: 5%;
	}

	.blogItem
	{
		padding: 1rem .75rem;
		box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
	}

	.blogItemImg
	{
		height: 130px;
	}

	.blogItemMeer
	{
		padding-bottom: 3rem;
	}

	.mainDorp{
		position: relative;
		display: flex;
		flex-direction: column;
	/*	grid-template-columns: 1fr;*/
		padding-left: 6%;
		padding-right: 6%;
		padding-top: 1rem;
		padding-bottom: .25rem;
		background-color: var(--mainLight);
		font-size: 1.25rem;
/*		font-family: 'Roboto Slab', serif;*/
		font-family: 'Raleway', serif;
		font-weight: 400;
		color: var(--mainDark);
	}

	.mainDorp h2 {
		font-family: 'Roboto Slab', serif;
		font-size: 1.5rem;
	}

	.mainDorp div
	{
		margin-bottom: 36px;
		width: 100%;
		font-size: 1rem;
		font-weight: 400;
	}

	.mainDorp div a
	{
/*		padding-left: 16px;*/
		font-size: 1rem;
/*		width: 130px;*/
	}

	.mainDorpImg
	{
		margin-bottom: 0px !important;
		border: solid 1px #fff;
		height: 190px !important;
	}

	.mainBlog
	{
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
	}

	.mainBlogWarp
	{
		gap: 3rem;
		overflow-x: scroll;
	}

	.mainBlogItem
	{
		width: 220px;
		height: 130px;

		border: solid 2px #fff;
	}

	.mainBlogItem:first-child
	{
		margin-left: 5%;
	}

	.mainBlogItem:last-child
	{
		margin-right: 5%;
	}

	.mainBlogItem h3
	{
		font-size: 1rem;
	}

	.mainBlogVolgende
	{
		display: none;
	}

	.terugNaarBlog
	{
		font-size: .8rem;
		width: 140px;
		height: 40px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	.mainNewsMoreMobile{
		display: flex;
	}

	.install-btn{
		display: flex;
		position: sticky;
		bottom: 10px;
		border: solid 1px #cc0000;
		z-index: 1000;
	}




.homeCarrBody{
	position: relative;
	display: block;
	padding-top: 24px;
	padding-bottom: 24px;
	background-color: #F4FBFF;
}

.homeCarrBody h3{
	margin-top: 0px;
	margin-left: 24px;
	font-size: 1.25rem;
	font-family: 'Roboto Slab', serif;
	font-weight: 600;
	color: var(--mainDark);
}

.homeCarr{
	width: 100%;
	height: 190px;
	margin-bottom: 14px;

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	overflow-x: auto;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
}

.homeCarr::-webkit-scrollbar {
  display: none;
}

.carrItem{
	position: relative;
	width: 125px;
	height: 165px;
	background-color: #cc0000;
	margin-left: 24px;
	flex: none;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
/*	filter: drop-shadow(0px 2px 6px rgba(2, 48, 71, 0.2));*/
	border-radius: 4px;
}

.carrItemWit{
	position: relative;
	width: 24px;
	height: 135px;
	flex: none;
}

.carrItemSub{
	position: relative;
	display: block;
	margin-left: 6px;
	margin-top: 4px;	
	font-family: 'Raleway', serif;
	font-size: 11px;
	color: #ffffff;
}

.carrItemTitel{
	position: relative;
	display: block;
	margin-left: 6px;
	margin-top: 4px;	
	font-family: 'Raleway', serif;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	line-height: 16px;

	text-shadow: 0px 0px 3px #023047;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0, 0.65); /* Fallback color */
  background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
  animation-name: animateblack;
  animation-duration: 0.7s;

  font-family: 'Raleway', serif;

}



@keyframes animateblack {
  from {background-color: rgba(0,0,0, 0);}
  to {background-color: rgba(0,0,0,0.65);}
}


/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  padding-bottom: 12px;
  width: 90%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  color: #023047;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0px 16px;
  background-color: var(--mainDark);
  color: white;
  height: 6px;
}

.modal-body {padding: 2px 16px;
	width: 90%;
	margin-top: -24px;
	margin-left: 0px;
	margin-right: 0px;
  max-height: 70vh;
  overflow: scroll;}

.modal-body h4{
	font-weight: 300;
	font-size: 13px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.modal-body h3{
	margin-top: 2rem;
	font-family: 'Roboto Slab', serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--mainDark);
}

.modal-body p{
	font-family: 'Raleway', serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--mainDark);
}

.modal-body a{
	color: #023047;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #ffffff;
  color: white;
}

}