@charset "utf-8";
/*  =========================================================================================
	Responsive CSS Grid template - Joomla 5.x template
	version 1.0.0
	package CNPJ5 v1.x
	Design by G. Zegveld
	Build by F.van Zwol
	copyright (C) 2025 by Chinees Plus - All rights reserved!
	========================================================================================= */
/*  =========================================================================================
	Font declaration
	========================================================================================= */
@font-face {
    font-family: Candara;
    src: url(../fonts/Candara.ttf);
    font-weight: normal;
}	
/*  =========================================================================================
	GENERAL STYLES
	========================================================================================= */
html {
	font-size: 1em;
	line-height: 1em;
}
body {
	background-color: white;
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	color: #333;
}
h1 {
	font-size: 1.75rem;
	line-height: 1.75rem;
}
h2 {
	font-size: 1.5rem;
	line-height: 1.5rem;
}
h3 {
	font-size: 1.375rem;
	line-height: 1.375rem;
}
h4 {
	font-size: 1.25rem;
	line-height: 1.25rem;
}
h5 {
	font-size: 1.0rem;
	line-height: 1.0rem;
}
h6 {
	font-size: 0.875rem;
	line-height: 0.875rem;
}
p {
	font-size: 0.75rem;
	line-height: 1rem;
	margin: 0 0 0.625em 0;
}
table td {
	font-size: 0.75rem;
	line-height: 1rem;
}
.clearfix {
	content: ' ';
	display: block;
	clear: both;
}

/*  =========================================================================================
	LAYOUT STYLES
	========================================================================================= */
