.newsitem {
	width: 100%;
	background: #fcfcfc;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.newsitem:hover {
	background:#fff;
}
.newsitem a,
.newsitem a:hover {
	color: #555;
	text-decoration: none;
}
.newscontainer {
	display: flex;
	flex-wrap: wrap;
}
.newscontainer>div {
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 4px;
}
.newsdate {
	font-family: 'Jaldi', sans-serif;
}
@media (min-width:768px) {
	.newscontainer>div {
		flex: 0 49.6%;
		margin: .2%;
		flex-grow:1;
	}
}
.newsitem img {
	width: 125px!important;
	height: 125px!important;
	padding-right: 5px;
	float:left;
}
@media (max-width:767px) {
	.newscontainer>div {
		flex: 100%;
		margin: .2% 0;
	}
	.newsitem img {
		width: 75px!important;
		height: 75px!important;
	}
}
.newsitem .img-responsive,
.detail .img-responsive {
	object-fit: cover;
}
.direction {
	font-size: 90%;
	text-align: center;
	padding: 15px;
}
.detail {
	border: 1px solid #ddd;
	padding: 15px;
	background: #fcfcfc;
	margin-bottom: 15px;
	border-radius: 4px;
	display: block !important;
	width: 100%;
}
.detail h1 {
	margin:0 0 15px 0;
}

/* ==========================================================================
   DE KOGELVRIJE 4-KOLOMS INLINE-BLOCK RESET (GEEN FLOATS, GEEN GRID)
   ========================================================================== */

/* 1. We dwingen de paragraaf met de afbeeldingen om breed te blijven */
.detail p {
	display: block !important;
	width: 100% !important;
	clear: both !important;
}

/* 2. Maak van elke afbeeldingslink een blok dat netjes naast elkaar stroomt */
.detail a.colorbox {
	display: inline-block !important;
	vertical-align: top !important;
	/* Exact 25% breedte minus de tussenruimte, zodat er ALTIJD max 4 passen */
	width: calc(25% - 12px) !important;
	max-width: calc(25% - 12px) !important;
	margin-right: 12px !important;
	margin-bottom: 15px !important;
	box-sizing: border-box !important;
	float: none !important;
}

/* 3. Verwijder de rechtermarge van de 4e afbeelding in de rij */
.detail a.colorbox:nth-of-type(4n) {
	margin-right: 0 !important;
}

/* 4. VERNIETIG DE HARDNEKKIGE 100% BREEDTE VAN JOUW AFBEELDINGEN */
/* Deze selector is super-specifiek gemaakt zodat hij de oude CSS breekt */
div.detail p a.colorbox img.img-responsive,
.detail img {
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid #ddd !important;
	width: 100% !important; /* Dwingt de afbeelding binnen de 25% van de .colorbox */
	height: 450px !important; /* Jouw gewenste vaste hoogte van 450px */
	max-height: 450px !important;
	object-fit: cover !important; /* Voorkomt dat de schepen vervormen */
	display: block !important;
	float: none !important;
}

/* 5. RESET VOOR DE TEKST-PARAGRAFEN */
/* Dit zorgt ervoor dat alle tekst die NA de fotoreeks komt eronder MOET starten */
.detail p:not(:has(.colorbox)) {
	display: block !important;
	width: 100% !important;
	clear: both !important;
	margin-top: 15px !important;
}

/* RESPONSIVE DESIGN VOOR KLEINERE SCHERMEN */
@media (max-width: 992px) {
	/* Op tablets tonen we er 2 naast elkaar */
	.detail a.colorbox {
		width: calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		margin-right: 16px !important;
	}
	.detail a.colorbox:nth-of-type(4n) {
		margin-right: 16px !important;
	}
	.detail a.colorbox:nth-of-type(2n) {
		margin-right: 0 !important;
	}
	div.detail p a.colorbox img.img-responsive, .detail img {
		height: 350px !important;
	}
}

@media (max-width: 600px) {
	/* Op smartphones alles netjes onder elkaar op volledige breedte */
	.detail a.colorbox {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 10px !important;
		display: block !important;
	}
	div.detail p a.colorbox img.img-responsive, .detail img {
		height: auto !important; /* Automatische hoogte voor mobiel */
	}
}