/*  Grid - declarations ===================================================================== */
.main-container {grid-area: main;}
.header-container {grid-area: header;}
.header-leftcolumn {grid-area: header-leftcolumn;}
.header-rightcolumn {grid-area: header-rightcolumn;}
.header-nav-mobile {grid-area: header-nav-mobile;}
.navigation-container {grid-area: navigation;}
.navigation-leftcolumn {grid-area: navigation-leftcolumn;} 
.navigation-centercolumn {grid-area: navigation-centercolumn;}
.navigation-rightcolumn {grid-area: navigation-rightcolumn;}			
.content-container {grid-area: content;}
.content-leftcolumn {grid-area: content-leftcolumn;}
.content-centercolumn {grid-area: content-centercolumn;}
.content-rightcolumn {grid-area: content-rightcolumn;}
.footer-container {grid-area: footer;}
.footer-leftcolumn {grid-area: footer-leftcolumn;}
.footer-centercolumn {grid-area: footer-centercolumn;}
.footer-rightcolumn {grid-area: footer-rightcolumn;}
/*  Grid - General ========================================================================== */
.main-container {
	background-color: white;
	margin: auto;
	padding: 0.5em 0 0 0;
	display: grid;
	grid-gap: 0em;
	grid-row-gap: 1em;
	grid-template-columns: 10fr;
	grid-template-rows: 148px 32px auto 74px;
	grid-template-areas: 
		"header"
		"navigation"
		"content"
		"footer";
}
/*  Grid - desk/laptop ====================================================================== */
@media only screen and (min-width: 1024px) {
	.main-container {
		max-width: 1150px;
		grid-row-gap: 1.2em;
		box-shadow: 0 0 2.5em 0 #333333;
	}
	.header-container {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 4.5fr 5.5fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"header-left-column	header-right-column";
	}
	.header-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		background-image: url(../images/cnp_logo.png);
		background-repeat: no-repeat;
		background-position: 39% center;
	}
	.header-rightcolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		background-image: url(../images/schilderij_cnp.png);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 85%;
	}
	.header-nav-mobile {
		display: none;
	}
	.navigation-container {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 2.1fr 6.45fr 1.45fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"navigation-leftcolumn	navigation-centercolumn	navigation-rightcolumn";
	}
	.navigation-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1em;
	}
	.navigation-centercolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1.25em;
	}
	.navigation-rightcolumn {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		padding-right: 0.5em;
	}
	.content-container {
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 2.1fr 6.45fr 1.45fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"content-leftcolumn	content-centercolumn	content-rightcolumn";
	}
	.content-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1em;
	}
	.content-centercolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1.25em;
	}
	.content-rightcolumn {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		padding-right: 0.5em;
	}
	.footer-container {
		grid-column: 1 / span 1;
		grid-row: 4 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 2.1fr 6.45fr 1.45fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"footer-leftcolumn	footer-centercolumn	footer-rightcolumn";
		padding-top: 0.4em;
		background-color: #D90000;
		color: white;
	}
	.footer-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1em;
	}
	.footer-centercolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1.25em;
	}
	.footer-rightcolumn {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		padding-right: 0.5em;
	}
}
/*  Grid - tablet =========================================================================== */
@media only screen and (min-width: 568px) and (max-width: 1023px) {
	.main-container {
		grid-row-gap: 0.8em;
		grid-template-rows:110px 34px auto 76px;
	}
	.header-container {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		display: grid;
		grid-gap: 0em;
		grid-template-columns: 4.5fr 5.5fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"header-left-column	header-right-column";
		}
	.header-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		background-image: url(../images/cnp_logo.png);
		background-repeat: no-repeat;
		background-position: 18% center;
		background-size: 74%; 
	}
	.header-rightcolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 2;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		background-image: url(../images/schilderij_cnp.png);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 75%;
	}
	.header-nav-mobile {
		display: none;
	}
	.navigation-container {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 0.5fr 7.8fr 1.7fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"navigation-leftcolumn	navigation-centercolumn	navigation-rightcolumn";
	}
	.navigation-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1em;
	}
	.navigation-centercolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1.25em;
	}
	.navigation-rightcolumn {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		padding-right: 0.5em;
	}
	.content-container {
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 0.5fr 7.8fr 1.7fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"content-leftcolumn	content-centercolumn	content-rightcolumn";
		padding-top: 0.5em;
	}
	.content-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1em;
	}
	.content-centercolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1.25em;
	}
	.content-rightcolumn {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		padding-right: 0.5em;
	}
	.footer-container {
		grid-column: 1 / span 1;
		grid-row: 4 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 0.5fr 7.8fr 1.7fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"footer-leftcolumn	footer-centercolumn	footer-rightcolumn";
		padding-top: 0.4em;
		background-color: #D90000;
		color: white;
	}
	.footer-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1em;
	}
	.footer-centercolumn {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		padding-right: 1.25em;
	}
	.footer-centercolumn p {
		font-size : 0.7rem;
	}
	.footer-rightcolumn {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
		padding-right: 0.5em;
	}
}
/*  Grid - Mobile =========================================================================== */
@media only screen and (max-width: 568px) {
	.main-container {
		grid-row-gap: 0.3em;
		padding-top: 0;
		grid-template-rows: 50px auto 40px;
		grid-template-areas: 
			"header"
			"content"
			"footer";
	}
	.header-container {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		display: grid;
		padding: 0 0.5em;
		grid-gap: 0;
		grid-template-columns: 9fr	1fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"header-leftcolumn	header-nav-mobile";
	}
	.header-leftcolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		background-image: url(../images/cnp_logo.png);
		background-repeat: no-repeat;
		background-position:0% center;
		background-size: 60%;
	}
	.header-rightcolumn {
		display: none;
	}
	.header-nav-mobile {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		align-items: center;
		justify-items: center;
	}
	.navigation-container, .navigation-leftcolumn, .navigation-centercolumn, .navigation-rightcolumn {
		display: none;
	}
	.content-container {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		display: grid;
		padding: 0.6em 0.5em 0 0.5em;
		grid-gap: 0;
		grid-template-columns: 10fr;
		grid-template-rows: auto;
		grid-template-areas: 
			"content-centercolumn"
			"content-rightcolumn";
	}
	.content-leftcolumn {
		display: none;
	}
	.content-centercolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}
	.content-rightcolumn {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		border-top				: 1px solid #D90000;
		margin-top				: 0.4em;
		padding-top 			: 0.4em;
	}
	.footer-container {
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
		display: grid;
		padding: 0 0.5em;
		grid-gap: 0;
		grid-template-columns: 10fr;
		grid-template-rows: 1fr;
		grid-template-areas: 
			"footer-centercolumn";
		background-color: #D90000;
		color: white;
	}
	.footer-leftcolumn, .footer-rightcolumn {
		display: none;
	}
	.footer-centercolumn {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}
	.footer-centercolumn p {
		font-size : 0.5rem;
	}
}
/*  =========================================================================================
	CONTENT & COMPONENT STYLES
	========================================================================================= */
/* ---------------------------------------------------------------------------------------
	Pagination styles
	-------------------------------------------------------------------------------------- */
    div.com-content-category-blog__navigation {	}
	div.com-content-category-blog__navigation p.counter {
		display					: block;
		float 					: none !important;
		padding					: 1em 0;
		font-size				: 0.6875em;
	}
	div.com-content-category-blog__pagination {}
    div.com-content-category-blog__pagination nav.pagination__wrapper {
		display: inline !important;
	}
	div.com-content-category-blog__pagination nav.pagination__wrapper ul.pagination {
		}
	div.com-content-category-blog__pagination nav.pagination__wrapper ul.pagination li.page-item {}
	div.com-content-category-blog__pagination nav.pagination__wrapper ul.pagination li.active.page-item {}
	div.com-content-category-blog__pagination nav.pagination__wrapper ul.pagination li.active.page-item a.page-link {
		background-color: lightgrey !important;
		border-color: lightgrey !important;
	}
	div.com-content-category-blog__pagination nav.pagination__wrapper ul.pagination li.page-item span.page-link,
	div.com-content-category-blog__pagination nav.pagination__wrapper ul.pagination li.page-item a.page-link {
		font-size: 0.625em !important;
		color: #333 !important;
	}

	/* ---------------------------------------------------------------------------------------
		Pagination Articles styles
		-------------------------------------------------------------------------------------- */
	ul.pager {
		text-align				: center;
	}
	ul.pager li.previous a,
	ul.pager li.next a {
		float					: none;
		display					: inline-block;
		margin-right			: 1.25em;
		margin-left				: 1.25em;
	}
	/* ---------------------------------------------------------------------------------------
		Article styles
		-------------------------------------------------------------------------------------- */
		.page-header {
			margin		: 0;
		}
		.page-header h1 {
			margin : 0;
			margin-bottom	: 0.5em;
		}
		.page-header h2{
			margin : 0;
			margin-bottom	: 1em;
			font-size				: 1em;
			line-height				: 1em;
			text-decoration: underline solid #ddd;
		}
		[class*="leading-"], .items-row {
			margin-bottom: 2em; 
		}
		table {
			margin-bottom	: 1em;
		}
	/* ---------------------------------------------------------------------------------------
	Tooltip styles
	-------------------------------------------------------------------------------------- */
.tooltip-inner,
.tooltip-arrow {
	display					: none !important;
}

/*  =========================================================================================
	PLUGIN STYLES
	========================================================================================= */
/*  =========================================================================================
	MODULE STYLES
	========================================================================================= */
/* ---------------------------------------------------------------------------------------
	Menu styles
	-------------------------------------------------------------------------------------- */
/* General settings */
div.maximenuckh {
	padding-top	 		: 0.125em;
	font-family			: Candara, Verdana, sans-serif;
	color				: #333;
}
a.maximenuck::after {
	display : none !important;
}
ul.maximenuck {
	padding : 0 !important;
}
/* Style level 1 */
ul.maximenuck {
	font-size: 1.125rem;
}
ul.maximenuck li.maximenuck.level1 a.maximenuck {
	padding-right		: 0.875rem;
	line-height			: 1.5rem;
	color				: #333;
}
ul.maximenuck li.maximenuck.level1 a.maximenuck:hover {
	color				: Red;
}
ul.maximenuck li.maximenuck.current.active.level1 a.maximenuck {
	color				: #dd0000;
}
/* Style level 2 */
div.maximenuck2 {
	border-bottom		: 1px solid #F0F0F0;
	background-color	: #F0F0F0;
}
ul.maximenuck li.maximenuck.level2 a.maximenuck{
	padding				: 0 1em 0 0.55em;
	font-size 			: 0.975rem;
	line-height			: 1.5rem;
	color				: #333;
}
ul.maximenuck li.maximenuck.level2 a.maximenuck:hover {
	color				: Red;
}
ul.maximenuck li.maximenuck.current.active.level2 a.maximenuck {
	color				: #dd0000;
}
/* mobile-menu */
/* required settings mobile menu ck
   Text - custom text / menu bar text - <space> */
div.mobilemenuck-bar {
	font-size : 1.2em;
	text-align: right;
}
div.mobilemenuck-bar div.mobilemenuck-bar-title,
div.mobilemenuck-bar div.mobilemenuck-bar-button {
	background-color : transparent;
	color : #888;
}
div.mobilemenuck-bar div.mobilemenuck-bar-button {
	position:relative !important;
	text-align: right;
	padding-top: 0em !important;
}
div.mobilemenuck-title {
	background-color: #DDD !important;
	color: #333 !important;
}
div.mobilemenuck-title.mobilemenuck-backbutton {
	color: #AA0000 !important;
}
div.mobilemenuck-title.mobilemenuck-backbutton svg{
	fill: #AA0000 !important;
}
div.mobilemenuck {
	background-color: white !important;
	font-family		: Candara, Verdana, sans-serif;
}
div.mobilemenuck-button {
		color : #888;
}
div.mobilemenuck-item {
	border-bottom: 1px solid #ddd;
}
div.menuck.maximenuck.level1,
div.menuck.maximenuck.level2 {
	background-color: transparent !important;
}
div.menuck.maximenuck.level1 a.maximenuck,
div.menuck.maximenuck.level2 a.maximenuck {
	font-size : 0.825em !important;
	color: #333 !important;
}
div.menuck.maximenuck.current.active.level1 a.maximenuck,
div.menuck.maximenuck.current.active.level2 a.maximenuck {
	font-size : 0.825em !important;
	color: #dd0000 !important;
}
div.menuck.maximenuck div.mobilemenuck-togglericon::after{
	background-color: transparent !important;
	color:#AA0000 !important;
}

/* ---------------------------------------------------------------------------------------
	Banner / custom-module styles
	-------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1024px) {
	div.moduletable.leftcolumn-image {
		padding-bottom			: 1.5em;
	}
	div.moduletable.leftcolumn-image:after {
		content: ' ';
		display: block;
		clear: both;
	}
	div.moduletable.rightcolumn-image {
		display					: none;
	}
	div.moduletable.rightcolumn-message {
		padding-bottom			: 1.5em;
	}
	div.moduletable.rightcolumn-message:after {
		content: ' ';
		display: block;
		clear: both;
	}
	div.moduletable.rightcolumn-message p {
		font-size				: 0.875rem;
		line-height				: 1.14rem;
		font-weight				: normal;
	}
}
@media only screen and (min-width: 568px) and (max-width: 1023px) {
	div.moduletable.leftcolumn-image {
		display					: none;
	}
	div.moduletable.rightcolumn-image {
		padding-bottom			: 1.5em;
	}
	div.moduletable.rightcolumn-image:after {
		content: ' ';
		display: block;
		clear: both;
	}
	div.moduletable.rightcolumn-message {
		padding-bottom			: 1.5em;
	}
	div.moduletable.rightcolumn-message:after {
		content: ' ';
		display: block;
		clear: both;
	}
	div.moduletable.rightcolumn-message p {
		clear					: both;
		font-size				: 0.7rem;
		line-height				: 1.0rem;
		font-weight				: normal;
	}
}
@media only screen and (max-width: 568px) {
	div.moduletable.leftcolumn-image, div.moduletable.rightcolumn-image {
		display					: none;
	}
	div.moduletable.rightcolumn-message {
		padding-bottom			: 0.1em;
	}
	div.moduletable.rightcolumn-message:after {
		content: ' ';
		display: block;
		clear: both;
	}
	div.moduletable.rightcolumn-message p {
		font-size				: 0.7rem;
		line-height				: 1.0rem;
		font-weight				: normal;
	}
}